/* ================================================================
   VLMR FILMS — responsive.css
   Breakpoints: tablet (≤1024px), mobile (≤768px), small (≤480px)
================================================================ */

/* ───────────────────────────────────────────
   TABLET  (≤ 1024px)
─────────────────────────────────────────── */
@media (max-width: 1024px) {

    :root {
        --section-pad: 80px 48px;
    }

    /* Header */
    .nav-container {
        padding: 0 32px;
        gap: 32px;
    }

    #nav-bar {
        gap: 24px;
    }

    /* Hero */
    #hero {
        padding: 48px;
    }

    /* Tópicos — empilha verticalmente */
    .t-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .t-container:nth-child(even) .t-text,
    .t-container:nth-child(even) .t-media {
        order: unset;
    }

    .t-text p {
        max-width: 100%;
    }

    /* Galeria — 2 colunas no tablet */
    .video-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item.wide {
        grid-column: span 2;
    }

    /* Footer */
    .footer-grid {
        gap: 48px;
    }

    #footer {
        padding: 60px 48px 0;
    }

    /* CTA */
    #cta {
        padding: 100px 48px;
    }
}

/* ───────────────────────────────────────────
   MOBILE  (≤ 768px)
─────────────────────────────────────────── */
@media (max-width: 768px) {

    :root {
        --section-pad: 64px 24px;
    }

    /* ── HEADER ── */
    .btn-header {
        /* Esconde o botão de texto no mobile — FAB do Instagram substitui */
        display: none;
    }

    #nav-bar {
        /* Menu mobile — dropdown oculto por padrão */
        display: none;
        position: absolute;
        top: var(--header-h);
        left: 0;
        width: 100%;
        flex-direction: column;
        gap: 0;
        background: rgba(21, 17, 31, 0.97);
        backdrop-filter: blur(20px);
        padding: 16px 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    #nav-bar.open {
        display: flex;
    }

    .nav-item a {
        display: block;
        padding: 14px 28px;
        font-size: 15px;
    }

    #menu-toggle {
        display: flex;
    }

    /* ── HERO ── */
    #hero {
        padding: 32px 24px;
        align-items: flex-end;
    }

    .hero-title {
        font-size: clamp(64px, 18vw, 100px);
    }

    .hero-subtitle {
        font-size: clamp(22px, 7vw, 42px);
    }

    .scroll-indicator {
        right: 24px;
        bottom: 24px;
    }

    /* ── SERVIÇOS ── */
    .section-big-word {
        font-size: clamp(52px, 14vw, 80px);
    }

    .topicos {
        gap: 48px;
    }

    /* ── GALERIA ── */
    .video-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item.wide {
        grid-column: span 2;
    }

    /* ── CTA ── */
    #cta {
        padding: 80px 24px;
    }

    #cta h2 {
        font-size: clamp(56px, 14vw, 100px);
    }

    /* ── FOOTER ── */
    #footer {
        padding: 48px 24px 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    /* ── FAB INSTAGRAM ── */
    #fab-instagram span {
        /* Esconde o label no mobile — mostra só o ícone */
        display: none;
    }

    #fab-instagram {
        padding: 12px;
        border-radius: 50%;
        bottom: 24px;
        right: 20px;
    }
}

/* ───────────────────────────────────────────
   SMALL PHONES  (≤ 480px)
─────────────────────────────────────────── */
@media (max-width: 480px) {

    /* ── GALERIA ── */
    .video-gallery {
        grid-template-columns: 1fr;
    }

    .gallery-item.wide {
        grid-column: span 1;
    }

    /* ── SEÇÕES ── */
    #quem {
        padding: 48px 20px;
    }

    /* ── INTRO ── */
    .intro-vlmr {
        font-size: 20vw;
    }
}