/* ================================================================
   MOBILE.CSS — WP Infinity v2.0.1
   Responsivo exclusivo. NÃO editar style.css, sidebar.css ou
   components.css para ajustes mobile. Toda media query fica aqui.
   ================================================================ */

/* ----------------------------------------------------------------
   BREAKPOINTS USADOS:
   - Tablet/landscape: max-width: 1024px
   - Tablet/portrait:  max-width: 768px
   - Mobile:           max-width: 600px
   - Mobile pequeno:   max-width: 400px
   ---------------------------------------------------------------- */


/* ================================================================
   HEADER MOBILE
   ================================================================ */
@media (max-width: 991px) {
    .site-header {
        min-height: 70px;
        padding: 0 !important;
        background: #fff !important;
    }
    /* O container do header ocupa toda a largura */
    .site-header > .container {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
    /* Grid vira flexbox: logo à esquerda, ações à direita */
    .site-header-grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100%;
        gap: 0;
    }
    /* Coluna do logo — esquerda, não cresce */
    .header-col-1 {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }
    /* Logo maior no mobile */
    .site-logo img,
    .header-col-1 img {
        max-height: 60px !important;
        width: auto !important;
        display: block;
    }
    /* Menu desktop oculto */
    .header-col-2 { display: none !important; }

    /* Coluna de ações (lupa + hambúrguer) — direita */
    .header-col-3 {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        margin-left: auto;
    }
    .header-actions {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Lupa — cor azul do site */
    .search-toggle {
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .search-toggle svg {
        stroke: var(--primary-color) !important;
        width: 22px;
        height: 22px;
    }

    /* Hambúrguer — cor azul do site */
    .menu-toggle {
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: flex-end;
        justify-content: center;
    }
    .hamburger-line {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--primary-color) !important;
        border-radius: 2px;
    }
}

/* ----------------------------------------------------------------
   SINGLE POST — Meta do Autor (data, atualização, leitura)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Caixa autor + compartilhar: empilha verticalmente */
    .single-author-share-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    /* Linha do autor */
    .author-meta-wrap {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
    }

    /* Avatar maiorzinho no mobile */
    .author-avatar img {
        width: 56px !important;
        height: 56px !important;
        border-radius: 50%;
    }

    /* Texto "Artigo escrito por" */
    .written-by {
        font-size: 0.88rem;
        margin-bottom: 8px;
    }

    /* Bloco de datas e tempo */
    .meta-details {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px 12px;
        margin-top: 4px;
    }

    /* Vai para baixo somente quando atualizado */
    .meta-details.has-update {
        flex-direction: column;
        gap: 6px;
    }

    /* Cada item de meta vira uma linha compacta com ícone */
    .meta-date,
    .meta-read-time {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.82rem;
        color: #666;
        line-height: 1.4;
    }

    .meta-date svg,
    .meta-read-time svg {
        flex-shrink: 0;
        width: 13px;
        height: 13px;
        opacity: 0.6;
    }
}


/* ================================================================
   CONTAINER / GLOBAL SPACING
   ================================================================ */
@media (max-width: 768px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .site-main {
        padding-top: 20px;
    }
}


/* ================================================================
   HERO GRID (Destaques — Home)
   ================================================================ */
@media (max-width: 768px) {
    .hero-masonry-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .hero-masonry-post {
        width: 100% !important;
        height: auto !important;
        min-height: 220px;
    }
    .hero-masonry-post .hero-thumb-wrapper {
        height: 220px;
    }
    .hero-masonry-post .hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .hero-title {
        font-size: 1.1rem !important;
    }
}


/* ================================================================
   SECTION GRIDS — 4 COLUNAS → 1 COLUNA NO MOBILE
   ================================================================ */
@media (max-width: 768px) {
    .section-grid.grid-4,
    .section-grid.grid-3,
    .posts-grid.grid-3,
    .grid-4,
    .grid-3 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

@media (min-width: 480px) and (max-width: 768px) {
    .section-grid.grid-4,
    .section-grid.grid-3,
    .posts-grid.grid-3,
    .grid-4,
    .grid-3 {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
}


/* ================================================================
   CARDS (content-card)
   ================================================================ */
@media (max-width: 768px) {
    .post-card {
        width: 100%;
    }
    .post-card .card-thumb {
        height: 180px;
    }
    .card-title {
        font-size: 1rem !important;
    }
    .card-excerpt {
        display: none; /* Esconde excerpt em mobile para economizar espaço */
    }
}


/* ================================================================
   ARCHIVE / CATEGORY PAGE
   ================================================================ */
@media (max-width: 768px) {
    .archive-header {
        padding: 20px 0 10px;
    }
    .archive-title {
        font-size: 1.4rem !important;
    }
    .posts-loop .grid,
    .archive-loop .grid {
        grid-template-columns: 1fr !important;
    }
}


/* ================================================================
   SINGLE POST
   ================================================================ */
@media (max-width: 991px) {
    /* Quebra o layout 2 colunas (conteúdo + sidebar) para 1 coluna */
    .grid.grid-sidebar {
        display: block !important;
    }
    .widget-area {
        display: block;
        margin-top: 40px;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .single-post-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    .post-meta-bar {
        flex-direction: column;
        gap: 8px;
        font-size: 0.85rem;
    }
    .post-thumbnail-wrapper img {
        width: 100%;
        height: auto;
    }
    /* Categoria no post — evitar sobrepor título */
    .post-category-badge {
        position: static !important;
        display: inline-block;
        margin-bottom: 12px;
    }
    /* Social share buttons — mínimo 48×48px (Google touch target) */
    .share-buttons-wrap {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }
    .share-btn {
        flex: 1 1 auto;
        justify-content: center;
        font-size: 0.8rem;
        padding: 8px 10px !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px;
        min-height: 48px;
    }
    /* Veja Também */
    .veja-tambem-box {
        font-size: 0.9rem;
        padding: 12px 14px;
    }
    /* Author bio */
    .author-bio-box {
        flex-direction: column;
        text-align: center;
    }
    .author-bio-box .author-bio-avatar {
        margin: 0 auto 12px;
    }
}


/* ================================================================
   SIDEBAR WIDGETS (single post)
   ================================================================ */
@media (max-width: 991px) {
    .custom-recent-posts,
    .custom-lead-capture,
    .custom-categories {
        margin-top: 30px;
    }
    .recent-item {
        gap: 12px;
    }
    .recent-thumb,
    .recent-thumb img {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
    }
}


/* ================================================================
   AUTHOR PAGE
   ================================================================ */
@media (max-width: 768px) {
    .author-header-premium {
        padding: 30px 16px;
    }
    .author-name {
        font-size: 1.6rem !important;
    }
    .author-description {
        font-size: 0.95rem;
        margin: 15px auto;
    }
    .author-filter-tabs {
        gap: 8px;
        margin: 30px 0 20px;
    }
    .filter-tab {
        padding: 10px 20px;
        font-size: 0.82rem;
    }
}


/* ================================================================
   INSTITUTIONAL / PAGE PADRÃO
   ================================================================ */
@media (max-width: 768px) {
    .about-hero {
        padding: 50px 16px 40px;
    }
    .about-hero-title {
        font-size: 1.8rem !important;
    }
    .about-hero-subtitle {
        font-size: 1rem;
    }
    .about-main-wrapper {
        padding: 30px 0 60px;
    }
}


/* ================================================================
   FOOTER
   ================================================================ */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    .footer-widgets {
        padding-bottom: 30px;
    }
    .site-footer {
        padding: 40px 0 0;
    }
    .footer-bottom .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}


/* ================================================================
   BREADCRUMBS
   ================================================================ */
@media (max-width: 768px) {
    .breadcrumbs ol {
        font-size: 0.82rem;
        flex-wrap: wrap;
        gap: 4px;
    }
    .bc-sep { margin: 0 2px; }
}


/* ================================================================
   PAGINATION
   ================================================================ */
@media (max-width: 480px) {
    .page-numbers {
        min-width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    .nav-links {
        gap: 6px;
    }
}


/* ================================================================
   MENU MOBILE (Hamburger)
   ================================================================ */
@media (max-width: 991px) {
    .mobile-menu-toggle {
        display: flex !important;
    }
    .mobile-menu-overlay {
        display: block;
    }
}
@media (min-width: 992px) {
    .mobile-menu-toggle { display: none !important; }
}