/* ==========================================================================
   Telked animált infografikák — közös stíluslap
   --------------------------------------------------------------------------
   Minden szabály a .tka névtérre van scope-olva, így nem ütközhet a téma
   vagy más plugin stílusaival. A színek a brand-tokens-*.css változóiból
   jönnek, de mindegyiknek van fallback értéke, ezért a komponensek akkor is
   helyesen jelennek meg, ha a tokenkészlet nem töltődött be.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Megjelenítési failsafe
   --------------------------------------------------------------------------
   A komponens rejtve indul, hogy az animáció ne "félbevágva" kezdődjön.
   Ha a JS bármiért nem fut le (hiba, letiltott script, GSAP nem töltődött),
   a CSS animáció 2,5 másodperc után felfedi a grafikát. Így soha nem
   fordulhat elő, hogy a látogató üres helyet lát.
   -------------------------------------------------------------------------- */
[data-tka] {
  opacity: 0;
  animation: tka-failsafe 1ms linear 2.5s forwards;
}

[data-tka].tka-ready {
  opacity: 1;
  animation: none;
}

@keyframes tka-failsafe {
  to { opacity: 1; }
}

/* Csökkentett mozgásigény: azonnal a végállapot, animáció nélkül. */
@media (prefers-reduced-motion: reduce) {
  [data-tka] {
    opacity: 1;
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   2. Alap tokenek és tipográfia
   -------------------------------------------------------------------------- */
.tka {
  --tka-green: var(--brand-primary, #01bf60);
  --tka-green-deep: var(--brand-primary-deep, #00a350);
  --tka-green-soft: var(--brand-surface-soft, #ebfff5);
  --tka-mint: #6fe6a8;
  --tka-warn: #d98b5f;
  --tka-warn-soft: #fbf6e8;
  --tka-ink: var(--brand-dark, #171a18);
  --tka-ink-soft: #22262a;
  --tka-text: var(--brand-text-primary, #333333);
  --tka-text-2: var(--brand-text-secondary, #5f6663);
  --tka-muted: var(--brand-text-muted, #8a918e);
  --tka-border: var(--brand-border, #dfe5e2);
  --tka-border-2: var(--brand-border-strong, #c8d0cc);
  --tka-surface: var(--brand-surface, #ffffff);
  --tka-bg: var(--brand-background, #f7f8f9);
  --tka-radius: var(--radius-xl, 24px);
  --tka-shadow: var(--shadow-md, 0 10px 30px rgba(23, 26, 24, 0.07));
  --tka-font: var(--font-sans, 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif);
  --tka-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, 'SF Mono', monospace);

  /* Rajzoláshoz használt SVG színek — a .tka--dark felülírja őket. */
  --tka-axis: var(--tka-border);
  --tka-grid: #eef1ef;
  --tka-label: var(--tka-muted);
  --tka-label-strong: var(--tka-ink);

  position: relative;
  font-family: var(--tka-font);
  color: var(--tka-text);
  -webkit-font-smoothing: antialiased;
}

.tka *,
.tka *::before,
.tka *::after {
  box-sizing: border-box;
}

/* Sötét változat — a 04. és 05. grafikonhoz. */
.tka--dark {
  --tka-surface: var(--tka-ink);
  --tka-bg: var(--tka-ink);
  --tka-text: #f2f4f3;
  --tka-text-2: #aeb5b1;
  --tka-muted: #7d857f;
  --tka-border: #3a3f3c;
  --tka-border-2: #4a504c;
  --tka-axis: #3a3f3c;
  --tka-grid: #2a2e2c;
  --tka-label: #7d857f;
  --tka-label-strong: #ffffff;
  color: #f2f4f3;
}

/* --------------------------------------------------------------------------
   3. Kártya-váz
   -------------------------------------------------------------------------- */
.tka.tka-price-value.tka--dark.tka-ready {
    background: var(--tka-bg);
    border: 1px solid var(--tka-border);
    border-radius: var(--tka-radius);
    padding: clamp(1.4rem, 3vw, 2.2rem);
}

.tka--dark .tka-card {
  background: var(--tka-ink);
  border-color: #2c302e;
}

/* Keret nélküli változat, ha az oldal már saját kártyába teszi. */
.tka--plain .tka-card {
  background: none;
  border: 0;
  padding: 0;
}

.tka-eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--tka-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--ls-overline, 0.14em);
  text-transform: uppercase;
  color: var(--tka-muted);
}

.tka--dark .tka-eyebrow {
  color: var(--tka-mint);
}

.tka-note {
  margin: 1.1rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--tka-text-2);
}

.tka-note strong {
  color: var(--tka-label-strong);
  font-weight: 700;
}

.tka-note--center {
  text-align: center;
}

/* --------------------------------------------------------------------------
   4. SVG ábra
   -------------------------------------------------------------------------- */
.tka-figure {
  margin: 0;
}

.tka-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

/* A hajszálvonalak nagyításnál sem hízhatnak meg. */
.tka-hairline {
  vector-effect: non-scaling-stroke;
}

.tka-svg-text {
  font-family: var(--tka-font);
}

.tka-svg-mono {
  font-family: var(--tka-mono);
}

/* --------------------------------------------------------------------------
   5. Folyamat-idővonal
   --------------------------------------------------------------------------
   Szándékosan HTML + CSS, nem SVG: a feliratok így valódi szövegek, amelyek
   tördelnek, örökölik a betűméretet és mobilon is olvashatók maradnak. Az
   eredeti minta 1160 egység széles SVG-je telefonon ~4 px-es szövegre
   zsugorodott — ez a felépítés ezt a hibát szünteti meg.
   -------------------------------------------------------------------------- */
/* Nincs felső padding: a pontok 24px-es dobozának középvonala így pontosan
   12px-en van, ahová a sáv is esik (top:11px + 1px félmagasság). Ha ide
   padding kerülne, a pontok lecsúsznának a sávról. A komponens körüli
   levegőt a .tka-card, illetve a szekció adja. */
.tka-tl {
  position: relative;
}

.tka-tl-rail {
  position: absolute;
  top: 11px;
  left: calc(50% / var(--tka-n, 5));
  right: calc(50% / var(--tka-n, 5));
  height: 2px;
  border-radius: 2px;
  background: var(--tka-border);
}

.tka-tl-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tka-green-deep), var(--tka-green));
  transform: scaleX(0);
  transform-origin: left center;
}

.tka-tl-comet {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 999px;
  background: var(--tka-green);
  box-shadow: 0 0 0 6px rgba(1, 191, 96, 0.18), 0 0 18px 4px rgba(1, 191, 96, 0.45);
  opacity: 0;
  pointer-events: none;
}

.tka-tl-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--tka-n, 5), 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.tka-tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
}

.tka-tl-marker {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
}

.tka-tl-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 999px;
  background: var(--tka-green);
  box-shadow: 0 0 0 4px var(--tka-bg);
}

.tka-tl-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 999px;
  background: var(--tka-green);
  opacity: 0.16;
  pointer-events: none;
}

.tka-tl-step:not(.is-final) .tka-tl-halo {
  display: none;
}

.tka-tl-step.is-final .tka-tl-dot {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
}

.tka-tl-text {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tka-label-strong);
  text-wrap: balance;
}

.tka-tl-step.is-final .tka-tl-text {
  font-weight: 700;
  color: var(--tka-green-deep);
}

/* Mobil: az idővonal függőlegessé fordul, a feliratok a pontok mellé
   kerülnek. Így hosszú lépésnevek is elférnek. */
@media (max-width: 760px) {
  /* Ugyanaz a logika elfordítva: a sáv az első és az utolsó pont
     középvonalánál kezdődik és végződik (12px = a 24px-es pontdoboz fele). */
  .tka-tl-rail {
    top: 12px;
    bottom: 12px;
    left: 11px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .tka-tl-fill {
    transform: scaleY(0);
    transform-origin: center top;
    background: linear-gradient(180deg, var(--tka-green-deep), var(--tka-green));
  }

  .tka-tl-steps {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }

  /* flex-start, nem center: így a pont a sor tetején marad, és egy két sorra
     tördelő felirat sem tolja el a sávtól. */
  .tka-tl-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1.1rem;
  }

  .tka-tl-text {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   6. „Négy szereplő → egy partner" — dobozok
   -------------------------------------------------------------------------- */
.tka-role-box {
  fill: var(--tka-surface);
  stroke: var(--tka-border-2);
  stroke-width: 1.5;
}

.tka-role-text {
  fill: var(--tka-text-2);
  font-size: 12.5px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Rácsok, tengelyek, feliratok az SVG grafikonokon
   -------------------------------------------------------------------------- */
.tka-axis {
  stroke: var(--tka-axis);
  stroke-width: 1.5;
}

.tka-grid-line {
  stroke: var(--tka-grid);
  stroke-width: 1;
}

.tka-guide {
  stroke: var(--tka-border-2);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

.tka-guide--green {
  stroke: var(--tka-green);
}

.tka-cap {
  fill: var(--tka-label);
  font-size: 10px;
}

.tka-lab-title {
  fill: var(--tka-green-deep);
  font-size: 13.5px;
  font-weight: 700;
}

.tka--dark .tka-lab-title {
  fill: var(--tka-mint);
}

.tka-lab-sub {
  fill: var(--tka-label);
  font-size: 10px;
}

.tka-lab-warn {
  fill: var(--tka-warn);
  font-size: 13.5px;
  font-weight: 700;
}