/* Langs de lijn: de rubriek met artikelen. Het overzicht is een doorsnede van het sportpark, van het veld tot thuis: een getekend
   panorama met een label per plek, daaronder de grond in Forest Night met één witte geschilderde lijn, en de rode punt op die lijn
   bij de gekozen plek. In een artikel loopt dezelfde lijn mee in de kantlijn, met de rode punt die meezakt terwijl je leest.
   Alleen tokens uit tokens.css. */

/* ---------- Een vraag in het overzicht: kop, eerste zin van het antwoord, leestijd en module */
.ldl-stukken { display: grid; gap: 0; list-style: none; padding: 0; }
.ldl-stuk { position: relative; padding-block: 1.35rem 1.45rem; border-top: 1px solid var(--border); }
.ldl-stuk:last-child { border-bottom: 1px solid var(--border); }
.ldl-stuk__vraag { font-size: clamp(1.3rem, 1.15rem + .55vw, 1.6rem); line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }
.ldl-stuk__vraag a { color: var(--heading); text-decoration: none; }
/* de hele vraag is klikbaar; de kop houdt de echte link */
.ldl-stuk__vraag a::after { content: ""; position: absolute; inset: 0; }
.ldl-stuk:hover .ldl-stuk__vraag a, .ldl-stuk__vraag a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.ldl-stuk__vraag a:focus-visible { outline: none; }
.ldl-stuk:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.ldl-stuk__antwoord { margin-top: .55rem; color: var(--text); max-width: 34rem; }
.ldl-stuk__meta { margin-top: .6rem; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }

/* voor wie: een stip in de tint van de doelgroep, zoals op de filterknoppen */
.ldl-stuk__voor { white-space: nowrap; }
.ldl-stuk__voor::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem; border-radius: 50%; background: var(--aud-ink, var(--muted)); vertical-align: .04em; }
.ldl-stuk__voor[data-aud="trainer"] { --aud-ink: var(--aud-trainer-ink); }
.ldl-stuk__voor[data-aud="ouder"] { --aud-ink: var(--aud-ouder-ink); }
.ldl-stuk__voor[data-aud="club"] { --aud-ink: var(--aud-club-ink); }

/* ---------- De kop van het overzicht: titel en één zin links, voor wie rechts; de doorsnede sluit de kop af */
:root .ldl-top { padding-bottom: 0; border-bottom: 0; }
.ldl-top__kop { display: grid; gap: 1.5rem 3rem; align-items: end; }
@media (min-width: 60em) { .ldl-top__kop { grid-template-columns: minmax(0, 1fr) auto; } }
.ldl-top__club a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.ldl-voor { display: grid; gap: .55rem; }
.ldl-voor[hidden] { display: none; }
.ldl-voor__titel { font-weight: 700; font-size: .95rem; }

/* ---------- De doorsnede: het panorama, met eronder de grond in Forest Night en de witte lijn over de hele breedte */
.ldl-doorsnede { --grond: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); position: relative; margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.ldl-doorsnede::before { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: var(--grond); background: var(--inverse-bg); }
/* de lijn ligt aan de bovenkant van het gras, zoals de zijlijn vanaf de tribune, en niet in het midden als op een weg */
.ldl-doorsnede__lijn { position: absolute; z-index: 1; inset-inline: 0; bottom: calc(var(--grond) * .68 - 3px); height: 6px; background: var(--bg); transform-origin: left center; }
.ldl-doorsnede__baan { position: relative; z-index: 2; }
.ldl-doorsnede__beeld { position: relative; max-width: 2000px; margin-inline: auto; padding-bottom: var(--grond); }
.ldl-doorsnede__tekening { position: relative; }
.ldl-doorsnede__tekening img { display: block; width: 100%; height: auto; }

/* elke plek: een label aan een haarlijn, met een stip waar de lijn de tekening raakt (een busytown-label, in de lijnstijl van de site) */
.ldl-plekken { margin: 0; padding: 0; list-style: none; }
.ldl-plekken__plek { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.ldl-plek {
  position: absolute; left: 0; bottom: var(--lijn); transform: translateX(-50%);
  display: grid; gap: .1rem; padding: .4rem .8rem .45rem;
  border: 1.5px solid var(--heading); border-radius: var(--radius-btn); background: var(--bg);
  color: var(--heading); line-height: 1.15; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ldl-plek::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1.5px; height: var(--lijn); background: var(--heading); transform: translateX(-50%); }
.ldl-plek::before { content: ""; position: absolute; top: calc(100% + var(--lijn)); left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--heading); transform: translate(-50%, -50%); }
[data-rechts] .ldl-plek { transform: translateX(calc(-100% + 1.25rem)); }
[data-rechts] .ldl-plek::after, [data-rechts] .ldl-plek::before { left: calc(100% - 1.25rem); }
.ldl-plek__naam { font-weight: 700; font-size: .95rem; }
.ldl-plek__aantal { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
a.ldl-plek:hover .ldl-plek__naam { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
a.ldl-plek:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* de gekozen plek: ingedrukt in Pitch Green, zoals een filterknop; de haarlijn kleurt mee */
a.ldl-plek[aria-current="true"] { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
a.ldl-plek[aria-current="true"] .ldl-plek__aantal { color: var(--on-brand); }
a.ldl-plek[aria-current="true"]::after, a.ldl-plek[aria-current="true"]::before { background: var(--brand); }
/* een plek zonder stukken (nog, of voor deze doelgroep): een gestippeld label in Moss Muted */
.ldl-plek.is-leeg { border-style: dashed; border-color: var(--muted); background: color-mix(in srgb, var(--bg) 75%, transparent); color: var(--muted); }
.ldl-plek.is-leeg::after, .ldl-plek.is-leeg::before { background: var(--muted); }

/* de rode punt ligt op de witte lijn, onder de gekozen plek; zonder keuze aan het begin van de lijn */
.ldl-punt { position: absolute; z-index: 3; left: var(--punt, calc(1% + 14px)); bottom: calc(var(--grond) * .68); width: 20px; height: 20px; border-radius: 50%; background: var(--dot); transform: translate(-50%, 50%); transition: left .7s cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: no-preference) {
  /* één keer bij het laden: de lijn wordt getrokken, daarna komt de punt erop */
  .ldl-doorsnede__lijn { animation: ldl-trek 1.1s cubic-bezier(.16, 1, .3, 1) .1s both; }
  .ldl-punt { animation: ldl-punt .45s cubic-bezier(.16, 1, .3, 1) .85s both; }
}
@media (prefers-reduced-motion: reduce) { .ldl-punt { transition: none; } }
@keyframes ldl-trek { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ldl-punt { from { transform: translate(-50%, 50%) scale(0); } to { transform: translate(-50%, 50%) scale(1); } }

/* op een telefoon en een staande tablet schuift de doorsnede opzij, plek voor plek, op een vaste hoogte; de rand waar nog meer
   komt vervaagt, en twee knoppen op de grond stappen naar de vorige of volgende plek */
.ldl-stap { display: none; }
@media (max-width: 59.99em) {
  .ldl-doorsnede { --hoog: 17rem; }
  .ldl-doorsnede__baan {
    --vaag-l: 0px; --vaag-r: 56px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--vaag-l), #000 calc(100% - var(--vaag-r)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--vaag-l), #000 calc(100% - var(--vaag-r)), transparent);
  }
  .ldl-doorsnede__baan::-webkit-scrollbar { display: none; }
  .ldl-doorsnede__baan.is-begin { --vaag-l: 0px; }
  .ldl-doorsnede__baan:not(.is-begin) { --vaag-l: 56px; }
  .ldl-doorsnede__baan.is-eind { --vaag-r: 0px; }
  .ldl-stap:not([hidden]) { display: block; }
  .ldl-stap__knop {
    position: absolute; z-index: 4; bottom: calc(var(--grond) * .68); transform: translateY(50%);
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1.5px solid var(--heading); border-radius: 50%; background: var(--bg); color: var(--heading); cursor: pointer;
  }
  .ldl-stap__knop[data-richting="-1"] { left: max(.5rem, env(safe-area-inset-left)); }
  .ldl-stap__knop[data-richting="1"] { right: max(.5rem, env(safe-area-inset-right)); }
  .ldl-stap__knop:hover { border-color: var(--brand); color: var(--brand); }
  .ldl-stap__knop:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .ldl-stap__knop[disabled] { visibility: hidden; }
  .ldl-doorsnede__beeld { width: calc(var(--hoog) * 26 / 6); max-width: none; }
  .ldl-plekken__plek { scroll-snap-align: center; }
  .ldl-plek { padding: .3rem .65rem .35rem; }
  .ldl-plek__naam { font-size: .875rem; }
  .ldl-plek__aantal { font-size: .75rem; }
}

/* ---------- De index: per plek een rij, met een uitsnede van de tekening, de naam en de vragen */
/* scrolt de pagina na een keuze naar de index, dan blijft de grond met de punt net zichtbaar onder de kop */
.ldl-index { padding-block: clamp(2.25rem, 1.75rem + 2.5vw, 4rem) clamp(3rem, 2rem + 4vw, 5.5rem); scroll-margin-top: calc(clamp(2rem, 1.4rem + 1.6vw, 2.75rem) + 1rem); }
.ldl-index__stand { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; padding-bottom: 1rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ldl-index__stand [hidden] { display: none; }
.ldl-rij { display: grid; gap: 1.25rem 3rem; padding-block: 1.75rem 2.25rem; border-top: 1.5px solid var(--heading); }
.ldl-rij[hidden] { display: none; }
.ldl-rij__naam { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.ldl-rij__zin { margin-top: .35rem; color: var(--muted); }
.ldl-rij__beeld { display: none; }
.ldl-rij .ldl-stuk { padding-block: 0; border: 0; }
.ldl-rij .ldl-stuk[hidden] { display: none; }
@media (max-width: 59.99em) { .ldl-rij .ldl-stuk:not([hidden]) ~ .ldl-stuk:not([hidden]) { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--border); } }
@media (min-width: 48em) {
  /* een uitsnede van dezelfde doorsnede, alleen deze plek, op een strookje grond met de witte lijn. Alle uitsneden staan op één
     schaal (--s, rem per eenheid van de tekening), dus een huis is in elke rij even groot; ze staan onderaan op één grondlijn. */
  .ldl-rij__beeld { --s: .0243rem; display: flex; align-items: flex-end; height: calc(390 * var(--s) + 12px); margin-bottom: 1rem; }
  .ldl-rij__beeld span {
    position: relative; display: block; flex: none;
    width: calc(var(--beeld-w) * var(--s)); height: calc(var(--beeld-h) * var(--s));
    box-sizing: content-box; border-bottom: 12px solid var(--inverse-bg);
    background: url("../img/langs-de-lijn-doorsnede.svg") no-repeat;
    background-size: calc(2600 * var(--s)) auto;
    background-position: calc(var(--beeld-van) * var(--s) * -1) calc(var(--beeld-top) * var(--s) * -1);
  }
  .ldl-rij__beeld span::after { content: ""; position: absolute; inset-inline: 0; bottom: -7.5px; height: 3px; background: var(--bg); }
}
@media (min-width: 60em) {
  .ldl-rij { grid-template-columns: 15rem minmax(0, 1fr); }
  .ldl-rij .ldl-stukken { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; align-content: start; }
}
.ldl-index__leeg { padding-block: 1.75rem; border-top: 1.5px solid var(--heading); color: var(--muted); }
.ldl-index__leeg[hidden] { display: none; }

/* soort artikel in de lijsten: het eerste woord van de regel eronder, in Ink */
.ldl-stuk__soort { color: var(--heading); font-weight: 700; }

/* ---------- Het slot van het overzicht: van lezen naar doen, naar de modules van aanspeelpunt */
.ldl-slot { text-align: left; }
.ldl-slot .actions { margin-top: 1.5rem; }

/* ---------- Het artikel */
.ldl-pad ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; padding: 0; font-size: .92rem; color: var(--muted); }
.ldl-pad li + li::before { content: "/"; margin-right: .5rem; color: var(--muted); }
.ldl-pad a { color: var(--muted); text-underline-offset: .2em; }
.ldl-pad a:hover { color: var(--heading); }
.ldl-artikel__kop h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); text-wrap: balance; }
.ldl-artikel__kop .lead { color: var(--text); font-weight: 500; }
.ldl-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; color: var(--muted); font-size: .92rem; font-variant-numeric: tabular-nums; }
/* de soort artikel: een label met een Ink-rand, naast de doelgroep */
.ldl-soort { display: inline-flex; align-items: center; padding: .1rem .55rem; border: 1.5px solid var(--heading); border-radius: var(--radius-tag); color: var(--heading); font-weight: 700; }

/* de leeskolom met links de zijlijn; op brede schermen rechts de inhoudsopgave */
.ldl-lees { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: clamp(1rem, .5rem + 2vw, 2.5rem); padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.ldl-lijn { position: relative; grid-row: 1 / 3; background: var(--accent); border-radius: 3px; }
.ldl-lijn::before { content: ""; position: absolute; inset-block: 0; left: 8px; width: 5px; background: var(--bg); }
/* de rode punt blijft op de lijn halverwege het scherm staan terwijl je leest, en stopt aan het eind van het stuk */
.ldl-lijn__punt { position: sticky; top: 50vh; display: block; width: 16px; height: 16px; margin: 8px 0 8px 3px; border-radius: 50%; background: var(--dot); }
.ldl-inhoud { grid-column: 2; margin-bottom: 2rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-card); }
.ldl-inhoud h2 { font-size: .95rem; font-weight: 700; letter-spacing: 0; }
.ldl-inhoud ol { margin-top: .5rem; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: .95rem; }
.ldl-inhoud a { color: var(--link); text-underline-offset: .2em; }
.ldl-tekst { grid-column: 2; max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem); line-height: 1.65; }
.ldl-tekst > * + * { margin-top: 1.1em; }
.ldl-tekst h2 { margin-top: 2.4em; font-size: clamp(1.45rem, 1.25rem + .8vw, 1.9rem); line-height: 1.15; }
.ldl-tekst h2 + * { margin-top: .7em; }
.ldl-tekst ul { padding-left: 1.25em; }
.ldl-tekst li + li { margin-top: .45em; }
.ldl-tekst a { color: var(--link); text-underline-offset: .2em; }
.ldl-bron { font-size: .92rem; color: var(--muted); }
/* op een telefoon loopt de lijn in de linkerrand, zodat de tekst de hele breedte houdt */
@media (max-width: 47.99em) {
  .ldl-lees { position: relative; grid-template-columns: minmax(0, 1fr); }
  .ldl-lijn { position: absolute; left: -14px; top: clamp(2.5rem, 2rem + 2vw, 4rem); bottom: clamp(2.5rem, 2rem + 2vw, 4rem); width: 11px; border-radius: 2px; }
  .ldl-lijn::before { left: 4px; width: 3px; }
  .ldl-lijn__punt { width: 11px; height: 11px; margin: 6px 0; }
  .ldl-inhoud, .ldl-tekst { grid-column: 1; }
}
@media (min-width: 64em) {
  .ldl-lees { grid-template-columns: 22px minmax(0, 40rem) 1fr; }
  /* onder de vaste kop van de site, die js/site.js meet als --header-h */
  .ldl-inhoud { grid-column: 3; grid-row: 1; align-self: start; position: sticky; top: calc(var(--header-h, 4.5rem) + 1.75rem); margin: 0 0 0 auto; max-width: 17rem; }
  .ldl-tekst { grid-row: 1 / 3; }
}

/* een praktijkverhaal is een schets: dat staat erboven, in een gestippeld kader in Moss Muted, net als een plek zonder artikelen */
.ldl-schets { padding: .7rem 1rem; border: 1.5px dashed var(--muted); border-radius: var(--radius-btn); color: var(--muted); font-size: .95rem; line-height: 1.5; }
.ldl-tekst .ldl-bron + .ldl-bron { margin-top: 2em; }

/* na het artikel: van lezen naar doen, en de modules die erbij passen */
.ldl-verder { display: grid; gap: 2rem 4rem; }
@media (min-width: 60em) { .ldl-verder { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); align-items: start; } }
.ldl-verder__tekst h2 { font-size: clamp(1.45rem, 1.25rem + .8vw, 1.9rem); }
.ldl-verder__tekst p { margin-top: .6rem; max-width: 34rem; }
.ldl-verder__tekst .actions { margin-top: 1.25rem; }
.ldl-verder__modules h3 { font-size: 1rem; }
.ldl-verder__modules ul { margin-top: .6rem; padding: 0; list-style: none; border-top: 1.5px solid var(--heading); }
.ldl-verder__modules li { display: grid; gap: .1rem; padding-block: .7rem; border-bottom: 1px solid var(--border); }
.ldl-verder__modules a { color: var(--heading); font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.ldl-verder__modules a:hover { text-decoration-thickness: 2px; }
.ldl-verder__modules span { color: var(--muted); font-size: .9rem; }
.ldl-meer h2 { font-size: clamp(1.45rem, 1.25rem + .8vw, 1.9rem); }
.ldl-meer .ldl-stukken { margin-top: 1rem; }
@media (min-width: 60em) { .ldl-meer .ldl-stukken { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } .ldl-meer .ldl-stuk:nth-last-child(2) { border-bottom: 1px solid var(--border); } }

@media print {
  .ldl-lijn, .ldl-inhoud, .ldl-verder, .ldl-meer, .ldl-doorsnede, .ldl-voor, .ldl-rij__beeld { display: none; }
  .ldl-lees { display: block; }
}