/**
 * archive.css — Estilos del catálogo de certificaciones
 * Cargado solo en /certificaciones/
 */

/* El hero ahora es el componente compartido .page-hero (main.css,
   mismo que About us/Contacto) — ver template-parts/archive-hero.php.
   Ya no hay CSS propio de hero acá. */


/* ─────────────────────────────────────────────────────────
   LAYOUT: SIDEBAR + GRID
   ───────────────────────────────────────────────────────── */

.archive-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    padding-top: 40px;
    padding-bottom: 80px;
    align-items: start;
}


/* ─────────────────────────────────────────────────────────
   SIDEBAR DE FILTROS
   ───────────────────────────────────────────────────────── */

.archive-sidebar {
    position: sticky;
    top: 84px; /* altura del header sticky */
}

.filter-panel {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
}

.filter-panel:last-child { margin-bottom: 0; }

.filter-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.filter-panel__head .filter-title { margin-bottom: 0; }

.filter-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-texto-claro);
    margin-bottom: 16px;
}

/* Botón (antes era un <a>) — quita el estilo nativo de <button> */
.filter-clear {
    display: block;
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: #d63638;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.filter-clear:hover { text-decoration: underline; }

/* Lista plana — solo primer nivel de la taxonomía (Área o Norma ISO) */
.filter-list-flat {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--color-texto);
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.12s;
}

.filter-link:hover { background: #f0f4f8; }

.filter-link.active {
    background: var(--color-acento-lt);
    color: var(--color-primario);
    font-weight: 600;
}

.filter-count-sm { font-size: 11px; color: var(--color-texto-claro); }


/* ─────────────────────────────────────────────────────────
   GRID DE CERTIFICACIONES
   ───────────────────────────────────────────────────────── */

.archive-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.archive-count {
    font-size: 13px;
    color: var(--color-texto-claro);
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
    gap: 24px;
}


/* ─────────────────────────────────────────────────────────
   PAGINACIÓN EN TIEMPO REAL (theme.js, sección 10)
   ───────────────────────────────────────────────────────── */

.archive-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.page-nav,
.page-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radius-sm);
    background: var(--color-blanco);
    color: var(--color-primario);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.page-numbers-list { display: flex; gap: 8px; }

.page-nav:hover:not(:disabled),
.page-number:hover:not(.current) { border-color: var(--color-primario); }

.page-nav:disabled { opacity: 0.4; cursor: not-allowed; }

.page-number.current {
    background: var(--color-primario);
    color: var(--color-blanco);
    border-color: var(--color-primario);
}


/* La card de certificación (.cert-card y sub-elementos) es un
   componente 🌐 Global — ahora se usa acá y también en el slider
   "Portafolio de Certificaciones" del Home (template-parts/home-certs.php),
   así que su CSS vive en main.css, no acá. Ver esa sección en main.css
   ("CARD DE CERTIFICACIÓN — componente compartido"). */


/* ─────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────── */

@media ( max-width: 900px ) {
    .archive-layout {
        grid-template-columns: 1fr;
    }

    .archive-sidebar {
        position: static;
    }

    /* Pills horizontales en vez de lista vertical — más compacto */
    .filter-list-flat {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .filter-link { width: auto; }
}

@media ( max-width: 480px ) {
    .cert-grid { grid-template-columns: 1fr; }
}