/* ==========================================================================
   layout.css - container, section bands, grid primitives
   Depends on tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

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

/* Narrower container for reading-length content (legal, articles) */
.wrap--narrow {
  width: min(calc(100% - (var(--container-gutter) * 2)), 860px);
  margin-inline: auto;
}

/* Push page content below the fixed header. Pages whose hero sits UNDER the
   transparent header (home, page heroes) do not use this. */
.main-offset { padding-top: var(--header-h); }

/* --------------------------------------------------------------------------
   Section bands - the four background variants that build every page
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  padding: var(--section-y) 0;
}

.section--soft { background: var(--bg-soft); }

.section--dark,
.section--dark-2 {
  z-index: 0; /* keeps the ::before texture layer's negative z-index contained */
}

.section--dark {
  background: var(--bg-dark);
  color: var(--c-white);
}

.section--dark-2 {
  background: var(--bg-dark-2);
  color: var(--c-white);
}

/* Faint ambient network texture behind dark bands and the closing CTA band.
   Swapped to a still twin under reduced motion via plain background-image -
   see assets/img/pattern-network(.svg|-static.svg). */
.section--dark::before,
.section--dark-2::before,
.cta-band::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url('../assets/img/pattern-network.svg');
  background-repeat: repeat;
  background-size: 220px 220px;
  opacity: 0.08;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .section--dark::before,
  .section--dark-2::before,
  .cta-band::before {
    background-image: url('../assets/img/pattern-network-static.svg');
  }
}

.section--tight { padding: var(--section-y-sm) 0; }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Section intro block - eyebrow + heading + lead */
.section-head {
  max-width: var(--measure);
  margin-bottom: var(--sp-14);
}

.section-head .lead { margin-top: var(--sp-6); }

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Grid primitives
   Every multi-column layout on the site reduces to these.
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--sp-10);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Editorial split - asymmetric two-column, used for intro sections */
.grid--editorial {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.75fr);
  gap: var(--sp-24);
  align-items: start;
}

/* Weighted splits found throughout the reference */
.grid--split-l { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sp-20); }
.grid--split-r { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--sp-20); }

.grid--gap-sm { gap: var(--sp-6); }
.grid--gap-lg { gap: var(--sp-20); }

/* Zero-gap grid - cells separated by their own 1px borders instead */
.grid--bordered { gap: 0; }

/* --------------------------------------------------------------------------
   Responsive collapse
   1180px: 5→3, 4→2 columns.  900px: everything → single column.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .grid--editorial,
  .grid--split-l,
  .grid--split-r {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-12);
  }

  .section-head { margin-bottom: var(--sp-12); }
}

@media (max-width: 900px) {
  .grid--2,
  .grid--3,
  .grid--5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid { gap: var(--sp-8); }
}

@media (max-width: 600px) {
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .section-head { margin-bottom: var(--sp-10); }
}

/* --------------------------------------------------------------------------
   Scroll reveal - subtle opacity/translate, matching the reference.
   Elements start hidden only once JS confirms it can reveal them, so the
   page remains readable with JS disabled.
   -------------------------------------------------------------------------- */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}