/* ============================================================
   Ai-Revolution · Hero in Apple-compositie  (prefix: aph)
   Gedeeld door ai-training.html, ai-partnership.html en ai-automatisering.html
   (die laatste met een console als podium, zie .aph__stage--flow onderaan).
   Laadt als laatste, dus bij gelijke specificiteit wint dit bestand van
   pages.css en v2.css; waar v2.css hoger zit (`.v2 .subhero h1`, 0-2-1)
   staat hier `.v2 .subhero.aph h1` (0-3-1) tegenover.

   Compositie van een Apple-productpagina, zoals home-ap.css die al voor de
   homepage vastlegt: één boodschap gecentreerd, veel lucht, daaronder één
   grote opname in een afgerond kader die meegroeit met de scroll.
   Materiaal is van ons: de aurora eronder, de merkgradient op de tweede
   regel en de glazen balk die op de foto zweeft.
   ============================================================ */

.subhero.aph {
  padding-top: clamp(7.5rem, 6rem + 6vw, 12rem);
  padding-bottom: 0;
  text-align: center;
}

/* ---- Kop ---- */
.aph__text {
  width: min(100%, 74rem);
  margin-inline: auto;
}
.v2 .subhero.aph h1 {
  font-size: clamp(2.3rem, 1.15rem + 4.4vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 640;
  /* pages.css zet `.subhero h1 { max-width: 18ch }` (0-1-1); die moet hier los */
  max-width: none;
  margin: 0;
}
/* alleen de directe kinderen: lux.js hakt de kop daarna in woord-spans (.lw),
   een selector zonder > zou elk woord op een eigen regel zetten */
.aph h1 > span {
  display: block;
}
/* background-clip: text knipt in Chrome de staart van een 'g' af */
.aph h1 .it {
  padding-bottom: 0.14em;
}
/* Woordgroep die niet binnenin mag breken. Past de regel niet, dan knikt hij
   alleen tussen twee groepen: op telefoon "in het werk van / elke dag." in
   plaats van "in het werk / van elke dag." (balance) of een losse "dag.". */
.aph h1 .aph__nw {
  white-space: nowrap;
}

/* De onderkop staat op Apple-formaat: groot genoeg om mee te lezen als
   tweede regel van de belofte, gedempt genoeg om de kop niet te storen. */
.aph__sub {
  margin: clamp(1.1rem, 0.9rem + 1vw, 1.7rem) auto 0;
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.95rem + 1.35vw, 2rem);
  line-height: 1.24;
  letter-spacing: -0.014em;
  font-weight: 440;
  color: var(--ink-soft);
  text-wrap: balance;
}
/* Twee korte zinnen (partnership): vanaf tablet elk op een eigen regel, anders
   knikt de eerste zin halverwege af. Op telefoon lopen ze gewoon door. */
@media (min-width: 761px) {
  .aph__sub--twee {
    max-width: none;
  }
  .aph__sub--twee > span {
    display: block;
  }
}

.aph__actions {
  margin-top: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2rem;
}
/* tweede actie als chevronlink, zoals op de Apple-homepage: één knop die
   eruit springt, de rest leest als tekst */
.aph__chev {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--accent-deep);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  font-weight: 480;
  text-decoration: none;
}
.aph__chev:hover,
.aph__chev:focus-visible {
  text-decoration: underline;
}
.aph__chev .chev {
  font-size: 1.3em;
  line-height: 1;
  transform: translateY(-0.06em);
}

/* ---- De opname ----
   Groeit van 0,9 naar 1 terwijl hij in beeld schuift (home-ap.js schrijft
   --ap-z). Losse `scale`-eigenschap, niet `transform`, zodat hij niet vecht
   met de entree-transform van .reveal en .lux-seq.
   --fv-pop is het opveren terwijl de video speelt (film-veil.js, alleen op
   de trainingspagina); zonder film-veil blijft hij 1. */
.aph__stage {
  position: relative;
  width: min(100%, 1180px);
  margin: clamp(2.6rem, 2rem + 3.5vw, 5rem) auto 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: var(--shadow-soft), 0 0 0 1px var(--line);
  scale: calc(var(--ap-z, 1) * var(--fv-pop, 1));
  transform-origin: 50% 100%;
}
/* Terwijl de video speelt en opveert (film-veil), groeit het podium vanuit
   zijn midden, net als de video op de afspraakpagina; vanuit de onderkant
   zou hij omhoog uit beeld schieten. De meegroeiende schaal staat dan op 1
   (de video is in beeld), dus het wisselen van het draaipunt springt niet. */
html.fv-on .aph__stage.is-veil-lift {
  transform-origin: 50% 50%;
}
/* Onder de balk moet de foto altijd donker genoeg zijn om witte tekst te
   dragen, ongeacht wat er toevallig in beeld staat. */
.aph__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 36%;
  background: linear-gradient(to top, rgba(4, 6, 12, 0.62), rgba(4, 6, 12, 0.2) 48%, transparent);
  pointer-events: none;
  z-index: 1;
}
/* de bak om de video: speelknop en voortgangslijn richten zich op de
   opname, niet op het hele podium (op telefoon staat de balk eronder) */
.aph__film {
  position: relative;
  border-radius: inherit;
  overflow: hidden;
}
/* Draaiende lichtrand om de opname, dezelfde als op de afspraakpagina
   (.mt-reel in afspraak.css) en op de homepage (.channel__feature in v2.css):
   het merk-idioom voor "hier staat film". Op z-index 2 in plaats van 4, zodat
   hij boven de donkere aanloop van het podium ligt maar de voortgangslijn
   bovenlangs (z-index 3) niet half afdekt. */
.aph__film::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--angle),
    transparent 0%,
    var(--accent) 10%,
    rgba(102, 198, 255, 0.9) 18%,
    transparent 32%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* rustiger dan de 5 s van de homepage, gelijk met de afspraakpagina */
  animation: spinBorder 7s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .aph__film::before {
    animation: none;
  }
}
.aph__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 38%;
}
/* liggende 4:3-opname: die verdraagt een lagere uitsnede zonder plafond */
.aph__shot--tall {
  object-position: 50% 52%;
}

/* ---- Glazen balk op de foto ----
   Waar, hoe lang, voor wie en wat het kost. Zweeft onderin de opname, zoals
   een bedieningsbalk: het glas is het materiaal van de site zelf. */
.aph-spec {
  /* de balk ligt altijd op een foto, dus tekst en vulling zijn hier vast
     licht-op-donker in beide thema's; de gradient-rand van .glass blijft */
  --glass-fill-strong: rgba(8, 12, 20, 0.34);
  --glass-border: rgba(255, 255, 255, 0.18);
  /* Boven de waas van de aftiteling (.reel-end, z-index 4): als de video
     uit is mag de opname wegzakken, maar deze balk hoort bij de pagina en
     blijft gewoon te lezen. Het paneel van de aftiteling staat in het
     midden, dus ze raken elkaar niet. */
  z-index: 5;
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 0.6rem + 1.4vw, 2rem);
  translate: -50% 0;
  width: min(calc(100% - 2 * clamp(1rem, 0.6rem + 1.4vw, 2rem)), 60rem);
  margin: 0;
  border-radius: var(--r);
  padding: clamp(0.85rem, 0.6rem + 0.8vw, 1.25rem) clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: center;
  color: #fff;
}
.aph-spec__i {
  padding-inline: clamp(0.4rem, 0.2rem + 0.6vw, 1rem);
}
.aph-spec__i + .aph-spec__i {
  border-left: 1px solid var(--glass-border);
}
.aph-spec dt {
  font-size: clamp(0.68rem, 0.64rem + 0.15vw, 0.78rem);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.66);
}
.aph-spec dd {
  margin: 0.25rem 0 0;
  font-size: clamp(0.82rem, 0.74rem + 0.32vw, 1rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 520;
  color: #fff;
  text-wrap: balance;
}

/* ---- Ruimte maken voor de browserknoppen ----
   De balk zweeft precies waar de browser zijn eigen bedieningsbalk tekent.
   Die knoppen zijn er alleen nadat de bezoeker op play heeft geklikt
   (reel.js zet dan .has-controls op de bak om de video), en dan is de balk
   ook niet meer waar het om gaat: wie kijkt wil kunnen pauzeren en
   doorspoelen. Dus zakt hij weg zolang de knoppen er staan, samen met de
   donkere aanloop die er alleen ligt om zijn witte tekst te dragen. Bij de
   aftiteling zet reel.js de knoppen weer uit en staat de balk er weer.
   Alleen boven 760px: daaronder staat hij als losse kaart onder de opname
   en ligt hij niets in de weg. */
@media (min-width: 761px) {
  .aph-spec,
  .aph__stage::after {
    transition: opacity var(--dur-2) var(--ease-out), visibility 0s;
  }
  .aph__stage:has(.aph__film.has-controls) .aph-spec,
  .aph__stage:has(.aph__film.has-controls)::after {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-2) var(--ease-out), visibility 0s var(--dur-2);
  }

  /* ---- Balk blijft op de video (.aph__stage--spec-blijft) ----
     Sinds 27 sep 2026 op de webinar-, trainings- en partnershippagina
     (alle drie de video's; de console op automatisering heeft geen
     browserknoppen en blijft zoals hij was). Mika wil de feiten ook tijdens
     het kijken in beeld houden. Dan zakt de balk niet weg maar schuift hij
     omhoog, net boven de browserknoppen (Chrome ~48px, Safari een zwevende
     balk van ~44px met 12px lucht). De donkere aanloop blijft wel weg: die
     zou over de browserknoppen vallen en ze grijs maken, en de balk draagt
     met zijn eigen donkere glas zijn tekst. Met de oude regel hierboven
     (wegzakken) kan elke pagina nog terug: haal de class dan weg. */
  .aph__stage--spec-blijft .aph-spec {
    transition:
      opacity var(--dur-2) var(--ease-out),
      translate var(--dur-2) var(--ease-out),
      visibility 0s;
  }
  .aph__stage--spec-blijft:has(.aph__film.has-controls) .aph-spec {
    opacity: 1;
    visibility: visible;
    translate: -50% calc(-1 * (3.8rem - clamp(1rem, 0.6rem + 1.4vw, 2rem)));
  }
  /* Tijdens het kijken zonder muis op de video verbergt de browser zijn
     knoppen, dus zakt de balk terug naar zijn gewone plek onderin. Hij
     schuift pas weer op als de knoppen terugkomen: muis op de video, of
     pauze (dan gaat .is-playing eraf). */
  .aph__stage--spec-blijft:has(.aph__film.has-controls.is-playing):not(:hover) .aph-spec {
    translate: -50% 0;
  }
}

/* Voetregel onder de balk (partnership): waar dit traject in het groeimodel
   zit en waar de training staat. */
.aph__note {
  margin: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem) auto 0;
  max-width: 60ch;
  font-size: var(--fs-small);
  color: var(--ink-faint);
}
/* de twee doorverwijzingen zwaarder: in een gedempte voetregel zijn ze
   anders nauwelijks te vinden */
.aph__note .accent-text {
  font-weight: 640;
}
/* op telefoon breekt de voetregel op een willekeurige plek af; deze <br>
   zet de tweede zin op een eigen regel en blijft op groot scherm uit. */
.br-sm { display: none; }

/* na deze hero hoeft de logobalk niet nog eens een volle sectie-afstand */
.aph + .clients--spaced {
  margin-top: clamp(3.5rem, 2rem + 5vw, 7rem);
}

/* ---- Podium met een console erin (automatisering) ----
   Daar is de opname geen foto maar de werkstroom zelf: een glazen paneel dat
   zijn eigen rand, ondergrond en tekst tot onderaan meebrengt. De glazen balk
   kan er dus niet op liggen (hij zou de teller afdekken) en het podium hoeft
   er geen kader of donkere aanloop onder te leggen. De balk zakt eronder,
   precies zoals de foto-versie dat op telefoon doet.
   Smaller dan een foto-podium: een pijplijn van zes knopen wordt op 1180px
   een heel breed, heel laag paneel met alleen lucht tussen label en tijd. */
.aph__stage--flow {
  width: min(100%, 820px);
  overflow: visible;
  background: none;
  box-shadow: none;
}
.aph__stage--flow::after {
  display: none;
}
.aph__stage--flow .aph-spec {
  /* de balk staat hier op de paginaondergrond, dus de gewone thematokens:
     vaste witte tekst op een half-doorzichtig vlak valt weg in light mode */
  --glass-fill-strong: var(--glass-fill);
  --glass-border: var(--line);
  color: var(--ink);
  position: static;
  translate: none;
  width: 100%;
  margin-top: clamp(0.9rem, 0.6rem + 1.4vw, 1.4rem);
}
.aph__stage--flow .aph-spec dt {
  color: var(--ink-faint);
}
.aph__stage--flow .aph-spec dd {
  color: var(--ink);
}
/* De console stond eerst in een halve gridkolom; op 820px is dezelfde
   tekstgrootte te klein voor een productshot. Alleen vanaf tablet, want op
   telefoon is de kolom juist smaller dan vroeger. */
@media (min-width: 761px) {
  .aph__stage--flow .flow {
    padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
    gap: 1.15rem;
  }
  .aph__stage--flow .flow__node {
    padding: 0.72rem 1rem;
  }
  .aph__stage--flow .flow__label {
    font-size: 0.94rem;
  }
  .aph__stage--flow .flow__ic {
    width: 30px;
    height: 30px;
  }
  .aph__stage--flow .flow__ic svg {
    width: 17px;
    height: 17px;
  }
}
/* Op een klein scherm leest de meegroeiende schaal als "het paneel wordt
   uitvergroot" in plaats van als diepte, net als bij de video-versie. */
@media (max-width: 760px) {
  .aph__stage--flow {
    scale: none;
  }
}

/* ---- Smalle schermen ----
   Onder 760px is de opname te klein om de balk te dragen: die zakt eronder
   en wordt een glazen kaart met twee kolommen. */
@media (max-width: 760px) {
  .br-sm { display: inline; }
  .aph__stage {
    overflow: visible;
    box-shadow: none;
  }
  /* De donkere aanloop onderin het podium ligt er alleen om de witte tekst
     van de glazen balk op de opname te dragen. Hier zakt die balk eronder,
     dus de aanloop valt precies over de spec-kaart: die wordt dan zwart. */
  .aph__stage::after {
    display: none;
  }
  .aph__shot {
    border-radius: var(--r-lg);
    aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-soft), 0 0 0 1px var(--line);
  }
  .aph__film {
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-soft), 0 0 0 1px var(--line);
  }
  /* Een foto verdraagt de staande 4:3-uitsnede hierboven; een opname niet.
     Die werd zo anderhalf keer uitvergroot en aan beide kanten afgesneden.
     Op telefoon staat de video daarom in zijn eigen 16:9, net als de
     welkomstvideo op de afspraakpagina: niets bijgesneden, stil in beeld. */
  .aph__film .aph__shot {
    box-shadow: none;
    aspect-ratio: 16 / 9;
  }
  /* en dus ook zonder de meegroeiende schaal: op een klein scherm leest die
     als "de video wordt groter gemaakt" in plaats van als diepte. `none` en
     niet 1: elke andere waarde maakt van het podium een eigen laag, en dan
     kan de video er bij het afspelen niet los bovenuit (zie hieronder). */
  .aph__stage--film {
    scale: none;
  }
  /* Bij het afspelen (film-veil) komt hier alleen de video boven de waas en
     groeit alleen die; de balk eronder vervaagt mee met de rest van de
     pagina. De video neemt het opveren daarom zelf over. */
  .aph__stage--film .aph__film {
    scale: var(--fv-pop, 1);
  }
  /* Het restje van de entree (.reveal.is-in houdt filter: blur(0) aan, ook
     via de failsafe-animatie) maakt van het podium ook een eigen laag. Zolang
     de vlek leeft haalt dit dat weg; !important omdat een animatie anders
     wint, en zonder transitie omdat die de filter nog even vasthoudt. De
     entree is dan allang klaar, dus er verandert niets zichtbaars. */
  html.fv-on .aph__stage--film.reveal {
    filter: none !important;
    transition: none !important;
  }
  /* Onder 760px zakt de balk van de foto af naar de paginaondergrond. Daar
     gelden de gewone thematokens weer: vaste witte tekst op een half-doorzichtig
     donker vlak wordt anders onleesbaar in het lichte thema. */
  .aph-spec {
    --glass-fill-strong: var(--glass-fill);
    --glass-border: var(--line);
    color: var(--ink);
    position: static;
    translate: none;
    width: 100%;
    margin-top: clamp(0.9rem, 0.6rem + 1.4vw, 1.4rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 0;
    padding: 1.1rem 0.6rem;
  }
  .aph-spec__i + .aph-spec__i {
    border-left: 1px solid var(--glass-border);
  }
  .aph-spec__i:nth-child(odd) {
    border-left: 0;
  }
  .aph-spec__i:nth-child(n + 3) {
    padding-top: 0.9rem;
    border-top: 1px solid var(--glass-border);
  }
  .aph-spec dt {
    color: var(--ink-faint);
  }
  .aph-spec dd {
    color: var(--ink);
  }
  /* De vier feiten ("Bij jullie op locatie", "Zes maanden", ...) zeggen zelf
     al wat ze zijn. Als losse kaart onder de opname waren de grijze labels
     erboven de zoveelste laag kleine tekst; ze blijven wel voor schermlezers.
     Wie hier een feit toevoegt: het moet zonder label te begrijpen zijn. */
  .aph-spec dt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .aph-spec dd {
    margin-top: 0;
  }
}

/* ---- Heel smalle telefoons ----
   De voetregel breekt na de eerste zin, zodat "De Ai-Training is fase 1 en 2"
   op regel twee staat. Onder ongeveer 355px past die eerste zin niet meer op
   één regel en zou de tweede zin op regel drie belanden; een paar tienden
   kleiner zetten houdt hem heel. */
@media (max-width: 360px) {
  .aph__note {
    font-size: min(var(--fs-small), 3.7vw);
  }
}