/* Publikus előadáslista + szűrőpanel (SZAB-30, spec §4.2, §10.2).
   Forrás: a design-prototípus (docs/design/szabadegyetem-prototipus-3.html)
   kártya-nézete, Campus-variáns. Csak a tokens.css változóira épül (ADR-010);
   a közös komponensek (.lap, .gomb, .kategoria, .keretsav-*, .pont) az
   alap.css-ben élnek – itt csak a lista-oldal saját osztályai vannak.
   Mobile-first: az alap szabályok a kis képernyőre szólnak; a szűrő-rács és
   a kártya-tétel szélesebb nézetben többoszloposra vált.

   TUDATOS KIHAGYÁSOK a prototípusból (NEM pótolandók itt):
   - naptár-nézet, nézet-váltó, hónap-lapozó → külön jegy;
   - Foglalás gomb MŰKÖDÉSE (most disabled placeholder a sablonban),
     Várólista gomb, „betelt" valós adat → E4;
   - [data-szerep] attribútum-kapcsolós CSS: a saját-keret kiemelés
     (.keretsav-cimke--sajat + .sajat-jel, alap.css) SZERVER-oldali
     feltétellel renderelődik (ADR-006 – a CSS-elrejtés nem védelem). */

/* ===== KERESŐSÁV (a lista-fejléc és a szűrőpanel között; SZAB-75) =====
   Mobile-first: kis képernyőn a mező és a beküldő egymás alatt, teljes
   szélességben (ujjbarát cél); 34rem fölött egy sorban, a mező ALSÓ éléhez
   igazítva – így a gomb nem ugrik fel a címke magasságába. A sáv és a panel
   közti rés SZŰKEBB a panel alattinál: a kettő EGY űrlap, és annak is kell
   látszania. Csak meglévő változók és meglévő töréspont (34rem) – nincs új
   design-token és nincs új breakpoint (ADR-010). */
.kereso-sav {
  display: flex;
  flex-direction: column;
  gap: var(--ter-3);
  margin-bottom: var(--ter-4);
}
.kereso-sav .mezo { margin-bottom: 0; }  /* az alsó margót itt a gap adja */
/* A szabály az `<a class="gomb">` törlőre is illeszkedik – kis képernyőn a
   három vezérlő (mező, beküldő, törlő) egymás alatt, teljes szélességben áll,
   és ehhez NEM kell új CSS (SZAB-89, Képernyő-terv K4). A 48px érintési célt a
   `.gomb { min-height }` adja: sehol nem sérül, és nem is kell érte engedményt
   tenni – a sűrűsödést a vizuális hierarchia kezeli (kitöltött elsődleges +
   körvonalas másodlagos + halk darabszám), nem a méret. */
.kereso-sav .gomb { width: 100%; }
/* A találat-darabszám a keresősávban (design D10): a keresés a panel
   kinyitása nélkül is működik, ezért a szám sem bújhat a panelbe. */
.kereso-sav .szuro-db { margin-left: 0; }
/* 34rem fölött EGY sor – de TÖRDELHETŐEN (SZAB-89). A sáv a törlővel négy
   elemet visel, és a legszorosabb pont NEM a mobil nézet (ott minden elem
   teljes szélességű, egymás alatt), hanem közvetlenül a töréspont fölött: egy
   nem tördelő sorban a hosszú feliratú törlő mellett a keresőmezőnek ~100px
   maradna. A `flex: 1 1 18rem` a mező ALSÓ KORLÁTJA: ha a sor nem fér ki, a
   törlő és a darabszám második sorba tördelődik, a mező viszont olvasható
   marad; ≈48rem fölött mind a négy elem egy sorba fér.
   A `18rem` NEM töréspont és NEM design-token, hanem elrendezési hosszméret –
   ugyanaz a fajta érték, mint a meglévő `.akcio-gombok .gomb { min-width }`.
   Új töréspont és új token tehát nem születik (ADR-010). A sorok közti rést a
   meglévő `gap` adja. Szűkítés nélkül (nincs törlő) a sáv 34rem-en is EGY
   sorban marad, ugyanúgy, mint eddig – a tördelés csak akkor lép be, amikor
   tényleg nincs hely. */
@media (min-width: 34rem) {
  .kereso-sav { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .kereso-sav .mezo { flex: 1 1 18rem; }
  .kereso-sav .gomb { width: auto; }
  .kereso-sav .szuro-db { margin-left: 0; padding-bottom: var(--ter-3); }
}

/* ===== SZŰRŐPANEL (details/summary – JS nélkül összecsukható, §10.2) ===== */
.szuro-panel {
  background: var(--szin-papir);
  border: var(--vonal);
  border-radius: var(--kartya-sugar);
  margin-bottom: var(--ter-5);
}
.szuro-nyito {
  cursor: pointer;
  font-weight: 700;
  padding: var(--ter-4) var(--ter-5);
  min-height: 48px; /* érintési cél (a11y §11.5) */
  display: flex;
  align-items: center;
  gap: var(--ter-3);
  border-radius: var(--kartya-sugar);
  /* A natív jelölő KIFEJEZETT elrejtése (SZAB-88 / D1). A `display: flex`
     amúgy is elnyomja a `list-item` dobozt – a böngésző nem generál jelölőt –,
     de erre nem hagyatkozunk: a `list-style: none` a szabvány-szerinti út, a
     WebKit-specifikus szabály pedig (lentebb) a Safari saját háromszögét
     tünteti el. A helyükre a `.szuro-nyito-jel` lép. */
  list-style: none;
}
.szuro-nyito::-webkit-details-marker { display: none; }

/* Kinyithatóság-jelzés (SZAB-88, Képernyő-terv K1–K2). A HORDOZÓ a sablonban
   áll – üres, `aria-hidden` elem –, a MEGJELENÉST innen kapja, a natív
   `[open]` állapotból: a szerver csak a kezdeti állapotot ismeri, a látogató
   első kattintása után egy sablonból rendert jel hazudna.
   Szegélyekkel RAJZOLT szögletjel, nem betűkarakter: a self-hosted készlet
   `latin-ext` részhalmaz, abban nincs geometriai szimbólum (a `▾` a
   rendszer-betűre esne vissza), és a szegély-rajz `forced-colors` módban is
   megmarad – ott a böngésző a szegély színét rendszer-színre cseréli –, míg
   egy háttérkép eltűnne. Ugyanaz a házi minta, mint a `.pont` és a
   `.keretsav-rud`: üres doboz, amit a CSS rajzol meg.
   A szín `var(--szin-tinta-halk)` a panel papír-hátterén ≈5,0:1 – a WCAG
   1.4.11 (nem-szöveges kontraszt) 3:1 küszöbe fölött. A jel ÁLLAPOTOT
   azonosít, tehát ez a küszöb rá normatívan vonatkozik: halványabb szín
   (pl. `--szin-vonal`) nem használható.
   A `margin-left: auto` a sor túlsó végére tolja: a felirat és az
   aktív-szűkítés pirulája BALRA marad, a nyitottság-jel JOBBRA – a két jelzés
   így soha nem takarja egymást. Átmenetet szándékosan NEM kap: az
   állapotváltás azonnali, ezért `prefers-reduced-motion` szabály sem kell. */
.szuro-nyito-jel {
  flex: none;
  margin-left: auto;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--szin-tinta-halk);
  border-bottom: 2px solid var(--szin-tinta-halk);
  /* Az elforgatás a doboz KÖZEPE körül történik, a látott „V" optikai közepe
     viszont eltolódik – ezt igazítja vissza a kis függőleges eltolás. */
  transform: translateY(-.12rem) rotate(45deg);
}
.szuro-panel[open] .szuro-nyito-jel {
  transform: translateY(.12rem) rotate(225deg);
}
.szuro-urlap {
  padding: 0 var(--ter-5) var(--ter-5);
}
.szuro-racs {
  display: grid;
  gap: 0 var(--ter-4);
  grid-template-columns: 1fr;
}
.szuro-gombok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ter-3);
}
/* Találat-darabszám a szűrő-lábban (terv .szuro-db). */
.szuro-db {
  color: var(--szin-tinta-halk);
  font-size: .88rem;
  margin-left: auto;
}
@media (min-width: 34rem) {
  .szuro-racs { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 48rem) {
  .szuro-racs { grid-template-columns: repeat(4, 1fr); }
}

/* ===== NAPI DÁTUM-HORGONY (a kártyák naponkénti csoport-fejléce) ===== */
.datum-horgony {
  display: flex;
  align-items: baseline;
  gap: var(--ter-3);
  margin: var(--ter-6) 0 var(--ter-4);
  padding-bottom: var(--ter-3);
  border-bottom: 2px solid var(--szin-tinta);
}
.datum-nap {
  font-family: var(--betu-cim);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
}
.datum-ho {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.datum-het {
  color: var(--szin-tinta-halk);
  font-size: .88rem;
  margin-left: auto;
}

/* ===== ELŐADÁS-KÁRTYÁK (szemantikus ul > li lista; terv .lista/.tetel) ===== */
.lista {
  display: grid;
  gap: var(--ter-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
.tetel {
  background: var(--szin-papir);
  border: var(--vonal);
  border-radius: var(--kartya-sugar);
  padding: var(--ter-5);
  display: grid;
  gap: var(--ter-4);
}
/* Szélesebb nézetben kétoszlopos tétel: tartalom + akció-oszlop (Campus). */
@media (min-width: 48rem) {
  .tetel {
    grid-template-columns: 1fr 15rem;
    align-items: start;
  }
}
.tetel-cim {
  font-size: 1.4rem;
  margin: var(--ter-2) 0 var(--ter-3);
}
.tetel-cim a {
  color: inherit;
  text-decoration: none;
}
.tetel-cim a:hover,
.tetel-cim a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ismerteto {
  color: var(--szin-tinta-halk);
  margin: 0 0 var(--ter-4);
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ter-2) var(--ter-4);
  font-size: .88rem;
  color: var(--szin-tinta-halk);
}
.meta a {
  color: var(--szin-kiemeles);
  font-weight: 600;
  text-decoration: none;
}
.meta a:hover,
.meta a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tetel-akcio {
  display: grid;
  gap: var(--ter-3);
  align-content: start;
}
.akcio-gombok {
  display: flex;
  gap: var(--ter-2);
  flex-wrap: wrap;
}
.akcio-gombok .gomb {
  flex: 1;
  min-width: 8.5rem;
}

/* Üres találat doboza. */
.ures-talalat p { margin: 0 0 var(--ter-3); }
.ures-talalat p:last-child { margin-bottom: 0; }

/* Csak képernyőolvasónak szóló szöveg (a „Részletek" link kontextusa). */
.sr-csak {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}