/* page-credentials.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-credentials{
  /* the real side gutter on phones/tablets (matches responsive.css .tsw/.wrap padding and the header) */
  --crx-gut:clamp(16px,4vw,28px);
}

/* ---------- hero mock window ---------- */
/* optional ACF screenshot fills the window */
body.page-template-page-credentials .tsm-body.cred-mock-shot{display:block;min-height:0;padding:0}
body.page-template-page-credentials .cred-mock-shot img{display:block;width:100%;height:auto}
@media(max-width:760px){
  /* the long window title wrapped to two lines beside the traffic-light dots */
  body.page-template-page-credentials .tsm-bar b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.page-template-page-credentials .tsm-body--ph{padding:24px 16px;min-height:220px}
}

/* ---------- how it works ---------- */
/* tablet: two-up cards instead of five full-width rows; the odd last card spans the row */
@media(min-width:601px) and (max-width:900px){
  body.page-template-page-credentials .hw2-rail{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0}
  body.page-template-page-credentials .hw2-p:last-child:nth-child(odd){grid-column:1 / -1}
}
/* downloads: full-width pill on phones */
@media(max-width:600px){
  body.page-template-page-credentials .hw2-dl{flex-direction:column;align-items:stretch;gap:10px}
  body.page-template-page-credentials .hw2-d{padding-right:16px}
  body.page-template-page-credentials .hw2-dt{min-width:0}
}

/* ---------- benefits ---------- */
/* it is a 2-column grid (style.css), 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 instead, as the tablet rule does. */
@media(min-width:621px){
  body.page-template-page-credentials .cv-w:nth-child(3n+2){margin-top:0}
  body.page-template-page-credentials .cv-w:nth-child(2n){margin-top:clamp(16px,2.4vw,32px)}
  /* five benefits: the last one sat alone under the left column — centre it under the pair */
  body.page-template-page-credentials .cv-w:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;
    width:calc((100% - clamp(18px,2.4vw,40px)) / 2)}
}
@media(max-width:620px){
  body.page-template-page-credentials .cv-w{margin-top:0}
}

/* ---------- use cases rail ---------- */
/* fixed-height cards clipped longer copy, and with one child "space-between" put the copy at the TOP of the card,
   over the light part of the photo (the shade only darkens the lower half). Grow with the copy, sit at the bottom. */
body.page-template-page-credentials .uc-rail .anec-card{display:flex;height:auto;min-height:clamp(290px,30vw,350px)}
body.page-template-page-credentials .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-credentials .uc-rail{grid-auto-columns:min(320px,84vw);gap:12px;
    margin-inline:calc(var(--crx-gut) * -1);padding-inline:var(--crx-gut);scroll-padding-inline:var(--crx-gut);
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  body.page-template-page-credentials .uc-rail .anec-card{min-height:320px}
  body.page-template-page-credentials .uc-head{align-items:center}
  body.page-template-page-credentials .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-credentials .uc-nav{display:none}
}

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

/* letter-spaced mono labels carry the tracking after their last letter too, which put the text 0.77px (centred
   "Why universities choose it" kicker) / 0.84px (mock placeholder pill) left of centre. Take the trailing tracking back out. */
body.page-template-page-credentials .ts-head .k{margin-right:-.14em}
body.page-template-page-credentials .tsm-ph{padding-right:calc(22px - .14em);text-wrap:balance}