/* Tablet: 1024px and below */
@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .two-col,
    .two-col--60-40 {
        grid-template-columns: 1fr;
    }

    .hero__content {
        max-width: 80%;
    }
}

/* Mobile landscape: 768px and below */
@media (max-width: 768px) {
    .filters {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .hero__content {
        max-width: 100%;
    }

    /* Single video on mobile — hide others, no crossfade */
    .hero__reel-video:not(:first-child) {
        display: none;
    }

    .hero__reel-video:first-child {
        opacity: 1 !important;
    }

    /* Hide reel progress on mobile */
    .hero__reel-progress {
        display: none;
    }

    /* Faster character stagger on mobile */
    .hero--loaded .hero__char {
        animation-delay: calc(200ms + var(--char-index) * 25ms) !important;
    }

    .showcase__title {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

    .showcase__credit {
        bottom: var(--space-md);
    }

    .project__tabs {
        flex-wrap: wrap;
    }

    .about__awards {
        gap: var(--space-md);
    }
}

/* Mobile portrait: 480px and below */
@media (max-width: 480px) {
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    /* Nav pill moves to bottom on mobile */
    .nav-pill {
        top: auto;
        bottom: 12px;
        padding: 8px 16px;
    }

    /* Labels always visible on mobile (no hover on touch) */
    .nav-pill__label {
        max-width: 90px;
        opacity: 1;
        margin-left: 6px;
        font-size: 0.6rem;
    }

    .nav-pill__dot {
        width: 6px;
        height: 6px;
    }

    /* Safe area for iOS notch/home bar */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .nav-pill {
            bottom: calc(12px + env(safe-area-inset-bottom));
        }
    }

    .hero__name {
        font-size: clamp(2.5rem, 14vw, 4rem);
    }

    /* Hide scroll hint on mobile — pill nav occupies bottom */
    .hero__scroll-hint {
        display: none;
    }

    .hero__footer {
        font-size: 0.6rem;
    }

    .project__title {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
    }

    .credits__row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .contact-section .two-col {
        gap: var(--space-sm);
    }
}