/*
  Layout primitives — grid/container/section rhythm, spec §4.6 (spacing),
  §4.7 (grid: 12/8/4 columns, 1440 max width, centered), and the responsive
  section-gap scale (desktop 160 / tablet 120 / mobile 80).
*/

/* Ensure zero horizontal scroll across all pages.
   `main` is deliberately excluded: any non-visible overflow on an ancestor
   breaks position:sticky for descendants (it becomes the sticky containing
   block instead of the viewport), which the editorial slider relies on.
   html/body already clip any horizontal overflow, so this is unaffected.
   `clip` (not `hidden`) here: `hidden` forces the paired overflow-y to
   compute as `auto`, which makes html/body a scroll container and breaks
   position:sticky page-wide. `clip` avoids that axis-coupling. `hidden` is
   kept first as a fallback for browsers without `clip` support. */
html,
body,
.section,
.site-footer,
.site-header {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

img, picture, video, canvas {
  max-width: 100%;
  height: auto;
}

.container {
  width: min(100% - (var(--content-margin) * 2), var(--content-max));
  margin-inline: auto;
}

.reading-width {
  width: min(100% - (var(--content-margin) * 2), var(--reading-max));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-gap-desktop);
  padding-inline: var(--content-margin);
}

/* section adjacent spacing removed to allow full gaps */

.section--tight {
  padding-block: 80px;
}
.section--brand { background: var(--color-primary-brand); color: var(--color-background); }
.section--brand h2 { color: var(--color-background); }

.section__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}
.section__heading p { max-width: 32rem; color: var(--color-primary-text); }

.eyebrow {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-ls);
  font-weight: var(--text-caption-weight);
  text-transform: uppercase;
  color: var(--color-primary-text);
}

.intro-copy {
  margin-top: var(--space-lg);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
}

.grid { display: grid; gap: var(--space-2xl); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.rule { border: none; border-top: 1px solid var(--color-border-divider); margin: 0; }

.gap-top-lg { margin-top: var(--space-lg); }
.gap-top-4xl { margin-top: var(--space-4xl); }

@media (max-width: 1279px) {
  .section { padding-block: var(--section-gap-tablet); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }
  .container {
    width: 100%;
    max-width: 100%;
  }
  .section {
    padding: var(--section-gap-mobile) var(--content-margin);
    max-width: 100%;
    overflow-x: hidden;
  }
  h1, h2, h3, h4, h5, h6, p, .intro-copy, .section__heading p {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .section--tight { padding-block: var(--space-4xl); }
  .section__heading { display: block; margin-bottom: var(--space-lg); }
  .section__heading .button { margin-top: var(--space-md); }
  .section__heading .button--text { display: none; }
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .grid { gap: var(--space-md); }
}