/*
 * JUGL homepage section bands — cassiopeia_jugl (config pipeline: see deploy/README.md).
 *
 * Translated from the lifted hydrogen SCSS (media/.../scss/_section__*.scss) onto the DOM THIS
 * child emits: the index.php homepage-bands loop wraps each position as
 *   <div class="container-band container-<name>"> … modules rendered style="none" …
 * so the Gantry chrome the hydrogen rules leaned on (.moduletable / .g-title / .g-content) is
 * gone — the rules re-target the band wrapper and the raw module markup instead.
 *
 * COLOURS consume the token base in global/colors.css (loaded first), so each value lives once.
 * The .container-band base (width + block padding) is still the inline scaffold in index.php.
 *
 * Cut #2 scope = the three bands verified against live g5_hydrogen (meeting-location, launch,
 * map). register-to-attend is DEFERRED: no register band renders on the live homepage (only the
 * topbar "Register to Attend" menu link), so hydrogen's $register-background has no source to
 * match — needs FLIGHT's eyes before it gets a colour.
 */

/* meeting-location — solid green band, white heading + copy, centred (hydrogen: #g-meeting-location) */
.container-meeting-location {
    background: var(--jugl-green);
    text-align: center;
}
.container-meeting-location :is(h1, h2, h3, h4, h5, h6),
.container-meeting-location p {
    color: var(--jugl-white);
}

/* launch-a-full-version — yellow band, navy text, navy pill CTA (hydrogen: #g-launch-full-version) */
.container-launch-a-full-version {
    background: var(--jugl-yellow);
    color: var(--jugl-navy);
    text-align: center;
    font-size: 22px;
    line-height: 30px;
}
.container-launch-a-full-version a {
    display: inline-block;
    background: var(--jugl-navy);
    color: var(--jugl-white);
    border-radius: 23px;
    padding: 0.469rem 3.752rem;   /* hydrogen $padding--half $padding--quadruple */
}
.container-launch-a-full-version p {
    margin: 0;
}

/* map — flush, no band padding (hydrogen: #g-map .g-content { padding: 0; margin: 0 }) */
.container-map {
    padding-block: 0;
}

/* ── snag list: homepage vertical rhythm (top → bottom) ───────────────────────
   space · space · flush · space · flush. Per-band overrides replace the blanket
   .container-band { padding-block:1rem } scaffold from index.php. Values are a first pass —
   eyeball-tunable. */

/* (3) hero slider → main content: add breathing space at the boundary INSIDE .site-grid (between the
       header-banner hero and the component), NOT on .site-grid itself — a top margin there collapsed into
       the header and skewed the menu bar (FLIGHT, 2026-08-14). Placed on the component below. */
.site-grid > .container-component {
    margin-block-start: 2.5rem;
}

/* (4) why-attend → green bar: decent space above the first band.
   (5) green bar → photo: bleed straight in (no bottom gap). */
.homepage-bands .container-meeting-location {
    margin-block-start: 2.5rem;
    padding-block: 1.25rem;
    margin-block-end: 0;
}

/* (6) photo (map): flush to the green above; pull the following band up 18px below (FLIGHT — closes the
   stray gap under the collage image). */
.homepage-bands .container-map {
    margin-block: 0 -18px;
    padding-block: 0;
}

/* (7) launch → footer: butt straight in (no gap either side of the seam). */
.homepage-bands .container-launch-a-full-version {
    padding-block: 1.25rem;
    margin-block-end: 0;
}
.container-footer.footer {
    margin-block-start: 0;
}