/* css/contact.css */

/* ==============================================
   Contact Page Hero
================================================ */
.hero-contact {
  min-height: 40vh;
}

/* ==============================================
   Two-Column Contact Layout
   Left col = info + book CTA (stretches to match form height)
   Right col = send-message form
================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--spacing-10);
  align-items: stretch;   /* both columns same height */
}

/* ---- LEFT COLUMN: Info ---- */
.contact-info {
  display: flex;
  flex-direction: column;
  /* Tag + heading + subtitle grouped at top; cards + book-box spread to fill */
}

.contact-info .tagline {
  margin-bottom: var(--spacing-2);
  display: block;
}

.contact-info h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: var(--spacing-3);
}

.contact-info > p {
  margin-bottom: var(--spacing-6);
  font-size: 0.95rem;
}

/* Wrapper that holds only the cards and book-box, and fills remaining space */
.contact-cards-wrap {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--spacing-4);   /* breathing room between each card */
}

/* Push the book-box to the bottom of the column */
.contact-book-box {
  margin-top: auto;
  padding: 36px 32px;           /* generous padding — feels like a proper CTA block */
  background: linear-gradient(135deg, rgba(26,122,138,0.07) 0%, rgba(26,122,138,0.14) 100%);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(26, 122, 138, 0.22);
  min-height: 140px;            /* enough vertical space for title + button */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-book-box h4 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--color-text-heading);
  text-align: center;
}

/* Info cards — icon + text on the same horizontal line, generous padding */
.info-card {
  display: flex;
  align-items: center;
  gap: 20px;                    /* explicit px gap between icon and text */
  padding: var(--spacing-6) var(--spacing-6);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  border: 1px solid rgba(0, 0, 0, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.icon-circle {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(26, 122, 138, 0.10);
  flex-shrink: 0;
}

.icon-circle svg {
  width: 24px;
  height: 24px;
}

.info-card-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-1);
  min-width: 0;
}

.info-card-text h4 {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.info-card-text p,
.info-card-text a {
  font-size: 1rem;          /* clearly readable value */
  font-weight: 500;
  color: var(--color-text-heading);
  margin: 0;
  line-height: 1.4;
}

.info-card-text a {
  color: var(--color-primary);
}

.info-card-text a:hover {
  color: var(--color-primary-dark, #145f6c);
}

/* ---- RIGHT COLUMN: Form ---- */
.contact-form-wrapper {
  background-color: var(--color-bg-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-8);
  border: 1px solid rgba(0,0,0,0.05);
  /* Stretch to full column height */
  display: flex;
  flex-direction: column;
}

.contact-form-wrapper h3 {
  margin-bottom: var(--spacing-6);
  font-size: var(--font-size-xl);
}

#contact-form {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Push send-button to bottom of form */
#contact-form button[type="submit"] {
  margin-top: auto;
}

/* ==============================================
   Responsive
================================================ */
@media (max-width: 960px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }
  .contact-info {
    /* On mobile info column doesn't need to stretch */
    height: auto;
  }
  .contact-cards-wrap {
    flex-grow: 0;
  }
  .contact-book-box {
    margin-top: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .form-row-mobile {
    grid-template-columns: 1fr;
  }
  .contact-form-wrapper {
    padding: var(--spacing-6);
  }
}