/* ============================================================
   PINNED STEPPER
   Reusable pinned scrollytelling stepper. Pair with pinned-stepper.js.
   See that file's header comment for the markup contract.

   Customize per page via CSS custom properties on .pinned-stepper:
     --pinned-stepper-accent        (default: brand red)
     --pinned-stepper-track         (default: light gray)
     --pinned-stepper-height        (scroll runway per step, default: 100vh)
     --pinned-stepper-sticky-top    (default: 12vh)
     --pinned-stepper-sticky-height (default: 72vh)

   IMPORTANT: the base rules below (outside .is-pinned) are the fallback
   every visitor gets without JS, with reduced motion, or on a narrow
   viewport — they must render a complete, readable layout on their own.
   Only style .pinned-stepper__panels/__panel as a plain stacked/grid list
   here; the pin/crossfade treatment lives entirely under .is-pinned so it
   can never leave content invisible if the JS enhancement doesn't apply.
   ============================================================ */

.pinned-stepper {
    --pinned-stepper-accent: var(--brainbuffet-red, #ed1c24);
    --pinned-stepper-track: #eee;
    --pinned-stepper-height: 100vh;
    --pinned-stepper-sticky-top: 12vh;
    --pinned-stepper-sticky-height: 72vh;
}

/* ---- Base (static, always-safe) layout ---- */
.pinned-stepper__panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.pinned-stepper__rail-nav { display: none; }

/* ============================================================
   Pinned mode (JS-enhanced only)
   ============================================================ */
.pinned-stepper.is-pinned {
    position: relative;
    height: calc(var(--pinned-stepper-height) * 4);
}

.pinned-stepper.is-pinned .pinned-stepper__sticky {
    position: sticky;
    top: var(--pinned-stepper-sticky-top);
    height: var(--pinned-stepper-sticky-height);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.pinned-stepper.is-pinned .pinned-stepper__sticky-inner {
    width: 100%;
}

.pinned-stepper.is-pinned .pinned-stepper__rail-nav {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 480px;
    margin: 0 auto 3.5rem;
}

.pinned-stepper__dot {
    flex: none;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: #bbb;
    background: #fff;
    border: 2px solid var(--pinned-stepper-track);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.pinned-stepper__dot.is-active {
    color: var(--pinned-stepper-accent);
    border-color: var(--pinned-stepper-accent);
}

.pinned-stepper__dot.is-done {
    color: #fff;
    background: var(--pinned-stepper-accent);
    border-color: var(--pinned-stepper-accent);
}

.pinned-stepper__rail-track {
    flex: 1;
    height: 2px;
    background: var(--pinned-stepper-track);
    position: relative;
}

.pinned-stepper__rail-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: var(--pinned-stepper-accent);
}

.pinned-stepper.is-pinned .pinned-stepper__panels {
    position: relative;
    display: block;
}

.pinned-stepper.is-pinned .pinned-stepper__panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.pinned-stepper.is-pinned .pinned-stepper__panel.is-active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .pinned-stepper.is-pinned .pinned-stepper__panel { transition: none; }
}