/* ═════════════════════════════════════════════════════════════════════════════
   BLOG — LISTADO ("The Gist")

   Extraído del bloque <style> que vivía dentro de blog.html. Ahora es una hoja
   del tema, cacheable y compartida por todas las vistas de listado.
   ═════════════════════════════════════════════════════════════════════════════ */

/* --- Refined Blog Layout --- */
.blog_main {
    padding: 10rem 0rem 0rem 0rem;
    width: 100%;
}

.blog_title-section {
    padding: 0 1.5rem 4rem 1.5rem;
}

.blog_entry {
    display: grid;
    grid-template-columns: 100px 1fr;
    padding: 3rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-color);
    background-color: transparent;
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog_entry:hover {
    background-color: var(--text-color);
}

/* Specific text color flip to avoid transition artifacts on other properties */
.blog_entry:hover .blog_entry-title,
.blog_entry:hover .blog_entry-meta,
.blog_entry:hover .text-size-regular {
    color: var(--bg-color);
    opacity: 1;
}

.blog_entry-title {
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    margin: 0;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: scale(1) !important;
}

.blog_entry-meta {
    font-family: var(--tatc-font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.6;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.blog_entry .text-size-regular {
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
    .blog_entry {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .blog_main { padding-top: 8rem; }
}

/* --- Clases que sustituyen a estilos en línea del sitio original ---
   En blog.html estas medidas iban escritas dentro del atributo style del
   propio elemento, donde ninguna media query podía alcanzarlas. */
.blog_page-title {
    font-size: 4rem;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -0.06em;
    margin: 0;
    /* La animación de entrada escala los .heading-style-h1; este título no
       lleva esa clase, así que no hay nada que contrarrestar y no hace falta
       el !important que sí necesitaba el original. */
}

/* --- Paginación del listado ---
   Opcional (bloque «Listado de entradas» → Dividir en páginas). Mismo relleno
   lateral que las entradas y rótulos con la tipografía de etiqueta. */
.blog_pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
}

.blog_pagination .text-style-label {
    width: auto;
}

.blog_pagination-link:last-child {
    text-align: right;
}

.blog_pagination-link.is-disabled {
    opacity: .25;
}

.blog_pagination-count {
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

a.blog_pagination-link:hover {
    opacity: .6;
}

/* Listado sin entradas: mismo relleno que una entrada. */
.blog_list-empty {
    padding: 3rem 1.5rem;
    margin: 0;
}