/**
 * @file
 * The section band. FND-8 / DONI-717.
 *
 * A band is one horizontal stripe of a page: full-bleed background, a capped
 * content column, and optional decorative artwork that bleeds behind both.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * 🔴 THIS FILE OWNS NO HORIZONTAL NUMBER. NOT ONE.
 *
 * The gutter and the content width belong to FND-4 (`css/base/layout.css`).
 * A band gets them by wearing `l-band` / `l-container` in the markup, not by
 * re-declaring `padding-inline` or `inline-size` here. `layout.css` calls a
 * component that writes its own `padding-inline: 120px` "opted out of the
 * only thing keeping the page aligned" — that applies to this file too.
 * ─────────────────────────────────────────────────────────────────────────
 *
 * ## The markup contract — FOUR classes, and all four are required
 *
 *     <section class="l-band band band--coral">
 *       <img class="band__art" alt="" aria-hidden="true" …>
 *       <div class="l-container band__inner">…</div>
 *     </section>
 *
 * | Class          | Owns                                                    |
 * |----------------|---------------------------------------------------------|
 * | `l-band`       | the gutter. FND-4                                        |
 * | `band`         | position, overflow, stacking, block spacing hooks        |
 * | `band--*`      | background only                                          |
 * | `l-container`  | the 1200 cap and the centring. FND-4                     |
 * | `band__inner`  | sits above the art. NO width of its own                  |
 * | `band__art`    | decorative bleed layer, behind everything, inert         |
 *
 * ⚠️ **`l-band` and `l-container` are not optional and their absence is
 * quiet at 1440.** Drop `l-band` and `.band__inner` is still
 * `min(100%, 1200)` centred in 1440 → left 120, width 1200. Identical to
 * correct. It diverges only below the 768 breakpoint (left 0, full width,
 * instead of left 24). That is why `.band__inner` was added to
 * `project/scripts/layout/check-alignment.py` in this same change: the 390
 * viewport in that script is the tripwire for a forgotten `l-band`.
 *
 * 🔎 Two classes per element was argued against and lost. Defining `.band`
 * in terms of `--layout-gutter` directly would have made one class enough —
 * but it forks the contract in two: half the system uses FND-4's classes and
 * half reimplements them, so a token rename lands in one place and not the
 * other. It also makes `class="l-band band"` silently double-gutter.
 *
 * ## Verified geometry
 *
 * | Width | `.band` padding-inline | `.band__inner` width | Evidence |
 * |-------|------------------------|----------------------|----------|
 * | 1440  | 120 / 120              | 1200                 | Figma `I24410:65661;23205:13679` `px-[120px]`; browser-measured, this ticket |
 * | 375   | 24 / 24                | 327                  | Figma `24410:65704`, six blocks x=24 w=327 (FND-4); browser-measured, this ticket |
 *
 * ## Block spacing: there is NO single number, so this file supplies none
 *
 * Measured on the canonical file, page `1:5` 🛠️ Design System, canvas
 * `24410:65586`. Every one of these is a Section on ONE desktop page plus one
 * mobile page, and they disagree:
 *
 * | Node                        | Width | padding-block  |
 * |-----------------------------|-------|----------------|
 * | `I24410:65661;23205:13679`  | 1440  | 60 / 60        |
 * | `24581:18636` (Container y) | 1440  | 60 / 60        |
 * | `I24410:65661;10228:6681`   | 1440  | 40 / 40        |
 * | `I24410:65661;10291:28553`  | 1440  | 0 / 60         |
 * | `24581:36431` (children y)  | 375   | 24 / 24        |
 * | `I24410:65704;23549:58263`  | 375   | 40 / 0         |
 *
 * Four values, one of them asymmetric, across six samples. A "usual" default
 * invented from that is anecdote wearing a token's clothes, and a wrong
 * default is invisible — the page looks designed and nobody remeasures.
 *
 * So the primitive ships **unset**, and a page sets both ends explicitly from
 * ITS OWN Figma node:
 *
 *     .band--some-section {
 *       --band-space-block-start: 60px;   |* Figma <node id> *|
 *       --band-space-block-end: 60px;     |* Figma <node id> *|
 *     }
 *
 * ⚠️ `0` is NOT a design claim here, it is the absence of one. Two adjacent
 * unset bands read as one continuous field, which is why this is a rule and
 * not a tripwire — nothing will tell you the spacing is missing.
 *
 * ⛔ Do not add `padding-block: 60px` to page CSS. Set the two properties, so
 * every band's spacing stays greppable as one name.
 *
 * ## ⚠️ Figma frame padding INCLUDES the stroke
 *
 * A Figma frame with `padding: 32` and an 8px stroke insets its content by 32
 * total, not 40 — the stroke is drawn inside the padding, not added to it.
 * Two committed pages shipped 8px out that way. When you lift a padding
 * number off a stroked frame, use the number Figma prints and do not add the
 * stroke to it. None of the bands measured above carry a stroke, so nothing
 * in this file is affected; the warning is here for the page tickets that
 * consume it.
 */

/**
 * The band.
 *
 * `isolation: isolate` is deliberate and is a compliance guard, not a style.
 * It makes every band a stacking context with `z-index: auto`, so nothing a
 * band contains can ever paint above the fixed ISI safety tray
 * (`dtc_nxt_isi/css/isi-tray.css:77`, `z-index: 1000`). Occluding the ISI is
 * a regulatory problem, not a visual nit. Remove this and a page ticket only
 * has to write `z-index: 9999` once to cover the tray.
 */
.band {
  position: relative;
  isolation: isolate;

  /* Unset by default — see "Block spacing" above. Both ends, separately,
     because the design draws asymmetric bands (`I24410:65661;10291:28553`
     is 0 / 60). */
  padding-block: var(--band-space-block-start, 0) var(--band-space-block-end, 0);
}

/**
 * Clip ONLY the bands that carry artwork.
 *
 * Figma's Sections clip their contents: `24581:18904` is a 1900×1900 circle
 * graphic at x=-220, y=-160 inside a 1440×323 Section, and the rendered frame
 * shows it cut off at all four Section edges.
 *
 * `:has()` rather than an `.band--art` modifier because AC 3 restricts
 * modifiers to background and spacing, and rather than a blanket
 * `overflow: clip` on `.band` because a band with no art has no reason to
 * clip a focus ring or a future overlay.
 *
 * A band whose art must bleed into the next band overrides this with
 * `overflow: visible clip` — legal, and it does not blockify the box the way
 * a mixed `visible`/`hidden` pair would.
 */
.band:has(> .band__art) {
  overflow: clip;
}

/**
 * The content column.
 *
 * 🔴 NO `inline-size` AND NO `margin-inline` HERE. `l-container` supplies
 * both. This rule exists only to lift the column above `.band__art`.
 */
.band__inner {
  position: relative;
  z-index: 1;
}

/**
 * Decorative bleed artwork. Inert, behind the content, unpositioned.
 *
 * 🔴 IT HAS NO DEFAULT POSITION ON PURPOSE, AND YOU MUST NOT TRANSCRIBE
 * FIGMA'S x/y TO GIVE IT ONE.
 *
 * These nodes are rotated. Figma reports the **post-rotation bounding box**;
 * CSS `rotate()` turns the element about its own centre. The two are
 * different coordinate systems, so copying Figma's numbers is not "slightly
 * off" — it put one headline swoop **241px** out of place with nothing
 * failing. `24581:18738` in the canonical file is a live example: a 28×270
 * box reported at y=310 inside a parent only 350 tall.
 *
 * Position each instance in the page's own CSS, from a MEASURED render:
 *
 *     |* Figma node 24581:18904. Figma AABB NOT used — node is rotated.
 *        Placed by measuring getBoundingClientRect() at 1440×900. *|
 *     .band--crosslinks .band__art { inset-block-start: -160px; … }
 *
 * State the viewport, the final CSS, the Figma node id, and the words
 * "Figma AABB not used". No presets live here — `--left` / `--right`
 * shorthands would fit one arc and lie about the next.
 *
 * `alt=""` plus `aria-hidden="true"` in the markup; `pointer-events: none`
 * so it cannot eat a click meant for the content above it.
 */
.band__art {
  position: absolute;
  z-index: 0;
  max-inline-size: none;
  pointer-events: none;
  user-select: none;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Backgrounds. THREE, and only three, because three are what was measured.
 *
 * The ticket names 21 modifiers "measured across nine pages". That list is
 * extraction-era inventory, not a live measurement, and most of it is not a
 * background at all — `--dosing`, `--how`, `--steps`, `--refer`,
 * `--crosslinks`, `--study`, `--switch`, `--video`, `--everystep`, `--pem`,
 * `--guide`, `--library`, `--resources`, `--faq`, `--aect`, `--footnotes`,
 * `--intro`, `--impact` are page SECTION HOOKS. They belong in the page's own
 * CSS when that page is built, scoping that page's rules. An empty
 * `.band--dosing {}` here would be coverage that does not exist: a later
 * ticket attaches the class, CI goes green, and the band has no background.
 *
 * Add a modifier here when you have measured it. Cite the node id.
 * ───────────────────────────────────────────────────────────────────────── */

/* Figma `24581:18635` — the Section renders opaque white, and the brick page
   texture does not show through it. */
.band--white {
  background-color: var(--color-white);
}

/* Figma `I24410:65661;23205:13679` — fill is the Figma VARIABLE `Coral`,
   confirmed `#f16b50` by `get_variable_defs` on `24581:18903`. Not a literal,
   and not `--color-coral-band` (`#eb6f56`), which is a different value that
   nothing in this file binds to. */
.band--coral {
  background-color: var(--color-coral);
}

/**
 * The white-brick texture.
 *
 * Figma `I24410:65661;10228:6681` and `I24410:65661;10291:28553` both draw it
 * as a full-bleed `<img>`: `absolute inset-0`, `object-cover`,
 * `opacity: 0.40`, `pointer-events: none`. `object-fit: cover` with the
 * default centre origin is `background-size: cover` + `center` + `no-repeat`.
 *
 * The asset is already in this theme. `images/backgrounds/brick-background.webp`
 * is 1440×1960 — byte-for-byte the same dimensions as the Figma export, and
 * visually identical.
 *
 * ⚠️ The white underneath is an INFERENCE, not a measured fill. The Section
 * node carries no background of its own; 40% opacity has to composite over
 * something, and the rendered frame shows the texture as very light grey on
 * white. Painting it here makes the band self-contained instead of dependent
 * on whatever the page happens to put behind it.
 */
.band--brick {
  background-color: var(--color-white);
}

.band--brick::before {
  position: absolute;
  z-index: 0;
  content: "";
  background-image: url("../../images/backgrounds/brick-background.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.4;
  pointer-events: none;
  inset: 0;
}