/* =========================================
   MOBILE.CSS — Media Queries
   ========================================= */

/* ── ≤ 1024px: desativa cursor e magnético ──
   Libera memória do processador em qualquer
   tablet ou celular, independente do breakpoint
   ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .magnetic-wrap          { transform: none !important; }
    .magnetic-wrap img      { transform: none !important; }
}

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

    /* ── Contenção global: guerra ao overflow horizontal ── */
    html {
        overflow-x: hidden;
        max-width: 100%;
        scroll-behavior: smooth; /* scroll nativo suavizado — Lenis desativado no touch */
    }

    body {
        overflow-x: hidden;
        max-width: 100%;
        width: 100%;
    }

    *,
    *::before,
    *::after {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Padroniza espaçamentos no mobile — 5vh top/bottom */
    section {
        overflow-x: hidden;
        max-width: 100%;
        padding-top:    5vh;
        padding-bottom: 5vh;
    }

    /* Elementos que usam 100vw precisam de contenção explícita */
    .nav-overlay,
    .antologia-carousel-wrapper,
    .pensamentos-stage,
    .kinetic-cloud {
        max-width: 100vw;
        overflow: hidden;
    }

    /* Frases 3D não devem vazar */
    .pensamento {
        white-space: normal;
        max-width: 80vw;
    }

    /* Grain overlay desativado no mobile — economiza bateria e evita reflow */
    #grain-overlay { display: none; }

    /* ── Header mobile ── */
    .header-inner {
        padding: 1rem 1.2rem;
    }

    /* Logo mobile — tamanho ajustado */
    .logo img {
        height: 40px !important;
        filter: invert(1) !important;
    }

    .nav-overlay-link {
        font-family: var(--font-heading);
        font-size: clamp(3rem, 15vw, 4.5rem);
        line-height: 1.2;
        padding: 0.5rem 0;
    }

    .nav-overlay-close {
        top: 1.2rem;
        right: 1.2rem;
    }


    /* Hero — fullscreen com apenas fotovitor03 */
    .hero {
        height: 100svh;
        min-height: 100svh;
        position: relative;
    }

    .hero::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
        z-index: 1;
        pointer-events: none;
    }

    .hero-img-wrapper {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 20%;
    }

    .hero-content {
        position: absolute;
        top: auto;
        bottom: 8%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        padding: 2rem 20px;
        text-align: center;
        z-index: 2;
    }

    .hero-title, .hero-headline {
        font-family: 'Big Shoulders Display', sans-serif !important;
        font-size: 18vw !important;
        font-weight: 900 !important;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
        color: var(--branco-base);
        line-height: 0.85;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
    }

    .hero-subtitle {
        color: var(--branco-base);
        opacity: 0.9;
    }

    /* Jornada Kinetic — altura reduzida, parallax desativado */
    .jornada { height: 70vh; }

    .txt-gigante  { font-size: clamp(2rem, 8.4vw, 3.5rem); font-family: var(--font-heading); }
    .txt-contorno { font-size: clamp(1.2rem, 5.6vw, 2.4rem); font-family: var(--font-heading); }
    .txt-destaque-laranja { font-size: clamp(1rem, 4.2vw, 1.7rem); font-family: var(--font-heading); }

    .verses {
        gap: 6vh;
        padding: 3vh 20px 4vh;
    }

    .verse-1,
    .verse-2 {
        max-width: 100%;
        text-align: center;
        margin-left: 0;
    }

    /* Antologia — swipe scroll-snap */
    .antologia {
        padding: 8vh 0 6vh;
        overflow: hidden;
    }

    .antologia-carousel-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 1.5rem;
    }

    .antologia-carousel-wrapper::-webkit-scrollbar { display: none; }

    .antologia-carousel {
        width: max-content;
        padding: 1rem 20px 0;
        gap: 1.2rem;
    }

    .antologia-card {
        width: 80vw;
        max-width: 300px;
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    .antologia-img-wrapper { overflow: hidden; }
    .antologia-img-wrapper::after { display: none; }

    .antologia-swipe-hint {
        display: block;
        text-align: center;
        color: rgba(244, 241, 234, 0.45);
        font-size: 0.8rem;
        letter-spacing: 0.1em;
        margin-top: 0.5rem;
        text-transform: uppercase;
    }

    /* ─── GSAP ScrollTrigger fallback mobile ───
       Em touch, o ScrollTrigger não dispara
       confiável — força visibilidade via CSS
    ────────────────────────────────────────── */
    .animar-entrada {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .agenda-item {
        opacity: 1 !important;
        transform: none !important;
    }

    /* ─── HERO — escala desativada no mobile ── */
    .hero-scale-wrap {
        transform: none !important;
    }

    .hero-scale-title {
        font-size: clamp(4.5rem, 22vw, 9rem);
        opacity: 0.85;
    }

    /* ─── AGENDA — layout mobile com foto banner ── */
    .agenda {
        padding: 0;           /* grid cuida do espaço */
    }

    .agenda-content {
        padding: 5vh 5% 8vh;
    }

    .agenda .section-title {
        font-size: clamp(2.5rem, 12vw, 4rem) !important;
        text-align: center;
    }

    .agenda-subtitle {
        text-align: center;
        margin-bottom: 3rem;
    }

    .agenda-item {
        grid-template-columns: 80px 1fr;
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .agenda-btn {
        grid-column: 1 / -1;
        width: 100%;
        text-align: center;
        padding: 1rem;
    }

    /* Cinematografia */
    .video-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .video-wrapper.destaque { aspect-ratio: 16 / 9; }

    /* Títulos proporcionais e anti-órfãos */
    h1 { font-size: clamp(2rem, 9vw, 3rem); }
    h2 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
    h3 { font-size: clamp(1.2rem, 5vw, 1.8rem); }

    h1, h2, h3, .section-title, .hero-title, .verse-text {
        hyphens: none;
        letter-spacing: -0.02em;
    }

    .album-card { padding: 1rem; }

    /* BUG 1 FIX — ícones SVG do footer gigantes no mobile */
    .footer-socials {
        flex-wrap: wrap;
        gap: 1.8rem;
        padding: 0 1rem;
    }

    .footer-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }

    .footer-icon svg {
        width: 26px !important;
        height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
        flex-shrink: 0 !important;
        display: block !important;
    }

    .selo-rodape {
        width: clamp(160px, 55vw, 260px) !important;
    }
}