/* Laag: framework. De rangorde staat in skeleton/templates/page.php:
 *   @layer framework, site, theme, type, item;
 * Alles wat het framework meestuurt zit in de onderste laag, zodat site-CSS en CMS-opmaak
 * ervan winnen zonder specificiteits-trucs. Binnen deze laag telt specificiteit gewoon, dus
 * de onderlinge verhouding tussen framework-bestanden verandert er niet door.
 *
 * Een bestand dat deze wikkel MIST staat buiten elke laag en wint daarmee van ALLES —
 * ook van het CMS. `tests/Framework/CodeStyle/ModuleCssIsLayeredTest.php` bewaakt dat. */
@layer framework {
/* Tijdlijn: twee varianten, zie punt 983.
 * - Standaard ("Horizontaal", SvS-patroon): één middenlijn, momenten wisselen in
 *   documentvolgorde links/rechts af.
 * - `.timeline--vertical` ("Verticaal", ValueA-patroon): horizontale as, datums op de lijn.
 * Terughoudend en volledig op variabelen met een neutrale fallback, zodat een site 'm
 * bijkleurt in plaats van overschrijft. De module staat op zichzelf: zonder site-CSS moet
 * dit er nog steeds uitzien als een tijdlijn en niet als een stapel losse blokken. */

.layer--timeline {
  --timeline-line: var(--color-border, #e5e5e5);
  --timeline-dot: var(--color-accent, var(--accent, #1e2a3a));
  --timeline-dot-fg: var(--color-background, #fff);
  --timeline-gap: var(--space-5, 2rem);
  --timeline-muted: var(--color-muted, #6b7280);
  --timeline-radius: var(--radius-2, 8px);
}

.layer--timeline .timeline-head {
  margin-bottom: var(--timeline-gap);
}

/* Standaardvariant ("Horizontaal"): één middenlijn, momenten wisselen in NATUURLIJKE
   documentvolgorde links/rechts af (niet per CSS-kolom gestapeld — dat koppelt items per
   RIJ i.p.v. per plek in de reeks, en gaf overlap zodra teksten ongelijk lang waren). */
.layer--timeline .timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  counter-reset: timeline-step;
}

.layer--timeline .timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--timeline-line);
  transform: translateX(-50%);
}

.layer--timeline .timeline__item {
  position: relative;
  counter-increment: timeline-step;
  width: calc(50% - var(--space-4, 1.5rem));
  padding-bottom: var(--timeline-gap);
}

.layer--timeline .timeline__item:last-child {
  padding-bottom: 0;
}

.layer--timeline .timeline__item:nth-child(odd) {
  margin-inline-end: auto;
  text-align: right;
}

.layer--timeline .timeline__item:nth-child(even) {
  margin-inline-start: auto;
  text-align: left;
}

/* De cirkel zit ALTIJD op de middenlijn van de lijst, nooit op 50% van het item zelf —
   een item is maar de helft van de breedte, dus "50% van het item" landt middenin de
   tekst i.p.v. op de as. Vandaar: uitsteken vanaf de buitenrand van het item. */
.layer--timeline .timeline__item::before {
  content: counter(timeline-step, decimal-leading-zero);
  position: absolute;
  top: 0;
  z-index: 1;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--timeline-dot);
  color: var(--timeline-dot-fg);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 .45rem rgba(30, 42, 58, .12);
}

@supports (color: color-mix(in srgb, black, white)) {
  .layer--timeline .timeline__item::before {
    box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--timeline-dot) 20%, transparent);
  }
}

.layer--timeline .timeline__item:nth-child(odd)::before {
  right: calc(var(--space-4, 1.5rem) * -1 - 1.175rem);
}

.layer--timeline .timeline__item:nth-child(even)::before {
  left: calc(var(--space-4, 1.5rem) * -1 - 1.175rem);
}

.layer--timeline .timeline__media {
  width: min(100%, 280px);
  border-radius: var(--timeline-radius);
  overflow: hidden;
  margin-bottom: .75em;
}

.layer--timeline .timeline__item:nth-child(odd) .timeline__media {
  margin-left: auto;
}

.layer--timeline .timeline__item:nth-child(even) .timeline__media {
  margin-right: auto;
}

.layer--timeline .timeline__title {
  margin: 0 0 0.15em;
}

/* Het jaartal/label: rustiger dan de titel, zodat de titel de regel blijft dragen. */
.layer--timeline .timeline__subtitle {
  margin: 0 0 0.5em;
  color: var(--timeline-muted);
  font-size: 0.9em;
}

.layer--timeline .timeline__text > :first-child {
  margin-top: 0;
}

.layer--timeline .timeline__text > :last-child {
  margin-bottom: 0;
}

/* Smal scherm: één kolom, terug naar een linkerlijn — twee kolommen naast elkaar op
   telefoonbreedte levert twee onleesbaar smalle tekstblokken op. */
@media (max-width: 40rem) {
  .layer--timeline .timeline {
    padding-left: var(--space-5, 2rem);
  }

  .layer--timeline .timeline::before {
    left: 0;
  }

  .layer--timeline .timeline__item,
  .layer--timeline .timeline__item:nth-child(odd),
  .layer--timeline .timeline__item:nth-child(even) {
    width: 100%;
    margin-inline: 0;
    text-align: left;
  }

  .layer--timeline .timeline__item::before,
  .layer--timeline .timeline__item:nth-child(odd)::before,
  .layer--timeline .timeline__item:nth-child(even)::before {
    left: calc(var(--space-5, 2rem) * -1 - 1.175rem);
    right: auto;
  }

  .layer--timeline .timeline__item:nth-child(odd) .timeline__media,
  .layer--timeline .timeline__item:nth-child(even) .timeline__media {
    width: 100%;
    max-height: 200px;
    margin-inline: 0;
  }
}

/* Variant "Verticaal" (ValueA): horizontale scroll-as i.p.v. reflow -- het aantal momenten
 * is niet aan een schermbreedte gebonden. Datum op de lijn, titel+tekst wisselen om de beurt
 * boven/onder af.
 *
 * De marker staat ALTIJD op 50% van het item, absoluut gepositioneerd -- niet via flex-
 * volgorde. Een eerdere versie centreerde marker+tekst als één GROEP (`justify-content:
 * center` + `order`), en dat werkte niet: bij ongelijke teksthoogtes schuift de groep als
 * geheel, dus de marker landt niet op een gedeelde lijn maar ergens naast het buuritem —
 * precies waar twee nummers tegen elkaar botsten. Met `position: absolute` op zowel de
 * marker als het tekstblok (elk op vaste afstand van 50%) staat de marker altijd op de as,
 * ongeacht hoe lang de tekst boven/onder is. `padding-block` op de rij moet symmetrisch
 * zijn: alleen dan valt 50% van elk item samen met 50% van de achtergrondlijn (die zelf op
 * 50% van de PADDING-box van de rij ligt, terwijl items zich binnen de CONTENT-box bevinden).
 */
.layer--timeline .timeline--vertical {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-inline: var(--space-5, 2rem);
  padding-block: 15rem;
  counter-reset: timeline-step;
  background: linear-gradient(var(--timeline-line), var(--timeline-line)) 0 50% / 100% 2px no-repeat;
  background-attachment: local;
}

/* De verticale middenlijn hoort bij de standaardvariant (Horizontaal) — beide klassen staan
   op dezelfde `<ol>`, dus zonder dit zou hij hier blijven doorlekken. */
.layer--timeline .timeline--vertical::before {
  content: none;
}

.layer--timeline .timeline--vertical .timeline__item {
  counter-increment: timeline-step;
  scroll-snap-align: center;
  position: relative;
  flex: 0 0 auto;
  width: clamp(11rem, 20vw, 15rem);
  text-align: center;
}

.layer--timeline .timeline--vertical .timeline__item::before {
  content: counter(timeline-step, decimal-leading-zero);
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--timeline-dot);
  color: var(--timeline-dot-fg);
  font-size: .65rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 .3rem rgba(30, 42, 58, .12);
}

@supports (color: color-mix(in srgb, black, white)) {
  .layer--timeline .timeline--vertical .timeline__item::before {
    box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--timeline-dot) 20%, transparent);
  }
}

.layer--timeline .timeline--vertical .timeline__body {
  position: absolute;
  left: 0;
  right: 0;
}

/* Oneven moment: inhoud BOVEN de as. */
.layer--timeline .timeline--vertical .timeline__item:nth-child(odd) .timeline__body {
  bottom: calc(50% + 1.4rem);
}

/* Even moment: inhoud ONDER de as. */
.layer--timeline .timeline--vertical .timeline__item:nth-child(even) .timeline__body {
  top: calc(50% + 1.4rem);
}

.layer--timeline .timeline--vertical .timeline__subtitle {
  display: inline-block;
  background: var(--color-surface, #eef1f4);
  border-radius: var(--timeline-radius);
  padding: .15rem .6rem;
  margin: 0 0 .35rem;
}

/* Geen line-clamp: een titel mag nooit afbreken. `.ds-title` (site-brede design-token,
 * @layer theme) bepaalt de titelgrootte en wint altijd van deze @layer framework-regels --
 * niet op specificiteit maar op laag-volgorde (`framework, site, theme, type, item`). Kan tot
 * 40px lopen; de padding-block hierboven is daarop afgestemd, niet op een kleiner font dat
 * hier toch niet af te dwingen is. */
.layer--timeline .timeline--vertical .timeline__text {
  font-size: .9rem;
}

/* Geen ruimte voor een beeld in de smalle kaart-vorm; media hoort bij Horizontaal. */
.layer--timeline .timeline--vertical .timeline__media {
  display: none;
}

/* Custom scroll-pijlen i.p.v. de kale browser-scrollbar. De knoppen zijn progressive
 * enhancement (timeline.js schakelt `hidden` en scrollt); zonder JS blijft de as gewoon
 * met swipe/toetsenbord/trackpad bruikbaar, alleen zonder zichtbare pijlen. */
.layer--timeline .timeline-scroller {
  position: relative;
}

.layer--timeline .timeline--vertical {
  padding-inline: clamp(3rem, 8vw, 4.5rem);
  scrollbar-width: thin;
  scrollbar-color: var(--timeline-dot) transparent;
}

.layer--timeline .timeline--vertical::-webkit-scrollbar {
  height: 6px;
}

.layer--timeline .timeline--vertical::-webkit-scrollbar-track {
  background: transparent;
}

.layer--timeline .timeline--vertical::-webkit-scrollbar-thumb {
  background: var(--timeline-dot);
  border-radius: 999px;
}

.layer--timeline .timeline-scroller__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--timeline-line);
  background: var(--color-background, #fff);
  color: var(--timeline-dot);
  font-size: 1.35rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.layer--timeline .timeline-scroller__nav[hidden] {
  display: none;
}

.layer--timeline .timeline-scroller__nav--prev {
  left: 0;
}

.layer--timeline .timeline-scroller__nav--next {
  right: 0;
}
}