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

body.page-template-page-integrations{--ig-gut:clamp(16px,4vw,28px)}

/* ---------- containers ----------
   below 1000px .rsw got the gutter twice (max-width minus --gut AND the 16/28px padding);
   keep the padding only so content lines up with the header (16px phones, 28px tablet) */
@media(max-width:1000px){
  body.page-template-page-integrations .rsw{max-width:none}
}

/* ---------- 01 · hero ---------- */
body.page-template-page-integrations .rs-hero h1{text-wrap:balance}
body.page-template-page-integrations .rs-hero h1 em{font-style:normal;color:#F6C6CE}
body.page-template-page-integrations .rs-hero p{text-wrap:balance}
/* eyebrow pill: the trailing .14em letter-spacing left 19.5px of air after the text vs 13.5px before the dot;
   trim the right padding so both ends match */
body.page-template-page-integrations .vd-eyebrow{padding-right:10px}

/* ---------- 02 · integration library ---------- */
/* filter pills: count is an <i> for markup only — keep it upright (regular) */
body.page-template-page-integrations .ig-ct{font-style:normal}
/* 2-column layouts: a lone last card spans the row (class set by the filter script) with a
   two-column inner layout whose right column lines up with the second card's content */
@media(min-width:761px) and (max-width:1024px){
  body.page-template-page-integrations .ig-card.ig-wide{
    grid-column:1/-1;display:grid;align-content:start;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"mark desc" "title desc" "cat desc" "more desc";
    column-gap:calc(clamp(16px,1.8vw,22px) + 2 * clamp(22px,2.2vw,28px) + 2px)}
  body.page-template-page-integrations .ig-card.ig-wide .ig-mark{grid-area:mark}
  body.page-template-page-integrations .ig-card.ig-wide .ig-d{grid-area:desc;align-self:center}
  body.page-template-page-integrations .ig-card.ig-wide h3{grid-area:title;margin-top:0}
  body.page-template-page-integrations .ig-card.ig-wide .ig-cat{grid-area:cat}
  body.page-template-page-integrations .ig-card.ig-wide .ig-more{grid-area:more;justify-self:start}
}

/* phones: the filter tabs become one left-aligned swipe row running edge to edge; count below */
@media(max-width:760px){
  body.page-template-page-integrations .ig-sec{padding-block:48px}
  body.page-template-page-integrations .ig-bar{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px;padding-bottom:16px}
  body.page-template-page-integrations .ig-tabs{flex-wrap:nowrap;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--ig-gut) * -1);padding:2px var(--ig-gut);scroll-padding-inline:var(--ig-gut)}
  body.page-template-page-integrations .ig-tabs::-webkit-scrollbar{display:none}
  body.page-template-page-integrations .ig-tab{flex:none;white-space:nowrap;scroll-snap-align:start}
  body.page-template-page-integrations .ig-grid{margin-top:24px}
}

/* touch: no hover lift on cards */
@media(hover:none){
  body.page-template-page-integrations .ig-card:hover{transform:none;box-shadow:none;border-color:var(--line)}
  body.page-template-page-integrations .ig-card:hover h3{color:inherit}
}

/* ---------- 03 · custom-integration CTA ---------- */
/* 901–1100px: the 2×2 API tiles were squeezed to ~200px (orphan words like "Go");
   stack the callout here as it already is below 900px */
@media(min-width:901px) and (max-width:1100px){
  body.page-template-page-integrations .archx-top{grid-template-columns:1fr;gap:32px}
}
body.page-template-page-integrations .ig-apis span{text-wrap:pretty}
@media(max-width:760px){
  body.page-template-page-integrations .ig-cta-sec{padding-block:24px 56px}
}