/* Reportage: een project als artikel. Een grote titel, een inleiding om te
   lezen en de foto's op volle kolombreedte, elk met een bijschrift. */

.thema-reportage {
  --kop-gewicht: 560;
  --kop-spatiering: -0.03em;
  --gat: 0px;
  --h1: clamp(2.6rem, 6.4vw, 5.4rem);
  --h2: clamp(1.8rem, 3.4vw, 2.8rem);
  font-size: 1.14rem;
}

.thema-reportage h1 { line-height: 1; }

.thema-reportage .kop { padding-block: 20px; margin-inline: var(--rand); padding-inline: 0; border-bottom: 1px solid var(--tekst); }
.thema-reportage .merk-naam { font-size: 1.35rem; font-weight: 640; }
.thema-reportage .merk-sub { font-style: italic; font-size: 0.95rem; }
.thema-reportage .menu a { font-size: 1rem; }
.thema-reportage .menu a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }

/* De omslag: een breed beeld, met de titel en de inleiding eronder. */
.thema-reportage .blok.omslag { display: block; color: var(--tekst); min-height: 0; padding: 0; }
.thema-reportage .omslag-beeld::after { content: none; }
.thema-reportage .omslag-volledig .omslag-beeld { height: 70svh; }
.thema-reportage .omslag-groot .omslag-beeld { height: 58svh; }
.thema-reportage .omslag-middel .omslag-beeld { height: 42svh; }
.thema-reportage .omslag-inhoud { padding: clamp(24px, 4vw, 48px) var(--rand) 0; max-width: calc(var(--breed) + 2 * var(--rand)); margin-inline: auto; }
.thema-reportage .omslag-kop { max-width: 16ch; }
.thema-reportage .omslag-tekst { font-size: 1.32rem; line-height: 1.45; color: var(--gedempt); max-width: 44ch; }

.thema-reportage .blok-kop { padding-top: 16px; border-top: 3px solid var(--tekst); }

/* Projecten als rijen: beeld, titel en één alinea. */
.thema-reportage .series { display: block; }
.thema-reportage .serie-tegel {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start;
  gap: clamp(20px, 4vw, 56px); padding-block: 28px; border-top: 1px solid var(--lijn);
}
.thema-reportage .serie-tegel:first-child { border-top: 0; padding-top: 0; }
.thema-reportage .serie-beeld { aspect-ratio: 3 / 2; }
.thema-reportage .serie-info { padding: 0; }
.thema-reportage .serie-info h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; }
.thema-reportage .serie-tegel:hover h3 { color: var(--accent); }
.thema-reportage .serie-tekst { display: block; margin-top: 12px; font-size: 1.08rem; color: var(--tekst); max-width: 52ch; }
.thema-reportage .serie-aantal { margin-top: 12px; font-family: system-ui, sans-serif; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* De seriepagina leest als een artikel. */
.thema-reportage .serie-kop > *, .thema-reportage .artikel-kop > * { max-width: 1040px; }
.thema-reportage .serie-kop .proza { color: var(--tekst); font-size: 1.22rem; line-height: 1.6; margin-top: 28px; }
.thema-reportage .serie-kop .proza p { max-width: 62ch; }
.thema-reportage .serie-kop .proza p:first-child { font-size: 1.4rem; line-height: 1.45; color: var(--gedempt); }
.thema-reportage .galerij-kolom .galerij-onderschrift { display: block; padding-top: 12px; }
.thema-reportage .galerij-kolom .galerij-titel {
  display: block; padding-left: 12px; border-left: 2px solid var(--accent);
  font-style: italic; font-size: 1rem; color: var(--gedempt);
}
.thema-reportage .galerij-item:hover img { transform: none; }
.thema-reportage .foto-blok figcaption { font-style: italic; padding-left: 12px; border-left: 2px solid var(--accent); }
.thema-reportage .foto-volledig figcaption { margin-left: var(--rand); padding-inline: 12px 0; }

.thema-reportage .kruimel, .thema-reportage .serie-nav a span, .thema-reportage .contact-gegevens dt,
.thema-reportage .contact-formulier label, .thema-reportage .nieuws-info time, .thema-reportage .artikel-kop time {
  font-family: system-ui, sans-serif; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.thema-reportage .knop { border-radius: 0; font-family: system-ui, sans-serif; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; }
.thema-reportage .tarief { background: transparent; border-top: 3px solid var(--tekst); padding-inline: 0; }
.thema-reportage .citaat-blok blockquote { text-align: left; margin-inline: 0; max-width: 46rem; }
.thema-reportage .citaat-blok blockquote p { font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.15; }
.thema-reportage .voet { margin-inline: var(--rand); padding-inline: 0; border-top: 1px solid var(--tekst); }

@media (max-width: 820px) {
  .thema-reportage .serie-tegel { grid-template-columns: minmax(0, 1fr); }
  .thema-reportage .omslag-volledig .omslag-beeld, .thema-reportage .omslag-groot .omslag-beeld { height: 48svh; }
}