/**
 * Scroll The Word — Responsive Styles
 * Breakpoints:
 *   ≥ 1200px  → Full 3-column (Menu | Content | Featured)
 *   768–1199px → 2-column (Menu | Content) + Featured as right slideout
 *   < 768px   → Single column + mobile header + bottom nav bar
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Medium: 768px – 1199px ──────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    /* Collapse to 2-column (no featured in grid) */
    .app-shell {
        grid-template-columns: var(--menu-width) 1fr;
    }

    /* Featured panel becomes fixed right slideout */
    .featured-panel {
        position: fixed;
        top: 0;
        right: calc(-1 * var(--featured-width));
        width: var(--featured-width);
        height: 100vh;
        z-index: 100;
        box-shadow: var(--shadow-lg);
        transition: right var(--transition-slow);
        /* Remove sticky behavior */
        border-right: none;
    }

    .featured-panel.is-open {
        right: 0;
    }

    /* Show the close button inside featured panel */
    /* Float button: featured panel is a slideout here, so revert to viewport-right anchor */
    .app-shell:not(.app-shell--page) .options-float-btn {
        right: 24px;
    }
}

/* ── Small: < 768px ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Single content column */
    .app-shell,
    .app-shell--page {
        grid-template-columns: 1fr;
        /* Push content below fixed mobile header */
        padding-top: var(--header-height);
        /* Push content above fixed bottom nav */
        padding-bottom: var(--bottom-nav-height);
    }

    /* Show mobile header */
    .mobile-header {
        display: flex;
    }

    /* Show bottom nav */
    .bottom-nav {
        display: flex;
        align-items: stretch;
    }

    /* Hide float options button on mobile — use bottom-nav More button instead */
    .options-float-btn {
        display: none;
    }

    /* Show Display Options button inside left menu for mobile guests */
    .left-menu__options-btn {
        display: flex;
        justify-content: center;
    }

    /* Hide guest login/signup on mobile — mobile header handles auth */
    .user-card--guest {
        display: none;
    }

    /* Keep nav list scrollable so bottom section stays on screen */
    .nav-list {
        overflow-y: auto;
        min-height: 0;
    }

    /* Left menu becomes fixed left slideout */
    .left-menu {
        position: fixed;
        top: 0;
        left: calc(-1 * var(--menu-width));
        width: var(--menu-width);
        height: 100dvh;
        z-index: 100;
        box-shadow: var(--shadow-lg);
        transition: left var(--transition-slow);
        /* Cancel sticky behavior */
        overflow-y: auto;
    }

    .left-menu.is-open {
        left: 0;
    }

    /* Featured panel slides from right on mobile too */
    .featured-panel {
        position: fixed;
        top: 0;
        right: calc(-1 * var(--featured-width));
        width: min(var(--featured-width), 90vw);
        height: 100vh;
        z-index: 100;
        box-shadow: var(--shadow-lg);
        transition: right var(--transition-slow);
        border-left: none;
    }

    .featured-panel.is-open {
        right: 0;
    }

    /* Feed header adjustments */
    .feed-header {
        top: 0; /* Sticks below the fixed app header (app-shell has padding-top) */
    }

    /* Verse cards: slightly less padding on small screens */
    .verse-card__body {
        padding: 16px 18px 12px;
    }

    .verse-card__text p {
        font-size: var(--text-base);
    }

    .study-note-card__body {
        font-size: var(--text-base);
    }

    /* Feed padding — full bleed on mobile */
    .verse-feed {
        padding: 16px 0;
    }

    /* Cards span edge-to-edge on mobile */
    .verse-card {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    /* Verse-view cards container: remove side padding so cards are also full-bleed */
    .verse-view__cards {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ── Very small screens: < 400px ─────────────────────────────────────────────── */
@media (max-width: 399px) {
    .verse-card__body {
        padding: 14px 14px 10px;
    }

    .logo-text {
        font-size: var(--text-base);
    }
}

/* ── Large screens: cap feed width nicely ─────────────────────────────────────── */
@media (min-width: 1400px) {
    :root {
        --menu-width:      280px;
        --featured-width:  340px;
    }
}