/* =====================================================
   ADCORDIS THEME — responsive.css
   Media queries — Mobile First
   Breakpoints:
     < 480px   → mobile pequeño
     < 768px   → mobile
     768–1024px → tablet
     > 1024px   → desktop
     > 1200px   → desktop grande (TOC lateral)
   ===================================================== */

/* ─────────────────────────────────────────────────────
   > 1200px — TOC LATERAL VISIBLE (pillar pages)
───────────────────────────────────────────────────── */

@media (min-width: 1200px) {
    .toc-sidebar {
        display: block;
    }
}

/* ─────────────────────────────────────────────────────
   ≤ 1200px — TOC LATERAL OCULTO
───────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .toc-sidebar {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────
   ≤ 1024px — SIDEBAR VA DEBAJO DEL CONTENIDO
───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    /* Layout con sidebar: pasa a columna vertical */
    .content-area--with-sidebar {
        flex-direction: column;
        gap: 32px;
    }

    /* Sidebar a ancho completo */
    .site-sidebar {
        width: 100%;
        position: static;
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }

    .sidebar-widget {
        flex: 1;
        min-width: 240px;
    }

    /* Ad sidebar en fila completa */
    .sidebar-widget:has(.ad-sidebar) {
        width: 100%;
        flex-basis: 100%;
    }

    .ad-sidebar {
        min-height: auto;
    }

    /* Grid de 3 columnas baja a 2 */
    .articles-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Relacionados: 2 columnas */
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Tools: 1 fila de 2 sigue siendo ok */

    /* ── AdSense: ajustes tablet ── */
    .ad-in-content {
        max-width: 100%;
    }
    .ad-post-bottom,
    .ad-home,
    .ad-pillar {
        max-width: 100%;
    }
}

/* ─────────────────────────────────────────────────────
   ≤ 768px — MOBILE: TODO 1 COLUMNA + HAMBURGUESA
───────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* ── Tipografía ── */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.375rem; }
    h3 { font-size: 1.0625rem; }

    /* ── Header ── */
    .site-nav {
        display: none; /* oculto por defecto en mobile */
    }

    .menu-toggle {
        display: flex; /* visible en mobile */
    }

    /* ── Hero ── */
    .hero {
        padding: 48px 0;
    }

    .hero__title {
        font-size: 1.75rem;
    }

    .hero__subtitle {
        font-size: 1rem;
    }

    .hero__search {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__search .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Pilares grid: 1 columna ── */
    .pilares-grid {
        grid-template-columns: 1fr;
    }

    /* Última tarjeta ya no necesita centrado especial */
    .pilares-grid .pilar-card:last-child:nth-child(odd) {
        grid-column: auto;
        max-width: none;
        margin: 0;
    }

    /* ── Artículos: 1 columna ── */
    .articles-grid--3col,
    .articles-grid--2col {
        grid-template-columns: 1fr;
    }

    /* ── Herramientas: 1 columna ── */
    .tools-grid {
        grid-template-columns: 1fr;
    }

    .tool-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .tool-card .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Sidebar: 1 columna ── */
    .site-sidebar {
        flex-direction: column;
    }

    /* ── AdSense mobile ── */

    /* Sidebar no existe en mobile → ocultar su anuncio completamente.
       No cuenta para el límite de anuncios mobile (solo se muestra en desktop). */
    .ad-sidebar,
    .sidebar-widget--ad {
        display: none;
    }

    /* In-content: ancho completo, altura mínima reducida */
    .ad-in-content {
        max-width: 100%;
        min-height: 200px;
    }

    /* Post-bottom: ancho completo */
    .ad-post-bottom {
        max-width: 100%;
        min-height: 60px;
    }

    /* Home: ancho completo */
    .ad-home {
        max-width: 100%;
        min-height: 60px;
    }

    /* Pillar bottom: ancho completo */
    .ad-pillar {
        max-width: 100%;
        min-height: 60px;
    }

    /* NUNCA anuncio above the fold en mobile:
       si algún slot tiene .ad-eager en mobile, neutralizarlo visualmente
       con margin-top para que quede debajo del fold (≈ 600px).
       En la práctica .ad-eager solo se usa en desktop, pero por seguridad: */
    .ad-eager.ad-in-content {
        margin-top: 2rem; /* nunca sticky al top */
    }

    .sidebar-widget {
        min-width: auto;
        width: 100%;
        flex-basis: auto;
    }

    /* ── Relacionados: 1 columna ── */
    .related-grid {
        grid-template-columns: 1fr;
    }

    /* ── Footer ── */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .site-footer__bar .container {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    /* ── Content area ── */
    .content-area--with-sidebar {
        padding-top: 24px;
        padding-bottom: 40px;
        gap: 24px;
    }

    /* ── Single post ── */
    .entry-title {
        font-size: 1.5rem;
    }

    .single-post {
        padding: 24px 0 40px;
    }

    /* ── Entry content table: scroll horizontal ── */
    .entry-content table {
        font-size: 0.875rem;
    }

    /* ── Shortcode descargable ── */
    .shortcode-descargable {
        flex-direction: column;
        gap: 12px;
    }

    .shortcode-descargable .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Paginación: reducir tamaño ── */
    .pagination__list .page-numbers {
        min-width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    /* ── 404 ── */
    .error-404 {
        padding: 48px 0;
    }

    .error-404__title {
        font-size: 1.375rem;
    }

    .pilares-list { gap: 8px; }

    /* ── Pillar page: sin margen lateral para TOC ── */
    .pillar-layout {
        padding-top: 24px;
        padding-bottom: 48px;
    }

    /* ── Categorías hero ── */
    .category-hero { padding: 28px 0; }
    .category-hero__title { font-size: 1.5rem; }

    /* ── Secciones home ── */
    .home-pilares,
    .home-articles,
    .home-tools {
        padding: 40px 0;
    }
}

/* ─────────────────────────────────────────────────────
   ≤ 480px — MOBILE PEQUEÑO: ajustes finos
───────────────────────────────────────────────────── */

@media (max-width: 480px) {
    /* Contenedor con menos padding */
    .container { padding-left: 16px; padding-right: 16px; }

    /* Tipografía más compacta */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }

    /* Hero */
    .hero { padding: 36px 0; }
    .hero__title { font-size: 1.5rem; }

    /* Botones más pequeños */
    .btn { padding: 9px 16px; font-size: 0.875rem; }
    .btn--lg { padding: 12px 20px; font-size: 0.9375rem; }

    /* Pilar card */
    .pilar-card { padding: 18px; }

    /* Article card */
    .article-card__link { padding: 16px; }

    /* Tool card */
    .tool-card { padding: 18px; }

    /* Entry header */
    .entry-title { font-size: 1.375rem; }

    /* Entry meta en columna */
    .entry-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .entry-meta__sep { display: none; }

    /* Breadcrumb más compacto */
    .breadcrumb ol { font-size: 0.75rem; }

    /* Footer */
    .site-footer__body { padding: 32px 0 28px; }

    /* Sidebar widget padding reducido */
    .sidebar-widget { padding: 16px; }

    /* FAQ */
    .faq-question { padding: 14px 16px; font-size: 0.9375rem; }
    .faq-answer__inner { padding: 14px 16px; }

    /* Descargable */
    .shortcode-descargable { padding: 16px; }

    /* Aviso legal */
    .aviso-legal { padding: 14px 16px; font-size: 0.875rem; }

    /* Paginación: ocultar puntos suspensivos en mobile muy pequeño */
    .pagination__list .dots { display: none; }

    /* Section title más pequeño */
    .section-title { font-size: 1.25rem; }

    /* Related posts en columna ya está bien, ajuste de gap */
    .related-grid { gap: 12px; }

    /* Header search más compacto */
    .header-search { padding: 8px 0; }
    .header-search__input { font-size: 0.9375rem; }

    /* Pillar badge */
    .pillar-header .badge--pillar { font-size: 0.6875rem; }
    .pillar-content .entry-title { font-size: 1.375rem; }

    /* category-hero */
    .category-hero { padding: 20px 0; }
    .category-hero__title { font-size: 1.25rem; }
}

/* ─────────────────────────────────────────────────────
   PRINT — estilos de impresión básicos
───────────────────────────────────────────────────── */

@media print {
    .site-header,
    .site-sidebar,
    .site-footer,
    .ad-slot,
    .related-posts,
    .breadcrumb { display: none !important; }

    .content-area--with-sidebar {
        display: block;
    }

    .entry-content a::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: var(--color-text-muted);
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    h1, h2, h3 { color: #000; page-break-after: avoid; }
    p, li { page-break-inside: avoid; }
}