/* ─────────────────────────────────────────────
   Responsive Image Grid — Frontend CSS
───────────────────────────────────────────── */

.rig-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

/* ── Columnas ── */
.rig-item {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
}

.rig-item--empty {
    background: transparent;
}

/* ── Imágenes ── */
.rig-item picture,
.rig-item a {
    display: block;
    width: 100%;
}

.rig-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--rig-radius, 0px);
    transition: 0.2s;
}

/* ── Links ── */
.rig-item a {
    text-decoration: none;
}

.rig-grid:not(.rig-no-hover) .rig-item img:hover {
    filter: brightness(0.8);
    transition: 0.2s;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — Mobile (< 782px)
───────────────────────────────────────────── */
@media (max-width: 781px) {

    /* 1 columna → full width */
    .rig-cols-1 {
        gap: 10px;
    }

    /* 2 columnas → lado a lado (comportamiento por defecto) */
    .rig-cols-2 {
        flex-direction: row;
        gap: 10px;
    }

    /* 3 columnas → siempre apiladas verticalmente (una debajo de otra) */
    .rig-cols-3 {
        flex-direction: column;
        gap: 10px;
    }
    .rig-cols-3 .rig-item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* 4 columnas → 2x2 */
    .rig-cols-4 {
        flex-wrap: wrap;
        gap: 10px;
    }

    .rig-cols-4 .rig-item {
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
    }

    /* ══ 4 COLUMNAS ══════════════════════════════════ */

    /* 2x1 — 2 columnas × 1 fila: mostrar solo una pareja */
    /* Pareja 0: imágenes 1 y 2 */
    .rig-cols-4.rig-mobile-2x1.rig-mobile-feature-0 .rig-item:nth-child(n+3) {
        display: none;
    }
    /* Pareja 1: imágenes 3 y 4 */
    .rig-cols-4.rig-mobile-2x1.rig-mobile-feature-1 .rig-item:nth-child(-n+2) {
        display: none;
    }

    /* ══ 2 COLUMNAS ══════════════════════════════════ */

    /* 1x2 — 1 columna × 2 filas: apilar verticalmente */
    .rig-cols-2.rig-mobile-1x2 {
        flex-direction: column;
        gap: 10px;
    }
    .rig-cols-2.rig-mobile-1x2 .rig-item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* 1x1 — 1 columna × 1 fila: solo una imagen full width */
    /* Mostrar la primera */
    .rig-cols-2.rig-mobile-1x1.rig-mobile-feature-0 .rig-item:nth-child(2) { display: none; }
    .rig-cols-2.rig-mobile-1x1.rig-mobile-feature-0 .rig-item:nth-child(1) {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Mostrar la segunda */
    .rig-cols-2.rig-mobile-1x1.rig-mobile-feature-1 .rig-item:nth-child(1) { display: none; }
    .rig-cols-2.rig-mobile-1x1.rig-mobile-feature-1 .rig-item:nth-child(2) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}