/* =============================================================================
   4. LAYOUT & UTILITIES
   ============================================================================= */
/* Loads 4th. .container/.section/.stack/.cluster/.grid-split — the layout primitives every section builds on. Depends on: tokens.css. */

/* Offsets any in-page anchor target clear of the sticky header when
   smooth-scrolled into view. */
[id] {
  scroll-margin-top: var(--header-offset);
}

/* max-width includes the gutter (border-box) so the inner content area
   is exactly --container-max-width wide on large screens — matching two
   nested elements (outer padding + inner max-width cap) in one rule. */
.container {
  width: 100%;
  max-width: calc(var(--container-max-width) + (2 * var(--space-container-x)));
  margin-inline: auto;
  padding-inline: var(--space-container-x);
}

.container--narrow {
  max-width: calc(var(--container-narrow-width) + (2 * var(--space-container-x)));
}

.section {
  padding-block: var(--space-section-y);
}

.section--alt {
  background: var(--color-bg-secondary);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-6));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-4));
}

/* Split content/visual layout. Column ratio is set per-section below,
   since Featured Capability uses an even split and Platform uses an
   asymmetric split — both switch at the same 900px breakpoint. */
.grid-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-content-gap);
  align-items: center;
}

/* A shared 12-column grid gives every desktop split the same edges and
   gutters. Section rules below only choose how many of those columns each
   existing content block occupies; no markup or behavior needs to change. */
@media (min-width: 900px) {
  .grid-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    row-gap: var(--space-content-gap);
  }

  .grid-split > * {
    grid-column: span 6;
  }
}

/* Grid items default to `min-width: auto`, meaning a column refuses to
   shrink below the widest UNSHRINKABLE thing inside it (e.g. the hero
   trust-marquee's `width: max-content` track, needed for its seamless
   scroll loop). Without this, on small/medium screens that item silently
   floors every column in the row at its own content width — clipped by
   the section's own `overflow: hidden` rather than a visible scrollbar,
   so it can look "not responsive" without ever triggering page overflow. */
.grid-split > * {
  min-width: 0;
}

.text-center {
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}