/* contact.css - Updated with new palette */

:root {
  /* Semantic color variables based on palette */
  --primary: #2E2D4D;      /* Dark Navy */
  --secondary: #4E5571;    /* Slate Blue */
  --tertiary: #6D7C95;     /* Steel Blue */
  --quaternary: #889EB3;   /* Light Steel */
  --quinary: #9AB4C7;      /* Pale Blue */
  --accent: #BDE1EF;       /* Sky Blue */
  /* Gradient from darkest to lightest */
  --gradient: linear-gradient(135deg, var(--primary), var(--accent));
}

/* —— Hero (simple rectangle) —— */
.hero-contact {
  background: var(--gradient);
  color: #fff;
  text-align: center;
  padding: 4rem 1rem;
  position: relative;
  z-index: 1;
}

/* —— Two-column layout —— */
.contact-section {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto 4rem;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

/* —— Left: 2×2 grid of contact cards —— */
.contact-cards {
  flex: 1 1 60%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.contact-card {
  background: #fff;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
}
.contact-card h3 {
  margin: 0.5rem 0 0.25rem;
  color: var(--primary);
  font-size: 1.25rem;
}
.contact-card .role {
  color: var(--secondary);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}
.contact-card .email {
  color: #6D7C95;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}
.contact-card .email:hover {
  text-decoration: underline;
}

/* —— Right: “Get In Touch” panel with real envelope graphic —— */
.contact-graphic {
  flex: 1 1 35%;
  background: #ffffff00;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

/* new envelope image style */
.contact-graphic .contact-image {
  width: 120px;
  height: auto;
  margin-bottom: 1rem;
  display: block;
}

/* panel text */
.contact-graphic h2 {
  font-size: 1.75rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.contact-graphic p {
  font-size: 1rem;
  color: var(--quaternary);
  line-height: 1.5;
}


.avatar-img {
  width: 100px;
  height: 100px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  object-fit: cover;   
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}


/* ===== APPEND-ONLY: Contact page responsive fixes ===== */

/* 1) Allow flex children to shrink inside the row to avoid overflow */
.contact-cards,
.contact-graphic { min-width: 0; }

/* 2) Long emails must wrap on small screens */
.contact-card .email {
  overflow-wrap: anywhere;  /* break long addresses if needed */
  word-break: break-word;
}

/* 3) Make the hero used on contact page consistent if ".hero" is used */
.hero { margin-left: auto; margin-right: auto; }

/* 4) Mobile/tablet layout fixes */
@media (max-width: 992px) {
  /* Stack columns vertically and keep nice spacing */
  .contact-section {
    flex-direction: column;
    gap: 1.25rem;
    padding: 0 12px;             /* match mobile gutter */
  }

  /* Full width rows */
  .contact-cards,
  .contact-graphic { flex: 1 1 100%; }

  /* Keep grid comfortable on tablets (2 cols) */
  .contact-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* Phones: single column cards, smaller paddings */
@media (max-width: 576px) {
  .contact-cards { grid-template-columns: 1fr; }
  .contact-card { padding: 1rem; }
  .contact-graphic { padding: 1rem; }

  /* Override the inline width=250px if it exists */
  .contact-graphic .contact-image {
    width: min(180px, 70vw) !important;   /* beats inline 250px */
    height: auto;
    max-width: 100%;
  }
}
/* ===== END APPEND-ONLY ===== */