/* ============================================================================
* HID A WORDPRESS-BLOKKOK ES A V4 STILUSLAPJAI KOZOTT. (Sprint 2 / 2.1.1)
*
* A V4 stiluslapjai valtozatlanok (assets/v4/). Ahol a WordPress MAS SZERKEZETET ad,
* mint a V4 kezzel irt HTML-je, ott ez a fajl teszi ugyanolyanna a megjelenest. Minden
* szabaly egy MERT kulonbseget fed - ha a V4 es a WordPress-oldal kepernyokepe egyezik,
* a szabaly a helyen van; ha egy szabaly torolheto kulonbseg nelkul, torlendo.
* ========================================================================= */
/* --- 1. A blokk-csomagolok alapertelmezett terkozei ------------------------------
* A V4-ben a kepek /
elemek voltak; a kepblokk , amelynek a bongeszo
* 40px oldalmargot ad. */
/* :where() = nulla specificitas: a V4 sajat margoszabalya (pl. .pillar-icon{margin-bottom:20px})
* mindig erosebb. MERVE: a sima "figure.wp-block-image" a Padelmuhely pillerkartyait 20px-lel
* alacsonyabbra tette. */
:where(figure.wp-block-image) { margin: 0; }
:where(.wp-block-image) img { display: block; }
/* --- 2. A V4 "role=img" hatterkepei helyett kepblokk -----------------------------
* A V4 a hero-, program-, portre- es pillerkepeket CSS-hatterkepkent adta (nem
* szerkesztheto, nem kereshato, nincs srcset). Nalunk mediatarbol jovo kepblokk.
*
* A KEP ABSZOLUT POZICIOVAL tolti ki a dobozt - pontosan ugy, mint egy hatterkep: a doboz
* meretet tovabbra is CSAK a V4 stiluslapja adja. MERVE: normal folyasban a portre alaku
* kep a sajat magassagaval kitolta a vallalati hero racssorat (+251px). A pozicio a
* hatterkep-pozicio megfeleloje (object-position, a fokuszpont a mediatarban, media.php). */
.wp-block-image.program-photo { position: relative; }
.wp-block-image.hero-image,
.wp-block-image.program-photo,
.wp-block-image.coach-portrait { background-image: none; overflow: hidden; }
.wp-block-image.hero-image > img,
.wp-block-image.program-photo > img,
.wp-block-image.coach-portrait > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pe-fokusz, 50% 50%); }
/* A fokuszpont (a mediatar beallitasa, --pe-fokusz) MASHOL csak ott ervenyes, ahol a V4 nem
* ad sajat kivagast: a :where() nulla specificitasu, barmely V4 object-position erosebb. */
:where(img[style*="--pe-fokusz"]) { object-position: var(--pe-fokusz); }
/* A V4 KONTEXTUSONKENT mas kivagast adott ugyanannak a kepnek (merve, qa/cdp.js):
* a vallalati hero kozepre igazit, a fooldali kartya 35%-ra; mobilon a hero 72%-ra,
* a portre kozepre. A fokuszpont a kep sajat beallitasa - ezek a V4 kontextus-szabalyai,
* ezert az !important (a fokuszpont inline style-kent erkezik). */
.company-hero .wp-block-image.program-photo > img { object-position: 50% 50% !important; }
@media (max-width: 600px) {
.wp-block-image.hero-image > img { object-position: 72% 50% !important; }
.wp-block-image.coach-portrait > img { object-position: 50% 50% !important; }
}
/* A pillerikon a V4-ben egy 4-es sprite negyede volt (background-size: 400% auto,
* fuggolegesen kozepen): a negyed szelessege = a doboz szelessege. Ugyanez kepkent. */
.wp-block-image.pillar-picture,
.wp-block-image.pillar-icon { position: relative; background-image: none; overflow: hidden; }
.wp-block-image.pillar-picture > img,
.wp-block-image.pillar-icon > img { position: absolute; left: 0; top: 50%; width: 100%; height: auto; max-width: none; transform: translateY(-50%); }
/* --- 3. Helyszin-ablakok ---------------------------------------------------------
* A V4 ugyanazt a ket szabalyt hat azonositora irta le (#club-dialog, #flow-dialog...).
* A helyszinek adatbol jonnek (uj klub is felveheto), ezert osztaly-szinten. */
.club-dialog { max-height: 90vh; overflow: auto; }
.club-dialog small { display: block; font-size: 12px; color: #526472; }
/* --- 4. Galeria ---------------------------------------------------------------------
* A V4 a feltoltott temat kezzel jelolte (gallery-populated: teljes szelesseg). Nalunk a
* tartalom donti el: ha van kep vagy video, a tema teljes szelessegu. */
.gallery-category:has(.gallery-photos, .pe-video) { grid-column: 1 / -1; }
/* A Spinfire termekkepek a V4-ben beagyazott stilussal: teljes kep feher alapon. */
.pe-termekkep { margin: 0; }
.pe-termekkep img { aspect-ratio: 1; object-fit: contain; background: white; }
.pe-termekkep figcaption { padding: 14px; }
/* A videok a V4 beagyazott stilusaval. */
.pe-video { margin: 16px 0; }
.pe-video video { display: block; width: 100%; max-width: 900px; aspect-ratio: 16 / 9; background: #10232d; border-radius: 8px; }
.pe-video figcaption { padding-top: 12px; }
.pe-video-termek { margin: 0; }
.pe-video-termek video { height: auto; max-width: none; max-height: 720px; aspect-ratio: auto; }
.pe-video-termek figcaption { padding-top: 0; margin-top: 12px; }
/* Nagyito: a galeriakep ugyanazon a lapon nyilik (nem uj lapon, mint a V4-ben). */
.pe-nagyito { width: min(1100px, 94vw); max-height: 94vh; padding: 0; border: 0; border-radius: 8px; background: #10232d; color: white; }
.pe-nagyito::backdrop { background: rgba(4, 18, 28, .86); }
.pe-nagyito img { display: block; max-width: 100%; max-height: calc(94vh - 64px); margin: 0 auto; object-fit: contain; }
.pe-nagyito p { margin: 0; padding: 12px 56px 14px 16px; }
.pe-nagyito .dialog-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #10232d; font-size: 26px; line-height: 1; cursor: pointer; }
/* --- 5. Uj, a V4-ben meg ures listak (hirek, tamogatok) a kartya stilusaban -------- */
.pe-hirek-lista { margin: 18px 0 0; padding: 0; list-style: none; }
.pe-hirek-lista li { padding: 10px 0; border-top: 1px solid var(--line); }
.pe-hirek-lista a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pe-hirek-lista time { display: block; font-size: 14px; opacity: .75; }
.pe-hirek-tovabb { margin-top: 10px; }
.pe-hirek-tovabb a { font-weight: 700; }
.pe-tamogatok { display: flex; flex-wrap: wrap; gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.pe-tamogatok li { flex: 0 1 160px; }
.pe-tamogatok img { display: block; width: 100%; height: 90px; object-fit: contain; }
.pe-tamogatok span { display: block; margin-top: 6px; font-size: 14px; }
/* Egy hir a portal keretben */
.pe-cikk > * + * { margin-top: 16px; }
.pe-cikk img { max-width: 100%; height: auto; border-radius: 6px; }
/* Szerkesztoi elonezet: ures blokk jelzese (a latogato nem latja). */
.pe-blokk-ures { padding: 12px; border: 1px dashed #8aa; font-size: 14px; }
/* --- 6. A V4 tarolokban kozvetlenul allo szoveg ------------------------------------
* A V4-ben a
....
elemei a div flex/grid
* elrendezesenek kozvetlen tagjai voltak. A blokkszerkesztoben ezek egy bekezdesbe
* kerulnek (pe-inline) - a bekezdes doboza itt eltunik, a tartalma a V4 szerint rendezodik. */
/* display:contents NEM allitja meg az oroklest: a V4 "p" szabalyai (pl. ".coach p{font-size}")
* a szovegre tovabbra is hatnanak. Az all:inherit minden tulajdonsagot a szulotol vesz at -
* a bekezdes igy valoban atlatszo csomagolo. Az !important szandekos: a V4 barmilyen
* specifikussagu p-szabalyanal erosebbnek kell lennie. */
p.pe-inline { all: inherit !important; display: contents !important; }
/* --- 7. Galeria: a kep KITOLTI a keretet (2.3.2) -----------------------------------
* A spec kifejezetten javitast ker a V4-hez kepest: "A galeriakepek kitoltik a keretet
* (a V4-ben sotet savok latszanak)." A V4 object-fit:contain-je helyett cover, a kivagas
* a kep fokuszpontja (mediatar). A Spinfire termekkepek (feher alap, teljes kep) maradnak. */
.gallery-photos a.gallery-photo img { object-fit: cover; object-position: var(--pe-fokusz, 50% 50%); }
/* A video eredeti fajljanak letoltese (2.3.2). */
.pe-video-letoltes { margin: 8px 0 0; font-size: 14px; }
.pe-video-letoltes a { text-decoration: underline; text-underline-offset: 3px; }
/* Kozossegi ikonok a lablecben (csak kitoltott cimnel jelennek meg - D7). */
.pe-kozossegi { display: flex; gap: 12px; margin: 0; }
.pe-kozossegi a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: inherit; }
.pe-kozossegi a:hover, .pe-kozossegi a:focus-visible { color: var(--lime); }
/* --- 8. Celmeret (WCAG 2.2, 2.5.8) - merve a 10-es kapuban -------------------------
* A lablec menupontjai 20px magasak es kozel allnak egymashoz (320-414px-en tobb sorba
* tordelve). A fuggoleges belso margo inline elemen NEM tolja el a sorokat, csak a
* kattinthato terulet lesz 24px - a megjelenes valtozatlan. */
footer nav a { padding-block: 3px; } /* 20px + 2x3px: tortszamos sormagassagnal is biztosan >= 24px */
/* --- 9. A menu aktualis pontja KIEMELT - minden oldalon (D1, 2026-10-08; #36379, 2026-10-24) ---
* A V4-ben a kiemeles (.main-nav a[aria-current]) CSAK a padel-guide.css-ben van, azt pedig csak a
* "Mi a padel?" oldal tolti be. MERVE (megbizoi jelzes, 2026-10-24): a Galeria, a Hirek es a Tagoknak
* oldalon a szerver kiadta az aria-current-et, de nem volt ra szabaly - a pont nem lett zold. Ezert a
* szabaly itt, minden oldalra (a fooldalon a gorgetesfigyelo allitja, app.js). A tulajdonos a
* menupont "pe-fooldalon-rejtett" osztalyaval a fooldalon elrejtheti (megjelenes.php). */
.main-nav a[aria-current] { color: var(--lime); }
/* --- 10. Tagsagi felulet (Sprint 3, padeledzo-members) --------------------------------
* A V4 .registration-preview form szabalya (feher doboz, belso margo) MINDEN urlapra hat a
* szakaszban - a soron beluli muveletekre (Torles, Kilepes) nem kell doboz. A jelolo a V4
* profile-options mintajat koveti (sorba rendezve, normal betuvel). */
.registration-preview form.pe-tag-inline { display: inline; padding: 0; background: none; border-radius: 0; }
.registration-preview form.pe-tag-kilepes { display: block; margin-top: 16px; }
.pe-tag-inline .button-link { display: inline; width: auto; padding: 0 0 0 8px; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }
.pe-tag-adatlapok { padding-left: 20px; }
.pe-tag-adatlapok li { margin: 8px 0; }
.pe-tag-adatlapok a { text-decoration: underline; text-underline-offset: 3px; margin-left: 8px; }
.registration-preview label.pe-tag-jelolo { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.registration-preview .pe-tag-jelolo input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: #527415; }
.pe-urlap-hiba { color: #9b1c1c; font-weight: 700; }
[aria-invalid="true"] { border-color: #9b1c1c !important; outline: 2px solid #9b1c1c; outline-offset: 1px; }
/* U11 (#36361): adatvedelmi tajekoztato sor minden adatgyujto urlap bekuldo gombja felett. */
.pe-adatvedelmi-info{font-size:14px;line-height:1.5;margin:14px 0 6px}
.pe-adatvedelmi-info a{text-decoration:underline;text-underline-offset:2px}
/* --- 11. Nyelvvalaszto: a mukodo nyelvi link (#36378) ---------------------------------------
* A V4 a nem aktualis nyelvet