/* page-consent-keeper.php — responsive styles (loaded only on this template, after responsive.css) */

/* hero rings (132vw wide) pushed the document 250-370px wider than the viewport on 1001-1440px
   screens; responsive.css only clips html below 1000px */
html:has(body.page-template-page-consent-keeper){overflow-x:clip}
body.page-template-page-consent-keeper .tsh{overflow-x:clip}

/* hero mock: optional screenshot from ACF fills the window */
body.page-template-page-consent-keeper .tsm-body.ck-mock-shot{display:block;min-height:0}
body.page-template-page-consent-keeper .ck-mock-shot img{display:block;width:100%;height:auto}

/* features: rows in the same grid line keep title + text top-aligned (a short text was pushed down) */
body.page-template-page-consent-keeper .ck-fr{align-content:start}

/* gutters: .tsw 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) */
@media(max-width:1000px){
  body.page-template-page-consent-keeper .tsw{max-width:none}
}

/* how it works: 2 x 2 cards on tablets instead of four full-width stacked panels */
@media(min-width:601px) and (max-width:1000px){
  body.page-template-page-consent-keeper .hw2-rail{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0}
}

/* deployment: the two option cards sit side by side on tablets */
@media(min-width:601px) and (max-width:900px){
  body.page-template-page-consent-keeper .ck-depcards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* integrations: 2-up already from 900px; keep 2-up down to 600px, then one column */
@media(min-width:601px) and (max-width:900px){
  body.page-template-page-consent-keeper .ck-igrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* timeline: the zigzag squeezes cards to ~140px on phones — switch to a single column,
   numeral on the left, card on the right */
@media(max-width:620px){
  body.page-template-page-consent-keeper .ck-zig{gap:14px}
  body.page-template-page-consent-keeper .ck-zig .id-spine,
  body.page-template-page-consent-keeper .ck-zig .id-zdot{display:none}
  body.page-template-page-consent-keeper .ck-zig .id-z,
  body.page-template-page-consent-keeper .ck-zig .id-z--r{grid-template-columns:clamp(48px,15vw,62px) minmax(0,1fr);gap:12px;align-items:start}
  body.page-template-page-consent-keeper .ck-zig .id-zn,
  body.page-template-page-consent-keeper .ck-zig .id-z--r .id-zn{grid-column:1;justify-self:start;padding:6px 0 0;font-size:clamp(38px,12vw,46px)}
  body.page-template-page-consent-keeper .ck-zig .id-zc,
  body.page-template-page-consent-keeper .ck-zig .id-z--r .id-zc{grid-column:2}
}

/* use cases: copy sat at the top of the card, over the bright part of the photo, while the shade darkens only
   the bottom. Pin it to the bottom (as on ContractVerse / Credentials) so it lands on the dark end of the gradient. */
body.page-template-page-consent-keeper .uc-rail .anec-body{justify-content:flex-end}

/* use cases: swipe row bleeding to the screen edges with the next card peeking in (home pattern) */
@media(max-width:760px){
  body.page-template-page-consent-keeper .uc-rail{grid-auto-columns:min(320px,84vw);gap:12px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    margin-inline:calc(clamp(16px,4vw,28px) * -1);padding-inline:clamp(16px,4vw,28px);
    scroll-padding-inline:clamp(16px,4vw,28px)}
  body.page-template-page-consent-keeper .uc-rail .anec-card{height:auto;min-height:340px}
}

/* ===================== visual QA pass: alignment & precision ===================== */

/* timeline: the dashed spine ran 26px from the zigzag's top/bottom edges, i.e. ~50px past the first and last
   dots (it started level with the top of "01" and ended under "03"). Draw it per step instead, from each dot to
   the next one, so it starts and ends exactly on the first/last dot. Equal row heights (grid 1fr rows) make
   "100% + row gap" land precisely on the next dot's centre whatever the card copy length. */
@media(min-width:621px){
  body.page-template-page-consent-keeper .ck-zig{display:grid;grid-auto-rows:1fr;row-gap:clamp(8px,1vw,14px)}
  body.page-template-page-consent-keeper .ck-zig .id-spine{display:none}
  body.page-template-page-consent-keeper .ck-zig .id-z:not(:last-of-type)::after{content:"";position:absolute;z-index:1;
    left:50%;top:50%;width:0;height:calc(100% + clamp(8px,1vw,14px));box-sizing:border-box;
    border-left:1px dashed rgba(255,255,255,.34);transform:translateX(-.5px);pointer-events:none}
}

/* timeline heading: "Ticking!" dropped onto a line of its own on phones */
body.page-template-page-consent-keeper .ck-tlhead h2{text-wrap:balance}

/* features: the mono step number sat ~2px below the title's cap line (fixed 5px nudge vs a fluid 16.5-19px
   title). Give the number the title's own line box so both centre on the same line at every width. */
body.page-template-page-consent-keeper .ck-frn{padding-top:0;line-height:calc(clamp(16.5px,1.6vw,19px) * 1.25)}

/* letter-spaced mono labels carry the tracking after their last letter too, which pushed the text ~0.6-0.9px
   left of centre inside pills / centred headings. Take the trailing tracking back out. */
body.page-template-page-consent-keeper .ts-head .k{margin-right:-.14em}
body.page-template-page-consent-keeper .ck-tlk{padding-left:.16em}
body.page-template-page-consent-keeper .tsm-ph{padding-right:calc(22px - .14em)}
body.page-template-page-consent-keeper .ck-tbadge{padding-right:calc(11px - .12em)}
body.page-template-page-consent-keeper .ck-deptag{padding-right:calc(12px - .13em)}

/* short card copy: avoid one-word last lines ("more", "time.") */
body.page-template-page-consent-keeper .ck-i span,
body.page-template-page-consent-keeper .hw2-p p{text-wrap:pretty}