/* ============================================================
   04 — LAYOUT
   Containers and the alternating dark / light section rhythm.
   ============================================================ */

/* ------------------------------------------------------------
   CONTAINER
   ------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--w-main);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide   { max-width: var(--w-wide); }
.container--narrow { max-width: var(--w-narrow); }
.container--full   { max-width: none; padding-inline: 0; }

/* ------------------------------------------------------------
   SECTION

   The reference design alternates dark and light panels, each
   light panel curving in at the top with a large radius and the
   next dark panel pulling back up over it. `--pull` is how far
   the following section overlaps.
   ------------------------------------------------------------ */

.section {
  position: relative;
  padding-block: var(--sp-4xl);
}

.section--flush-top    { padding-block-start: 0; }

/* ------------------------------------------------------------
   SECTION HEADER
   ------------------------------------------------------------ */

.section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-lg);
  text-align: center;
}

/* .section__title typography lives in 03-base.css alongside the
   other display classes, so the ink-padding stays in one place. */

/* ------------------------------------------------------------
   STACK — vertical rhythm without margin collapse
   ------------------------------------------------------------ */

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

.stack--lg { --gap: var(--sp-2xl); }
.stack--xl { --gap: var(--sp-3xl); }

/* ------------------------------------------------------------
   DECOR LAYER — floating 3D objects in section corners.
   Never intercepts pointer events, hidden from assistive tech.
   ------------------------------------------------------------ */

.decor {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: var(--z-below);
}

.decor__item {
  position: absolute;
  width: var(--size, 12rem);
  max-width: 30vw;
  user-select: none;
}