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

/* optional diagram image from ACF (replaces the drawn signing-flow SVG) */
body.page-template-page-integration-detail .gdx-img{display:block;width:100%;height:auto;border-radius:14px}

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

/* ---------- business outcomes ---------- */
@media(max-width:820px){
  /* style.css zeroes this heading's bottom margin because the round dial has its own air on top; once the dial
     becomes a card grid the heading sat directly on the cards (0px). Match the points section (28px → 40px). */
  body.page-template-page-integration-detail .id-out-sec .id-head{margin-bottom:clamp(28px,4vw,40px)}
  /* the card grid was capped at 420px and centred while the detail text below ran the full width, so their
     left edges didn't line up (174px vs 66px at 768). Use the full width: 3 × 2 on tablets, 2 × 3 on phones. */
  body.page-template-page-integration-detail .id-dial{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
  body.page-template-page-integration-detail .id-node6{min-width:0}
}
@media(max-width:560px){
  body.page-template-page-integration-detail .id-dial{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* ---------- testimonials ---------- */
/* plain cards left the author row wherever the quote ended, so in a stretched card it floated mid-card
   (107px above the bottom vs 33px in its neighbours at 1440). Pin it to the bottom like the featured cards. */
body.page-template-page-integration-detail .tcard:not(.tcard--feat) .who{margin-top:auto;padding-top:22px}
/* the author name / role ran under the big quote glyph in the bottom-right corner of plain cards */
body.page-template-page-integration-detail .tcard:not(.tcard--feat) .who{padding-right:52px}
/* tablet two-up: five plain cards left the last one alone in its row — let it span */
@media(min-width:761px) and (max-width:880px){
  body.page-template-page-integration-detail .test-bento .tb-f{grid-column:span 2}
}
/* phones: swipeable row bleeding to the screen edges with the next card peeking in (homepage pattern) */
@media(max-width:760px){
  body.page-template-page-integration-detail .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(--igd-gut) * -1);padding:4px var(--igd-gut) 8px;scroll-padding-inline:var(--igd-gut)}
  body.page-template-page-integration-detail .test-bento::-webkit-scrollbar{display:none}
  body.page-template-page-integration-detail .test-bento>.tcard{flex:0 0 min(320px,84vw);grid-column:auto;grid-area:auto;scroll-snap-align:start}
  body.page-template-page-integration-detail .tcard--feat blockquote{font-size:16px}
}
/* the page gutter = the .rsw padding below 1000px (16px phones → 28px tablets) */
body.page-template-page-integration-detail{--igd-gut:clamp(16px,4vw,28px)}

/* ---------- overview ---------- */
/* stacked below 1080px the drawn diagram grew to the full 920px column (labels at ~30px) — cap it */
@media(max-width:1080px){
  body.page-template-page-integration-detail .gdw{max-width:720px}
}

/* ---------- key points ---------- */
/* stacked (≤820px) the number column was auto-width, so each card started at a different x
   ("01" 53.8px wide vs "04" 65.3px → card edges at 86 / 95 / 93 / 97 / 95px at 375). Fix the column. */
@media(max-width:820px){
  body.page-template-page-integration-detail .id-z,
  body.page-template-page-integration-detail .id-z--r{grid-template-columns:66px minmax(0,1fr)}
}
@media(max-width:420px){
  body.page-template-page-integration-detail .id-z,
  body.page-template-page-integration-detail .id-z--r{grid-template-columns:52px minmax(0,1fr);gap:12px}
  body.page-template-page-integration-detail .id-zn,
  body.page-template-page-integration-detail .id-z--r .id-zn{font-size:42px}
}

/* ---------- outcomes dial hub ---------- */
/* the hub is 22% of the dial (75px of text room at 900–1100px) but "TRUESigner" at 14px bold needs ~76px,
   so the word ran into the circle's edge. Scale the hub type with the viewport. */
@media(min-width:821px){
  body.page-template-page-integration-detail .id-hubin{padding-inline:4px}
  body.page-template-page-integration-detail .id-hubin b{font-size:clamp(11.5px,1.05vw,14px)}
  body.page-template-page-integration-detail .id-hubin span{font-size:clamp(8.5px,.72vw,10px);margin-top:4px}
}

/* ---------- hero ---------- */
/* eyebrow pill: 13px before the dot but 16px + 1.61px trailing letter-spacing after the text, so the content
   sat 2.3px left of centre (visible margins 14 / 18.6px). Balance the right padding. */
body.page-template-page-integration-detail .rs-hero .vd-eyebrow{padding-right:calc(13px - .14em)}