/* Passe-partout: foto's als ingelijste afdrukken aan een lichte wand.
   Vierkant gesneden met een schaduw, koppen in gespatieerde hoofdletters in
   de accentkleur, en de series als rijen die om en om links en rechts staan. */

.thema-passepartout {
  --kop-gewicht: 500;
  --kop-spatiering: 0.09em;
  --gat: 40px;
  --blok-ruimte: clamp(72px, 10vw, 150px);
  --h1: clamp(1.7rem, 3.2vw, 2.7rem);
  --h2: clamp(1.25rem, 2vw, 1.7rem);
  --h3: 1.02rem;
  --schaduw: 0 2px 4px rgba(0, 0, 0, 0.1), 0 20px 44px -14px rgba(0, 0, 0, 0.32);
  font-weight: 300;
}

.thema-passepartout h1, .thema-passepartout h2, .thema-passepartout h3 {
  text-transform: uppercase; line-height: 1.3; color: var(--accent);
}

.thema-passepartout .kop { padding-block: 18px; border-bottom: 1px solid var(--lijn); }
.thema-passepartout .merk-naam { font-size: 1rem; letter-spacing: 0.16em; text-transform: uppercase; }
.thema-passepartout .merk-sub { font-size: 0.78rem; }
.thema-passepartout .menu a { font-size: 0.86rem; color: var(--gedempt); }
.thema-passepartout .menu a:hover, .thema-passepartout .menu a[aria-current] { color: var(--tekst); }

/* De omslag: één foto met een schaduw, gecentreerd binnen ruime marges. */
.thema-passepartout .blok.omslag { display: block; padding: clamp(40px, 7vw, 96px) var(--rand) 0; color: var(--tekst); min-height: 0; }
.thema-passepartout .omslag-beeld { max-width: 780px; margin-inline: auto; aspect-ratio: 3 / 2; box-shadow: var(--schaduw); }
.thema-passepartout .omslag-middel .omslag-beeld { max-width: 560px; }
.thema-passepartout .omslag-volledig .omslag-beeld { max-width: 940px; }
.thema-passepartout .omslag-beeld::after { content: none; }
.thema-passepartout .omslag-inhoud { padding: clamp(36px, 5vw, 60px) 0 0; max-width: 40rem; margin-inline: auto; text-align: center; }
.thema-passepartout .omslag-kop { max-width: none; }
.thema-passepartout .omslag-tekst { max-width: none; margin-top: 14px; font-size: 1.05rem; color: var(--gedempt); }

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

.thema-passepartout .galerij-beeld, .thema-passepartout .foto-tekst-beeld img,
.thema-passepartout .foto-inhoud img, .thema-passepartout .nieuws-beeld { box-shadow: var(--schaduw); }
.thema-passepartout .galerij-item:hover img { transform: none; }

/* Series: per serie een rij met de vierkante omslag en de tekst ernaast. */
.thema-passepartout .series { display: block; }
.thema-passepartout .serie-tegel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center;
  gap: clamp(32px, 6vw, 88px); padding-block: clamp(28px, 4vw, 56px);
}
.thema-passepartout .serie-tegel:nth-child(even) .serie-beeld { order: 2; }
.thema-passepartout .serie-beeld { aspect-ratio: 1; width: 100%; max-width: 440px; justify-self: center; box-shadow: var(--schaduw); }
.thema-passepartout .serie-tegel:hover .serie-beeld img { transform: none; }
.thema-passepartout .serie-info { padding: 0; }
.thema-passepartout .serie-info h3 { font-size: var(--h2); }
.thema-passepartout .serie-tekst { display: block; margin-top: 14px; font-size: 1.02rem; color: var(--tekst); max-width: 44ch; }
.thema-passepartout .serie-aantal { margin-top: 14px; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; }

.thema-passepartout .serie-kop, .thema-passepartout .artikel-kop { text-align: center; }
.thema-passepartout .serie-kop > *, .thema-passepartout .artikel-kop > * { max-width: 44rem; }
.thema-passepartout .serie-kop .proza { color: var(--tekst); max-width: 44rem; }
.thema-passepartout .serie-kop .proza p { max-width: none; }
.thema-passepartout .kruimel a {
  display: inline-block; padding: 9px 20px; background: var(--vlak); color: var(--gedempt);
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
}

.thema-passepartout .knop {
  background: transparent; color: var(--accent); border-color: var(--accent);
  padding: 12px 26px; font-size: 0.76rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
}
.thema-passepartout .knop:hover { background: var(--accent); color: var(--op-accent); opacity: 1; }

.thema-passepartout .tarief { background: transparent; border: 1px solid var(--lijn); }
.thema-passepartout .citaat-blok blockquote p { font-size: clamp(1.2rem, 2.2vw, 1.7rem); text-transform: none; letter-spacing: 0; font-style: italic; line-height: 1.45; }
.thema-passepartout .contact-gegevens dt, .thema-passepartout .contact-formulier label, .thema-passepartout .serie-nav a span {
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.thema-passepartout .serie-nav a { text-transform: uppercase; color: var(--accent); }
.thema-passepartout .voet { justify-content: center; text-align: center; flex-direction: column; align-items: center; }

@media (max-width: 820px) {
  .thema-passepartout { --gat: 18px; }
  .thema-passepartout .serie-tegel { grid-template-columns: minmax(0, 1fr); gap: 22px; text-align: center; }
  .thema-passepartout .serie-tegel:nth-child(even) .serie-beeld { order: 0; }
  .thema-passepartout .serie-tekst { margin-inline: auto; }
}