/*
 * Route Foto-Gallery -- .ss-route-gallery
 *
 * Per-route ACF-gallery: sfeerimpressie tussen 2-koloms verhaal en FAQ.
 * Masonry-light via CSS Grid (leader-cell 2x op desktop, 2x2 op desktop-xl).
 * Geen JS, geen lightbox in v1.
 *
 * Spec: Klanten/Studio Spreekwoord/dev/docs/usp-rij-en-gallery-spec-2026-05-16.md
 *
 * Tokens (bron: tokens.css):
 *   --color-bg                #FFFFFF  Default sectie-vlak
 *   --color-text-inverse      #FFFFFF  Caption-tekst (op gradient-overlay)
 *   --color-border            #E5E1D8  Placeholder-tint tijdens lazy-load
 *   --radius-md               8px      Foto-rounding
 *   --font-body               Lato     Caption-typografie
 *   --ease-out-quart                   Easing voor hover-zoom
 *
 * WCAG-overweging caption-overlay:
 *   Caption rendert wit op een lineaire gradient rgba(0,0,0,0.55) -> transparant
 *   over willekeurige foto-pixels. De achtergrond is dus variabel; geen exacte
 *   contrast-meting mogelijk. De gradient + max-height:50% volgt de Material
 *   Design-conventie voor image-overlay-text (zwarte scrim borgt leesbaarheid
 *   in praktijk). Toegang via tool-meting niet zinvol bij variabele bg.
 *
 * Geen !important. Reduced-motion: geen hover-zoom.
 */


/* =============================================================================
   SECTIE
   .section-default (uit main.css) levert de standaard sectie-padding.
   Hier alleen achtergrond + interne grid-styling.
   ============================================================================= */
.ss-route-gallery {
    background-color: var(--color-bg);   /* Wit -- visueel onderscheid van perkament-secties eromheen */
}


/* =============================================================================
   GRID
   Mobile-first 2-koloms (Pixel-spec sec.2.4: NIET 1-koloms op mobiel,
   anders wordt de gallery dominant en duwt FAQ ver naar onder).
   ============================================================================= */
.ss-route-gallery__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* Mobile base */
    grid-auto-rows: 1fr;                      /* Equal-height cells */
    gap: 8px;
}

@media (min-width: 640px) {
    .ss-route-gallery__grid {
        gap: 12px;
    }
}

@media (min-width: 1024px) {
    .ss-route-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

@media (min-width: 1280px) {
    .ss-route-gallery__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}


/* =============================================================================
   ITEM (.ss-route-gallery__item)
   ============================================================================= */
.ss-route-gallery__item {
    margin: 0;
    padding: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-md);
}


/* =============================================================================
   LEADER-CELL (.ss-route-gallery__item--leader)
   Eerste item: 2x breder, op desktop-xl ook 2x hoger -> 2x2 vierkant.
   Anti-AI per Pixel spec sec.2.10: leader-variatie voorkomt 4xN-identieke-grid
   AI-cliche. Redactionele tijdschrift-spread look.
   Edge-case (OV-3): bij count===1 strippen Webby/PHP de leader-class --
   geen oversized solo-foto. CSS hier hoeft geen extra rule, de class komt
   gewoon niet voor in dat geval.
   ============================================================================= */
.ss-route-gallery__item--leader {
    grid-column: span 2;
    aspect-ratio: 16 / 10;
}

@media (min-width: 1280px) {
    .ss-route-gallery__item--leader {
        grid-row: span 2;
        aspect-ratio: 1 / 1;   /* Vierkant in de 2x2-cell op desktop-xl */
    }
}


/* =============================================================================
   FIGURE + IMG
   ============================================================================= */
.ss-route-gallery__figure {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

.ss-route-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--ease-out-quart);
    background-color: var(--color-border);   /* Placeholder-tint tijdens lazy-load -- voorkomt witte flash */
}

/* Subtle hover-zoom -- alleen op echte hover-devices + geen reduced-motion */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ss-route-gallery__item:hover .ss-route-gallery__img {
        transform: scale(1.04);
    }
}


/* =============================================================================
   CAPTION (alleen als ACF-caption ingevuld)
   ============================================================================= */
.ss-route-gallery__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
    color: var(--color-text-inverse);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.35;
    margin: 0;
    /* Voorkom dat lange captions de foto overspoelen */
    max-height: 50%;
    overflow: hidden;
}


/* =============================================================================
   REDUCED-MOTION FALLBACK
   Defensief naast de @media (prefers-reduced-motion: no-preference)-guard
   hierboven -- expliciet de transitie + hover-state uitschakelen voor
   gebruikers met reduced-motion preference.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .ss-route-gallery__img {
        transition: none;
    }
    .ss-route-gallery__item:hover .ss-route-gallery__img {
        transform: none;
    }
}