/* ==========================================================
   RESPONSIVO.CSS — Versão 13.5 Master (Device Controller)
   * Objetivo: Adaptação inteligente de todos os módulos V13.
   * Correções: 3D Cube Scaling, Bento Grid Stack e Search Hero.
   ========================================================== */

/* ------------------------------
   1. NOTEBOOKS E TELAS MÉDIAS (Max 1280px)
--------------------------------*/
@media (max-width: 1280px) {
    .container {
        max-width: 960px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Ajusta o Bento Grid para não ficar espremido */
    .highlights-container {
        gap: 20px;
    }
}

/* ------------------------------
   2. TABLETS E IPADS (Max 1024px)
--------------------------------*/
@media (max-width: 1024px) {
    
    /* HEADER: A busca consome muito espaço, escondemos no tablet */
    .header-search {
        display: none; 
        /* Obs: O usuário deve usar a busca do menu ou da home */
    }

    /* HERO: Ajuste de tipografia */
    .hero-title {
        font-size: 3rem;
    }
    
    /* GRIDS: Padronização para 2 colunas */
    .posts-grid,
    .recipes-grid,
    .video-grid,
    .search-results-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    /* FOOTER: Grid balanceado */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* ------------------------------
   3. MOBILE LANDSCAPE / TABLET PEQUENO (Max 768px)
--------------------------------*/
@media (max-width: 768px) {
    
    /* --- GLOBAL LAYOUT --- */
    section { padding: 60px 0; }
    
    /* --- HEADER & NAV --- */
    .header-container {
        height: 70px;
        padding: 0 15px;
        justify-content: space-between;
    }
    
    .logo-img { width: 35px; }
    .logo-text { font-size: 1.3rem; }

    /* --- HERO HOME --- */
    .home-hero-premium {
        padding: 100px 15px 60px;
        text-align: center;
    }
    
    .hero-glass-card {
        padding: 30px 20px;
    }
    
    .hero-title {
        font-size: 2.2rem;
        line-height: 1.2;
    }
    
    .hero-actions {
        flex-direction: column;
        gap: 15px;
        padding: 0 20px;
    }
    
    .btn-hero-primary, .btn-hero-secondary {
        width: 100%;
        justify-content: center;
    }

    /* --- DESTAQUES (Bento Grid Stack) --- */
    .highlights-grid {
        grid-template-columns: 1fr; /* Força 1 coluna */
    }

    .highlights-container {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }
    
    /* Imagem principal ganha altura fixa para impacto */
    .highlight-main .thumb-wrapper {
        height: 280px; 
    }
    .highlight-img-main {
        height: 100%; object-fit: cover;
    }
    
    /* Sidebar vira lista abaixo */
    .highlights-sidebar {
        flex-direction: column;
        gap: 15px;
    }
    
    .highlight-side-item {
        width: 100%;
        background: #fff;
        padding: 10px;
        border-radius: 12px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* --- SEARCH PAGE (Correção de Respiro) --- */
    .search-page-header {
        padding: 100px 20px 80px; /* Reduz altura */
        margin-bottom: -40px;
    }
    .search-title { font-size: 2rem; }
    
    .search-refine-box input {
        font-size: 1rem;
        padding: 15px 50px 15px 20px;
    }

    /* --- CUBO 3D (Escala para não quebrar tela) --- */
    .ad-3d-section {
        overflow: hidden; /* Previne scroll horizontal */
        padding: 40px 0;
    }
    .ad-scene {
        /* Diminui o cubo para caber na tela do celular */
        transform: scale(0.65); 
    }
}

/* ------------------------------
   4. MOBILE PEQUENO (Max 600px)
--------------------------------*/
@media (max-width: 600px) {
    
    /* GRIDS: Coluna Única (Feed Infinito) */
    .posts-grid,
    .recipes-grid,
    .video-grid,
    .trends-grid,
    .search-results-grid,
    .contact-grid,
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    /* CARDS: Ajustes Finos */
    .card-thumb { height: 200px; } /* Altura padrão mobile */
    .card-title { font-size: 1.15rem; }
    
    /* RANKING (Correção para não sobrepor texto) */
    .trend-rank-circle {
        width: 35px; height: 35px;
        font-size: 1rem;
        top: -10px; left: -5px;
    }
    .post-card.rank-1 .trend-rank-circle::before {
        top: -18px; font-size: 1rem; /* Coroa menor */
    }

    /* FOOTER: Empilhado e Centralizado */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }
    
    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-links { align-items: center; }
    .social-list { justify-content: center; }

    /* TICKER NOTÍCIAS */
    .top-ticker-bar {
        font-size: 0.75rem;
    }
}

/* ------------------------------
   5. AJUSTES MICRO (iPhone SE / Galaxy Fold)
--------------------------------*/
@media (max-width: 380px) {
    .logo-text { display: none; } /* Só mostra o ícone se faltar espaço */
    .hero-title { font-size: 1.8rem; }
    .card-body { padding: 20px 15px; }
    
    /* Cubo ainda menor */
    .ad-scene { transform: scale(0.55); }
}