/* Opmaak voor de editiepagina's: rustig lezen, ruimte voor foto's.
   Bewust anders dan de aftelpagina, en gelijk aan lademisa.nl — zelfde
   schreefletter, zelfde gebroken wit, zelfde brede koppen.
   Paden hierin zijn relatief aan deze map (assets/), niet aan de pagina. */

@font-face {
  font-family: "Serif";
  src: url("fonts/serif-recht.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Serif";
  src: url("fonts/serif-cursief.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --papier:   #f2f1ee;
  --inkt:     rgba(0, 0, 0, 0.84);
  --gedempt:  rgba(0, 0, 0, 0.55);
  --lijn:     rgba(0, 0, 0, 0.13);
  --roze:     #d3509a;
  --roze-diep:#b13a7f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: "Serif", "Source Serif Pro", Georgia, serif;
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.buiten {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 4rem;
}

/* ---- balk bovenaan ---- */

.balk {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 2rem;
}

.balk img { height: 46px; width: auto; display: block; }

.balk nav {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.balk nav a, .balk .knopje {
  color: var(--inkt);
  text-decoration: none;
  font-size: 1.05rem;
}

.balk nav a:hover, .balk nav a:focus-visible { color: var(--roze-diep); }
.balk nav a[aria-current="page"], .balk nav .nu { color: var(--roze); font-size: 1.05rem; }

/* Volgorde op een breed scherm: logo, jaartallen, dan de knop. In de HTML staat
   de knop vóór de nav, zodat hij op een smal scherm bij het logo blijft. */
.balk nav { order: 2; }
.balk .knopje { order: 3; }

.balk .knopje {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2rem;
  padding: 0.5rem 1.4rem;
}

.balk .knopje:hover { background: rgba(211, 80, 154, 0.12); }

/* ---- koppen en tekst ---- */

h1 {
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3.25rem);
  line-height: 1.15;
  margin: 0 0 0.4rem;
}

.onderkop {
  font-style: italic;
  color: var(--gedempt);
  font-size: 1.2rem;
  margin: 0 0 2.5rem;
}

h2 {
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  margin: 3rem 0 1rem;
}

h3 {
  font-weight: 600;
  font-size: 1.05rem;
  margin: 2rem 0 0.5rem;
}

p { margin: 0 0 1.2rem; }
a { color: var(--roze-diep); }

/* Roze kader om een alinea die eruit mag springen: een oproep, een waarschuwing,
   iets wat je niet wilt dat mensen overslaan. Zet er class="kader" op.
   `nog-schrijven` ziet er hetzelfde uit maar betekent iets anders: die tekst moet
   nog geschreven worden. Apart gehouden, zodat je ze uit elkaar kunt houden. */
/* Een link die in een eigen tabblad opent krijgt een schuin pijltje, zodat je
   dat ziet vóórdat je klikt. Het pijltje hoort bij de link en niet in de tekst,
   dus het staat hier en niet in de HTML. */
.extern::after {
  /* Vaste spatie plus pijl, zodat de onderstreping doorloopt en het pijltje
     nooit alleen op de volgende regel belandt.

     Source Serif heeft dit pijlteken niet, dus een iPhone valt terug op zijn
     emoji-lettertype en tekent er een blauw icoontje. Twee dingen houden dat
     tegen: FE0E ("teken dit als letter") en een schreefloze letter erbij, die
     het teken wél heeft. Bij onlinejachthond speelt dit niet, want daar is de
     tekst zelf al schreefloos en staat de pijl gewoon in de linktekst. */
  content: "\A0\2197\FE0E";
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.85em;
  /* De pijl is dun naast de tekst. Vet maken helpt niet altijd — niet elke
     letter heeft dit teken in een vette variant — dus trekken we de lijn zelf
     iets dikker. Zelfde truc als bij de krijtletter op de afteller. */
  -webkit-text-stroke: 0.045em currentColor;
}

.kader,
.nog-schrijven {
  border-left: 4px solid var(--roze);
  background: rgba(211, 80, 154, 0.11);
  padding: 1.1rem 1.4rem;
  color: var(--inkt);
  margin: 0 0 1.5rem;
}

.nog-schrijven { color: var(--gedempt); font-style: italic; }

/* Een kader mag ook om een kop met tekst heen. De buitenste marges eruit,
   anders staat er een gat tussen de rand en de inhoud. */
.kader > :first-child { margin-top: 0; }
.kader > :last-child { margin-bottom: 0; }
.kader h2 { margin-top: 0; }

/* ---- foto's ---- */

figure { margin: 2rem 0; }
figure img { width: 100%; height: auto; display: block; }

/* Zelfde behandeling als een bijschrift onder een foto, maar dan als losse
   alinea — bijvoorbeeld boven een rij filmpjes. */
.bijschrift {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--gedempt);
  margin-bottom: 0.8rem;
}

figcaption {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--gedempt);
  margin-top: 0.5rem;
}

/* Plek waar nog een foto moet komen. */
.foto-plek {
  border: 2px dashed rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.02);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gedempt);
  font-style: italic;
  text-align: center;
  padding: 1rem;
}

.fotos-naast-elkaar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.fotos-naast-elkaar figure { margin: 0; }

/* Foto's van dezelfde dag komen uit verschillende toestellen en hebben dus
   verschillende verhoudingen. Ze op één maat bijsnijden houdt de rij rustig. */
.fotos-naast-elkaar img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Iets naar boven bijsnijden in plaats van precies door het midden: bij een
     staande foto sneuvelt anders net de bovenkant van de hondenkop. Krapper dan
     dit kan niet zonder de oren te raken. Bij liggende foto's snijdt hij aan de
     zijkanten en verandert dit niets. */
  object-position: center 40%;
}

/* Gecentreerd; op een telefoon vult hij toch de breedte, dus daar verandert niets. */
.portret { max-width: 24rem; margin: 2rem auto 2.5rem; }
.portret figcaption { text-align: center; }
.portret img { width: 100%; height: auto; display: block; }

.films { display: grid; gap: 1rem; margin: 2rem 0; }
.films video { width: 100%; height: auto; display: block; }

/* Staand gefilmd met de telefoon, dus drie naast elkaar in plaats van twee. */
@media (min-width: 34rem) {
  .films { grid-template-columns: repeat(3, 1fr); }
}

/* Opvallende verwijzing naar de teller. */
.oproep {
  display: inline-block;
  background: var(--roze);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.8rem 2rem;
  border-radius: 0.4rem;
  margin-top: 0.5rem;
}

.oproep:hover, .oproep:focus-visible { background: var(--roze-diep); color: #fff; }

/* ---- feiten ---- */

.feiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem 2rem;
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  padding: 1.5rem 0;
  margin: 2rem 0;
}

.feiten dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gedempt);
}

.feiten dd { margin: 0.15rem 0 0; }
.feiten div { min-width: 0; }

/* ---- uitslagen: alleen het podium ---- */

/* De hele lijst overtypen op de pagina leest niet; die staat in de PDF. Hier
   per klasse een klein tabelletje, naast elkaar. Bewust strakker en kleiner dan
   de rest van de pagina — dit zijn cijfers, geen leesvoer. */
.podia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem 2rem;
  margin: 1.5rem 0 0;
}

table.podium {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.35;
}

/* De klassenaam is de tabelkop zelf: scheelt een losse <h3> boven elk blokje. */
table.podium caption {
  text-align: left;
  font-weight: 700;
  font-size: 1rem;
  color: var(--inkt);
  padding-bottom: 0.35rem;
  margin-bottom: 0.4rem;
  border-bottom: 2px solid var(--roze);
}

table.podium td {
  padding: 0.4rem 0.4rem 0.4rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  vertical-align: top;
}

table.podium tr:last-child td { border-bottom: none; }
table.podium .plaats { width: 1.5rem; color: var(--roze); font-weight: 700; }
table.podium .hond { display: block; color: var(--gedempt); font-size: 0.85rem; }
table.podium .punten { text-align: right; white-space: nowrap; color: var(--gedempt); }

.downloads { margin-top: 2rem; }
.downloads a { display: block; margin-bottom: 0.5rem; }

/* ---- overzicht van edities ---- */

.editie-lijst { display: grid; gap: 3rem; margin-top: 2.5rem; }

.editie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: start;
}

.editie h2 { margin: 0 0 0.3rem; font-style: normal; }
.editie h2 a { color: var(--inkt); text-decoration: none; }
.editie h2 a:hover { color: var(--roze-diep); }
.editie .wanneer { color: var(--gedempt); font-style: italic; margin-bottom: 0.8rem; }
.editie .foto-plek { aspect-ratio: 4 / 3; }

/* ---- voet ---- */

.voet {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--lijn);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
}

.voet img { height: 38px; width: auto; display: block; }
.voet a { color: var(--gedempt); text-decoration: none; }
.voet a:hover, .voet a:focus-visible { color: var(--roze); }

@media (max-width: 44rem) {
  .editie { grid-template-columns: 1fr; gap: 1rem; }
  .balk { gap: 1rem; }

  /* Op een telefoon past het niet op één regel. Dan liever twee nette regels:
     logo links met de knop er rechts naast, en de jaartallen eronder. Anders
     valt de knop als losse regel tussen de jaartallen en de titel. */
  .balk .knopje { order: 1; margin-left: auto; }
  .balk nav { order: 2; gap: 1.1rem; width: 100%; margin-left: 0; }
  .balk nav a { font-size: 1rem; }
}