@charset "UTF-8";
/* ============================================================
   Foto-layout-views voor text_images (interface_media_album → format).
   Conditioneel geladen via SiteApp::cssLinks() op marker `.layer--media-grid`.
   Port van scss_old/_layer-media-album.scss (flex + mozaïeken).
   ============================================================ */

.layer--media-grid .text-images__photos { gap: var(--ti-gap, 8px); }
.layer--media-grid .text-images__photo { margin: 0; }
.layer--media-grid .text-images__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

/* ── flex: N kolommen (format_column_count). 1 = foto's onder elkaar (#18). ── */
.layer--media-grid .text-images__photos[data-format="flex"] {
    display: grid;
    grid-template-columns: repeat(var(--ti-columns, 2), 1fr);
}
.layer--media-grid .text-images__photos[data-format="flex"][data-columns="1"] { --ti-columns: 1; }
.layer--media-grid .text-images__photos[data-format="flex"][data-columns="2"] { --ti-columns: 2; }
.layer--media-grid .text-images__photos[data-format="flex"][data-columns="3"] { --ti-columns: 3; }
.layer--media-grid .text-images__photos[data-format="flex"][data-columns="4"] { --ti-columns: 4; }
.layer--media-grid .text-images__photos[data-format="flex"][data-columns="5"] { --ti-columns: 5; }
.layer--media-grid .text-images__photos[data-format="flex"][data-columns="6"] { --ti-columns: 6; }

/* ── mozaïeken: 1 grote + N kleine. Vierkante cellen (aspect-ratio) geven de
      row-tracks hoogte zodat de grote items (col+row-span) kloppen. ── */
.layer--media-grid .text-images__photos[data-format^="grid-"] {
    display: grid;
    grid-auto-flow: dense;
}
.layer--media-grid .text-images__photos[data-format^="grid-"] > * { aspect-ratio: 1; }

/* grid-2-11 — 3 kol, herhaalt per 6: 1 grote (2×2) + 2 kleine, gespiegeld. */
.layer--media-grid .text-images__photos[data-format="grid-2-11"] { grid-template-columns: repeat(3, 1fr); }
.layer--media-grid .text-images__photos[data-format="grid-2-11"] > *:nth-child(6n+1) { grid-column: 1 / span 2; grid-row: span 2; }
.layer--media-grid .text-images__photos[data-format="grid-2-11"] > *:nth-child(6n+4) { grid-column: 1; }
.layer--media-grid .text-images__photos[data-format="grid-2-11"] > *:nth-child(6n+5) { grid-column: 1; }
.layer--media-grid .text-images__photos[data-format="grid-2-11"] > *:nth-child(6n+6) { grid-column: 2 / span 2; grid-row: span 2; }

/* grid-2-111 — 3 kol, herhaalt per 8: 1 grote (2×3) + 3 kleine, gespiegeld. */
.layer--media-grid .text-images__photos[data-format="grid-2-111"] { grid-template-columns: repeat(3, 1fr); }
.layer--media-grid .text-images__photos[data-format="grid-2-111"] > *:nth-child(8n+1) { grid-column: 1 / span 2; grid-row: span 3; }
.layer--media-grid .text-images__photos[data-format="grid-2-111"] > *:nth-child(8n+6) { grid-column: 1; }
.layer--media-grid .text-images__photos[data-format="grid-2-111"] > *:nth-child(8n+7) { grid-column: 1; }
.layer--media-grid .text-images__photos[data-format="grid-2-111"] > *:nth-child(8n+8) { grid-column: 2 / span 2; grid-row: span 3; }

/* grid-2-11-11 — 4 kol, herhaalt per 10: grote vierkanten + losse cellen. */
.layer--media-grid .text-images__photos[data-format="grid-2-11-11"] { grid-template-columns: repeat(4, 1fr); }
.layer--media-grid .text-images__photos[data-format="grid-2-11-11"] > *:nth-child(10n+1)  { grid-column: 1 / span 2; grid-row: span 2; }
.layer--media-grid .text-images__photos[data-format="grid-2-11-11"] > *:nth-child(10n+8)  { grid-column: 1; }
.layer--media-grid .text-images__photos[data-format="grid-2-11-11"] > *:nth-child(10n+9)  { grid-column: 2; }
.layer--media-grid .text-images__photos[data-format="grid-2-11-11"] > *:nth-child(10n+10) { grid-column: 3 / span 2; grid-row: span 2; }

/* grid-2-11-2 — 5 kol, herhaalt per 8: 2 grote blokken + tussencellen. */
.layer--media-grid .text-images__photos[data-format="grid-2-11-2"] { grid-template-columns: repeat(5, 1fr); }
.layer--media-grid .text-images__photos[data-format="grid-2-11-2"] > *:nth-child(8n+1) { grid-column: 1 / span 3; grid-row: span 3; }
.layer--media-grid .text-images__photos[data-format="grid-2-11-2"] > *:nth-child(8n+4) { grid-column: 4 / span 2; grid-row: span 2; }
.layer--media-grid .text-images__photos[data-format="grid-2-11-2"] > *:nth-child(8n+5) { grid-column: 1; }
.layer--media-grid .text-images__photos[data-format="grid-2-11-2"] > *:nth-child(8n+7) { grid-column: 1 / span 2; grid-row: span 2; }
.layer--media-grid .text-images__photos[data-format="grid-2-11-2"] > *:nth-child(8n+8) { grid-column: 3 / span 3; grid-row: span 3; }

/* ── ___playful — losse masonry-kolommen. ── */
.layer--media-grid .text-images__photos[data-format="___playful"] {
    display: block;
    column-count: 3;
    column-gap: var(--ti-gap, 8px);
}
.layer--media-grid .text-images__photos[data-format="___playful"] .text-images__photo {
    break-inside: avoid;
    margin-bottom: var(--ti-gap, 8px);
}
.layer--media-grid .text-images__photos[data-format="___playful"] .text-images__photo img { height: auto; }

/* ── mobiel: mozaïeken terug naar 2 kolommen, flex naar 1. ── */
@media (max-width: 600px) {
    .layer--media-grid .text-images__photos[data-format="flex"] { --ti-columns: 1; }
    .layer--media-grid .text-images__photos[data-format^="grid-"] {
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: row;
    }
    .layer--media-grid .text-images__photos[data-format^="grid-"] > * {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .layer--media-grid .text-images__photos[data-format="___playful"] { column-count: 2; }
}