/* Kader: je naam en één beeld met brede marges. Alles in één kleine letter.
   Een serie toont één foto tegelijk, die je met pijlen doorbladert; op een
   telefoon staan de foto's onder elkaar. Niets wordt bijgesneden. */

.thema-kader {
  --kop-gewicht: 500;
  --kop-spatiering: 0.14em;
  --gat: 0px;
  --h1: 0.95rem;
  --h2: 0.95rem;
  --h3: 0.86rem;
  --blok-ruimte: clamp(56px, 8vw, 110px);
  font-size: 0.95rem;
}

.thema-kader h1, .thema-kader h2, .thema-kader h3 { text-transform: uppercase; line-height: 1.5; }

.thema-kader .kop { flex-direction: column; gap: 16px; padding-block: 34px 22px; text-align: center; }
.thema-kader .merk { align-items: center; gap: 6px; }
.thema-kader .merk-naam { font-size: 0.98rem; letter-spacing: 0.24em; text-transform: uppercase; }
.thema-kader .merk-sub { font-size: 0.78rem; }
.thema-kader .menu { justify-content: center; gap: 6px 28px; }
.thema-kader .menu a { font-size: 0.84rem; color: var(--gedempt); }
.thema-kader .menu a:hover, .thema-kader .menu a[aria-current] { color: var(--tekst); border-bottom-color: transparent; }

/* De omslag: één foto, heel in beeld, die het scherm niet vult. */
.thema-kader .blok.omslag { display: block; padding: clamp(12px, 2vw, 28px) var(--rand) 0; color: var(--tekst); min-height: 0; }
.thema-kader .omslag-beeld { background: transparent; max-width: 1100px; margin-inline: auto; }
.thema-kader .omslag-beeld::after { content: none; }
.thema-kader .omslag-volledig .omslag-beeld { height: max(340px, calc(100svh - 300px)); }
.thema-kader .omslag-groot .omslag-beeld { height: 60svh; }
.thema-kader .omslag-middel .omslag-beeld { height: 44svh; }
.thema-kader .omslag-dia img { object-fit: contain; }
.thema-kader .omslag-inhoud { padding: 26px 0 0; text-align: center; }
.thema-kader .omslag-kop { max-width: none; }
.thema-kader .omslag-tekst { margin: 6px auto 0; max-width: none; font-size: 0.86rem; color: var(--gedempt); }
.thema-kader .omslag .knop { margin-top: 16px; }

.thema-kader .blok-kop { text-align: center; }
.thema-kader .blok-kop .proza { margin-inline: auto; }

.thema-kader .series { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 44px 28px; }
.thema-kader .serie-beeld { aspect-ratio: 4 / 5; }
.thema-kader .serie-tegel:hover .serie-beeld img { transform: none; opacity: 0.86; }
.thema-kader .serie-info { text-align: center; padding-top: 14px; }
.thema-kader .serie-aantal { font-size: 0.8rem; }

/* De seriepagina: één beeld per scherm, zijwaarts. */
.thema-kader .serie-kop { text-align: center; padding-top: clamp(24px, 4vw, 48px); }
.thema-kader .serie-kop .proza { margin-inline: auto; max-width: 34rem; }
.thema-kader .serie-kop .proza p { margin-inline: auto; }
.thema-kader .serie-kop + .galerij-blok { padding-top: 28px; }
.thema-kader .blok > .galerij-strook {
  gap: 0; padding-inline: 0; padding-bottom: 0; margin-inline: calc(var(--rand) * -1);
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.thema-kader .galerij-strook::-webkit-scrollbar { display: none; }
.thema-kader .galerij-strook .galerij-item { flex: 0 0 100%; padding-inline: var(--rand); }
.thema-kader .galerij-strook .galerij-beeld {
  height: max(300px, calc(100svh - 330px)); aspect-ratio: auto; width: 100%; background: transparent;
}
.thema-kader .galerij-strook img { width: 100%; height: 100%; object-fit: contain; }
.thema-kader .galerij-item:hover img { transform: none; }

.thema-kader .knop {
  background: none; color: var(--tekst); border: 0; border-bottom: 1px solid currentColor; border-radius: 0;
  padding: 0 0 4px; font-size: 0.84rem; font-weight: 400;
}
.thema-kader .tarief { background: transparent; border: 1px solid var(--lijn); }
.thema-kader .tarief-prijs { font-size: 1.2rem; color: var(--tekst); }
.thema-kader .citaat-blok blockquote p { font-size: 1.15rem; letter-spacing: 0; text-transform: none; font-weight: 400; line-height: 1.6; }
.thema-kader .serie-nav a { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.14em; }
.thema-kader .voet { justify-content: center; text-align: center; flex-direction: column; align-items: center; }

@media (max-width: 820px) {
  .thema-kader .kop { flex-direction: row; text-align: left; padding-block: 20px; }
  .thema-kader .merk { align-items: flex-start; }
  .thema-kader .omslag-volledig .omslag-beeld { height: 56svh; }
  /* Op een telefoon de foto's onder elkaar. */
  .thema-kader .blok > .galerij-strook { display: grid; gap: 28px; overflow: visible; margin-inline: 0; }
  .thema-kader .galerij-strook .galerij-item { padding-inline: 0; }
  .thema-kader .galerij-strook .galerij-beeld { height: auto; max-width: none; }
  .thema-kader .galerij-strook img { height: auto; }
  .thema-kader .blader-balk { display: none; }
}