/* Horizon: brede beelden en grote, dunne letters. De omslag vult het scherm,
   series staan als panorama's onder elkaar en koppen staan links van hun
   toelichting. */

.thema-horizon {
  --kop-gewicht: 300;
  --kop-spatiering: -0.012em;
  --gat: 16px;
  --h1: clamp(3rem, 7.4vw, 6.6rem);
  --h2: clamp(2.3rem, 4.8vw, 4.2rem);
  --h3: clamp(1.5rem, 2.4vw, 2rem);
  --rij-hoogte: 320px;
}

.thema-horizon h1, .thema-horizon h2 { line-height: 1; }

.thema-horizon .kop { padding-block: 30px; }
.thema-horizon .merk-naam { font-size: 1.7rem; font-weight: 400; letter-spacing: 0; }
.thema-horizon .merk-sub, .thema-horizon .menu a {
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase;
}
.thema-horizon .menu { gap: 6px 38px; }
.thema-horizon .menu a { padding-bottom: 6px; }

.thema-horizon .omslag-beeld::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.36));
}
.thema-horizon .omslag-inhoud { padding-bottom: clamp(40px, 7vw, 110px); }
.thema-horizon .omslag-kop { font-size: clamp(3.4rem, 11vw, 11rem); line-height: 0.9; max-width: 12ch; }
.thema-horizon .omslag-tekst { margin-top: 26px; font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; max-width: 60ch; }

.thema-horizon .knop {
  background: transparent; color: inherit; border-color: currentColor; border-radius: 0;
  padding: 17px 36px; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.thema-horizon .knop:hover { background: var(--accent); border-color: var(--accent); color: var(--op-accent); opacity: 1; }

.thema-horizon .blok-kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(28px, 6vw, 96px); align-items: end; }
.thema-horizon .blok-kop .proza { margin-top: 0; padding-bottom: 0.5em; }

/* Series als panorama's, met de titel over het beeld. */
.thema-horizon .series-blok > .series { grid-template-columns: minmax(0, 1fr); gap: var(--gat); max-width: none; margin-inline: calc(var(--rand) * -1); }
.thema-horizon .serie-tegel { position: relative; color: #fff; }
.thema-horizon .serie-beeld { aspect-ratio: 21 / 8; border-radius: 0; }
.thema-horizon .serie-beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 62%); transition: opacity 0.5s; }
.thema-horizon .serie-info {
  position: absolute; inset: 0; padding: var(--rand);
  display: flex; flex-direction: column; justify-content: center;
}
.thema-horizon .serie-nr { display: block; font-size: 0.72rem; letter-spacing: 0.24em; margin-bottom: 12px; color: rgba(255, 255, 255, 0.8); }
.thema-horizon .serie-info h3 { font-size: clamp(2.2rem, 6vw, 5.6rem); font-weight: 300; line-height: 0.95; }
.thema-horizon .serie-info p { margin-top: 14px; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }

.thema-horizon .galerij-strook .galerij-item { height: clamp(320px, 70svh, 760px); }

.thema-horizon .citaat-blok blockquote { max-width: 62rem; }
.thema-horizon .citaat-blok blockquote p { font-style: italic; font-size: clamp(1.9rem, 4.4vw, 3.8rem); line-height: 1.12; }
.thema-horizon .citaat-blok footer, .thema-horizon .contact-gegevens dt, .thema-horizon .contact-formulier label,
.thema-horizon .serie-nav a span, .thema-horizon .serie-kop .kruimel, .thema-horizon .foto-blok figcaption {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
}

.thema-horizon .tarief { background: transparent; border-top: 1px solid var(--tekst); padding-inline: 0; }
.thema-horizon .tarief h3 { font-size: 2rem; }
.thema-horizon .tarief-prijs { font-size: 1.1rem; font-family: var(--font-tekst); letter-spacing: 0.08em; }

.thema-horizon .contact-formulier input, .thema-horizon .contact-formulier textarea { border-width: 0 0 1px; padding-inline: 0; }

@media (max-width: 820px) {
  .thema-horizon .blok-kop { grid-template-columns: minmax(0, 1fr); }
  .thema-horizon .serie-beeld { aspect-ratio: 16 / 11; }
  .thema-horizon .menu a { letter-spacing: var(--kop-spatiering); text-transform: none; }
}