/* ══════════════════════════════════════════════════════════════════════════
Zenturi - Archív praktických pomôcok
Figma „Section / Bento 3" 768:27165 (desktop 1280), taby 768:27172,
karta 768:27193.
Hero rieši blok `zenturi/hero-simple` (jeho vlastné CSS sa pripája v
inc/tools-archive.php) - tu je len tab bar a grid kariet.
MOBIL: Figma frame NEDODANÝ - hodnoty pri @media nižšie sú konvencia témy,
nie odčítané z dizajnu.
══════════════════════════════════════════════════════════════════════════ */
/* Sekcia: Figma 768:27165 je 1440 × 4336,6, kontajner na (80, 48) vysoký
4208,6 → pt 48, pb 80. Pozadie #ecf2f4 (odmerané z renderu: 236,242,244),
teda tá istá plocha, na ktorú sa napája vlnka hero-simple - preto medzi
hero a týmto blokom nevzniká švík. */
.zn-tools {
background: var(--color-bg-medium); /* Scheme A/Background Medium #ecf2f4 */
padding-inline: var(--space-16); /* Page Padding/padding-global 64 */
padding-block: var(--space-12) var(--space-20); /* pt 48 / pb 80 */
}
.zn-tools__inner {
max-width: var(--container-max); /* Container/container-large 1280 */
margin-inline: auto;
}
/* ── Tab bar ────────────────────────────────────────────────────────────────
Figma „Tabs" 768:27172 = 355 × 52, vycentrované (x 462,5 pri kontajneri 1280
→ stred 640). Obal: biely, radius 16, padding 4, stroke rgba(3,3,3,.15).
Tab: px 24 / py 10, radius 12, 16/1.5 #023047; aktívny = biely + stroke +
SemiBold + tieň.
Recept je zhodný s `.zn-bt__tabs` / `.zn-bt__tab` v `bento-tabs` a je odtiaľ
vedome PREVZATÝ, nie zdieľaný: blokové CSS pripája `lzb/register_block_type_data`
len keď je blok na stránke, takže archív (ktorý blok neobsahuje) by ho nedostal.
Dve veci sú tu ale INAK než v `bento-tabs` - obe úmyselne:
1. STROKE cez `inset` tieň na OBOCH šírkach, nielen na mobile.
Figma stroke je INSIDE, CSS `border` box ROZŠIRUJE (CLAUDE.md, precedens
v1.21.7). `bento-tabs` má tú opravu scopnutú do mobilnej query, takže na
desktope tam `border` ostáva. Naivný port by tu pridal 2 px na obal a 2 px
na každý z troch tabov → pill 363 namiesto 355. `border-width: 0` +
`box-shadow: inset` kreslí to isté, ale do šírky sa nepočíta.
(Pozn.: `bento-tabs` sa kvôli tomu NEUPRAVOVAL - je nasadený.)
2. TIEŇ AKTÍVNEHO TABU = `var(--shadow-md)`, nie `filter: drop-shadow(...)`.
Design context hlási `drop-shadow(0 12px 8px …/.15, 0 4px 3px …/.05)`, ale
to je Tailwindov prepis, ktorý NEVIE spread. Figma efekt `medium-s` je
`0 4px 6px −2px #135B6C0D, 0 12px 16px −4px #135B6C26` - a to je presne
`--shadow-md` z theme.json (overené hodnota po hodnote). `bento-tabs` má
tú aproximáciu; tu ide správny token. */
.zn-tools__tabbar {
display: flex;
justify-content: center;
}
.zn-tools__tabs {
display: inline-flex;
align-items: flex-start;
padding: 4px;
background: var(--color-white); /* Scheme A/Foreground #ffffff */
border-radius: var(--radius-base); /* Radius/Base 16 */
border-width: 0; /* viď bod 1 vyššie */
box-shadow: inset 0 0 0 1px var(--color-border);
}
.zn-tools__tab {
display: grid; /* label + rezerva sa prekrývajú */
place-items: center;
padding: 10px 24px;
border-width: 0; /* viď bod 1 vyššie */
border-radius: var(--radius-button); /* Radius/Buttons 12 */
background: transparent;
font-family: var(--font-display); /* Font Family/Heading */
font-size: var(--text-base); /* Size/Regular 16 */
font-weight: var(--weight-regular); /* 400 */
line-height: 1.5;
color: var(--color-text); /* Scheme A/Text #023047 */
text-decoration: none;
white-space: nowrap;
transition: background var(--transition-base), box-shadow var(--transition-base), font-weight var(--transition-base);
}
.zn-tools__tab-label { grid-area: 1 / 1; }
/* Anti-jump rezerva: neviditeľná kópia labelu v SemiBold drží šírku, aby tab bar
pri prepnutí nepskočil. NIE JE vo Figme - je to naša UX vrstva, a preto sa pri
audite šírky odratáva a NERUŠÍ sa kvôli px-zhode (CLAUDE.md). Dôsledok: bar je
o rozdiel Regular↔SemiBold širší než Figma 355. */
.zn-tools__tab::after {
content: attr(data-label);
grid-area: 1 / 1;
font-weight: var(--weight-semibold);
visibility: hidden;
}
.zn-tools__tab.is-active {
background: var(--color-white);
font-weight: var(--weight-semibold); /* 650 */
/* inset = stroke (do šírky sa nepočíta), za ním vonkajší tieň `medium-s`. */
box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-md);
}
.zn-tools__tab:hover { background: var(--color-bg-medium); }
.zn-tools__tab.is-active:hover { background: var(--color-white); }
.zn-tools__tab:focus-visible {
outline: 2px solid var(--color-secondary);
outline-offset: 2px;
}
/* ── Grid ───────────────────────────────────────────────────────────────────
Figma „Row" 768:27192: 3 stĺpce, karta 405,333 = (1280 − 2 × 32) / 3,
krok 437,333 vodorovne aj 461,846 zvisle → gap 32 v oboch smeroch.
Odstup tab bar → grid: taby končia na y 52, grid začína na y 84 = 32. */
.zn-tools__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-8); /* div-padding-medium 32 */
margin-top: var(--space-8); /* 32 */
}
/* Prázdny tab (napr. „Kalkulačky" bez položiek) nevykresľuje pod mriežkou NIČ -
žiadna hláška ani CTA (Maroš 2026-08-08). Preto tu nie je `.zn-tools__empty`. */
/* ── Karta ──────────────────────────────────────────────────────────────────
Figma 768:27193: biela, Radius/Medium 12, `overflow: hidden`, výška 429,85.
Kontrola skladby: 233,85 (obrázok 405,33 × 360/624) + 16 (pt) + 83,2 (nadpis
2 × 32 × 1,3) + 32 (gap) + 40 (tlačidlo) + 24 (pb) = 429,05 ≈ 429,85. ✓ */
.zn-tool-card {
display: flex;
flex-direction: column;
background: var(--color-white); /* Scheme A/Foreground #ffffff */
border-radius: var(--radius-md); /* Radius/Medium 12 */
overflow: hidden;
}
/* Obrázok bleeduje do hrán karty - vlastný radius NEMÁ, zaobľuje ho `overflow`
rodiča. (Tým sa líši od `resource-cards`, kde má médium vlastný radius 16
a voliteľný vlasový rám.) */
.zn-tool-card__media {
position: relative;
display: block;
aspect-ratio: 624 / 360; /* Figma „Image" I768:27193;19:2326 */
width: 100%;
}
/* `position: absolute`, NIE `height: 100%`. Percentuálna výška voči rodičovi
s `height: auto` sa nedá vyriešiť a spadne na `auto`, takže si obrázok vnúti
VLASTNÝ pomer a prebije `aspect-ratio` rodiča - slot potom kopíruje to, čo
klient nahral, nie dizajn. Namerané: pri zdroji 1024 × 592 vyšiel slot
234,33 namiesto 233,85 (405,33 × 592/1024 = 234,33, čo je presne pomer
obrázka). Vyňatím z toku ostáva výška na `aspect-ratio` a `cover` dorovná
ľubovoľný pomer nahratého obrázka. */
.zn-tool-card__img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Biely prechod na spodku náhľadu - Figma vrstva NAD obrázkom, nie súčasť rastra
(overené: v žiadnom z 27 assetov nie je zapečený, min jas v spodnom páse
135-236, nie ≈255). Preto patrí do CSS - dostane ho aj obrázok, ktorý klient
nahrá cez Multimédiá.
⚠️ Vo Figme ho má 25 z 27 kariet; „Evidencia dochádzky v Exceli" (768:27193)
a „Stavebný denník Vzor" (768:29146) ho NEMAJÚ. Overené MERANÍM, nie
z exportu (rekonštrukcia slotu z čistého assetu, profil alfy po 10 % pásoch):
pás 70-80 % očakávané 0,259 #3 Zápisnica 0,198 #4 Faktúra 0,238 #1 Evidencia 0,044
pás 80-90 % očakávané 0,555 #4 Faktúra 0,371 #1 Evidencia −0,019
Na #1 teda prechod preukázateľne NIE JE. Nasadzuje sa napriek tomu JEDNOTNE,
lebo tá sekcia je vo Figme rozrobená (24 z 27 kariet má ten istý copy-paste
obrázok, 27. karta je skrytý duplikát a jedna položka chýba úplne) a dve
výnimky bez vzoru vyzerajú ako prehliadnutie, nie ako zámer. Ak Ján potvrdí,
že sú zámerné, pribudne prepínač ako `hsm_image_fade` v `hero-simple`. */
.zn-tool-card__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 66.283%, rgba(255, 255, 255, 1) 100%);
pointer-events: none;
}
.zn-tool-card__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: var(--space-8); /* „Content" gap 32 */
padding: var(--space-4) var(--space-6) var(--space-6); /* pt 16 / px 24 / pb 24 */
}
/* Nadpis: Heading/H4-A = Mix Medium Italic, weight 580, 32/1.3, letterSpacing −1 %.
⚠️ Design context si tu PROTIREČÍ - trieda hlási `not-italic`, ale token aj
render hovoria italic. Overené VIZUÁLNE na renderi 768:27193 (zoom na nadpis):
„Evidencia dochádzky v Exceli" je jednoznačne kurzíva. Platí token.
Konvencia témy sedí: prípona `-A` = italic variant (H2-A/H3-A = Mix Regular
Italic 420, viď contact-cards / contact-locations).
Weight 580 zámerne NEMÁ token: `style.css` má 400/420/550/650/750 a 580 zatiaľ
nepoužíva nič iné. Keď pribudne druhý výskyt, patrí do premennej.
Tracking v `em`, nie v px - `-1 %` z Figmy je pri 32 px presne −0,32 px
a v `em` to drží aj po zmenšení na mobile (rovnako ako `.zn-rsc__card-title`). */
.zn-tool-card__title {
margin: 0;
width: 100%;
font-family: var(--font-display);
font-style: italic;
font-weight: 580; /* Mix Medium Italic */
font-size: var(--text-4xl); /* Size/H4 32 */
line-height: 1.3;
letter-spacing: -0.01em; /* −1 % */
color: var(--color-text); /* Scheme A/Text #023047 */
/* Orezanie na 2 riadky S REZERVOVANOU VÝŠKOU. Figma má všetkých 27 inštancií
presne 429,85 vysokých bez ohľadu na dĺžku nadpisu (overené na metadátach
aj v renderi: jednoriadkový „Stavebný denník Vzor" má tlačidlo na tej istej
y ako dvojriadkový „Evidencia dochádzky v Exceli") - `line-clamp` samotný
by jednoriadkovú kartu spravil o riadok nižšou. Preto aj `min-height`. */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
min-height: 2.6em; /* 2 × 1.3 */
}
.zn-tool-card__title a {
color: inherit;
text-decoration: none;
}
.zn-tool-card__title a:hover,
.zn-tool-card__title a:focus-visible { text-decoration: underline; }
/* Tlačidlo = globálna `.btn.btn--outline` (Tertiary: transparentné pozadie,
border rgba(3,3,3,.15), text 16/650 #023047, radius 12) - presne to, čo Figma
udáva. Vzhľad sa tu NEDEFINUJE nanovo (CLAUDE.md), mení sa jediná hodnota:
VÝŠKA. `Button` token má v tomto frame hodnotu 40, kým `.btn` drží 48 podľa
DS. Nie je to odchýlka od DS „od oka" - je to iný mód tej istej premennej
(get_variable_defs na 768:27193 vracia `"Button": "40"`). */
.zn-tool-card__cta {
height: 40px;
flex-shrink: 0;
}
/* ── Variant MANUÁL: ikona + nadpis + text, bez obrázka a tlačidiel ──────────
Figma 747:21971 (desktop) / 1201:84973 (mobil). Ten istý komponent
„Element / Card / Complex", preto len modifikátor - žiadna druhá karta.
Skladba desktop: 16 (pt) + 52 (ikona) + 8 + [41,6 nadpis + 16 + 54 text]
+ 24 (pb) = 211,6 ≈ Figma 212. ✓
Mobil: 8 + 52 + 8 + [31,2 + 16 + 48] + 16 = 179,2 ≈ Figma 179. ✓ */
.zn-tool-card--icon .zn-tool-card__top {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2); /* „Content Top" gap 8 */
width: 100%;
}
.zn-tool-card--icon .zn-tool-card__text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4); /* vnútorný „Content" gap 16 */
width: 100%;
}
/* Ikona 52 (token `Icon` = 52 v desktop AJ mobilnom móde - overené
`get_variable_defs` na 1201:84973). Duotone farby #fb8500 / #fbd26a z Figmy
sú presne fallbacky `--zn-ico-main` / `--zn-ico-soft`, takže sa nič
neprefarbuje - overené, že všetkých 8 použitých ikon premenné naozaj
obsahuje a nemá farby natvrdo (precedens `ico-check-ring`). */
.zn-tool-card--icon .zn-tool-card__icon {
flex-shrink: 0;
width: 52px;
height: 52px;
}
/* Nadpis má vo Figme JEDEN rezervovaný riadok (výška uzla 42 = 32 × 1,3),
nie dva ako archívna karta - preto sa tu rezerva prepisuje. Bez toho by bola
karta o riadok vyššia než Figma. Dve triedy: `.zn-tool-card__title` je nižšie
v tom istom súbore, takže jednotriedka by neprebila. */
.zn-tool-card--icon .zn-tool-card__title {
-webkit-line-clamp: 1;
line-clamp: 1;
min-height: 1.3em;
}
/* Text: Figma rezervuje DVA riadky aj tam, kde je obsah na jeden (overené na
747:21977 „Školenia" - jednoriadkový text, uzol má aj tak 54). */
.zn-tool-card--icon .zn-tool-card__desc {
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); /* Scheme A/Text #023047 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
min-height: 3em; /* 2 × 1.5 */
}
/* Obsah karty je pri tomto variante zhora, nie vycentrovaný - `Content` má
síce `justify-center`, ale s jediným dieťaťom na tom nezáleží; dôležité je,
aby sa karta pri `stretch` v gride neroztiahla obsahom do stredu. */
.zn-tool-card--icon .zn-tool-card__body { justify-content: flex-start; }
/* ── Klikateľná karta (archív Manuálu) ──────────────────────────────────────
Odkaz je v nadpise (prístupný názov = názov sekcie), ale kliknuteľná musí
byť celá karta - to robí prekryv `::after`. Karta má preto práve JEDEN ``,
žiadne vnorené odkazy a prirodzené poradie tabulátora.
⚠️ Overlay je `position: absolute` voči KARTE, hoci `` sedí vnútri
nadpisu, ktorý má `overflow: hidden` (line-clamp). Neoreže ho to: overflow
oreže len tie absolútne prvky, ktorých containing block je vnútri neho -
tu je containing blockom `.zn-tool-card--clickable` (ancestor toho nadpisu).
Overené meraním v prehliadači, nie odhadom (rect overlaya = rect karty).
Vo Figme odkazový prvok NIE JE (karta 747:21971 nemá tlačidlo ani stav) -
je to naše rozhodnutie, viď CONTEXT.md.
POZOR na názvy: `--clickable` / `__stretch`, NIE `--link`. Trieda
`zn-tool-card__cta--link` už existuje a znamená úplne inú vec (DS variant
tlačidla „Link" vo Widget Gride). */
.zn-tool-card--clickable {
position: relative;
transition: box-shadow var(--transition-base);
}
.zn-tool-card--clickable:hover { box-shadow: var(--shadow-md); } /* ako `.zn-feature-card` */
.zn-tool-card__stretch::after {
content: '';
position: absolute;
inset: 0;
}
/* Podčiarknutie nadpisu pri hoveri aj klávesnici dáva globálne pravidlo
`.zn-tool-card__title a:hover, :focus-visible` vyššie - hover nad overlayom
sa počíta ako hover nad ``, takže reaguje celá plocha karty.
Zvýraznenie fokusu ide na overlay, aby orámovalo kartu, nie samotný text.
`outline-offset` je ZÁPORNÝ: karta má `overflow: hidden`, takže kladný
offset by rám vykreslila mimo nej a orezala by ho (CLAUDE.md). */
.zn-tool-card__stretch:focus-visible { outline: none; }
.zn-tool-card__stretch:focus-visible::after {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
border-radius: var(--radius-md); /* rovnaký radius ako karta */
}
/* ══ Tablet (≤1199.98px) - Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
.zn-tools { padding-inline: var(--space-8); }
.zn-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ══ Mobil (≤767.98px) - Figma frame NEDODANÝ ═════════════════════════════
Hodnoty podľa konvencie témy a mobilných frame-ov príbuzných sekcií:
page-padding 16, Size/H4 (mobil) 24, div-padding 16/20. Tab bar sa nezalamuje
ani nesťahuje - scrolluje vodorovne so skrytým scrollbarom, presne ako
`.zn-bt__tabs` (aktívny tab si doscrolluje JS, `scrollIntoView()` by posunul
celú stránku). ══ */
@media (max-width: 767.98px) {
.zn-tools {
padding-inline: var(--space-4); /* Page Padding (mobil) 16 */
padding-block: var(--space-8) var(--space-12);
}
/* Tabbar je full-bleed do hrán obrazovky, aby sa dal doscrollovať aj posledný
tab; padding vracia obsah na úroveň sekcie. Bez `justify-content: center`,
inak sa pri scrolle nedá dostať na ľavý okraj. */
.zn-tools__tabbar {
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
padding-inline: var(--space-4);
margin-inline: calc(-1 * var(--space-4));
}
.zn-tools__tabbar::-webkit-scrollbar { display: none; }
.zn-tools__tabs { flex-shrink: 0; }
.zn-tools__tab { padding: 10px 16px; flex-shrink: 0; }
.zn-tools__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5); /* 20 */
margin-top: var(--space-6); /* 24 */
}
.zn-tool-card__body { gap: var(--space-5); padding: var(--space-4); }
/* Size/H4 (mobil) 24; tracking ostáva −0.01em = −0,24 px. */
.zn-tool-card__title { font-size: 1.5rem; }
/* Variant MANUÁL - hodnoty z `get_variable_defs` na MOBILNOM node
1201:84973, nie z design contextu (ten hlási desktopový mód):
div-padding-xsmall 8 (pt), div-padding-small 16 (px, pb),
Size/H4 24, Size/Medium 16. Ikona ostáva 52 aj na mobile. */
.zn-tool-card--icon .zn-tool-card__body {
gap: var(--space-5);
padding: var(--space-2) var(--space-4) var(--space-4); /* pt 8 / px 16 / pb 16 */
}
.zn-tool-card--icon .zn-tool-card__desc { font-size: var(--text-base); } /* 16 */
}