/* ==========================================================================
   responsive.css
   Mobile navigation, breakpoint overrides, motion. Loads last.
   All values reference tokens.css. Nothing is hardcoded.
   Load order is base -> chrome -> components -> responsive and must not
   change: responsive.css contains the overrides that depend on coming last.
   ========================================================================== */

/* ==========================================================================
   Mobile menu + responsive
   ========================================================================== */
@media (max-width: 767px) {
    .nav-toggle { display: inline-flex; }

    .site-nav__list {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-2) var(--space-4) var(--space-4);
        background: var(--color-surface);
        border-bottom: var(--border);
        box-shadow: var(--shadow-overlay);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 20;
        transition: opacity var(--dur-fast) var(--ease-brand),
            transform var(--dur-fast) var(--ease-brand),
            visibility var(--dur-fast) var(--ease-brand);
    }

    .site-header { position: sticky; }
    .site-header__inner { position: relative; }

    .nav-toggle[aria-expanded="true"] + .site-nav__list {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .site-nav__list li { border-top: var(--border); }
    .site-nav__list li:first-child { border-top: 0; }

    .site-nav__list a {
        min-height: 48px;
        width: 100%;
        font-size: var(--fs-body);
    }

    .site-footer__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }

    .hero__actions .btn { flex: 1 1 auto; }

    /* 48px of padding on a 390px screen leaves 294px of content. */
    .about-strip,
    .step {
        padding: var(--panel-pad-mobile);
    }

    .step {
        padding-left: calc(var(--panel-pad-mobile) + 2rem + var(--space-2));
    }

    .step::before {
        left: var(--panel-pad-mobile);
        top: var(--panel-pad-mobile);
    }
}

@media (min-width: 768px) {
    .container { padding-inline: var(--space-xl); }

    .split-2 {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }

    .split-2 > * + * {
        border-inline-start: var(--border);
        padding-inline-start: var(--space-2xl);
    }

    .session-list__item {
        grid-template-columns: minmax(12rem, 0.38fr) 1fr;
        gap: var(--space-xl);
        align-items: baseline;
    }
}

@media (min-width: 1024px) {
    .hero__grid--early {
        grid-template-columns: 1.15fr 0.85fr;
        gap: var(--space-3xl);
    }

    .hero__visual--early { display: block; }

    /* Homepage and split heroes: show visual from lg, not only xl */
    .hero__grid:not(.hero__grid--solo) {
        grid-template-columns: 1.15fr 0.85fr;
        gap: var(--space-3xl);
    }

    .hero__visual { display: block; }
}

@media (min-width: 1200px) {
    /* xl keeps the same split; held for cascade clarity with older docs */
    .hero__grid:not(.hero__grid--solo) {
        grid-template-columns: 1.15fr 0.85fr;
        gap: var(--space-3xl);
    }

    .hero__visual { display: block; }
}

/* ==========================================================================
   Motion - scroll reveal (desktop), hover lift, reduced-motion
   ========================================================================== */
@media (min-width: 768px) and (hover: hover) {
    .reveal {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity var(--dur-slow) var(--ease-brand),
            transform var(--dur-slow) var(--ease-brand);
    }

    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .reveal { opacity: 1 !important; transform: none !important; }

    .belief__graphic,
    .belief__node--pulse {
        animation: none !important;
    }
}