/* traint.me — Hero + badge styles
 * Plaats in /wp-content/themes/jouw-thema/assets/css/tm-hero.css
 * Enqueue in functions.php
 */

:root {
  --tm-font: "Montserrat", system-ui, -apple-system, sans-serif;
  --tm-radius: 12px;
  --tm-radius-pill: 999px;
  --tm-radius-tag: 6px;

  /* Niveau */
  --tm-lvl-beginner-bg:#E0F2FE;  --tm-lvl-beginner-fg:#075985;  --tm-lvl-beginner-dot:#0EA5E9;
  --tm-lvl-gevorderd-bg:#FEF3C7; --tm-lvl-gevorderd-fg:#92400E; --tm-lvl-gevorderd-dot:#F59E0B;
  --tm-lvl-expert-bg:#FCE7F3;    --tm-lvl-expert-fg:#9D174D;    --tm-lvl-expert-dot:#EC4899;
  --tm-lvl-alle-bg:#E0E7FF;      --tm-lvl-alle-fg:#3730A3;      --tm-lvl-alle-dot:#6366F1;

  /* Label */
  --tm-lbl-nieuw-bg:#10B981;
  --tm-lbl-populair-bg:#FF8A1F;
  --tm-lbl-bestseller-bg:#5B4FE5;
  --tm-lbl-methode-bg:#FFF4E6; --tm-lbl-methode-fg:#B85200; --tm-lbl-methode-border:#FF8A1F;
  --tm-lbl-vol-bg:#9CA3AF;
  --tm-lbl-lastseats-bg:#EF4444;

  /* Duur */
  --tm-dur-bg:#FF8A1F; --tm-dur-shadow:0 2px 6px rgba(255,138,31,.3);
}

/* ============== HERO ============== */
.tm-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--tm-radius);
  overflow: hidden;
  background: white;
  aspect-ratio: 2 / 1;
}

.tm-hero__left {
  position: relative;
  background: var(--tm-color);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tm-hero__pattern { position:absolute; inset:0; width:100%; height:100%; opacity:.18; }
.tm-hero__circle  { position:absolute; border-radius:50%; }
.tm-hero__circle--big {
  width:140%; aspect-ratio:1; top:-40%; left:-40%;
  background: var(--tm-color-deep); opacity:.35;
}
.tm-hero__circle--ring {
  width:30%; aspect-ratio:1; bottom:8%; right:8%;
  border:2px solid rgba(255,255,255,.4);
}
.tm-hero__glyph {
  position: relative; z-index: 1;
  font-family: var(--tm-font); font-weight: 800;
  font-size: clamp(48px, 12vw, 140px);
  color: white; line-height: 1;
  text-shadow: 0 2px 24px rgba(0,0,0,.25);
}

/* FA-icon glyph. Wordt gerenderd door tm_hero_glyph_html() wanneer
   een group een 'icon' krijgt in tm-themes.php. De <i> erft font-size
   van het glyph-clamp, en duotone-vars worden geforceerd op wit
   zodat het icoon als white-on-color leest tegen de hero-bg. */
.tm-hero__glyph--icon i {
  font-size: inherit;
  line-height: 1;
  color: white;
  --fa-primary-color: white;
  --fa-secondary-color: white;
  --fa-secondary-opacity: .4;
}

/* Inline-SVG glyph. Voor brand-iconen die niet in de geïnstalleerde FA
   webfont zitten (zoals fa-claude). De SVG erft 'currentColor' en
   schaalt mee met de glyph-font-size — height = 1em zorgt dat 'ie even
   groot wordt als een tekst-glyph in dezelfde clamp. */
.tm-hero__glyph--svg {
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tm-hero__glyph--svg svg {
  height: 1em;
  width: auto;
  fill: currentColor;
}

/* Sequence glyph (multi-char gecentreerd, bv. M365 = '365'). Een single
   font-size-clamp werkt niet voor 3+ tekens: dan wordt 't te breed voor
   de card-helft. Daarom per lengte een progressief kleinere clamp +
   subtiele letter-spacing-compressie. */
.tm-hero__glyph--seq {
  letter-spacing: -.02em;
}
.tm-hero__glyph--seq-2 { font-size: clamp(40px, 10vw, 110px); letter-spacing: -.02em; }
/* Voor 3+ tekens géén font-size-override (anders verliest 'ie van EduBlink's
   `.edublink-single-course .tm-hero__glyph`-rule met specificiteit 0,2,0).
   In plaats daarvan horizontaal comprimeren via scaleX zodat de letters
   smaller worden zonder dat de height krimpt — "365" blijft op gelijke
   hoogte met single-char glyphs ('T', 'W', enz.). */
.tm-hero__glyph--seq-3,
.tm-hero__glyph--seq-4,
.tm-hero__glyph--seq-5 {
  display: inline-block;
  letter-spacing: -.04em;
  transform: scaleX(.78);
}

/* Anchored glyphs (AI: 'A' + 'i'). Het eerste teken (.glyph-main) acteert
   als anchor en wordt door de flex-parent (.tm-hero__left) gecentreerd;
   de tail (.glyph-tail) hangt absoluut aan de rechterkant zonder breedte
   bij te dragen, zodat de "A" exact in het midden van het linker-paneel
   uitkomt en de "i" er rechts naast verschijnt. */
.tm-hero__glyph--multi {
  display: inline-block;
}
.tm-hero__glyph--multi .tm-hero__glyph-main {
  display: block;
}
.tm-hero__glyph--multi .tm-hero__glyph-tail {
  position: absolute;
  left: 100%;
  /* Empirisch afgestemd zodat de visuele onderkanten van A en i op
     één lijn liggen. Positieve bottom = i wordt naar boven geduwd
     vanaf parent-bottom; in Montserrat zit de i-stem-bottom onder de
     baseline waardoor 'ie bij bottom:0 doorzakt onder de A. */
  bottom: .08em;
  font: inherit;
  font-size: .6em;
  line-height: 1;
  color: inherit;
  text-shadow: inherit;
}
.tm-hero__name {
  position:absolute; bottom:10px; left:14px;
  font-family: var(--tm-font); font-weight:700;
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: white; opacity:.85;
}

.tm-hero__right {
  background: var(--tm-color-soft);
  display: flex; align-items: stretch; justify-content: stretch;
}
.tm-hero__right svg { width:100%; height:100%; display:block; }

/* Duration overlay */
.tm-hero__duration { position:absolute; top:12px; right:12px; }

/* ============== BADGES ============== */
.tm-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 10px;
  font-family: var(--tm-font); font-weight: 700;
  font-size: 11px; line-height: 1; white-space: nowrap;
}

/* Niveau */
.tm-badge--level { border-radius: var(--tm-radius-pill); }
.tm-badge--level::before {
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
}
.tm-badge--level.is-beginner    { background: var(--tm-lvl-beginner-bg);  color: var(--tm-lvl-beginner-fg); }
.tm-badge--level.is-beginner::before    { background: var(--tm-lvl-beginner-dot); }
.tm-badge--level.is-gevorderd   { background: var(--tm-lvl-gevorderd-bg); color: var(--tm-lvl-gevorderd-fg); }
.tm-badge--level.is-gevorderd::before   { background: var(--tm-lvl-gevorderd-dot); }
.tm-badge--level.is-expert      { background: var(--tm-lvl-expert-bg);    color: var(--tm-lvl-expert-fg); }
.tm-badge--level.is-expert::before      { background: var(--tm-lvl-expert-dot); }
.tm-badge--level.is-alle-niveaus{ background: var(--tm-lvl-alle-bg);      color: var(--tm-lvl-alle-fg); }
.tm-badge--level.is-alle-niveaus::before{ background: var(--tm-lvl-alle-dot); }

/* Label */
.tm-badge--label { border-radius: var(--tm-radius-tag); color:#fff; border:1px solid transparent; }
.tm-badge--label.is-nieuw      { background: var(--tm-lbl-nieuw-bg); }
.tm-badge--label.is-populair   { background: var(--tm-lbl-populair-bg); }
.tm-badge--label.is-bestseller { background: var(--tm-lbl-bestseller-bg); }
.tm-badge--label.is-nieuwe-methode-2026 {
  background: var(--tm-lbl-methode-bg);
  color: var(--tm-lbl-methode-fg);
  border-color: var(--tm-lbl-methode-border);
}
.tm-badge--label.is-vol         { background: var(--tm-lbl-vol-bg); }
.tm-badge--label.is-last-seats  { background: var(--tm-lbl-lastseats-bg); }

/* Duur */
.tm-badge--duration {
  border-radius: var(--tm-radius-tag);
  background: var(--tm-dur-bg); color:#fff;
  padding: 5px 10px; box-shadow: var(--tm-dur-shadow);
}
.tm-badge--duration svg { display:block; }