/* ============================================================
   Aanbod en hoofdstukken (homepage, sinds 1 okt 2026, prefixen ab- en hk-)
   ============================================================
   Twee dingen uit dezelfde feedback ("de route is lang, het aanbod
   komt pas laat, reviews en video's zijn zoeken"):

   ab-  Het aanbod direct onder het webinar: drie kaarten, elk een
        ingang naar een dienst, met de keuzehulp als uitweg.
   hk-  Hoofdstukken op de bestaande spine links (alleen desktop),
        ook op ai-training, ai-partnership en ai-automatisering.
        Op de lijn staan stippen waar elk hoofdstuk begint; het
        meeschuivende bolletje van de spine loopt erlangs. Naast de
        stip van waar je bent staat de naam, wie over de lijn beweegt
        ziet alle namen en kan erheen springen (hoofdstukken.js).

   De oude homepage zonder deze twee: tools/archief/index-voor-
   hoofdstukken-2026-10-01.html.
   ============================================================ */

/* ---------- Het aanbod ---------- */
.ab__rij {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .ab__rij {
    grid-template-columns: repeat(3, 1fr);
  }
}
.ab__kaart {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.2rem);
  border-radius: var(--r-lg);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) ease;
}
/* .reveal.is-in (base.css) zet transform op none en is specifieker */
.ab__kaart:hover,
.ab__kaart.reveal.is-in:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent-deep) 55%, transparent);
}
.ab__kaart:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
}
.ab__voor {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-deep);
}
.ab__naam {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2em 0.6em;
  font-size: var(--fs-h3);
}
.ab__vlag {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  transform: translateY(-0.35em);
}
.ab__kaart p {
  max-width: none;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}
.ab__meer {
  margin-top: auto;
  padding-top: 0.6rem;
  font-weight: 600;
  font-size: var(--fs-small);
}
.ab__meer .arrow {
  display: inline-block;
  transition: transform var(--dur-2) var(--ease-out);
}
.ab__kaart:hover .ab__meer .arrow {
  transform: translateX(4px);
}
.ab__twijfel {
  max-width: none;
  margin-top: clamp(1.4rem, 1rem + 1vw, 2rem);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}
.ab__twijfel a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  white-space: nowrap;
}
.ab__twijfel a:hover {
  text-decoration-color: currentColor;
}

/* ---------- Hoofdstukken op de spine ----------
   De spine loopt van boven tot onder het scherm, maar bovenin ligt de
   menubalk en linksonder de knop "Terug naar boven". Met hoofdstukken
   aan lopen de vulling en het bolletje daarom tussen --hk-top en
   --hk-bodem; hoofdstukken.js zet de stippen op dezelfde schaal. */
html.hk-aan {
  --hk-top: 128px;
  --hk-bodem: 112px;
}
@media (min-width: 1061px) and (hover: hover) {
  html.hk-aan .spine__fill {
    top: var(--hk-top);
    height: calc(var(--scroll-progress, 0) * (100% - var(--hk-top) - var(--hk-bodem)));
  }
  html.hk-aan .spine__node {
    top: calc(var(--hk-top) + var(--scroll-progress, 0) * (100% - var(--hk-top) - var(--hk-bodem)));
  }
}

.hk {
  position: fixed;
  top: 0;
  bottom: 0;
  /* dezelfde x als .spine (layout.css), plus de halve lijndikte */
  left: calc(clamp(0.7rem, 2.2vw, 2.6rem) + 1px);
  width: 0;
  z-index: 21; /* net boven de spine (20), onder de knoppen (95) */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.hk.is-zichtbaar {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s;
}
/* het stuk waar je met de muis overheen gaat om alle namen te zien */
.hk__zone {
  position: absolute;
  top: calc(var(--hk-top) - 24px);
  bottom: calc(var(--hk-bodem) - 8px);
  left: -28px;
  width: 52px;
  pointer-events: auto;
}
.hk__lijst {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hk__punt {
  position: absolute;
  left: 0;
  top: var(--y, 0px);
  display: flex;
  align-items: center;
  height: 24px;
  margin: -12px 0 0 -12px;
  padding: 0 0 0 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.hk__stip {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
}
.hk__stip::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--bg);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-out);
}
.hk__punt.is-voorbij .hk__stip::before {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
}
.hk__punt:hover .hk__stip::before,
.hk__punt:focus-visible .hk__stip::before {
  transform: scale(1.35);
  border-color: var(--accent-deep);
}

/* de naam: een klein glazen label rechts van de stip */
.hk__naam {
  position: absolute;
  left: var(--hk-label-x, 22px);
  top: 50%;
  translate: 0 var(--dy, 0px);
  transform: translate(-4px, -50%);
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-faint);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.35s var(--ease-out), color 0.2s ease;
}
/* rust: alleen de naam van waar je bent, en alleen als er naast de
   inhoud ruimte voor is (hoofdstukken.js zet .is-ruim) */
.hk.is-ruim .hk__punt.is-nu .hk__naam {
  opacity: 1;
  transform: translate(0, -50%);
  color: var(--ink);
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
/* open: muis op de lijn of toetsenbordfocus, dan alle namen */
.hk.is-open .hk__naam,
.hk:focus-within .hk__naam {
  opacity: 1;
  transform: translate(0, -50%);
}
.hk.is-open .hk__punt.is-nu .hk__naam,
.hk:focus-within .hk__punt.is-nu .hk__naam {
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hk__punt:hover .hk__naam,
.hk__punt:focus-visible .hk__naam {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-deep) 60%, transparent);
}
.hk__punt:focus-visible {
  outline: none;
}

/* Alleen op een breed scherm met een muis. Daaronder blijft de spine
   zoals hij was en doet het aanbodblok het werk. */
@media (max-width: 1060px), (hover: none) {
  .hk {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hk__naam,
  .hk__stip::before {
    transition: none;
  }
}