/* =========================================================================
   27 Moments, publieke zaalpagina's (/zalen/ en /zalen/<slug>)
   Server-side gerenderd door functions/zalen/; dit blad wordt daar met een
   absoluut pad ingeladen, na /ds/m27.css. Alle kleuren en maten komen dus
   uit de --m27-tokens: deze pagina's ogen als 27 Moments, de zaal herken
   je aan de beelden en de naam, niet aan een eigen kleurenpalet.
   ========================================================================= */

/* Het hidden-attribuut moet altijd winnen van de display-regels hieronder,
   zoals in partners.css, sessies.css en barometer.css. Deze pagina's dragen
   vandaag geen verborgen elementen, maar er staan nu wel display-regels op
   .m27-btn en .zaalkaart, en die zouden een hidden-knop weer zichtbaar maken. */
[hidden] { display: none !important; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--m27-font-tekst);
  font-weight: 300;
  font-size: var(--m27-fs-body);
  line-height: 1.6;
  background: var(--m27-creme);
  color: var(--m27-tekst);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.omslag {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 18px 40px;
  flex: 1;
}

/* De detailpagina mag breder: daar dragen de beelden de pagina. */
.omslag--breed { max-width: 960px; }

/* -------------------------------- Hero ---------------------------------- */

.hero {
  position: relative;
  background: radial-gradient(120% 90% at 50% 0%, var(--m27-donkergroen) 0%, #3a4436 72%);
  color: var(--m27-creme);
  text-align: center;
  padding: 36px 20px 32px;
  overflow: hidden;
}

/* Dezelfde subtiele filmkorrel als de andere publieke pagina's. */
.hero::after {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.5;
  pointer-events: none;
}

.hero > * { position: relative; z-index: 1; }

/* Het merk is een link naar de hoofdsite, zoals de kop van /partners/ en
   /barometer/. inline-block, want een kale inline <a> laat margin-bottom
   vallen en dan schuift de titel tegen het merk aan. */
.hero__merk {
  display: inline-block;
  font-size: 11px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: var(--m27-lila);
  text-decoration: none;
  margin-bottom: 14px;
}

.hero h1 {
  font-family: var(--m27-font-titel);
  font-weight: 400;
  font-size: clamp(26px, 5.5vw, 42px);
  line-height: 1.15;
  letter-spacing: var(--m27-ls-titel);
  max-width: 22ch;
  margin: 0 auto 8px;
  text-wrap: balance;
}

.hero__sub {
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0.75;
  max-width: 52ch;
  margin: 0 auto;
}

/* ------------------------------- Kaarten -------------------------------- */

.kaart {
  background: var(--m27-wit);
  border: 1px solid #e2ded4;
  border-radius: var(--m27-radius-kaart);
  padding: 22px 24px;
  margin: 18px 0;
  box-shadow: 0 2px 10px rgba(90, 104, 80, 0.05);
}

.kaart h2 {
  font-family: var(--m27-font-titel);
  font-weight: 400;
  letter-spacing: var(--m27-ls-titel);
  font-size: 21px;
  color: var(--m27-donkergroen);
  margin-bottom: 8px;
}

.kaart a { color: var(--m27-paars); }

.kaart__acties { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Tikdoel van 48px, zoals de standaard vraagt: m27-btn komt uit /ds/m27.css
   op ongeveer 39px uit. Dezelfde regel staat in partners.css, sessies.css en
   barometer.css; hij hoort op termijn in /ds/m27.css zelf, dan mogen deze
   vier kopieën weg. */
.m27-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* De brug onderaan: warm groen papier, geen schreeuwerige banner. */
.kaart--brug { background: var(--m27-lichtgroen); border-color: #d5ddb9; }

.leeg-kaart { text-align: center; padding: 34px 24px; }

/* De weg terug bovenaan de detailpagina. Die stond alleen in de voet, dus
   moest je op telefoon eerst voorbij maximaal 24 beelden scrollen om één
   stap terug te zetten. Zelfde plek en zelfde toon als kop__terug op
   /partners/. */
.terugregel { margin: 16px 0 0; font-size: 13px; }

.terugregel a {
  color: var(--m27-paars);
  text-decoration: underline;
  text-decoration-color: rgba(131, 95, 165, 0.45);
  text-underline-offset: 3px;
  /* De verticale padding maakt er een tikdoel van 48px van zonder de
     onderlijn van de tekst weg te duwen. 14px en niet 13px: de tekstregel is
     13px bij regelhoogte 1.6, dus 20.8px, en met 2 x 13px kwam de link op
     46.8px uit, net onder de ondergrens uit de standaard. */
  display: inline-block;
  padding: 14px 0;
}

/* --------------------------- Overzicht: raster --------------------------- */

.zalen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  margin: 24px 0 8px;
}

/* Kolom-flex zodat de pil onderaan uitlijnt met de pil van de kaart
   ernaast: een zaalnaam van twee regels zette hem anders hoger. */
.zaalkaart {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--m27-wit);
  border: 1px solid #e2ded4;
  border-radius: var(--m27-radius-kaart);
  padding: 12px 12px 16px;
  box-shadow: 0 2px 10px rgba(90, 104, 80, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zaalkaart:hover,
.zaalkaart:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(90, 104, 80, 0.14);
}

.zaalkaart:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

/* De figure houdt haar lichtgroene vulling (uit .m27-photo): valt een
   beeldbestand weg, dan blijft dit een rustig gekleurd vlak. */
.zaalkaart__beeld { aspect-ratio: 4 / 3; border-radius: 16px; }

.zaalkaart__naam {
  font-family: var(--m27-font-titel);
  font-weight: 400;
  letter-spacing: 0.5px;
  font-size: 19px;
  color: var(--m27-donkergroen);
  margin: 12px 0 2px;
}

.zaalkaart__plaats {
  font-size: 13px;
  color: #7c776f;
  margin-bottom: 8px;
}

/* align-self is hier geen luxe: zonder die regel rekt de pil in een
   kolom-flex over de volle kaartbreedte uit. */
.zaalkaart__tag { margin-top: auto; align-self: flex-start; }

/* ----------------------------- Detail: label ----------------------------- */

.zaal-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 22px 0 0;
}

.zaal-label__uitleg { font-size: 13.5px; color: #7c776f; }

/* ----------------------------- Detail: quote ----------------------------- */

.zaal-quote {
  margin: 22px auto 4px;
  max-width: 34ch;
  text-align: center;
}

.zaal-quote p {
  font-family: var(--m27-font-titel);
  font-weight: 400;
  font-size: clamp(20px, 3.4vw, 27px);
  line-height: 1.35;
  letter-spacing: 0.5px;
  color: var(--m27-paars);
}

.zaal-quote p::before { content: "\201C"; }
.zaal-quote p::after { content: "\201D"; }

/* --------------------------- Detail: beelden ----------------------------- */

.zaal-beelden {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.zaal-beeld { aspect-ratio: 3 / 2; }

/* Het eerste beeld groot over de volle breedte: dat is de binnenkomer. */
.zaal-beeld:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

.zaal-omschrijving p { max-width: 68ch; }

/* -------------------------------- Voet ----------------------------------- */

.voet {
  text-align: center;
  padding: 20px 16px 26px;
  background: var(--m27-lichtgroen);
  border-top: 1px solid #d5ddb9;
  font-size: 13px;
  color: var(--m27-donkergroen);
}

.voet p { margin: 2px 0; }
.voet a { color: var(--m27-paars); }

/* ------------------------------- Telefoon -------------------------------- */

@media (max-width: 560px) {
  /* Eén kolom, gelijk aan .rooster op /partners/. Met twee kolommen bleef er
     op 360px zo weinig kaartbreedte over dat de pil "Voorbeeldreportage"
     binnen zijn eigen afgeronde vorm afbrak. */
  .zalen-raster { grid-template-columns: 1fr; gap: 12px; }
  .zaal-beelden { grid-template-columns: 1fr; }
  .kaart { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}