/* page-contract-verse.php — responsive styles (loaded only on this template, after responsive.css) */
/* Every rule is scoped to the template body class: html.page-contractverse is shared with other solution pages. */

body.page-template-page-contract-verse{
  /* the real side gutter on phones/tablets (matches responsive.css .tsw/.wrap padding and the header) */
  --cvx-gut:clamp(16px,4vw,28px);
}

/* ---------- optional ACF images (only rendered when an image is uploaded) ---------- */
body.page-template-page-contract-verse .tsm-body--img{display:block;min-height:0;padding:0}
body.page-template-page-contract-verse .tsm-body--img img{display:block;width:100%;height:auto}
body.page-template-page-contract-verse .sigt-ph.cvx-media{border:0;background:none;padding:0;overflow:hidden}
body.page-template-page-contract-verse .cvx-media img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain}

/* ---------- hero: the decorative rings (132vw wide) pushed the page sideways above 1000px ---------- */
body.page-template-page-contract-verse .tsh{overflow-x:clip}

/* ---------- 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-contract-verse .tsw{max-width:none}
}

/* ---------- watch / video: the nowrap window title set the column's min-content width,
   so the single column grew past the viewport and the copy was cut off ---------- */
body.page-template-page-contract-verse .cvv-bar i{min-width:0}
@media(max-width:900px){
  body.page-template-page-contract-verse .cvv-wrap{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:420px){
  body.page-template-page-contract-verse .cvv-pts{gap:12px}
  body.page-template-page-contract-verse .cvv-pts span{font-size:10px;letter-spacing:.08em}
}

/* ---------- product tabs: centred tabs in an overflow row put the first tab off-screen to the left
   on phones; make them a left-aligned swipe row bleeding to the screen edges ---------- */
@media(max-width:760px){
  body.page-template-page-contract-verse .pt-tabs{justify-content:flex-start;gap:22px;
    margin-inline:calc(var(--cvx-gut) * -1);padding-inline:var(--cvx-gut);scroll-padding-inline:var(--cvx-gut);
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  body.page-template-page-contract-verse .pt-tab{scroll-snap-align:start}
}

/* ---------- lifecycle band: tighter on phones ---------- */
@media(max-width:860px){
  body.page-template-page-contract-verse .cvb-stages{max-width:560px}
}

/* ---------- industries rail ---------- */
/* cards grow with their copy instead of clipping long descriptions at a fixed height */
body.page-template-page-contract-verse .uc-rail .anec-card{display:flex;height:auto;min-height:clamp(290px,30vw,350px)}
body.page-template-page-contract-verse .uc-rail .anec-body{position:relative;inset:auto;flex:1 1 auto;justify-content:flex-end}
@media(max-width:760px){
  /* swipe row bleeding to the screen edges, next card peeking in (homepage pattern) */
  body.page-template-page-contract-verse .uc-rail{grid-auto-columns:min(320px,84vw);gap:12px;
    margin-inline:calc(var(--cvx-gut) * -1);padding-inline:var(--cvx-gut);scroll-padding-inline:var(--cvx-gut);
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  body.page-template-page-contract-verse .uc-rail .anec-card{min-height:320px}
  body.page-template-page-contract-verse .uc-head{align-items:center}
  body.page-template-page-contract-verse .uc-head .ts-head{margin-bottom:0}
}
@media(max-width:480px){
  /* arrows are redundant next to a swipe row on small phones */
  body.page-template-page-contract-verse .uc-nav{display:none}
}

/* ---------- testimonials (same pattern as the home page) ---------- */
/* tablet two-up: the last plain card goes full width so nothing sits alone */
@media(min-width:761px) and (max-width:880px){
  body.page-template-page-contract-verse .test-bento .tb-f{grid-column:span 2}
}
/* phones: swipeable row bleeding to the screen edges with the next card peeking in */
@media(max-width:760px){
  body.page-template-page-contract-verse .test-bento{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-inline:calc(var(--cvx-gut) * -1);padding:4px var(--cvx-gut) 8px;scroll-padding-inline:var(--cvx-gut)}
  body.page-template-page-contract-verse .test-bento::-webkit-scrollbar{display:none}
  body.page-template-page-contract-verse .test-bento>.tcard{flex:0 0 min(320px,84vw);grid-column:auto;grid-area:auto;scroll-snap-align:start}
  body.page-template-page-contract-verse .tcard--feat blockquote{font-size:16px}
}

/* video placeholder pill: keep clear of the frame edges on small phones */
@media(max-width:480px){
  body.page-template-page-contract-verse .cvv-ph{max-width:calc(100% - 32px);padding:9px 14px}
}

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

/* product tabs: the active underline sat at bottom:-1px inside an overflow-x:auto row, so it was clipped to 1px
   (and the row scrolled 1px vertically). Draw the rule as an inset shadow and keep the 2px indicator inside the box. */
body.page-template-page-contract-verse .pt-tabs{border-bottom:0;box-shadow:inset 0 -1px 0 var(--line)}
body.page-template-page-contract-verse .pt-ind{bottom:0;height:2px}

/* why grid: it is a 2-column grid (style.css "four pillars: 2 x 2"), but above 860px the 3-column stagger
   (3n+2) still applied, so items 2 and 5 dropped and the rows zig-zagged. Stagger the right column, as the
   tablet rule does; no stagger once it is a single column. */
@media(min-width:621px){
  body.page-template-page-contract-verse .cv-w:nth-child(3n+2){margin-top:0}
  body.page-template-page-contract-verse .cv-w:nth-child(2n){margin-top:clamp(16px,2.4vw,32px)}
}
@media(max-width:620px){
  body.page-template-page-contract-verse .cv-w{margin-top:0}
}

/* FAQ chevron: an 11px + 1.6px-border rotated square, nudged by translateY(-70%/-30%), put the visible V
   1.4px below (closed) / above (open) the question's centre. Centre the V itself: box centred on the line,
   then shifted by the V's offset from the box centre (3.89px for this 12.6px box). */
body.page-template-page-contract-verse .faq summary::after{margin-top:-6.3px;transform:translateY(-3.89px) rotate(45deg)}
body.page-template-page-contract-verse .faq details[open] summary::after{transform:translateY(3.89px) rotate(225deg)}

/* testimonials: the author's role ran under the big closing-quote glyph on narrow cards (1024/768) */
body.page-template-page-contract-verse .tcard:not(.tcard--feat) .who{padding-right:48px}

/* capabilities: tag line wrapped leaving a lone tag after a dangling separator on phones */
body.page-template-page-contract-verse .sw-tt i{text-wrap:balance}

/* lifecycle band heading: "pretty" wrapping split "built-/in" across lines at 375–1440; balance keeps it whole */
body.page-template-page-contract-verse .cvb-copy h2{text-wrap:balance}

/* stats labels beside the video: "CONTRACTS RELEASED IN A / DAY" left one word on its own line (1024–1440) */
body.page-template-page-contract-verse .cvv-pts li span{text-wrap:balance}