/* Hand-out-waaier — licht fond, dicht→open boog. Spec 2026-05-19. */
.tm-hofan{
  position:relative;
  background:transparent;            /* geen kader-paneel meer */
  padding:clamp(48px,7vw,96px) 0;
  overflow:hidden;                   /* snijdt kaart-uiteinden af op de gleuf */
}
/* zachte contactschaduw onder de waaier: de hand-outs lijken op een oppervlak
   te liggen. z-index:-1 → altijd achter de kaarten. --floor-y verschuift 'm
   verticaal naar de onderkant van de kaart-band (tuning-knop). */
.tm-hofan{ --floor-y:64px; }
.tm-hofan::after{
  content:"";position:absolute;left:50%;top:50%;
  width:min(74%,840px);height:44px;
  transform:translate(-50%,-50%) translateY(var(--floor-y));
  background:radial-gradient(ellipse,
    rgba(20,24,48,.20) 0, rgba(20,24,48,.07) 45%, rgba(20,24,48,0) 72%);
  filter:blur(3px);z-index:-1;pointer-events:none;
}
.tm-hofan--compact{ --floor-y:8px; }
.tm-hofan__inner{
  max-width:1264px;margin:0 auto;
  padding:0 clamp(16px,4vw,32px);
  text-align:center;
}
.tm-hofan__eyebrow{
  text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  font-size:.8rem;color:var(--edublink-color-primary,#ff6a00);margin:0 0 .6rem;
}
.tm-hofan__heading{
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.15;margin:0 0 .6rem;
  color:var(--edublink-color-heading,#1c2238);
}
.tm-hofan__intro{
  max-width:46rem;margin:0 auto 2.5rem;color:var(--edublink-color-body,#4a4f63);
}

/* --- waaier --- */
.tm-hofan__fan{
  position:relative;
  container-type: inline-size;
  height:clamp(340px,42vw,520px);
  margin:0 auto;
  /* boog-parameters: pas hier de spreiding aan */
  --spread-deg:46;        /* totale hoek links→rechts */
  --spread-x:200cqw;      /* horizontale spreiding, container-breedte-relatief (cqw); Task 7 tunet dit visueel */
  --lift:0;               /* hover/animatie-multiplier (0=dicht,1=open) */
}
.tm-hofan__card{
  position:absolute;top:8%;left:50%;
  width:clamp(104px,11vw,148px);
  margin:0;
  /* genormaliseerde positie -0.5..0.5 over n kaarten */
  /* vereist --n >= 2; max() vangt single-card af */
  --t:calc(var(--i) / max(var(--n) - 1, 1) - .5);
  --ang:calc(var(--t) * var(--spread-deg) * 1deg * var(--lift));
  /* --x is cqw: relatief aan .tm-hofan__fan-breedte, niet aan de kaart */
  --x:calc(var(--t) * var(--spread-x) * var(--lift));
  --y:calc(var(--t) * var(--t) * 10% * var(--lift));
  transform:translateX(-50%) translateX(var(--x)) translateY(var(--y)) rotate(var(--ang));
  transform-origin:bottom center;
  z-index:calc(50 - abs(var(--t)) * 100); /* center-out: middenkaart bovenop, randen achter */
}
.tm-hofan__card picture,
.tm-hofan__card img{display:block;width:100%;height:auto;border-radius:3px;}
.tm-hofan__card img{
  /* geen schaduw in de gestapelde start-stand (22 schaduwen = donkere blob);
     fade-t per kaart in zodra de waaier opengaat, zelfde stagger als de kaart */
  box-shadow:0 14px 30px -12px rgba(20,24,48,0);
  border:1px solid rgba(20,24,48,.08);
  background:#fff;
  transition:box-shadow .9s ease;
  transition-delay:calc(abs(var(--t)) * 1.9s); /* midden-uit: links+rechts tegelijk */
}
/* open-stand: gezet door JS (in-beeld) of door reduced-motion fallback */
.tm-hofan__fan.is-open{ --lift:1; }
.tm-hofan__fan.is-open .tm-hofan__card{
  transition:transform 1s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(abs(var(--t)) * 1.9s); /* midden-uit: links+rechts tegelijk */
}
.tm-hofan__fan.is-open .tm-hofan__card img{
  box-shadow:0 14px 30px -12px rgba(20,24,48,.45);
}

/* afsluitende alinea: verborgen tot de waaier is opengevouwen, dan fade-in.
   Specificiteit (0,2,0) via .tm-hofan-prefix is bewust: het EduBlink-thema
   heeft een regel `p:last-child{margin:0}` (specificiteit 0,1,1) die onze
   `.tm-hofan__outro` (0,1,0) verslaat en margin-left/right/top op 0 forceert
   — dat duwde de alinea linksboven uit het midden. Deze regel wint daarvan.
   margin-top trekt de alinea omhoog in de lege onderhelft van de waaier-box
   (gemeten dode ruimte ~244px onder de zichtbare boog → -200px laat ~44px
   ademruimte). Tuning-waarde; pas alleen --spread/hoogte-gerelateerd aan. */
.tm-hofan .tm-hofan__outro{
  max-width:46rem;
  margin-left:auto;margin-right:auto;
  margin-top:-200px;          /* sluit de gemeten dode ruimte in de waaier-box */
  margin-bottom:0;
  text-align:center;
}
.tm-hofan__outro{
  color:var(--edublink-color-body,#4a4f63);
  font-size:clamp(1.2rem,2.1vw,1.5rem);line-height:1.6;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease, transform .8s ease;
  transition-delay:1.8s; /* na de waaier-ontvouwing (stagger + duur) */
}
.tm-hofan__fan.is-open ~ .tm-hofan__outro{ opacity:1;transform:none; }
/* slotregel na `||`: witregel erboven, groter + bold */
.tm-hofan__outro .tm-hofan__tail{
  display:block;margin-top:.35em;
  font-weight:700;font-size:1.18em;
  color:#34384a; /* tussen body (#4a4f63) en kop (#1c2238): iets donkerder, niet zwart */
}

/* desktop: kaart onder de cursor naar voren */
@media (hover:hover) and (pointer:fine){
  .tm-hofan__fan.is-open:hover .tm-hofan__card{ filter:saturate(.92); }
  .tm-hofan__card:hover{
    z-index:60;
    transform:translateX(-50%) translateX(var(--x)) translateY(calc(var(--y) - 16px)) rotate(var(--ang)) scale(1.22);
    filter:none;
    transition-delay:0s;
  }
}

/* reduced motion: direct open, geen transitie/stagger */
@media (prefers-reduced-motion:reduce){
  .tm-hofan__fan{ --lift:1; }
  .tm-hofan__card,
  .tm-hofan__card img{ transition:none;transition-delay:0s; }
  .tm-hofan__outro{ opacity:1;transform:none;transition:none; }
}

.tm-hofan__fallback{max-width:100%;height:auto;margin-top:1rem;border-radius:10px;}

/* --- mobiel: boog → horizontale scroll-strip --- */
/* mini-fan is default verborgen op desktop; alleen op mobiel zichtbaar */
.tm-hofan__fan--mini{ display:none; }

@media (max-width:768px){
  /* desktop-22-card-fan verbergen, mini-fan tonen */
  .tm-hofan__fan:not(.tm-hofan__fan--mini){ display:none; }
  .tm-hofan__fan--mini{
    display:block;position:relative;margin:0 auto;
    height:clamp(220px,52vw,300px);
    /* eigen waaier-parameters: smallere boog passend bij 5 kaarten op telefoon */
    --spread-deg:42;
    --spread-x:75cqw;
    --lift:0;
  }
  /* iets bredere kaarten op mobiel (5 i.p.v. 22 → meer ruimte per kaart) */
  .tm-hofan__fan--mini .tm-hofan__card{ width:clamp(120px,28vw,170px); }
  /* compact-variant: iets lagere mini-fan-box */
  .tm-hofan--compact .tm-hofan__fan--mini{ height:clamp(200px,48vw,280px); }
  /* outro: terug naar normale marge nu de desktop-trek-omhoog niet meer past */
  .tm-hofan .tm-hofan__outro{ margin-top:1.5rem; }
}

.tm-hofan__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:2.5rem;}
.tm-hofan__btn{
  display:inline-flex;align-items:center;font-weight:700;
  padding:.85rem 1.6rem;border-radius:999px;text-decoration:none;
}
.tm-hofan__btn--primary{background:var(--edublink-color-primary,#ff6a00);color:#fff;}
.tm-hofan__btn--ghost{border:1px solid currentColor;color:var(--edublink-color-heading,#1c2238);}

/* --- compacte variant (compact="1"): lager, zonder outro, één korte kop --- */
.tm-hofan--compact{ padding:clamp(28px,4vw,52px) 0; }
.tm-hofan--compact .tm-hofan__heading{
  font-size:clamp(1.3rem,2.6vw,1.95rem);line-height:1.25;
  max-width:34rem;margin:0 auto 1.3rem;
}
.tm-hofan--compact .tm-hofan__intro{ margin-bottom:1.3rem; }
/* alleen desktop: op mobiel blijft .tm-hofan__fan een height:auto scroll-strip
   (deze 0,2,0-regel zou die anders verslaan en de strip breken) */
@media (min-width:769px){
  .tm-hofan--compact .tm-hofan__fan{ height:clamp(230px,19vw,290px); }
}

/* hand-out linkt door naar de bijbehorende training */
.tm-hofan__card .tm-hofan__link{display:block;}

/* Oranje accent in handout-fan heading (via __woord__ marker) */
.tm-hofan__accent { color: var(--tm-orange, #FF8A1F); }


/* In page-content (zoals /boeken/) staat de fan vaak direct onder een hinge —
   matchen met `.tm-incompany .tm-section` ritme voor consistente verticale spacing. */
.entry-content .tm-hofan {
  padding-top: 32px;
}