/* ---- Templates: de mappen als rijen zoals in Bestanden, de inhoud als raster zoals in Foto's ---- */
.rij.map { --inspring: 86px; }
.omslag { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--vulling-3); }
.kop-knoppen { margin-top: 16px; }
.mappen { max-width: 720px; }
.terug-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: -8px 0 0 -6px; color: var(--accent); font-size: 1.0625rem; }
.terug-link svg { width: 20px; height: 20px; stroke-width: 2.4; }
.suite.gast .terug-link { display: none; } /* daar staat de terug-pijl al in de balk */
@media (max-width: 899px) { .terug-link { display: none; } }
.tpl-uploads { max-width: 720px; margin-bottom: 24px; }
/* een lange naam zonder spaties breekt af of krijgt puntjes, in plaats van de pagina opzij te schuiven */
.tpl-titel { overflow-wrap: anywhere; }
.rij.map .rij-tekst strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-opnieuw { justify-content: center; margin-top: 16px; }

.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px 12px; margin-bottom: 28px; }
.tegel { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; color: var(--label); font: inherit; text-align: left; cursor: pointer; }
.tegel-beeld { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--groep); color: var(--label-2); transition: transform var(--duur) var(--veer); }
.tegel:active .tegel-beeld { transform: scale(0.97); }
.tegel-beeld img, .tegel-beeld video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tegel-beeld > svg { width: 44px; height: 44px; stroke-width: 1.6; }
.tegel-speel { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; }
.tegel-speel svg { width: 14px; height: 14px; margin-left: 2px; fill: currentColor; stroke: none; }
.tegel-tekst { display: grid; gap: 1px; min-width: 0; padding: 0 4px; }
.tegel-tekst strong { overflow: hidden; font-size: 0.9375rem; line-height: 1.333; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tegel-tekst span { color: var(--label-2); font-size: 0.8125rem; line-height: 1.385; }
.tegel.weg .tegel-beeld { opacity: 0.5; }
@media (max-width: 599px) { .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } }

/* de kijker: het bestand groot op zwart, naam en knoppen eronder */
dialog.kijker { width: min(960px, calc(100% - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 30px; overflow: hidden; background: var(--groep); color: var(--label); animation: menu-in 0.24s var(--veer); }
dialog.kijker::backdrop { background: rgba(0, 0, 0, 0.6); }
.kijker-beeld { height: min(68vh, 720px); height: min(68dvh, 720px); overflow: hidden; background: #000; }
/* het beeld vult het zwarte vlak en past erin, staand of liggend */
.kijker-beeld img, .kijker-beeld video { display: block; width: 100%; height: 100%; object-fit: contain; }
.kijker-pdf { display: grid; place-content: center; justify-items: center; gap: 8px; height: 100%; color: rgba(235, 235, 245, 0.6); font-weight: 600; }
.kijker-pdf svg { width: 64px; height: 64px; stroke-width: 1.4; }
.kijker-onder { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 20px 20px; }
.kijker-onder .rij-tekst { flex: 1 1 200px; }
.kijker-onder .rij-tekst strong { overflow-wrap: anywhere; }
.kijker .sluit, .kijker .vorige, .kijker .volgende { position: absolute; z-index: 1; color: var(--label); }
.kijker .sluit { top: 12px; right: 12px; }
.kijker .vorige, .kijker .volgende { top: calc(min(68vh, 720px) / 2 - 22px); top: calc(min(68dvh, 720px) / 2 - 22px); }
.kijker .vorige { left: 12px; }
.kijker .volgende { right: 12px; }
@media (max-width: 599px) {
  dialog.kijker { width: calc(100% - 16px); border-radius: 26px; }
  .kijker-beeld { height: min(56vh, 560px); height: min(56dvh, 560px); }
  .kijker .vorige, .kijker .volgende { top: calc(min(56dvh, 560px) / 2 - 22px); }
  .kijker-onder .knoppen { width: 100%; }
  .kijker-onder .knop { flex: 1; }
}

/* een naam vragen: de vraag van de suite met een veld erin */
dialog.vraag input { margin-top: 12px; }