/* ============================================================================
   MERLÔ DIGITAL — SYSTEM INTELLIGENT MASTER MOBILE SYSTEM
   FILE: phone.css (Universal Smartphone Override Layout)
   DESIGN SYSTEM: Premium Light & Cream Gold (Glassmorphism Optimized)
   TARGET VIEWPORTS: 320px to 991.98px (Smartphones & Portrait Tablets)
============================================================================ */

@media (max-width: 991.98px) {

    /* 1. MASTER RESET & ANTI-OVERFLOW BLOCK
       Garante o enquadramento perfeito sem quebras de scroll lateral indesejadas */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
        -webkit-text-size-adjust: 100%;
    }

    /* Remove efeitos colaterais de animações pesadas no scroll mobile */
    .reveal, .reveal-left, .reveal-right {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    /* 2. RESPONSIVE MASTER TYPOGRAPHY
       Redimensionamento inteligente das fontes serifadas e displays para telas compactas */
    h1, .display-4, .traj-hero-title {
        font-size: 2.15rem !important;
        line-height: 1.25 !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 1rem !important;
    }

    h2, .section-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        letter-spacing: -0.3px !important;
        margin-bottom: 0.75rem !important;
    }

    h3, .book-card-title {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
    }

    h4, .modal-title {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    p, .text-muted, .traj-hero-sub {
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
    }

    .section-tag, .hero-eyebrow {
        font-size: 0.75rem !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 0.4rem !important;
    }

    /* 3. OPTIMIZED APP LAYOUT SPACERS
       Reduz espaçamentos verticais de desktop para proporções anatômicas de toque celular */
    .py-config,
    section[class*="py-"],
    .py-5 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .mb-5 {
        margin-bottom: 2rem !important;
    }

    .mt-5 {
        margin-top: 2rem !important;
    }

    /* 4. LIQUID NAVIGATION INTEL RE-ENGINEERING
       Ajusta a Navbar flutuante em vidro (Glassmorphism) para telas mobile */
    .liquid-nav {
        top: 12px !important;
        width: 92vw !important;
        height: 60px !important;
        padding: 0 16px !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 32px rgba(179, 139, 58, 0.06) !important;
    }

    .logo-container img {
        height: 38px !important;
        width: auto;
    }

    /* Ajuste fino do container da Navbar interna do Bootstrap */
    .liquid-nav .container {
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Espaçador técnico inteligente para as subpáginas herdadas */
    .subpage-top-margin,
    .traj-hero {
        padding-top: 110px !important;
    }

    /* 5. COERSED GRID CONVERTER (MASTER RESTACK)
       Força layouts complexos de grid ou colunas a virarem layouts de coluna única vertical */
    .book-grid,
    .vision-grid,
    .news-grid,
    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        max-width: 100% !important;
        padding: 0 4px !important;
    }

    /* Ajuste de imagens de colunas do Bootstrap que ficavam lado a lado */
    .row > [class*="col-"] {
        margin-bottom: 1.75rem;
    }
    .row > [class*="col-"]:last-child {
        margin-bottom: 0 !important;
    }

    /* 6. TRAJETÓRIA SUBPAGE ANATOMICAL OPTIMIZATION */
    .traj-hero {
        text-align: center !important;
    }

    .traj-hero .text-center {
        text-align: center !important;
    }

    .traj-hero-stats {
        justify-content: center !important;
        gap: 1.25rem !important;
        margin-top: 1.75rem !important;
        background: rgba(255, 255, 255, 0.5);
        padding: 12px;
        border-radius: 16px;
        border: 1px solid rgba(179, 139, 58, 0.08);
    }

    .traj-stat-num {
        font-size: 2rem !important;
    }

    .traj-stat-label {
        font-size: 0.7rem !important;
        letter-spacing: 0.5px;
    }

    .traj-stat-divider {
        height: 35px !important;
    }

    /* Linha do tempo adaptada para o tamanho exato dos dedos (Toque Perfeito) */
    .timeline {
        padding-left: 1.75rem !important;
        margin-top: 1.5rem !important;
    }

    .timeline-item {
        margin-bottom: 2rem !important;
    }

    .timeline-item::before {
        left: -1.75rem !important;
        width: 12px !important;
        height: 12px !important;
        top: 6px !important;
    }

    /* 7. GLASSMORPHISM CARDS & TARGET TOUCH PROTECTION
       Melhora as áreas de toque e legibilidade do sistema de vidro em smartphone */
    .book-card, .vision-card, .news-card {
        padding: 1.5rem !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.85) !important; /* Aumenta contraste sob sol intenso */
    }

    .book-card-cover {
        height: 280px !important; /* Evita capas esticadas no mobile */
        border-radius: 12px !important;
    }

    /* Garante alinhamento anatômico de botões interativos */
    .btn, .book-card-btn, .btn-gold-liquid, .btn-outline-gold {
        width: 100% !important; /* Botões ocupam a largura total para clique fácil do polegar */
        text-align: center !important;
        justify-content: center !important;
        padding: 12px 24px !important;
        font-size: 0.95rem !important;
        min-height: 48px; /* Safe Target Touch Area padrão Apple/Google */
    }

    .d-flex.gap-3 {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* 8. MODALS & CINEMA LIGHTBOX OVERRIDES
       Ajusta as caixas e players flutuantes para preencherem de forma nativa a tela cheia */
    .video-lightbox-content, .obra-modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 0 auto;
        border-radius: 20px !important;
    }

    /* Força proporção perfeita de vídeo 16:9 no smartphone */
    .video-lightbox-content iframe {
        height: 220px !important;
        width: 100% !important;
    }

    .obra-modal-body {
        padding: 1.5rem !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    .video-lightbox-close, .obra-modal-close {
        top: -45px !important;
        right: 5px !important;
        color: #FFFFFF !important;
        font-size: 1.75rem !important;
    }

    .data-table th, .data-table td {
        padding: 8px !important;
        font-size: 0.8rem !important;
    }
}