/* Disco-Train — Fotogalleries
   Zelfde kleurenpalet als discotrain-mec-styling / discotrain-artiesten
   (bewust gedupliceerd i.p.v. een gedeeld bestand, zodat deze plugin los
   blijft van die twee — zelfde reden als in discotrain-artiesten.css). */
:root {
    --discotrain-accent: #ff007f;
    --discotrain-accent-hover: #e6006f;
    --discotrain-teal: #006b7d;
    --discotrain-dark: #0d0d0d;
    --discotrain-dark-alt: #1a1a1a;
    --discotrain-text: #ffffff;
    --discotrain-text-muted: #a3a3a3;
    --discotrain-border: rgba(255, 255, 255, 0.08);
    --discotrain-radius: 16px;
}

.discotrain-fotogalleries-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.discotrain-fotogalleries-empty {
    color: var(--discotrain-text-muted);
}

/* Shared card look — album grid items, single-album gallery sections. */
.discotrain-fotogalleries-card {
    background: var(--discotrain-dark-alt);
    border: 1px solid var(--discotrain-border);
    border-radius: var(--discotrain-radius);
    padding: 24px;
    margin-bottom: 20px;
    color: var(--discotrain-text);
}

.discotrain-fotogalleries-card h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--discotrain-text) !important;
    margin: 0 0 16px;
    font-size: 20px;
}

/* Jaar/plaats-filter (discotrain-fotogalleries-filter.js) — zelfde stijl
   als de Locaties-filter (discotrain-locaties.css), hier los gehouden
   i.p.v. gedeeld om dezelfde reden als de kleurvariabelen bovenaan. */
.discotrain-fotogalleries-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.discotrain-fotogalleries-filter-select {
    background: var(--discotrain-dark-alt);
    color: var(--discotrain-text);
    border: 1px solid var(--discotrain-border);
    border-radius: calc(var(--discotrain-radius) - 4px);
    padding: 10px 16px;
    font-size: 14px;
    min-width: 180px;
    cursor: pointer;
}

.discotrain-fotogalleries-filter-select:focus {
    outline: none;
    border-color: var(--discotrain-accent);
}

.discotrain-fotogalleries-filter-reset {
    background: transparent;
    color: var(--discotrain-text-muted);
    border: 1px solid var(--discotrain-border);
    border-radius: calc(var(--discotrain-radius) - 4px);
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.discotrain-fotogalleries-filter-reset:hover {
    border-color: var(--discotrain-accent);
    color: var(--discotrain-accent);
}

.discotrain-fotogalleries-filter-empty {
    color: var(--discotrain-text-muted);
}

/* [[feedback_hidden_attribute_specificity]]: "a.discotrain-fotogalleries-card
   { display: block }" verderop heeft een hogere specificiteit (0,1,1) dan de
   browser-eigen "[hidden] { display: none }" (0,1,0), dus zonder deze regel
   zou het [hidden]-attribuut dat de filter-JS zet niks doen. Proactief
   toegevoegd (i.p.v. pas na een live-test zoals bij de Locaties-filter). */
.discotrain-fotogalleries-filterable [hidden] {
    display: none !important;
}

/* Album overview grid ([discotrain_albums] shortcode + archive). Vast 4 op
   een rij op desktop (klant-verzoek, zelfde als discotrain-locaties.css) —
   was eerder auto-fit/minmax(260px, 300px) omdat repeat(4, 1fr) bij weinig
   albums (bv. 1 album) 3 lege kolommen ernaast laat i.p.v. de kaart zelf te
   vergroten. Dat is echter exact hoe discotrain-locaties-grid zich ook al
   gedraagt en daar is dat prima bevonden, dus bewust dezelfde aanpak
   overgenomen voor consistentie tussen de twee overzichtspagina's. */
.discotrain-fotogalleries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Tablet: 4 vaste kolommen worden te smal, terug naar 2 — zelfde breakpoint
   als discotrain-locaties-grid. */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .discotrain-fotogalleries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Op mobiel is de kaart (.discotrain-card, 24px padding) vaak maar
   ~330-380px breed van binnen. Op uitdrukkelijk verzoek van de klant:
   minimaal 2 naast elkaar op mobiel. minmax(140px, 1fr) i.p.v. een vaste
   "repeat(2, 1fr)" — zo blijft het ook op heel smalle toestellen (~320px)
   nog 2 kolommen, en zou het vanzelf naar 3 opschuiven op een iets bredere
   telefoon/tablet i.p.v. daar juist te smal te worden. */
@media only screen and (max-width: 767px) {
    .discotrain-fotogalleries-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }
}

/* Onderliggende albums op de single-albumpagina (bv. event-albums onder
   een jaar-album) — zelfde grid, iets ruimte eronder voor wat er verder
   op de pagina volgt (eigen galleries, indien aanwezig). */
.discotrain-fotogalleries-child-albums {
    margin-bottom: 24px;
}

a.discotrain-fotogalleries-card {
    display: block;
    text-decoration: none;
    padding: 0;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

a.discotrain-fotogalleries-card:hover {
    border-color: var(--discotrain-accent);
}

.discotrain-fotogalleries-card-image,
.discotrain-fotogalleries-card-image-placeholder {
    background: var(--discotrain-dark);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.discotrain-fotogalleries-card-image-placeholder {
    color: var(--discotrain-text-muted);
}

.discotrain-fotogalleries-card-image-placeholder svg {
    width: 40px;
    height: 40px;
}

/* !important nodig: Betheme's globale "img:not([src*='.svg']) { height:
   auto; }" heeft dezelfde specificiteit als deze regel en wint anders de
   cascade-tie (zelfde categorie als [[feedback-theme-css-specificity]]),
   waardoor de foto op zijn eigen beeldverhouding bleef staan i.p.v. de kaart
   te vullen (lege ruimte boven/onder). */
.discotrain-fotogalleries-card-image img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto;
    object-fit: cover;
    display: block;
}

.discotrain-fotogalleries-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Kleiner dan voorheen (was 21px) + single-line met ellipsis (klantverzoek:
   de titel moet op 1 regel passen i.p.v. over te lopen naar een 2e regel). */
.discotrain-fotogalleries-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--discotrain-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discotrain-fotogalleries-card-date,
.discotrain-fotogalleries-card-event,
.discotrain-fotogalleries-card-location,
.discotrain-fotogalleries-card-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--discotrain-text-muted) !important;
}

/* Archive page (/albums/) — page-width matches the theme's own
   .section_wrapper/.container (1220px, see homepage), so this feels like
   a native page instead of a narrower custom-plugin page. */
.discotrain-fotogalleries-archive {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    box-sizing: border-box;
}

.discotrain-fotogalleries-archive-title {
    margin: 0 0 24px;
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--discotrain-text) !important;
}

/* Small accent underline below the start of the title (not full-width) —
   same pattern applied to the Artiesten and DJ Mixes archive titles for a
   consistent look across all Disco-Train overview pages. */
.discotrain-fotogalleries-archive-title::after {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 10px;
    background: var(--discotrain-accent);
    border-radius: 2px;
}

/* Single album page — same 1220px page-width convention as the archive. */
.discotrain-fotogalleries-single {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    box-sizing: border-box;
}

.discotrain-fotogalleries-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--discotrain-text-muted) !important;
    text-decoration: none;
    margin-bottom: 20px;
    font-size: 14px;
}

.discotrain-fotogalleries-back-link:hover {
    color: var(--discotrain-accent) !important;
}

.discotrain-fotogalleries-header {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.discotrain-fotogalleries-header-image {
    width: 320px;
    max-width: 100%;
    flex-shrink: 0;
    border-radius: var(--discotrain-radius);
    overflow: hidden;
}

.discotrain-fotogalleries-header-image img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.discotrain-fotogalleries-header-body {
    flex: 1;
    min-width: 240px;
}

.discotrain-fotogalleries-title {
    margin: 0 0 10px;
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--discotrain-text) !important;
}

.discotrain-fotogalleries-event-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 0, 127, 0.12);
    color: var(--discotrain-accent) !important;
    border: 1px solid rgba(255, 0, 127, 0.35);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 14px;
}

.discotrain-fotogalleries-event-link:hover {
    background: var(--discotrain-accent);
    color: #fff !important;
}

/* Zelfde uiterlijk als .discotrain-fotogalleries-event-link, maar als
   niet-klikbare <span> — voor de losse eventnaam-fallback (oude albums
   waarvan het event niet meer in de agenda staat, zie
   discotrain-fotogalleries-event-link.php field_discotrain_album_event_naam)
   waar geen linkbare eventpagina voor bestaat. */
.discotrain-fotogalleries-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 0, 127, 0.12);
    color: var(--discotrain-accent) !important;
    border: 1px solid rgba(255, 0, 127, 0.35);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}

.discotrain-fotogalleries-description {
    color: var(--discotrain-text-muted);
    line-height: 1.6;
}

.discotrain-fotogalleries-gallery-card .envira-gallery-wrap {
    margin: 0;
}

/* Envira Gallery lightbox ("envirabox") — grotere, duimvriendelijke
   bediening op mobiel. Op mobiel vult de foto de volledige breedte,
   waardoor Envira's eigen prev/next-tikzones (32px breed) en sluitknop
   (16x16px) veel te klein zijn om makkelijk te raken. We vergroten de
   tikzones en tekenen zelf een duidelijke pijl/kruisje via ::after (los
   van hoe Envira's eigen icoon precies gerenderd wordt — dat bleek via
   devtools niet betrouwbaar te achterhalen), met een halfdoorzichtige
   cirkel erachter zodat de knoppen ook boven op de foto zelf goed
   zichtbaar blijven. Alleen op mobiel: op desktop is er al ruim
   voldoende ruimte rond de foto en werkt de bediening prima. */
@media only screen and (max-width: 767px) {

    /* .envirabox-arrow heeft altijd position:absolute (Envira zet zelf
       een inline top in px om verticaal te centreren) — top/transform
       met !important overschrijft die inline waarde probleemloos. */
    .envirabox-arrow {
        width: 50px !important;
        height: 50px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(13, 13, 13, 0.55) !important;
        border-radius: 50% !important;
        z-index: 100000 !important;
    }

    .envirabox-arrow--left {
        left: 10px !important;
    }

    .envirabox-arrow--right {
        right: 10px !important;
    }

    .envirabox-arrow span {
        display: none !important;
    }

    .envirabox-arrow::after {
        content: '' !important;
        display: block !important;
        width: 12px !important;
        height: 12px !important;
        border-style: solid !important;
        border-color: #fff !important;
        border-width: 0 3px 3px 0 !important;
        box-sizing: border-box !important;
    }

    .envirabox-arrow--left::after {
        transform: rotate(135deg) !important;
        margin-left: 5px !important;
    }

    .envirabox-arrow--right::after {
        transform: rotate(-45deg) !important;
        margin-right: 5px !important;
    }

    /* Sluitknop zit in .envirabox-toolbar (position:fixed, tegen de
       rechterbovenhoek aangeplakt) en is zelf position:relative — dus
       alleen groter maken, niet los positioneren, anders schuift hij
       los van die toolbar-plek. */
    .envirabox-button--close,
    .envirabox-close-small {
        width: 46px !important;
        height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(13, 13, 13, 0.55) !important;
        border-radius: 50% !important;
        z-index: 100000 !important;
    }

    .envirabox-button--close::after {
        content: '\00d7' !important;
        font-size: 26px !important;
        line-height: 1 !important;
        color: #fff !important;
    }

    .envirabox-close-small::after {
        position: static !important;
        width: auto !important;
        height: auto !important;
        font-size: 26px !important;
        line-height: 1 !important;
        color: #fff !important;
        background: none !important;
    }
}

/* Desktop: dezelfde klacht als hierboven bij mobiel — Envira's eigen
   pijl-tikzones (35x70px rechthoek) en sluitknop staan letterlijk tegen de
   viewport-rand aan (left/right: 0px resp. right: 10px). Zelfde aanpak:
   grotere ronde knoppen, eigen ::after-pijl/kruisje, nu met margin tot de
   rand i.p.v. ertegenaan. Iets groter dan de mobiele variant — op desktop
   is precisie met een muis minder een probleem dan duimbediening, dus hier
   vooral zichtbaarheid/comfort. */
@media only screen and (min-width: 768px) {

    .envirabox-arrow {
        width: 60px !important;
        height: 60px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(13, 13, 13, 0.55) !important;
        border-radius: 50% !important;
        z-index: 100000 !important;
        transition: background-color 0.15s ease !important;
    }

    .envirabox-arrow:hover {
        background: rgba(13, 13, 13, 0.8) !important;
    }

    .envirabox-arrow--left {
        left: 24px !important;
    }

    .envirabox-arrow--right {
        right: 24px !important;
    }

    .envirabox-arrow span {
        display: none !important;
    }

    .envirabox-arrow::after {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        border-style: solid !important;
        border-color: #fff !important;
        border-width: 0 3px 3px 0 !important;
        box-sizing: border-box !important;
    }

    .envirabox-arrow--left::after {
        transform: rotate(135deg) !important;
        margin-left: 6px !important;
    }

    .envirabox-arrow--right::after {
        transform: rotate(-45deg) !important;
        margin-right: 6px !important;
    }

    /* .envirabox-toolbar is de rij knoppen rechtsboven (sluiten, downloaden,
       printen, ...) — de hele rij een flink stuk van de rand af schuiven
       i.p.v. alleen de sluitknop, om de onderlinge afstand tussen de
       knoppen zelf niet te verstoren (zelfde reden als bij de mobiele
       versie hierboven). Ook verticaal wat lucht (top): zonder die
       top-marge stond de knop zo hoog dat hij half achter/naast de sticky
       site-navigatie viel. */
    .envirabox-toolbar {
        top: 40px !important;
        right: 40px !important;
        z-index: 2147483647 !important;
    }

    .envirabox-button--close,
    .envirabox-close-small {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(13, 13, 13, 0.55) !important;
        border-radius: 50% !important;
        z-index: 100000 !important;
        transition: background-color 0.15s ease !important;
    }

    .envirabox-button--close:hover,
    .envirabox-close-small:hover {
        background: rgba(13, 13, 13, 0.8) !important;
    }

    /* Het echte sluit-element heeft ook nog de class "envirabox-close" (zie
       live DOM: <a class="envirabox-item envirabox-close envirabox-button--
       close">) — dáár tekent Envira zelf zijn eigen kruisje via :before, met
       een eigen absolute top/left-positionering die uitgaat van de
       OORSPRONKELIJKE kleine knop (16px). Nu die knop hier 40px groot is
       gemaakt, bleef dat :before-icoontje op zijn oude, kleine-knop-
       coördinaat hangen — vandaar dat het kruisje los van de (nu grotere,
       naar rechts opgeschoven) ronde achtergrond leek te zweven. Simpelste
       robuuste oplossing: Envira's eigen :before-icoon overal uitschakelen
       en uitsluitend ons eigen, met display:flex gecentreerde ::after-
       kruisje laten zien — dan is er nooit een tweede, verkeerd
       gepositioneerd icoontje dat ermee kan overlappen. */
    .envirabox-close::before,
    .envirabox-button--close::before,
    .envirabox-close-small::before {
        content: none !important;
        display: none !important;
    }

    .envirabox-button--close::after,
    .envirabox-close-small::after {
        content: '\00d7' !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        font-size: 24px !important;
        line-height: 1 !important;
        color: #fff !important;
        background: none !important;
    }
}