/*
* Grupa `egrant-measure` — úzky textový stĺpec (leady, dlhšia próza).
*
* Šírku nesú **deti**, nie grupa. Grupa zostáva normálnym dieťaťom
* constrained layoutu, takže ju jadro samo posadí do obsahového stĺpca; vnútri
* nej je flow layout, ktorý nič necentruje, a `max-width` na deťoch ich
* zarovná vľavo. Bez `!important` a bez marginov.
*
* Predtým mala tú šírku grupa sama a k tomu `margin-left: 0 !important`, aby
* ju layout jadra necentroval. Fungovalo to na frontende a rozpadlo sa
* v editore: ten pridáva vlastné pravidlo s vyššou špecificitou, takže
* `!important` remízu nerozhodol, a keď sa špecificita dohnala, zarovnávalo sa
* na okraj kontejnera (v editore širší než stĺpec) namiesto stĺpca.
* Podrobne v `docs/03-architektura.md`.
*/
.wp-block-group.egrant-measure > * {
max-width: var(--wp--custom--measure, 552px);
}
/*
* Callouty manuálu a box „Pozrite si" — šesť variantov `core/group`.
*
* Registráciu drží `functions/BlockStyles.php`, prevod zo starého widgetu
* `App\Services\ElementorConverter::fromNotificationBox()`. Sem patrí vzhľad.
*
* ⚠️ **Opravené 2026-09-22.** Dovtedy tu stálo, že farby sú náš odhad
* (tokeny z palety s priehľadnosťou) — a ikona bola **prázdny krúžok bez
* kresby**, lebo pravidlo síce nastavovalo `background: center / 14px`, ale
* `background-image` nikdy nepribudlo. Farby aj veľkosti písma zadal Lukáš
* z Figmy, geometria je odmeraná z rámu `1280 manual-detail`
* (snímka `09-21 12-22-46`, mierka 1,5758) a na oboch farebných calloutoch
* vychádza rovnako:
*
* | | rám | tu |
* |---|---:|---|
* | výplň boxu | 20 | `spacing--50` |
* | ikona | 32 (kresba v nej 26,7) | 32 |
* | medzera ikona → text | 20 | `spacing--50` |
* | text od ľavej hrany boxu | 72 | 20 + 32 + 20 |
* | nadpis | 14,4 | preset `button` |
* | text calloutu | 11,2 | preset `nano` |
*
* 🔴 **Ikona stojí v ľavom stĺpci vedľa nadpisu, nie nad ním.** Do 2026-09-22
* ju CSS skladalo nad nadpis, hoci komentár vedľa tvrdil opak. Odsadený je aj
* text pod nadpisom (tiež na 72), takže je to **dvojstĺpcová mriežka**, nie
* odsek s obrázkom hore. Nad nadpis patrí ikona až v mobile
* (rám `375 manual-detail`).
*
* 🔴 **Ikona je v CSS, nie v obsahu.** Je to znak variantu, nie text — keby
* bola blokom, redaktor by ju vedel zmazať a prekladatelia by ju dostali
* v siedmich jazykoch na preklad.
*
* ⬜ **Tri z piatich calloutov kresbu ešte nemajú.** Z Figmy prišli len
* `info` a `error` (`assets/icons/ic_callout_*.svg`, Material Symbols).
* Čierny „Pre manažérov participácie" má v ráme **slnko** a `tip` ani `paid`
* v ráme nie sú vôbec — tie dva sú naše delenie podľa ikony v starom zdroji.
* Dovtedy im zostáva **prázdny stĺpec**, nie náhradná kresba: prázdne miesto
* je viditeľná chýbajúca vec, zlá ikona nie.
*
* ℹ️ **Text 11,2 platí len na päť calloutov, nie na „Pozrite si".** Odkazy
* v sivom boxe merajú v ráme rozostup 26, teda veľkosť tela stránky —
* zmenšuje sa im len nadpis, rovnako ako calloutom.
*/
/*
* 🔴 **Ľavá výplň ide cez premennú, nie prepísaním skratky.** Selektor tohto
* pravidla má kvôli `[class*=]` špecificitu (0,3,0) a jeho `padding` by
* `padding-inline-start` z pravidla nižšie prebil — presne to sa 2026-09-22
* stalo a ikona sadla na nadpis.
*/
.wp-block-group[class*="is-style-"]:is(
.is-style-info, .is-style-warning, .is-style-notice, .is-style-tip, .is-style-paid, .is-style-related
) {
padding: var(--wp--preset--spacing--50);
padding-inline-start: var(--egrant-callout-inset, var(--wp--preset--spacing--50));
border-radius: var(--wp--custom--radius--lg);
}
/*
* Päť calloutov má ikonu vľavo; „Pozrite si" ju nemá.
*
* 🔴 **Ikona je mimo toku, nie v mriežke.** Ako položka mriežky by riadok
* s nadpisom roztiahla na svojich 32 a text pod ním by začal až za ňou —
* rám má pritom prvý riadok textu **vyššie, než ikona končí**. Miesto pre ňu
* teda robí ľavá výplň 72 (20 + 32 + 20) a ikona v nej visí absolútne.
*/
.wp-block-group:is(.is-style-info, .is-style-warning, .is-style-notice, .is-style-tip, .is-style-paid) {
position: relative;
font-size: var(--wp--preset--font-size--nano);
}
/*
* ⬜ **Miesto na ikonu dostane len callout, ktorý ju má.** `tip` a `paid`
* v ráme nie sú vôbec — je to naše delenie podľa ikony v starom zdroji —
* a prázdna diera vľavo by vyzerala ako chyba sadzby, nie ako chýbajúci
* podklad. Keď sa o tých dvoch rozhodne, pridajú sa sem.
*
* ⚠️ **Čierny callout má ikonu väčšiu: 40, nie 32.** Nie je to preklep —
* odmerané 2026-09-22 z rámu `1280 manual-detail` (snímka `09-21 12-21-28`):
* slnko meria 40,6 a text začína na 80,2, kým `(i)` a `(!)` merajú 26,7
* v poli 32 a text začína na 71,7. Výplň 20 a medzera 20 sú pritom rovnaké
* vo všetkých troch.
*/
.wp-block-group:is(.is-style-info, .is-style-warning) {
/* 20 výplň + 32 ikona + 20 medzera — všetky tri odmerané z rámu. */
--egrant-callout-inset: 72px;
}
.wp-block-group.is-style-notice {
/* 20 + 40 + 20, odmerané 80,2. */
--egrant-callout-inset: 80px;
}
/*
* 🔴 **Zvislé odstupy sa musia prepísať, nie zdediť.** `blockGap` dáva
* nasledujúcemu bloku 32 zhora a k tomu by sa pripočítal spodok nadpisu —
* odmerané v prehliadači 2026-09-22 to bolo 44. Rám má medzi spodkom písmen
* nadpisu a vrchom nasledujúcich 18,4, čo pri riadkovaní 17,28 a 14 vychádza
* na odstup 12, teda `spacing--30`.
*
* `margin-inline` ruší `is-layout-constrained`, ktoré deťom dáva `auto`.
*/
.wp-block-group:is(.is-style-info, .is-style-warning, .is-style-notice, .is-style-tip, .is-style-paid) > * {
margin-block: 0;
margin-inline: 0;
max-width: none;
}
.wp-block-group:is(.is-style-info, .is-style-warning, .is-style-notice, .is-style-tip, .is-style-paid) > * + * {
margin-block-start: var(--wp--preset--spacing--30);
}
/*
* Kresba je maska, nie ``: export má výplň natvrdo, kým takto berie
* `currentcolor` — a v čiernom calloute bude musieť byť biela.
*/
.wp-block-group:is(.is-style-info, .is-style-warning, .is-style-notice)::before {
content: "";
position: absolute;
inset-block-start: var(--wp--preset--spacing--50);
inset-inline-start: var(--wp--preset--spacing--50);
width: 32px;
height: 32px;
background-color: currentcolor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.wp-block-group.is-style-info::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
.wp-block-group.is-style-notice::before {
width: 41px;
height: 41px;
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
.wp-block-group.is-style-warning::before {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
/* Nadpis je drobný a tučný — nie je to nadpis sekcie návodu. Platí na všetkých
šesť vrátane „Pozrite si": v ráme majú obidva verzálku 10,8. */
.wp-block-group:is(.is-style-info, .is-style-warning, .is-style-notice, .is-style-tip, .is-style-paid, .is-style-related)
> .wp-block-heading {
font-size: var(--wp--preset--font-size--button);
font-weight: 600;
}
/*
* Dva callouty za sebou majú medzi sebou 12, nie 32 (Lukáš, 2026-09-22).
* `blockGap` tela návodu je 32 a to je odstup **medzi vecami**; dva boxy pod
* sebou sú jedna vec a rytmus si držia vnútri.
*
* ⚠️ Box „Pozrite si" v tom nie je — má vlastný odstup 24 nižšie, aj keď
* stojí hneď za calloutom.
*/
.wp-block-group[class*="is-style-"]:is(.is-style-info, .is-style-warning, .is-style-notice, .is-style-tip, .is-style-paid)
+ .wp-block-group[class*="is-style-"]:is(.is-style-info, .is-style-warning, .is-style-notice, .is-style-tip, .is-style-paid) {
margin-block-start: var(--wp--preset--spacing--30);
}
/*
* Sivý box „Pozrite si" — 24 zhora, nadpis 14,4/600 s 24 pod ním, text
* 14,4/500. Všetko zadal Lukáš z Figmy 2026-09-22.
*
* ⚠️ **Opravené:** dovtedy tu stálo, že si text drží 17,6 tela stránky — bol
* to môj nesprávny záver z rozostupu riadkov v ráme (26), ktorý som odčítal
* ako riadkovanie veľkého písma namiesto väčšej medzery medzi odkazmi.
*
* Odstupy nesie sivý box sám, nie mriežka: na rozdiel od piatich calloutov
* mriežkou nie je, takže sa jeho marginy normálne zlučujú.
*/
.wp-block-group.is-style-related {
margin-block-start: var(--wp--preset--spacing--60);
font-size: var(--wp--preset--font-size--button);
}
.wp-block-group.is-style-related > .wp-block-heading {
margin-block: 0 var(--wp--preset--spacing--60);
}
.wp-block-group.is-style-related > :last-child {
margin-block-end: 0;
}
/*
* Mobil: ikona nad nadpisom (rám `375 manual-detail`).
*
* ⚠️ **Hranica 640 odmeraná nie je** — rám kreslí 375 a 1280, medzi nimi
* návrh nie je. 640 je tá istá hranica, akú na prepnutie používa mriežka
* kariet, a pod ňou je telo návodu na celú šírku.
*/
@media (max-width: 640px) {
.wp-block-group:is(.is-style-info, .is-style-warning, .is-style-notice) {
--egrant-callout-inset: var(--wp--preset--spacing--50);
}
.wp-block-group:is(.is-style-info, .is-style-warning, .is-style-notice)::before {
position: static;
display: block;
margin-block-end: var(--wp--preset--spacing--30);
}
}
/* Farby zadal Lukáš z Figmy 2026-09-22 — nie sú to tokeny palety. */
.wp-block-group.is-style-info {
background: #D7DDF4;
}
.wp-block-group.is-style-warning {
background: #FADFD5;
}
/* ⬜ Tip a „platená funkcia" v ráme nie sú — odtieň je zatiaľ náš. */
.wp-block-group.is-style-tip {
background: color-mix(in srgb, var(--wp--preset--color--green-light) 20%, var(--wp--preset--color--surface));
}
.wp-block-group.is-style-paid {
background: color-mix(in srgb, var(--wp--preset--color--purple) 12%, var(--wp--preset--color--surface));
}
/* „Pre manažérov participácie" je v oboch rámoch čierny box s bielym textom. */
.wp-block-group.is-style-notice {
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--base);
}
/* „Pozrite si" nemá ikonu ani farbu — je to sivý box so zoznamom odkazov. */
.wp-block-group.is-style-related {
background: var(--wp--preset--color--surface-2);
}
.wp-block-group.is-style-related .wp-block-list {
margin: 0;
padding: 0;
list-style: none;
}
.wp-block-group.is-style-related .wp-block-list li + li {
margin-block-start: var(--wp--preset--spacing--20);
}