/* ═══════════════════════════════════════════════════════
   THE BAYLEY FILM CLUB — mobile.css
   Curated mobile experience, not just "squeezed desktop"
   ═══════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    /* ── NAV ──────────────────────────────────────────────── */
    nav.site-nav {
        padding: 1rem 1.5rem;
    }

    .nav-links {
        display: none;
        position: fixed;
        top: 57px;
        left: 0;
        right: 0;
        background: rgba(6, 6, 10, 0.97);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        padding: 1.5rem;
        gap: 0;
        z-index: 199;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links li {
        border-bottom: 1px solid var(--border);
    }

    .nav-links li:last-child {
        border-bottom: none;
    }

    .nav-links a {
        display: block;
        font-size: 0.8rem;
        padding: 1rem 0;
    }

    .nav-hamburger {
        display: flex;
    }

    .nav-badge {
        display: none;
    }

    /* ── NAV DROPDOWN (mobile) ─────────────────────────────── */
    .nav-dropdown-menu {
        position: static;
        transform: none;
        display: none;
        border: none;
        border-top: 1px solid var(--border);
        background: transparent;
        backdrop-filter: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        min-width: 0;
    }

    .nav-dropdown:hover .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
    }

    .nav-dropdown-toggle {
        display: block;
        font-size: 0.8rem;
        padding: 1rem 0;
        width: 100%;
        text-align: left;
    }

    .nav-dropdown-menu a {
        padding: 0.8rem 0 0.8rem 1.5rem;
        font-size: 0.75rem;
    }

    .nav-live {
        display: none;
    }

    footer.site-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 600px) {

    /* ── NAV ──────────────────────────────────────────────── */
    nav.site-nav {
        padding: 1rem 1.2rem;
    }

    .nav-logo {
        font-size: 1.1rem;
    }

    /* ════════════════════════════════════════════
       LANDING PAGE
       Hero: name + film switcher below, buttons side-by-side
       Ticker: hidden
       Selector: heading + terminal stacked
       Picks: horizontal carousel
       Archive: horizontal carousel
       ════════════════════════════════════════════ */

    /* ── HERO ─────────────────────────────────────────────── */
    .hero {
        grid-template-columns: 1fr;
        min-height: unset;
    }

    .hero::before {
        display: none;
    }

    .hero-left {
        padding: 6rem 1.2rem 1.5rem;
    }

    .hero-tagline {
        display: none;
    }

    .hero-title {
        font-size: clamp(3.2rem, 14vw, 5rem);
    }

    .hero-meta-row {
        margin-bottom: 2rem;
    }

    .meta-cell {
        padding: 0.6rem 0.8rem;
    }

    .meta-cell label {
        font-size: 0.45rem;
        margin-bottom: 0.2rem;
    }

    .meta-cell span {
        font-size: 0.65rem;
    }

    /* Film switcher — show under the director name */
    .hero-right {
        padding: 0 1.2rem 2.5rem;
    }

    .film-selector {
        max-width: 100%;
        gap: 1.5rem;
    }

    .fs-number {
        font-size: 5rem;
        top: -0.5rem;
    }

    .fs-body {
        padding-top: 2.5rem;
    }

    .fs-title {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }

    .fs-nav {
        padding-top: 3rem;
    }

    /* Buttons side by side */
    .hero-actions {
        gap: 0.75rem;
    }

    .hero-actions .btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.55rem;
    }

    /* ── TICKER: hidden ──────────────────────────────────── */
    .ticker {
        display: none;
    }

    /* ── SELECTOR: single column, terminal underneath ────── */
    .section-selector {
        grid-template-columns: 1fr;
        padding: 3rem 1.2rem;
        gap: 2rem;
    }

    .section-body {
        display: none;
    }

    .section-selector .section-heading {
        font-size: clamp(2rem, 8vw, 3.5rem);
        margin-bottom: 0.5rem;
    }

    .terminal-body {
        padding: 1.2rem;
    }

    .slot-result {
        font-size: 2rem;
    }

    .slot-window {
        min-height: 110px;
        padding: 1.2rem;
    }

    /* ── CAROUSEL LIMIT: max 5 items ────────────────────── */
    .picks-grid .film-card:nth-child(n+6),
    .director-grid .dir-card:nth-child(n+6) {
        display: none;
    }

    /* ── PICKS: horizontal carousel, no excerpts ─────────── */
    .section-picks {
        padding: 3rem 0;
    }

    .section-picks .section-header {
        padding: 0 1.2rem;
        margin-bottom: 1.5rem;
    }

    .picks-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 1.2rem 1.2rem;
        gap: 1rem;
        scrollbar-width: none;
        background: transparent;
    }

    .picks-grid::-webkit-scrollbar {
        display: none;
    }

    .picks-grid .film-card {
        flex: 0 0 78vw;
        max-width: 300px;
        scroll-snap-align: start;
        border: 1px solid var(--border);
    }

    .film-card-excerpt {
        display: none;
    }

    .film-card-vis {
        height: 120px;
    }

    .film-year-ghost {
        font-size: 4.5rem;
    }

    .film-card-rating {
        gap: 0.25rem;
    }

    .section-picks::after {
        content: 'swipe for more →';
        display: block;
        text-align: center;
        font-size: 0.48rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 0.6rem;
        padding: 0 1.2rem;
    }

    /* ── PAST DIRECTORS: horizontal carousel ─────────────── */
    .section-archive {
        padding: 3rem 0;
    }

    .section-archive .section-header {
        padding: 0 1.2rem;
        margin-bottom: 1.5rem;
    }

    .director-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 1.2rem 1.2rem;
        gap: 1px;
        scrollbar-width: none;
        background: transparent;
        margin-top: 0;
    }

    .director-grid::-webkit-scrollbar {
        display: none;
    }

    .dir-card {
        flex: 0 0 60vw;
        max-width: 220px;
        scroll-snap-align: start;
        padding: 1.2rem 1rem;
    }

    .dir-name {
        font-size: 1.2rem;
    }

    .dir-film-tag {
        font-size: 0.52rem;
    }

    .section-archive::after {
        content: 'swipe for more →';
        display: block;
        text-align: center;
        font-size: 0.48rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 0.6rem;
        padding: 0 1.2rem;
    }

    /* ════════════════════════════════════════════
       DIRECTOR PROFILE PAGE
       Show: Hero + stats · Vertical timeline · Review cards
       Hide: Film grid
       ════════════════════════════════════════════ */

    .hero-content {
        grid-template-columns: 1fr;
        padding: 5rem 1.2rem 2rem;
        gap: 2rem;
    }

    .hero-name {
        font-size: clamp(3.2rem, 14vw, 5.5rem);
    }

    .hero-stats {
        width: 100%;
        min-width: unset;
    }

    .stat-row {
        flex-direction: column;
    }

    .stat-cell {
        border-right: none !important;
        border-bottom: 1px solid var(--border);
        padding: 0.7rem 1rem;
    }

    .stat-cell:last-child {
        border-bottom: none;
    }

    .hero-bar {
        padding: 0.8rem 1.2rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Hide film grid */
    .section-films {
        display: none;
    }

    /* Timeline → vertical */
    .section-timeline {
        padding: 3rem 1.2rem;
    }

    .timeline-axis-wrap {
        display: none;
    }

    .timeline-films {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        position: relative;
        padding-left: 1.8rem;
    }

    .timeline-films::before {
        content: '';
        position: absolute;
        left: 0.35rem;
        top: 0.5rem;
        bottom: 0.5rem;
        width: 1px;
        background: linear-gradient(to bottom, transparent, var(--border2) 10%, var(--border2) 90%, transparent);
    }

    .tl-film {
        position: relative;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border);
        background: transparent !important;
        border-radius: 0 !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .tl-film:last-child {
        border-bottom: none;
    }

    .tl-film::before {
        content: '';
        position: absolute;
        left: -1.42rem;
        top: 1.35rem;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--border2);
        border: 1px solid var(--border2);
    }

    .tl-film.pick::before {
        background: var(--gold);
        border-color: var(--gold);
        box-shadow: 0 0 8px rgba(201, 168, 76, 0.6);
        width: 10px;
        height: 10px;
        left: -1.52rem;
        top: 1.25rem;
    }

    .tl-tooltip {
        display: none !important;
    }

    /* Review cards */
    .section-reviews {
        padding: 3rem 0;
    }

    .section-reviews .section-header {
        padding: 0 1.2rem;
        margin-bottom: 1.5rem;
    }

    .review-card {
        grid-template-columns: 1fr !important;
    }

    .review-card-vis {
        min-height: 90px;
        border-right: none !important;
        border-bottom: 1px solid var(--border);
    }

    .review-card-body {
        padding: 1.2rem;
    }

    .review-title {
        font-size: 1.8rem;
    }

    .review-excerpt {
        font-size: 0.88rem;
        line-height: 1.7;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ════════════════════════════════════════════
       REVIEW PAGE
       Show: Hero (no facts panel) · Article · Club Rating
             (bars only, no radar) · Other reviews
       Hide: Sidebar · Radar · Facts panel
       ════════════════════════════════════════════ */

    .hero-facts {
        display: none;
    }

    .hero-title {
        font-size: clamp(2.8rem, 12vw, 5rem);
    }

    .hero-ghost {
        font-size: clamp(5rem, 22vw, 10rem);
    }

    .hero-season-tag {
        margin-bottom: 1rem;
    }

    .hero-tagline {
        font-size: 0.9rem;
    }

    .breadcrumb {
        flex-wrap: wrap;
        gap: 0.4rem 0.6rem;
    }

    .article-wrap {
        grid-template-columns: 1fr !important;
        padding: 2.5rem 0;
    }

    .article-main {
        grid-column: 1 !important;
        padding: 0 1.2rem;
    }

    .article-aside {
        display: none !important;
    }

    .prose {
        font-size: 0.95rem;
        line-height: 1.85;
    }

    .prose p.drop-cap::first-letter {
        font-size: 3.2rem;
    }

    .pull-quote {
        margin: 2rem -1.2rem;
        padding: 1.8rem 1.2rem;
    }

    .pull-quote-text {
        font-size: clamp(1rem, 4.5vw, 1.2rem);
    }

    .film-section-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .intro-heading {
        font-size: clamp(1.5rem, 7vw, 2.2rem);
    }

    /* Rating: bars only, no radar */
    .rating-body {
        grid-template-columns: 1fr !important;
        padding: 1.5rem 1.2rem;
    }

    .radar-wrap {
        display: none !important;
    }

    .score-breakdown {
        width: 100%;
    }

    .score-value {
        font-size: 1.3rem;
    }

    .rating-footer-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        padding: 0.8rem 1.2rem;
    }

    /* Other reviews → carousel */
    .other-reviews {
        margin-top: 3rem;
        padding-top: 3rem;
    }

    .other-reviews-grid {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1px;
        margin: 0 -1.2rem;
        padding: 0 1.2rem 0.5rem;
        scrollbar-width: none;
    }

    .other-reviews-grid::-webkit-scrollbar {
        display: none;
    }

    .other-card {
        flex: 0 0 72vw;
        max-width: 280px;
        scroll-snap-align: start;
    }

    footer.site-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 2rem 1.2rem;
    }
}