:root {
  --primary: #fbdc30;
}
:root {
  --header-height: 80px;
}

.contact-hero {
  padding-top: var(--header-height);
}

/* ============================================================
   GLOBAL RESET FOR CONTACT PAGE SECTIONS
   ============================================================ */
.contact-section {
  margin-top: 0;
  padding: 48px 0 56px;
  background: linear-gradient(
    to bottom,
    #fbdc30 -10%,
    #ffffff 50%,
    #fbdc30 120%
  );
}

/* ============================================================
   HERO
   ============================================================ */
.contact-hero {
  min-height: 68vh;
  background: url("/images/contact_hero_image.jpeg") center center / cover
    no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-hero-overlay {
  position: absolute;
  inset: 0;
}

.contact-hero-content {
  position: relative;
  text-align: center;
  color: #fff;
  max-width: 700px;
  z-index: 1;
  padding: 0 20px;
  margin: clamp(40px, 8vh, 120px) auto;
}

.contact-hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
  margin: 0 0 1rem 0;
  font-weight: 700;
  letter-spacing: -1px;
}

.contact-hero-content p {
 font-size: 1.1rem;
  line-height: 1.6;
  color: #ece4d4;
  margin-bottom: 0;
}

/* ============================================================
   MAIN TWO-COLUMN LAYOUT
   The key: both columns are flex children of a grid row.
   Left = form (fixed flex column).
   Right = flex column: cards + map, fills remaining height.
   ============================================================ */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: stretch; /* both columns stretch to same height */
}

/* ============================================================
   LEFT: FORM CARD
   ============================================================ */
.contact-form-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid black;
  border-radius: 22px;
  padding: 2.8rem 2.4rem;
  box-shadow: 0 16px 34px rgba(47, 49, 51, 0.08);
  display: flex;
  flex-direction: column;
}

.contact-form-card h2 {
  color: #3e3a33;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.4rem;
}

/* The form fields wrapper fills remaining vertical space */
.form-fields {
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex: 1;
}

@media (max-width: 500px) {
  .form-fields {
    gap: 20px;
  }
}

.contact-form-card input {
  /* background: #f8f5ee; */
  background: white;
  border: 2px solid black;
  padding: 0.95rem 1rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: inherit;
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    background 0.25s;
  width: 100%;
}

.contact-form-card textarea {
  /* background: #f8f5ee; */
  background: white;
  border: 2px solid black;
  padding: 0.95rem 1rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: inherit;
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    background 0.25s;
  width: 100%;
  /* Textarea grows to fill remaining form height */
  flex: 1;
  min-height: 120px;
  resize: none;
  overflow-y: auto;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus {
  /* background: #fff; */
  border-color: var(--primary);
  /* box-shadow: 0 0 0 4px rgba(212, 160, 23, 0.12); */
  outline: none;
}

.contact-form-card button[type="submit"] {
  /* background: linear-gradient(135deg, #d4a017, #b8860b); */
  background: var(--primary);
  color: #fff;
  padding: 1rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  margin-top: 4px;
}

.contact-form-card button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(184, 134, 11, 0.22);
}

/* ============================================================
   RIGHT COLUMN: flex column that fills the same height as form
   ============================================================ */
.contact-right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* stretch to match the form height thanks to align-items:stretch on parent */
}

/* ============================================================
   CONTACT CARDS STACK (inside right col)
   ============================================================ */
.contact-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: #ffffff;
  border: 1.5px solid black;
  border-radius: 18px;
  padding: 1.2rem 1.4rem;
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.contact-card:hover {
  transform: translateX(-6px);
  border-color: #d4a017;
  box-shadow: 0 12px 28px rgba(47, 49, 51, 0.1);
}

.icon-box {
  min-width: 50px;
  height: 50px;
  border-radius: 13px;
  background: linear-gradient(145deg, #f7ecd0, #e0ddd6);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.icon-box svg,
.icon-box [data-lucide] {
  width: 20px;
  height: 20px;
  stroke: black;
}

.contact-card-text h3 {
  color: #000;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.contact-card-text p {
  /* color: #6f7277;
  font-weight: 500; */
  margin: 3px 0 0;
  /* font-size: 0.88rem; */
  /* line-height: 1.4; */

  font-size: 0.95rem;
  line-height: 1.6;
  color: #000;
}

.contact-card-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 1px;
  text-decoration: none;
}

.contact-card-link svg,
.contact-card-link [data-lucide] {
  width: 13px;
  height: 13px;
  stroke: var(--primary);
}

/* ============================================================
   MAP BLOCK (inside right col — grows to fill remaining height)
   ============================================================ */
.contact-map-inline {
  flex: 1; /* ← takes all remaining height so right col = form height */
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1.5px solid black;
  border-radius: 18px;
  overflow: hidden;
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  min-height: 200px; /* safety floor so map never collapses */
}

.contact-map-inline:hover {
  transform: translateX(-6px);
  border-color: #d4a017;
  box-shadow: 0 12px 28px rgba(47, 49, 51, 0.1);
}
.map-location-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(221, 213, 198, 0.7);
  flex-shrink: 0;
}

.map-location-header .icon-box {
  min-width: 44px;
  height: 44px;
}

.map-location-header h3 {
  color: #000;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 2px;
}

.map-location-header p {
  /* color: #6f7277;
  font-size: 0.82rem; */
  margin: 3px 0 0;
  /* line-height: 1.4; */

  font-size: 0.95rem;
  line-height: 1.6;
  color: #000;
}

/* The iframe wrapper fills all remaining height inside the map card */
.map-embed-wrap {
  flex: 1;
  min-height: 0;
}

.map-embed-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1024px) {
  .contact-hero {
    min-height: 75vh;
  }

  @media (max-width: 768px) {
    .contact-hero {
      min-height: auto;
      padding-top: 110px;
      padding-bottom: 60px;
    }
  }
}

/* ============================================================
   RESPONSIVE — tablet (≤ 992px): stack into single column
   ============================================================ */
@media (max-width: 992px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* On tablet/mobile the right col loses its height-matching role,
     so we give the map a sensible fixed height */
  .contact-map-inline {
    flex: none;
  }

  .map-embed-wrap {
    height: 320px;
  }

  .contact-form-card {
    padding: 2rem 1.8rem;
  }

  /* textarea reverts to a fixed height on smaller screens */
  .contact-form-card textarea {
    flex: none;
    height: 160px;
  }
}

/* ============================================================
   RESPONSIVE — mobile (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
  .contact-section {
    padding: 28px 0 36px;
  }

  /* Give the container itself horizontal breathing room */
  .contact-wrapper {
    gap: 20px;
    /* If your .container class has its own padding, this reinforces it */
    padding-left: 16px;
    padding-right: 16px;
  }

  .contact-form-card {
    padding: 1.4rem 1.2rem;
    border-radius: 16px;
  }

  .contact-form-card h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }

  .form-fields {
    gap: 12px;
  }

  .contact-form-card input {
    padding: 0.8rem 0.9rem;
    font-size: 0.9rem;
  }

  .contact-form-card textarea {
    height: 130px;
    font-size: 0.9rem;
  }

  .contact-form-card button[type="submit"] {
    padding: 0.85rem;
    font-size: 0.95rem;
  }

  .contact-cards-stack {
    gap: 10px;
  }

  .contact-card {
    padding: 1rem 1.1rem;
    border-radius: 14px;
    gap: 1rem;
  }

  .contact-card:hover {
    transform: none; /* disable slide on touch */
  }

  .icon-box {
    min-width: 42px;
    height: 42px;
    border-radius: 11px;
  }

  .contact-card-text h3 {
    font-size: 0.92rem;
  }

  .contact-card-text p {
    font-size: 0.82rem;
  }

  .contact-map-inline {
    border-radius: 14px;
    min-height: 160px;
  }

  .map-location-header {
    padding: 0.85rem 1rem;
    gap: 0.75rem;
  }

  .map-location-header .icon-box {
    min-width: 38px;
    height: 38px;
  }

  .map-location-header h3 {
    font-size: 0.9rem;
  }

  .map-location-header p {
    font-size: 0.76rem;
  }

  .map-embed-wrap {
    height: 240px;
  }
}

/* ============================================================
   RESPONSIVE — very small (≤ 380px)
   ============================================================ */
@media (max-width: 380px) {
  .contact-wrapper {
    padding-left: 12px;
    padding-right: 12px;
  }

  .contact-form-card {
    padding: 1.2rem 1rem;
  }

  .map-embed-wrap {
    height: 200px;
  }
}

@media (max-width: 768px) {
  .contact-hero {
    background-position: 70% center;
  }
}
@media (max-width: 640px) {
  .contact-hero-content h1 {
    font-size: 1.8rem;
    line-height: 1.25;
  }

  .contact-hero-content p {
    font-size: 0.95rem;
  }
}