/* page-industry.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-1920px screens:
   style.css sets `html.page-integration-detail .tsh{overflow:visible}`, which beats the global
   `.tsh{overflow-x:clip}` in responsive.css */
html:has(body.page-template-page-industry){overflow-x:clip}
body.page-template-page-industry .tsh{overflow-x:clip}

/* optional media from ACF: hero video embed, overview image, per-use-case illustration */
body.page-template-page-industry .iv-vbody--embed{display:block}
body.page-template-page-industry .iv-vbody--embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
body.page-template-page-industry .iv-ovimg.iv-has-img,
body.page-template-page-industry .iv-vis.iv-has-img{overflow:hidden;border-style:solid}
body.page-template-page-industry .iv-ovimg.iv-has-img img{display:block;width:100%;height:100%;object-fit:cover}
body.page-template-page-industry .iv-vis.iv-has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

@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-industry .rsw{max-width:none}
  /* hero: the split layout added 25px / 9px on top of its own gutter (39px on phones) */
  body.page-template-page-industry .iv-hsplit{padding-inline:clamp(16px,4vw,28px)}
}

/* use-case tabs: a swipe row with snap points when the seven tabs don't fit */
body.page-template-page-industry .iv-tabs{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
body.page-template-page-industry .iv-tab{scroll-snap-align:center}

@media(max-width:760px){
  /* tabs: tighter cells so more of the row is visible and the swipe affordance is obvious */
  body.page-template-page-industry .iv-tab{min-width:96px;padding:14px 10px 16px}
  body.page-template-page-industry .iv-vis{min-height:240px}
}

@media(max-width:600px){
  /* hero video: the 16:8.4 box was too short for the play button + two-line placeholder (they overlapped) */
  body.page-template-page-industry .iv-vbody{aspect-ratio:4/3}
  body.page-template-page-industry .iv-vplay{width:60px;height:60px}
  body.page-template-page-industry .iv-vbar b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}

/* use-case panel: keep illustration + copy side by side on small laptops / landscape tablets
   (style.css stacks it up to 1080px, leaving a 900px-wide placeholder above a short paragraph) */
@media(min-width:861px) and (max-width:1080px){
  body.page-template-page-industry .iv-pane,
  body.page-template-page-industry .iv-pane.on{grid-template-columns:1.05fr .95fr}
}

/* ---- visual QA pass ---- */
/* use-case tabs: between 1001px and ~1100px the seven tabs need 936px but the bar only has 900-920px,
   so "Academic credentials" was cut off by the bar's right edge with no swipe affordance (swipe is the
   intended pattern only below 1000px). Tighter side padding lets all seven fit. */
@media(min-width:1001px) and (max-width:1140px){
  body.page-template-page-industry .iv-tab{min-width:96px;padding-inline:10px}
}
/* benefits: the title reserved 68px on the right for the watermark icon, but the icon sits above the
   title (it ends ~17px before the title starts), so two of the four titles wrapped needlessly at 1440px
   and the descriptions started at different heights across the row */
body.page-template-page-industry .iv-bc h4{padding-right:0}

/* "Solutions for …" (3 cards): a later 3-column rule in style.css beat the tablet 2-column one, so at 768 the cards
   were ~227px wide ("TRUESigner / ONE", descriptions breaking every few words). Two columns would orphan the third
   card, so keep three while they fit and stack them below 900px. */
@media(max-width:900px){
  body.page-template-page-industry .iv-sols{grid-template-columns:1fr}
}