/* ============================================================
   layer_media_albums — sfeer-impressie
   ------------------------------------------------------------
   Het `format`-veld op de laag koos zes mozaïek-varianten die de renderer nooit uitzond:
   hij maakte altijd dezelfde marquee-strip. Wie in het CMS "1 grote + 2 kleine onder
   elkaar" koos, kreeg hetzelfde als wie "Speels" koos (punt #284).

   De rasters komen uit de legacy-implementatie van ecohus
   (`public/scss/layers/_layer-media-album.scss`), die dezelfde format-namen draagt en
   in productie beproefd is. Overgezet naar platte CSS; de site-eigen merk-elementen van
   463 (een afgeschuinde hoek per foto) zijn er bewust uit gelaten — die horen bij die
   site, niet in het framework.

   De mozaïeken herhalen zich per 8 of 10 foto's, zodat een album van willekeurige lengte
   een doorlopend patroon houdt in plaats van na de eerste set uit te doven.

   Markup:  .media-album[data-format] > figure > img
   Strip:   .strip > .strip__track > .strip__item > img   (format=flex)
   ============================================================ */

/* ── Gemeenschappelijk ──────────────────────────────────────── */

.media-album {
    display: grid;
    gap: var(--media-album-gap, 4px);
}

.media-album > figure {
    margin: 0;
    overflow: hidden;
    /* Zonder verhouding bepaalt de eerste foto de rijhoogte en springt de rest. De grote
       cellen in een mozaïek overschrijven 'm met `auto`, want die vullen twee of drie rijen. */
    aspect-ratio: var(--media-album-ratio, 3 / 2);
}

/* De knop vult de cel volledig: de hele foto is de klikzone, niet alleen een randje. */
.media-album__open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.media-album > figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── 1 grote + 2 kleine onder elkaar ────────────────────────── */
.media-album[data-format="grid-2-11"] {
    grid-template-columns: repeat(3, 1fr);
}
.media-album[data-format="grid-2-11"] > figure:nth-child(3n + 1) {
    grid-column: 1 / span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}

/* ── 1 grote + 3 kleine onder elkaar ────────────────────────── */
.media-album[data-format="grid-2-111"] {
    grid-template-columns: repeat(3, 1fr);
}
.media-album[data-format="grid-2-111"] > figure:nth-child(8n + 1) {
    grid-column: 1 / span 2;
    grid-row: span 3;
    aspect-ratio: auto;
}
.media-album[data-format="grid-2-111"] > figure:nth-child(8n + 6),
.media-album[data-format="grid-2-111"] > figure:nth-child(8n + 7) {
    grid-column: 1;
}
.media-album[data-format="grid-2-111"] > figure:nth-child(8n + 8) {
    grid-column: 2 / span 2;
    grid-row: span 3;
    aspect-ratio: auto;
}

/* ── 1 grote + 2 kleine naast elkaar, daaronder 1 middelgrote ─ */
.media-album[data-format="grid-2-11-2"] {
    grid-template-columns: repeat(5, 1fr);
}
.media-album[data-format="grid-2-11-2"] > figure:nth-child(8n + 1) {
    grid-column: 1 / span 3;
    grid-row: span 3;
    aspect-ratio: auto;
}
.media-album[data-format="grid-2-11-2"] > figure:nth-child(8n + 4) {
    grid-column: 4 / span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}
.media-album[data-format="grid-2-11-2"] > figure:nth-child(8n + 5) {
    grid-column: 1;
}
.media-album[data-format="grid-2-11-2"] > figure:nth-child(8n + 7) {
    grid-column: 1 / span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}
.media-album[data-format="grid-2-11-2"] > figure:nth-child(8n + 8) {
    grid-column: 3 / span 3;
    grid-row: span 2;
    aspect-ratio: auto;
}

/* ── 1 grote + 4 kleine in een vierkant ─────────────────────── */
.media-album[data-format="grid-2-11-11"] {
    grid-template-columns: repeat(4, 1fr);
}
.media-album[data-format="grid-2-11-11"] > figure:nth-child(10n + 1) {
    grid-column: 1 / span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}
.media-album[data-format="grid-2-11-11"] > figure:nth-child(10n + 8) {
    grid-column: 1;
}
.media-album[data-format="grid-2-11-11"] > figure:nth-child(10n + 9) {
    grid-column: 2;
}

/* ── Speels: hetzelfde mozaïek, maar met een grotere eerste ─── */
.media-album[data-format="playful"] {
    grid-template-columns: repeat(6, 1fr);
}
.media-album[data-format="playful"] > figure:nth-child(5n + 1) {
    grid-column: 1 / span 4;
    grid-row: span 4;
    aspect-ratio: auto;
}
.media-album[data-format="playful"] > figure:nth-child(5n + 2),
.media-album[data-format="playful"] > figure:nth-child(5n + 3) {
    grid-column: 5 / span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}

/* Smalle schermen: elk mozaïek valt terug op twee kolommen. Een raster van vijf of zes
   kolommen levert op een telefoon postzegels op, en dat is geen sfeer-impressie meer. */
@media (max-width: 767px) {
    .media-album[data-format] {
        grid-template-columns: repeat(2, 1fr);
    }
    .media-album[data-format] > figure {
        grid-column: auto !important;
        grid-row: auto !important;
        aspect-ratio: var(--media-album-ratio, 3 / 2);
    }
}

/* ── format=flex: de doorlopende band ───────────────────────── */

.strip {
    overflow: hidden;
}

/* De renderer dupliceert de reeks, vandaar -50% als eindpunt: precies één set opgeschoven. */
.strip__track {
    display: flex;
    gap: var(--media-album-gap, 24px);
    width: max-content;
    animation: media-album-marquee var(--marquee-duration, 52s) linear infinite;
}

.strip:hover .strip__track {
    animation-play-state: paused;
}

.strip__item {
    flex: 0 0 auto;
    margin: 0;
}

.strip__item img {
    display: block;
    height: clamp(180px, 22vw, 320px);
    width: auto;
    object-fit: cover;
}

@keyframes media-album-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .strip__track {
        animation: none;
        overflow-x: auto;
        width: 100%;
    }
}