/* ============================================================
   CHAMPAGNE JEAN JOSSELIN — contact.css
   ============================================================ */

.contact-hero{
  position:relative;
  margin-top:0;
  display:block;
  padding:calc(var(--nav-height) + 72px) var(--gutter) 64px;
  text-align:center;
  background:
    linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.96) 100%),
    url("../img/illustrations/cuvee-des-jean-illus.webp") center 40%/cover no-repeat;
  overflow:hidden;
}

.contact-hero::before,
.contact-hero::after{
  display:none;
}

.contact-hero__inner{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
  text-align:center;
}

.contact-hero__eye{
  display:block;
  font-family:var(--font-sans);
  font-size:10px;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:20px;
}

.contact-hero h1{
  font-family:var(--font-serif);
  font-size:clamp(44px,6vw,80px);
  font-weight:300;
  color:var(--dark);
}

.contact-hero__sub,
.contact-hero .cms-rich-content{
  max-width:560px;
  margin:20px auto 0;
  font-family:var(--font-serif);
  font-size:clamp(15px,1.8vw,20px);
  line-height:1.6;
  color:var(--mid);
  font-style:italic;
}

.contact-hero .hero__scroll{
  display:none;
}

.contact-card{
  padding:22px 24px;
  border:1px solid #ebe6dd;
  background:#fcfbf8;
}

.contact-card__label{
  display:block;
  margin-bottom:10px;
  font-family:var(--font-sans);
  font-size:9px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
}

.contact-card a{
  font-family:var(--font-sans);
  font-size:13px;
  color:var(--dark);
  transition:color var(--transition);
}

.contact-card a:hover{
  color:var(--gold);
}

.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:clamp(32px,6vw,84px);
  align-items:start;
}

.contact-form-wrap{
  background:#fff;
  border:1px solid #ebe6dd;
  padding:clamp(26px,4vw,42px);
}

.contact-section-head{
  max-width:640px;
  margin-bottom:32px;
}

.contact-dynamic-section{
  padding:26px 24px 24px;
  border:1px solid #ece6db;
  background:#fcfbf8;
}

.contact-dynamic-section[hidden]{
  display:none;
}

.contact-dynamic-section__head{
  margin-bottom:18px;
}

.contact-dynamic-section__label{
  display:block;
  margin-bottom:10px;
  font-family:var(--font-sans);
  font-size:9px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--dark);
}

.contact-dynamic-section__head p{
  font-size:12px;
  line-height:1.75;
}

.contact-order-builder{
  display:grid;
  gap:14px;
}

.contact-order-list{
  display:grid;
  gap:12px;
}

.contact-order-item{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,.46fr) auto;
  gap:18px;
  align-items:end;
  padding:16px 16px 0;
  border:1px solid #ece6db;
  background:#fff;
}

.contact-order-item__remove{
  align-self:center;
  width:36px;
  height:36px;
  margin-bottom:10px;
  border:1px solid #e6dfd1;
  color:var(--gold);
  font-size:24px;
  line-height:1;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}

.contact-order-item__remove:hover{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
}

.contact-order-builder__add{
  justify-self:start;
  font-family:var(--font-sans);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid rgba(155,134,52,.26);
  padding:12px 14px;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}

.contact-order-builder__add:hover{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
}

.contact-order-note{
  margin-top:16px;
  font-family:var(--font-sans);
  font-size:11px;
  line-height:1.8;
  color:var(--grey);
}

.form__status{
  padding:14px 16px;
  border:1px solid #ebe6dd;
  background:#faf9f7;
  font-family:var(--font-sans);
  font-size:12px;
  line-height:1.7;
  color:var(--mid);
}

.form__status.is-success{
  border-color:rgba(155,134,52,.32);
  background:rgba(155,134,52,.08);
  color:var(--dark);
}

.form__status.is-error{
  border-color:rgba(124,58,58,.24);
  background:rgba(124,58,58,.06);
  color:#6d3b3b;
}

.form__input--file{
  padding:14px 0 10px;
  border-bottom:1px solid #ddd;
  line-height:1.5;
}

.form__input--file::file-selector-button{
  margin-right:16px;
  border:1px solid rgba(155,134,52,.26);
  background:#faf7f0;
  color:var(--gold);
  padding:10px 14px;
  font-family:var(--font-sans);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}

.form__input--file::file-selector-button:hover{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
}

.form__hint{
  font-family:var(--font-sans);
  font-size:11px;
  line-height:1.7;
  color:var(--grey);
}

.form__textarea--short{
  min-height:86px;
}

.form select.form__input{
  appearance:none;
  -webkit-appearance:none;
  border-radius:0;
}

.contact-consent{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:12px;
  align-items:start;
}

.contact-consent input{
  margin-top:4px;
  accent-color:var(--gold);
}

.contact-consent span{
  font-family:var(--font-sans);
  font-size:12px;
  line-height:1.8;
  color:var(--mid);
}

.contact-honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.contact-side{
  display:grid;
}

.contact-map-card{
  padding:clamp(26px,4vw,38px);
  background:#fff;
  border:1px solid #ebe6dd;
}

.contact-map-frame{
  aspect-ratio:4/3;
  background:#f4f1eb;
  overflow:hidden;
}

.contact-map-frame iframe{
  width:100%;
  height:100%;
  border:0;
}

.contact-map-meta{
  display:grid;
  gap:18px;
}

.contact-map-meta span{
  display:block;
  margin-bottom:8px;
  font-family:var(--font-sans);
  font-size:9px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
}

.section-scroll-separator--contact-end{
  padding:18px 0 0;
}

@media(max-width:1024px){
  .contact-layout{
    grid-template-columns:1fr;
  }

  .contact-order-item{
    grid-template-columns:1fr;
    gap:10px;
    padding:16px;
  }

  .contact-order-item__remove{
    justify-self:start;
    margin-bottom:0;
  }
}

@media(max-width:768px){
  .contact-hero{
    padding:calc(var(--nav-height) + 56px) 24px 52px;
  }

  .contact-hero .hero__scroll{
    top:12px;
  }

  .contact-hero__inner,
  .contact-section-head,
  .contact-form-wrap,
  .contact-map-card,
  .contact-card{
    text-align:center;
  }

  .form__submit{
    justify-content:center;
  }

  .contact-map-meta{
    text-align:center;
  }

  .contact-consent{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }

  .contact-consent input{
    margin-top:0;
  }

  .form__submit{
    align-self:center;
  }
}