/*
 * Verejný web (layouts/public): hlavička, päta a úvod. Nadväzuje na tokens.css a app.css (tlačidlá, štítky,
 * tabuľka portálu) — hodnoty len z tokenov, viď docs/DIZAJN.md.
 *
 * Podstránky (ukážka, cenník, kontakt, právne texty, chyby) majú spoločnú hlavičku .site-head; každá potom vlastné rozloženie.
 *
 * Rytmus úvodu: hero na stred (veľké počítadlo, nadpis, tlačidlá, mraky po stranách), náhľad portálu na celú šírku,
 * pás čísel (jedna karta so štyrmi stĺpcami), kroky (tri stĺpce s ikonou a veľkým číslom v pozadí), export (formáty +
 * vzorka stĺpcov), cenník (riadky v jednej karte), otázky (rozbaľovací zoznam). Úvod každej sekcie je na stred, obsah
 * v mriežke. Akcent len na hlavnej akcii, ikonách krokov a pásu.
 */

/* ---------- základ ---------- */

.site { display: flex; flex-direction: column; }
.site-main { flex: 1; }

.site-wrap { width: 100%; max-width: var(--width-site); margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 48rem) {
    .site-wrap { padding: 0 var(--space-8); }
}

/* Plynulý posun na kotvy menu — len keď človek nechce obmedziť pohyb. Cieľ kotvy nezakryje lepkavá hlavička. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
.site-main [id] { scroll-margin-top: calc(var(--topbar-height) + var(--space-4)); }

/* Väčšie tlačidlo hlavných akcií úvodu: 48 px a text 16 px. */
.btn-lg { min-height: calc(var(--control-height) + var(--space-1)); padding: 0 var(--space-6); font-size: var(--text-base); }
.btn-lg .icon { width: var(--icon-md); height: var(--icon-md); }
/* Najväčšie tlačidlá — dve akcie v strede hero: 56 px a text 18 px. */
.btn-xl { min-height: calc(var(--control-height) + var(--space-3)); padding: 0 var(--space-8); font-size: var(--text-lg); }
.btn-xl .icon { width: var(--icon-md); height: var(--icon-md); }

/* ---------- hlavička ---------- */

.site-header {
    position: sticky; top: 0; z-index: 20;
    background: var(--bg); border-bottom: 1px solid var(--border);
}
.site-bar {
    display: flex; align-items: center; gap: var(--space-6);
    width: 100%; max-width: var(--width-site); height: var(--topbar-height); margin: 0 auto; padding: 0 var(--space-4);
}
@media (min-width: 48rem) {
    .site-bar { padding: 0 var(--space-8); }
}

.site-brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); font-size: var(--text-lg); text-decoration: none; }
.site-brand:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-control); }

.site-nav ul { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.site-link {
    position: relative; display: inline-flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-3);
    border-radius: var(--radius-control); color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none;
    transition: color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}
.site-link:hover { color: var(--text); background: var(--surface-2); }
/* Aktuálna stránka: jantárová linka pod textom (nie výplň — tá patrí hlavnej akcii). */
.site-link[aria-current="page"] { color: var(--text); }
.site-link[aria-current="location"] { color: var(--text); }
.site-link[aria-current="page"]::after, .site-link[aria-current="location"]::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-1); height: 2px; border-radius: var(--radius-full); background: var(--accent); }

.site-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.site-account { display: flex; align-items: center; gap: var(--space-2); }

/* Mobil: odkazy aj účet v rozbaľovacom menu; od 48 rem je účet v lište (menu nesie len sekcie), od 64 rem aj sekcie. */
.site-nav, .site-account { display: none; }
.site-menu { position: relative; display: flex; }
.site-menu > summary { list-style: none; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu-panel {
    position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 30;
    width: min(var(--width-dropdown), calc(100vw - var(--space-8)));
    padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-card);
    background: var(--surface); box-shadow: var(--shadow-lg);
}
.site-menu-panel ul { margin: 0; padding: 0; list-style: none; }
.site-menu-link {
    display: flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-3);
    border-radius: var(--radius-control); color: var(--text); font-weight: var(--weight-medium); text-decoration: none;
}
.site-menu-link:hover { background: var(--surface-2); }
.site-menu-link[aria-current="page"], .site-menu-link[aria-current="location"] { background: var(--accent-soft); color: var(--accent-soft-text); }
.site-menu-account { display: grid; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }

@media (min-width: 48rem) {
    .site-account { display: flex; }
    .site-menu-account { display: none; }
}
@media (min-width: 64rem) {
    .site-nav { display: flex; }
    .site-menu { display: none; }
    .site-bar { gap: var(--space-4); }
    .site-nav ul { gap: 0; }
}

/* ---------- úvod: hero na stred ---------- */

.hero { padding: var(--space-12) 0 var(--space-12); }
@media (min-width: 64rem) {
    .hero { padding: var(--space-16) 0; }
}

.hero-center { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Počítadlo: veľké číslo a pod ním drobný štítok — skutočný počet z cache. Bez plochy; mrak pod ním neleží (dots.js ho chráni). */
.hero-count { display: grid; justify-items: center; gap: var(--space-1); }
.hero-count-value {
    color: var(--text); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-heavy);
    line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (min-width: 48rem) {
    .hero-count-value { font-size: var(--text-5xl); }
}
.hero-count-label { max-width: var(--measure); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.hero-count.is-pending { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero-count .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--accent-text); }

.hero-title {
    max-width: var(--width-hero); margin-top: var(--space-8);
    font-size: var(--text-2xl); font-weight: var(--weight-heavy);
    text-wrap: balance;
}
@media (min-width: 48rem) {
    .hero-title { font-size: var(--text-4xl); }
}
@media (min-width: 64rem) {
    .hero-title { font-size: var(--text-5xl); }
}

/* Druhý riadok nadpisu: menší, v jantári pre veľký text (--accent-display, len od 24 px — rozhodnutie Erika 15. 10. 2026). */
.hero-title-sub {
    display: block; margin-top: var(--space-3);
    font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--accent-display);
    text-wrap: balance;
}
@media (min-width: 48rem) {
    .hero-title-sub { font-size: var(--text-2xl); }
}

.hero-lead { margin-top: var(--space-6); max-width: var(--width-dialog); color: var(--text-muted); font-size: var(--text-base); }
@media (min-width: 48rem) {
    .hero-lead { font-size: var(--text-lg); }
}

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); }
/* Telefón: tlačidlá cez celú šírku pod sebou — rovnaký cieľ pre palec, nie dve rôzne dlhé. */
@media (max-width: 39.99rem) {
    .hero-actions { align-self: stretch; }
    .hero-actions .btn { flex: 1 1 100%; }
}

.hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); margin: var(--space-6) 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.hero-trust li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero-trust .icon { width: var(--icon-xs); height: var(--icon-xs); }

/* ---------- pás čísel ---------- */

.band-wrap { margin-top: var(--space-8); }
.stat-band {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
    border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden;
}
.stat-band li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Počet dlaždíc je 2–4 (s kontaktom a odbory sa bez údajov vynechajú) — na šírku vždy jeden rad rovnakých stĺpcov. */
@media (min-width: 64rem) {
    .stat-band { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
    .stat-band li:last-child:nth-child(odd) { grid-column: auto; }
}
.stat-band li { display: grid; justify-items: center; align-content: start; gap: var(--space-1); padding: var(--space-6) var(--space-4); text-align: center; box-shadow: -1px 0 0 var(--border), 0 -1px 0 var(--border); }
.stat-band .icon { width: var(--icon-lg); height: var(--icon-lg); margin-bottom: var(--space-2); color: var(--accent-text); }
.band-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-heavy); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 64rem) {
    .band-value { font-size: var(--text-3xl); }
}
.band-label { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.band-meta { color: var(--text-muted); font-size: var(--text-xs); }
.band-note { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); text-align: center; }
.band-empty { margin: 0 auto; }

/* ---------- náhľad portálu ---------- */

.preview { margin-top: var(--space-12); margin-bottom: 0; }

.preview-window {
    overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card);
    background: var(--surface); box-shadow: var(--shadow-lg);
}
/* Náhľad sa nedá ovládať: kurzor ani hover riadkov nesmú sľubovať klik. */
.preview-window .table tbody tr:hover td { background: transparent; }
.preview-window .table-pick tbody tr.is-picked:hover td { background: var(--accent-soft); }
.preview-window .pick-box { cursor: default; }
/* Maskovaný telefón sa nezalamuje uprostred („+421 9** ***“ / „214“). */
.preview-window .contact-mini-value { white-space: nowrap; }

.preview-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.preview-brand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.preview-brand .brand-mark .icon { width: var(--icon-xs); height: var(--icon-xs); }
.preview-path { color: var(--text-muted); font-size: var(--text-xs); }
.preview-badge { margin-left: auto; }

.preview-filters { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); }
.preview-filters .quick-filters { margin-top: 0; }

.preview-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4);
    padding: var(--space-3) var(--space-6); border-top: 1px solid var(--border); background: var(--surface-2);
    font-size: var(--text-sm);
}
.preview-selected { color: var(--text-muted); }
.preview-selected strong { color: var(--text); }
.preview-formats { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; }
.preview-format {
    display: inline-flex; align-items: center; min-height: var(--control-height-sm); padding: 0 var(--space-3);
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted);
}
.preview-format + .preview-format { border-left: 1px solid var(--border); }
.preview-format.is-on { background: var(--accent-soft); color: var(--accent-soft-text); }
.preview-foot .btn { margin-left: auto; }

.preview-caption { margin-top: var(--space-3); max-width: var(--measure); color: var(--text-muted); font-size: var(--text-sm); }

/* Tablet: šesť stĺpcov by sa stlačilo do úzkych pruhov — náhľad vynechá Činnosť (kategória je vo filtri nad tabuľkou). */
@media (min-width: 40rem) and (max-width: 63.99rem) {
    .preview-window .table th:nth-child(5), .preview-window .table td:nth-child(5) { display: none; }
}

/* Na telefóne sú riadky karty — dve stačia, inak by náhľad zabral niekoľko obrazoviek. */
@media (max-width: 39.99rem) {
    .preview-window tbody tr:nth-child(n+3) { display: none; }
    .preview-bar, .preview-filters, .preview-foot { padding-left: var(--space-4); padding-right: var(--space-4); }
    .preview-window .table-stack tr { padding-left: var(--space-4); padding-right: var(--space-4); }
    .preview-path { display: none; }
}

/* ---------- sekcie ---------- */

.site-section { padding: var(--space-12) 0; }
@media (min-width: 64rem) {
    .site-section { padding: var(--space-16) 0; }
}

.section-title { margin-bottom: var(--space-8); font-size: var(--text-2xl); font-weight: var(--weight-heavy); }
@media (min-width: 64rem) {
    .section-title { font-size: var(--text-3xl); }
}
.section-title:has(+ .section-lead) { margin-bottom: var(--space-3); }
.section-lead { max-width: var(--measure); margin-bottom: var(--space-8); color: var(--text-muted); }
/* Úvod sekcie na úvode webu: nadpis a krátky text na stred, obsah pod ním v mriežke. */
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.section-head .section-title { text-wrap: balance; }
.section-head .section-lead { text-wrap: balance; }

/* ---------- čísla ---------- */

.figures { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figure-main { grid-column: 1 / -1; }
@media (min-width: 64rem) {
    .figures { gap: var(--space-4); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); }
    .figure-main { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: flex-end; }
}

.figure { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-xs); }
@media (min-width: 40rem) {
    .figure { padding: var(--space-6); }
}
.figure-label { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.figure-label .icon { width: var(--icon-xs); height: var(--icon-xs); }
.figure-value { margin-top: var(--space-3); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-heavy); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 40rem) {
    .figure-value { font-size: var(--text-2xl); }
}
.figure-meta { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }

/* Hlavné číslo: jantárová plocha, najväčšie písmo stránky po nadpise. */
.figure-main { background: var(--accent-soft); border-color: var(--accent); }
.figure-main .figure-value { color: var(--accent-soft-text); font-size: var(--text-3xl); }
@media (min-width: 64rem) {
    .figure-main .figure-value { font-size: var(--text-5xl); }
}

.figures-note { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); }

.figures-empty {
    display: flex; align-items: flex-start; gap: var(--space-4); max-width: var(--width-panel);
    padding: var(--space-6); border: 1px dashed var(--border-strong); border-radius: var(--radius-card); background: var(--surface);
}
.figures-empty > .icon { width: var(--icon-2xl); height: var(--icon-2xl); padding: var(--space-2); border-radius: var(--radius-card); background: var(--accent-soft); color: var(--accent-soft-text); }
.figures-empty > div { display: grid; gap: var(--space-2); justify-items: start; }
.figures-empty p { color: var(--text-muted); font-size: var(--text-sm); }
.figures-empty .figures-empty-title { color: var(--text); font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); }
.figures-empty .btn { margin-top: var(--space-2); }

/* ---------- ako to funguje ---------- */

/* Tri stĺpce: ikona, nadpis, text; veľké poradové číslo jemne v pozadí kroku (dekorácia, aria-hidden). */
.how-steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) {
    .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.how-step {
    position: relative; overflow: hidden; isolation: isolate;
    padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-xs);
}
.how-step-no {
    position: absolute; top: var(--space-2); right: var(--space-4); z-index: -1;
    color: var(--border); font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--weight-heavy);
    line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums;
}
.how-step-icon { display: inline-grid; place-items: center; width: var(--control-height); height: var(--control-height); border-radius: var(--radius-card); background: var(--accent-soft); color: var(--accent-soft-text); }
.how-step-icon .icon { width: var(--icon-md); height: var(--icon-md); }
.how-step h3 { margin-top: var(--space-4); font-size: var(--text-xl); }
.how-step p { margin-top: var(--space-2); color: var(--text-muted); }

/* ---------- export ---------- */

.export-grid { display: grid; gap: var(--space-8); }
.export-grid .formats { margin-top: 0; }
@media (min-width: 64rem) {
    .export-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; }
}
.export-intro > p { max-width: var(--measure); color: var(--text-muted); }

.formats { margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.formats li { display: grid; grid-template-columns: var(--width-label) minmax(0, 1fr); align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-sm); }
.formats li:last-child { border-bottom: 1px solid var(--border); }
.format-name { color: var(--text); font-family: var(--font-mono); font-size: var(--text-base); font-weight: var(--weight-medium); }

.columns-card {
    display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-xs);
}
.columns-group h3 { padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.columns-group ul { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }

/* ---------- cenník ---------- */

.price-list { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-xs); }
.price-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: baseline;
    padding: var(--space-4) var(--space-6);
}
.price-row + .price-row { border-top: 1px solid var(--border); }
.price-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); }
.price-value { grid-column: 2; grid-row: 1; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-facts, .price-unit { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--text-sm); }
.price-facts strong { color: var(--text); }
@media (min-width: 48rem) {
    .price-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr) auto; align-items: center; }
    .price-facts, .price-unit { grid-column: auto; }
    .price-value { grid-column: 4; }
}

/* ---------- časté otázky ---------- */

.faq-wrap .faq { max-width: var(--width-panel); margin: 0 auto; }
.faq-grid { display: grid; gap: var(--space-4); }
@media (min-width: 64rem) {
    .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); align-items: start; }
}
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    min-height: var(--control-height); padding: var(--space-4) 0;
    font-weight: var(--weight-semibold); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-lg); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--accent-text); }
.faq summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-control); }
.faq details p { max-width: var(--measure); padding-bottom: var(--space-4); color: var(--text-muted); }

/* ---------- päta ---------- */

.site-footer { overflow: hidden; border-top: 1px solid var(--border); background: var(--surface); }
.site-footer-inner {
    display: grid; gap: var(--space-8);
    width: 100%; max-width: var(--width-site); margin: 0 auto; padding: var(--space-12) var(--space-4) var(--space-8);
}
@media (min-width: 48rem) {
    .site-footer-inner { padding-left: var(--space-8); padding-right: var(--space-8); }
}
@media (min-width: 64rem) {
    .site-footer-inner { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); }
}
.site-footer-brand p { margin-top: var(--space-3); max-width: var(--measure-narrow); color: var(--text-muted); font-size: var(--text-sm); }

.site-footer-nav { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) {
    .site-footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.site-footer-nav h2, .site-operator-label { color: var(--text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.site-footer-nav ul { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.site-footer-nav a { display: inline-flex; align-items: center; min-height: var(--control-height-sm); color: var(--text-muted); font-size: var(--text-sm); text-decoration: none; }
.site-footer-nav a:hover { color: var(--text); text-decoration: underline; }

.site-operator { display: grid; gap: var(--space-1); align-content: start; color: var(--text-muted); font-size: var(--text-sm); font-style: normal; overflow-wrap: anywhere; }
.site-operator .site-operator-label { margin-bottom: var(--space-1); }
.site-operator .mono { font-size: var(--text-xs); }
.site-operator a { justify-self: start; }

.site-footer-legal {
    width: 100%; max-width: var(--width-site); margin: 0 auto; padding: var(--space-4);
    border-top: 1px solid var(--border); color: var(--text-subtle); font-size: var(--text-xs);
}
@media (min-width: 48rem) {
    .site-footer-legal { padding-left: var(--space-8); padding-right: var(--space-8); }
}

/* Vodoznak značky v pätičke: značka 2×2 a slovo cez celú šírku obsahu, farba len o kúsok odlišná od plochy pätičky
   (--watermark, --watermark-accent). Veľkosť písma z šírky kontajnera (cqi), takže slovo vždy vyplní šírku obsahu a nikdy
   ju nepresiahne — ani na 320 px. Spodok písmen oreže okraj stránky (pätička má overflow: hidden). Je to dekorácia:
   aria-hidden, nedá sa označiť ani kliknúť a leží pod právnym riadkom, takže neprekryje odkazy. Pätička je nepriehľadná —
   mrak pod vodoznakom nie je (končí nad pätičkou), vodoznak a mrak sa tak nebijú. */
.site-watermark {
    container-type: inline-size;
    width: 100%; max-width: var(--width-site); margin: 0 auto; padding: var(--space-4) var(--space-4) 0;
    pointer-events: none; user-select: none; -webkit-user-select: none;
}
@media (min-width: 48rem) {
    .site-watermark { padding-left: var(--space-8); padding-right: var(--space-8); }
}
.site-watermark-inner {
    display: flex; align-items: center; gap: 0.06em;
    margin-bottom: -0.24em;
    color: var(--watermark); font-family: var(--font-display); font-size: 14.5cqi; font-weight: var(--weight-heavy);
    letter-spacing: var(--tracking-display); line-height: 1; white-space: nowrap;
}
.site-watermark .icon { flex: none; width: 0.78em; height: 0.78em; }
.site-watermark .icon .icon-fill { fill: var(--watermark); }
.site-watermark .icon .icon-accent { fill: var(--watermark-accent); }
.site-watermark-tld { color: var(--watermark-accent); }

/* ---------- hlavička podstránky (ukážka, cenník, kontakt, cookies, chyby) ---------- */
/* Štítok nad nadpisom len tam, kde stránku zaraďuje (ukážka, cenník, kód chyby) — nie pri každej. */
.site-head { padding: var(--space-12) 0 var(--space-8); }
.site-kicker { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.site-title { max-width: var(--width-hero); font-size: var(--text-2xl); font-weight: var(--weight-heavy); text-wrap: balance; }
.site-kicker + .site-title { margin-top: var(--space-3); }
@media (min-width: 64rem) {
    .site-title { font-size: var(--text-4xl); }
}
.site-lead { margin-top: var(--space-4); max-width: var(--measure); color: var(--text-muted); }
@media (min-width: 48rem) {
    .site-lead { font-size: var(--text-lg); }
}

/* Sekcia hneď pod hlavičkou podstránky — hlavička už má odstup, druhý plný by roztrhol stránku. */
.site-section.is-tight { padding-top: 0; }
.site-section.is-last { padding-bottom: var(--space-16); }

/* ---------- cenník /cennik ---------- */

/* Pravidlá čerpania: očíslovaný zoznam s čiarami, nadpis vľavo a text vpravo (iná rodina než karta s balíkmi). */
.rules-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--border); }
.rules-list li { display: grid; gap: var(--space-2); padding: var(--space-6) 0; border-top: 1px solid var(--border); }
@media (min-width: 48rem) {
    .rules-list li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-8); align-items: baseline; }
}
.rules-list h3 { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-lg); line-height: var(--leading-tight); }
.rules-no { flex: none; color: var(--accent-text); font-size: var(--text-sm); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.rules-list p { max-width: var(--measure); color: var(--text-muted); }

/* Výzva na konci podstránky: text vľavo, akcie vpravo; jediná jantárová akcia. */
.site-cta {
    display: grid; gap: var(--space-6); padding: var(--space-6);
    border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-xs);
}
@media (min-width: 64rem) {
    .site-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-12); padding: var(--space-8); }
}
.site-cta-title { font-size: var(--text-xl); font-weight: var(--weight-heavy); line-height: var(--leading-tight); text-wrap: balance; }
.site-cta p { margin-top: var(--space-2); max-width: var(--measure); color: var(--text-muted); }
.site-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 39.99rem) {
    .site-cta-actions .btn { flex: 1 1 100%; }
}

/* ---------- kontakt /kontakt ---------- */

.contact-body { padding-bottom: var(--space-16); }
.contact-grid { display: grid; gap: var(--space-8); }
@media (min-width: 64rem) {
    .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: start; }
}
.contact-label { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.contact-mail { display: grid; gap: var(--space-4); justify-items: start; }
/* E-mail sa láme len v mieste <wbr> za „@“ (contact.php), nie v ľubovoľnom znaku. */
.contact-address { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-display); word-break: normal; overflow-wrap: break-word; }
@media (min-width: 48rem) {
    .contact-address { font-size: var(--text-3xl); }
}
.contact-address a { color: var(--text); text-decoration: none; }
.contact-address a:hover { color: var(--accent-text); text-decoration: underline; }
.contact-missing, .contact-note { max-width: var(--measure); color: var(--text-muted); }
.contact-note { margin-top: var(--space-4); font-size: var(--text-sm); }
.contact-card { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-xs); }
.contact-details { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; }
.contact-details div { display: grid; gap: var(--space-1); }
.contact-details dt { color: var(--text-muted); font-size: var(--text-sm); }
.contact-details dd { margin: 0; overflow-wrap: anywhere; }


/* ---------- právne texty (obchodné podmienky, ochrana údajov, cookies) ---------- */
/* Dlhý text na čítanie: riadok do --measure, hlavný text v --text (nie tlmený), výška riadku 1,5; vľavo obsah dokumentu
   (od 64 rem, prilepený pod hlavičkou), pod textom zoznam znení. Mraky predvoľby web-text. */

.legal-meta { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.legal-meta span { margin: 0 var(--space-1); }
.legal-empty { padding-bottom: var(--space-16); }
.legal-empty .site-lead { margin-top: 0; }

.legal-layout { display: grid; gap: var(--space-12); padding-bottom: var(--space-16); }
.legal-toc { display: none; }
@media (min-width: 64rem) {
    .legal-layout { grid-template-columns: var(--width-toc) minmax(0, 1fr); gap: var(--space-16); align-items: start; }
    .legal-layout.is-single { grid-template-columns: minmax(0, 1fr); }
    .legal-toc {
        display: block; position: sticky; top: calc(var(--topbar-height) + var(--space-6));
        max-height: calc(100vh - var(--topbar-height) - var(--space-12)); overflow-y: auto;
        padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-xs);
    }
}
.legal-toc-title { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.legal-toc ol { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.legal-toc a {
    display: block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-control);
    color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-tight); text-decoration: none;
}
.legal-toc a:hover { color: var(--text); background: var(--surface-2); }
.legal-toc a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* Textový stĺpec len na šírku textu — pod ním a 16 px okolo nie je mrak (data-dots-exclude), vedľa neho áno. */
.legal-main { display: grid; gap: var(--space-8); min-width: 0; max-width: var(--measure); }
.legal-notice {
    display: flex; gap: var(--space-3); align-items: flex-start; max-width: var(--measure); padding: var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--accent-soft); color: var(--accent-soft-text);
}
.legal-notice .icon { flex: none; width: var(--icon-md); height: var(--icon-md); margin-top: 2px; }
.legal-notice a { color: inherit; font-weight: var(--weight-semibold); }

.legal-prose h2 { scroll-margin-top: calc(var(--topbar-height) + var(--space-6)); }

.legal-versions { max-width: var(--measure); padding-top: var(--space-8); border-top: 1px solid var(--border); }
.legal-versions h2 { font-size: var(--text-lg); font-weight: var(--weight-heavy); }
.legal-versions ol { margin: var(--space-4) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--border); }
.legal-versions li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-height: var(--control-height); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.legal-version-name { font-weight: var(--weight-semibold); }
a.legal-version-name { display: inline-flex; align-items: center; min-height: var(--control-height); color: var(--accent-text); }
.legal-version-dates { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

/* ---------- chybová stránka webu (404, 403) ---------- */

.site-error { padding-bottom: var(--space-16); }
@media (min-width: 64rem) {
    .site-error { padding-top: var(--space-16); }
}
.site-error-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.site-error-links ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.site-error-links a { display: inline-flex; align-items: center; min-height: var(--control-height); color: var(--text-muted); font-weight: var(--weight-medium); }
.site-error-links a:hover { color: var(--text); }

/* ------------------------------------------------------------------ ukážka /ukazka */

.sample-body { display: grid; gap: var(--space-6); padding-bottom: var(--space-16); }

.sample-filters {
    display: grid; gap: var(--space-4); padding: var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-xs);
}
@media (min-width: 48rem) {
    .sample-filters { padding: var(--space-6); }
}
.sample-filter-grid { display: grid; gap: var(--space-4); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--width-field-min)), 1fr)); }
.sample-filter-grid .field { gap: var(--space-2); }
.sample-filter-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sample-filter-foot .quick-filters { margin-top: 0; }
.sample-filter-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
@media (max-width: 39.99rem) {
    .sample-filter-actions { width: 100%; }
    .sample-filter-actions .btn { flex: 1 1 0; }
}

.sample-state { max-width: none; border: 1px solid var(--border); }

.sample-result { display: grid; gap: var(--space-4); }
.sample-result-head { display: grid; gap: var(--space-3); }
.sample-count { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.sample-count-value { font-size: var(--text-2xl); font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) {
    .sample-count-value { font-size: var(--text-3xl); }
}
.sample-count-meta { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }
.sample-count-meta strong { color: var(--text); font-variant-numeric: tabular-nums; }

.sample-table { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-xs); }
.sample-table .table tbody tr:hover td { background: transparent; }

/* Vymyslené riadky pod matným efektom: rozmazané, nedajú sa označiť; cez ne výzva. Pás má pevnú výšku — 15 riadkov by inak
   natiahlo stránku bez úžitku. Prekrytie je plocha karty s priehľadnosťou (odvodená z tokenu, žiadna nová farba). */
.sample-more { position: relative; border-top: 1px solid var(--border); }
.sample-more-rows { max-height: var(--height-sample-more); overflow: hidden; filter: blur(var(--blur-sample)); user-select: none; pointer-events: none; }
.sample-more::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--surface) 45%, transparent); pointer-events: none; }
.sample-cta {
    position: absolute; z-index: 1; top: var(--space-12); left: 50%; transform: translateX(-50%);
    display: grid; gap: var(--space-3); width: calc(100% - var(--space-8)); max-width: var(--width-dialog); padding: var(--space-6);
    border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-lg);
}
.sample-cta p { color: var(--text-muted); }
.sample-cta-title { font-size: var(--text-xl); font-weight: var(--weight-heavy); text-wrap: balance; }
.sample-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.sample-cta .sample-cta-note { color: var(--text-muted); font-size: var(--text-xs); }
.sample-cta-plain { position: static; transform: none; width: auto; max-width: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
@media (max-width: 39.99rem) {
    .sample-cta { top: var(--space-6); padding: var(--space-4); }
    .sample-cta-title { font-size: var(--text-lg); }
    .sample-cta-actions .btn { flex: 1 1 100%; }
}
/* Tablet: päť stĺpcov by kontakty zalomilo po znakoch — ukážka vynechá Činnosť ako náhľad na úvode (odbor je vo filtri a čipe). */
@media (min-width: 40rem) and (max-width: 63.99rem) {
    .sample-table .table th:nth-child(4), .sample-table .table td:nth-child(4) { display: none; }
    .sample-table .contact-mini-value { white-space: nowrap; }
}
.sample-no-rows { padding: var(--space-6); color: var(--text-muted); }

/* ------------------------------------------------------------------ vyradenie /vyradenie */
/* Formulár žiadosti je hlavná akcia: karta vľavo (na mobile hneď pod nadpisom), vedľa kto sme, zdroje a robot ako text
   oddelený čiarami (iná rodina než karta). Mraky web-text; text na ploche stránky nikdy v --text-subtle. */

.optout-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); padding-bottom: var(--space-16); }
/* Stĺpce mriežky nesmú rásť podľa najdlhšieho riadku kódu — blok kódu sa posúva vo vnútri, stránka nie. */
.optout-layout > *, .optout-info > section { min-width: 0; }
@media (min-width: 64rem) {
    .optout-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: start; }
}

.optout-card {
    position: relative; display: grid; gap: var(--space-6); padding: var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-xs);
}
@media (min-width: 48rem) {
    .optout-card { padding: var(--space-8); }
}
.optout-card-title { font-size: var(--text-xl); font-weight: var(--weight-heavy); }

.optout-steps { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; color: var(--text-muted); font-size: var(--text-sm); }
.optout-steps li { display: flex; align-items: baseline; gap: var(--space-3); }
.optout-step-no {
    display: inline-grid; flex: none; place-items: center; width: var(--chip-height); height: var(--chip-height); border-radius: var(--radius-full);
    background: var(--accent-soft); color: var(--accent-soft-text); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
}

.optout-form { gap: var(--space-6); }
.optout-kinds { margin-top: var(--space-2); }
@media (min-width: 40rem) {
    .optout-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.optout-form .checkbox { font-size: var(--text-sm); }
.optout-form .checkbox small { margin-top: var(--space-1); color: var(--text-muted); }
.optout-submit { display: grid; gap: var(--space-3); justify-items: start; padding-top: var(--space-2); }
@media (max-width: 39.99rem) {
    .optout-submit .btn { width: 100%; }
}
/* Skryté pole pre roboty: mimo obrazovky (nie display: none — to roboty rozpoznajú), čítačke skryté cez aria-hidden. */
.optout-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.optout-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.optout-info > section { display: grid; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.optout-info > section:first-child { padding-top: 0; border-top: 0; }
@media (min-width: 64rem) {
    .optout-info > section:first-child { padding-top: var(--space-6); border-top: 1px solid var(--border); }
}
.optout-info-title { font-size: var(--text-lg); font-weight: var(--weight-heavy); line-height: var(--leading-tight); }
.optout-info p { max-width: var(--measure); color: var(--text-muted); }
.optout-info p strong { color: var(--text); }
.optout-robot { scroll-margin-top: calc(var(--topbar-height) + var(--space-6)); }
.optout-facts { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.optout-facts li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--text); font-size: var(--text-sm); }
.optout-facts .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); margin-top: 2px; color: var(--accent-text); }
.optout-info code { font-family: var(--font-mono); overflow-wrap: anywhere; }
.optout-code {
    margin: 0; padding: var(--space-3) var(--space-4); overflow-x: auto;
    border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-2);
    color: var(--text); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-normal);
}
.optout-info .optout-note { font-size: var(--text-sm); }

/* Kroky po odoslaní a odkaz z e-mailu: ikona stavu vedľa nadpisu, zhrnutie žiadosti, akcie. */
.optout-state { padding-bottom: var(--space-16); }
.optout-state-title { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.optout-state-icon {
    display: inline-grid; flex: none; place-items: center; width: var(--icon-2xl); height: var(--icon-2xl);
    border-radius: var(--radius-card); background: var(--accent-soft); color: var(--accent-soft-text);
}
.optout-state-icon .icon { width: var(--icon-md); height: var(--icon-md); }
.optout-state-icon.is-alert { background: var(--warning-soft); color: var(--warning-text); }
.optout-summary {
    display: grid; gap: var(--space-3); max-width: var(--measure); margin: var(--space-6) 0 0; padding: var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface);
}
.optout-summary div { display: grid; gap: var(--space-1); }
.optout-summary dt { color: var(--text-muted); font-size: var(--text-sm); }
.optout-summary dd { margin: 0; overflow-wrap: anywhere; }
.optout-state-note { margin-top: var(--space-4); max-width: var(--measure); color: var(--text-muted); font-size: var(--text-sm); }
/* Druh bez voľby po odoslaní: okraj všetkých volieb v chybovej farbe (chyba je aj textom pod nimi). */
.optout-form .is-invalid .segment span { border-color: var(--danger); }
/* Kód v bloku nie je štítok: bez vnútorného odsadenia a plochy (inak by prvý riadok odskočil). */
.optout-code code { padding: 0; border: 0; background: none; font-size: inherit; }