/* * Pás H — „Dôvod dôverovať". Vzor zo core blokov, nie vlastný blok. * * Celá sekcia je `core/group` → `core/heading` + riadok `core/group` * (lead + badge karta) + `core/image`. `docs/04-bloky.md` ju opisuje ako * vlastný blok s poľom „Zobraziť badge áno/nie"; postavená je vzorom, lebo * jadro pokrýva všetko — biela karta je grupa s flex layoutom a badge sa * neskrýva prepínačom, ale tým, že ju redaktor zmaže. * * 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. * * ── Prečo majú selektory dve triedy ──────────────────────────────────────── * * Globálne štýly stoja v `` **za** štýlmi blokov, takže pri rovnakej * špecificite vyhrajú ony. `.egrant-trust__badge` má (0,1,0) — presne toľko, * čo `:root :where(.wp-block-group)` z `theme.json`. Preto sa všade píše * `.wp-block-group.egrant-trust__badge`, teda (0,2,0). * Podrobne v `docs/03-architektura.md`. * * ── Rola odstavca v badge je daná polohou ────────────────────────────────── * * Rovnaký prístup ako pás F (`pattern-integrations.css`): názov a popis sa * líšia **len váhou** (600 vs 500) pri rovnakých 12,8, takže by ich inak * musel rozlíšiť blokový štýl, ktorý si redaktor musí pamätať. Poloha to vie * sama: * * - názov = **prvý** odstavec v `.egrant-trust__badge-text` * - popis = **ďalšie** odstavce v tej istej grupe * * `:first-of-type`, nie `:first-child` — rola patrí prvému *odstavcu*, aj * keby pred ním niekto vložil obrázok. * * Blokové štýly sa preň **neregistrujú**. Pri Integráciách sa registrovali * a stálo to osem položiek v paneli *Štýly* pri každom odstavci na webe * (`functions/BlockStyles.php`). Badge má dva odstavce na jednom mieste * webu; ďalšie dve položky do panela za to nestoja. * * ── Odkiaľ sú hodnoty ────────────────────────────────────────────────────── * * Desktop: snímka `2026-09-01 13-25-55` (rám `1280 Uvod (dizajn 1024)`), * meraná pomerovo cez modré vodiace čiary obsahového stĺpca * (x 217,5…1778 = 1024 CSS px → 1,524 px/CSS; rám vychádza 1280 ✓). * * badge karta 398 × 101 → 400 široká, výška z obsahu * badge vpravo odchýlka 2 px od pravej hrany obsahu * badge spodok na poslednej linke leadu → `align-items: flex-end` * ISO logo 64 * lead rozstup riadkov 26,9 = 22,4 × 1,2 → `is-style-measure` * veľká fotka 1024, teda po hrany obsahu — **nie `alignwide`** * badge → fotka ≈ 34 → `blockGap` 32 * * Mobil: snímka `2026-09-04 10-31-59` (rám `375 Uvod`), mierka z hrán rámu * (x 20…1781 = 375 CSS → 4,70 px/CSS). * * bočné odsadenie 20 → obsah 335 * badge cez celú šírku obsahu, výška ≈ 118, padding 15 * ISO logo 64 — rovnaké ako na desktope * fotka 335, po hrany obsahu * * 🔴 **Pomer veľkej fotky nie je odmeraný zo snímky, je z assetu.** Export * z Figmy má 2048 × 829 = 2,4704, čo sedí s prototypovým `1200/485.71` * (2,4706) na štvrté desatinné miesto. Zo snímky sa pomer odmerať nedal — * spodná hrana fotky je na inom ráme než horná. * * ⚠️ Badge **nemá tieň.** Jediný „lift" na webe (`--wp--custom--shadow--lift`) * majú štyri vymenované prvky a badge medzi ne nepatrí * (`docs/11-design-tokeny.md`). * * ── Čo prototyp o mobile nehovorí ────────────────────────────────────────── * * Nič. `.trust*` sa nevyskytuje ani v jednej z 24 `@media` v `styles.css` * prototypu — overené. Mobilné hodnoty sú preto výhradne z rámu `375 Uvod`. */ /* ── Sekcia ─────────────────────────────────────────────────────────────── */ /* Rytmus okolo pásu drží oddeľovač (`theme.json`, `egrant/divider`), medzery * vnútri sekcie predvolený `blockGap` 32 — obe odmerané hodnoty (nadpis → * lead a badge → fotka) sú práve 32, takže tu netreba nič prepisovať. */ /* ── Riadok lead + badge ────────────────────────────────────────────────── */ /* Riadkový gap 16 platí až po zalomení (na mobile lead → karta; odmerané na * ráme `375 Uvod` inkovou metódou: 19,2 CSS od posledného inku leadu po hranu * karty, čo je pri leade 16,6/1,2 práve 16 box-to-box). * * Stĺpcový gap 40 je len **spodná hranica** — na desktope sa nikdy neuplatní, * lebo `space-between` rozdelí zvyšok: 1024 − 552 − 400 = 72, a presne 72,1 * je aj v ráme. */ .wp-block-group.egrant-trust__intro { align-items: flex-end; gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--80); } /* Lead si šírku 552 nesie sám (`is-style-measure` → * `assets/blocks/core-paragraph.css`), tu sa mu len povie, že sa smie * zmenšovať a kde prestane. Bez `min-width` by v úzkom stĺpci klesol pod * čitateľnú mieru skôr, než sa riadok zalomí. */ .wp-block-group.egrant-trust__intro > .is-style-measure { flex: 0 1 var(--wp--custom--measure); min-width: 280px; } /* ── Badge karta ────────────────────────────────────────────────────────── */ .wp-block-group.egrant-trust__badge { flex: 0 1 400px; gap: var(--wp--preset--spacing--50); align-items: flex-start; padding: 15px; border-radius: var(--wp--custom--radius--md); background-color: var(--wp--preset--color--surface); } /* ISO pečať. Šírka aj výška naraz, aby si figure nedržala pomer z prílohy — * je to štvorec 1828 × 1828 zmenšený na 128 (2× pre 64 CSS px). */ .wp-block-group.egrant-trust__badge > .wp-block-image { flex: 0 0 auto; width: 64px; margin: 0; } .wp-block-group.egrant-trust__badge > .wp-block-image img { display: block; width: 64px; height: 64px; } /* Názov a popis: 12,8 obom, líši sa váha. Rola je daná polohou — viď hlavička. */ .wp-block-group.egrant-trust__badge-text > p { margin-block: 0; font-size: var(--wp--preset--font-size--micro); line-height: 1.25; letter-spacing: 0.2px; font-weight: 500; color: var(--wp--preset--color--muted); } /* Názov je `ink`, popis `muted` — odmerané na oboch rámoch: v karte sú práve * dva odtiene, `(20,20,20)` = #141414 a `(107,107,107)` = #6B6B6B, a ten druhý * má na desktope aj na mobile drvivú väčšinu pixelov. Potvrdil Lukáš. */ .wp-block-group.egrant-trust__badge-text > p:first-of-type { font-weight: 600; color: var(--wp--preset--color--ink); } /* 🔴 Medzeru medzi názvom a popisom si musí tento súbor napísať sám, a to * z dvoch dôvodov naraz: * * 1. `gap` tu nefunguje. Grupa má **flow** layout a ten rozostupy robí * marginmi, nie `gap`-om — ten platí len vo flex a grid. Prvý pokus mal * `gap: 8px` na grupe a odmeraný rozostup bol **0**. * 2. Flow layout by ich urobil sám (`> * + *` s `--wp--style--block-gap`), * lenže pravidlo nad ním má `margin-block: 0` a dve triedy, takže by ho * prebilo. Nulovať margin je pritom nutné — `p` má vlastný od prehliadača. * * Preto explicitne, a nie `blockGap` v markupe: ten by skončil na tej istej * remíze. Rovnaká pasca ako pri fotke nižšie. */ .wp-block-group.egrant-trust__badge-text > p + p { margin-block-start: var(--wp--preset--spacing--20); } /* ── Veľká fotka ────────────────────────────────────────────────────────── */ /* Horný margin je rytmus sekcie (32 = `blockGap`) a musí byť napísaný tu. * `margin: 0` ho zabilo: flow layout ho dáva ako `margin-block-start` cez * `> * + *` so špecificitou (0,1,0), kým selektor s dvoma triedami má (0,2,0) * a vyhrá — odmerané, medzera intro → fotka bola **0** namiesto 32. Nulovať * treba len spodok, ktorý si `figure` nesie od prehliadača. */ .wp-block-image.egrant-trust__photo { margin-block: var(--wp--preset--spacing--70) 0; } .wp-block-image.egrant-trust__photo img { display: block; width: 100%; aspect-ratio: 2048 / 829; object-fit: cover; border-radius: var(--wp--custom--radius--lg); } /* ── Mobil ──────────────────────────────────────────────────────────────── */ /* 900, nie 640: na tomto zlome klesá aj samotný lead na 16,6 * (`assets/blocks/core-paragraph.css`), takže riadok sa preskladá naraz * s písmom, nie na dvakrát. * * ⚠️ Medzi 900 a ~992 sa badge už zalomí pod lead (552 + 40 + 400 = 992 sa * do stĺpca nezmestí), ale ešte drží 400 a stojí vľavo. Je to úzke pásmo * a prototyp sa tam správa rovnako — nemá pre `.trust` ani jedno `@media`. * Zo snímok sa to overiť nedá, rámy sú len 1280 a 375. */ @media (max-width: 900px) { .wp-block-group.egrant-trust__badge { flex-basis: 100%; } /* Pod kartou je na mobile **64**, nie 32 ako na desktope — odmerané na * ráme `375 Uvod`: spodok karty 1233, horná hrana fotky 1536, teda 64,3 * CSS pri mierke 4,696 px/CSS. Nie je to chyba merania na zaoblenom rohu, * ako sa najprv zdalo: karta má rovný spodok cez celú šírku. */ .wp-block-image.egrant-trust__photo { margin-block-start: var(--wp--preset--spacing--110); } }