/* ============================================================
   Layout — sections, grids, containers
   Claude Code: flesh this out per IMPLEMENTATION-BRIEF.md
   ============================================================ */

main { padding-top: var(--nav-height); }

/* Section + footer elements stay full-width so their backgrounds fill
   the viewport. Visible content inside them caps at the 1440 design width
   via the rule below. Nav already mirrors this pattern (.nav full-width
   fixed; .nav__inner caps via max-width). */
section {
  position: relative;
  isolation: isolate;
  padding: var(--sp-4xl) var(--section-px);
}

/* Cap visible content at 1440 + center. Excludes decorative absolute layers
   (bg blobs, brand-promise hbars) which are aria-hidden and need to span
   the full section so the bgs and dividers track the section, not the
   capped content area. */
section > :not([aria-hidden="true"]),
.footer > * {
  max-width: var(--container-max);
  margin-inline: auto;
}

.section__header {
  text-align: center;
  margin-bottom: var(--sp-2xl);
}
.section__header .h2 + .section__subhead {
  margin-top: var(--sp-sm);
  font-size: var(--fs-body-lg);
  color: var(--c-deep-navy);
}

/* Soft brand-gradient blob backdrops for light sections (Benefits, Roles,
   Process). Mirrors the Figma "BG Gradient" stack: 3 SVG blob shapes
   (warm yellow + teal-tints) with a soft Gaussian blur, plus white-fade
   overlays at the top and bottom that bleed the section edges into white.
   Section uses `isolation: isolate` so z-index: -1 stays inside the section. */
.section__bg-blobs {
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  overflow: hidden;
}
.section__bg-blob {
  position: absolute;
  display: block;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.85;
}
/* Match Figma absolute positions — all relative to the 1440-wide section */
.section__bg-blob--1 { left: -276px; top: 304px; width: 652px; height: 545px; }
.section__bg-blob--2 { right: -142px; top: 190px; width: 614px; height: 611px; }
.section__bg-blob--3 {
  left: 50%; top: 384px;
  width: 457px; height: 367px;
  transform: translate(calc(-50% - 26.5px), 0);
}

.section__bg-fade {
  position: absolute;
  left: 0; right: 0;
  height: 200px;
  pointer-events: none;
}
.section__bg-fade--top {
  top: 0;
  background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
}
.section__bg-fade--bottom {
  bottom: 0;
  background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
}
/* Roles + Process use taller (300px) fades per Figma */
.roles .section__bg-fade,
.process .section__bg-fade { height: 300px; }
/* Process has only the top fade in Figma */
.process .section__bg-fade--bottom { display: none; }

/* 4-up card grid */
.card-grid {
  display: grid;
  gap: var(--sp-md);
}
.card-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .card-grid--4 { grid-template-columns: 1fr; }
}

/* Process two-column */
.process__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
}
@media (max-width: 900px) {
  .process__columns { grid-template-columns: 1fr; }
}