/* Journalartikel: kop, breed generatief vak, smalle tekstkolom. */

.artikel__kop { align-items: end; }
.artikel__wie { font-size: 15px; line-height: 1.5; justify-self: end; min-width: 14em; }
.artikel__wie .label { display: block; margin-top: 10px; }
.artikel__wie .label:first-child { margin-top: 0; }
.artikel__beeld { aspect-ratio: 16 / 5; }

.artikel__tekst {
  max-width: 40em; margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--rand) clamp(32px, 4vw, 56px);
  font-size: 18px; line-height: 1.65;
}
.artikel__tekst > p { margin: 0 0 1.1em; }
.artikel__tekst h2 { font-size: 15px; letter-spacing: .08em; margin: 2.6em 0 1em; }
.artikel__tekst ul { margin: 0 0 1.2em; padding: 0; list-style: none; border-top: 1px solid var(--lijn); }
.artikel__tekst li { padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.artikel__tekst b { font-weight: 500; }
.artikel__vraag { margin: 1.4em 0 1.6em; grid-template-columns: 1fr; }

.artikel__verder {
  display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between;
  padding: 28px var(--rand); border-top: 1px solid var(--lijn);
}
.artikel__verder .knop--zwart { margin-top: 0; }

@media (max-width: 820px) {
  .artikel__wie { justify-self: start; }
  .artikel__beeld { aspect-ratio: 4 / 3; }
  .artikel__tekst { font-size: 17px; }
}

/* Prompt: regels en witregels blijven staan, zodat je hem zo kunt kopiëren. */
.probeer__vraag.prompt { white-space: pre-wrap; }
.artikel__tekst .probeer { margin-bottom: 2em; }

/* Bronnen onder een Actueel-stuk. */
.artikel__bronnen { font-size: 15px; }
.artikel__bronnen a { color: var(--inkt); text-underline-offset: 3px; overflow-wrap: anywhere; }
.artikel__tekst .probeer__knop { justify-self: start; }

/* Foto bovenaan een stuk: zwart-wit, met de naam van de fotograaf in de hoek. */
.artikel__foto { position: relative; margin: 0; overflow: hidden; background: var(--zwart); }
.artikel__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.artikel__foto figcaption {
  position: absolute; right: 0; bottom: 0; padding: 6px 10px; background: var(--zwart); color: var(--op-zwart);
  font-family: var(--mono); font-size: 11px;
}
.artikel__foto figcaption a { color: inherit; text-underline-offset: 2px; }