/* ============================================================
   Soluna — componenten
   ============================================================ */

/* ---------- Iconen ---------- */
.icon { flex: none; }

.icon-btn {
  width: 44px; height: 44px;                  /* Apple HIG: minimale taphoogte */
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn:hover { background: var(--surface-muted); }
.icon-btn--solid {
  background: var(--bg-elevated);
  box-shadow: var(--sh-sm);
  border: 1px solid var(--hairline);
}
.icon-btn--solid:hover { background: var(--surface); }

/* ============================================================
   Button
   ============================================================ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  -webkit-user-select: none; user-select: none;
}
.btn:active { transform: scale(0.98); }
.btn--lg { min-height: 54px; padding: 0 var(--sp-7); font-size: var(--fs-body-lg); }
.btn--block { width: 100%; }
.btn__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--text-on-accent);
  box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--accent) 70%, transparent);
}
.btn--primary:hover { --btn-bg: var(--terra-600); }

.btn--secondary {
  --btn-bg: var(--bg-elevated);
  --btn-fg: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--sh-xs);
}
.btn--secondary:hover { --btn-bg: var(--surface-muted); }

.btn--ghost {
  --btn-bg: transparent;
  border: 1px solid var(--border);
}
.btn--ghost:hover { --btn-bg: var(--surface-muted); }

.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--accent);
  min-height: 44px;
  padding: 0 var(--sp-3);
}
.btn--quiet:hover { --btn-bg: var(--accent-wash); }

.btn.is-disabled, .btn:disabled {
  opacity: 0.42;
  pointer-events: none;
}

/* ============================================================
   Chip / Tag / Pill
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 450;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.chip:active { transform: scale(0.97); }
.chip.is-active {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--sand-50);
}
/* Er zit bewust geen kleurstip meer op een chip. Met vijf elementen, zeven
   chakra's en vijf seizoenen waren dat ruim dertig kleuren in één interface.
   Onderscheid komt nu uit het woord zelf en uit de ordening. */
.chip__count { font-size: var(--fs-micro); opacity: 0.6; }

@media (prefers-color-scheme: dark) {
  .chip.is-active { background: var(--sand-100); border-color: var(--sand-100); color: var(--ink-900); }
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 450;
  white-space: nowrap;
}
.tag--subtle { background: transparent; border: 1px solid var(--border); }
.tag__icon { opacity: 0.7; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--surface-muted);
  color: var(--text-secondary);
  white-space: nowrap;
}
.pill--glass {
  background: rgba(255, 253, 248, 0.86);
  color: var(--ink-800);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: 0 2px 8px rgba(60, 45, 33, 0.14);
}
.pill--new {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(255, 253, 248, 0.9);
  color: var(--ink-800);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.pill--booked { background: color-mix(in oklab, var(--olive-500) 16%, transparent); color: var(--olive-500); }
.pill--few    { background: color-mix(in oklab, var(--terra-500) 14%, transparent); color: var(--terra-600); }
.pill--full   { background: var(--surface-muted); color: var(--text-tertiary); }

@media (prefers-color-scheme: dark) {
  .pill--booked { color: #A9B292; }
  .pill--few { color: var(--accent); }
}

/* ============================================================
   Surface — het enige kaart-omhulsel
   ============================================================ */
.surface {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-sm);
}
.surface--muted {
  background: var(--surface-muted);
  box-shadow: none;
}
.surface--dashed {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-strong);
  box-shadow: none;
}
.surface--interactive {
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.surface--interactive:active { transform: scale(0.988); }
.surface--interactive:hover { box-shadow: var(--sh-md); }

/* ============================================================
   Avatar
   ============================================================ */
.avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  color: rgba(45, 36, 28, 0.62);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), var(--sh-sm);
}
.avatar__initials { transform: translateY(1px); }

/* ============================================================
   Progress / Score
   ============================================================ */
.progress {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--sand-200);
  overflow: hidden;
}
.progress__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}
@media (prefers-color-scheme: dark) { .progress { background: var(--surface-muted); } }

/* Verhouding zonder cijfers: een reflectie-instrument is geen meting. */
.share { padding: var(--sp-1) 0; }
.share__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: 7px;
}
.share__label { font-size: var(--fs-sm); color: var(--text-secondary); }
.share__note { font-size: var(--fs-xs); color: var(--text-tertiary); }
.share__track {
  height: 6px; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--sand-300) 45%, transparent);
  overflow: hidden;
}
/* De vulkleur staat hier, en dat is niet altijd zo geweest. Hij kwam uit
   JavaScript mee als `background: color`, gevoed uit een veld dat nooit is
   ingevuld — dus stond er `undefined` en was de staaf doorzichtig. De hele rij
   'Hoe het zich verhoudt' liet lege bakjes zien. Kleur die altijd hetzelfde is
   hoort in de CSS; dan kun je hem zien staan. */
.share__fill {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: var(--accent-soft);
  transition: width 700ms var(--ease-out);
}
.share--emphasis .share__label { color: var(--text); font-weight: 500; font-size: var(--fs-body); }
.share--emphasis .share__track { height: 9px; }
/* De bovenste waarde draagt het accent, de rest de zachte variant. Dat is de
   nadruk waar de staaf om vraagt — één accent, nooit twee. */
.share--emphasis .share__fill { background: var(--accent); }

/* ============================================================
   Empty state
   ============================================================ */
.empty {
  text-align: center;
  padding: var(--sp-9) var(--sp-6);
  display: grid; justify-items: center; gap: var(--sp-3);
}
.empty__icon {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-1);
}
.empty__body { max-width: 30ch; }
.empty__action { margin-top: var(--sp-3); }

/* ============================================================
   Toast
   ============================================================ */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--sp-4));
  translate: -50% 0;
  z-index: var(--z-toast);
  pointer-events: none;
  width: max-content;
  max-width: min(calc(100vw - 32px), 380px);
}
.toast {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: rgba(42, 37, 33, 0.94);
  color: var(--sand-50);
  font-size: var(--fs-sm);
  box-shadow: var(--sh-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: toast-in 260ms var(--ease-out) both;
}
.toast__icon { opacity: 0.85; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   Bottom sheet
   ============================================================ */
.sheet-backdrop {
  position: fixed; inset: 0;
  z-index: var(--z-sheet);
  background: var(--overlay);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade-in var(--dur) var(--ease-out) both;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  width: 100%;
  max-width: var(--app-max);
  max-height: 86dvh;
  display: flex; flex-direction: column;
  background: var(--bg);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding-bottom: var(--safe-bottom);
  box-shadow: 0 -12px 44px -12px rgba(50, 38, 28, 0.35);
  animation: sheet-up 300ms var(--ease-out) both;
}
.sheet.is-closing { animation: sheet-down 200ms var(--ease-soft) both; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-down { from { transform: none; } to { transform: translateY(100%); } }

.sheet__grip {
  width: 38px; height: 4px; border-radius: var(--r-pill);
  background: var(--border-strong);
  margin: var(--sp-3) auto var(--sp-1);
}
.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-6);
}
.sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--gutter) var(--sp-6);
}
.sheet__foot {
  padding: var(--sp-4) var(--gutter) var(--sp-5);
  border-top: 1px solid var(--hairline);
  background: var(--bg-elevated);
  display: flex; gap: var(--sp-3);
}

/* ============================================================
   Formulier
   ============================================================ */
.field { display: block; }
.field__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-2);
}
.input {
  width: 100%;
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 16px;            /* < 16px laat iOS inzoomen bij focus */
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: var(--text-tertiary); }
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent);
  outline: none;
}
.input--area { min-height: 96px; padding-top: var(--sp-3); resize: vertical; line-height: 1.6; }
.field__hint { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-tertiary); }
/* Dezelfde kleur als .login__fout, inclusief de omslag in het donker: een
   foutmelding hoort er overal in de app hetzelfde uit te zien. */
.field__hint--fout { font-size: var(--fs-sm); color: var(--terra-600); }
@media (prefers-color-scheme: dark) { .field__hint--fout { color: var(--accent); } }

.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-muted);
  border: 1px solid var(--hairline);
}
.segmented__item {
  flex: 1 1 0;
  min-height: 40px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 450;
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.segmented__item.is-active {
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 500;
  box-shadow: var(--sh-xs);
}

/* ============================================================
   Bottom navigation
   ============================================================ */
/* `hidden` moet de flex-display kunnen overrulen (immersieve schermen). */
.bottom-nav[hidden] { display: none; }

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-nav);
  display: flex; justify-content: center;
  padding-bottom: var(--safe-bottom);
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: var(--sh-nav);
  border-top: 1px solid var(--hairline);
}
.bottom-nav__inner {
  width: 100%;
  max-width: var(--app-max);
  height: var(--nav-h);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-inline: var(--sp-2);
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 44px;
  color: var(--text-tertiary);
  transition: color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.nav-item__icon {
  display: grid; place-items: center;
  height: 26px;
  transition: transform var(--dur) var(--ease-out);
}
.nav-item__label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.nav-item:active .nav-item__icon { transform: scale(0.9); }
.nav-item.is-active { color: var(--text); }
.nav-item.is-active .nav-item__icon { transform: translateY(-1px); }

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
  position: sticky; top: 0;
  z-index: var(--z-header);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: calc(var(--safe-top) + var(--sp-2)) var(--sp-3) var(--sp-2);
  background: color-mix(in oklab, var(--bg) 84%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}
.topbar--transparent {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: absolute; left: 0; right: 0;
}
.topbar__title {
  flex: 1 1 auto;
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: center;
  padding-inline: var(--sp-2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.topbar__spacer { width: 44px; flex: none; }

/* ============================================================
   Page header
   ============================================================ */
.page-header { padding-top: calc(var(--safe-top) + var(--sp-8)); }
.page-header__title { margin-top: 6px; }
.page-header__lede { margin-top: var(--sp-3); max-width: 34ch; }

/* ============================================================
   Scroll row (carousel)
   ============================================================ */
.scroll-row {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  /* 'proximity' + scroll-padding: bij 'mandatory' snapt de browser bij het laden
     direct naar het eerste item en verdwijnt de linkermarge. */
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: var(--gutter);
  /* Zorgt dat de laatste kaart niet tegen de rand plakt */
  padding-right: calc(var(--gutter) + var(--sp-4));
}
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row > * { scroll-snap-align: start; flex: none; }
.scroll-row__item { width: 216px; }

/* ============================================================
   Logo
   ============================================================ */
.logo { display: inline-flex; align-items: center; gap: var(--sp-3); }
.logo__mark {
  width: 1.15em; height: 1.15em;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--clay-300), var(--terra-400));
  /* Maansikkel via een mask: de 'hap' is écht transparant, dus de vorm werkt
     op elke achtergrond — ook boven een gradient of foto. */
  -webkit-mask-image: radial-gradient(circle at 78% 26%, transparent 0 58%, #000 59%);
  mask-image: radial-gradient(circle at 78% 26%, transparent 0 58%, #000 59%);
}
.logo__word { font-size: 1em; }
.logo--sm { font-size: 13px; }
.logo--md { font-size: 17px; }
.logo--lg { font-size: 26px; }

/* ============================================================
   Favorietknop
   ============================================================ */
.fav-btn {
  display: inline-grid; place-items: center;
  color: var(--ink-700);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fav-btn--floating {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(60, 45, 33, 0.16);
}
/* Vergroot het tapgebied tot 44px zonder de visuele maat te veranderen */
.fav-btn--floating::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
}
.fav-btn--inline { width: 44px; height: 44px; flex: none; color: var(--text-tertiary); }
.fav-btn--large {
  gap: var(--sp-2); min-height: 48px; padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  font-size: var(--fs-body); font-weight: 500;
  grid-auto-flow: column;
}
.fav-btn:active { transform: scale(0.9); }
.fav-btn.is-active { color: var(--terra-500); }
.fav-btn--large.is-active {
  color: var(--terra-600);
  background: var(--accent-wash);
  border-color: color-mix(in oklab, var(--terra-500) 30%, transparent);
}
.fav-btn.is-pulsing { animation: fav-pulse 380ms var(--ease-out); }
@keyframes fav-pulse {
  0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); }
}
@media (prefers-color-scheme: dark) {
  .fav-btn--floating { background: rgba(36, 32, 28, 0.8); color: var(--sand-100); }
  .fav-btn.is-active { color: var(--accent); }
}

/* ============================================================
   Leskaart

   De kaart is een <div> met daarin één <a> voor de hele kaart en de
   favorietknop ernaast — niet een <button> genest in een <a>. Dat laatste is
   verwarrend voor toetsenbord en screenreader, en de toegankelijke naam van de
   link werd de volledige kaarttekst.
   ============================================================ */
.lesson-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.lesson-meta__item { display: inline-flex; align-items: center; gap: 4px; }
.lesson-meta__dot { opacity: 0.5; }

/* Eén woord in plaats van een voortgangsbalk. */
.lesson-resume {
  display: inline-flex; align-items: center;
  margin-left: 6px;
  font-size: var(--fs-micro);
  font-style: italic;
  color: var(--accent);
}

/* ---------- Raster ---------- */
.lesson-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5) var(--sp-3);
}

.lesson-card {
  position: relative;
  /* Buiten het beeld geen layout of paint: houdt lange lijsten soepel op een
     telefoon. De intrinsieke maat voorkomt dat de scrollbalk springt. */
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}
.lesson-card__link {
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform var(--dur-fast) var(--ease-out);
}
.lesson-card__link:active { transform: scale(0.985); }
.lesson-card__art {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-muted);
  box-shadow: var(--sh-sm);
}
.lesson-card__play {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.9);
  color: var(--ink-800);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding-left: 2px;
}
.lesson-card__body { display: flex; flex-direction: column; gap: 3px; }
.lesson-card__title {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.22;
  color: var(--text);
}
.lesson-card__sub {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 3px;
}
.lesson-card__reason {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px;
  font-size: var(--fs-micro);
  color: var(--accent);
}

/* ---------- Feature ---------- */
.lesson-feature {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
  isolation: isolate;
}
.lesson-feature__link {
  display: block;
  transition: transform var(--dur) var(--ease-out);
}
.lesson-feature__link:active { transform: scale(0.99); }
.lesson-feature__art { position: absolute; inset: 0; z-index: 0; }
.lesson-feature__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(30, 22, 16, 0.74) 0%,
    rgba(30, 22, 16, 0.36) 44%,
    rgba(30, 22, 16, 0.04) 74%);
}
.lesson-feature__top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4);
  pointer-events: none;
}
.lesson-feature__top > * { pointer-events: auto; }
.lesson-feature__top .fav-btn--floating { position: static; }
.lesson-feature__body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  padding: var(--sp-11) var(--sp-5) var(--sp-5);
  color: #FFFCF7;
}
.lesson-feature__eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.84;
  margin-bottom: var(--sp-2);
}
.lesson-feature__title { color: inherit; }
.lesson-feature__sub {
  margin-top: 6px;
  font-size: var(--fs-sm);
  opacity: 0.88;
  max-width: 26ch;
}
.lesson-feature__cta {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.play-dot {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.94);
  color: var(--ink-900);
  padding-left: 2px;
  flex: none;
}

/* ---------- Rij ---------- */
.lesson-row { display: flex; align-items: center; gap: var(--sp-2); }
.lesson-row__link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-2) 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.lesson-row__link:active { opacity: 0.7; }
.lesson-row__art {
  position: relative;
  width: 68px; height: 68px;
  flex: none;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-muted);
}
.lesson-row__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lesson-row__title {
  font-family: var(--font-display);
  font-size: 18px; line-height: 1.24;
  color: var(--text);
}
.lesson-row__meta { font-size: var(--fs-xs); color: var(--text-tertiary); }
.lesson-row__reason { font-size: var(--fs-micro); color: var(--accent); margin-top: 2px; }

/* ============================================================
   Fysieke lessen
   ============================================================ */
.date-tile {
  width: 56px;
  flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sp-2) 0 7px;
  border-radius: var(--r-md);
  background: var(--surface-muted);
  border: 1px solid var(--hairline);
  line-height: 1.1;
}
.date-tile__weekday {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.date-tile__day {
  font-family: var(--font-display);
  font-size: 25px;
  color: var(--text);
  margin-top: 1px;
}
.date-tile__month {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary);
}

.class-row {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.class-row:active { transform: scale(0.99); }
.class-row:hover { box-shadow: var(--sh-sm); }
.class-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.class-row__title { font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.class-row__meta { font-size: var(--fs-xs); color: var(--text-tertiary); }
.class-row__theme { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 2px; }
.class-row__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-3);
}
.class-row__price { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.class-row__chevron { color: var(--text-tertiary); align-self: center; flex: none; }

.class-feature {
  display: flex; flex-direction: column; gap: var(--sp-4);
  width: 268px;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background:
    linear-gradient(160deg, color-mix(in oklab, var(--el-tint, var(--clay-300)) 16%, transparent), transparent 55%),
    var(--bg-elevated);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
.class-feature:active { transform: scale(0.99); }
.class-feature__head { display: flex; align-items: center; gap: var(--sp-3); }
.class-feature__when { display: flex; flex-direction: column; gap: 1px; }
.class-feature__relative {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text);
  text-transform: lowercase;
}
.class-feature__time { font-size: var(--fs-xs); color: var(--text-tertiary); }
.class-feature__body { display: flex; flex-direction: column; gap: 4px; }
.class-feature__theme { font-size: var(--fs-xs); color: var(--text-secondary); }
.class-feature__foot { display: flex; align-items: center; gap: var(--sp-2); }
.class-feature__price { font-size: var(--fs-sm); font-weight: 500; }

.class-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.class-meta__item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); color: var(--text-tertiary);
}

/* ============================================================
   Artwork — omhulsel, gedeelde korrel, scroll-optimalisatie
   ============================================================ */
.artwork {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.artwork__svg,
img.artwork {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Eén gedeelde noise-tegel over het hele beeld.
   Waarom niet per kaart een feTurbulence-filter: dat is de duurste SVG-filter
   die er is, en zestien ervan op één scrollende pagina maakt een iPhone warm en
   traag. Als background-image rastert de browser deze tegel één keer voor de
   hele pagina en hergebruikt hem daarna. */
.artwork__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  background-repeat: repeat;
}
@media (prefers-color-scheme: dark) {
  .artwork__grain { mix-blend-mode: overlay; opacity: 0.07; }
}
.orb { flex: none; border-radius: 50%; }

/* ============================================================
   Ingangen op de homepage
   ============================================================ */
.need {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background:
    linear-gradient(112deg, color-mix(in oklab, var(--tint) 20%, transparent) 0%, transparent 64%),
    var(--bg-elevated);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
a.need:active { transform: scale(0.987); }
a.need:hover { box-shadow: var(--sh-sm); }

.need--soon {
  /* Geen link en geen uitgeschakelde knop: een rustige kaart met uitleg. Een
     'disabled' knop nodigt uit tot tikken en stelt dan teleur. */
  background: transparent;
  border-style: dashed;
  border-color: var(--border-strong);
  box-shadow: none;
}

.need__icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--tint) 32%, var(--bg-elevated));
  color: var(--ink-800);
}
.need--soon .need__icon {
  background: var(--surface-muted);
  color: var(--text-tertiary);
}
@media (prefers-color-scheme: dark) {
  .need__icon { color: var(--sand-100); }
  .need--soon .need__icon { color: var(--text-tertiary); }
}

.need__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.need__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.18;
  color: var(--text);
}
.need--soon .need__title { color: var(--text-secondary); }
.need__text {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.need--soon .need__text { color: var(--text-tertiary); }

.need__go { color: var(--text-tertiary); flex: none; margin-top: var(--sp-2); }
.need__soon {
  flex: none;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-muted);
  color: var(--text-tertiary);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}


/* ============================================================
   Interesse-chip — afgeleid, en met één tik weg te halen
   ============================================================ */
.interest-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 38px;
  padding: 0 var(--sp-3) 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface-muted);
  border: 1px solid var(--hairline);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.interest-chip svg { color: var(--text-tertiary); }
.interest-chip:hover { background: var(--accent-wash); color: var(--terra-600); }
.interest-chip:hover svg { color: var(--terra-600); }
.interest-chip:active { transform: scale(0.97); }
@media (prefers-color-scheme: dark) {
  .interest-chip:hover, .interest-chip:hover svg { color: var(--accent); }
}

/* ============================================================
   De boog — de vorm van de lichte kant

   Bovenaan helemaal rond, onderaan recht: een opening in een
   muur, naar de gewelfde spiegel uit de inspiratie. Een boog
   heeft een binnenkant en een buitenkant, en daardoor is
   duidelijk dat je erdóór kijkt naar iets anders. Dat is wat de
   klantkaart moet doen: je element is geen etiket op jou maar
   een deur naar de lessen die erbij horen.

   Het licht komt altijd van boven — de zon. De maan is het
   object dat je ziet. Zie docs/ONTWERP.md.
   ============================================================ */
.poort {
  position: relative;
  border-radius: 999px 999px var(--r-lg) var(--r-lg);
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background:
    radial-gradient(120% 66% at 50% 4%, #FFFDF9, transparent 60%),
    linear-gradient(172deg, #F8F1E7, #EFE2D2);
}

/* Een elementpagina kleurt de boog met de lichtkleur van dat element. Het
   verloop blijft hetzelfde; alleen de twee kleuren wisselen, zodat de vijf
   pagina's één familie blijven. Ze komen uit elements.json — zie de toelichting
   bij Elementkleuren in tokens.css. */
.poort--getint {
  background:
    radial-gradient(120% 66% at 50% 4%, #FFFDF9, transparent 62%),
    linear-gradient(172deg,
      /* Eén kleur volstaat: is er geen bovenkant meegegeven, dan wordt die
         hieruit afgeleid. Zo kan ook een facet met maar één tint de boog
         kleuren, zonder dat de bibliotheek een heel palet hoeft te kennen. */
      var(--poort-van, color-mix(in srgb, var(--poort-naar) 34%, #FFFDF9)),
      var(--poort-naar));
}

/* De foto ligt óp de plek van het verloop en niet erboven: vervangen is dan
   één bestand. Het zonlicht valt er overheen, want licht komt altijd van boven
   — ook over een foto. */
.poort__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.poort--foto .poort__lijf {
  /* Tekst over een foto heeft een eigen ondergrond nodig; zonder deze sluier
     hangt het contrast af van welke foto er toevallig ligt. */
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
  margin: calc(var(--sp-5) * -1) calc(var(--sp-4) * -1) calc(var(--sp-3) * -1);
  background: linear-gradient(to top, rgba(28, 24, 20, 0.62), transparent);
  border-radius: inherit;
}

.poort--foto .poort__lijf .display,
.poort--foto .poort__lijf .label { color: #FBF6EE; }

/* Rand en binnenrand als eigen laag: een border op .poort zelf zou de ronding
   van de inhoud meenemen en de maan afsnijden. */
.poort__rand {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--goud-2);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

/* De zon: geen schijf maar licht dat van bovenaf naar binnen valt. */
.poort__zonlicht {
  position: absolute;
  left: 50%;
  top: -18%;
  transform: translateX(-50%);
  width: 96%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(253, 227, 176, 0.55), rgba(240, 184, 110, 0.16) 46%, transparent 72%);
}

.poort__maan {
  position: absolute;
  left: 50%;
  top: var(--sp-8);
  transform: translateX(-50%);
  line-height: 0;
}

.poort__lijf { position: relative; }
.poort__lijf .display { color: var(--ink-900); }

/* Het opschrift in de boog staat op een gekleurde ondergrond, en de gewone
   labelkleur haalt daar de AA-drempel niet: op de donkerste tint (Vuur) blijft
   hij op 3,1:1 steken. Deze tekst is klein, dus 4,5:1 is de eis en niet 3:1.
   Gemeten over alle vijf de elementen. */
.poort .label { color: var(--ink-700); }

/* Het teken van het element, klein en boven de naam. Niet groter: het is een
   merkteken en geen illustratie. */
.poort__teken {
  display: inline-flex;
  color: var(--goud-tekst);
  margin-bottom: var(--sp-2);
}

.poort__onderregel {
  margin-top: var(--sp-2);
  color: var(--ink-700);
  font-size: var(--fs-body-lg);
}

/* De boog op een elementpagina staat onder de terugknop en heeft daar lucht
   nodig; op Vandaag valt hij direct onder de kop. */
.element-top { margin-top: var(--sp-4); }

/* De pillen in de boog dragen goud in plaats van de gewone chipkleuren: ze
   staan op pleister en niet op zand. */
.poort__pillen { margin-top: var(--sp-4); }

.poort .chip {
  background: transparent;
  border-color: var(--goud-2);
  color: #7A6234;
}
.poort .chip.is-active {
  background: #F2E7CF;
  border-color: var(--goud);
  color: #6B5426;
}

/* De korrel op het maanoppervlak. Als klasse en niet als style-attribuut,
   omdat WP18 die attributen weghaalt voor een strikte CSP. */
.maan__korrel { mix-blend-mode: multiply; }

/* ---------- De cyclus van de maan ----------
   Acht standen op een rij, die van vandaag groter en met een streepje. Geen
   kalender: je ziet in één blik waar je in de maand zit. */
.cyclus { display: flex; flex-direction: column; gap: var(--sp-3); }
.cyclus__rij { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); }
.cyclus__stand { opacity: 0.42; line-height: 0; }
.cyclus__stand.is-nu { opacity: 1; position: relative; }
.cyclus__stand.is-nu::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  width: 16px;
  height: 1px;
  background: var(--goud);
}

/* ---------- De check-in ---------- */
.check-in__intro { margin-top: var(--sp-1); color: var(--text-secondary); font-size: var(--fs-sm); }
.check-in__vraag { margin-top: var(--sp-5); }
.check-in__rij { margin-top: var(--sp-2); }
.check-in__knop { margin-top: var(--sp-6); }