/* ==========================================================================
   global.css — diakdiaknak.hu
   Egyetlen közös stíluslap. MINDEN oldal ezt tölti be.
   Fejléc- vagy láblécmódosítás = EZT az egy fájlt szerkeszted.

   Tartalom:
     1.  TOKENEK        — színek, tipográfia, térközök, sugarak
     2.  RESET
     3.  TIPOGRÁFIA
     4.  LAYOUT         — container, section
     5.  GOMBOK
     6.  FEJLÉC         — sticky nav + mobil hamburger
     7.  LÁBLÉC
     8.  MENTORKÁRTYA
     9.  SEGÉDOSZTÁLYOK — skip-link, sr-only, skeleton, notice
     10. MOZGÁSCSÖKKENTÉS
   ========================================================================== */


/* ==========================================================================
   1. TOKENEK
   Minden szín, méret és térköz ITT dől el. A komponensek csak változót
   használnak — így a márkaszín cseréje egyetlen sor átírása.
   ========================================================================== */

:root {

  /* --- MÁRKASZÍNEK ------------------------------------------------------
     ⚠️ IDEIGLENES ÉRTÉKEK. A pontos HEX a Canvából pótlandó.
     Csak ezt a két sort kell átírni — minden más ezekre hivatkozik. */

  --brand-dark:  #6B2737;   /* sötét bordó — elsődleges */
  --brand-light: #A85A6B;   /* világos bordó — kiemelés */

  /* A gomb hover SÖTÉTEBB, nem világosabb: a világosabb hover
     rontja a kontrasztot a fehér felirattal. */
  --brand-dark-hover: #55202C;

  /* Halvány bordó felületek (kiemelt doboz, chip háttér).
     Fix HEX, nem color-mix — a régi böngészőkben is működik. */
  --brand-tint:        #F7EFF1;
  --brand-tint-border: #E9D5DA;

  /* --- SEMLEGES SZÍNEK -------------------------------------------------- */

  --color-bg:         #FFFFFF;   /* oldal háttér */
  --color-surface:    #F7F5F3;   /* váltakozó szekció, kártya háttér */
  --color-text:       #1F1B1C;   /* szövegtörzs — 15:1 fehéren */
  --color-text-muted: #6B6469;   /* meta, forrásmegjelölés — 5,4:1 */
  --color-border:     #E4DFE0;
  --color-white:      #FFFFFF;

  /* Állapotszínek — visszajelzéshez, nem dekorációhoz. */
  --color-success: #2E6B4F;
  --color-error:   #A32B2B;

  /* --- TIPOGRÁFIA -------------------------------------------------------
     Rendszerfont-stack: nulla külső kérés, nulla GDPR-kockázat,
     nulla layout shift.
     Ha később self-hosted webfont kell, a /fonts/ mappából @font-face-szel
     töltsd, és CSAK ezt a két változót írd át. Google Fonts CDN TILOS —
     a látogató IP-je nem mehet át a Google-höz. */

  --font-main:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
  --font-display: Georgia, 'Times New Roman', serif;

  /* Skála — a szintek között látható ugrás legyen, ne árnyalatnyi. */
  --fs-hero:  clamp(2rem, 6vw, 3.25rem);   /* H1        32 → 52px */
  --fs-h2:    clamp(1.5rem, 4vw, 2.125rem);/* H2        24 → 34px */
  --fs-h3:    1.1875rem;                   /* H3            19px  */
  --fs-lead:  1.0625rem;                   /* bevezető      17px  */
  --fs-body:  1rem;                        /* szövegtörzs   16px  */
  --fs-small: 0.875rem;                    /* meta          14px  */
  --fs-micro: 0.8125rem;                   /* forrás, jogi  13px  */

  --lh-tight: 1.2;
  --lh-body:  1.65;

  /* --- TÉRKÖZÖK ---------------------------------------------------------
     4px-es alapráccsal. Ne írj a komponensekbe nyers px értéket. */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Szekcióköz — mobilon szűkebb, hogy ne legyen üres a képernyő. */
  --space-section: clamp(2.5rem, 7vw, 4.5rem);

  /* --- FORMA ------------------------------------------------------------ */

  --radius-sm:   6px;
  --radius-card: 12px;
  --radius-pill: 999px;

  --shadow-card:  0 1px 3px rgba(31, 27, 28, 0.06),
                  0 4px 16px rgba(31, 27, 28, 0.05);
  --shadow-hover: 0 4px 10px rgba(31, 27, 28, 0.08),
                  0 12px 28px rgba(31, 27, 28, 0.10);

  --container-max: 1140px;
  --container-pad: 1.25rem;

  --nav-height: 64px;

  --transition: 160ms ease;
}


/* ==========================================================================
   2. RESET
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* A `hidden` attribútum display:none-t jelent — de bármelyik saját
   `display` szabály (pl. .mentor-card{display:flex}) csendben felülírja.
   Ez a sor biztosítja, hogy a hidden MINDIG rejtsen. */
[hidden] {
  display: none !important;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Horgonyra ugrásnál a sticky fejléc ne takarja el a célt. */
  scroll-padding-top: calc(var(--nav-height) + var(--space-4));
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* Hosszú magyar összetett szavak (pl. "programtervező") ne lógjanak
     ki szűk mobilkártyából. */
  overflow-wrap: break-word;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: var(--brand-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Egységes fókuszgyűrű. Soha ne kapcsold ki — billentyűzetes
   navigációnál ez az egyetlen tájékozódási pont. */
:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ==========================================================================
   3. TIPOGRÁFIA
   ========================================================================== */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-text);
  /* Címsorban ne törjön ketté szó — inkább lógjon ki egy hosszú sor. */
  overflow-wrap: normal;
}

h1 {
  font-size: var(--fs-hero);
  letter-spacing: -0.015em;
  max-width: 20ch;
}

h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
  max-width: 24ch;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
}

p {
  /* 68ch a kényelmes olvasás felső határa. */
  max-width: 68ch;
}

p + p {
  margin-top: var(--space-4);
}

/* Bevezető bekezdés — a H2 és a szövegtörzs közötti szint. */
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  max-width: 60ch;
}

.text-muted  { color: var(--color-text-muted); }
.text-small  { font-size: var(--fs-small); }

/* Forrásmegjelölés — a statisztikák alatt KÖTELEZŐ.
   Forrás nélküli adat nem kerülhet ki az oldalra. */
.text-source {
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Szekció fejrésze: cím + bevezető egy blokkban. */
.section__head {
  margin-bottom: var(--space-6);
}

.section__head .lead {
  margin-top: var(--space-3);
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* A footer akkor is alul marad, ha kevés a tartalom. */
main {
  flex: 1;
}

.section {
  padding-block: var(--space-section);
}

.section--surface {
  background-color: var(--color-surface);
}

/* Teli bordó szekció — MINDIG fehér szöveggel (#6B2737 fehéren ~9,7:1). */
.section--brand {
  background-color: var(--brand-dark);
  color: var(--color-white);
}

.section--brand h1,
.section--brand h2,
.section--brand h3 {
  color: var(--color-white);
}

.section--brand p,
.section--brand .lead {
  color: rgba(255, 255, 255, 0.92);
}

.section--brand a {
  color: var(--color-white);
  text-decoration: underline;
}

/* A globális fókuszgyűrű bordó — bordó háttéren láthatatlan lenne. */
.section--brand :focus-visible {
  outline-color: var(--color-white);
  outline-offset: 3px;
}

/* --- Rács ----------------------------------------------------------------
   Mobilon 1 oszlop, aztán auto-fill. Nincs media query: a minmax()
   maga töri a sorokat. */

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}


/* ==========================================================================
   5. GOMBOK
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* 48px magas érintőfelület — a WCAG 2.5.8 minimuma 24px, az Apple
     ajánlása 44px. Mobilon a CTA a legfontosabb elem, ne legyen szűk. */
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background-color: var(--brand-dark);
  color: var(--color-white);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}

.btn:hover {
  background-color: var(--brand-dark-hover);
  color: var(--color-white);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Másodlagos — körvonalas. Ugyanaz a méret, kisebb vizuális súly. */
.btn--outline {
  background-color: transparent;
  border-color: var(--brand-dark);
  color: var(--brand-dark);
}

.btn--outline:hover {
  background-color: var(--brand-tint);
  color: var(--brand-dark);
}

/* Fordított — bordó háttéren álló CTA. Fehér gomb, bordó felirat. */
.btn--inverse {
  background-color: var(--color-white);
  color: var(--brand-dark);
}

.btn--inverse:hover {
  background-color: #F2ECED;
  color: var(--brand-dark);
}

/* Halk művelet — szöveg-gomb. Nem CTA. */
.btn--ghost {
  background-color: transparent;
  color: var(--brand-dark);
  padding-inline: var(--space-3);
}

.btn--ghost:hover {
  background-color: var(--brand-tint);
}

.btn--sm {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-small);
}

.btn--lg {
  min-height: 54px;
  padding: var(--space-4) var(--space-6);
  font-size: 1.0625rem;
}

/* Mobilon a fő CTA teljes szélességű legyen. */
.btn--block {
  display: flex;
  width: 100%;
}

/* Gombcsoport — a gombok egy vonalban indulnak, mobilon egymás alá esnek. */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}


/* ==========================================================================
   6. FEJLÉC
   A markupot a js/main.js rendereli, minden oldalon ugyanabból a
   forrásból. Módosítás: js/main.js NAV_LINKS + ez a blokk.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--brand-dark);
  white-space: nowrap;
  flex-shrink: 0;
}

.site-header__logo:hover {
  text-decoration: none;
  color: var(--brand-dark-hover);
}

/* Négyzetes jel a szóvédjegy előtt. A magasság fix, a szélesség ebből
   következik — így egy nem pontosan négyzetes fájl sem torzul.
   A `flex-shrink: 0` megakadályozza, hogy szűk mobilon összenyomódjon. */
.site-header__logo-pic {
  display: flex;
  flex-shrink: 0;
}

.site-header__logo-mark {
  height: 32px;
  width: auto;
  flex-shrink: 0;
  border-radius: 4px;
}

/* --- Hamburger — CSAK mobilon látszik ------------------------------------ */

.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.site-header__toggle:hover {
  background-color: var(--color-surface);
}

/* Három vonal, tisztán CSS-ből — nincs ikonkészlet-függőség. */
.site-header__toggle-bars,
.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
}

.site-header__toggle-bars {
  position: relative;
}

.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-header__toggle-bars::before { top: -6px; }
.site-header__toggle-bars::after  { top:  6px; }

/* Nyitott állapotban X. */
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars {
  background-color: transparent;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* --- Menü ---------------------------------------------------------------- */

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-header__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-header__link {
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: 500;
  padding-block: var(--space-2);
}

.site-header__link:hover {
  color: var(--brand-dark);
  text-decoration: none;
}

/* Aktív oldal — a js/main.js teszi rá az aria-current="page"-et,
   a stílus abból következik. Nincs külön .is-active osztály:
   egy állapot, egy forrás. */
.site-header__link[aria-current="page"] {
  color: var(--brand-dark);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--brand-light);
}

/* Halványabb menüpont — ma egyedül a „Legyél mentor".

   Más AUDITÓRIUMNAK szól, mint a többi menüpont: azok a diák útját
   írják le (mentorok → felkészülés → eszközök → rólunk), ez viszont a
   mentorjelöltnek szól. Jelen kell lennie minden oldalon, de nem
   versenyezhet a diák konverziós útjával — ezért halványabb, és ezért
   nem gomb (a gomb a „Regisztráció").

   ⚠️ A HOVER ÉS AZ AKTÍV ÁLLAPOT TELJES ERŐVEL JÖN VISSZA. A
      halványítás a nyugalmi állapot dolga: aki ráviszi az egeret vagy
      épp azon az oldalon áll, ugyanolyan tisztán lássa, mint bármelyik
      másik menüpontot. Egy tartósan halvány aktív link olvashatatlan
      lenne, és a kontraszt-követelménynek sem felelne meg. */
.site-header__link--muted {
  color: var(--color-text-muted);
  font-weight: 400;
}

.site-header__link--muted:hover,
.site-header__link--muted[aria-current="page"] {
  color: var(--brand-dark);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* „Kilépés" — <button>, mert állapotot vált, nem navigál; de úgy néz
   ki, mint a mellette álló link. A böngésző gombstílusát ezért
   nullázzuk. Halványabb, mint a „Fiókom": ritkán kell, és nem ez a
   fejléc fő művelete. */
.site-header__logout {
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  cursor: pointer;
  padding-inline: 0;
}

.site-header__logout:hover {
  color: var(--brand-dark);
}

/* --- Mobil fejléc, 860px alatt ------------------------------------------- */

@media (max-width: 860px) {

  .site-header__nav {
    /* Lenyíló panel a fejléc alatt, teljes szélességben. */
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-3) var(--container-pad) var(--space-5);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
  }

  /* Zárt állapot. A data-open attribútumot a js/main.js írja,
     az aria-expanded-del együtt — a kettő SOHA nem térhet el. */
  .site-header__nav[data-open="false"] {
    display: none;
  }

  .site-header__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-header__link {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-body);
  }

  .site-header__link[aria-current="page"] {
    box-shadow: none;
  }

  .site-header__actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--space-4);
  }

  .site-header__actions .btn {
    width: 100%;
  }

  /* Mobilon a menü alján, a „Fiókom" gomb alatt — balra zárva, mint a
     többi menüpont, és elég nagy érintési céllal. */
  .site-header__logout {
    text-align: left;
    min-height: 44px;
    font-size: var(--fs-body);
    border-bottom: 0;
  }
}

/* 861px fölött nincs hamburger, és a menü mindig látszik — akkor is,
   ha a data-open="false" bent ragadt egy ablakátméretezés után. */
@media (min-width: 861px) {

  .site-header__toggle {
    display: none;
  }

  .site-header__nav[data-open="false"] {
    display: flex;
  }
}

/* Az abszolút pozicionált mobilmenü ehhez igazodik. */
.site-header__inner {
  position: relative;
}


/* ==========================================================================
   7. LÁBLÉC
   Szintén a js/main.js rendereli.
   ========================================================================== */

.site-footer {
  background-color: var(--brand-dark);
  color: rgba(255, 255, 255, 0.88);
  padding-block: var(--space-7) var(--space-6);
  margin-top: var(--space-8);
  font-size: var(--fs-small);
}

.site-footer a {
  color: var(--color-white);
}

.site-footer :focus-visible {
  outline-color: var(--color-white);
  outline-offset: 3px;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-white);
}

/* Két linksor: navigáció és jogi. Középpont nélkül, balra zárva —
   a lábléc olvasható lista, nem dísz. */
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.site-footer__links--legal {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-micro);
}

.site-footer__links--legal a {
  color: rgba(255, 255, 255, 0.82);
}

.site-footer__contact {
  color: rgba(255, 255, 255, 0.82);
}

.site-footer__bottom {
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--fs-micro);
  color: rgba(255, 255, 255, 0.68);
}

/* Fejlesztői kredit — a jogi linkek alatt, a lábléc legalján.
   A kredit maga nem link; a bencedigitals.hu linkje alatta külön sor.
   Halványabb a copyright sornál — ez a legkisebb súlyú elem az oldalon. */
.site-footer__credit {
  margin-top: var(--space-2);
  color: rgba(255, 255, 255, 0.52);
}

/* A fejlesztő oldalára mutató link a kredit alatt, külön sorban.
   Egy fokkal nagyobb a kreditnél; a sötét bordó láblécen világos szöveg,
   a márka világos bordójával aláhúzva (bordó-a-bordón nem látszana). */
.site-footer__credit-link {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
}

.site-footer__credit-link a {
  color: var(--color-white);
  text-decoration: underline;
  text-decoration-color: var(--brand-light);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.15s, text-decoration-color 0.15s;
}

.site-footer__credit-link a:hover {
  color: rgba(255, 255, 255, 0.82);
  text-decoration-color: var(--color-white);
}


/* ==========================================================================
   8. MENTORKÁRTYA
   Hierarchia a landing-content.md szerint, felülről lefelé:
     fotó → keresztnév + kor → egyetem · szak → évfolyam →
     bio-részlet → "Össze tud kötni" → ÁR → CTA

   ⛔ TILOS ebbe a kártyába: csillag, értékelés, "top mentor" jelvény.
      Nincs mögötte adat — hamis social proof lenne.
   ========================================================================== */

.mentor-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

.mentor-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* --- Fotó ---------------------------------------------------------------
   Az arc a bizalom első jele: nagy és valódi. Stock fotó TILOS.
   Fix arányú keret, hogy a rácsban ne ugráljanak a kártyák. */

.mentor-card__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface);
}

.mentor-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portrénál a fej felül van — középre vágás levágná. */
  object-position: center 25%;
}

/* Fotó nélküli mentor: monogram, nem placeholder-sziluett.
   A sziluett azt sugallja, "hiányzik valami"; a monogram nem. */
.mentor-card__photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-tint);
  color: var(--brand-dark);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
}

/* --- Törzs --------------------------------------------------------------- */

.mentor-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  /* Kitölti a maradék helyet, így a CTA minden kártyán alul ér véget. */
  flex: 1;
}

.mentor-card__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  max-width: none;
}

/* Egyetem · szak — e szerint keres a látogató, ezért a név alatt
   közvetlenül, nem a meta-blokk aljára süllyesztve. */
.mentor-card__study {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--brand-dark);
  /* A gap-et a szülő adja; itt csak a névhez húzzuk vissza. */
  margin-top: calc(var(--space-3) * -1 + var(--space-1));
}

.mentor-card__year {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-top: calc(var(--space-3) * -1 + var(--space-1));
}

/* Bio-részlet — konkrét tapasztalat, nem "szeretek segíteni".
   Max 3 sor, hogy a rácsban egyforma magasak legyenek a kártyák. */
.mentor-card__bio {
  font-size: var(--fs-small);
  color: var(--color-text);
  max-width: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- "Össze tud kötni" — A KÜLÖNBSÉGTEVŐ --------------------------------
   Egy mentor egy szakot ismer. Egy kapcsolódó mentor hálózatot nyit.
   Ezért kap saját, kiemelt felületet — nem sorolódik a meta közé. */

/* --- „Mit kapsz tőle" ----------------------------------------------------
   ÍGÉRET, nem leírás — ezért NEM olvad bele a bemutatkozásba, és nem is
   néz ki úgy. A bal oldali kiemelő sáv választja el a bio folyószövegétől:
   a diák egy pillantásra lássa, mit visz haza a beszélgetésről.

   Halványabb háttér, mint az „Össze tud kötni" doboznál — a kettő
   egymás alatt áll, és két azonos súlyú kiemelés kioltaná egymást. */

/* Csak olvasható űrlapérték — ott, ahol a mező szerkesztése még nincs
   megoldva. Szándékosan NEM néz ki beviteli mezőnek: egy letiltott
   input azt sugallná, hogy valamilyen feltétel teljesülésével
   szerkeszthetővé válik. Ez itt egyszerűen megjelenített adat. */
.form__readonly {
  margin: 0 0 var(--space-2);
  padding: var(--space-3);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  line-height: var(--lh-body);
  white-space: pre-line;
}

.mentor-card__promise {
  border-left: 3px solid var(--brand-tint-border);
  padding-left: var(--space-3);
}

.mentor-card__promise-label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-dark);
  margin-bottom: var(--space-1);
}

.mentor-card__promise-text {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text);
  white-space: pre-line;
}

.mentor-card__connect {
  background-color: var(--brand-tint);
  border: 1px solid var(--brand-tint-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.mentor-card__connect-label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-dark);
  margin-bottom: var(--space-1);
}

/* A kártyán az első 1–2 sor — a teljes szöveg az adatlapon van.
   Lenyíló itt SZÁNDÉKOSAN nincs: a kártya dolga az átkattintás. */
.mentor-card__connect-text {
  margin: 0;
  max-width: none;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Ár ------------------------------------------------------------------
   Feltűnően, nem elrejtve. A rejtett kettős árazás a legveszélyesebb
   hiba ezen a terméken. A `margin-top:auto` a kártya aljára tolja,
   így az ár és a CTA minden kártyán egy vonalban van. */

.mentor-card__price {
  margin-top: auto;
  padding-top: var(--space-2);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mentor-card__price-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.mentor-card__price-unit {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* A mentor 0 Ft-ot is megadhat — ez valós érték, nem hiányzó adat. */
.mentor-card__price--free .mentor-card__price-amount {
  color: var(--color-success);
}

.mentor-card__cta {
  width: 100%;
}

/* „refer" módban nincs ár, ami a CTA-t alulra tolná — itt a CTA
   maga kapja a `margin-top:auto`-t, hogy a rácsban egy vonalban álljon. */
.mentor-card--refer .mentor-card__cta {
  margin-top: auto;
}

/* --- Hogyan segít (help_mode) --------------------------------------------
   Diszkrét sor, NEM jelvény: egy jelvény rangsort sugallna a három
   mód között, pedig mindhárom teljes értékű segítség. */
.mentor-card__mode {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* --- Jelenleg nem elérhető -----------------------------------------------
   Megjelenik, de halványabban: a fotó elszürkül, a kártya a felület
   színét kapja, és nem emelkedik hoverre. A felirat szövege teljes
   kontrasztú marad — azt el kell tudni olvasni. */
.mentor-card--unavailable {
  background-color: var(--color-surface);
  box-shadow: none;
}

.mentor-card--unavailable:hover {
  box-shadow: none;
  transform: none;
}

.mentor-card--unavailable .mentor-card__photo {
  opacity: 0.55;
  filter: grayscale(1);
}

.mentor-card--unavailable .mentor-card__name,
.mentor-card--unavailable .mentor-card__bio {
  color: var(--color-text-muted);
}

.mentor-card__unavailable,
.mentor-profile__unavailable {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

/* Kiemelt mentor (featured) — halk bordó keret, NEM jelvény.
   A jelvény minőségi állítás lenne; erre nincs adatunk. */
.mentor-card--featured {
  border-color: var(--brand-light);
}

/* --- Szakonkénti számláló — a kártyák FÖLÖTT -----------------------------
   A legfontosabb konverziós elem: azt mutatja, hogy a látogató egy
   PIACHOZ fér hozzá, nem egy elérhetőséghez.
   Csak valós számok jelenhetnek meg. */

.major-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.major-count {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
}

/* A formátum: „Programtervező informatikus — 6 mentor".
   A szám a chip RÉSZE, nem külön jelvény: az egész egy mondat. */
.major-count__n {
  font-weight: 700;
  color: var(--brand-dark);
  white-space: nowrap;
}

/* Az ársáv ugyanolyan chip, de a márkaszínnel kiemelve: nem a szakok
   egyike, hanem a lista egészéről szóló állítás. A sorrend miatt
   mindig utolsóként áll — így a szakok felsorolása nem törik meg. */
.major-count--price {
  background-color: var(--brand-tint);
  border-color: var(--brand-tint-border);
}

/* „+ 2 mentor, aki jelenleg nem elérhető" — a chipek ALATT, saját
   sorban. Nem chip: nem a piac része, csak kimondjuk, hogy vannak. */
.major-counts__note {
  flex-basis: 100%;
  max-width: none;  /* a <p> alap max-width-je mellé engedné a chipnek */
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}


/* --- SZŰRŐK — /mentorok -------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.filters__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  /* Mobilon a két szűrő egymás alá kerül, teljes szélességben:
     egy 160px-es <select> hosszú egyetemnevekkel használhatatlan. */
  flex: 1 1 14rem;
  min-width: 0;
}

.filters__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.filters__select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-body);
  cursor: pointer;
  /* A natív nyíl megmarad — saját nyilat rajzolni annyit jelentene,
     hogy a rendszer sötét módjában és a mobil választóban is
     karban kell tartani. Nem éri meg. */
}

.filters__select:hover {
  border-color: var(--brand-light);
}

/* A címke magasságát kiegyenlíti, hogy a gomb a select-ekkel
   egy vonalban álljon, ne a labelekkel. */
.filters__reset {
  flex: 0 0 auto;
}

.filters__count {
  margin-bottom: var(--space-4);
}


/* ==========================================================================
   9. SEGÉDOSZTÁLYOK
   ========================================================================== */

/* Ugrás a tartalomra — a fejléc előtt az első fókuszálható elem. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background-color: var(--brand-dark);
  color: var(--color-white);
}

.skip-link:focus {
  left: 0;
}

/* Képernyőolvasónak látható, szemnek nem. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Kiemelt doboz — ár-blokk, visszatérítési ígéret, szülői garanciák. */
.notice {
  background-color: var(--brand-tint);
  border: 1px solid var(--brand-tint-border);
  border-left: 4px solid var(--brand-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}

.notice__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: var(--space-2);
}

/* Semleges kártya — kérdéskártya, lépés, eszközkártya, FAQ. */
.card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}

.card--surface {
  background-color: var(--color-surface);
  border-color: transparent;
}

/* --- Kereszthivatkozás — szövegközi, diszkrét ----------------------------
   ⚠️ ELŐKÉSZÍTVE, JELENLEG SEHOL NEM HASZNÁLT.

   A kontextuális elhelyezésről külső vélemény alatt van a döntés.
   Amíg meg nem születik, a kereszthivatkozás KIZÁRÓLAG a lábléc
   fölötti két kártyaként jelenik meg (landing-content.md 12. pont).

   Ha a döntés a kontextuális elhelyezés mellett szól, ez az osztály
   készen áll — csak elhelyezni kell, stílust írni nem.

   Szándékosan NEM banner:
     – nincs saját háttér, nincs keret, nincs doboz
     – nincs ikon és nincs gomb
     – a szövegtörzsnél kisebb és halványabb
   Egy mondat a szöveg folyamában, aminek a végén egy link áll. */

.cross-link {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-top: var(--space-5);
}

/* Vékony felső vonal — elválasztja az előtte álló tartalomtól anélkül,
   hogy dobozt csinálna belőle. */
.cross-link--divided {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.cross-link a {
  color: var(--brand-dark);
  font-weight: 600;
  /* Alapból aláhúzott: halvány szövegben a szín önmagában nem elég
     jelzés arra, hogy ez link (WCAG 1.4.1 — nem csak szín). */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cross-link a:hover {
  color: var(--brand-dark-hover);
}

/* --- Ökoszisztéma-blokk — a .cross-link egy alkalmazása ------------------
   A lábléc fölött álló, diszkrét szöveges blokk. A js/main.js rendereli.

   ⛔ NEM kártya és NEM banner. Külső UX-vélemény: két egyenrangú
      marketingkártya azt sugallja, „itt van még két dolog, amit el
      akarunk adni neked" — közvetlenül azelőtt, hogy a látogató az
      elsőt megértette volna. Ezért nincs háttér, keret, ikon és gomb. */

/* Nincs saját margin-top: a blokk a saját .section-jén belül áll,
   annak a paddingja adja a térközt — a kettő összeadódna. */

/* Címke, nem címsor: a h2 hierarchiában ez nem egyenrangú a
   szekciócímekkel. Ezért <p> és Inter, nem Georgia. */
.ecosystem__title {
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.ecosystem__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Egymás alatt, nem egymás mellett: két link egy sorban vizuálisan
   párrá válik — pont az egyenrangú kártyahatás, amit kerülünk. */
.ecosystem__item {
  display: block;
}

/* Töltés — a kártya alakját tartja, hogy ne ugorjon a layout. */
.skeleton {
  background: linear-gradient(90deg,
              var(--color-surface) 25%,
              #EFEBE9 37%,
              var(--color-surface) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-card);
  min-height: 320px;
}

@keyframes skeleton-shimmer {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

/* Állapotüzenetek — a js/main.js írja beléjük a szöveget. */
.status {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
}

.status--error {
  background-color: #FBEDED;
  color: var(--color-error);
}

.status--empty {
  background-color: var(--color-surface);
  color: var(--color-text-muted);
}


/* ==========================================================================
   10. MOZGÁSCSÖKKENTÉS
   Vesztibuláris zavarnál a mozgás fizikai rosszullétet okoz.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mentor-card:hover {
    transform: none;
  }
}
/* ==========================================================================
   ÚJ BLOKK a css/global.css végére — a 9. (segédosztályok) blokk után,
   a 10. (mozgáscsökkentés) blokk ELÉ.

   Landing-komponensek. Mind a meglévő tokenekből épül, egyetlen új
   szín vagy méret sincs bennük.
   ========================================================================== */


/* --- HERO ----------------------------------------------------------------
   A hero két része NEM választható szét: a címsor és az ár egy blokk.
   A kettős árazás elrejtése a legveszélyesebb hiba ezen a terméken —
   ha a checkout után derül ki, hogy a mentornak külön kell fizetni,
   az rejtett költségnek tűnik, és a bizalom azonnal elvész. */

/* KÉTOSZLOPOS HERO — bal oldalon a szöveg, jobb oldalon a kép.
   A szöveg BALRA igazított: a korábbi középre igazítás a kép
   megérkezésével értelmét vesztette (a kétoszlopos elrendezésben a
   középre zárt szöveg a képtől elszakadva lebegne). */

.hero {
  padding-block: clamp(2.5rem, 8vw, 5rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

/* --- Hero kép -------------------------------------------------------------
   ⛔ NINCS transform: scaleX(-1).

   A képen az alak a NÉZŐ BAL oldala felé néz. Mivel a kép a JOBB
   oszlopban áll, ez már befelé, a szöveg irányába mutat. A tükrözés
   kifelé, a képernyő szélére fordítaná a tekintetét — pont az ellenkezőjét
   érné el annak, amiért a tükrözés felmerült.

   Ha mégis tükrözni kell, ez az egy sor:
       .hero__media img { transform: scaleX(-1); }
   -------------------------------------------------------------------------- */

.hero__media {
  display: block;
}

.hero__media img {
  width: 100%;
  height: auto;

  /* ⚠️ A KÉP HÁTTERE NEM FEHÉR.
     Mérve: #EEEEEE–#ECECEC, az oldal háttere #FFFFFF. A kettő NEM
     olvad össze — kezeletlenül világosszürke téglalapként látszik,
     éles peremmel.

     Megoldás: a négy perem elhalványítása maszkkal. A képpontokhoz
     nem nyúlunk (a fehér póló ~#E4E3E8, tehát SÖTÉTEBB a háttérnél —
     egy „világosat fehérre" korrekció a pólót is kilapítaná).

     Nincs border-radius és nincs box-shadow: mindkettő megmutatná,
     hol végződik a kép. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
          mask-composite: intersect;
}

/* --- Mobil: a kép ELREJTVE, 861px alatt ----------------------------------
   375px-en a 4:5 arányú portré ~470px magas lenne, és ennyivel lejjebb
   tolná az ár-blokkot — azt az elemet, aminek a landing-content.md
   szerint az első képernyőn kell lennie. A kép dekoratív; az ár nem.

   ⚠️ Ismert ár: a böngésző a `display: none` ellenére is letöltheti a
   képet (~72 KB). Ha ez később számít, a megoldás CSS
   background-image + image-set() media query mögött — akkor viszont a
   <picture> formátumválasztása kézzel írandó. Most nem éri meg. */

@media (max-width: 860px) {
  .hero__media {
    display: none;
  }
}

@media (min-width: 861px) {
  .hero__grid {
    /* A szövegoszlop kap többet: a kép kísérő elem, nem főszereplő. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-7);
  }
}

/* Ha a kép nem tölthető be, a szövegoszlop foglalja el a teljes
   szélességet — ne maradjon üres hasáb. A js/main.js teszi rá. */
.hero__grid--no-media {
  grid-template-columns: 1fr !important;
}

/* A hero címsor középre igazítva, mobilon és desktopon egyaránt.
   A globális h1 20ch-s korlátja itt tágabb: a hosszabb mondatnak
   nagyobb képernyőn egy sorban kell elférnie. */
/* A globális h1 20ch-s korlátja itt túl szűk lenne. A szövegoszlop
   szélessége amúgy is korlátoz, ezért elég egy tág felső határ. */
.hero__title {
  max-width: 20ch;
}

.hero__title-line {
  display: block;
}

.hero__lead {
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  max-width: 52ch;
}

.hero__actions {
  margin-top: var(--space-6);
}

/* Az ár-blokk a hero RÉSZE, nem apró betűs rész alatta.
   Ezért van saját felülete és teljes méretű szövege. */
.hero__price {
  margin-top: var(--space-6);
  max-width: 46rem;
}

.hero__price p {
  max-width: none;
}

.hero__price .notice__title {
  font-size: 1.375rem;
}

.hero__price p + p {
  margin-top: var(--space-3);
}


/* --- IDÉZŐJELES KÉRDÉSKÁRTYA ---------------------------------------------
   „Amit a nyílt napon nem kérdeztél meg" — 6 db.
   Nincs ikon: a kérdés maga a tartalom. */

.quote-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--color-text);
}

.quote-card p {
  max-width: none;
}


/* --- LÉPÉSEK -------------------------------------------------------------
   Számozott sorrend, ezért <ol>. A szám vizuális elem, de a sorrend
   valódi információ — a képernyőolvasónak is meg kell kapnia. */

.step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.step__n {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--brand-dark);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
}

.step__title {
  margin-bottom: var(--space-2);
}

.step p {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}


/* --- ALAPÍTÓI ÜZENET -----------------------------------------------------
   Nulla mentor és nulla értékelés mellett ez az egyetlen valódi
   bizonyíték, ami ma létezik. Szűkebb sorhossz, olvasható ritmus. */

.founder p {
  max-width: 58ch;
}

.founder__signature {
  margin-top: var(--space-5);
  font-weight: 600;
  color: var(--color-text);
}


/* --- PIPÁS LISTA ---------------------------------------------------------
   A pipa dekoráció, ezért ::before és aria-hidden helyett CSS-content.
   A képernyőolvasó a listaelemet magát olvassa, „pipa" nélkül. */

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-5);
}

.checklist li {
  position: relative;
  padding-left: 1.75rem;
  max-width: 62ch;
}

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-dark);
  font-weight: 700;
}

/* Gondolatjeles lista — tények, problémák felsorolása. A pipa ott
   hamis lenne: nem ígéret, hanem helyzetleírás. */
.dash-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-5) 0;
}

.dash-list li {
  position: relative;
  padding-left: 1.5rem;
  max-width: 62ch;
}

.dash-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-dark);
  font-weight: 700;
}


/* --- KÉRDÉSCSOPORT (felkészülés) ----------------------------------------- */

.qgroup__title {
  margin-bottom: var(--space-3);
}

.qgroup ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.qgroup li {
  position: relative;
  padding-left: 1rem;
  font-size: var(--fs-small);
  color: var(--color-text);
}

.qgroup li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}


/* --- TANULÁSI ESZKÖZÖK ---------------------------------------------------
   Élethelyzet szerint rendezve, nem tantárgy szerint. */

.tool-group + .tool-group {
  margin-top: var(--space-7);
}

.tool-group__title {
  margin-bottom: var(--space-4);
}

/* Képhely — ELŐKÉSZÍTVE, de nincs placeholder kép.
   A képeket a felhasználó szerzi be (landing-content.md nyitott tétel).
   Amíg nincs kép, a szabály nem fut le, mert nincs .tool__media elem,
   így nem hagy üres lyukat a kártyában.

   Használat, ha megvan a kép:
     <div class="tool__media"><img src="..." alt=""></div>
   a .tool NYITÓ tagje után, első gyerekként. */
.tool__media {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background-color: var(--color-surface);
}

.tool__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tool__name {
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.tool__what {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  max-width: none;
}


/* --- FAQ -----------------------------------------------------------------
   <details>/<summary>: natív nyitás-csukás, billentyűzettel működik,
   JS nélkül. Nem építünk saját akkordeont oda, ahol a böngésző ad egyet. */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 46rem;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  padding: var(--space-4) 2rem var(--space-4) 0;
  position: relative;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

/* A natív háromszög eltüntetése — saját jelet rajzolunk. */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: var(--space-4);
  color: var(--brand-dark);
  font-size: 1.25rem;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item summary:hover {
  color: var(--brand-dark);
}

.faq-item__body {
  padding-bottom: var(--space-4);
}

.faq-item__body p {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}


/* --- VÉGSŐ CTA ----------------------------------------------------------- */

.final-cta {
  text-align: center;
}

.final-cta h2 {
  max-width: 22ch;
  margin-inline: auto;
}

.final-cta .btn-group {
  justify-content: center;
  margin-top: var(--space-5);
}
/* ==========================================================================
   ÚJ BLOKK a css/global.css-be — a szűrők után, a segédosztályok elé.

   ŰRLAPOK
   Egyetlen űrlapstílus az egész oldalra. A /mentornak az első, ami
   használja; a regisztráció és a mentor profilszerkesztő ugyanezt kapja.
   ========================================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 40rem;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Két mező egy sorban, ha elfér — ár és időtartam, elérhetőség típusa
   és értéke. Mobilon egymás alá esik, media query nélkül. */
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-4);
}

.form__label {
  font-weight: 600;
  font-size: var(--fs-small);
}

/* A kötelező jelölés SZÖVEGGEL is, nem csak csillaggal: a puszta „*"
   csak akkor érthető, ha a látogató megtalálta a jelmagyarázatot. */
.form__required {
  color: var(--color-error);
  font-weight: 400;
}

.form__optional {
  color: var(--color-text-muted);
  font-weight: 400;
}

.form__hint {
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
  max-width: 60ch;
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-body);
}

.form__textarea {
  min-height: 9rem;
  line-height: var(--lh-body);
  resize: vertical;
}

.form__input:hover,
.form__select:hover,
.form__textarea:hover {
  border-color: var(--brand-light);
}

.form__input:focus-visible,
.form__select:focus-visible,
.form__textarea:focus-visible {
  border-color: var(--brand-dark);
}

/* Hibás mező. A piros keret MELLETT szöveges üzenet is jár —
   a szín önmagában nem információhordozó (WCAG 1.4.1). */
.form__input[aria-invalid="true"],
.form__select[aria-invalid="true"],
.form__textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  border-width: 2px;
}

.form__error {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--color-error);
}

/* Karakterszámláló a bemutatkozáshoz. */
.form__counter {
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.form__counter--ok {
  color: var(--color-success);
}

/* Jelölőnégyzet — hozzájárulás. */
.form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.form__check input {
  /* 20px + a 48px-es sormagasság közepére igazítva. A natív checkbox
     marad: a saját rajzolat a rendszer sötét módjában és a mobil
     nagyításnál is karbantartást igényelne. */
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--brand-dark);
}

.form__check label {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

/* Rádiós választás — „Hogyan szeretnél segíteni?".
   A <fieldset> alapkerete és -margója eltűnik: a mező úgy néz ki, mint
   a többi, csak a <legend> mondja ki a képernyőolvasónak, hogy a három
   opció egy kérdés. Az egész sor kattintható (a <label> fogja körbe),
   és a kijelölt opció kerete bordóra vált. */
.form__choices {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.form__choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.form__choice:hover {
  border-color: var(--brand-light);
}

.form__choice:has(input:checked) {
  border-color: var(--brand-dark);
  background-color: var(--brand-tint);
}

.form__choice input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--brand-dark);
}

.form__choice-title {
  display: block;
  font-weight: 600;
}

.form__choice-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* Honeypot — ember nem látja, robot kitölti.
   ⛔ NE `display: none`: több robot kifejezetten kihagyja a rejtett
      mezőket. Így viszont a képernyőolvasó sem olvassa fel (aria-hidden
      + tabindex="-1" az input-on). */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Az űrlap tetején/alján megjelenő összefoglaló állapot. */
.form__status {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
}

.form__status--error {
  background-color: #FBEDED;
  color: var(--color-error);
}

.form__status--info {
  background-color: var(--brand-tint);
  border: 1px solid var(--brand-tint-border);
  color: var(--color-text);
}

.form__status--success {
  background-color: #EAF3EE;
  color: var(--color-success);
}


/* ==========================================================================
   JOGI OLDALAK
   /aszf · /adatkezeles · /cookie · /impresszum

   Ezek szövegoldalak, nem marketingoldalak: egy hasáb, sok fejléc,
   néhány táblázat. Nincs kártya, nincs hero, nincs illusztráció.

   A mérce nem az, hogy szép legyen, hanem hogy egy vitás helyzetben
   VISSZAKERESHETŐ legyen — ezért van minden szakasznak számozott címe,
   ugyanazzal a számozással, mint a jogi-dokumentumok.md-ben.
   ========================================================================== */

.legal {
  max-width: 72ch;
}

.legal h2 {
  margin-top: var(--space-7);
  font-size: var(--fs-h2);
}

.legal h3 {
  margin-top: var(--space-6);
  font-size: var(--fs-h3);
}

/* Az első cím a bevezető után áll — ott nem kell a nagy térköz. */
.legal > :first-child {
  margin-top: 0;
}

.legal p,
.legal ul,
.legal ol {
  margin-top: var(--space-4);
}

.legal ul,
.legal ol {
  padding-left: var(--space-5);
}

.legal li + li {
  margin-top: var(--space-2);
}

/* --- Adatblokk -----------------------------------------------------------
   A jogi-dokumentumok.md-ben ezek ``` blokkok: cégadatok, díjszabás,
   szolgáltatói listák. Itt keretes felület, hogy a szem lássa:
   ez egy adategyüttes, nem folyó szöveg.

   Szándékosan NEM <pre>: a <pre> nem tördel mobilon, és egy címadat
   hosszabb, mint egy telefonképernyő. */

.legal__block {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  margin-top: var(--space-4);
}

.legal__block p {
  margin-top: 0;
}

.legal__block p + p {
  margin-top: var(--space-3);
}

/* Adatsor: címke + érték. A dt/dd azért kell a <p> helyett, mert ez
   tényleg leíráslista — a képernyőolvasó így párosítja a kettőt. */
.legal__data {
  display: grid;
  grid-template-columns: minmax(11rem, auto) 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.legal__data dt {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.legal__data dd {
  margin: 0;
}

/* Az adatsor alatti megjegyzés (pl. „A fizetési funkció jelenleg nem
   aktív…") — a lista része, de nem adatsor, ezért elválasztva. */
.legal__block .legal__data + p {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

@media (max-width: 30rem) {
  /* Keskeny kijelzőn a két oszlop egymás alá kerül — a 11rem-es
     címkeoszlop mellett különben 3-4 karakter maradna az értéknek. */
  .legal__data {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .legal__data dt {
    margin-top: var(--space-3);
  }
}

/* --- Pótlandó cégadat ----------------------------------------------------
   ⚠️ EZ SZÁNDÉKOSAN FELTŰNŐ.

   2026-09-26 óta EGYIK JOGI OLDALON SEM HASZNÁLT: az üzemeltető
   magánszemélyként meg van nevezve (jogi-dokumentumok.md 6. pont).
   Az osztályok maradnak, ha valaha újra valódi hiány kerülne egy
   jogi oldalra — a hiba akkor keletkezne, ha halkan elrejtenénk, és
   valaki azt hinné, kész van.

   Ha a placeholder eltűnik az oldalról, azért tűnjön el, mert
   pótolták — nem azért, mert nem látszott. */

.legal__todo {
  background-color: #FBEDED;
  border: 1px solid var(--color-error);
  border-left: 4px solid var(--color-error);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
  color: var(--color-error);
  font-size: var(--fs-small);
}

.legal__todo strong {
  display: block;
  margin-bottom: var(--space-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--fs-micro);
}

/* Szövegközi placeholder az adatlistában — az üres dd helyén. */
.legal__missing {
  color: var(--color-error);
  font-size: var(--fs-small);
}

/* --- Táblázat ------------------------------------------------------------
   Az adatkezelési tájékoztató adat/jogalap/megőrzés mátrixai.
   A wrapper vízszintesen görget: a három oszlop mobilon nem fér ki,
   és a táblázat összenyomása olvashatatlanná tenné. */

.legal__table-wrap {
  overflow-x: auto;
  margin-top: var(--space-4);
}

.legal__table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: var(--fs-small);
}

.legal__table th,
.legal__table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.legal__table th {
  font-weight: 700;
  color: var(--color-text);
  border-bottom-color: var(--color-text-muted);
}

.legal__table caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: var(--space-2);
}

/* Utolsó frissítés / státusz a cím alatt. */
.legal__meta {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}


/* ==========================================================================
   MENTOR ADATLAP — /mentor/[slug]
   A js/mentor.js rendereli, a mentor.html vázába.

   A kártyától az különbözteti meg, hogy itt a látogató MÁR választott:
   nem böngészik, hanem eldönti, hogy ez az ember-e az. Ezért nagyobb
   fotó, TELJES bio (nem részlet), és a lap alján a fizetési fal.

   ⛔ Ide sem kerülhet csillag, értékelés vagy „top mentor" jelvény —
      ugyanaz a szabály, mint a kártyán. Nincs mögötte adat.
   ========================================================================== */

.mentor-profile {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}

/* 720px fölött a fotó külön hasábba kerül. A `start` igazítás azért
   kell, hogy a fotó ne nyúljon a hosszú bio teljes magasságában. */
@media (min-width: 45rem) {
  .mentor-profile {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-7);
  }
}

/* --- Fotó ----------------------------------------------------------------
   A kártyán 4:3 a vágás, mert ott rácsban állnak és egyforma magasság
   kell. Itt 4:5 — álló portré, több hely az arcnak. Ez a lap
   legnagyobb bizalmi eleme. */

.mentor-profile__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--color-surface);
}

.mentor-profile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

/* Fotó nélkül monogram — ugyanaz a döntés, mint a kártyán:
   a sziluett azt sugallja, „hiányzik valami"; a monogram nem. */
.mentor-profile__photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-tint);
  color: var(--brand-dark);
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
}

/* --- Fejrész ------------------------------------------------------------- */

.mentor-profile__name {
  font-size: var(--fs-h2);
  margin: 0;
}

.mentor-profile__study {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-lead);
}

.mentor-profile__level {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.mentor-profile__mode {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.mentor-profile__unavailable {
  margin-bottom: var(--space-2);
}

.mentor-profile--unavailable .mentor-profile__photo {
  opacity: 0.55;
  filter: grayscale(1);
}

/* --- Bio -----------------------------------------------------------------
   TELJES szöveg, nem részlet. A kártyán a bio csonkolva van, mert ott
   a döntés még nem születik meg; itt igen.

   A `white-space: pre-line` a mentor sortöréseit megtartja. A bio egy
   ember által írt szabad szöveg — ha egy bekezdést szánt oda, ne
   olvadjon egy tömbbe. HTML-t NEM engedünk (esc() fut rajta), tehát
   ez az egyetlen tördelési lehetőség. */

.mentor-profile__bio {
  margin-top: var(--space-5);
  white-space: pre-line;
  max-width: 68ch;
}

/* --- ÖSSZECSUKHATÓ BLOKKOK — adatlap ------------------------------------
   „Miben tud még segíteni" · „Mit kapsz tőle" · „Bemutatkozás" (ha 3
   sornál hosszabb). Alapból zárva; a tartalom a DOM-ban van, csak
   nem látszik.

   + jel zárva, − jel nyitva: a függőleges szár 200ms alatt fordul be.
   A tartalom rövid áttűnéssel érkezik. Semmi látványos — a
   prefers-reduced-motion szabály (10. szakasz) mindkettőt kikapcsolja.

   Ahol a böngésző tudja (::details-content + interpolate-size), a
   magasság is 200ms alatt nyílik; ahol nem, azonnal. Mindkettő jó. */

.mentor-profile__folds {
  margin-top: var(--space-6);
}

.mentor-profile__folds:empty {
  display: none;
}

.mentor-fold {
  border-top: 1px solid var(--color-border);
  interpolate-size: allow-keywords;
}

.mentor-fold:last-child {
  border-bottom: 1px solid var(--color-border);
}

.mentor-fold__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;  /* érintési cél */
  padding-block: var(--space-3);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--color-text);
}

.mentor-fold__summary::-webkit-details-marker {
  display: none;
}

.mentor-fold__summary:hover .mentor-fold__title {
  color: var(--brand-dark);
}

.mentor-fold__summary:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* A +/− két vékony szárból áll: nyitáskor a függőleges 0-ra skálázódik. */
.mentor-fold__icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--brand-dark);
}

.mentor-fold__icon::before,
.mentor-fold__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background-color: currentColor;
  transition: transform 200ms ease;
}

.mentor-fold__icon::after {
  transform: rotate(90deg);
}

.mentor-fold[open] .mentor-fold__icon::after {
  transform: rotate(90deg) scaleX(0);
}

.mentor-fold::details-content {
  height: 0;
  overflow: hidden;
  transition: height 200ms ease, content-visibility 200ms allow-discrete;
}

.mentor-fold[open]::details-content {
  height: auto;
}

.mentor-fold[open] .mentor-fold__body {
  animation: mentor-fold-in 200ms ease;
}

@keyframes mentor-fold-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mentor-fold__body {
  padding-bottom: var(--space-4);
}

/* A 10. szakasz `*` szabálya a ::details-content-et nem éri el. */
@media (prefers-reduced-motion: reduce) {
  .mentor-fold::details-content {
    transition: none;
  }
}

.mentor-fold__text {
  margin: 0;
  max-width: 68ch;
  line-height: var(--lh-body);
  white-space: pre-line;
}

/* --- Ár ------------------------------------------------------------------ */

.mentor-profile__price {
  margin-top: var(--space-6);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mentor-profile__price-amount {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--brand-dark);
}

.mentor-profile__price-unit {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* --- FIZETÉSI FAL --------------------------------------------------------
   AZ ELÉRHETŐSÉG HELYÉN ÁLL, nem az oldal alján és nem felugró ablakban.

   Ez a lényeg: a látogató odaér, ahol az e-mail cím lenne, és ott
   találkozik az ajánlattal. Kontextusban kérünk pénzt, nem
   megszakításként.

   ⛔ Ez a blokk SOHA nem mutathat kontaktadatot — se elmosva, se
      rövidítve, se „k****@gmail.com" alakban. A csalogató csonk
      egyszerre keltene hiányérzetet és szivárogtatna személyes adatot
      (GDPR). Amit nem vett meg, azt nem is látja. */

.mentor-paywall {
  margin-top: var(--space-7);
  padding: var(--space-6);
  background-color: var(--brand-tint);
  border: 1px solid var(--brand-tint-border);
  border-radius: var(--radius-card);
}

.mentor-paywall__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--brand-dark);
  margin: 0;
}

.mentor-paywall p {
  margin-top: var(--space-3);
  max-width: 52ch;
}

.mentor-paywall__price {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--brand-dark);
}

/* A mentor saját díja NEM ugyanaz, mint a hozzáférés díja. A két szám
   egymás mellett félreérthető — ezért áll a magyarázat közvetlenül a
   hozzáférés ára alatt, kisebb és halványabb szedéssel. */
.mentor-paywall__note {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.mentor-paywall__cta {
  margin-top: var(--space-5);
}

/* A fizetőgomb helyén, amíg a fizetés nem él (js/main.js →
   CHECKOUT_LIVE). A fizetési falban, a /checkout-on és a dashboardon
   is ez áll — ezért nem a .mentor-paywall alá kötött. Nem doboz: a
   környezete (fal, notice) már az; a /checkout-on a bal szegély adja
   a súlyát. */
.checkout-paused {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 4px solid var(--brand-dark);
}

.checkout-paused p {
  margin-top: var(--space-2);
  max-width: 52ch;
}

.checkout-paused p:first-child {
  margin-top: 0;
}

.checkout-paused__title {
  font-weight: 700;
  color: var(--brand-dark);
}

/* Elvárás a diák felé, a feloldó gomb alatt. Kisebb és halványabb, mint
   a gomb — nem versenyez vele, de még ugyanabban a látómezőben van. */
.mentor-paywall__expect {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  max-width: 52ch;
}

/* --- Vissza a listához --------------------------------------------------- */

.mentor-profile__back {
  margin-bottom: var(--space-5);
  font-size: var(--fs-small);
}


/* ==========================================================================
   AUTH OLDALAK — /regisztracio és /belepes

   Semmi extra: a meglévő .form komponens egy keskenyebb konténerben.
   Egy belépőlapnak nincs szüksége saját dizájnra — minél kevésbé
   különbözik a többi oldaltól, annál kevésbé néz ki adathalásznak.
   ========================================================================== */

/* Az űrlaposzlop szélessége. A .container 1140px-e itt túl tág:
   a hosszú beviteli sor mérése nehéz, és a szem elveszti a címke
   és a mező kapcsolatát. */
.container--narrow {
  max-width: 34rem;
}


/* ==========================================================================
   DASHBOARD — /dashboard/*

   Egyetlen dashboard.html szolgálja ki mind a nyolc nézetet
   (urls.md 3. pont), a nézetváltás kliensoldali. Ez a szakasz csak
   azt adja hozzá, amit a meglévő komponensek nem tudnak: a
   nézetváltó navigációt és a listaelemeket.

   Minden más — kártya, űrlap, gomb, állapotüzenet — a fenti közös
   osztályokból jön. Egy védett felület, ami máshogy néz ki, mint a
   publikus oldal, azt sugallja, hogy másik rendszer — pedig ugyanaz.
   ========================================================================== */

/* --- Fejrész: köszöntés és szerepkör ------------------------------------- */

.dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.dash-head h1 {
  margin: 0;
}

/* --- Nézetváltó navigáció -----------------------------------------------
   Vízszintes sáv, nem oldalsó menü: négy nézetnél az oldalsáv csak
   helyet foglal, mobilon pedig amúgy is fölé kerülne.

   Mobilon vízszintesen görgethető. A `scrollbar-width: none` NEM rejti
   el a görgethetőség tényét — a fakuló jobb szél és az érintés adja a
   jelzést; a görgetősáv itt csak vizuális zaj lenne. */

.dash-nav {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
}

.dash-nav::-webkit-scrollbar {
  display: none;
}

.dash-nav__link {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  /* A -1px-es eltolás a konténer alsó vonalára ülteti az aktív jelölést,
     különben két párhuzamos vonal futna egymás alatt. */
  margin-bottom: -1px;
}

.dash-nav__link:hover {
  color: var(--color-text);
}

/* „Kilépés" a nézetváltó végén, jobbra tolva — nem nézet, hanem
   művelet, ezért elválik a többitől. <button>, a gombstílus nullázva. */
.dash-nav__logout {
  margin-left: auto;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}

/* Az aktív nézetet az aria-current jelöli, nem osztály — egy állapot,
   egy forrás (ugyanaz a minta, mint a fejlécben). */
.dash-nav__link[aria-current="page"] {
  color: var(--brand-dark);
  border-bottom-color: var(--brand-dark);
}

/* --- Címke: állapotjelölés ----------------------------------------------
   Szerepkör, entitlement, mentorstátusz, kérdésállapot.

   ⚠️ A SZÍN ÖNMAGÁBAN NEM INFORMÁCIÓ (WCAG 1.4.1): mindegyik címkében
      SZÖVEG is van, ami kimondja az állapotot. A színt elvéve a jelentés
      megmarad. */

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.badge--ok {
  background-color: #E8F2EC;
  color: var(--color-success);
}

.badge--warn {
  background-color: var(--brand-tint);
  color: var(--brand-dark);
}

.badge--off {
  background-color: #FBEDED;
  color: var(--color-error);
}

/* --- Feloldott kontakt ---------------------------------------------------
   ⛔ EZ AZ EGYETLEN HELY AZ OLDALON, AHOL KONTAKTADAT MEGJELENIK.
      A mentorkártya és az adatlap soha (lásd mentor.js fejléc-komment).
      Ide a diák azért lát elérhetőséget, mert megvette. */

.unlock__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.unlock__study {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.unlock__contact {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.unlock__contact-label {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.unlock__contact-value {
  font-weight: 600;
  /* A hosszú kezelőnév és e-mail cím ne lógjon ki a kártyából. */
  overflow-wrap: anywhere;
}

.unlock__write {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.unlock__subject {
  font-size: var(--fs-small);
  margin-bottom: var(--space-2);
  overflow-wrap: anywhere;
}

.unlock__template {
  width: 100%;
  font-size: var(--fs-small);
  line-height: 1.5;
}

.unlock__actions {
  margin-top: var(--space-3);
}

.unlock__status {
  min-height: 1.5em;
  margin-top: var(--space-2);
  color: var(--brand-dark);
  font-weight: 600;
}

.unlock__meta {
  margin-top: var(--space-3);
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
}

/* --- Kérdés (diák és mentor nézetben ugyanaz) ---------------------------- */

.qitem + .qitem {
  margin-top: var(--space-4);
}

.qitem__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.qitem__who {
  font-weight: 600;
}

.qitem__text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.qitem__answer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.qitem__meta {
  margin-top: var(--space-3);
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
}

/* --- Adatsor: fiókbeállítások, csak olvasható értékek -------------------- */

.datarow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.datarow__label {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.datarow__value {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* --- Nézeten belüli szekcióköz ------------------------------------------- */

.dash-block + .dash-block {
  margin-top: var(--space-6);
}


/* ==========================================================================
   CHECKOUT — /checkout

   Nincs saját űrlap és nincs saját fizetőmező: a bankkártyaadatot a
   Stripe kéri be, a saját felületén. Ez az oldal csak összefoglal és
   átad — ezért néz ki inkább nyugtának, mint pénztárnak.
   ========================================================================== */

.checkout__price {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 700;
  color: var(--brand-dark);
  line-height: var(--lh-tight);
}

.checkout__period {
  font-family: var(--font-main);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--color-text-muted);
}

.checkout__trust {
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}


/* ==========================================================================
   SÜTI-SÁV — /cookie és a js/main.js consent modulja

   Az oldal ALJÁN ül, és NEM blokkolja a tartalmat: nincs mögötte
   overlay, a lap görgethető és olvasható marad. Egy modális
   cookie-fal itt aránytalan lenne — a mérés nem feltétele semminek.

   ⚠️ A KÉT GOMB VIZUÁLISAN AZONOS. Ugyanaz az osztály, ugyanaz a
      méret és szín. Az elutasítás nem lehet nehezebb, mint az
      elfogadás (GDPR 7. cikk, EDPB 03/2022 iránymutatás) — ezért
      NINCS kiemelt „Elfogadom" és halvány „Csak a szükségeseket".
   ========================================================================== */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  /* Felfelé vetett árnyék — elválik a tartalomtól anélkül, hogy
     elfedné. */
  box-shadow: 0 -4px 24px rgba(31, 27, 28, 0.12);
  padding-block: var(--space-5);
  /* iPhone-on a kezdősáv alá csúszna a gombsor. */
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
}

.consent[hidden] {
  display: none;
}

.consent__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.consent__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
}

.consent__text {
  font-size: var(--fs-small);
  color: var(--color-text);
  /* Ne fusson végig egy 1140px-es soron — olvashatatlan lenne. */
  max-width: 62ch;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* MOBILON KOMPAKT — a sáv legfeljebb a képernyő ~25%-a (2026-09-25).
   Korábban a két gomb egymás alá esett, és a sáv a 375×667-es kijelző
   alsó FELÉT takarta: a /mentornak első képernyőjét a posztból érkezők
   nem látták.

   ⚠️ A két gomb EGYMÁS MELLETT, és továbbra is EGYENRANGÚ: `flex: 1 1 0`
      → pontosan egyforma szélesség, a `stretch` → egyforma magasság,
      ugyanaz az osztály és szín. Ha a „Csak a szükségeseket" nem fér
      ki egy sorba, a felirat tördelődik — a gomb nem lesz kisebb.
   A cím ilyenkor csak a képernyőolvasónak szól (a sáv
   aria-labelledby-ja rá mutat, ezért nem törölhető). */
@media (max-width: 479px) {
  .consent {
    padding-block: var(--space-3);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }

  .consent__inner {
    gap: var(--space-2);
  }

  .consent__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .consent__actions {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-2);
    margin-top: 0;
  }

  .consent__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--space-3);
    font-size: var(--fs-small);
    white-space: normal;
  }
}

/* A lábléc „Süti-beállítások" gombja. <button>, mert nem navigál —
   de a jogi linksorban áll, ezért úgy is néz ki, mint a testvérei. */
.site-footer__linkbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: underline;
  cursor: pointer;
}

.site-footer__linkbtn:hover {
  color: var(--color-white);
}


/* ==========================================================================
   HALK BEÚSZÁS GÖRGETÉSKOR — a js/main.js initReveal() kapcsolja

   ⚠️ VISSZAFOGOTT, ÉS EZ NEM ÍZLÉSKÉRDÉS. Ez az oldal bizalmat árul egy
      aggódó szülőnek. Egy „menő, fiatalos" mozgó felület pont a
      hitelesség rovására megy — a külső UX-vélemény ezt a három
      legnagyobb kockázat egyikének nevezte.

   Ezért: 12px elmozdulás, 260ms, egyszer. ⛔ NINCS váltakozó bal-jobb
   beúszás, NINCS staggered delay, és NINCS nagy elmozdulás.

   ⚠️ A `.reveal` osztályt KIZÁRÓLAG a JS teszi rá, és CSAK olyan elemre,
      ami a nyitóképernyőn kívül van. Enélkül JS nélküli böngészőben
      (vagy hibás scriptnél) az egész oldal láthatatlan maradna —
      ez a fajta hiba némán öl.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}

.reveal--in {
  opacity: 1;
  transform: none;
}

/* Nyomtatásban nincs görgetés, tehát nincs mi kiváltsa a beúszást. */
@media print {
  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   MENTORKÁRTYA — FOTÓ-ZOOM HOVERRE

   3,5% nagyítás, 250ms. Ennyi. A keret vág, a kártya nem nő.

   ⚠️ CSAK EGÉRREL. A `(hover: hover) and (pointer: fine)` szándékosan
      szigorúbb, mint egy szélesség-alapú töréspont: érintőképernyős
      laptopon a szélesség „desktop", a hover viszont ott is félrevezető
      (beragadt hover-állapot az első koppintás után).
   ========================================================================== */

.mentor-card__photo {
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {

  .mentor-card__photo img {
    transition: transform 250ms ease-out;
  }

  .mentor-card:hover .mentor-card__photo img {
    transform: scale(1.035);
  }
}


/* ==========================================================================
   RAGADÓS CTA — /mentor/[slug], CSAK MOBILON
   A js/mentor.js teszi be, amikor az eredeti feloldó gomb kigörgött.

   ⚠️ A SÁV NEM TAKARHATJA A SZÖVEG VÉGÉT. Amíg látszik, a <body> alul
      helyet kap (.has-sticky-cta) — enélkül a bio utolsó sora a sáv
      alatt maradna, és pont az a mondat veszne el, ami a döntést hozza.

   A z-index 55: a süti-sáv (60) FÖLÉ nem mehet. Ha a látogató még nem
   döntött a sütikről, az a kérdés az előbbre való — a feloldás
   ráér, a hozzájárulás nem.
   ========================================================================== */

.sticky-cta {
  display: none;
}

@media (max-width: 768px) {

  .sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 20px rgba(31, 27, 28, 0.10);
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));

    /* Halkan érkezik, nem villan be.

       ⚠️ `animation`, NEM `transition` + osztály. A keyframe a
          `display: none` → `block` váltásnál magától lefut, tehát nincs
          JS-időzítés, amit el lehetne rontani. A korábbi, osztályra
          kapcsolt átmenet élesben úgy bukott el, hogy a sáv a
          képernyőn kívül ragadt, miközben a <body> paddingja már
          helyet csinált neki. */
    animation: sticky-cta-in 220ms ease-out;
  }

  .sticky-cta[hidden] {
    display: none;
  }

  @keyframes sticky-cta-in {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }

  .sticky-cta .btn {
    width: 100%;
  }

  /* Amíg a sáv látszik, a lap alja ennyivel lejjebb ér. */
  .has-sticky-cta {
    padding-bottom: 5.5rem;
  }
}


/* ==========================================================================
   PISZKOZAT-JELZÉS — /mentornak, a js/mentornak.js kapcsolja

   ⚠️ DISZKRÉT, NEM ÜNNEPLŐ. A visszatöltés szolgáltatás, nem esemény:
      egy halk mondat, mellette a kiút. Ha zöld sikersávként állna itt,
      versenyezne a form__status üzenetekkel, amik viszont TÉNYLEG
      döntést kérnek (hiba, siker).
   ========================================================================== */

.form__draft {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.form__draft[hidden] {
  display: none;
}

/* Szöveg-gomb: nem CTA. A törlés lehetőség, nem ajánlat. */
.form__draft-clear {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--brand-dark);
  text-decoration: underline;
  cursor: pointer;
}

.form__draft-clear:hover {
  color: var(--brand-dark-hover);
}


/* ==========================================================================
   „ISMERSZ VALAKIT?" — továbbküldés a /mentornak siker képernyőjén
   A fotókérés UTÁN, elválasztó vonallal: az kötelező lépés, ez lehetőség.
   Ezért nem .notice doboz — az a teendők nyelve.
   ========================================================================== */

.refer {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  max-width: 36rem;
}

.refer__title {
  font-size: var(--fs-h3);
  margin: 0 0 var(--space-3);
}

.refer p {
  margin-top: var(--space-3);
}

.refer__row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.refer__link {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-surface);
  user-select: all;
  -webkit-user-select: all;
}

.refer__copy {
  flex: none;
  min-height: 48px;  /* a mező magassága */
  padding-inline: var(--space-4);  /* 375px-en így fér ki a teljes link */
}

.refer .refer__status {
  min-height: 1.5em;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-success);
}

.refer .refer__share {
  margin-top: var(--space-2);
}

.refer__note {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}


/* ==========================================================================
   ELÉRHETŐSÉG-KAPCSOLÓ — dashboard, „Profilom" nézet teteje

   Natív checkbox `role="switch"`-csel: a billentyűzet (szóköz), a
   képernyőolvasó és a fókusz ingyen jár. Csak a rajzolat saját.
   ========================================================================== */

.avail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.avail__label {
  font-weight: 600;
  cursor: pointer;
}

.avail__switch {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 52px;
  height: 30px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.avail__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.avail__switch:checked {
  background: var(--color-success);
}

.avail__switch:checked::after {
  transform: translateX(22px);
}

.avail__switch:disabled {
  opacity: 0.6;
  cursor: wait;
}

.avail__explain {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.avail__status {
  min-height: 1.5em;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
}

.avail__status--ok    { color: var(--color-success); }
.avail__status--error { color: var(--color-error); }

@media (prefers-reduced-motion: reduce) {
  .avail__switch,
  .avail__switch::after { transition: none; }
}


/* ==========================================================================
   ADMIN — /admin (mentorok jóváhagyása)

   Mobilon is használható: a fej (fotó + adatok) egymás mellett marad,
   a fotó-mező és a gombok sora keskeny kijelzőn tördelődik.
   ========================================================================== */

.admin-toolbar {
  margin-bottom: var(--space-5);
}

.admin-section + .admin-section {
  margin-top: var(--space-7);
}

.admin-section h2 {
  margin-bottom: var(--space-4);
}

.admin-card + .admin-card {
  margin-top: var(--space-5);
}

/* A várakozó kártya kiemelése: bordó szegély és halvány háttér — ezen
   kell dolgozni, nem az aktívakon. */
.admin-card--pending {
  border: 2px solid var(--brand-light);
  background: var(--brand-tint);
}

.admin-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.admin-card__photo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface);
}

.admin-card__photo--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-weight: 600;
}

.admin-card__who {
  min-width: 0;
}

.admin-card__name {
  margin: 0;
  font-size: 1.125rem;
}

.admin-card__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}

.admin-card__slug {
  color: var(--color-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.admin-card__bio {
  margin-top: var(--space-4);
}

.admin-card__bio summary {
  cursor: pointer;
  font-weight: 600;
}

.admin-card__bio p {
  margin-top: var(--space-2);
  white-space: pre-line;
}

.admin-card__photo-field,
.admin-card__decide {
  margin-top: var(--space-5);
}

.admin-card__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.admin-card__row .form__input {
  flex: 1 1 14rem;
  min-width: 0;
}

.admin-card__result {
  min-height: 1.5em;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
}

.admin-card__result--ok    { color: var(--color-success); }
.admin-card__result--error { color: var(--color-error); }

[data-result]:not(:empty) {
  margin-top: var(--space-4);
}

@media (max-width: 479px) {
  .admin-card__decide .btn-group .btn,
  .admin-card__row .btn {
    width: 100%;
  }
}

/* Az /admin saját belépési űrlapja — ugyanaz a keskeny oszlop, mint a /belepes. */
.admin-login {
  max-width: 28rem;
}


/* ==========================================================================
   „MÁR ŐK IS ITT VANNAK" — mentorsáv a /mentornak oldalon
   Fotó + keresztnév + szak, a „Mit vállalsz" szakasz előtt.

   Desktopon a 8 elem kifér egy sorba; mobilon a sáv vízszintesen
   görgethető, és a konténer széléig kifut — a levágott utolsó arc
   mutatja, hogy van még. Görgetősáv marad: egeres gépen ez az
   egyetlen jel, hogy oldalra is lehet menni.
   ========================================================================== */

.peer-strip {
  margin-bottom: var(--space-7);
}

.peer-strip__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-4);
}

.peer-strip__list {
  display: flex;
  gap: var(--space-4);
  margin: 0 calc(-1 * var(--container-pad));
  padding: var(--space-1) var(--container-pad) var(--space-3);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--container-pad);
  -webkit-overflow-scrolling: touch;
}

.peer-strip__item {
  flex: 0 0 7.5rem;
  scroll-snap-align: start;
}

.peer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-sm);
}

.peer__photo {
  display: block;
  width: 96px;
  height: 96px;
  margin-bottom: var(--space-1);
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
}

.peer__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.peer__name {
  font-family: var(--font-display);
  font-weight: 700;
}

/* Van 100+ karakteres szak is — két sor után vágunk, a teljes szöveg
   az adatlapon. */
.peer__major {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-micro);
  line-height: var(--lh-tight);
  color: var(--color-text-muted);
}

.peer:hover .peer__name {
  color: var(--brand-dark);
  text-decoration: underline;
}

.peer-strip__more {
  display: inline-block;
  margin-top: var(--space-3);
  font-weight: 600;
}


/* ==========================================================================
   „A DIÁK ÍR ELŐSZÖR" + A MENTOR DÍJÁNAK FIZETÉSE
   ========================================================================== */

/* A feloldott kártyán a gombok fölött — ez a következő lépés, ezért
   nem halvány meta-szöveg, hanem kiemelt mondat. */
.unlock__first {
  margin-bottom: var(--space-3);
  font-weight: 600;
  color: var(--brand-dark);
}

/* Hogyan fizet a diák a mentornak — az adatlapon az ár alatt, a
   dashboardon a feloldott kártya alján. Lásd DDN.render.feeNote(). */
.fee-note {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.fee-note p + p {
  margin-top: var(--space-1);
}

.unlock__write + .fee-note {
  margin-top: var(--space-4);
}


/* ==========================================================================
   /admin — szak és egyetem szerkesztése (négy mező, egy Mentés)
   ========================================================================== */

.admin-card__study {
  margin-top: var(--space-5);
  padding: 0;
  border: 0;
}

.admin-card__study legend {
  margin-bottom: var(--space-2);
}

/* Két oszlop: bal az alapszak, jobb az egyetem — a mesterszak sora
   alatta, ugyanígy. Keskeny kijelzőn egy oszlop. */
.admin-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-3);
}

@media (max-width: 479px) {
  .admin-card__grid {
    grid-template-columns: 1fr;
  }
}