/* pages/home/home-layout.css — Main-only layout corrections (S4).
   Linked from index.html alone, so nothing here can reach a child page.
   That isolation is the point: shared/footer.css is linked by four pages, so
   the rules below would leak if they lived in a shared file. */

/* ---- CAPABILITIES · card art to purple label ----
   The pre-migration organism was a carousel whose slide-inner is a two-column
   grid, so the art and the text never sat one above the other and no vertical
   gap was ever specified. Main's triptych stacks them, which left the label
   flush against the image at every breakpoint. */
.teaser__item .services__media {
  margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
}

/* ---- ABOUT · editorial + CTA ----
   The milestone list was redundant with about/, which carries the same eight
   events with their bodies, notes and reveal panels. Main keeps the editorial
   and the route in. The CTA follows the header's own alignment contract from
   shared/designops-variant.css: centred at desktop and tablet, left at mobile.
   .cta is inline-flex, so the parent's text-align is what moves it. */
@media (min-width: 768px) {
  #about .section__inner { text-align: center; }
}
#about .cta { margin-top: clamp(0.5rem, 1vw, 1rem); }
/* CTA to ticker lanes (S10C): two thirds of the stacked default, the .cta's
   2rem bottom margin plus the lanes' clamp(2.5rem, 4vw, 4rem) top margin,
   carried by the lanes alone so the ratio holds at every breakpoint. */
#about .cta { margin-bottom: 0; }
#about .ticker__lanes { margin-top: calc((2rem + clamp(2.5rem, 4vw, 4rem)) * 2 / 3); }

/* ---- CONTACT · moved to shared/section-extras.css (.section--contact-cta) ----
   About now ends on the same organism (PR35-Q55), so its rules live in one shared place. */

/* ---- CAPABILITIES · slide carousel on mobile, triptych above (S10C) ----
   Main carries both forms of the three pillars. At 767px and below, the
   legacy slide chassis (capabilities.css) replaces the vertical stack;
   from tablet up, the triptych stays and the carousel is withheld. Hidden
   forms are display:none, so assistive tech meets each pillar once. */
@media (max-width: 767px) {
  #capabilities .teaser__triptych { display: none; }
  /* The chassis bleeds its track into the right gutter, a peek device from
     the desktop carousel. With one full-width slide it only pushed each slide
     to the screen edge: 0px right margin against the gutter on the left, the
     next button flush with the edge, long lines running into it. */
  #capabilities .services__carousel { margin-right: 0; }
  /* The chassis boxes the art at 4:3 on mobile, but the pillar art is 3:2
     (768x512), so contain left a band above and below it. The slot now
     hugs the image; the art keeps its rendered size. */
  #capabilities .services__image-slot { aspect-ratio: auto; }
  #capabilities .services__image { height: auto; }
}
@media (min-width: 768px) {
  #capabilities .services__carousel-outer,
  #capabilities .services__controls,
  #capabilities .services__dots { display: none; }
}

/* ---- CAPABILITIES · per-vertical CTAs hidden (S4D · F3.6) ----
   Main's Contact organism already carries a conversation CTA, which makes
   three more redundant. Markup and cap_slide_cta are retained: the key stays
   in both dictionaries and the child page still references it six times.
   Deleting this one rule restores all three. */
.teaser__triptych .services__cta { display: none; }

/* ---- CAPABILITIES · lede centring (S4D-fix) ----
   shared/designops-variant.css gives auto margins to .evolution__header and
   .track-record__header ledes but omits .capabilities__header, so this lede
   kept its 36rem block hard-left under centred text. Home-only: index.html is
   the sole page carrying .capabilities__header. */
@media (min-width: 768px) {
  #capabilities .section__lede { margin-left: auto; margin-right: auto; }
}