/* ══════════════════════════════════════════════════════════════════════════
Zenturi - Hero Simple (Figma 1202:131333 „Bezpečnosť" + 1202:124328
„Partnerská spolupráca", tá istá inštancia „Hero-Level_2")
Hero podstránky: BIELA karta, vľavo voliteľný tagline + nadpis + text + voliteľné
CTA, vpravo obrázok bleedujúci k pravej hrane karty, dole vlnka. Tagline a CTA sa
renderujú len keď sú polia vyplnené (Bezpečnosť ich má prázdne = Figma ich skrýva).
Odôvodnenie, prečo samostatný blok a nie variant `hero-level2`, je v template.php.
Sekcia má rovnaké pozadie ako Figma node: solid bg-medium (#ecf2f4).
Na rozdiel od `hero-demo`/`hero-text` tu NIE JE biely gradient zhora -
over v design contexte, než ho sem niekto skopíruje z príbuzného bloku.
VLNKA = BIELA kópia (`hero-status/wave.svg`, `fill: var(--fill-0, white)`),
NIE navy z `hero-demo` - karta je biela, takže vlnka musí byť tiež.
Kontrola pred kopírovaním assetu: farba vlnky sa riadi farbou KARTY.
MOBIL: Figma frame pre túto stránku NEDODANÝ - hodnoty pri @media nižšie.
══════════════════════════════════════════════════════════════════════════ */
.zn-hsm {
position: relative;
background: var(--color-bg-medium); /* Scheme A/Background Medium #ecf2f4 */
padding-inline: var(--space-16); /* Page Padding/padding-global 64 */
}
.zn-hsm.zn-block { --zn-pt: var(--space-6); --zn-pb: var(--space-6); } /* div-padding-small 24 */
.zn-hsm__container {
position: relative;
max-width: var(--container-max); /* Container/container-large 1280 */
margin-inline: auto;
}
.zn-hsm__card {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: var(--space-12); /* Div Padding/div-padding-large 48 */
background: var(--color-white); /* Scheme A/Foreground #ffffff */
/* pt 48 (section-small) / pr 0 / pb 24 (div-padding-small) / pl 48 (div-padding-large).
pr = 0 je zámer: obrázok bleeduje k pravej hrane karty - rovnaký vzor ako
hero-demo/hero-status/hero-level2. */
padding: var(--space-12) 0 var(--space-6) var(--space-12);
border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Radius/XLarge 40 */
overflow: hidden;
}
.zn-hsm__column {
flex: 1 1 0%;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 40px; /* Figma literál (Column gap), nie token */
padding-block: var(--space-6); /* Column py 24 */
}
/* Tagline + nadpis = vlastná skupina (Figma 629:26761), gap 8. Stĺpec má gap 40, takže
bez tejto skupiny by tagline visel 40 nad nadpisom. */
.zn-hsm__headline {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2); /* Figma 8 */
width: 100%;
}
/* Heading/Tagline: Mix Regular Italic 16/1.5, weight 420 - rovnaké ako .zn-hl2__tagline. */
.zn-hsm__tagline {
margin: 0;
font-family: var(--font-display);
font-style: italic;
font-weight: var(--weight-tagline); /* 420 */
font-size: var(--text-base); /* Size/Regular 16 */
line-height: 1.5;
color: var(--color-text); /* Scheme A/Text #023047 */
}
/* ── Breadcrumb (voliteľný, Figma 1202:120884 „POHODA") ────────────────────
Sedí na mieste taglinu, v tej istej skupine (gap 8 k nadpisu). Markup dodáva
Yoast: … … , nie na .
Figma: skupina 169 × 24, gap 8, Regular 16/1.5, rodič #75878f + podčiarknutý,
aktívna položka #023047 Bold w750, chevron 16 × 16.
Column BEZ padding-block: tento Figma frame má stĺpec 524 × 366 s prvým
dieťaťom na y = 0 (karta 438 = 48 + 366 + 24), kým „Bezpečnosť" 1202:131333
aj „Partnerská spolupráca" 1202:124328 majú prvé dieťa na y = 24, teda py 24.
Preto je nulovanie scopnuté na `--crumb` - jediný hook, ktorým sa tento
variant líši; na obe staršie stránky sa nedostane. */
.zn-hsm--crumb .zn-hsm__column { padding-block: 0; }
.zn-hsm__crumb > span {
display: flex;
align-items: center;
gap: var(--space-2); /* Figma 8 */
font-family: var(--font-display);
font-size: var(--text-base); /* Size/Regular 16 */
line-height: 1.5;
color: var(--color-text-secondary); /* Scheme A/Text Secondary #75878f */
}
.zn-hsm__crumb a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: from-font;
text-underline-position: from-font;
}
.zn-hsm__crumb a:hover,
.zn-hsm__crumb a:focus-visible { color: var(--color-text); }
/* Aktívna (posledná) položka - Text/Regular/Bold, weight 750, Scheme A/Text. */
.zn-hsm__crumb .breadcrumb_last {
font-weight: 750;
color: var(--color-text);
}
.zn-hsm__crumb-sep {
display: inline-flex;
flex-shrink: 0; /* ikona v flex riadku - viď CLAUDE.md */
align-items: center;
}
.zn-hsm__crumb-sep svg { display: block; }
.zn-hsm__heading {
margin: 0;
width: 100%;
font-family: var(--font-display);
font-weight: var(--weight-regular);
font-size: var(--text-7xl); /* Size/H1 56 */
line-height: 1.1;
color: var(--color-text); /* Scheme A/Text #023047 */
}
.zn-hsm__text {
margin: 0;
width: 100%;
font-family: var(--font-display);
font-size: var(--text-lg); /* Size/Medium 18 */
line-height: 1.5;
color: var(--color-text);
}
/* CTA riadok (Figma „Actions" 629:25294, gap 24). Tlačidlo samotné = globálna
`.btn.btn--primary` bez odchýlky: DS inštancia I1202:124328;629:25296 je h 48,
px 16 / py 10, radius 12, bg #ffb703, text 16/650 čierny - presne to, čo `.btn`
a `.btn--primary` v components.css už majú. Žiadna ikona (Figma ju tu nemá). */
.zn-hsm__actions {
display: flex;
align-items: center;
gap: var(--space-6); /* 24 */
}
/* Obrázok: Figma „Image Respo" 660 široký, `self-stretch` (dotiahne sa na výšku
obsahu karty), radius LEN vľavo hore 16.
ASSET JE SPRÁVNY a hero je hotový - umiestnenie obrázka rieši pravidlo nižšie.
Pre ŠTÍTOVÝ `cover.png` sa tu historicky skúšal `cover` (štít odrezaný hore) aj `contain`
(celý, ale o ~13,5 % menší); ani jeden nesadne, lebo Figma ten obrázok škáluje NEUNIFORMNE -
a práve to bol ten „6 % rozdiel pomeru", ktorý sa tu dvakrát vysvetlil nesprávne ako dôvod
pýtať iný export. Export frame 0:14 NETREBA, zdroj je ten istý súbor. Platí to ale LEN pre
ten asset - pre bežný obrázok je správne `cover` (derivácia pri `.zn-hsm__visual-img`).
BIELY FADE: `linear-gradient(180deg, transparent 26%, white 100%)` - ZVISLÝ.
Design context hlásil 128,21° s zarážkami 34,79 % / 90,718 %; to je skreslené, Figma
uhol na neštvorcových paneloch prepočítava zle (precedens hero-status).
METÓDA MERANIA (dôležité - overlay sa NEDÁ merať v prázdnej ploche panelu, biela na
bielej nič nezmení; prejaví sa LEN na obsahu, teda na štíte):
A = výrez panelu z Figma renderu 1202:131333 na (700, 72, 660, 293)
B = rekonštrukcia bez overlaya: biele pozadie + zdroj na (50, −21,8) v 558,4 × 338,8
pre pixely, kde má B luminanciu < 235 (skutočný obsah):
alfa = (lum(A) − lum(B)) / (255 − lum(B))
spriemerovať po riadkoch → profil alfy po výške
Namerané: alfa 0 pri 26 % výšky, alfa 1 pri 101 %. Vodorovná zložka je šum
(0,231 / 0,265 / 0,453 hore, ale 0,638 / 0,684 / 0,573 dole - nesystematické),
preto 180°, nie diagonála.
TVAR KRIVKY: NIE JE lineárny. Figma profil po 10 % pásoch je hore plochý
(0,04 / 0,10 / 0,10) a sklon naberá až od ~30 %. Testované tri varianty proti nemu
(rovnaká metóda, 10 % pásy):
A 0 → 26 % → 100 % MAX 0,105 priemer 0,042 (3 stopy)
B 0 → 25 % @0,10 → 100 % MAX 0,082 priemer 0,036 (3 stopy)
C 0 %@0,03 / 25 %@0,10 / 50 %@0,30 /
75 %@0,65 / 100 %@0,95 MAX 0,067 priemer 0,022 (5 stôp)
Ani jedna sa nedostala pod MAX 0,06, preto podľa dohodnutého stop pravidla ostáva A.
ĎALŠIE ZARÁŽKY UŽ NEPRIDÁVAŤ: nad štyri stopy sa prestáva trafovať dizajn a začína sa
fitovať šum - v svetlých partiách štítu je menovateľ (255 − Lb) malý, takže je tam
odhad alfy najmenej spoľahlivý.
OTVORENÉ (2026-08-06, Partnerská spolupráca): tá istá metóda na fotke partnera je oveľa
lepšie podmienená (stredné tóny po celej výške panelu, štít ich nemá) a vychádza z nej
`32,3 % → 97,4 %` s MAX 0,009 / priemer 0,005, kým nasadené `26 % → 100 %` má tam
MAX 0,080 / priemer 0,027. Gradient je ZDIEĽANÝ s Bezpečnosťou, preto sa NEMENIL -
zmena by prekreslila schválenú stránku. Čaká na rozhodnutie; nemeniť bez neho. */
.zn-hsm__visual {
position: relative;
flex: none;
align-self: stretch;
width: 660px;
border-radius: var(--radius-base) 0 0 0; /* Radius/base 16, len ľavý horný roh */
overflow: hidden;
}
/* ── Voliteľné: výšku karty drží OBRÁZKOVÝ PANEL, nie textový stĺpec ────────
Zapína sa base controlom „Extra CSS trieda" = `zn-hsm--visual-min`, teda
výhradne per inštanciu. Žiadna z nasadených stránok ho nemá nastavený
(overené v DB: `block_css_class` nepoužíva ani jeden post), takže je toto
pravidlo inak úplne inertné.
PREČO: karta je vo Figme (1202:121508) 378 vysoká, stĺpec 524 × 306 a panel
660 × 306 - obe deti sú súrodenci a výšku karty určuje to vyššie. Na archíve
„Praktických pomôcok" je ale `hsm_text` PRÁZDNE (odstavec vo Figme je omylom
text o POHODE), takže stĺpec meria len 158 a stiahne kartu na 230. Panel sa
pri `align-self: stretch` riadi stĺpcom, takže z obrázka vidno iba vrch.
AKO: rozperka v `::before` s percentuálnym `padding-top`. Percento sa počíta
zo ŠÍRKY panelu, takže 306/660 = 46,3636 % drží pomer na každom breakpointe
bez fixnej výšky. `align-self: stretch` panelu ostáva - rozperka je len
MINIMUM: keď od Jána príde reálny text a stĺpec presiahne 306, riadok sa
riadi ním a panel sa dotiahne ako doteraz. Vtedy sa dá trieda zase odobrať.
Stĺpec potrebuje `align-self: stretch`, aby vyšiel na 306 a nadpis ostal
pri jeho hornom paddingu (karta má `align-items: center`, inak by sa
vycentroval a spadol o 74 px nižšie než vo Figme).
Obrázok ani biely prechod rozperka neposúva - oba sú `position: absolute`. */
.zn-hsm--visual-min .zn-hsm__visual::before {
content: '';
display: block;
padding-top: 46.3636%; /* 306 / 660 */
}
.zn-hsm--visual-min .zn-hsm__column { align-self: stretch; }
.zn-hsm__visual::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 1) 100%);
pointer-events: none;
}
/* DEFAULT umiestnenie obrázka = `cover` kotvený HORE. Odvodené z Figmy 1202:124328
(Partnerská spolupráca), kde design context udáva img `left 0 / w 100% /
h 125,36% / top −0,04%`: 351 × 1,2536 = 440,1, teda 660/440,1 = 1,4999 = presne
pomer zdroja (1536/1024 = 1,5). Obrázok teda vyplní šírku panelu, dole pretečie
a panel ho oreže - čo je definícia `cover` na paneli širšom (1,88) než zdroj (1,5),
s `object-position` na hornej hrane.
OVERENÉ meraním, nie len z exportu: rekonštrukcia panelu (biele pozadie + zdroj
660×440 na (0,0)) proti výrezu Figma renderu dala hladký reziduál 0 → 1 zhora nadol
(= biely fade nižšie), bez štruktúrnych artefaktov - placement sedí.
Zvislá zložka `object-position` je na mobile bez efektu (panel 1,43 < pomer zdroja,
`cover` tam škáluje podľa výšky a oreže vodorovne), takže jedno pravidlo stačí. */
.zn-hsm__visual-img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
/* VÝNIMKA: predvolený štítový `cover.png` (stránka „Bezpečnosť", Figma 1202:131333).
Tam Figma obrázok škáluje NEUNIFORMNE, takže naň `cover` nesadne - namerané rovnakou
metódou na zdroji aj na renderi (zdroj skomponovaný na bielu, prah min kanála < 235):
zdroj 1248×713, jadro štítu 590×545 na (324, 69) → pomer 1,083
Figma panel 660×293, jadro 264×259 na (195, 11) → pomer 1,019
⇒ scaleX 0,4475, scaleY 0,4752 (zvisle o 6,2 % viac)
Z toho vychádza obrázok 558,4 × 338,8 na (50, −21,8); panel ho zdola oreže o 24 px,
presne ako vo Figme. Zapísané v %, aby to držalo aj pri užšom paneli.
Preto `object-fit: fill` - tá deformácia je ZÁMER DIZAJNU pre TENTO asset, nie chyba.
PROD triedu dáva template.php len pri fallbacku na `cover.png` - na inom obrázku by
sa tá istá kalibrácia prejavila ako deformácia (precedens: fotka partnera 3:2).
Scopnuté na ≥768: na mobile aj štít používa `cover` z pravidla vyššie (pri pomere
panelu 329/230 = 1,43 sa neoreže, lebo je bližší pomeru zdroja 1,75 než desktopový
slot 2,25).
Predošlé komentáre tu tvrdili, že „žiadny fit nesadne a treba export frame 0:14 od
Jána" - NEPRAVDA. Zdroj je ten istý súbor ako vo Figme a placement sa dá presne
vypočítať; export netreba. Nerobiť tú analýzu znova. */
@media (min-width: 768px) {
.zn-hsm--shield .zn-hsm__visual-img {
inset: auto;
left: 7.576%; /* 50 / 660 */
top: -7.44%; /* −21,8 / 293 */
width: 84.61%; /* 558,4 / 660 */
height: 115.63%; /* 338,8 / 293 */
object-fit: fill;
}
}
/* Voľba „Umiestnenie obrázka" = Zmestiť celý (`hsm_image_fit` = contain).
Panel je vysoký podľa OBSAHU stĺpca, takže jeho pomer sa mení s dĺžkou textu -
pri assete, ktorý má obsah až k okrajom, by `cover` pri vyššom paneli ukrojil
po stranách. `contain` doplní rozdiel prázdnym miestom; keďže karta aj spodok
fade overlaya sú biele, na assete s priehľadným/bielym okolím to nevidno.
`:not(--shield)`: štítový `cover.png` má umiestnenie nakalibrované natvrdo
(pravidlo vyššie) a `contain` by mu prebilo `object-fit`, ale nie geometriu. */
.zn-hsm--fit-contain:not(.zn-hsm--shield) .zn-hsm__visual-img {
object-fit: contain;
}
/* Voľba „Výrez obrázka" = Posunutý nižšie (`hsm_image_anchor` = lower).
Figma na „Školeniach" (1201:110017) obrázok NEKOTVÍ hore ako na „Partnerskej
spolupráci" - má vlastný, ručne posunutý výrez. Namerané rovnakou metódou ako
pri `--shield` (rekonštrukcia panelu 660 × 279 + biely fade, MAE proti výrezu
Figma renderu na (700, 72)):
Figma vlastný crop (w 96,59 %, top −13,99 %) MAE 3,36 ← nedosiahnuteľné cez object-fit
cover + object-position center 27 % MAE 8,13 ← toto pravidlo
cover + object-position center top (default) MAE 21,22
contain MAE 26,09
Figma teda obrázok zmenšuje na 96,59 % šírky panelu, čo `cover` z definície
nevie (ten vždy vyplní aspoň jeden rozmer) - preto sa dorovnáva len zvislý
posun. Bez neho sa notebooky (zdroj y ≈ 640-920) odrežú úplne, hoci ich Figma
ukazuje: `center top` zobrazí zo zdroja len riadky 0-649.
POZOR, toto NIE JE `--shield` kalibrácia - žiadne `object-fit: fill`, žiadna
neuniformná mierka, obrázok sa nedeformuje. Preto je to bezpečné aj pre iný
asset, ktorý si klient nahrá cez Multimédiá.
`:not(--shield)`: štítový cover.png má geometriu nakalibrovanú natvrdo a
`object-position` by na `object-fit: fill` aj tak nemalo efekt. */
.zn-hsm--anchor-lower:not(.zn-hsm--shield) .zn-hsm__visual-img {
object-position: center 27%;
}
/* Voľba „Výrez obrázka" = Na stred (`hsm_image_anchor` = center).
Figma na „Podporovaných bankách" (1201:110808) obrázok nekotví ani hore, ani
nikam ručne - je to čistý VYCENTROVANÝ `cover`. Namerané rovnakou metódou ako
pri variante `lower` (rekonštrukcia panelu 660 × 306 + biely fade `180deg,
transparent 26 % → white`, MAE proti výrezu Figma renderu na (700, 72)):
posun 0 px (= center top, default) MAE 5,25
posun 2 px MAE 3,85
posun 4-5 px (= center center) MAE 2,05 ← toto pravidlo
posun 7 px MAE 3,85
posun 9 px (= center bottom) MAE 5,24
Zdroj 1320 × 630 (pomer 2,0952) je v paneli s pomerom 2,1569, takže zvislý
presah je len 9 px a optimum vyšlo presne na jeho polovicu (4,5 px). Krivka je
symetrická okolo 4,5 - to je nezávislé potvrdenie, že ide o centrovanie, nie
o náhodné minimum.
`:not(--shield)` z rovnakého dôvodu ako pri `lower`: na `object-fit: fill`
nemá `object-position` efekt a štít má geometriu nakalibrovanú natvrdo. */
.zn-hsm--anchor-center:not(.zn-hsm--shield) .zn-hsm__visual-img {
object-position: center center;
}
/* Voľba „Biely prechod na spodku obrázka" = vypnuté (`hsm_image_fade` = false).
Pre asset, ktorý má prechod ZAPEČENÝ v rastri - bez tohto by sa vykreslil dvakrát
(CLAUDE.md, precedens hero-demo v1.20.6 a bento-1).
Prípad: „Faktúra Vzor" 1202:122469. Overené oboma smermi, nie z exportu:
a) Figma na tom node overlay NEMÁ. Rekonštrukcia panelu (biele pozadie + zdroj
`contain` 643 × 372 na x 8,27) proti výrezu Figma renderu na (700, 72, 660, 372):
profil alfy po 10 % pásoch je 0,000 ± 0,011 po celej výške (posledný pás +0,117
má 8 pixelov = šum), vodorovné pásy −0,002 / −0,002 / −0,000. Raw MAE 1,32.
b) Asset prechod MÁ. Rovnaké orámovanie riadkov tabuľky faktúry sa smerom nadol
systematicky zosvetľuje: min luminancia 144 (70 %) → 190 (80 %) → 235 (90 %)
→ 254-255 (94 % a nižšie), teda čistá biela pri spodnej hrane.
Kontrola dopadu, keby sa fade nechal zapnutý (MAE luminancie len na obsahových
pixeloch, bez / s overlayom): 40-50 % 3,6 / 13,5 · 60-70 % 2,7 / 34,0 ·
80-90 % 2,6 / 18,1. Tabuľka faktúry by sa vymyla o polovicu panelu skôr.
SPRÁVNE RIEŠENIE je nový export bez gradient vrstvy (fade patrí do CSS, aby ho
dostal aj obrázok nahraný klientom cez Multimédiá) - vypýtané od Jána. Kým nepríde,
drží to tento prepínač; po výmene assetu ho stačí prepnúť späť na zapnuté. */
.zn-hsm--nofade .zn-hsm__visual::after { content: none; }
/* Voľba „Odsadenie textu" = Väčšie (`hsm_column_pad` = large).
Figma má py stĺpca per-inštanciu RÔZNE a je to vedomé, nie chyba exportu:
„Bezpečnosť" 1202:131333 + „Partnerská spolupráca" 1202:124328 py 24 (div-padding-small)
„POHODA" (breadcrumb variant) py 0
„Školenia" 1201:110017 py 48 (section-small)
Overené MERANÍM v renderi, nie len z design contextu: v Figma renderi Školení
začína ink nadpisu na y = 119 (box 120), čo sedí na py 48 (karta pt 48 + column
py 48 = 96 od vrchu karty na y = 24). Pri py 24 by box začínal na y = 96.
Dôsledok py 48: karta je 351 vysoká (nie 303) a obrázkový panel má pomer
660/279, nie 660/231 - preto to nie je kozmetika, mení to výrez fotky.
Scopnuté na ≥768: mobilný frame 1201:110048 má stĺpec BEZ padding-block,
rovnako ako doteraz nasadené stránky, takže mobil ostáva spoločný.
OMRVINKY + väčšie odsadenie SA KOMBINUJÚ (od „Faktúry Vzor" 1202:122469: stĺpec
524 × 372, prvé dieťa na y = 48, posledné končí na 324 - teda py 48 AJ s omrvinkami).
Preto tu už NIE JE `:not(.zn-hsm--crumb)`: nulovanie z `--crumb` je len DEFAULT
breadcrumb variantu (POHODA 1202:120884 má py 0) a toto pravidlo ho prebíja
poradím v súbore pri rovnakej špecificite. Kto sem doplní `:not()`, rozbije
Faktúru Vzor - hodnota je vo Figme, nie odhad. */
@media (min-width: 768px) {
.zn-hsm--pad-lg .zn-hsm__column {
padding-block: var(--space-12); /* Section Padding/section-small 48 */
}
}
/* Vlnka - prekryv 3.415 % je vlastnosť assetu, nie kontajnera (výpočet a dôvod
v CLAUDE.md, sekcia Figma-first). Figma tu má opäť 39 j namiesto 43,558. */
.zn-hsm__wave {
position: relative;
z-index: 1;
display: flex;
width: 100%;
margin-top: -1px;
}
.zn-hsm__wave-piece {
display: block;
flex: 1 1 0%;
min-width: 0;
width: 100%;
height: auto;
aspect-ratio: 480 / 34;
}
.zn-hsm__wave-piece:first-child { margin-right: -3.415%; }
/* ══ Tablet (≤1199.98px) - Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
.zn-hsm { padding-inline: var(--space-8); }
.zn-hsm__visual { width: 45%; }
}
/* ══ Mobil (≤767.98px) - Figma frame NEDODANÝ ═════════════════════════════
Hodnoty z mobilných frame-ov príbuzných hero blokov (hero-demo 1202:138623,
hero-status): page-padding 16, Radius/Large 24, Size/H1 40, Size/Medium 16,
karta stackuje na stĺpec. Prekryv vlnky sa NEPREPISUJE - je to hodnota
assetu. Section padding cez `-m` premenné, nie holé `--zn-pt`. ══ */
@media (max-width: 767.98px) {
.zn-hsm { padding-inline: var(--space-4); } /* Page Padding 16 */
.zn-hsm.zn-block { --zn-pt-m: 16px; --zn-pb-m: 16px; } /* div-padding-small (mobil) 16 */
.zn-hsm__card {
flex-direction: column;
align-items: stretch;
gap: var(--space-6); /* div-padding-large (mobil) 24 */
padding: var(--space-4); /* 16 zo VŠETKÝCH strán -
na mobile obrázok nebleeduje */
border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* Radius/Large 24 (desktop 40) */
}
.zn-hsm__column { gap: var(--space-6); padding-block: 0; } /* Column gap 24, bez py */
.zn-hsm__heading { font-size: 2.5rem; } /* Size/H1 (mobil) 40 */
.zn-hsm__text { font-size: var(--text-base); } /* Size/Medium (mobil) 16 */
.zn-hsm__visual {
width: 100%;
aspect-ratio: 329 / 230; /* Figma „Image Respo" mobil */
border-radius: var(--radius-base) 0 0 0; /* rounded-tl 16, ako desktop */
}
/* Obrázok tu NEMÁ vlastné pravidlo: základné `cover` (kotvené hore) platí aj na mobile
a štítová kalibrácia je scopnutá na ≥768, takže sem nepresakuje. */
/* Prekryv vlnky je na mobile INÝ než na desktope - a je to zámer dizajnu, nie chyba:
Figma dáva kúsky 206 pri kontajneri 361, teda prekryv 51 = 14,13 %, čo je
6,605 % (minimum assetu) + presne JEDNA PERIÓDA vlny (18,679 %). Mobil teda chce
o jednu vlnu menej. Geometricky presná hodnota pre k = 1:
overlap/w = 0,06605 + 0,18679 = 0,25284
margin-right = 0,25284 / (2 − 0,25284) = 14,472 %
Figma 14,13 % je od nej ~1 px vedľa, preto berieme presnú. NEPOUŽIŤ -3.415 %
(to je k = 0) - na mobile by to dalo o vlnu viac, než dizajn chce. */
.zn-hsm__wave-piece:first-child { margin-right: -14.472%; }
}