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

   Het rooster zelf komt uit .fotorooster in portaal.css: dezelfde maat en
   dezelfde tussenruimte als bij de galerij en het moodboard, want dit zijn
   dezelfde soort tegels en ze horen op een scherm niet uit elkaar te lopen.
   Hieronder staat alleen wat eigen is aan dit onderdeel.

   Waarom een verhouding van 3:4 en geen 4:3 zoals bij de galerij: het
   printje is een strook en de story is staand. Een liggende tegel snijdt
   daar precies de mensen uit die erop staan.

   En daarom wijkt dit rooster onderaan wel af van het gedeelde. Dat vraagt
   tegels van minstens 160 px; op een telefoon past er dan nog maar een naast
   de rand, en met deze staande verhouding is die tegel 385 px hoog. Bij een
   avond van tachtig momenten scrolt het koppel zich een breuk. Twee kolommen
   geven een tegel van 183 px: nog altijd groot genoeg om te zien wie erop
   staat, en de grootweergave is toch een tik ver.
   ========================================================================= */

/* De kop van het scherm: rechts de ene knop, links hoogstens een regel. */
.pb-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pb-kop .m27-btn{flex:none;margin-left:auto}

.pb-moment{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pb-moment h3{margin-bottom:0}

.pb-item{position:relative;display:block;width:100%;border:0;padding:0;background:none;cursor:pointer;border-radius:var(--m27-radius-kaart)}
.pb-item:focus-visible{outline:3px solid var(--m27-lila);outline-offset:2px}
.pb-item img,
.pb-item video{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--m27-radius-kaart);display:block;background:var(--m27-creme)}

/* Het soort staat op de tegel en niet eronder: onder de tegel groeit de rij
   ongelijk zodra een woord over twee regels valt, en dan staat het rooster
   scheef. */
.pb-item__soort{position:absolute;left:8px;bottom:8px;font-size:12px;line-height:1;padding:6px 10px;border-radius:var(--m27-radius-pill);background:rgba(255,255,255,.92);color:var(--m27-tekst);pointer-events:none}

.pb-groot__foto{width:100%;max-height:56vh;object-fit:contain;border-radius:var(--m27-radius-kaart);background:var(--m27-creme);display:block}
.pb-groot__kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.pb-groot__kop h2{margin-bottom:2px}
.pb-groot__kop .uitleg{font-size:13px;color:#7c776f}
.pb-groot__sluit{flex:none;width:48px;height:48px;border-radius:50%;border:1.5px solid #dad5cd;background:#fff;color:var(--m27-tekst);font-size:22px;line-height:1;cursor:pointer}
.pb-groot__sluit:focus-visible{outline:3px solid var(--m27-lila);outline-offset:2px}
.pb-groot__nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}

/* 480 px en niet de gebruikelijke 768: boven de 480 zet het gedeelde rooster
   er vanzelf al twee of meer naast elkaar, dus daar valt niets te winnen en
   zou een vaste twee op een tablet juist kolommen wegnemen. */
@media (max-width:480px){
  .pb-rooster{grid-template-columns:repeat(2,1fr);gap:10px}
  .pb-item__soort{left:6px;bottom:6px;font-size:11px;padding:5px 8px}
  .pb-kop .m27-btn{flex:1 1 100%;margin-left:0}
}

/* =========================================================================
   De printjes van de photobooth: elk kader met een schakelaar.

   Sinds 4 september 2026 hier, met het voorvoegsel pb- van dit onderdeel:
   de kaart verhuisde uit de POV-module (mod-pov.css, met het voorvoegsel
   van dat onderdeel) naar de photobooth-pagina, samen met haar code in
   js/modules/photobooth.js.
   ========================================================================= */

.pb-printjes__kop { display: flex; gap: 16px; align-items: flex-start; }
.pb-printjes__kop .uitleg { margin: 0; max-width: 64ch; }

.pb-printjes__rij {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 18px;
  margin-top: 16px;
}

.pb-printje {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 150px;
}

.pb-printje__doek {
  width: 150px;
  height: 450px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: opacity 0.2s, filter 0.2s;
}

.pb-printje--uit .pb-printje__doek { opacity: 0.35; filter: grayscale(1); }

.pb-printje__naam {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m27-donkerpaars);
  text-align: center;
}

.pb-printje__uitleg {
  margin: -4px 0 0;
  font-size: 0.8rem;
  color: var(--m27-tekst, #4a4a48);
  text-align: center;
}

.pb-printje__rij { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pb-printje__stand { font-size: 0.8rem; color: var(--m27-tekst, #4a4a48); }

/* Dezelfde schakelaar als in de website-editor (mod-website.css), hier
   onder een eigen naam zodat deze module op zichzelf staat. */
.pb-schakel { position: relative; width: 46px; height: 27px; flex: none; }
.pb-schakel input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pb-schakel span {
  position: absolute;
  inset: 0;
  background: #8a857e;
  border-radius: var(--m27-radius-pill);
  transition: background 0.2s;
  pointer-events: none;
}
.pb-schakel span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.pb-schakel input:checked + span { background: var(--m27-donkergroen); }
.pb-schakel input:checked + span::after { transform: translateX(19px); }
.pb-schakel input:focus-visible + span { outline: 3px solid var(--m27-paars); outline-offset: 2px; }
.pb-schakel input:disabled + span { opacity: 0.5; }

@media (max-width: 640px) {
  .pb-printje { width: 120px; }
  .pb-printje__doek { width: 120px; height: 360px; }
}

/* De opdrachten van het spel: de lijst links, het kaartje rechts. */
.pb-opdrachten { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--m27-lijn, #e6e1ec); }
.pb-opdrachten__kop { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.pb-opdrachten__kop .uitleg { margin: 0; max-width: 64ch; }
.pb-opdrachten__werk { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 18px; margin-top: 14px; align-items: start; }
.pb-opdrachten__lijst { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.pb-opdracht { display: grid; grid-template-columns: 26px minmax(0, 1fr) 84px 34px auto 28px; gap: 8px; align-items: center; }
.pb-opdracht__nr { font-size: 11px; letter-spacing: 0.08em; color: var(--m27-paars, #835fa5); text-align: right; font-variant-numeric: tabular-nums; }
.pb-opdracht__tekst { min-width: 0; }
.pb-opdracht__teller { font-size: 11px; color: #8a857e; text-align: right; font-variant-numeric: tabular-nums; }
.pb-opdracht__teller--lang { color: var(--m27-rood, #a4442e); font-weight: 600; }
.pb-opdracht__weg { border: 0; background: transparent; font-size: 20px; line-height: 1; color: #8a857e; cursor: pointer; padding: 2px 6px; }
.pb-opdracht__weg:hover, .pb-opdracht__weg:focus-visible { color: var(--m27-rood, #a4442e); }
.pb-opdrachten__voorbeeld { display: flex; flex-direction: column; align-items: center; gap: 8px; position: sticky; top: 12px; }
.pb-opdrachten__acties { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.pb-opdrachten__stand { font-size: 12.5px; color: #75706a; }

@media (max-width: 720px) {
  .pb-opdrachten__werk { grid-template-columns: 1fr; }
  .pb-opdrachten__voorbeeld { position: static; }
  .pb-opdracht { grid-template-columns: 22px minmax(0, 1fr) 76px; grid-auto-rows: auto; }
  .pb-opdracht__teller, .pb-opdracht [data-voorbeeld], .pb-opdracht__weg { grid-column: span 1; }
}