/* =========================================
   MASONRY — Grid de posts compartido
   (portada y archivos) con scroll infinito
   ========================================= */

/* Sin JS: multicolumna CSS (con paginación clásica).
   Con JS (.masonry--js): columnas físicas gestionadas por masonry.js,
   con colocación aditiva y orden cronológico visual. */

.masonry {
    columns: 3;
    column-gap: 20px;
    margin-top: 50px;
}

.masonry--js {
    columns: auto;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.masonry__columna {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.masonry--js .masonry__pieza {
    margin: 0;
}

.masonry__pieza {
    position: relative;
    margin: 0 0 20px;
    border-radius: 20px; /* mismo radio que .header__caja */
    overflow: hidden;
    break-inside: avoid;
    background-color: var(--color-fondo-alt);
    border: 1px solid var(--footer-background);
}

/* Proporciones variadas para el ritmo masonry */
.masonry__pieza--esbelta     { aspect-ratio: 2 / 3; }
.masonry__pieza--alta        { aspect-ratio: 3 / 4; }
.masonry__pieza--media       { aspect-ratio: 1 / 1; }
.masonry__pieza--ancha       { aspect-ratio: 4 / 3; }
.masonry__pieza--panoramica  { aspect-ratio: 16 / 10; }

.masonry__enlace {
    display: block;
    width: 100%;
    height: 100%;
}

.masonry__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pie — dos líneas, abajo derecha */
.masonry__pie {
    position: absolute;
    right: 16px;
    bottom: 12px;
    margin: 0;
    text-align: right;
    font-family: var(--tipografia-base);
    font-size: var(--tamanio-pequenio);
    line-height: 1.4;
    color: var(--inicio-pie-color);
    text-shadow: 0 1px 4px var(--inicio-pie-sombra);
    pointer-events: none;
}

/* ── Paginación — fallback sin JS ───────── */

.masonry__paginacion[hidden] {
    display: none;
}

.masonry__paginacion {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.masonry__paginacion .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    color: var(--color-texto);
    text-decoration: none;
    font-size: var(--tamanio-pequenio);
    font-family: var(--tipografia-base);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.masonry__paginacion .page-numbers:hover,
.masonry__paginacion .page-numbers.current {
    background-color: var(--color-primario);
    color: #ffffff;
    border-color: var(--color-primario);
    text-decoration: none;
}

/* ── Scroll infinito — carga y cierre ───── */

.masonry__cargando,
.masonry__fin {
    margin-top: 40px;
    text-align: center;
    font-family: var(--tipografia-base);
    font-size: var(--tamanio-pequenio);
    color: var(--color-texto);
}

.masonry__fin {
    font-family: var(--tipografia-titulos);
    font-size: var(--tamanio-h3);
    color: var(--color-primario);
}

.masonry__sentinel {
    height: 1px;
}

/* ── Responsive ─────────────────────────── */

@media (max-width: 800px) {
    .masonry {
        columns: 2;
        column-gap: 16px;
        margin-top: 40px;
    }

    .masonry--js {
        columns: auto;
        gap: 16px;
    }

    .masonry__columna {
        gap: 16px;
    }

    .masonry__pieza {
        margin-bottom: 16px;
    }
}

@media (max-width: 520px) {
    .masonry {
        columns: 1;
    }
}