/**
 * blog.css — Blog nativo: archive (home.php) y single de post
 *
 * Estructura calcada de rbl-web-gcc (grid 70/30, sidebar con
 * buscador/categorías/últimos posts/TOC), diseño nuevo: cards con la
 * forma asimétrica del isotipo, paleta azul/negro de SIFE.
 */

.blog-layout { padding: 56px 0 88px; }

.blog-layout__grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: start;
}


/* ─────────────────────────────────────────────────────────
   GRID DE CARDS (archive)
   ───────────────────────────────────────────────────────── */

.archive-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Cards horizontales, una debajo de otra — solo en el archive del
   blog (acá, .archive-grid). El preview del Home (.home-blog__grid)
   sigue con las cards verticales de siempre, sin tocar. */
.archive-grid .blog-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.archive-grid .blog-card__thumb { flex: 0 0 280px; }

.archive-grid .blog-card__img,
.archive-grid .blog-card__placeholder {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.archive-grid .blog-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 700px) {
    .archive-grid .blog-card { flex-direction: column; }
    .archive-grid .blog-card__thumb { flex-basis: auto; }
    .archive-grid .blog-card__img,
    .archive-grid .blog-card__placeholder { aspect-ratio: 4 / 3; }
}

.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 24px;
    color: var(--color-texto-claro);
}

.no-results p { font-size: 15px; margin: 0; }

.blog-card {
    display: block;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radius-lg) var(--radius-brand-sm) var(--radius-lg) var(--radius-brand-sm);
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(13,13,13,0.1);
    border-color: var(--color-primario);
}

.blog-card__thumb { display: block; }

.blog-card__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.blog-card__placeholder {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primario), var(--color-primario-lt));
    color: rgba(255,255,255,0.5);
}

.blog-card__placeholder svg { width: 36px; height: 36px; }

.blog-card__body { padding: 22px 22px 18px; }

.blog-card__cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primario);
    background: var(--color-acento-lt);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.blog-card__title {
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 10px;
}

.blog-card__title a {
    color: var(--color-texto);
    text-decoration: none;
}

.blog-card__title a:hover { color: var(--color-primario); }

.blog-card__desc {
    font-size: 13px;
    color: var(--color-texto-claro);
    line-height: 1.6;
    margin: 0 0 16px;
}

.blog-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--color-borde);
    font-size: 12px;
}

.blog-card__date { color: var(--color-texto-claro); }

.blog-card__link {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--radius-md) var(--radius-sm) var(--radius-md) var(--radius-sm);
    background: var(--color-acento-lt);
    color: var(--color-primario);
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.blog-card__link:hover {
    background: var(--color-primario);
    color: var(--color-blanco);
    text-decoration: none;
}


/* ─────────────────────────────────────────────────────────
   PAGINACIÓN (the_posts_pagination nativa de WP)
   ───────────────────────────────────────────────────────── */

.blog-pagination { margin-top: 48px; }

.blog-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.blog-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    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;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.blog-pagination .page-numbers:hover { border-color: var(--color-primario); text-decoration: none; }

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

.blog-pagination .page-numbers.dots {
    border: none;
    background: none;
    color: var(--color-texto-claro);
}


/* ─────────────────────────────────────────────────────────
   SIDEBAR — buscador, categorías, últimos posts, TOC
   ───────────────────────────────────────────────────────── */

.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 96px;
}

.sidebar-card {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radius-md);
    padding: 24px;
}

.sidebar-card__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-texto);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-acento-lt);
}

/* Buscador */
.sidebar-search {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-borde);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-fondo);
}

.sidebar-search input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 11px 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--color-texto);
}

.sidebar-search input:focus { outline: none; }

.sidebar-search button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--color-texto-claro);
    cursor: pointer;
}

.sidebar-search button svg { width: 16px; height: 16px; }

/* Últimas publicaciones */
.sidebar-post-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sidebar-post {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.sidebar-post__img {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md) var(--radius-sm) var(--radius-md) var(--radius-sm);
    overflow: hidden;
    background: var(--color-fondo);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-texto-claro);
}

.sidebar-post__img svg { width: 20px; height: 20px; }

.sidebar-post__img-el { width: 100%; height: 100%; object-fit: cover; }

.sidebar-post__title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-texto);
    margin-bottom: 4px;
}

.sidebar-post:hover .sidebar-post__title { color: var(--color-primario); }

.sidebar-post__date {
    display: block;
    font-size: 11px;
    color: var(--color-texto-claro);
}

/* Categorías */
.sidebar-cat-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-cat-list button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 9px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--color-texto);
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.12s, color 0.12s;
}

.sidebar-cat-list button:hover { background: var(--color-fondo); }

.sidebar-cat-list button.is-active {
    background: var(--color-acento-lt);
    color: var(--color-primario);
    font-weight: 700;
}

.sidebar-cat-list button span {
    font-size: 11px;
    color: var(--color-texto-claro);
}

.sidebar-cat-list button.is-active span { color: var(--color-primario); }

/* Tabla de contenido (solo single) */
.sidebar-toc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-toc-list__item {
    display: block;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--color-texto-claro);
    text-decoration: none;
    border-left: 2px solid var(--color-borde);
    transition: color 0.15s, border-color 0.15s;
}

.sidebar-toc-list__item:hover {
    color: var(--color-primario);
    border-color: var(--color-primario);
    text-decoration: none;
}

.sidebar-toc-list__item--nivel3 {
    padding-left: 24px;
    font-size: 12.5px;
}


/* ─────────────────────────────────────────────────────────
   SINGLE POST — cabecera + cuerpo del artículo
   ───────────────────────────────────────────────────────── */

.post-header { margin-bottom: 32px; }

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-borde);
}

.post-meta__item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--color-texto-claro);
}

.post-meta__item svg { width: 15px; height: 15px; flex-shrink: 0; }

.post-body { max-width: 720px; }

.post-body h2 { scroll-margin-top: 96px; }
.post-body h3 { scroll-margin-top: 96px; }


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

@media ( max-width: 1024px ) {
    .blog-layout__grid { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; }
}

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