/* Over ons (over.html): wat er niet in het schrift van de trainer staat. Bovenaan het trainingsschrift van een week, met in de
   kantlijn wat er mist; daaronder de bladzijde voor de mentale kant, de doelen voor volgend seizoen, door wie en de demo.
   Alleen tokens uit tokens.css. De vier onderdelen zijn .anatomy uit modules.css. */

.over-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Kop ---------- */
.over-hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 60em) { .over-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.over-hero__kop { display: grid; gap: 1.1rem; max-width: 50rem; }
/* de tekening op een pastelvlak, zoals het beeld van een module */
.over-hero__beeld { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--radius-card); background: var(--aud-trainer); overflow: hidden; }
.over-hero__beeld img { width: 84%; height: auto; margin-top: 8%; }
@media (max-width: 59.99em) { .over-hero__beeld { max-width: 26rem; } }
/* op de telefoon gaat het schrift voor: de tekening valt weg, zodat de eerste aantekening in beeld staat */
@media (max-width: 47.99em) { .over-hero__beeld { display: none; } }
.over-hero h1 { max-width: 18ch; font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.2rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.over-hero .lead { max-width: 40rem; }

/* ---------- Het schrift: ruitjespapier, een inktrand, de aantekeningen links en de kantlijn rechts ---------- */
/* De kaft: een gekleurd vlak dat rechtsonder onder het schrift uitsteekt, zoals het vlak onder de video op de voorpagina */
.kaft { position: relative; margin-top: clamp(1.75rem, 4vw, 2.75rem); padding: 0 clamp(.75rem, 2.5vw, 2rem) clamp(.75rem, 2.5vw, 2rem) 0; }
.kaft::before { content: ""; position: absolute; top: clamp(1.5rem, 5vw, 4rem); left: clamp(1.5rem, 6vw, 5rem); right: 0; bottom: 0; border-radius: 28px; background: var(--aud-trainer); }
.kaft--club::before { background: var(--aud-club); }
.kaft > .schrift { position: relative; margin-top: 0; }
.schrift {
  --kant: 19rem; --tussen: 3rem; --pad: clamp(1.25rem, 3vw, 2.25rem);
  position: relative; margin-top: clamp(1.75rem, 4vw, 2.75rem); padding: var(--pad);
  border: 1.5px solid var(--heading); border-radius: var(--radius-card);
  background-color: var(--bg);
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px), linear-gradient(to right, transparent calc(100% - var(--kant) - var(--tussen) / 2 - var(--pad)), var(--accent) 0);
  background-size: 1.6rem 1.6rem, 1.6rem 1.6rem, 100% 100%; background-position: -1px -1px, -1px -1px, 0 0;
}
.schrift--doelen { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 1.6rem 1.6rem; }
.schrift__kop { padding-bottom: .7rem; border-bottom: 1.5px solid var(--heading); font-size: clamp(1.1rem, 1.02rem + .3vw, 1.25rem); font-weight: 700; color: var(--heading); }
.schrift__regels { position: relative; }
.schrift__regels::before { content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--kant) + var(--tussen) / 2); width: 2px; background: var(--brand); }
.regel { display: grid; grid-template-columns: minmax(0, 1fr) var(--kant); column-gap: var(--tussen); padding-block: 1.15rem; border-bottom: 1px solid var(--border-hover); }
.regel:last-child { border-bottom: 0; padding-bottom: .25rem; }
.regel__noot { display: grid; gap: .45rem; align-content: start; font-size: clamp(1.05rem, 1rem + .25vw, 1.15rem); color: var(--heading); }
.regel__datum { font-size: .9rem; font-weight: 700; color: var(--muted); }
.regel__schets { display: block; width: 100%; max-width: 15rem; height: auto; }
.regel__kant { position: relative; display: grid; gap: .4rem; align-content: start; font-weight: 600; line-height: 1.4; color: var(--heading); }
.regel__pijl { position: absolute; top: .15rem; left: calc(var(--tussen) / -2 - 1.6rem); width: 2.75rem; height: 1.5rem; color: var(--brand); }
.regel__module { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .5rem; font-size: .88rem; font-weight: 500; color: var(--muted); }
.regel__module a { color: var(--link); }
/* op het muntgroene vlak van de kantlijn een witte pil, zodat de tint van de doelgroep blijft opvallen */
.regel__kant .pil { background: var(--bg); }
#pijl path { stroke-dasharray: 1; stroke-dashoffset: var(--teken, 0); }

.pil { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; padding: .22rem .6rem; border-radius: 999px; background: var(--aud-tint, var(--aud-basis)); color: var(--aud-ink, var(--aud-basis-ink)); font-size: .875rem; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pil[data-aud="trainer"] { --aud-tint: var(--aud-trainer); --aud-ink: var(--aud-trainer-ink); }
.pil[data-aud="ouder"] { --aud-tint: var(--aud-ouder); --aud-ink: var(--aud-ouder-ink); }
.pil[data-aud="club"] { --aud-tint: var(--aud-club); --aud-ink: var(--aud-club-ink); }

/* Met script: een vraag in de kantlijn verschijnt pas als de regel in beeld komt (over.js) */
.schrift.is-klaar .regel:not(.is-gezien) .regel__kant { opacity: 0; }

/* Telefoon en smal: de vraag staat onder de aantekening, de pijl wijst omhoog naar de aantekening */
@media (max-width: 47.99em) {
  .schrift { --kant: auto; }
  .schrift__regels::before { display: none; }
  .regel { grid-template-columns: 1fr; row-gap: .8rem; }
  .schrift { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 1.6rem 1.6rem; }
  .regel__kant { padding: .8rem .9rem .85rem 2.6rem; border-radius: 10px; background: var(--accent); }
  .regel__pijl { left: .45rem; top: .75rem; width: 1.8rem; height: 1rem; transform: rotate(90deg); }
}

/* ---------- Een bladzijde voor de mentale kant ---------- */
.over-grens { display: grid; gap: 1.1rem; justify-items: start; max-width: 46rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--border); }
.over-grens strong { color: var(--heading); }

/* ---------- Volgend seizoen staat het er wel in ---------- */
.over-doelen { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 60em) { .over-doelen { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.over-doelen__tekst { max-width: 34rem; }
.over-doelen__tekst h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); text-wrap: balance; }
.over-doelen__wens { color: var(--muted); }
.schrift--doelen { margin-top: 0; }
.doelen { display: grid; }
.doelen li { position: relative; padding: .8rem 0 .8rem 2rem; border-bottom: 1px solid var(--border-hover); font-size: clamp(1.05rem, 1rem + .25vw, 1.15rem); color: var(--heading); }
.doelen li:last-child { border-bottom: 0; padding-bottom: .2rem; }
.doelen li.is-mentaal { font-weight: 700; }
.doelen svg { position: absolute; left: 0; top: .95rem; width: 1.3rem; height: 1.3rem; color: var(--brand); }

/* ---------- Door wie ---------- */
.over-makers { display: grid; gap: 2rem; }
@media (min-width: 48em) { .over-makers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); } }
.over-maker { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; padding-top: 1.5rem; border-top: 1px solid var(--border); }
@media (max-width: 29.99em) { .over-maker { grid-template-columns: 1fr; } }
.over-maker__portret { width: clamp(5rem, 4rem + 2vw, 6rem); aspect-ratio: 1; border-radius: var(--radius-card); background: var(--aud-club) url("../img/zijlijn-maker-psycholoog.svg") center bottom / auto 80% no-repeat; }
.over-maker--trainer .over-maker__portret { background-color: var(--aud-ambitie); background-image: url("../img/zijlijn-maker-voetballer.svg"); }
.over-maker__tekst { display: grid; gap: .45rem; }
.over-maker h3 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.4rem); }
.over-maker__rol { font-size: .92rem; font-weight: 600; color: var(--muted); }
.over-maker__tekst > p:last-child { max-width: 34rem; margin-top: .3rem; color: var(--muted); }

/* ---------- Slot ---------- */
.over-slot__blok { grid-template-columns: minmax(0, 1fr); gap: 2rem 3rem; align-items: center; padding: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 60em) { .over-slot__blok { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.over-slot__tekst { display: grid; gap: 1.1rem; justify-items: start; }
.over-slot h2 { max-width: 15ch; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.over-slot .actions { margin-top: .4rem; }
.over-slot__beeld { width: 100%; max-width: 26rem; justify-self: center; }

@media print {
  .schrift { background-image: none; }
  .schrift.is-klaar .regel__kant { opacity: 1 !important; }
}