/*
 * Layout — 02-layout.css
 * ------------------------------------------------------------------
 * Általános elrendezési primitívek: konténer-szélesség, szekció-
 * keretezés (világos/sötét háttér), és a kezdőlapon többször
 * előforduló rács-elrendezések. Ezek soha nem tartalmaznak szín-
 * vagy tipográfia-szabályt — azok a komponens-rétegben élnek.
 */

/* Konténer — a legtöbb szekció core/group "constrained" layout-ot használ
   (ami a theme.json contentSize/wideSize értékét veszi figyelembe), de a
   nem block-layout által kezelt egyedi részekhez ez a fallback */
/* A .container a WP saját "constrained" layout viselkedését reprodukálja
   PONTOSAN (lásd dizajn.md "Egységes container-rendszer" szakasza) —
   1200px tartalmi szélesség + a gyűjtőelem saját (root) paddingja, hogy
   nyers <section> elemeken (amikre a WP automatikus 1200px-korlátozása
   NEM vonatkozik) is ugyanoda essen a bal szél, mint a wp:group-alapú
   szekcióknál. A max-width ezért 1200px + 2×spacing-60, a padding-inline
   pedig spacing-60 — így a TARTALOM tényleges szélessége mindig 1200px,
   szűk nézetben pedig a padding önmagában adja a minimum margót. */
.container {
  max-width: calc(1200px + 2 * var(--wp--preset--spacing--60));
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--60);
}

/* Szekció — függőleges ritmus és háttérszín-variánsok */
.section {
  padding-block: var(--wp--preset--spacing--50);
}
/* Ha két .section közvetlenül egymás után következik (nincs közöttük
   szín-váltó/eltérő szekció), a két fél-ritmus összeadva túl nagy,
   indokolatlan üres sávot adna — ez szedte szét a függőleges ritmust.
   Ilyenkor a második szekció felső paddingja szűkebb. */
.section + .section {
  padding-top: var(--wp--preset--spacing--40);
}

.section--szukebb {
  padding-block: var(--wp--preset--spacing--40);
}

.section--sotet {
  background: var(--wp--preset--color--elsodleges);
  color: var(--wp--preset--color--alap);
}

.section--legsotetebb {
  background: var(--wp--preset--color--szoveg);
  color: var(--wp--preset--color--lablec-tompitott);
}

/* Max. 80px magas — hosszú közlemény-szöveg esetén a szöveg-rész
   (.kozlemeny-sor__szoveg, lent) saját belső görgetést kap, a
   címke és a bezáró gomb viszont MINDIG látható/elérhető marad,
   nem görgethető el láthatatlanra. Enélkül egy hosszú, több sorra
   törő közlemény a fejlécet (és minden alatta lévő, magasságtól
   függő elemet, pl. a mobil hamburger-panel korábbi pozicionálását)
   kiszámíthatatlanul megnyújtaná. Lásd fejlesztesi-naplo.md,
   2026-08-24. */
.section--kozlemeny {
  background: var(--wp--preset--color--kozlemeny-hatter);
  border-block: 1.5px solid var(--wp--preset--color--arany-elenk);
  max-height: 80px;
  overflow: hidden;
}

/* Reszponzív, önillesztő rács — a legtöbb két/három/négy-oszlopos
   szekcióhoz (pl. Hírek+Események, Értékek, CTA-hármas) */
.grid-illesztheto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--wp--preset--spacing--40);
}

.grid-illesztheto--szoros {
  gap: 2px;
}

/* Fix oszlopszámú rács a Pedagógusaink tanár-kártyáihoz — itt (a
   .grid-illesztheto-val ellentétben) SZÁNDÉKOSAN nem az elérhető
   hely tölti ki automatikusan a rácsot, hanem mindig ugyanannyi
   ember kerül egy sorba, függetlenül attól hány tanár van összesen:
   4 oszlop asztali nézetben, 3 tableten, 2 mobilon. */
.tanar-racs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--40);
}
@media (max-width: 960px) {
  .tanar-racs {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .tanar-racs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mozaik fotórács — aszimmetrikus grid, egyes elemek 2 sort fognak át.
   Általános réteg — a kezdőlapon ("Iskolai életünket képekben") ÉS a
   Galéria oldalon is használjuk, ezért itt él, nem a kezdőlap-
   specifikus 06-page-fooldal.css-ben. */
.mozaik-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: 150px;
  gap: 12px;
}

.mozaik-grid__elem--magas {
  grid-row: span 2;
}

.mozaik-grid .wp-block-image {
  margin: 0;
  height: 100%;
}
.mozaik-grid .wp-block-image img {
  height: 100%;
  object-fit: cover;
}

/* --- Lábléc ------------------------------------------------------------ */

.site-footer {
  background: var(--wp--preset--color--szoveg);
  color: var(--wp--preset--color--lablec-tompitott);
}
.site-footer__oszlopok {
  padding-block: clamp(36px, 5vw, 56px);
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
/* A lábléc logója — 2026-09-05: NEM egy külön, kézzel másolt SVG-
   töredék többé (az korábban könnyen "elszakadhatott" a tényleges,
   adminban cserélhető logótól), hanem CSS `mask-image`-dzsel a
   MINDENKORI valós Site Logo képét használja fel (az URL-t az
   `inc/enqueue.php` írja be `--lablec-logo-kep` egyedi
   property-ként, `wp_get_attachment_image_url()`-lal minden
   betöltéskor frissen lekérdezve) — így ha az admin lecseréli a
   logót a Site Editorban, a lábléc-ikon AUTOMATIKUSAN követi, nincs
   szétcsúszás. A maszk a kép ALFA-csatornáját használja sziluettként,
   a látható színt a `background-color` adja — ez a szabványos módja
   egy SVG/PNG logó tetszőleges (itt: sötét háttérre való, világos
   arany) egyszínű "inverz" változatának CSS-ből, magának a kép-
   fájlnak a módosítása nélkül. A konténer szűk szélessége a teljes
   logó (ikon+szöveg) BAL szélét mutatja csak (`mask-position: left
   center` + `mask-size: auto 100%`) — ez pont a logó ikon-részét
   vágja ki, a szöveges rész levágva marad (a lábléc amúgy is valódi,
   képernyőolvasható szöveggel adja meg az iskola nevét, lásd
   `.site-footer__brand strong` — nem duplikáljuk ugyanazt a nevet
   még egyszer, olvashatatlan grafikaként is). */
.site-footer__logo-ikon {
  width: 56px;
  height: 32px;
  flex: none;
  background-color: var(--wp--preset--color--arany-vilagos);
  -webkit-mask-image: var(--lablec-logo-kep);
  mask-image: var(--lablec-logo-kep);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
}
.site-footer__brand strong {
  color: var(--wp--preset--color--alap);
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 600;
  font-size: 18px;
}
.site-footer__cim {
  margin: 0;
  font-size: 14.5px;
}
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 15px;
}
.site-footer__nav-cim {
  color: var(--wp--preset--color--arany-vilagos);
  font-family: var(--wp--preset--font-family--nunito);
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.site-footer__nav a {
  color: var(--wp--preset--color--lablec-tompitott);
  text-decoration: none;
}
.site-footer__nav a:hover {
  color: var(--wp--preset--color--alap);
}
.site-footer__jogi {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px var(--wp--preset--spacing--60) 22px;
  font-size: 13.5px;
  color: var(--wp--preset--color--lablec-tompitott-2);
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--alap) 14%, transparent);
}

/* Közlemény-sor — cimke + szöveg + bezáró gomb egy sorban, alapvonalra
   igazítva. 2026-08-20: a korábbi, kezdőlap-specifikus statikus
   pattern (fooldal-kozlemeny.php) helyett most a `.section--kozlemeny`
   dinamikus blokként (inc/blocks/kozlemeny-sav) jelenik meg, az oldal
   TETEJÉN, minden aloldalon — bezárható, és a "kozlemeny" egyéni
   tartalomtípuson keresztül a Tanár szerepkör is szerkesztheti. */
.kozlemeny-sor {
  padding-block: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 16px;
}
.kozlemeny-sor__szoveg {
  flex: 1;
  min-width: 200px;
  max-height: 50px;
  overflow-y: auto;
}
.kozlemeny-sor__szoveg p {
  margin: 0;
}
.kozlemeny-sor__szoveg p + p {
  margin-top: 6px;
}
.kozlemeny-sor__bezar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 32px;
  height: 32px;
  color: var(--wp--preset--color--tompitott);
  background: transparent;
  border: none;
  cursor: pointer;
}
.kozlemeny-sor__bezar:hover {
  color: var(--wp--preset--color--szoveg);
}

/* Admin-only jelzés, ha még nincs közzétett közlemény — csak
   szerkesztési joggal rendelkező felhasználóknak látszik. */
.kozlemeny-sav__nincs-tartalom {
  margin: 0;
  padding: 10px var(--wp--preset--spacing--60);
  background: var(--wp--preset--color--kozlemeny-hatter);
  color: var(--wp--preset--color--tompitott);
  font-size: 13.5px;
  text-align: center;
}

/* Gyorselérés — vízszintesen tördelődő linksor elválasztó jelekkel */
.gyors-sor {
  max-width: calc(1200px + 2 * var(--wp--preset--spacing--60));
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--60);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  align-items: center;
  justify-content: center;
}

/* Általános, tördelődő vízszintes sor (pl. gomb-minták, linkek egymás mellett) */
.flex-sor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  align-items: center;
}

/* Színminták és tipográfia-minták sora (stíluskalauz) */
.szinminta-sor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
}

.tipo-sor {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  align-items: flex-start;
}