/* * Pás K — „Zjednodušte si správu grantov". Vzor zo core blokov, nie vlastný blok. * * Celá sekcia je `core/group` → `core/heading` (h2) + `core/accordion` * (`iconPosition: "left"`) → `core/accordion-item` → `core/accordion-heading` * + `core/accordion-panel` s `core/paragraph`. `docs/04-bloky.md` ju opisuje * ako vlastný blok s poľami „Povoliť viac otvorených" a „Prvá otvorená"; * postavená je vzorom, lebo obe polia už sú v jadre — `autoclose` na * `core/accordion` a `openByDefault` na `core/accordion-item`. * * Od WP 6.9 jadro rieši aj to, čo by vlastný blok muselo stáť najviac práce: * klávesnicu, `aria-expanded`, `aria-controls`, otváranie cez `#hash` * a `hidden="until-found"` (vyhľadávanie v prehliadači nájde text aj * v zbalenom paneli). Interaktivita je v * `wp-includes/js/dist/script-modules/block-library/accordion/view.js`. * * Vzor nemá typ bloku, na ktorý by sa štýl dal zavesiť, takže tento súbor * visí na `core/group` (`functions/BlockStyles.php`). Tým sa dostane na * frontend aj do editora — stylesheet témy editor nenačítava. * * ── Na čom presne visí (kontrakt s markupom) ─────────────────────────────── * * Jediná trieda, ktorú musí markup napísať, je **`egrant-accordion` na * sekčnej `core/group`**. Všetko vnútri sa chytá cez triedy jadra * (`.wp-block-accordion`, `.wp-block-accordion-item`, `.is-open`, * `.wp-block-accordion-heading__toggle`, `…__toggle-icon`, `…__toggle-title`, * `.wp-block-accordion-panel`). * * Je to zámer, nie lenivosť: BEM triedy na položkách by sa museli v markupe * zopakovať deväťkrát na položku, na hlavičku aj na panel, a jedno zabudnutie * by ticho rozbilo jednu položku z deviatich. Triedy jadra sú vnútri sekcie * jednoznačné a markup ich píše `save()` jadra, takže na ne zabudnúť nejde. * Ak by k nim markup navyše pridal vlastné triedy, tento súbor to neruší. * * ── Prečo majú selektory dve triedy ──────────────────────────────────────── * * Globálne štýly stoja v `` **za** štýlmi blokov, takže pri rovnakej * špecificite vyhrajú ony. `.egrant-accordion` má (0,1,0) — presne toľko, * čo `:root :where(.wp-block-group)` alebo `:root :where(.is-layout-flow) > *` * z `theme.json`. Preto sa všade píše `.egrant-accordion .wp-block-…`, * teda (0,2,0) a viac. Podrobne v `docs/03-architektura.md`. * * ── Čo sa prebíja proti jadru ────────────────────────────────────────────── * * 1. **Ikona `−`, nie `×`.** Jadro kreslí do `…__toggle-icon` **textové `+`** * a v stave `.is-open` ho **otáča o 45°** (`blocks/accordion-item/style.css`), * čím vznikne `×`. Dizajn chce `−`. Rotáciou sa to dosiahnuť nedá, takže * textový glyf tu zhasína (`font-size: 0`), rotácia sa ruší a znak sa * kreslí dvoma pseudoprvkami. Viď sekciu „Ikona" nižšie. * 2. **Kruhové pozadie.** Jadro dáva ikone len rozmer `1.2em` a centrovanie, * žiadne pozadie. Kruh 38 s výplňou je celý náš. * 3. **Zvislý padding tlačidla.** Jadro má na `…__toggle` * `padding: var(--wp--preset--spacing--20, 1em) 0`, a `spacing--20` je * v tejto téme **8px** — hlavička by teda merala 38 + 16 = 54 a rozteč * položiek by vyšla 66 namiesto 50. Nuluje sa. * 4. **Veľkosť titulku.** Hlavička je `h3`, takže by z `theme.json` dostala * `medium` (22,4). Dizajn chce 17,6. * 5. **Poloha ikony.** `iconPosition: "left"` v markupe nerobí nič — * `has-icon-left` ani `has-icon-right` nemá jadro v CSS vôbec. Ikonu * presúva doľava až `order: -1` v tomto súbore. * 6. **Margin zbaleného panela.** Jadro ho nuluje pravidlom s rovnakou * špecificitou, akú má náš selektor — muselo sa to prepísať vyššou, * inak by o rozteči položiek rozhodovalo poradie v ``. * * 🔴 **Medzi položkami NIE JE deliaca linka** a jadro ani `theme.json` žiadnu * nekreslia — štyri `style.css` v `wp-includes/blocks/accordion…` majú spolu * 30 riadkov a border v nich nie je, `styles.blocks` v `theme.json` pozná len * `egrant/divider`, `egrant/hero` a `core/paragraph`. Nie je teda čo zhasínať; * ak by border pribudol (blokové podpory `__experimentalBorder` ho vedia dať * cez inline štýl z editora), zhasína sa v markupe, nie tu. * * ── Odkiaľ sú hodnoty ────────────────────────────────────────────────────── * * Desktop: snímka `2026-09-01 13-26-28` (rám `1280 Uvod (dizajn 1024)`), * mierka z hrán rámu x 24…1975 = 1280 CSS → **1,5242 px/CSS**; obsahový * stĺpec potom leží na x 219…1780 (1024 CSS), rovnako ako pri páse H. * * ikona kruh x 512…569, y 1979…2036 → 38,05 × 38,05 → **38** * výplň ikony (20, 7, 1) = #140701 → `ink-deep` (#140700) * glyf biely, 13,1–13,8 CSS, ťah 1,3–2,0 → **14 × 14, ťah 2** * šírka zoznamu ľavá hrana ikon 512 = 192,2 CSS od hrany * obsahu → 1024 − 2 × 192 → **640, centrovaný** * ikona→titulok hrana ikony 570, ink titulku 595 = 16,4 → **16** * odsadenie * popisu ink popisu 595 = 54,5 od hrany položky → 38 + 16 = **54** * rozteč * zbalených ikony 1979 / 2055 / 2132 / 2208 / 2284 / 2360 * → 76–77 px = 49,9 CSS → 38 + **12** * rozbalená ikona 1833…1891 · ink popisu 1905…1925 · * ďalšia ikona 1979 → 95,8 CSS rozteče, * teda 38 + 10 + 18 + 31 = 97 → **10 hore, 31 dole** * * Mobil: snímka `2026-09-04 10-33-18` (rám `375 Uvod`), mierka z hrán rámu * x 16…1777 = 375 CSS → **4,699 px/CSS**. * * bočné odsadenie ľavá hrana ikon 110 → 20,0 → **20** * ikona kruh x 110…287, y 376…553 → 37,9, výplň (20, 7, 1) * glyf `+` 13,83 × 13,83, ťah 1,92 → **14 × 14, ťah 2** * glyf `−` **11,92 × 1,92** → **12 × 2, kratší** * ikona→titulok hrana 288,6, ink titulku 366 = 16,5 → **16** * odsadenie popisu ink 366 = 54,3 od hrany položky → **54**, ako na desktope * rozteč zbalených 45,97 → 38 + **8** * nadpis→položka ink nadpisu 257, ikona 376 = 25,3 ink-to-box → **24** * popis rozteč riadkov 84 px = 17,87 CSS = 14,4 × 1,24 → lh **1,25** * rozbalená ikona 376…553 · ink popisu 612…674 a 696…759 · * ďalšia ikona 831 → 97,0 CSS rozteče, * teda 38 + 10 + 2 × 18 + **13** * * Odsadenie popisu je tu dvakrát nezávisle odmeraná kontrola tej istej * šestnástky: 54 = 38 + 16 vyjde na oboch šírkach, takže medzera ikona → * titulok je 16 a nie 17 (tých 17 na ráme je 16 + ľavý bočík prvého glyfu). * * 🔴 **Čo sa odmerať nedalo:** * * 1. **Dĺžka glyfu `−` na desktope.** Otvorená je len prvá položka a jej * ikonu prekrýva komentárový pin Figmy (`12-48-25`, `docs/13`). Berie sa * mobilná hodnota 12 — v dizajne je to tá istá ikona. * 2. **Pravá hrana zoznamu.** Kontajner nemá viditeľnú hranu; 640 je * dopočítané zo symetrie (192,2 CSS vľavo v stĺpci 1024). Že je zoznam * naozaj centrovaný a nie odsadený zľava, potvrdzuje až nadpis: jeho ink * má stred 1000,0 proti stredu rámu 999,5. * 3. **Správanie medzi 640 a 900 px.** Rámy sú len 1280 a 375. * * ⚠️ **Rozhodnutia proti rámu:** * * 1. **Titulok drží 17,6 aj na mobile.** Preset `small` je síce presne 17,6, * ale pod 900 px sa láme na 16,6 (`theme.json`, `styles.css`) — a mobilný * rám má na titulku položky 17,6 rovnako ako desktopový (ink 78 px pri * 4,699 px/CSS = 16,6 CSS inku, čo je pri pomere inku 0,93 em práve 17,8). * Preto literál, nie preset. Rovnaká úvaha ako pri nadpise nad logami * (`pattern-logos.css`), len z opačnej strany. * 2. **Rozteč riadkov titulku 1,2, hoci rám má 1,32.** Jediný dvojriadkový * titulok v podkladoch („Prehľadné a kompletné vyúčtovania", mobil) má * rozteč riadkov 109 px = 23,19 CSS = 17,6 × **1,318** — to je Figma * „Auto", teda metrika fontu, nie navrhnutá hodnota. Ostáva 1,2 * z `elements.heading`; na jednoriadkovom titulku to nevidno vôbec, lebo * výšku riadku aj tak prevýši ikona (38). * 3. **Okolo dvojriadkovej položky nechávame rozostup 8.** Rám tam má * ≈13,3 CSS (rozteč ikon 55,54 namiesto 46 pred aj za ňou) — v CSS by to * bolo pravidlo „iný rozostup, keď je titulok na dva riadky", ktoré sa * nedá napísať bez kontajnerových dotazov a ktoré dizajn nikde nevyslovil. * 4. **Nadpis sekcie je v ráme centrovaný** (desktop aj mobil, viď vyššie), * ale zarovnanie je vec markupu (`textAlign` na `core/heading`), nie tohto * súboru — a zadanie hovorí nadpis neriešiť. */ /* ── Zoznam ─────────────────────────────────────────────────────────────── */ /* Zoznam je 640 v stĺpci 1024, teda 192 z každej strany. Na mobile sa * `max-width` neuplatní (obsah je 335) a zoznam ide cez celú šírku sám — * netreba naň mediálny dotaz. * * `margin-inline` a nie `margin` zámerne: horný rozostup nadpis → zoznam je * `blockGap` sekcie (32) a ten sa na desktope zhoduje s rámom, takže sa tu * nemá čo prepisovať. `margin: … auto` by ho zhodilo na nulu — flow layout ho * dáva ako `margin-block-start` cez `:root :where(.is-layout-flow) > *` * so špecificitou (0,1,0), kým selektor s dvoma triedami má (0,2,0) a vyhrá. * Presne to zrazilo pri páse H medzeru na 0 namiesto 32. */ .egrant-accordion .wp-block-accordion { max-width: 640px; margin-inline: auto; } /* ── Variant „Užší, zarovnaný vľavo" (`is-style-measure-left`) ───────────── */ /* Druhá šírka zoznamu — „Naše hodnoty" na O nás. Nie je to oprava tej prvej: * pás K na Úvode má v ráme 640 na stred a zostáva predvolený, takže dve * šírky musia existovať vedľa seba. Registrácia štýlu je * v `functions/BlockStyles.php` (`core/accordion`). * * **Vľavo je odmerané, 552 je dopočítané.** Rám `1280 o-nas` má ľavú hranu * kruhovej ikony na x = 128,2, teda presne na hrane obsahového stĺpca * (1024 s okrajmi 128) — zoznam sa tam necentruje. Pravú hranu ale rám * neukazuje, takže šírka vyšla zo **zalomenia textu panela**: ten istý * odstavec nasimulovaný pri rôznych šírkach dá pri kontajneri 552 (textový * stĺpec 498) osem riadkov so zhodnými zlomami aj šírkami — 490,7 / 428,2 / * 495,5 / 439,3 / 496,8 / 456,5 / 491,5 / 56,2 proti odmeraným 488 / 426 / * 493,2 / 437,3 / 494,7 / 453,9 / 489 / 53,8. Iná rozumná hodnota do okna * [494,7; 503] nesadne. * * Píše sa to premennou, nie literálom: 552 je už existujúca miera témy * (`--wp--custom--measure`, `theme.json`), tá istá, ktorou má šírku lead. * Ak sa miera niekedy pohne, pohne sa s ňou aj tento variant. * * `margin-inline: 0` ruší centrovanie predvoleného stavu. Funguje to len * preto, že sekčná grupa má `layout: default` — v `constrained` layoute dáva * WordPress deťom `margin-inline: auto` s `!important` a z CSS bloku sa to * prebiť nedá (tá istá pasca je popísaná pri leade * v `assets/blocks/core-paragraph.css`). * * Špecificita (0,3,0) je **odmeraná, nie tušená**: s dvoma triedami * (`.egrant-accordion .is-style-measure-left`) by bola remíza s pravidlom * vyššie a rozhodovalo by poradie v súbore; navyše `.is-style-measure` z * `core-paragraph.css` ukazuje, že variačné selektory sa tu píšu s typom * bloku. Odmerané v prehliadači: 552 na x 128, nie 640 na x 320. * * ⚠️ Na mobile sa `max-width` neuplatní a **nesmie uplatniť** — obsah je 335, * teda menej než 552, takže akordeón ide cez celú šírku sám a mediálny dotaz * netreba. Odmerané pri 375: šírka 335 na x 20, rovnako ako pred variantom. */ .egrant-accordion .wp-block-accordion.is-style-measure-left { max-width: var(--wp--custom--measure, 552px); margin-inline: 0; } /* ── Položka ────────────────────────────────────────────────────────────── */ /* Rozostup zbalených položiek. Píše sa ako `+`, nie ako `margin-block` na * každej položke: flow layout nuluje prvému dieťaťu `margin-block-start` * pravidlom `:root :where(.is-layout-flow) > :first-child` so špecificitou * (0,1,0), a pravidlo s dvoma triedami by mu ho vrátilo — prvá položka by sa * o 10 odsunula od nadpisu. * * `gap` tu nefunguje. `core/accordion` má **flow** layout a ten rozostupy * robí marginmi; `gap` platí len vo flex a grid. * * 🔴 **10 je z Figmy** (Lukáš, 2026-09-14: „medzi 2 zatvorenými položkami * akordeónu je 10px", ikona 38×38). Predtým tu bolo 12, odvodených z rozteče * 50, ktorú som odmeral zo snímky — 38 + 12. S desiatkou vychádza rozteč 48 * a tie dva pixely zo snímky vysvetlené nie sú; návrh je ale prednejší než * moje meranie rastra. ⚠️ Keby Figma hovorila rozteč 50, potom medzera 10 * meria niečo iné než hranu ikony a treba to prezistiť. */ .egrant-accordion .wp-block-accordion-item + .wp-block-accordion-item { margin-block-start: 10px; } /* Po rozbalenej položke je medzera väčšia: **33** na desktope proti 10 medzi * zbalenými — otvorená položka podľa Figmy pridáva k tej desiatke ďalších 23 * (Lukáš, 2026-09-14). Odmeraná rozteč rozbalenej položky zo snímky bola * 95,8; s 33 vychádza 95,56, takže tu sa návrh a raster zhodujú. * * Prečo susedským selektorom a nie spodným marginom panela: panel je * posledné dieťa položky a položka nemá padding ani border, takže by sa jeho * `margin-block-end` **zlial** (margin collapsing) najprv cez položku a potom * so `margin-block-start` ďalšej položky — z 19 + 12 by nevyšlo 31, ale * max(19, 12) = 19. Takto sa margin sčítať nemusí, lebo je len jeden. * * Cena: keď je otvorená **posledná** položka, spodok pásu drží len rytmus * sekcie (54 k oddeľovaču). Rám to nehovorí — otvorená je v ňom prvá. */ .egrant-accordion .wp-block-accordion-item.is-open + .wp-block-accordion-item { margin-block-start: 33px; } /* ── Hlavička ───────────────────────────────────────────────────────────── */ /* `padding-block: 0` prebíja `padding: var(--wp--preset--spacing--20, 1em) 0` * z jadra — viď bod 3 v hlavičke. Bočný padding jadra je 0 a ten zostáva, * preto `padding-block` a nie `padding`. * * `gap` tu funguje, na rozdiel od kontajnerov vyššie: jadro má na tlačidle * `display: flex`. Jadro samo medzeru medzi ikonou a titulkom nedáva žiadnu. * * Zvislé centrovanie ikony na dvojriadkový titulok rieši `align-items: center` * z jadra — netreba ho opakovať. */ .egrant-accordion .wp-block-accordion-heading__toggle { padding-block: 0; } /* 🔴 **Ikona je mimo toku textu a to je celý zmysel tejto stavby.** * * Predtým bola ikona vnútri tlačidla ako flex položka, takže hlavičku * naťahovala na svojich 38 — a titulok, vysoký 21,12, sa v nej centroval. * Pod titulkom tým zostávalo 8,44 hlavičky navyše a panel, ktorý visí na * hlavičke, sa o toľko odsúval. Riešilo sa to odpočítaním cez `calc`, čo * fungovalo len pre jednoriadkový titulok: pri dvojriadkovom slack zmizne * a odstup by vyšiel 6,56 namiesto 15. * * Teraz sú to dva stĺpce, ako to má návrh: **ikona v prvom, titulok aj panel * v druhom**. Hlavička sa zmršťuje na titulok, takže panel je od neho rovných * 15 pri jednom aj pri dvoch riadkoch. Žiadny `calc`. * * Odsadenie 54 = 38 ikona + 16 medzera nesie **položka**, nie hlavička, aby * ho zdedil aj panel a oba stĺpce tak držala jedna hodnota. * * `min-height` na položke drží zbalený riadok na výške ikony: hlavička sama * má 21,12 a bez toho by sa rozteč zbalených položiek zmenšila. * * Ikona sa centruje na **hlavičku**, nie na položku — pri dvojriadkovom * titulku teda sedí v strede oboch riadkov, presne ako v mobilnom ráme. */ .egrant-accordion .wp-block-accordion-item { position: relative; min-height: 38px; padding-inline-start: 54px; } .egrant-accordion .wp-block-accordion-heading { position: relative; } /* Titulok: 17,6 / 1,2 / 600 / 0,2 / `ink`. Z toho `theme.json` dáva všetko * okrem veľkosti — `elements.heading` má presne 600 / 1.2 / 0.2px a * `styles.color.text` je `ink` globálne. Napísané je to aj tak celé, aby sa * pás dal prečítať bez `theme.json` po ruke; jediná hodnota, ktorá naozaj * niečo mení, je `font-size` (h3 by inak mala `medium`, teda 22,4). * * Literál a nie preset `small`: `small` klesá pod 900 na 16,6, kým rám drží * 17,6 na oboch šírkach. Prečo sa tu prebíja `medium` z `h3`, je bod 4 * v hlavičke. */ .egrant-accordion .wp-block-accordion-heading__toggle-title { font-size: 17.6px; line-height: 1.2; font-weight: 600; letter-spacing: 0.2px; color: var(--wp--preset--color--ink); } /* ── Ikona ──────────────────────────────────────────────────────────────── */ /* 🔴 **Ikonu doľava dáva `order`, nie markup.** `iconPosition: "left"` na * `core/accordion` sám o sebe nerobí nič: `has-icon-left` ani `has-icon-right` * sa v CSS jadra **nevyskytujú vôbec**, sú to len značky, ktoré vypisuje * `save()`. Ikona stojí vpravo jedine preto, že je v DOM posledná * a `…__toggle-title` má od jadra `flex: 1`. * * `order: -1` a nie `row-reverse` ani `:has()`, lebo je **idempotentné**: * vyjde rovnako, či markup vypíše ikonu pred titulkom (to robí `save()` * jadra pri `iconPosition: "left"`) alebo za ním (to má markup, ktorý ide do * stránky, spolu s triedami `has-icon has-icon-left`). Pás sa teda nerozbije, * keď sa poradie v podkladovom markupe zmení. Overené na oboch poradiach. * * Prístupnosti to nevadí: obe rozpätia sú vnútri jedného tlačidla, teda * jedného tabstopu, a ikona má `aria-hidden="true"` — prístupný názov * tlačidla nesie titulok. * * Kruh 38 s výplňou `ink-deep`. `flex: 0 0 auto`, aby sa pri dlhom titulku * nestlačila — jadro jej dáva len `width/height: 1.2em`, čo je pri 17,6 px * 21,1, a `flex-shrink` nerieši. * * `font-size: 0` zhasína textové `+`, ktoré do span-u vypisuje `save()` jadra. * Znak kreslia pseudoprvky nižšie — inak by sa `−` nedalo urobiť (jadro * z `+` v stave `.is-open` robí `×` rotáciou o 45°). */ .egrant-accordion .wp-block-accordion-heading__toggle-icon { position: absolute; inset-inline-start: -54px; /* 🔴 Centruje sa záporným marginom, **nie `translateY(-50%)`**. Rotáciu * jadra v stave `.is-open` rušíme pravidlom `transform: none` a to by * posun zmazalo spolu s ňou — ikona potom spadne o pol svojej výšky * (odmerané: 19 px pod stredom titulku). Margin je na `transform` * nezávislý, takže sa tie dve pravidlá nemôžu pobiť. */ inset-block-start: 50%; margin-block-start: -19px; width: 38px; height: 38px; border-radius: var(--wp--custom--radius--pill); background-color: var(--wp--preset--color--ink-deep); font-size: 0; transition: background-color var(--wp--custom--transition--base, 0.2s ease); } .egrant-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon { background-color: var(--wp--preset--color--ink-hover); } /* 🔴 **Titulok sa nepodčiarkuje.** Jadro má * `.wp-block-accordion-heading__toggle:hover .…__toggle-title { text-decoration: * underline }` (`accordion-heading/style.css:26`) a dizajn to nemá — potvrdil * Lukáš 2026-09-14. Prejaví sa to najviac **po kliknutí**, lebo kurzor zostane * nad položkou a podčiarknutie je vtedy vidieť aj bez pohybu myšou. * * Spätnou väzbou pri hoveri tým zostáva zosvetlenie kruhu na `ink-hover` * (pravidlo vyššie), čo je menej, než by sa zišlo — ale rám je v tomto jasný. * * Selektor jadra má (0,2,0); tento má (0,3,0), takže o tom nerozhoduje * poradie súborov v ``. */ .egrant-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title { text-decoration: none; } /* Zrušenie rotácie. Jadro má * `.wp-block-accordion-item.is-open > .wp-block-accordion-heading .…__toggle-icon` * so špecificitou (0,4,0), tento selektor má (0,5,0). */ .egrant-accordion .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon { transform: none; } /* Dve linky ťahu 2 cez stred kruhu. `position: absolute` ich zároveň vyberá * z flexu, ktorý má span z jadra (`display: flex`) — inak by sa z nich stali * flex položky a rozhodili by centrovanie. * * 🔴 **Prechod ide na `width` a `height`, nie na `transform` — inak preblikne * text celého zoznamu.** `transform` je kompozitná vlastnosť: kým sa animuje, * Chrome si na ňu založí vlastnú vrstvu a text v okolí do nej prekreslí * **šedým** vyhladzovaním; keď po skončení prechodu vrstvu zahodí, prekreslí * ho späť na **subpixelové**. Titulky položiek tým na jeden snímok zmenia * vzhľad, hoci sa v nich nezmenil ani jeden štýl. * * Odmerané v Chrome (screencast po snímkoch, klik na zbalenú položku): * titulok má po celý čas `deco: none`, farbu `rgb(20, 20, 20)`, `opacity: 1` * aj nezmenený `getBoundingClientRect` — a napriek tomu sa **325 ms po * kliknutí**, teda hneď po dobehnutí 0,2 s prechodu, prekreslí 9759 pixelov * v pásoch presne na riadkoch titulkov. Vzorka pixelu: (204, 203, 201) → * (104, 180, 220), teda šedé vyhladzovanie → subpixelové. * * Zvislá linka sa preto zbiera `height: 0` namiesto `scaleY(0)`. Vizuálne je * to to isté (obe sú vycentrované translatom, ktorý zostáva **statický** * a žiadnu vrstvu nezakladá), ale ani jedna animovaná vlastnosť už nie je * kompozitná — rovnako ako vodorovná linka, ktorá sa vždy skracovala cez * `width`. */ .egrant-accordion .wp-block-accordion-heading__toggle-icon::before, .egrant-accordion .wp-block-accordion-heading__toggle-icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--wp--preset--color--surface); transition: width var(--wp--custom--transition--base, 0.2s ease), height var(--wp--custom--transition--base, 0.2s ease); } /* Vodorovná — zostáva v oboch stavoch, pri `−` sa len skráti. */ .egrant-accordion .wp-block-accordion-heading__toggle-icon::before { width: 14px; height: 2px; } /* Zvislá — pri `−` zaniká. */ .egrant-accordion .wp-block-accordion-heading__toggle-icon::after { width: 2px; height: 14px; } /* `−` je kratšie než rameno `+`: 12 proti 14 (odmerané na mobilnom ráme). * Mení sa `width`, nie `scaleX`: linka je vycentrovaná translatom, takže * užšia ostane v strede sama, a 2 px ťah zostane ostrý. */ .egrant-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::before { width: 12px; } .egrant-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::after { height: 0; } /* ── Panel ──────────────────────────────────────────────────────────────── */ /* Popis je zarovnaný pod titulok, nie pod ikonu: 38 ikona + 16 medzera. * Odmerané na oboch rámoch (54,5 a 54,3). * * 🔴 **Horný odstup sa viaže na titulok, nie na hlavičku.** Figma má medzi * titulkom a popisom **15** (box-to-box) — potvrdil Lukáš 2026-09-14 priamo * z návrhu a sedí to s rámom: ink-to-ink je tam 20,34 CSS a po odčítaní * pološtítkov oboch riadkov (17,6 × 1,2 a 14,4 × 1,25) z toho vyjde 15,2. * * Lenže hlavička je vysoká **38** (určuje ju ikona), kým riadok titulku má * 21,12 — a `align-items: center` ten rozdiel rozdelí na polovicu nad a pod. * Pod titulkom teda ostáva 8,44 hlavičky navyše a margin panelu musí byť * o toľko menší. Predtým tu bolo rovných 10, čo dalo odstup od titulku 18,45 * (odmerané) namiesto 15. * * Píše sa to ako `calc`, nie ako hotových 6,56, aby bolo v kóde vidieť * **prečo** — tri čísla v ňom sú výška ikony, veľkosť titulku a jeho * rozstup riadkov, všetky odmerané. * * ⚠️ Platí to pre **jednoriadkový titulok**, a iný rám nie je: v oboch * rámoch je otvorená prvá položka a tá je jednoriadková. Keď redaktor * otvorí položku s dvojriadkovým titulkom (na mobile 3 a 7), hlavička * narastie na 42,24, slack zmizne a odstup vyjde 6,56 namiesto 15. Bez * kontajnerových dotazov sa to v CSS rozlíšiť nedá a dizajn taký stav * nedefinuje. * * Spodný margin nie je žiadny — spodná medzera je v rozostupe za rozbalenou * položkou vyššie, aby sa margin nezlial. */ .egrant-accordion .wp-block-accordion-panel { margin-block-start: 15px; } /* 🔴 Zbalený panel **nezmizne z toku.** Jadro ho skrýva atribútom * `hidden="until-found"` (aby text našlo vyhľadávanie v prehliadači), a ten * podľa špecifikácie nedáva `display: none`, ale `content-visibility: hidden`: * obsah sa preskočí, **ale box aj s vlastnými marginmi zostáva**. Bez tohto * pravidla si každá zbalená položka pripočíta tých 10 a rozteč vyjde 60 * namiesto 50 (odmerané). * * Jadro má presne to isté pravidlo (`blocks/accordion-panel`), lenže * `.wp-block-accordion-panel[hidden]` má (0,2,0) — rovnako ako selektor * s dvoma triedami vyššie, takže by o víťazovi rozhodovalo poradie v ``. * Tu je (0,3,0), a teda to nezávisí od poradia. */ .egrant-accordion .wp-block-accordion-panel[hidden] { margin-block-start: 0; } /* Popis: 14,4 / 1,25 / 500 / 0,2 / `muted`. Váhu, rozteč aj prestrkanie dáva * `styles.typography` v `theme.json` celej stránke; napísané sú tu z rovnakého * dôvodu ako pri titulku. * * Marginy odstavca sa **nenulujú**. Flow layout panela ich zhodí sám * (`> :first-child` a `> *`), takže by to bol zápis navyše — a zároveň pasca: * pravidlo s dvoma triedami by prebilo rozostup medzi odstavcami, keby ich * redaktor do panela dal viac. Koľko ten rozostup má byť, rám nehovorí (každý * panel má v podkladoch jeden odstavec), takže tu zostáva `blockGap`. */ .egrant-accordion .wp-block-accordion-panel p { font-size: var(--wp--preset--font-size--button); /* 14,4 */ line-height: 1.25; font-weight: 500; letter-spacing: 0.2px; color: var(--wp--preset--color--muted); } /* ── Mobil ──────────────────────────────────────────────────────────────── */ /* 900, nie 640: na tomto zlome sa láme typografia webu (`theme.json`, * `styles.css` — `small`, `medium` aj `x-large`), takže nadpis sekcie klesne * zo 64 na 36 práve tu a rozostup pod ním sa musí zmeniť s ním. Ten istý * zlom má pás F aj pás H. */ @media (max-width: 900px) { /* Medzera nadpis → akordeón je od 2026-09-28 jednotných 32 aj tu * (Filip), pravidlo s 24 z rámu zaniklo. */ .egrant-accordion .wp-block-accordion-item + .wp-block-accordion-item { margin-block-start: var(--wp--preset--spacing--20); } /* 13, nie 31 ako na desktope — mobilný rám má po rozbalenej položke * naozaj menšiu medzeru (rozteč ikon 97,0 CSS pri dvojriadkovom popise: * 38 + 10 + 2 × 18 + 13). Token na 13 nie je. */ .egrant-accordion .wp-block-accordion-item.is-open + .wp-block-accordion-item { margin-block-start: 13px; } }