/* ══════════════════════════════════════
   BORNE CONTACT PAGE — page-specific styles
   Loaded only on page-contact.php
   (auto-synced from borne-contact.html)
══════════════════════════════════════ */

/* ══ HERO — large title left, contact info right ══ */
.hero{
  padding:200px var(--pad) 100px;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  align-items:end;
  border-bottom:1px solid rgba(255,255,255);
}
.hero-title{
  font-family:var(--serif);
  font-size:clamp(40px,5vw,70px);font-weight:400;line-height:1.1;
  letter-spacing:-0.02em;color:var(--white);
}
.hero-right{padding-left:80px;display:flex;flex-direction:column;gap:12px;}
.hero-right-label{
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:4px;
}
.hero-right-email{
  font-size:17px;color:rgba(255,255,255,.75);transition:color .2s;
  border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px;display:inline-block;
}
.hero-right-email:hover{color:var(--white);border-color:var(--white);}
.hero-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}
.social-pill{
  display:inline-flex;align-items:center;padding:8px 18px;
  border:1px solid rgba(255,255,255,.4);border-radius:999px;
  font-size:15px;font-weight:400;color:var(--white);
  transition:background .2s,border-color .2s,color .2s;
  white-space:nowrap;
}
.social-pill:hover{background:var(--white);border-color:var(--white);color:var(--black);}

/* ══ FORM SECTION ══ */
.form-section{background:var(--black);padding:0 var(--pad) 80px;}
.form-row{
  display:grid;grid-template-columns:100px 1fr;gap:0;
  padding:60px 0 0;align-items:start;
}
.form-num{
  font-size:14px;font-weight:400;color:rgba(255,255,255,.4);
  padding-top:8px;font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.form-field{display:flex;flex-direction:column;gap:0;}
.form-input{
  width:100%;background:transparent;border:none;
  border-bottom:1px solid rgba(255,255,255,.5);
  padding:8px 0 12px;font-family:var(--sans);
  font-size:clamp(20px,2.2vw,28px);font-weight:300;
  color:var(--white);outline:none;transition:border-color .2s;
}
.form-input::placeholder{color:rgba(255,255,255,.55);}
.form-input:focus{border-bottom-color:var(--white);}
.stage-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.stage-label{font-size:clamp(20px,2.2vw,28px);font-weight:300;color:var(--white);}
.stage-pill{
  display:inline-flex;align-items:center;padding:8px 20px;
  border:1px solid rgba(255,255,255,.5);border-radius:999px;
  font-size:17px;font-weight:400;color:var(--white);
  cursor:pointer;transition:background .2s,border-color .2s,color .2s;
  user-select:none;background:transparent;
}
.stage-pill:hover{border-color:var(--white);}
.stage-pill.selected{background:var(--white);border-color:var(--white);color:var(--black);}
.form-submit-row{display:grid;grid-template-columns:100px 1fr;gap:0;padding-top:64px;}
.form-submit-btn{
  grid-column:2;display:inline-flex;align-items:center;justify-content:center;
  padding:14px 32px;border:1px solid rgba(255,255,255,.5);border-radius:999px;
  font-family:var(--sans);font-size:17px;font-weight:400;color:var(--white);
  background:transparent;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;width:fit-content;
}
.form-submit-btn:hover{background:var(--white);border-color:var(--white);color:var(--black);}

/* ══ RESPONSIVE ══ */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding:140px var(--pad) 80px;gap:48px;}
  .hero-right{padding-left:0;}
  .form-row{grid-template-columns:72px 1fr;}
  .form-submit-row{grid-template-columns:72px 1fr;}
}
@media(max-width:600px){
  .hero{padding:110px 16px 60px;gap:40px;}
  .hero-title{font-size:clamp(32px,9vw,52px);}
  .form-row{grid-template-columns:52px 1fr;padding-top:40px;}
  .form-submit-row{grid-template-columns:52px 1fr;padding-top:48px;}
  .form-input{font-size:clamp(18px,5vw,24px);}
  .stage-label{font-size:clamp(18px,5vw,24px);}
  .social-pill{font-size:12px;padding:6px 14px;}
}

/* ══════════════════════════════════════
   ACF MEDIA HELPERS — uploaded images & videos
   fill their blocks identically to placeholders
══════════════════════════════════════ */
.sy-img>img,.sy-img>video,
.about-img>img,.about-img>video,
.store-img>img,.store-img>video,
.trip-img>img,.trip-img>video,
.value-photo>img,.value-photo>video,
.hero-image>img,.hero-image>video,
.media-full>img,.media-full>video,
.media-item>img,.media-item>video,
.media-split-left>img,.media-split-left>video,
.work-next-image>img,.work-next-image>video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.media-full,.hero-image,.value-photo,.trip-img,
.media-item,.media-split-left,.work-next-image,
.store-img,.sy-img,.about-img{position:relative;}
.borne-embed{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  min-width:100%;min-height:100%;width:auto;height:auto;
  aspect-ratio:16/9;border:0;pointer-events:none;
}

/* ══════════════════════════════════════
   WPFORMS OVERRIDES — style WPForms (id 1373)
   to match the design. !important is used
   throughout because the WPForms stylesheet
   loads AFTER this file and would win otherwise.
══════════════════════════════════════ */
.wpforms-container{margin:0!important;}
.wpforms-container .wpforms-form .wpforms-field{padding:48px 0 0!important;}

/* Text / email / textarea inputs — underline style */
.wpforms-container .wpforms-form input[type=text],
.wpforms-container .wpforms-form input[type=email],
.wpforms-container .wpforms-form input[type=tel],
.wpforms-container .wpforms-form textarea,
.wpforms-container .wpforms-form select{
  width:100%!important;background:transparent!important;border:none!important;
  border-bottom:1px solid rgba(255,255,255,.5)!important;
  padding:8px 0 12px!important;font-family:var(--sans)!important;
  font-size:clamp(20px,2.2vw,28px)!important;font-weight:300!important;
  color:var(--white)!important;outline:none!important;border-radius:0!important;box-shadow:none!important;
}
/* Placeholders — force visible (WPForms dims them by default) */
.wpforms-container .wpforms-form input::placeholder,
.wpforms-container .wpforms-form textarea::placeholder{
  color:rgba(255,255,255,.55)!important;opacity:1!important;
}
.wpforms-container .wpforms-form input::-webkit-input-placeholder,
.wpforms-container .wpforms-form textarea::-webkit-input-placeholder{
  color:rgba(255,255,255,.55)!important;opacity:1!important;
}
.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form textarea:focus{border-bottom-color:var(--white)!important;}

/* Hide the text/email/textarea field labels (placeholders carry the design) */
.wpforms-container .wpforms-field-text > .wpforms-field-label,
.wpforms-container .wpforms-field-email > .wpforms-field-label,
.wpforms-container .wpforms-field-textarea > .wpforms-field-label{
  position:absolute!important;width:1px!important;height:1px!important;
  margin:-1px!important;padding:0!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;border:0!important;
}

/* ── STAGE (radio) — label inline with the pills ──
   WPForms wraps radios in <fieldset><legend>Stage</legend><ul>…</ul></fieldset>.
   A <legend> element ignores display/float/position for layout, so it can't be
   pulled inline directly. Instead we visually hide the legend (kept for screen
   readers) and re-print the label as a flex ::before pseudo-element on the
   fieldset, which DOES flex inline with the pill list.
   NOTE: the label text is hardcoded below — if you rename the field in WPForms,
   update the content:"Stage" value too. ── */
.wpforms-container .wpforms-form .wpforms-field-radio fieldset{
  display:flex!important;align-items:center!important;
  flex-wrap:wrap!important;gap:10px!important;
  border:0!important;margin:0!important;padding:0!important;
}
.wpforms-container .wpforms-form .wpforms-field-radio legend{
  position:absolute!important;width:1px!important;height:1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;
  margin:0!important;padding:0!important;border:0!important;
}
.wpforms-container .wpforms-form .wpforms-field-radio fieldset::before{
  content:"Stage";
  font-family:var(--sans)!important;font-size:clamp(20px,2.2vw,28px)!important;
  font-weight:300!important;color:var(--white)!important;margin-right:6px!important;
}
.wpforms-container .wpforms-form .wpforms-field-radio ul{
  display:inline-flex!important;flex-wrap:wrap!important;gap:10px!important;
  list-style:none!important;margin:0!important;padding:0!important;width:auto!important;
}
.wpforms-container .wpforms-form .wpforms-field-radio li{margin:0!important;padding:0!important;}

/* Hide the actual radio dot so the pill label centres cleanly */
.wpforms-container .wpforms-form .wpforms-field-radio input[type=radio]{
  position:absolute!important;opacity:0!important;
  width:1px!important;height:1px!important;margin:0!important;pointer-events:none!important;
}
/* Pill choice labels — centred text */
.wpforms-container .wpforms-form .wpforms-field-radio li label{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  text-align:center!important;padding:8px 20px!important;margin:0!important;
  border:1px solid rgba(255,255,255,.5)!important;border-radius:999px!important;
  font-family:var(--sans)!important;font-size:17px!important;font-weight:400!important;
  color:var(--white)!important;cursor:pointer!important;
  transition:background .2s,color .2s!important;
}
.wpforms-container .wpforms-form .wpforms-field-radio input:checked + label{
  background:var(--white)!important;color:var(--black)!important;
}

/* ── Submit button — pill, text centred both axes ──
   Uses button.wpforms-submit + height:auto + line-height:1 so the
   WPForms fixed height can't push the label off-centre. ── */
.wpforms-container .wpforms-form .wpforms-submit-container{margin-top:64px!important;}
.wpforms-container .wpforms-form button.wpforms-submit{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  text-align:center!important;height:auto!important;min-height:0!important;line-height:1!important;
  background:transparent!important;border:1px solid rgba(255,255,255,.5)!important;
  border-radius:999px!important;font-family:var(--sans)!important;
  font-size:17px!important;font-weight:400!important;color:var(--white)!important;
  padding:16px 32px!important;cursor:pointer!important;
  transition:background .2s,color .2s!important;
}
.wpforms-container .wpforms-form button.wpforms-submit:hover{
  background:var(--white)!important;color:var(--black)!important;
}