/* =========================
   Contact Section – polished, all resolutions
   ========================= */

:root{
  --gap-xs: 12px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 32px;
  --edge: clamp(16px, 3vw, 40px);   /* page side padding */
  --font-base: clamp(15px, 1.5vw, 18px);
  --font-h2: clamp(22px, 4.5vw, 36px);

  /* controls the max readable width of the form content */
  --form-max: 700px;
}

* { box-sizing: border-box; }

.contact-section{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;   /* mobile stack */
  width: 100%;
  background: transparent;
}

/* optional top hairline */
.contact-section::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:1px;
  background:#fff;
}

/* image */
.contact-image{
  background: url('../images/banners/contact-us.png') center/cover no-repeat;
  min-height: 260px;
  background-size: cover;
  background-position: center;
  aspect-ratio: 16 / 10;
}
/* //#7E7358 */

/* right column */
.contact-form-container{
  background-color: #7E7358;              /* mobile/tablet only */
  padding: var(--gap-lg) var(--edge);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-sm);
}



.contact-form-container h2{
  font-size: var(--font-h2);
  margin: 0 0 var(--gap-sm);
  color: #080808;
  font-weight: 800;
}
.contact-form-container p{
  margin: 0 0 var(--gap-md);
  font-size: var(--font-base);
  line-height: 1.75;
  color: #080808;
}

.contact-form-container form{
  display: grid;
  gap: var(--gap-sm);
}

.contact-form-container input,
.contact-form-container select,
.contact-form-container textarea{
  /* background: transparent; */
  background-color: #5C533D;
  color: #080808;
  border: none;
  border-bottom: 1px solid #fff;
  padding: 10px 0;
  font-size: var(--font-base);
  width: 100%;
  outline: none;
}
.contact-form-container textarea{ min-height: 120px; resize: vertical; }
.contact-form-container input::placeholder,
.contact-form-container textarea::placeholder{ color: rgba(0,0,0,.7); }
/* .contact-form-container select{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
} */
.contact-form-container select{
  /* background: transparent; */
  background-color: #5C533D;
  color: #080808;
  border: none;
  border-bottom: 1px solid #fff;
  padding: 10px 0;
  font-size: var(--font-base);
  width: 100%;
  outline: none;
}
/* .contact-form-container select option{ background:#271f53; color:#fff; } */

.contact-form-container select option{ background:#433F2C; color:#fff; }



.contact-form-container button{
  background:#002b4f; color:#fff; padding:10px 20px;
  margin-top: clamp(16px, 4vh, 40px);
  border:none; font-size:var(--font-base);
  display:inline-flex; align-items:center; gap:12px;
  width: 100%; transition: background .3s ease;
}
.contact-form-container button:hover{ background:#001a33; }
.contact-form-container button svg{ transition: transform .3s ease; }
.contact-form-container button:hover svg{ transform: translateX(6px); }

/* ====== breakpoints ====== */
@media (min-width: 576px){
  .contact-form-container{ padding: var(--gap-lg) calc(var(--edge) + 4px); }
  .contact-form-container form{ gap: var(--gap-md); }
  .contact-form-container button{ width: fit-content; min-width: 200px; }
}

@media (min-width: 768px){
  .contact-image{ min-height: 380px; aspect-ratio: auto; }
  .contact-form-container{ padding: 30px calc(var(--edge) + 8px); }
}

/* ≥1024px: professional two-column layout with full-bleed grey panel */
@media (min-width: 1024px){
  .contact-section{
    grid-template-columns: 60% 40%;
    column-gap: clamp(24px, 3vw, 40px);
    padding-inline: 0;              /* remove left/right white gutter */
    min-height: 100vh;
    background: #7E7358;            /* unify background so gap isn't white */
  }
  
  .contact-image{
    height: 100%;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
  }

  /* .contact-section{
    grid-template-columns: 40% 60%;
    
    background:
      linear-gradient(to right, transparent 0 33%, #B9BEC2 33% 100%);
    grid-template-columns: 33% 1fr;                 /* tighter center gap */
    /*column-gap: clamp(16px, 3vw, 32px);
    min-height: 100vh;                               /* tall, but not cramped */
    /*padding-inline: var(--edge);
  } */

.contact-form-container{
    /* form column sits on the right; align content neatly */
    background: transparent;         /* section already grey */
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* space from the column gap + right edge */
    padding: clamp(24px, 4vh, 48px) clamp(40px, 4vw, 72px);
  }

  /* remove local bg (we paint it via gradient above) */
  /* .contact-form-container{
    background: transparent;
    padding: clamp(24px, 4vh, 40px) 0;              /* slim side padding */
  /*  display: flex; justify-content: center;
  } */

  /* cap line length and align form content to the left */
  .contact-form-container > *{
    width: min(var(--form-max), 100%);              /* readable width */
  }

  /* make the form area scroll if content ever exceeds viewport height */
  .contact-form-container form{
    overflow: auto;
    min-height: 0;
  }
}

.contact-form-container button{
    width: fit-content;
    min-width: 200px;
    margin-top: 16px;
    box-shadow: 0 -6px 24px rgba(0,0,0,.06);
  }

/* ≥1440px: reduce image share a bit and keep center tidy */
@media (min-width: 1440px){
  .contact-section{
    background:
      linear-gradient(to right, transparent 0 30%, #7E7358 30% 100%);
    grid-template-columns: 50% 1fr;
  }
}

/* optional: trim paddings on short desktops */
@media (min-width:1024px) and (max-height:900px){
  .contact-form-container{ padding-top: 16px; padding-bottom: 16px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .contact-form-container button,
  .contact-form-container button svg{ transition:none; }
}