/* ===================================================================
   SZABADEGYETEM – ALAP-KOMPONENSEK  (SZAB-41, E3-S0)
   Forrás: docs/design/szabadegyetem-prototipus-3.html – „D · Campus".
   Csak a tokens.css változóira épül – nincs hardcode-olt szín vagy térköz
   (a fehér „papír" is a --szin-papir tokenből jön). Mobile-first: az alap
   szabályok a kis képernyőre szólnak, a media query-k felfelé bővítenek
   (spec §10.2). A11y (§11.5): :focus-visible gyűrű, 44–48px érintési
   célok, prefers-reduced-motion, szemantikus szerkezet.

   NEM került át a prototípusból (szándékosan): a .demo-sav; a Google Fonts
   <link>; a [data-variant] kapcsolók és a Katedra tokenek; a
   [data-szerep]/.csak-* CSS-alapú elrejtés (élesben az {% if %} +
   szerver-oldali kapuzás a helyes – ADR-006, az UI-elrejtés NEM védelem);
   a prototípus JS-e.
   =================================================================== */

/* ===== ALAP / RESET ===== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--betu-szov);
  color: var(--szin-tinta);
  background: var(--szin-hatter);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Ragadós lábléc: a fő tartalom kitölti a képernyőt rövid oldalon is. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-family: var(--betu-cim);
  font-weight: var(--cim-suly);
  margin: 0;
  line-height: 1.25;
}

a { color: var(--szin-kiemeles); }

/* Fókusz-gyűrű: billentyűzetes navigációnál látható, egérnél nem zavaró. */
:focus-visible {
  outline: var(--fokusz);
  outline-offset: 2px;
  border-radius: var(--sugar-s);
}

/* Tartalom-konténer (középre, korlátozott szélesség). */
.keret {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 var(--ter-4);
}

/* „Ugrás a tartalomra" – képernyőolvasó/billentyűzet: alapból elrejtve,
   fókuszban láthatóvá válik (a11y §11.5). */
.ugras-tartalomra {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--szin-papir);
  color: var(--szin-kiemeles);
  padding: var(--ter-3) var(--ter-4);
  border-radius: var(--sugar-m);
  font-weight: 600;
  z-index: 100;
}
.ugras-tartalomra:focus {
  left: var(--ter-4);
  top: var(--ter-4);
}

/* A fő tartalom nő, hogy a lábléc a képernyő aljára kerüljön. */
.fo-tartalom {
  flex: 1 0 auto;
  padding: var(--ter-6) 0;
}

/* ===== FEJLÉC ===== */
.fejlec {
  background: var(--szin-papir);
  border-bottom: var(--vonal);
}
.fejlec-belso {
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--ter-4);
  display: flex;
  align-items: center;
  gap: var(--ter-4);
  flex-wrap: wrap;
}
.marka {
  font-family: var(--betu-cim);
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}
.marka-alcim {
  color: var(--szin-tinta-halk);
  font-size: .85rem;
}
.fejlec-nav {
  margin-left: auto;
  display: flex;
  gap: var(--ter-4);
  flex-wrap: wrap;
  align-items: center;
}
.fejlec-nav a,
.fejlec-nav .fejlec-link {
  color: var(--szin-tinta);
  text-decoration: none;
  font-weight: 500;
  font-size: .9rem;
}
.fejlec-nav a:hover,
.fejlec-nav .fejlec-link:hover {
  color: var(--szin-kiemeles);
}
/* Kijelentkezés POST-tal (Django 6): gomb, de link-kinézettel a navigációban. */
.fejlec-nav .fejlec-urlap {
  margin: 0;
  display: inline;
}
.fejlec-nav .fejlec-link {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

/* ===== GOMBOK ===== */
.gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ter-2);
  background: var(--szin-kiemeles);
  color: var(--szin-papir);
  border: 1px solid var(--szin-kiemeles);
  padding: .75rem 1.2rem;
  border-radius: var(--sugar-m);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  min-height: 48px; /* érintési cél (a11y §11.5) */
  transition: filter .15s;
}
.gomb:hover { filter: brightness(1.14); }
.gomb--masodlagos {
  background: transparent;
  color: var(--szin-kiemeles);
}
.gomb--masodlagos:hover {
  background: var(--szin-kiemeles-halk);
  filter: none;
}
.gomb--vilagos {
  background: var(--szin-papir);
  color: var(--szin-tinta);
  border-color: var(--szin-papir);
}
.gomb--korvonal {
  background: transparent;
  color: var(--szin-papir);
  border-color: color-mix(in srgb, var(--szin-papir) 55%, transparent);
}
.gomb-sor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ter-3);
  margin-top: var(--ter-5);
}

/* ===== JELZÉS / ÁLLAPOT-CÍMKE ===== */
.jelzes {
  display: inline-flex;
  gap: var(--ter-2);
  font-size: .78rem;
  font-weight: 700;
  padding: .25rem .6rem;
  border-radius: 999px;
}
.jelzes--betelt {
  background: color-mix(in srgb, var(--szin-figyelem) 13%, transparent);
  color: var(--szin-figyelem);
}
.jelzes--allapot {
  background: var(--szin-kiemeles-halk);
  color: var(--szin-kiemeles);
}
.jelzes--siker {
  background: color-mix(in srgb, var(--szin-siker) 13%, transparent);
  color: var(--szin-siker);
}
.jelzes--hiba {
  background: color-mix(in srgb, var(--szin-hiba) 13%, transparent);
  color: var(--szin-hiba);
}

/* ===== LAP / KÁRTYA ===== */
.lap {
  background: var(--szin-papir);
  border: var(--vonal);
  border-radius: var(--kartya-sugar);
  padding: var(--ter-6);
}

/* ===== KATEGÓRIA-PIRULA (Campus-variáns) =====
   A prototípus [data-variant="campus"] .kategoria szabálya kapcsoló nélkül
   (ADR-010) – KÖZÖS komponens: a lista és a részletező is használja, ezért
   itt él, nem az app-CSS-ekben. Nincs uppercase (Campus: text-transform
   nélkül, kis betűköz). */
.kategoria {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--szin-kiemeles);
  background: var(--szin-kiemeles-halk);
  padding: 3px 8px;
  border-radius: 999px;
}

/* ===== VISSZA-LINK (részletező-szerű aloldalak teteje) ===== */
.vissza {
  display: inline-flex;
  gap: var(--ter-2);
  color: var(--szin-kiemeles);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: var(--ter-4);
}
.vissza:hover,
.vissza:focus-visible { text-decoration: underline; }

/* ===== TÉNY-RÁCS (címke + érték párok) =====
   Közös komponens: a részletező, az előadói profil-szerkesztő és a későbbi
   E4-visszaigazolás is használja. Mobile-first: egy oszlop, 34rem fölött három. */
.tenyek {
  display: grid;
  gap: var(--ter-4);
  margin: var(--ter-5) 0;
  padding: var(--ter-4) 0;
  border-top: var(--vonal);
  border-bottom: var(--vonal);
}
@media (min-width: 34rem) {
  .tenyek { grid-template-columns: repeat(3, 1fr); }
}
.teny-cimke {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--szin-tinta-halk);
  font-weight: 700;
}
.teny-ertek {
  font-weight: 600;
  margin-top: 2px;
}
.teny-ertek a { color: var(--szin-kiemeles); text-decoration: none; }
.teny-ertek a:hover,
.teny-ertek a:focus-visible { text-decoration: underline; }

/* ===== ŰRLAPMEZŐ ===== */
.mezo {
  margin-bottom: var(--ter-5);
}
.mezo label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--ter-2);
}
.mezo .sugo {
  font-size: .85rem;
  color: var(--szin-tinta-halk);
  margin: 0 0 var(--ter-2);
}
.mezo input[type=text],
.mezo input[type=search], /* SZAB-75: a lista keresőmezője (design D6) */
.mezo input[type=email],
.mezo input[type=password],
.mezo textarea,
.mezo select {
  width: 100%;
  padding: .75rem;
  font: inherit;
  min-height: 48px; /* érintési cél (a11y §11.5) */
  border: 1px solid var(--szin-vonal);
  border-radius: var(--sugar-m);
  background: var(--szin-papir);
  color: var(--szin-tinta);
}
.mezo textarea {
  min-height: 8rem;
  resize: vertical;
}
/* Jelölőnégyzet-mező (pl. GDPR-hozzájárulás): a doboz és a címke egy sorban. */
.mezo--pipa {
  display: flex;
  align-items: flex-start;
  gap: var(--ter-2);
}
.mezo--pipa label {
  margin-bottom: 0;
  font-weight: 400;
}
.mezo--pipa input {
  width: auto;
  min-height: 0;
  margin-top: .25rem;
}
.kotelezo { color: var(--szin-hiba); }
/* Mezőszintű hibalista (Django form errorlist). */
.mezo-hibak {
  list-style: none;
  margin: var(--ter-2) 0 0;
  padding: 0;
  color: var(--szin-hiba);
  font-size: .88rem;
}

/* ===== TÁBLÁZAT-ALAP ===== */
.tabla-doboz {
  background: var(--szin-papir);
  border: var(--vonal);
  border-radius: var(--kartya-sugar);
  overflow: hidden;
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.tabla thead th {
  text-align: left;
  padding: var(--ter-3) var(--ter-4);
  background: var(--szin-hatter);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--szin-tinta-halk);
  font-weight: 700;
  border-bottom: var(--vonal);
  white-space: nowrap;
}
.tabla tbody td {
  padding: var(--ter-3) var(--ter-4);
  border-bottom: var(--vonal);
  vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: 0; }

/* ===== SZIGNATÚRA: KERET-SÁV =====
   A projekt vizuális védjegye: a hallgatói/külsős keret szabad/foglalt
   arányát mutató sáv. A szerep szerinti „a tiéd" kiemelés BEKERÜLT
   (.keretsav-cimke--sajat + .sajat-jel), de SZERVER-oldali feltétellel
   renderelve (ADR-006) – a terv [data-szerep] attribútum-kapcsolós,
   kliens-oldali mechanikáját változatlanul nem vesszük át. */
.keretsav-rud {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--keret-ures);
  gap: 2px;
}
.keretsav-zona { display: flex; gap: 1px; }
.keretsav-zona i { display: block; height: 100%; }
.keretsav-zona--hallgato i.foglalt { background: var(--keret-hallgato); }
.keretsav-zona--hallgato i.szabad { background: var(--keret-hallgato-halk); }
.keretsav-zona--kulsos i.foglalt { background: var(--keret-kulsos); }
.keretsav-zona--kulsos i.szabad { background: var(--keret-kulsos-halk); }
.keretsav-cimkek {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ter-2);
  margin-top: var(--ter-2);
  font-size: .8rem;
}
.keretsav-cimke {
  display: flex;
  align-items: center;
  gap: var(--ter-2);
  color: var(--szin-tinta-halk);
  padding: 2px 6px;
  border-radius: var(--sugar-s);
  border: 1px solid transparent;
}
.keretsav-cimke b {
  font-weight: 700;
  color: var(--szin-tinta);
}
.pont {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}
.pont--hallgato { background: var(--keret-hallgato); }
.pont--kulsos { background: var(--keret-kulsos); }

/* Saját-keret kiemelés: a belépett user szerepének megfelelő címke jelölése
   (a módosító osztályt a sablon szerver-oldali feltétele teszi fel). */
.keretsav-cimke--sajat {
  background: var(--szin-kiemeles-halk);
  border-color: color-mix(in srgb, var(--szin-kiemeles) 28%, transparent);
  color: var(--szin-tinta);
}
.sajat-jel {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--szin-kiemeles);
}

/* ===== HELYSZÍN × IDŐSÁV MÁTRIX (SZAB-27) =====
   Forrás: a prototípus .matrix/.cella mintája. A szerep-függő CSS-elrejtést
   SZÁNDÉKOSAN nem vesszük át (ADR-006). A választás jelölőnégyzettel megy
   (billentyűzettel bejárható, JS nélkül is működik – progresszív fejlesztés),
   a vizuális „választva/foglalt" állapotot a :has()/:checked adja. */
.matrix-fej {
  display: flex;
  align-items: center;
  gap: var(--ter-3);
  margin: var(--ter-5) 0 var(--ter-4);
  flex-wrap: wrap;
}
.matrix-cim {
  font-family: var(--betu-cim);
  font-size: 1.15rem;
  font-weight: var(--cim-suly);
  text-align: center;
}
.matrix-doboz {
  overflow-x: auto;
  border: var(--vonal);
  border-radius: var(--kartya-sugar);
  background: var(--szin-papir);
}
.matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 26rem;
}
.matrix th {
  padding: var(--ter-3);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--szin-tinta-halk);
  border-bottom: var(--vonal);
  border-left: var(--vonal);
}
.matrix thead th:first-child,
.matrix tbody th {
  text-align: left;
  width: 5.5rem;
}
.matrix thead th small {
  display: block;
  font-size: .7rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.matrix td {
  padding: var(--ter-1);
  border-bottom: var(--vonal);
  border-left: var(--vonal);
  text-align: center;
}
.matrix tbody th {
  border-left: 0;
  padding: var(--ter-2) var(--ter-3);
  font-weight: 700;
  border-bottom: var(--vonal);
}
.matrix tr:last-child td,
.matrix tr:last-child th { border-bottom: 0; }

/* Cellák: szabad = választható jelölőnégyzet-címke, foglalt = sraffozott. */
.cella {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px; /* érintési cél (a11y §11.5) */
  font-size: .8rem;
  border-radius: var(--sugar-s);
}
.cella--szabad { cursor: pointer; }
/* A natív jelölőnégyzetet elrejtjük, de fókuszálható marad (billentyűzet). */
.cella__jelolo {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.cella--szabad:hover { background: var(--szin-kiemeles-halk); }
.cella--szabad:has(.cella__jelolo:focus-visible) {
  outline: var(--fokusz);
  outline-offset: 2px;
}
.cella--szabad:has(.cella__jelolo:checked) {
  background: var(--szin-kiemeles);
  color: var(--szin-papir);
}
.cella--foglalt {
  color: var(--szin-tinta-halk);
  cursor: not-allowed;
  background: repeating-linear-gradient(45deg, transparent 0 4px,
    color-mix(in srgb, var(--szin-vonal) 55%, transparent) 4px 8px);
}
.cella--sajat {
  background: var(--szin-kiemeles);
  color: var(--szin-papir);
}
.cella--ures { color: var(--szin-tinta-halk); }

.matrix-jelmagy {
  display: flex;
  gap: var(--ter-4);
  flex-wrap: wrap;
  margin-top: var(--ter-3);
  font-size: .8rem;
  color: var(--szin-tinta-halk);
}
.matrix-jelmagy span { display: inline-flex; align-items: center; gap: var(--ter-2); }
.jm {
  width: 14px;
  height: 14px;
  border-radius: var(--sugar-s);
  border: 1px solid var(--szin-vonal);
}
.jm--szabad { background: var(--szin-papir); }
.jm--foglalt {
  background: repeating-linear-gradient(45deg, transparent 0 4px,
    color-mix(in srgb, var(--szin-vonal) 55%, transparent) 4px 8px);
}
.jm--valasztott { background: var(--szin-kiemeles); border-color: var(--szin-kiemeles); }

/* ===== „ELŐADÁSAIM" LISTA (SZAB-27) =====
   Felület-finomítás: a torlódó Állapot-oszlop szétbontása (Állapot / Foglalás /
   Művelet), sávonkénti sorral és ikon-gombos visszavonással. A táblázat
   reszponzív: 48rem alatt kártyává tördel (lásd a média-lekérdezéses blokkot). */
.lista-fejlec {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ter-4);
  margin-bottom: var(--ter-5);
}
.lista-fejlec h1 { margin: 0; }
.lista-fejlec .gomb { width: 100%; }

.allapot-cella {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ter-2);
}
.al-statusz {
  font-size: .8rem;
  font-weight: 600;
  color: var(--szin-figyelem);
}

.foglalas-cella {
  display: flex;
  flex-direction: column;
  gap: var(--ter-2);
}
.foglalas-fej {
  margin: 0;
  font-size: .8rem;
  color: var(--szin-tinta-halk);
}
.sav-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ter-2);
}
.sav-tetel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ter-3);
}
.sav-ido {
  font-size: .85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sav-visszavon-urlap {
  margin: 0;
  display: flex;
}

.muvelet-oszlop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ter-3);
}

/* Ikon-gomb (sávonkénti visszavonás): érintési célméret, szín csak hoveren. */
.ikon-gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--meret-erintes-kicsi);
  min-height: var(--meret-erintes-kicsi);
  padding: var(--ter-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--sugar-m);
  color: var(--szin-tinta-halk);
  cursor: pointer;
}
.ikon-gomb:hover {
  color: var(--szin-hiba);
  background: color-mix(in srgb, var(--szin-hiba) 10%, transparent);
}
.ikon-gomb svg { width: 20px; height: 20px; display: block; }

/* ===== RESZPONZÍV TÁBLÁZAT → KÁRTYA (töréspont 48rem) =====
   Mobile-first: alap állapotban a sorok kártyák (blokk-elrendezés, data-cimke
   feliratokkal); 48rem fölött visszavált valódi táblázatra. */
.tabla--reszponziv,
.tabla--reszponziv thead,
.tabla--reszponziv tbody,
.tabla--reszponziv tr,
.tabla--reszponziv td {
  display: block;
  width: 100%;
}
.tabla--reszponziv thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.tabla--reszponziv tbody tr {
  padding: var(--ter-4);
  border-bottom: var(--vonal);
}
.tabla--reszponziv tbody tr:last-child { border-bottom: 0; }
.tabla--reszponziv tbody td {
  padding: var(--ter-2) 0;
  border: 0;
}
.tabla--reszponziv tbody td::before {
  content: attr(data-cimke);
  display: block;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--szin-tinta-halk);
  font-weight: 700;
  margin-bottom: var(--ter-1);
}
.tabla--reszponziv .muvelet-oszlop { align-items: stretch; }
.tabla--reszponziv .muvelet-oszlop .gomb { width: 100%; }

@media (min-width: 48rem) {
  .tabla--reszponziv { display: table; }
  .tabla--reszponziv thead {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    display: table-header-group;
  }
  .tabla--reszponziv tbody { display: table-row-group; }
  .tabla--reszponziv tr { display: table-row; }
  .tabla--reszponziv td { display: table-cell; }
  .tabla--reszponziv tbody tr { padding: 0; }
  .tabla--reszponziv tbody td {
    padding: var(--ter-3) var(--ter-4);
    border-bottom: var(--vonal);
    width: auto;
  }
  .tabla--reszponziv tbody td::before { content: none; }
  .tabla--reszponziv .muvelet-oszlop { align-items: flex-start; }
  .tabla--reszponziv .muvelet-oszlop .gomb { width: auto; }
  .lista-fejlec {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .lista-fejlec .gomb { width: auto; }
}

/* ===== NYITÓOLDAL (SZAB-71) =====
   A publikus nyitóoldal saját blokkjai: hero, ismertető szakasz, lépés-rács,
   magyarázó szakasz. Forrás: a prototípus nyitó képernyője (D · Campus) és a
   change design.md „Képernyő-terv" szakasza (blokk-sorrend + mobil-tábla).

   Mobile-first (§10.2): az alap szabályok a KIS képernyőre szólnak, a
   szélesítés min-width töréspontokkal. KIZÁRÓLAG a repóban már használt két
   töréspont (34rem, 48rem) – a prototípus 44rem-e szándékosan nem kerül át,
   hogy ne szaporodjon a töréspont-készlet.

   Csak a tokens.css változóira épül – ÚJ DESIGN-TOKEN NEM SZÜLETIK. Ahol a
   prototípus hardcode-olt fehéret/feketét használt, az áttetsző árnyalatot a
   --szin-papir / --szin-tinta tokenből color-mix-szel képezzük (ugyanaz a
   minta, mint a .gomb--korvonal-nál).

   A CSS NEM szelektál data-testid-re (ADR-024) – minden szabály osztálynévre.

   NEM kerül át a prototípusból: a .hero-kep réteg (a --hero-kep token `none`
   marad, a nyitóoldal nem kap kép-asset-et), és a lapszéltől lapszélig futó
   sávok – a nyitóoldal a base.html .keret konténerén BELÜL él, ezért a hero és
   a magyarázó szakasz lekerekített panel, nem teljes szélességű sáv. */

/* --- Bemutatkozó blokk (hero): egy oszlop, középre zárt --- */
.hero {
  position: relative;
  overflow: hidden; /* a lekerekítés a díszítő rétegeket is vágja */
  background: var(--szin-tinta); /* tartalék, amíg a gradiens-réteg festődik */
  border-radius: var(--sugar-l);
  min-height: 24rem;
  display: grid;
  align-items: center;
}
/* Díszítő rétegek (a sablonban aria-hidden): gradiens + finom rács, majd fátyol. */
.hero-racs {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, var(--hero-1), var(--hero-2));
}
.hero-racs::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--szin-papir) 70%, transparent) 0 1px, transparent 1px 4.5rem),
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--szin-papir) 50%, transparent) 0 1px, transparent 1px 3rem);
}
/* A fátyol lefelé sötétít: a hero alján álló szöveg és gomb így a gradiens
   világosabb végén is bőven a kontraszt-küszöb fölött marad. */
.hero-fatyol {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--szin-tinta) 15%, transparent),
    color-mix(in srgb, var(--szin-tinta) 74%, transparent));
}
.hero-tartalom {
  position: relative; /* a díszítő rétegek FÖLÉ */
  padding: var(--ter-7) var(--ter-4);
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
  color: var(--szin-papir);
}
.hero-fel {
  margin: 0 0 var(--ter-4);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--szin-papir) 85%, transparent);
}
.hero h1 {
  font-size: clamp(2rem, 6.5vw, 3.5rem);
  color: var(--szin-papir);
  margin-bottom: var(--ter-4);
}
.hero-alcim {
  font-size: clamp(1rem, 2.3vw, 1.15rem);
  color: color-mix(in srgb, var(--szin-papir) 92%, transparent);
  margin: 0 auto var(--ter-6);
  max-width: 34rem;
}
/* A .gomb-sor felső margóját az alcím margója már megadja. */
.hero-gombok {
  justify-content: center;
  margin-top: 0;
}
/* Mobile-first: a továbblépési pont kis képernyőn TELJES szélességű (nagy,
   ujjbarát cél); 34rem fölött visszaáll tartalom szerinti szélességre. */
.hero-gombok .gomb { width: 100%; }
@media (min-width: 34rem) {
  .hero-gombok .gomb { width: auto; }
}
/* Látható fókusz a sötét hero fölött (a11y §11.5): a --szin-kiemeles gyűrű a
   sötét háttértől 3:1 alatt maradna, ezért itt a papír-token a gyűrű színe. Az
   outline-offset miatt a gyűrű és a világos gomb közé sötét sáv kerül, így a
   gyűrű MINDKÉT szomszédos színétől elválik. */
.hero :focus-visible { outline-color: var(--szin-papir); }

/* --- Ismertető szakasz (a foglalás menete) --- */
.szakasz { padding: var(--ter-7) 0; }
.szakasz-cim {
  text-align: center;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  margin-bottom: var(--ter-3);
}
.szakasz-alcim {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto var(--ter-6);
  /* A --szin-tinta-halk a --szin-hatter lapháttéren csak ~4,4:1 – normál
     szövegméretnél az AA-küszöb 4,5:1. A halk árnyalatot ezért a tinta felé
     keverjük (nem új token): ~6,5:1, a halkabb hangsúly megmarad. */
  color: color-mix(in srgb, var(--szin-tinta-halk) 65%, var(--szin-tinta));
}

/* Mobile-first: a három lépés EGYMÁS ALÁ csúszik (01 → 02 → 03), 48rem fölött
   három oszlop. A DOM-sorrend azonos a vizuálissal – nincs CSS-sel átrendezett
   sorrend, így a billentyűzetes és a képernyőolvasós bejárás sem csúszik el. */
.lepes-racs {
  display: grid;
  gap: var(--ter-5);
}
@media (min-width: 48rem) {
  .lepes-racs { grid-template-columns: repeat(3, 1fr); }
}
.lepes-kartya {
  background: var(--szin-papir);
  border: var(--vonal);
  border-radius: var(--kartya-sugar);
  padding: var(--ter-5);
}
.lepes-szam {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--szin-kiemeles);
  margin-bottom: var(--ter-3);
}
.lepes-kartya h3 {
  font-size: 1.15rem;
  margin-bottom: var(--ter-2);
}
.lepes-kartya p {
  margin: 0;
  color: var(--szin-tinta-halk);
  font-size: .95rem;
}

/* --- A kétkeretes helyosztás magyarázata ---
   Mobile-first: a magyarázó szöveg, ALATTA a szám nélküli keret-jelmagyarázat;
   48rem fölött két oszlop (szöveg | jelmagyarázat). A jelmagyarázat a MEGLÉVŐ
   .keretsav-cimkek / .pont komponens – arányos .keretsav-rud NINCS, mert a
   zóna-szélességek vizuálisan is arányt állítanának. */
.magyarazo {
  background: var(--szin-papir);
  border: var(--vonal);
  border-radius: var(--kartya-sugar);
  padding: var(--ter-6);
}
.magyarazo h2 {
  font-size: 1.4rem;
  margin-bottom: var(--ter-3);
}
.magyarazo p {
  margin: 0;
  color: var(--szin-tinta-halk);
}
/* A közös .keretsav-cimkek a részletezőn a rúd alatt fut végig (space-between);
   itt önálló jelmagyarázat, ezért balra zárva. */
.magyarazo .keretsav-cimkek {
  justify-content: flex-start;
  gap: var(--ter-4);
  margin-top: var(--ter-5);
}
@media (min-width: 48rem) {
  /* Két oszlop a SABLON szerkezetének változtatása nélkül: a cím és a törzs az
     első oszlop két sorába kerül, a jelmagyarázat a másodikba. */
  .magyarazo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--ter-7);
    align-items: center;
  }
  .magyarazo h2,
  .magyarazo p { grid-column: 1; }
  .magyarazo .keretsav-cimkek {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
  }
}

/* ===== DJANGO ÜZENETEK (messages) ===== */
.uzenetek {
  list-style: none;
  margin: 0 0 var(--ter-5);
  padding: 0;
  display: grid;
  gap: var(--ter-3);
}
.uzenet {
  padding: var(--ter-3) var(--ter-4);
  border-radius: var(--sugar-m);
  border: 1px solid transparent;
  font-size: .95rem;
}
.uzenet--info,
.uzenet--debug {
  background: var(--szin-kiemeles-halk);
  border-color: var(--szin-kiemeles);
  color: var(--szin-tinta);
}
.uzenet--success {
  background: color-mix(in srgb, var(--szin-siker) 13%, transparent);
  border-color: var(--szin-siker);
  color: var(--szin-tinta);
}
.uzenet--warning {
  background: color-mix(in srgb, var(--szin-figyelem) 15%, transparent);
  border-color: var(--szin-figyelem);
  color: var(--szin-tinta);
}
.uzenet--error {
  background: color-mix(in srgb, var(--szin-hiba) 12%, transparent);
  border-color: var(--szin-hiba);
  color: var(--szin-tinta);
}

/* ===== LÁBLÉC ===== */
.lablec {
  flex-shrink: 0;
  border-top: var(--vonal);
  margin-top: var(--ter-8);
  padding: var(--ter-6) 0;
  color: var(--szin-tinta-halk);
  font-size: .85rem;
  text-align: center;
  background: var(--szin-papir);
}

/* ===== MOZGÁS-CSÖKKENTÉS (a11y §11.5) ===== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}