/* =========================================================================
   27 Moments portaal, de opmaak van het onderdeel galerij

   Deze regels stonden tot 11 augustus 2026 als string in
   sites/js/modules/galerij.js en werden bij het tekenen in een <style> in de
   head geduwd. Dat gaf bij elk eerste bezoek een flits ongestileerde inhoud,
   het was niet te cachen, en het maakte van dit onderdeel de uitzondering op
   de acht andere die wel een eigen css-bestand hebben. De regels zijn
   letterlijk overgenomen; de link staat als laatste in sites/index.html,
   zodat de cascade dezelfde blijft als toen ze nog achteraan geinjecteerd
   werden.

   Sinds september 2026 staan de beelden per moment van de dag (.gal-moment)
   en draagt de kop een knop Alles downloaden (.gal-kop).
   ========================================================================= */

.gal-video{position:relative;aspect-ratio:16/9;border-radius:var(--m27-radius-kaart);overflow:hidden;background:var(--m27-creme)}
.gal-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* De kop: links de boodschap en de telling, rechts de ene groene knop. */
.gal-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.gal-kop__tekst{flex:1 1 240px;min-width:0}
.gal-kop__tekst p{margin:0 0 4px}
.gal-kop .m27-btn{flex:none}

/* Een moment: de naam, de datum en het uur eronder, de telling rechts. */
.gal-moment__kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.gal-moment__kop h3{margin-bottom:2px}
.gal-moment__telling{flex:none;font-size:12px;letter-spacing:var(--m27-ls-label);text-transform:uppercase;color:#8a857e;padding-top:4px}
.gal-leeg__momenten{margin-top:10px;font-size:13.5px}

.gal-item{position:relative;display:block;width:100%;border:0;padding:0;background:none;cursor:pointer;border-radius:var(--m27-radius-kaart)}
.gal-item:focus-visible{outline:3px solid var(--m27-lila);outline-offset:2px}
.gal-item img,.gal-item video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--m27-radius-kaart);display:block;background:var(--m27-creme)}
.gal-groot__foto{width:100%;max-height:52vh;object-fit:contain;border-radius:var(--m27-radius-kaart);background:var(--m27-creme)}
.gal-groot__kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.gal-groot__kop h2{margin-bottom:2px}
.gal-groot__kop .uitleg{font-size:13px;color:#7c776f}
.gal-groot__sluit{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid #dad5cd;background:#fff;color:var(--m27-tekst);font-size:22px;line-height:1;cursor:pointer}
.gal-groot__sluit:focus-visible{outline:3px solid var(--m27-lila);outline-offset:2px}
/* Vorige, Downloaden en Volgende op een rij: bladeren en bewaren zonder te
   zoeken. Op een smal scherm mag de rij breken. */
.gal-groot__nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.gal-storing{background:var(--m27-creme);border-radius:14px;padding:16px 18px;font-size:14.5px}

@media (max-width:480px){
  .gal-rooster{grid-template-columns:repeat(2,1fr);gap:10px}
  .gal-kop .m27-btn{flex:1 1 100%}
}

/* De reviewkast van de aftermovie: een gesprek met 27 Moments, met reacties
   die aan een tijdstip in de film kunnen hangen. Stond tot 11 augustus 2026 als
   tweede geinjecteerde <style> in galerij.js. */

.galf-kaart{margin-bottom:18px}
.galf-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.galf-kop h3{margin-bottom:2px}
.galf-kop .uitleg{margin:0}
.galf-speler{width:100%;max-height:480px;border-radius:16px;background:#101010;display:block}
.galf-reacties{display:flex;flex-direction:column;gap:8px;margin:14px 0 10px}
.galf-reactie{display:flex;gap:10px;align-items:baseline;font-size:14px;background:var(--m27-creme);border-radius:12px;padding:9px 13px}
.galf-reactie--admin{background:#f2edf7}
.galf-reactie strong{font-weight:600}
.galf-tijd{flex:none;font:inherit;font-size:12px;font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;padding:2px 9px;border-radius:999px;border:1px solid #dcd0ea;background:#fff;color:var(--m27-paars);cursor:pointer}
.galf-tijd:hover{background:var(--m27-creme)}
.galf-schrijf{margin:10px 0 12px}
.galf-optijd{display:flex;align-items:center;gap:8px;font-size:13px;color:#8a857e;margin-bottom:7px;cursor:pointer}
.galf-optijd input{accent-color:var(--m27-paars);width:15px;height:15px;flex:none}
.galf-schrijf__rij{display:flex;gap:8px}
.galf-schrijf__rij input[type=text]{flex:1;min-width:0}
.galf-acties{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.galf-goedgekeurd{font-size:13.5px;color:var(--m27-donkergroen);background:var(--m27-lichtgroen);border-radius:999px;padding:7px 14px}
@media (max-width:600px){.galf-schrijf__rij{flex-direction:column}
.galf-acties .m27-btn{flex:1}
}