/* FOOD IQ ACADEMY V1 (staging): de Home-kaart, de plaatsing van Energy Lab en de Academy-onderdelen van de bestaande
   FOODIKU Full-paywall. Bouwt op de bestaande FOODIKU-onderdelen (.card, .card-eyebrow, .card-sub, .badge-cta,
   .paywall-*) en gebruikt alleen de bestaande kleurvariabelen. Energy Lab zelf, ook de Academy-pagina bovenaan het
   lesoverzicht, staat in een eigen Shadow DOM (js/academy/energylab-engine.js): geen enkele regel hieronder raakt
   Energy Lab-elementen, en geen Energy Lab-regel raakt FOODIKU. */

/* ---------- Home-kaart (Fase D): feature card ----------
   Zelfde lichtgroene identiteit als eerder (de merkkleur --green op 13% dekking, rand op 45%), nu krachtiger:
   links een uitgelijnde tekstkolom (label, kop, onderregel en de zichtbare CTA), rechts een grote Professor Oedi.
   De CTA is de bestaande witte FOODIKU-pil (.badge-cta, zoals START bij Food Friends) en geen aparte knop: de hele
   kaart is één knop. Diepte met de twee zachte schaduwlagen uit het Visual System, in de groene toon van Daily. */
.card-academy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  background: rgba(120, 188, 117, 0.13);
  border: 2px solid rgba(120, 188, 117, 0.45);
  color: var(--ink);
  padding: 1.3rem 0.85rem 1.3rem 1.4rem;
  box-shadow: 0 1px 2px rgba(43, 43, 40, 0.05), 0 10px 24px rgba(120, 188, 117, 0.22);
  overflow: hidden;
}

.card-academy-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
}

/* label: kleiner dan de kop, zodat "FOOD IQ ACADEMY" ook op de smalste iPhone op één regel past */
.card-academy .card-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.card-academy-headline {
  font-size: clamp(1.1rem, 5.4vw, 1.4rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--ink);
}

.card-academy .card-sub {
  color: var(--ink-soft);
  opacity: 1;
  line-height: 1.35;
}

.card-academy-cta {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  padding: 0.55rem 0.95rem;
  box-shadow: 0 1px 2px rgba(43, 43, 40, 0.08);
}

/* Professor Oedi groot rechts. De officiële afbeelding is een vierkant met lege randen naast de figuur; een smal
   beeldvak met object-fit: cover laat alleen de figuur zien, zonder het bestand zelf aan te passen. */
.card-academy-character {
  align-self: end;
  width: clamp(88px, 27vw, 128px);
  height: auto;
  aspect-ratio: 0.62;
  margin-bottom: -0.55rem;
  object-fit: cover;
  object-position: 50% 45%;
  pointer-events: none;
}

.card-academy-error {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

/* ---------- Energy Lab: de host vult het hele scherm, zoals Energy Lab V3 als eigen pagina ---------- */
.academy-el-host {
  position: fixed;
  inset: 0;
  z-index: 40;
}

/* Alleen zolang Energy Lab zichtbaar is (js/academy/academy.js zet en verwijdert deze klasse): geen rubberband van
   de pagina achter de les, zoals V3 dat op html en body regelt. */
html.academy-el-active,
html.academy-el-active body {
  overscroll-behavior: none;
}

/* ---------- Fase C: korte uitleg onder de kop van de bestaande paywall (alleen met Academy-context) ----------
   Zelfde rustige tekststijl als de regels onder de voordelen (.paywall-benefit-sub), iets groter omdat het een
   volledige zin is. Standaard verborgen; openPaywallPreview (js/mysteryzone.js) toont hem alleen met context. */
.paywall-context {
  margin: -0.45rem 0 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ---------- De Food IQ Academy-tegel op de paywall ----------
   Sinds RC2 (paywall visual polish V2) een gewone voorbeeldtegel, net als Macro Mania, Super Sixty en Food Order: de opmaak
   van alle vier staat in css/styles.css (.paywall-game-*). Hier staat niets meer voor de tegel. */