/* =========================================
   COMPONENTS — Figma komponensekből átültetett elemek
   Forrás: Medalyst - 02 Components (élő értékek, lásd DECISIONS.md D-007)
   ========================================= */

/* ---------- Button (Figma: button, node 1018:14717) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  font-feature-settings: "calt" 0, "kern" 0;
  white-space: nowrap;
  border-radius: var(--radius-16);
  /* A hover-emelés ugyanazzal a mozgással megy, mint a menü-pillé: --duration-slow
     + --ease-smooth-out. Korábban 0.06s `ease` volt itt — az a LENYOMÁS azonnali
     taktilis visszajelzésének szólt (D-024), de a hoverre is ráragadt, és attól
     kapcsolgatósnak hatott a pill lágy emelkedéséhez képest.

     Az ÁRNYÉK szándékosan NINCS az átmenetben. Ez egy kemény (blur nélküli)
     offset árnyék — matrica-hatás, nem lágy fény. Ha átmenetet kap, akkor
     „nincs árnyék" → „árnyék" irányban a böngésző az ÁTLÁTSZÓ felől interpolál,
     és a szín beúszik a végleges tónusba. A kívánt hatás az, hogy az árnyék az
     első pillanattól a végleges színén álljon a gomb mögött, és csak a gomb
     MOZGÁSA legyen lágy. Ezért a box-shadow kimarad a listából: azonnal vált. */
  /* Az átmenet a SZÁMON van, nem a transformon: abból a transform és az árnyék
     offsetje együtt, ugyanabban a fázisban következik. */
  transition: --btn-lift var(--duration-slow) var(--ease-smooth-out),
              background-color var(--duration-quick) ease;
  text-decoration: none;
}

/* méretek — Figma: lg 56/24, md 48/20, sm 40/16 (14px szöveg), xs 32/12 */
.btn--lg  { min-height: var(--component-height-lg); padding: 0 var(--spacing-24); }
.btn--md  { min-height: var(--component-height-md); padding: 0 var(--spacing-20); }
.btn--sm  { min-height: var(--component-height-sm); padding: 0 var(--spacing-16); font-size: var(--typo-small-size); line-height: var(--typo-small-line); border-radius: var(--radius-12); }
.btn--xs  { min-height: var(--component-height-xs); padding: 0 var(--spacing-12); font-size: var(--typo-small-size); line-height: var(--typo-small-line); border-radius: var(--radius-8); }

/* Generális hover-logika (Figma 2087:2697): a gomb alapból LAPOS, árnyék nélkül —
   hoverre megemelkedik és alá kerül a kemény (blur nélküli) offset árnyék, lenyomásra
   visszaül a helyére. Az emelés mértéke = az árnyék offsetje, így a gomb alsó éle
   nyugalomban és lenyomva ugyanott van. */
/* ---------- A gomb-hover EGY rendszer ----------
   Minden gomb UGYANÚGY mozog; a variánsok között kizárólag a SZÍN különbözik.

   Ehhez két, egymástól független tengely van, és mindkettő egy-egy lokális
   változó:
     • --btn-lift          → MÉRET szerint (mekkorát emelkedik)
     • --btn-shadow-color  → VARIÁNS szerint (milyen színű alatta az árnyék)

   Az árnyék offsetje nem külön token, hanem magából az emelésből SZÁMOL:
   `0 calc(-1 * var(--btn-lift)) 0`. Ettől a gomb alsó éle nyugalomban és
   hoverben is pontosan ott van, ahol az árnyék alja — szerkezetileg nem tud
   elcsúszni.

   Miért kellett: korábban az emelés (--hover-lift*) és az árnyék
   (--shadow-press-*) két külön tokencsalád volt, és a párosítást variánsonként
   ÉS méretenként kézzel kellett felsorolni. A `btn--secondary.btn--lg`
   párosítás egyszerűen hiányzott: mérve 4px-t emelkedett, de csak 2px árnyékot
   kapott — ezért tűnt a „Try it out" mozgása másnak, mint a „Book a demo"-é.
   Egy hiányzó szabály helyett most nincs mit felsorolni.

   Az árnyék továbbra sem átmenetes (D-072): az első frame-től a végleges
   színén áll. A MOZGÁS viszont lágy, és minden gombon azonos. */
/* A `--btn-lift` REGISZTRÁLT tulajdonság, nem sima változó. Enélkül a böngésző
   nem tudja interpolálni: a rá épülő transform és árnyék-offset a hover első
   frame-jén a végértékre ugrana. Így viszont EGY animált szám van, amiből
   mindkettő származik — a gomb és az árnyéka szerkezetileg nem tud különválni.

   Ez javítja a korábbi rándulást: amikor az árnyék kikerült az átmenetből
   (hogy a SZÍNE azonnal teljes legyen), vele együtt az OFFSETJE is azonnalivá
   vált. Mérve: 61 ms-nál a gomb 0,71 px-t emelkedett, az árnyék viszont már a
   teljes 4 px-en állt — 3,29 px-nyi kilógás egy még álló gomb alól. A szín
   továbbra sem interpolál (nem az változik), csak a geometria. */
@property --btn-lift {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
/* ugyanez a menü-pillnek (css/main.css): ott a `transform` viszi a hover-emelést,
   mert a `translate` sávot a görgetéses ki/beúszás foglalja */
@property --pill-lift {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
/* ugyanez a videó play gombjának (css/main.css) — az is gomb, ugyanaz a modell */
@property --play-lift {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

.btn {
  --btn-lift: 0px;                               /* nyugalomban nincs emelés */
  --btn-lift-hover: var(--hover-lift-sm);        /* md/sm/xs */
  --btn-shadow-color: var(--color-neutral-20);   /* alapértelmezés: semleges */
}
.btn--lg { --btn-lift-hover: var(--hover-lift); }

/* Hover-hitbox — a mutató nem eshet ki az emelkedő elem alól.
   Emeléskor az elem alsó éle a kurzor FÖLÉ kerül: a hover megszűnik, az elem
   visszaesik, és a ciklus újraindul (villogás). Ezért minden emelkedő elem köré
   láthatatlan sáv kerül: oldalt és felül --hover-pad, alul pad + a saját emelése,
   így a mutató az elmozdulás után is az elemen marad. Mellékhatásként a célpont is
   nagyobb lesz. Az `isolation` + `z-index: -1` a sávot a saját háttere mögé teszi,
   hogy soha ne fogja el a tartalom kattintásait — csak a kilógó pereme aktív.
   A sáv mélysége is a --btn-lift-ből jön, tehát mérethez külön szabály nem kell. */
.btn { position: relative; isolation: isolate; }
.btn::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--hover-pad)) calc(-1 * var(--hover-pad))
         calc(var(--btn-lift-hover) - var(--hover-pad));
}

/* A transform és az árnyék MINDIG jelen van, csak nulla emelésnél nem látszik.
   Így nincs „nincs árnyék → van árnyék" váltás, ami a színt is interpolálná. */
.btn {
  transform: translateY(var(--btn-lift));
  box-shadow: 0 calc(-1 * var(--btn-lift)) 0 var(--btn-shadow-color);
}
.btn:hover { --btn-lift: var(--btn-lift-hover); }
/* A lenyomás MARAD azonnali: a taktilis visszajelzés nem várhat 400ms-ot (D-024).
   Elengedéskor viszont már az alap-transition viszi vissza, tehát a mozgás lágy. */
.btn:active {
  --btn-lift: 0px;
  /* a lenyomás gyors, de ugyanazon az egy számon megy — a gomb és az árnyéka
     itt sem válik külön */
  transition: --btn-lift 0.06s ease,
              background-color var(--duration-quick) ease;
}

.btn--primary {
  background: var(--action-primary-surface);
  color: var(--action-primary-content);
}
/* a felület színe hoverre NEM változik (Figma 2087:2697: action/primary-surface
   mindkét állapotban #7541ee) — a visszajelzést az emelés + az árnyék adja.
   A variáns egyetlen dolga: megmondani az árnyék SZÍNÉT. */
.btn--primary { --btn-shadow-color: var(--color-primary-70); }
.btn--primary:active { background: var(--action-primary-surface-pressed); }

.btn--secondary {
  background: var(--action-secondary-surface);
  color: var(--action-secondary-content);
  border: 2px solid var(--action-secondary-border);
}
.btn--secondary { --btn-shadow-color: var(--color-neutral-20); }
.btn--secondary:active { background: var(--action-secondary-surface-pressed); }

.btn--contrast {
  background: var(--action-contrast-surface);
  color: var(--action-contrast-content);
}
.btn--contrast { --btn-shadow-color: var(--color-neutral-70); }
.btn--contrast:active { background: var(--action-contrast-surface-pressed); }

/* fehér gomb sötét/brand felületre (a contrast párja invert környezetben) */
.btn--invert {
  background: var(--color-white);
  color: var(--text-primary);
}
.btn--invert { --btn-shadow-color: var(--color-black-a35); }

.btn:disabled, .btn--disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

.btn__icon { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; }

/* ghost — színes/kép felületen ülő másodlagos CTA */
.btn--ghost {
  background: transparent;
  color: var(--text-on-brand);
  border: 2px solid var(--border-invert);
}
.btn--ghost { --btn-shadow-color: transparent; }  /* átlátszó felületen a kemény offset nem értelmezhető */
.btn--ghost:hover { background: var(--color-white-a20); }
.btn--ghost:active { background: var(--color-white-a35); }

/* ---------- Badge / chip ---------- */

/* eyebrow — szekciócímke */
.eyebrow {
  display: inline-block;
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--spacing-16);
}
.eyebrow--invert { color: var(--brand-secondary); }

/* ---------- Card ---------- */

.card {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-container-md);
  padding: var(--spacing-24);
}
.card--raised { box-shadow: var(--shadow-card-subtle); }
.card--sunken { background: var(--surface-alt); border: none; }

/* ---------- Form elemek ---------- */

.field { display: flex; flex-direction: column; gap: var(--spacing-8); }
.field__label {
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  font-weight: 700;
  color: var(--text-primary);
}
.field__input {
  min-height: var(--component-height-md);
  padding: 0 var(--spacing-16);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-12);
  background: var(--surface-default);
  color: var(--text-primary);
  font-size: var(--typo-body-size);
  transition: border-color var(--duration-quick) ease, box-shadow var(--duration-quick) ease;
}
.field__input::placeholder { color: var(--text-tertiary); }
.field__input:focus {
  outline: none;
  border-color: var(--border-active);
  box-shadow: 0 0 0 var(--border-width-focus) var(--border-focus);
}

/* ---------- Check-lista elem ---------- */

.check-item { display: flex; align-items: flex-start; gap: var(--spacing-12); }
.check-item__icon {
  width: var(--icon-xl); height: var(--icon-xl); flex-shrink: 0;
  /* `inline-grid`, nem `grid`: blokként a szülő `text-align: center`-je nem hat
     rá, és a táblázat-cellákban mérve 49px-szel balra állt a cella közepétől.
     A `vertical-align` a sor alapvonalához igazítja. */
  display: inline-grid; place-items: center; vertical-align: middle;
  background: var(--brand-secondary);
  color: var(--color-secondary-90);
  border-radius: var(--radius-full);
}
.check-item__icon svg { width: var(--icon-xs); height: var(--icon-xs); }
/* TILTOTT állapot: ugyanaz az alakzat, csak kikapcsolva — a „nincs meg" így egy
   ismerős jel másik állapota, nem egy másik jel (X). A pipa halványan bent
   marad, hogy a sor ne üresedjen ki. */
.check-item__icon--off {
  background: var(--surface-neutral);
  color: var(--text-disabled);
  box-shadow: none;
}

/* négyzetes changkbox változat — a Figma checkbox komponens élő állapotai (1220:13759):
   üres: fehér + 2px border-alt + kemény árnyék · pipált: lila + lila kemény árnyék */
.check-item--square .check-item__icon {
  background: var(--interactive-active);
  color: var(--color-white);
  border-radius: var(--radius-full); /* user döntés: teljesen kerek, oldalszerte egységesen */
  box-shadow: var(--shadow-press-primary-sm);
}

/* scroll-ra bepipálódó változat (.check-anim listán): üres alapállapotból indul,
   a .is-checked osztály pipálja be pop animációval — csak egyszer, betöltéskor */
.check-anim .check-item__icon {
  background: var(--surface-default);
  border: 2px solid var(--border-alt);
  box-shadow: var(--shadow-press-neutral-sm);
  transition: background-color var(--duration-quick) ease, border-color var(--duration-quick) ease, box-shadow var(--duration-quick) ease;
}
.check-anim .check-item__icon svg {
  opacity: 0;
  transform: scale(0);
}
.check-anim .is-checked .check-item__icon {
  background: var(--interactive-active);
  border-color: transparent;
  box-shadow: var(--shadow-press-primary-sm);
  animation: checkbox-pop 0.4s var(--ease-bounce);
}
.check-anim .is-checked .check-item__icon svg {
  opacity: 1;
  transform: scale(1);
  transition: transform 0.3s var(--ease-bounce) var(--duration-micro), opacity 0.1s ease var(--duration-micro);
}

@keyframes checkbox-pop {
  0% { transform: scale(0.85); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .check-anim .check-item__icon,
  .check-anim .is-checked .check-item__icon,
  .check-anim .is-checked .check-item__icon svg {
    animation: none;
    transition: none;
  }
}

/* ---------- Pályázati infoblokk (Demján Sándor Program) ----------
   Kötelező elem MINDEN oldalon (KTK: „Az elkészült weboldalak mindegyikén
   kötelező jelleggel meg kell jeleníteni…”), a lábléc alján.
   A kötelező mondat SZÓ SZERINT, magyarul marad angol nyelvi módban is —
   előírt szöveg, nem fordítható. A logók előírt arányokkal, torzítás nélkül;
   a méreteket a --dsp-* tokenek rögzítik (lásd foundation.css). */
.funding {
  position: relative;
  padding-top: var(--spacing-40);
  text-align: center;
}
/* Az elválasztó vonal a RÁCS szélein kezdődik és végződik. Border-ként a
   `.container` KÜLSŐ élén futott, tehát mindkét oldalon a padding értékével
   (24px) túllógott a tartalom-oszlopokon — mérve 180…1260 a 204…1236 helyett.
   Pszeudóelemként pontosan a rácsra ül, és a lábléc hasábjaival egy vonalban
   kezdődik. */
.funding::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--container-pad);
  right: var(--container-pad);
  height: 1px;
  background: var(--color-white-a20);
}
/* A kötelező mondat BALRA, a jogi hivatkozások JOBBRA, egy soron. A blokk
   maga középre zárt marad (a logók miatt), ezért ez a sor kimondottan
   `text-align: left`-et kap — különben a mondat örökölné a középre zárást.
   Szűk nézetben a két rész egymás alá kerül és középre zár: 375px-en a mondat
   maga is három sorra törik, mellette a linkek olvashatatlanul keskenyek
   lennének. */
.funding__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-16) var(--spacing-40);
  margin-bottom: var(--spacing-24);
  text-align: left;
}
.funding__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-24);
}
.funding__legal a {
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  color: var(--color-white-a50);
  transition: color var(--duration-quick) ease;
}
.funding__legal a:hover { color: var(--brand-secondary); }

@media (max-width: 720px) {
  .funding__head { justify-content: center; text-align: center; }
  .funding__legal { justify-content: center; }
}

.funding__text {
  margin: 0;
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  font-weight: 700;
  color: var(--color-white);
}
.funding__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--dsp-logo-gap);
  min-height: var(--dsp-block-min);
}
.funding__logos img { display: block; width: auto; }
.funding__dsp { height: var(--dsp-logo-height); }
.funding__neumann { height: var(--dsp-neumann-height); }

/* Szűk nézetben a logók egymás alá kerülnek — a MÉRETÜK nem csökken,
   mert a KTK a legkisebb méretet kötelezővé teszi; csak az elrendezés törik. */
@media (max-width: 720px) {
  .funding__logos { gap: var(--spacing-40); }
}