/* page-brochures.php — responsive + visual fixes (loaded only on this template, after responsive.css) */

/* the global box-sizing reset skips pseudo-elements: bordered dots/chevrons landed off-centre */
body.page-template-page-brochures *::before,
body.page-template-page-brochures *::after{box-sizing:border-box}

/* [hidden] must win over the display set on .br-submit / .br-step */
body.page-template-page-brochures .br-modal [hidden]{display:none!important}

/* eyebrow pill: ink measured 13.75px left vs 19.5px right (16px padding + .14em trailing letter-spacing) */
body.page-template-page-brochures .rs-hero .vd-eyebrow{padding-right:10.25px}

/* hero: no orphan word ("you.") on phones */
body.page-template-page-brochures .rs-hero h1{text-wrap:balance}
body.page-template-page-brochures .rs-hero p{text-wrap:pretty}
@media(max-width:820px){body.page-template-page-brochures .rs-hero p{text-wrap:balance}}
body.page-template-page-brochures .br-card h3{text-wrap:balance}

@media(max-width:1000px){
  /* gutters: .rsw subtracts the gutter from max-width AND gets padding below 1000px, doubling it;
     use the padding alone so content lines up with the header (16px on phones, 28px on tablets) */
  body.page-template-page-brochures .rsw{max-width:none}
}

/* tablet (641-1024px, two-up): an odd last card spans the row instead of sitting alone */
@media(min-width:641px) and (max-width:1024px){
  body.page-template-page-brochures .br-card:last-child:nth-child(odd){grid-column:1 / -1}
}
/* desktop (three-up): a lone last card is centred; two leftovers stay left-aligned */
@media(min-width:1025px){
  body.page-template-page-brochures .br-card:last-child:nth-child(3n+1){grid-column:2}
}

@media(max-width:640px){
  body.page-template-page-brochures .br-sec{padding-block:48px}
}

/* ---------- request pop-up ---------- */
/* z-index 400 sat under the fixed nav (900) and cookie bar (920): the header covered the sheet top / close button */
body.page-template-page-brochures .br-modal{z-index:1000}
/* fits the viewport and scrolls inside on short / small screens; the page behind is locked by JS */
body.page-template-page-brochures .br-sheet{max-height:calc(100vh - 2*clamp(16px,4vw,48px));max-height:calc(100dvh - 2*clamp(16px,4vw,48px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.page-template-page-brochures .br-sheet h2{padding-right:40px;text-wrap:balance}
/* close button: centre the glyph (the × sat 1px high and was offset by the button's line box) */
/* close button: sticky so it stays reachable while a tall sheet scrolls; same 18px corner offset as before */
body.page-template-page-brochures .br-sheet{--pt:clamp(28px,3vw,42px);--px:clamp(28px,3vw,42px);--xo:18px}
body.page-template-page-brochures .br-xbar{position:sticky;top:0;height:0;z-index:2}
body.page-template-page-brochures .br-x{top:calc(var(--xo) - var(--pt));right:calc(var(--xo) - var(--px));display:grid;place-items:center;padding:0}
/* validation UI */
body.page-template-page-brochures .br-l.is-err input{border-color:#C4443C;background:#fff;box-shadow:0 0 0 3px rgba(196,68,60,.12)}
body.page-template-page-brochures .br-err{font-size:12px;line-height:1.4;color:#B23A33}
/* the → glyph's ink sat 0.75px below the label's optical centre */
body.page-template-page-brochures .br-submit .arr{position:relative;top:-.5px}
/* success step */
body.page-template-page-brochures .br-done .br-submit{margin-top:24px;text-decoration:none;width:100%}

@media(max-width:480px){
  body.page-template-page-brochures .br-sheet{--pt:26px;--px:20px;--xo:12px;padding:26px 20px 22px;border-radius:20px}
  body.page-template-page-brochures .br-form{gap:12px;margin-top:18px}
  body.page-template-page-brochures .br-which{margin-top:14px}
}