/* page-enterprise-nx.php — responsive styles (loaded only on this template, after responsive.css) */

/* hero: the dashed rings are 132vw wide; above 1000px nothing clipped them, so the page scrolled sideways.
   Clip horizontally only — the rings may still run down behind the console mock. */
body.page-template-page-enterprise-nx .tsh{overflow-x:clip}

/* ACF images dropped into the placeholder slots (console screenshot, problem illustrations) */
body.page-template-page-enterprise-nx .tsm-body--img{display:block;min-height:0;grid-template-columns:none}
body.page-template-page-enterprise-nx .tsm-body--img img{display:block;width:100%;height:auto}
body.page-template-page-enterprise-nx .pt-pane .sigt-ph--img{border:0;background:none;min-height:0}
body.page-template-page-enterprise-nx .pt-pane .sigt-ph--img img{display:block;width:100%;height:100%;object-fit:cover;border-radius:20px}

/* gutters: .tsw subtracts the gutter from its max-width AND gets padding below 1000px, doubling it.
   Use the padding alone so content lines up with the header (16px on phones), as on the homepage. */
@media(max-width:1000px){
  body.page-template-page-enterprise-nx .tsw{max-width:none}
}

@media(max-width:760px){
  body.page-template-page-enterprise-nx{--nx-gut:clamp(16px,4vw,28px)}

  /* hero eyebrow: a long two-line pill reads better a little tighter */
  body.page-template-page-enterprise-nx .tsh-eyebrow{letter-spacing:.1em;line-height:1.5;text-align:center}

  /* problem tabs: the row was centred inside a scroller, so the first tab was cut off and unreachable.
     Make it a left-aligned swipe row that bleeds to the screen edges (homepage pattern). */
  body.page-template-page-enterprise-nx .pt-tabs{justify-content:flex-start;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    margin-inline:calc(var(--nx-gut) * -1);padding-inline:var(--nx-gut);scroll-padding-inline:var(--nx-gut)}
  body.page-template-page-enterprise-nx .pt-tab{flex:0 0 auto;scroll-snap-align:start}

  /* before / after: two half-width columns squeezed the copy to 2–3 words a line and clipped it.
     Stack the panels (before above after) and drop the centre seam. */
  body.page-template-page-enterprise-nx .nx-cmp{grid-template-columns:1fr;min-height:0}
  body.page-template-page-enterprise-nx .nx-cmp-layer{grid-area:auto;padding:24px 20px 26px}
  body.page-template-page-enterprise-nx .nx-cmp-after{clip-path:none}
  body.page-template-page-enterprise-nx .nx-cmp-handle{display:none}
  body.page-template-page-enterprise-nx .nx-cmp-before .nx-cmp-list,
  body.page-template-page-enterprise-nx .nx-cmp-after .nx-cmp-list{width:100%;margin-top:18px;gap:10px}
  body.page-template-page-enterprise-nx .nx-cmp-after .nx-cmp-tag{align-self:flex-start}
  body.page-template-page-enterprise-nx .nx-cmp-it{font-size:14.5px}
  body.page-template-page-enterprise-nx .nx-cmp-before .nx-cmp-it{margin-left:0;max-width:100%}
}

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

/* what is NX: the card list kept the 52px + 8px top offset it has when it sits *below* a callout on Contract
   Verse. Here it sits in the right-hand column, so beside the copy the cards hung ~43px lower than the text
   block they are centred against, and once stacked (<=1080px) it left a ~110px hole under the paragraph. */
body.page-template-page-enterprise-nx .nx-what .archx-right .caplist{margin-top:0;padding-top:0}
/* side by side, the lede's 28px bottom margin made the left column taller than its text, so the cards centred
   14px low against it; stacked, that margin plus the grid gap gives the 60px break under the paragraph */
@media(min-width:1081px){body.page-template-page-enterprise-nx .nx-what .archx-lede{margin-bottom:0}}
body.page-template-page-enterprise-nx .nx-what .capx p{text-wrap:pretty}

/* what it does: narrow inactive cards hyphenated their titles ("im-/mutable", "pri-/vate cloud") */
body.page-template-page-enterprise-nx .nx-does .hw2-p h3,
body.page-template-page-enterprise-nx .nx-does .hw2-p h4{hyphens:manual;-webkit-hyphens:manual}

/* four pillars: the shared stagger is written for a 3-column grid (nth-child(3n+2)); in this 2 x 2 grid only
   "02" dropped and "04" sat level with "03". Stagger the whole right-hand column, as the tablet rule already does. */
@media(min-width:861px){
  body.page-template-page-enterprise-nx .nx-why4 .cv-w:nth-child(3n+2){margin-top:0}
  body.page-template-page-enterprise-nx .nx-why4 .cv-w:nth-child(2n){margin-top:clamp(20px,2.6vw,44px)}
}
/* 561-620px: one column already, but the tablet stagger still pushed every even pillar down (uneven gaps) */
@media(max-width:620px){
  body.page-template-page-enterprise-nx .nx-why4 .cv-w,
  body.page-template-page-enterprise-nx .nx-why4 .cv-w:nth-child(2n){margin-top:0}
}

/* FAQ chevron: the rotated two-border pseudo-element is positioned by its box, not its ink, so the closed
   chevron sat 1.5px below the question's centre line and the open one 1.7px above it. */
body.page-template-page-enterprise-nx .nx-faq .faq summary::after{transform:translateY(-81.5%) rotate(45deg)}
body.page-template-page-enterprise-nx .nx-faq .faq details[open] summary::after{transform:translateY(-16.7%) rotate(225deg)}
body.page-template-page-enterprise-nx .nx-faq .faq .ans{text-wrap:pretty}

/* letter-spaced mono labels carry the tracking after their last letter too, which pushed the text ~0.6-0.9px
   left of centre inside pills / centred headings. Take the trailing tracking back out. */
body.page-template-page-enterprise-nx .ts-head .k{margin-right:-.14em}
body.page-template-page-enterprise-nx .tsm-ph{padding-right:calc(22px - .14em)}
body.page-template-page-enterprise-nx .nx-cmp-tag{padding-right:calc(14px - .14em)}

/* touch QA: the 2px tab underline sat at bottom:-1px inside the overflow-x:auto tab row, so the row was 1px taller
   than its box and became vertically scrollable — a vertical swipe starting on the tabs latched onto the row and the
   page did not scroll. Same fix as ContractVerse: rule as an inset shadow, indicator kept inside the box. */
body.page-template-page-enterprise-nx .pt-tabs{border-bottom:0;box-shadow:inset 0 -1px 0 var(--line)}
body.page-template-page-enterprise-nx .pt-ind{bottom:0;height:2px}