/* ============================================
   JOZEF PITOŇÁK — kandidát na starostu obce Rakúsy
   Dizajn v2 — tmavý editorial (motív Bývaj reality / Devilpage)

   ZÁMERNE INÉ ROZLOŽENIE než ostatné kampaňové weby:
   - celoplošné hero, nadpis VYCENTROVANÝ (nie split s portrétom vpravo)
   - serif s kurzívovým akcentom v druhej farbe
   - vlasové linky namiesto kariet s tieňmi
   - číslovaná mriežka 01–04
   - plávajúci spodný dock namiesto klasickej hlavičky
   ============================================ */

:root {
    /* SVETLÁ paleta — papierová, nie biela a nie čierna.
       Klient výslovne nechcel tmavý ani čierny web. */
    --paper:       #FAF7F1;   /* hlavné pozadie, teplá bielo-krémová */
    --paper-2:     #F1ECE3;   /* striedavá sekcia */
    --paper-3:     #E9E3D8;   /* najtmavšia svetlá plocha */

    --hair:        rgba(26, 24, 20, 0.14);   /* vlasová linka */
    --hair-strong: rgba(26, 24, 20, 0.28);

    /* Bronzový akcent v dvoch hodnotách — svetlý sa NESMIE použiť na text */
    /* TEXT na papieri. Pôvodné #8A5A0B vychádzalo v prepočte 4.63:1 na
       najtmavšom papieri, ale NAMERANÉ bolo 4.14 — tenký serif pri malých
       stupňoch stráca antialiasingom. Stmavené na #7A4F08 = rezerva. */
    --accent:      #7A4F08;   /* 6.66 / 6.05 / 5.58 : 1 */
    --accent-fill: #C08A2E;   /* len výplne a linky; text na ňom = --ink (5.84:1) */
    --accent-soft: rgba(192, 138, 46, 0.12);

    --ink:         #1A1814;   /* hlavný text, teplá tmavohnedá (NIE čierna) */
    --ink-2:       #4A443B;   /* sekundárny text, 9.00:1 */
    --ink-3:       #635C50;   /* tlmený text, 6.18:1 */

    --t:           0.32s cubic-bezier(0.4, 0, 0.2, 1);
    --wrap:        1280px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Atribút hidden musí prebiť akýkoľvek display z tried (flex/grid ho inak
   prehluší a prvok ostane viditeľný). Bez tohto svietili dots oboch období naraz. */
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    /* Poistka proti cudzej ploche pod pätičkou MUSÍ mať farbu PÄTIČKY, nie stránky.
       Pätička je --paper-3, takže svetlejší --paper tu vytváral na iOS pri spodnom
       odskoku svetlý pruh pod ňou. Pozadie stránky sa presunulo na <main>. */
    background: #E9E3D8;   /* = --paper-3, farba pätičky */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink);
    /* NIE --paper: spodný odskok na iOS sa kreslí podľa BODY, nie podľa HTML.
       Sekcie sú vnútri <main>, ktorý má vlastné papierové pozadie, takže táto
       farba je vidieť len v oblasti odskoku. */
    background: #E9E3D8;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    /* miesto pre spodný dock sa pridáva až v mobilnom breakpointe */
}

main { background: var(--paper); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100000;
    background: var(--accent-fill); color: var(--ink);
    padding: 0.9rem 1.4rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 2rem; }

h1, h2, h3, h4 {
    /* POZOR — NEPOUŽÍVAŤ Cormorant Garamond na slovenský text.
       Má zle umiestnené stredoeurópske akcenty: dĺžeň nad „ú" a mäkčeň nad „ž"
       plávajú vysoko a odtrhnuté od písmena („zaslúžia", „Pitoňák" vyzerajú
       rozbito). Overené vizuálnym porovnaním 6 serifov pri 3× DPR.
       Slovenčinu zvládajú: Spectral, EB Garamond, Source Serif 4, Lora,
       Playfair Display (ten však používa hrdynateplicu.sk). */
    font-family: 'Spectral', 'EB Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: -0.005em;
}
em.ac { font-style: italic; color: var(--accent); }

/* --- Eyebrow s linkou (podpis tohto štýlu) --- */
.eyebrow {
    display: flex; align-items: center; gap: 0.9rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.8rem;
}
.eyebrow.ctr { justify-content: center; }

.h-sec  { font-size: clamp(2.3rem, 5.2vw, 3.9rem); margin-bottom: 1.2rem; }
.lead   { font-size: 1.06rem; color: var(--ink-2); max-width: 64ch; }
.lead.ctr { margin-left: auto; margin-right: auto; text-align: center; }

.sec { padding: 7rem 0; }
/* Kotvy (#skola, #priority...) musia skončiť POD fixnou lištou, nie pod ňou
   schované. Bez toho skok z docku zakryje nadpis sekcie. */
section[id], main[id] { scroll-margin-top: 104px; }
.sec-line { border-top: 1px solid var(--hair); }
.ctr { text-align: center; }

/* --- Pill tlačidlá --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 52px; padding: 0.85rem 1.8rem;
    border-radius: 999px;
    border: 1px solid var(--hair-strong);
    background: transparent; color: var(--ink);
    font-family: 'Inter', sans-serif; font-size: 0.92rem; font-weight: 500;
    text-decoration: none; cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.btn:hover { background: rgba(26,24,20,0.05); border-color: var(--ink); }
.btn-gold { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--ink); font-weight: 600; }
.btn-gold:hover { background: #D09B3E; border-color: #D09B3E; color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.btn-row.ctr { justify-content: center; }

/* ============================================
   HERO — celoplošné, vycentrované
   ============================================ */
.hero {
    position: relative;
    min-height: 92vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 7rem 0 5rem;
    overflow: hidden;
    /* Kým klient nedodá fotku obce, podklad robí gradient + jemná zrnitosť.
       Po dodaní fotky: pridať url(...) ako prvú vrstvu background-image. */
    background:
        radial-gradient(ellipse 72% 58% at 50% 14%, rgba(192, 138, 46, 0.16) 0%, transparent 64%),
        radial-gradient(ellipse 58% 52% at 18% 88%, rgba(203, 196, 182, 0.55) 0%, transparent 62%),
        linear-gradient(172deg, #FDFBF7 0%, #F2EDE4 52%, #EBE5DA 100%);
}
.hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.35; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.hero > .wrap { position: relative; z-index: 1; }

.hero h1 {
    font-size: clamp(2.9rem, 8.2vw, 6.2rem);
    line-height: 1.14;          /* miesto pre slovenskú diakritiku */
    margin-bottom: 2rem;
}
.hero h1 span { display: block; }
.hero-sub {
    font-size: clamp(1rem, 2vw, 1.18rem);
    color: var(--ink-2);
    max-width: 52ch; margin: 0 auto 2.6rem;
}
.hero-scroll {
    display: flex; align-items: center; justify-content: center; gap: 0.9rem;
    margin-top: 4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--ink-2);   /* --ink-3 dával nad zosvetleným videom 4,38 (prah 4,5) */
}

/* --- Pás čísel, delený vlasovými linkami --- */
.band { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.band-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.band-item { padding: 3rem 1.5rem; text-align: center; }
.band-item + .band-item { border-left: 1px solid var(--hair); }
.band-item b {
    display: block;
    font-family: 'Spectral', 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    line-height: 1.25;          /* miesto pre diakritiku (€, číslice s háčikmi) */
    color: var(--ink);
}
.band-item span {
    display: block; margin-top: 0.7rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3);
}

/* --- Číslovaná mriežka s vlasovými linkami --- */
.cells {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--hair);
}
.cells.c3 { grid-template-columns: repeat(3, 1fr); }
.cell { padding: 2.6rem 2rem 3rem; border-right: 1px solid var(--hair); }
.cell:last-child { border-right: none; }
.cell h3 { font-size: 1.5rem; margin-bottom: 0.9rem; }
.cell p { font-size: 0.95rem; color: var(--ink-2); }

/* --- Split: nadpis vľavo, tlačidlo vpravo --- */
.split-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 2rem; margin-bottom: 3.5rem; flex-wrap: wrap;
}

/* --- Dvojstĺpec --- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }

/* --- Zoznam s pomlčkou --- */
.dash { list-style: none; }
.dash li {
    position: relative; padding-left: 2.2rem;
    padding-bottom: 1.1rem; margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--hair);
    font-size: 1rem; color: var(--ink-2);
}
.dash li:last-child { border-bottom: none; margin-bottom: 0; }
.dash li::before {
    content: ''; position: absolute; left: 2px; top: 0.66em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.dash li strong { color: var(--ink); font-weight: 600; }

/* --- Veľký citát --- */
.quote {
    font-family: 'Spectral', 'EB Garamond', Georgia, serif;
    font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    font-style: italic; line-height: 1.42;
    color: var(--ink);
}
.quote-who {
    margin-top: 1.8rem;
    font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}

/* --- Slot pre fotku --- */
.photo {
    position: relative; aspect-ratio: 4 / 5;
    border: 1px solid var(--hair);
    background:
        repeating-linear-gradient(45deg, rgba(26,24,20,0.035) 0 14px, transparent 14px 28px),
        var(--paper-2);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem; text-align: center;
    color: var(--ink-3);
    font-family: 'Inter', sans-serif; font-size: 0.82rem; line-height: 1.6;
}
.photo.wide { aspect-ratio: 16 / 9; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- Upozornenie (draft) --- */
.notice {
    border: 1px solid rgba(192, 138, 46, 0.45);
    background: rgba(192, 138, 46, 0.10);
    padding: 1.3rem 1.5rem;
    font-size: 0.93rem; color: var(--ink-2);
    border-radius: 4px;
}
.notice strong { color: var(--accent); }

/* --- Zdrojová poznámka --- */
.src { font-size: 0.83rem; color: var(--ink-3); border-left: 1px solid var(--hair-strong); padding-left: 1.1rem; }

/* --- Tabuľka --- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--hair); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 620px; }
table.tbl th {
    padding: 1.2rem 1.3rem; text-align: left;
    font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
    border-bottom: 1px solid var(--hair);
}
table.tbl td { padding: 1.15rem 1.3rem; border-bottom: 1px solid var(--hair); font-size: 0.97rem; color: var(--ink-2); }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tr.me td { background: rgba(192, 138, 46, 0.16); color: var(--ink); font-weight: 600; }

/* --- FAQ --- */
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
    padding: 1.7rem 0; cursor: pointer; list-style: none;
    font-family: 'Spectral', 'EB Garamond', Georgia, serif;
    font-size: 1.4rem; color: var(--ink); min-height: 60px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-size: 1.5rem; flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq .body { padding: 0 0 1.8rem; color: var(--ink-2); font-size: 0.98rem; max-width: 72ch; }

/* ============================================
   HORNÁ LIŠTA — len značka + menu pill
   ============================================ */
.top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    /* Hlavička nemá pozadie (želanie klienta), takže by jej pilulky pri
       skrolovaní prekrývali text. Pri pohybe nadol sa preto schovajú.
       ⚠️ Transform NESMIE byť na `.top` — spravil by z nej containing block
       pre fixné potomky a mobilný dock (je vnútri nej) by zmizol spolu s ňou.
       Preto sa hýbu samotné pilulky. */
    transition: padding var(--t);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 2rem;
    transition: background var(--t), padding var(--t);
}
/* Po scrolle ŽIADNE pozadie pod hlavičkou — značka, Menu aj dock majú
   vlastnú nepriehľadnú plochu, to stačí. (Toto pravidlo predtým aj tak
   nikdy nefungovalo, lebo JS nasadzoval triedu na neexistujúci `.nav`.) */
.top.scrolled {
    padding: 1rem 2rem;
}
/* Hlavička sa NIKDY neschováva — značka aj Menu ostávajú fixnuté na každej
   šírke (želanie klienta). Vedomý kompromis: hlavička nemá vlastné pozadie,
   takže text, ktorý pri skrolovaní prejde pod nepriehľadnými pilulkami,
   je nimi prekrytý. Trieda `hidden-up` sa už nepoužíva. */


/* Hlavička má tri časti a majú pôsobiť ako jeden systém: značka vľavo,
   dock v strede a akcie vpravo sedia na rovnakej „sklenenej" doske. */
.brand {
    display: flex; flex-direction: column; text-decoration: none; min-width: 0;
    padding: 0.5rem 1.1rem 0.55rem;
    border-radius: 22px;
    border: 1px solid var(--hair-strong);
    background: var(--paper);
    box-shadow: 0 14px 40px rgba(26, 24, 20, 0.16);
    transition: box-shadow var(--t);
}
.brand b {
    font-family: 'Spectral', 'EB Garamond', Georgia, serif;
    font-size: 1.32rem; font-weight: 500; color: var(--ink); letter-spacing: 0.01em;
    line-height: 1.35;          /* inak sa oreže mäkčeň v „Pitoňák" */
}
/* POZOR: pôvodne `.brand span` — potomkovský selektor chytal aj volebné číslo
   a pod 400 px ho skrýval spolu s menom. Podtitul má odvtedy vlastnú triedu. */
.brand-sub {
    font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3);
    margin-top: 0.15rem; white-space: nowrap;
}
/* Rozloženie hlavičky: vľavo značka + Menu, vpravo dock.
   Obe skupiny tak majú podobnú šírku. Na mobile je dock plávajúci dole,
   takže Menu sa odsunie doprava (burger vpravo hore = platformové pravidlo). */
.top-actions { display: flex; gap: 0.75rem; align-items: center; min-width: 0; margin-left: auto; }
.top .nav-toggle { flex: none; }

@media (max-width: 980px) {
    .top .nav-toggle { margin-left: auto; }
}
.pill-btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    min-height: 46px; padding: 0.6rem 1.3rem;
    border-radius: 999px; border: 1px solid var(--hair-strong);
    background: var(--paper);
    box-shadow: 0 14px 40px rgba(26, 24, 20, 0.16);
    color: var(--ink); cursor: pointer; text-decoration: none;
    font-family: 'Inter', sans-serif; font-size: 0.86rem; font-weight: 500;
    transition: background var(--t), border-color var(--t);
}
.pill-btn:hover { background: rgba(26,24,20,0.06); border-color: var(--ink); }

/* ============================================
   PLÁVAJÚCI SPODNÝ DOCK
   ============================================ */
.dock {
    /* Rovnaký dizajnový prvok v oboch režimoch — mení sa LEN umiestnenie:
       desktop = statický v hornej lište, mobil = plávajúci dole.
       Vzhľad (pill, ikony + popisky, aktívna položka) ostáva rovnaký. */
    display: flex;
    z-index: 880;
    align-items: center; gap: 0.25rem;
    padding: 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--hair-strong);
    background: var(--paper);        /* NEPRIEHĽADNÉ — nad videom pôsobilo sklo špinavo */
    box-shadow: 0 14px 40px rgba(26, 24, 20, 0.16);
    max-width: calc(100vw - 2rem);
    overflow-x: auto;
    scrollbar-width: none;
}
.dock::-webkit-scrollbar { display: none; }
.dock a, .dock button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.25rem;
    min-width: 76px; min-height: 58px; padding: 0.5rem 0.7rem;
    border-radius: 999px; border: none; background: transparent;
    color: var(--ink-2); text-decoration: none; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 0.64rem; font-weight: 500;
    letter-spacing: 0.04em;
    transition: background var(--t), color var(--t);
    flex: none;
}
.dock svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.dock a:hover, .dock button:hover { background: rgba(26,24,20,0.06); color: var(--ink); }
/* Aktívna položka: biela ikona aj popisok na tmavom bronze.
   POZOR na výplň — biela na svetlom `--accent-fill` (#C08A2E) dáva len 3.04:1
   a popisok má ~10 px, takže by to spadlo pod AA. Preto tmavší `--accent`
   (#7A4F08) = 7.12:1. Nie je to len estetika, je to podmienka čitateľnosti. */
.dock a.active {
    background: var(--accent);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 10px rgba(122,79,8,0.35);
}
.dock a.active svg { stroke: #FFFFFF; }
.dock a.active:hover { background: #6A4407; color: #FFFFFF; }

/* --- Mobilný drawer: VŽDY sprava (platformové pravidlo) --- */
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(88vw, 380px);
    background: var(--paper-2);
    border-left: 1px solid var(--hair);
    z-index: 1000;
    transform: translateX(102%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
    padding: 6rem 1.6rem 2rem;
    overflow-y: auto;
    visibility: hidden;
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer-head {
    position: absolute; top: 1.5rem; left: 1.6rem; right: 1.6rem;
    display: flex; align-items: center; justify-content: space-between;
}
/* vlastná farba — inak by prvok zdedil tmavý text na tmavom podklade */
.drawer-brand { font-family: 'Spectral', 'EB Garamond', Georgia, serif; font-size: 1.2rem; color: var(--ink); }
.drawer-close {
    width: 46px; height: 46px; border-radius: 999px;
    border: 1px solid var(--hair-strong); background: transparent;
    color: var(--ink); cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.drawer a {
    display: block; padding: 1.15rem 0;
    border-bottom: 1px solid var(--hair);
    color: var(--ink); text-decoration: none;
    font-family: 'Spectral', 'EB Garamond', Georgia, serif; font-size: 1.5rem;
    transition: color var(--t), padding-left var(--t);
}
.drawer a:hover, .drawer a.active { color: var(--accent); padding-left: 0.5rem; }

.backdrop {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(26, 24, 20, 0.45);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--t), visibility var(--t);
}
.backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; }

/* ============================================
   FOOTER
   ============================================ */
.footer { border-top: 1px solid var(--hair); padding: 5rem 0 2.5rem; background: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; margin-bottom: 3.5rem; }
.footer-brand { font-family: 'Spectral', 'EB Garamond', Georgia, serif; font-size: 1.8rem; margin-bottom: 1rem; }
.footer-desc { font-size: 0.93rem; color: var(--ink-2); max-width: 40ch; }
.footer h4 {
    font-family: 'Inter', sans-serif; font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent);
    margin-bottom: 1.3rem;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.75rem; }
.footer-links a { font-size: 0.93rem; color: var(--ink-2); text-decoration: none; transition: color var(--t); }
.footer-links a:hover { color: var(--accent); }

.footer-bottom {
    border-top: 1px solid var(--hair); padding-top: 1.8rem;
    text-align: center; font-size: 0.83rem; color: var(--ink-3);
}
/* § 15 zák. č. 181/2014 Z. z. */
.footer .footer-legal {
    text-align: center; padding-top: 1.1rem;
    font-size: 0.79rem; line-height: 1.8; color: var(--ink-3);
}
.footer-legal span { display: block; }
.footer-legal strong { color: var(--ink-2); }
/* Odkaz v päte mal výšku 15 px — príliš malý dotykový cieľ. */
.footer-credit { text-align: center; padding-top: 0.4rem; }
.footer-credit a { display: inline-block; padding: 0.7rem 0.9rem; }
.footer-credit a { font-size: 0.79rem; color: var(--ink-3); text-decoration: none; }
.footer-credit a:hover { color: var(--accent); }

/* ============================================
   RESPONZÍVNE
   ============================================ */
/* --- Prepnutie navigácie: hore (desktop) ↔ spodný dock (mobil) --- */
@media (max-width: 980px) {
    /* MOBIL — ten istý dock, len plávajúci dole */
    .dock {
        position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
        max-width: calc(100vw - 2rem);
        background: var(--paper);
        box-shadow: 0 14px 40px rgba(26, 24, 20, 0.16);
    }
    /* Miesto pre plávajúci dock dať do FOOTRA, nie na body.
       Na body by vzniklo 104 px pod footerom a `scrollHeight` by prestal
       sedieť s koncom footra ([[feedback_footer_white_space]]) — aj keď je
       farba rovnaká, je to zbytočná prázdna plocha na konci stránky. */
    body { padding-bottom: 0; }
    .footer { padding-bottom: calc(2.5rem + 92px); }
    .footer .footer-legal { padding-bottom: 12px; }
}
@media (max-width: 620px) {
    /* Hore by sa „Napíšte mi" + „Menu" + značka nezmestili a lámali by sa.
       Kontakt je dostupný v spodnom docku, takže hore stačí Menu. */
    .top-actions .pill-btn:not(.nav-toggle) { display: none; }
    .brand b { font-size: 1.12rem; white-space: nowrap; }
    .brand-sub { font-size: 0.55rem; letter-spacing: 0.16em; }
}
@media (min-width: 981px) {
    /* DESKTOP — dock je v hornej lište vpravo, ako samostatná doska.
       POZOR: tu bolo `rgba(26,24,20,0.04)`, čo je 4 % tmavá blana, nie pozadie.
       Nad videom to vyzeralo priehľadne a stred lišty pôsobil prázdno.
       Musí byť rovnaká NEPRIEHĽADNÁ plocha ako značka vľavo. */
    .dock {
        background: var(--paper);
        box-shadow: 0 14px 40px rgba(26, 24, 20, 0.16);
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    /* „Menu" pill NIE JE zbytočný: dock vedie len na sekcie domovskej stránky,
       podstránky (Voľby, Kampaň, Ochrana údajov) sú dostupné iba cezeň.
       Keď bol skrytý, na desktope sa k nim dalo dostať len cez pätičku. */
    .nav-toggle { display: inline-flex; }
}

@media (max-width: 1060px) {
    .cells { grid-template-columns: repeat(2, 1fr); }
    .cell:nth-child(2n) { border-right: none; }
    .cell:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
    .band-grid { grid-template-columns: repeat(3, 1fr); }
    .band-item:nth-child(4) { border-left: none; }
    .band-item:nth-child(n+4) { border-top: 1px solid var(--hair); }
    .two { grid-template-columns: 1fr; gap: 3rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    body { font-size: 16px; }
    .wrap { padding: 0 1.4rem; }
    .top { padding: 1.1rem 1.4rem; }
    .sec { padding: 4.5rem 0; }
    section[id], main[id] { scroll-margin-top: 84px; }
    .hero { min-height: 88vh; padding: 6rem 0 4rem; }
    .cells, .cells.c3 { grid-template-columns: 1fr; }
    .cell { border-right: none; border-bottom: 1px solid var(--hair); }
    .cell:last-child { border-bottom: none; }
    .band-grid { grid-template-columns: repeat(2, 1fr); }
    .band-item { padding: 2rem 1rem; border-left: none !important; border-top: 1px solid var(--hair); }
    .band-item:nth-child(-n+2) { border-top: none; }
    .band-item:nth-child(odd) { border-right: 1px solid var(--hair); }
    .btn { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; }
    /* Dock sa MUSÍ zmestiť do šírky obrazovky. Predtým mal pevnú šírku položky
       (62 px) a pri 6 položkách potreboval 372 px, takže preteká už od 430 px
       a vodorovne sa posúval — to je tá deformácia. Teraz si položky delia
       dostupné miesto rovnomerne. */
    .dock { padding: 0.35rem; gap: 0; width: calc(100vw - 1.6rem); }
    .dock a, .dock button {
        flex: 1 1 0; min-width: 0; padding: 0.45rem 0.2rem; min-height: 52px;
        font-size: 0.55rem; letter-spacing: 0.01em; gap: 0.2rem;
    }
    .dock svg { width: 17px; height: 17px; }
    .dock-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 400px) {
    .wrap { padding: 0 1rem; }
    .top { padding: 0.9rem 1rem; }
    .brand-sub { display: none; }
    .band-grid { grid-template-columns: 1fr; }
    .band-item { border-right: none !important; }
    .dock { bottom: 0.8rem; width: calc(100vw - 1.2rem); }
    .dock a, .dock button { min-height: 48px; padding: 0.5rem 0.2rem; }
    .dock svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   HERO S VIDEOM — štyri vertikálne zábery ako pozadie (2026-09-16).
   Sú to REÁLNE klipy z kampane klienta (Facebook), nie atrapy.
   ============================================================ */
.hero--video { position: relative; }

.vh-bg {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* 4 zábery, nie 5 — sú tak väčšie */
    z-index: 0;
}
.vh-item { width: 100%; height: 100%; object-fit: cover; display: block; }
.vh-scrim {
    position: absolute; inset: 0; z-index: 1;
    /* DVE vrstvy na jednom celoplošnom prvku:
       1. mäkké rozjasnenie v strede, aby mal nadpis pod sebou istotu,
       2. jemný zvislý závoj po celej ploche.
       ⚠️ Toto NESMIE byť na `.wrap::before` — ten má šírku 1130 px a radiálny
       prechod sa na jeho okrajoch useká. Namerané: skok jasu 16 a 15 bodov
       na x=154 a x=1284, čo boli viditeľné zvislé čiary. Celoplošný prvok
       hrany nemá, prechod stihne dobehnúť do nuly ešte pred okrajom obrazovky. */
    background:
        radial-gradient(ellipse 49% 72% at 50% 42%,
            rgba(250,247,241,0.66) 0%,
            rgba(250,247,241,0.55) 34%,
            rgba(250,247,241,0.26) 68%,
            rgba(250,247,241,0) 100%),
        linear-gradient(to bottom,
            rgba(250,247,241,0.30) 0%, rgba(250,247,241,0.40) 45%, rgba(250,247,241,0.62) 100%);
}
.hero--video > .wrap { position: relative; z-index: 2; }


@media (max-width: 860px) {
    /* Na mobile 2 hore a 2 dole (želanie klienta). Toto pravidlo pri zlučovaní
       variant.css do hlavného súboru vypadlo — bez neho boli 4 stĺpce vedľa seba. */
    .vh-bg { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .vh-item { display: none; }
    .vh-bg { background: var(--paper-2); }
}

/* --- Claim kampane --- */
.claim {
    font-family: 'Spectral', 'EB Garamond', Georgia, serif;
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 1.1rem;
}
.claim.ctr { text-align: center; }

/* ============================================================
   ODPOČET — listovanie v kartách („brožúra")
   Bez JS sa zobrazia VŠETKY karty pod sebou a ovládanie sa skryje,
   takže obsah je dostupný vždy. JS pridá .is-js a zapne listovanie.
   ============================================================ */
.ok-deck { border: 1px solid var(--hair); background: var(--paper); }

/* --- prepínač období ---
   Bez JS sa nedá prepínať, tak sa ani nezobrazí — obe obdobia sú vtedy
   vypísané pod sebou aj s vlastnou poznámkou. */
.ok-chapters { display: none; grid-template-columns: 1fr 1fr; }
.is-js .ok-chapters { display: grid; }
.ok-chapter {
    appearance: none; border: 0; cursor: pointer;
    background: var(--paper-2);
    padding: 1.2rem 1.4rem;
    font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 600;
    letter-spacing: 0.06em; color: var(--ink-3);
    border-bottom: 1px solid var(--hair);
    transition: background var(--t), color var(--t);
    min-height: 60px;
}
.ok-chapter + .ok-chapter { border-left: 1px solid var(--hair); }
.ok-chapter span { display: block; font-weight: 400; font-size: 0.74rem; letter-spacing: 0.12em; margin-top: 0.25rem; }
.ok-chapter:hover { background: var(--paper-3); color: var(--ink-2); }
.ok-chapter.is-on { background: var(--paper); color: var(--ink); border-bottom-color: transparent; }
.ok-chapter.is-on span { color: var(--accent); }

/* --- poznámka k obdobiu --- */
.ok-note {
    padding: 1.15rem 1.6rem;
    border-bottom: 1px solid var(--hair);
    background: rgba(192, 138, 46, 0.07);
    font-size: 0.88rem; line-height: 1.65; color: var(--ink-2);
}
.ok-note strong { color: var(--accent); }

/* --- karty --- */
.ok-stage { position: relative; }
.ok-card { padding: 2.8rem 2.6rem 2.4rem; }
.is-js .ok-card { animation: okIn 0.34s cubic-bezier(0.4, 0, 0.2, 1) both; }
.ok-card + .ok-card { border-top: 1px solid var(--hair); }   /* platí len bez JS */
.is-js .ok-card + .ok-card { border-top: 0; }
.ok-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

@keyframes okIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.ok-count {
    font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
    margin-bottom: 1rem;
}
.ok-count b { font-weight: 600; color: var(--accent); font-size: 0.86rem; }
.ok-title {
    font-family: 'Spectral', 'EB Garamond', Georgia, serif;
    font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    line-height: 1.15; color: var(--ink); margin-bottom: 0.7rem;
}
.ok-perex { color: var(--ink-2); font-size: 1rem; margin-bottom: 2rem; max-width: 60ch; }

.ok-list { list-style: none; columns: 2; column-gap: 3rem; }
.ok-list li {
    break-inside: avoid; -webkit-column-break-inside: avoid;
    position: relative; padding: 0 0 0.95rem 1.5rem; margin-bottom: 0.95rem;
    border-bottom: 1px solid var(--hair);
    font-size: 0.95rem; line-height: 1.6; color: var(--ink-2);
}
.ok-list li::before {
    content: ''; position: absolute; left: 2px; top: 0.6em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--accent-fill);
}
.ok-sum {
    display: block; margin-top: 0.35rem;
    font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 600;
    letter-spacing: 0.02em; color: var(--accent);
}
.ok-n {
    margin-top: 1.6rem; font-size: 0.78rem; color: var(--ink-3);
    font-family: 'Inter', sans-serif; letter-spacing: 0.04em;
}

/* --- ovládacia lišta --- */
.ok-bar {
    display: none;                      /* bez JS sa nelistuje */
    grid-template-columns: auto 1fr auto;
    align-items: center; gap: 1rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--hair);
    background: var(--paper-2);
}
.is-js .ok-bar { display: grid; }

.ok-arrow {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 48px; padding: 0.6rem 1.1rem;
    border: 1px solid var(--hair-strong); border-radius: 999px;
    background: var(--paper); color: var(--ink);
    font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 500;
    transition: background var(--t), border-color var(--t), opacity var(--t);
}
.ok-arrow:hover:not(:disabled) { background: var(--paper-3); border-color: var(--ink); }
.ok-arrow:disabled { opacity: 0.35; cursor: default; }
.ok-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ok-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.ok-dot {
    /* Bodka je malá, ale dotykový cieľ musí mať aspoň 44 px (WCAG 2.5.8).
       Preto veľké priehľadné tlačidlo a bodka až v ::after. */
    appearance: none; cursor: pointer; padding: 0;
    width: 44px; height: 44px; border: 0; background: none;
    position: relative;
}
.ok-dot::after {
    content: ''; position: absolute; inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hair-strong); transition: background var(--t), width var(--t);
}
.ok-dot:hover::after { background: var(--ink-3); }
.ok-dot[aria-current="true"]::after { background: var(--accent-fill); width: 22px; border-radius: 999px; }

.ok-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1060px) {
    .ok-list { columns: 1; }
}

@media (max-width: 720px) {
    .ok-card { padding: 2rem 1.4rem 1.8rem; }
    .ok-note { padding: 1rem 1.4rem; font-size: 0.85rem; }
    .ok-chapter { padding: 1rem 0.8rem; font-size: 0.78rem; }
    .ok-bar { padding: 0.9rem 1rem; gap: 0.6rem; }
    .ok-arrow span { display: none; }              /* na mobile ostanú len šípky */
    .ok-arrow { padding: 0.6rem 0.9rem; }
    .ok-dot { width: 44px; height: 44px; }
}

@media (max-width: 400px) {
    .ok-card { padding: 1.6rem 1rem 1.5rem; }
    .ok-dot { width: 40px; height: 44px; }
    .ok-dot::after { width: 7px; height: 7px; }
    .ok-dot[aria-current="true"]::after { width: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .is-js .ok-card { animation: none; }
}

/* ============================================================
   VOLEBNÉ ČÍSLO — „zakrúžkovaná trojka"
   Na hlasovacom lístku volič číslo kandidáta ZAKRÚŽKUJE, tak to aj
   vyzerá: pero okolo čísla. Mierna elipsa a náklon, aby to pôsobilo
   dopísané rukou, nie ako ikonka. Je to dekoratívny prvok nad textom,
   preto má vlastný aria-label a číslo samo je súčasťou prístupného mena.
   ============================================================ */
.ballot {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 2.05em; height: 1.72em;
    margin-left: 0.42em;
    border: 2px solid var(--accent-fill);
    border-radius: 50%;
    transform: rotate(-7deg);
    font-family: 'Spectral', 'EB Garamond', Georgia, serif;
    font-weight: 500; font-size: 0.72em; line-height: 1;
    /* Číslica je TMAVÁ, nie bronzová: hlavička leží nad prehrávaným videom,
       takže pozadie sa mení snímok po snímku. Bronz vychádzal 4,66:1 — prešlo,
       ale bez rezervy. Tmavá drží nad 9:1 na každom snímku. Krúžok ostáva bronzový. */
    color: var(--ink);
    letter-spacing: 0;
    /* pero nekreslí rovnomerne — ľahko nerovnaká hrúbka ťahu */
    border-top-width: 1.5px;
    border-left-width: 2.5px;
}
/* Meno sa NESMIE skracovať — `overflow:hidden` + `min-width:0` tu spôsobili,
   že flex zmrštil celú značku na nulovú šírku a na mobile zmizlo meno aj krúžok.
   Riadok si drží svoju prirodzenú šírku; na úzkych displejoch sa skrýva
   podtitul (.brand span), nie meno. */
.brand-row { display: flex; align-items: center; flex: 0 0 auto; white-space: nowrap; }

/* v pätičke je značka väčšia, krúžok môže byť o kúsok tichší */
.footer-brand .ballot { border-color: var(--accent-fill); }

@media (max-width: 400px) {
    /* značka sa zmenšuje, krúžok musí ostať čitateľný a nesmie tlačiť meno */
    .ballot { margin-left: 0.32em; font-size: 0.78em; }
}

@media (prefers-reduced-motion: no-preference) {
    /* jemné „dokreslenie" pri načítaní — krúžok sa objaví ako dopísaný */
    .top .ballot { animation: ballotIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.35s both; }
}
@keyframes ballotIn {
    from { opacity: 0; transform: rotate(-24deg) scale(0.6); }
    to   { opacity: 1; transform: rotate(-7deg) scale(1); }
}

@media (max-width: 335px) {
    /* Na najužších displejoch (280–335 px) sa krúžok dotýkal tlačidla Menu.
       Namerané: pri 280 px bola medzera −0,9 px. Meno aj krúžok o kúsok menšie. */
    .brand b { font-size: 0.98rem; }
    .ballot { margin-left: 0.3em; font-size: 0.72em; }
}

/* ============================================================
   VIZUÁLNA VRSTVA (2026-09-16)
   Web nemá ani jednu fotku od klienta, takže sa nedá oživiť obrazom.
   Namiesto toho pracujeme s tým, čo papierový editorial ponúka:
   rytmus plôch, textúra, veľké čísla a jemné piktogramy.
   ŽIADNE vymyslené fotky ani ilustrácie ľudí či obce.
   ============================================================ */

/* --- Papierová textúra: veľmi jemné zrno cez celú plochu --- */
body::before {
    content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
    opacity: 0.5;
    background-image:
        repeating-linear-gradient(0deg,   rgba(26,24,20,0.016) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg,  rgba(26,24,20,0.012) 0 1px, transparent 1px 4px);
}
/* obsah musí ostať nad zrnom */
main, .footer { position: relative; z-index: 2; }
/* .top, .dock, .drawer a .backdrop majú vlastnú pozíciu (fixed) a vlastný
   z-index vyššie v súbore — TIE SA NESMÚ PREPISOVAŤ. */

/* --- Rytmus sekcií: striedanie tónov papiera namiesto jednej plochy --- */
.sec.tone { background: var(--paper-2); }
.sec.tone-3 { background: var(--paper-3); }

/* --- Pás čísel: výraznejší, s bronzovou linkou nad číslom --- */
.band { background: var(--paper-2); }
.band-item { position: relative; }
.band-item::before {
    content: ''; position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%);
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent-fill);
}
.band-item b {
    /* „11 mil. €" je najdlhšia hodnota — pri 3.4rem sa € zlomilo na druhý
       riadok a rozhodilo výšku celej päťky. Menší strop + zákaz lámania. */
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    white-space: nowrap;
}

/* --- Karty odpočtu: veľké „duchové" číslo a piktogram témy --- */
.ok-card { position: relative; overflow: hidden; }

.ok-head { display: flex; align-items: center; gap: 0.95rem; margin-bottom: 0.7rem; }
.ok-ico {
    flex: 0 0 auto;
    width: 46px; height: 46px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft);
    border: 1px solid rgba(192, 138, 46, 0.42);
}
.ok-ico svg { width: 23px; height: 23px; stroke: var(--accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ok-head .ok-title { margin-bottom: 0; }

/* --- Číslované bunky: väčšie a s bronzovou linkou (rovnaký jazyk ako pás) --- */
.cell { position: relative; }
.cell::before {
    content: ''; position: absolute; top: 1.6rem; left: 2rem; width: 7px; height: 7px;
    border-radius: 50%; background: var(--accent-fill); opacity: 0;
    transition: opacity var(--t);
}
.cells .cell:hover::before { opacity: 1; }

@media (max-width: 720px) {
    .ok-head { gap: 0.7rem; }
    .ok-ico { width: 38px; height: 38px; border-radius: 11px; }
    .ok-ico svg { width: 19px; height: 19px; }
        .band-item::before { left: 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .cell::before { transition: none; }
}

/* ============================================================
   PÄTIČKA — z holého zoznamu odkazov na záverečnú plochu webu
   Ostáva SVETLÁ: klient výslovne nechcel tmavý ani čierny web.
   Odlíšená je tónom papiera (--paper-3), nie tmou.
   ============================================================ */
.footer { background: var(--paper-3); padding-top: 0; overflow: hidden; }

/* --- Horný pás: odpočet dní do volieb --- */
.footer-cta {
    border-bottom: 1px solid var(--hair);
    padding: 3.2rem 0 3rem;
    margin-bottom: 3.5rem;
}
.footer-cta .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2.5rem; flex-wrap: wrap;
}
.fc-left { display: flex; align-items: baseline; gap: 1.1rem; min-width: 0; }
.fc-num {
    font-family: 'Spectral', 'EB Garamond', Georgia, serif;
    font-size: clamp(3.6rem, 9vw, 6.4rem); font-weight: 400; line-height: 0.9;
    color: var(--accent);
}
.fc-lbl {
    font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
    line-height: 1.7;
}
.fc-lbl b { display: block; color: var(--ink); font-size: 0.95rem; letter-spacing: 0.06em; }
.fc-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* --- Veľký podpis cez celú šírku --- */
.footer-mark {
    /* dolný priestor musí uniesť pretiahnuté „y" — inak pretína linku pod sebou */
    margin: 1rem 0 0.6em;
    font-family: 'Spectral', 'EB Garamond', Georgia, serif;
    font-size: clamp(2.6rem, 11.5vw, 10rem);
    line-height: 0.95; letter-spacing: 0.02em;
    text-align: center; white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(122, 79, 8, 0.34);
    user-select: none;
}

/* --- Stĺpce odkazov: bronzová linka a posun pri prejdení --- */
.footer-links a { display: inline-block; position: relative; }
.footer-links a::after {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
    background: var(--accent-fill); transition: width var(--t);
}
.footer-links a:hover::after { width: 100%; }

.footer-brand { display: flex; align-items: center; }

@media (max-width: 860px) {
    .footer-cta .wrap { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
    .fc-right { width: 100%; }
    .fc-right .btn { width: auto; }
}

@media (max-width: 720px) {
    .footer-cta { padding: 2.4rem 0 2.2rem; margin-bottom: 2.6rem; }
    .fc-left { gap: 0.8rem; }
    /* podpis sa nesmie lámať ani pretiecť — na mobile je menší a bez nowrap */
    .footer-mark { white-space: normal; font-size: clamp(2rem, 13vw, 3.4rem); }
}

@media (prefers-reduced-motion: reduce) {
    .footer-links a::after { transition: none; }
}

/* ============================================================
   PÄTIČKA — pás štyroch ročných období
   Medzi rozcestníkom a veľkým podpisom bola prázdna plocha. Fotografie tam
   robia z pätičky koniec rozprávania, nie zoznam odkazov — a na podstránkach
   (Voľby, Kampaň, Ochrana údajov) sú jediné fotografie, ktoré tam sú.
   Štyri zábery = jar, leto, jeseň, zima. Nie náhodný výber: obec v roku.
   `loading="lazy"` je tu NA MIESTE, na rozdiel od vodorovného pásu v sekcii
   „Rakúsy" — tie dlaždice ležia v normálnom toku, prehliadač o nich vie.
   ============================================================ */
.footer-seasons { margin-bottom: 3.4rem; }
.fs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.fs-grid figure { margin: 0; }
.fs-box {
    display: block; overflow: hidden;
    border: 1px solid var(--hair); background: var(--paper);
}
.fs-box img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fs-grid figure:hover .fs-box img,
.fs-grid figure:focus-within .fs-box img { transform: scale(1.05); }
.fs-grid figcaption {
    margin-top: 0.7rem;
    font-family: 'Inter', sans-serif; font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3);
}

@media (max-width: 720px) {
    /* štyri dlaždice v rade by na mobile mali 80 px — radšej dve a dve */
    .fs-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
    .footer-seasons { margin-bottom: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .fs-box img { transition: none; }
    .fs-grid figure:hover .fs-box img { transform: none; }
}

/* ============================================================
   SPÄŤ HORE — krúžok s prstencom, ktorý ukazuje prejdenú časť stránky
   Skrytý stav má `visibility:hidden` aj `pointer-events:none`,
   inak by neviditeľné tlačidlo chytalo kliky (platformový footgun).
   ============================================================ */
.totop {
    position: fixed; right: 1.6rem; bottom: 1.8rem; z-index: 890;
    width: 58px; height: 58px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 10px 30px rgba(26, 24, 20, 0.20);
    cursor: pointer;
    display: grid; place-items: center;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(14px) scale(0.9);
    transition: opacity var(--t), transform var(--t), visibility var(--t), box-shadow var(--t);
}
.totop.show { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.totop:hover { box-shadow: 0 14px 38px rgba(26, 24, 20, 0.28); }
.totop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* prstenec postupu */
.totop svg.ring { position: absolute; inset: 0; width: 58px; height: 58px; transform: rotate(-90deg); }
.totop .ring-bg   { fill: none; stroke: var(--hair); stroke-width: 2.5; }
.totop .ring-fill { fill: none; stroke: var(--accent-fill); stroke-width: 2.5; stroke-linecap: round;
                    transition: stroke-dashoffset 0.15s linear; }

/* šípka */
.totop .arr { position: relative; width: 19px; height: 19px; stroke: var(--ink); fill: none;
              stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
              transition: transform var(--t); }
.totop:hover .arr { transform: translateY(-2px); }

@media (max-width: 980px) {
    /* nad plávajúcim dokom, aby sa neprekrývali */
    .totop { right: 1.1rem; bottom: 6.2rem; width: 50px; height: 50px; }
    .totop svg.ring { width: 50px; height: 50px; }
}

/* Pätička si už rezervuje miesto pre dock (`padding-bottom: 2.5rem + 92px`),
   takže ďalšie odsadenie na `.footer-legal` by len vyrobilo prázdnu plochu.
   Overené meraním: dock ani tlačidlo „späť hore" § 15 označenie neprekrývajú. */

@media (prefers-reduced-motion: reduce) {
    .totop, .totop .arr, .totop .ring-fill { transition: none; }
}

/* --- Pätička: stĺpce odkazov ako poriadny rozcestník, nie drobný zoznam --- */
.footer h4 {
    position: relative;
    padding-top: 1rem;
    border-top: 1px solid var(--hair-strong);
}
.footer-links li { margin-bottom: 0; }
.footer-links a {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--hair);
    font-family: 'Spectral', 'EB Garamond', Georgia, serif;
    font-size: 1.12rem; color: var(--ink);
    transition: color var(--t), padding-left var(--t);
}
.footer-links a::after {
    content: '›';
    font-family: 'Inter', sans-serif; font-size: 1.15rem; line-height: 1;
    color: var(--accent-fill);
    opacity: 0; transform: translateX(-6px);
    transition: opacity var(--t), transform var(--t);
    position: static; width: auto; height: auto; background: none;
}
.footer-links a:hover { color: var(--accent); padding-left: 0.5rem; }
.footer-links a:hover::after { opacity: 1; transform: none; }
.footer-links li:last-child a { border-bottom: none; }

@media (max-width: 720px) {
    .footer-links a { font-size: 1.05rem; padding: 0.8rem 0; }
    .footer h4 { padding-top: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .footer-links a, .footer-links a::after { transition: none; }
}

/* --- Mobilné menu: rozdelené na sekcie stránky a podstránky --- */
.drawer-lbl {
    margin-top: 1.6rem; margin-bottom: 0.4rem;
    font-family: 'Inter', sans-serif; font-size: 0.64rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent);
}
.drawer-lbl:first-of-type { margin-top: 0.4rem; }

@media (max-width: 339px) {
    /* Až tu je položka užšia než 46 px a popisok sa nezmestí — ostanú ikony.
       390 px (bežný iPhone) si popisky ponechá, tam sa ešte pohodlne zmestia.
       Odkaz je pomenovaný cez aria-label, pre čítačky sa nič nestráca. */
    .dock-lbl { display: none; }
    .dock svg { width: 21px; height: 21px; }
}

/* ============================================
   FOTOGRAFIE
   Pôvod záberov je vedený v dokumentácii projektu, nie tu — CSS sa servuje
   verejne a klient si neželá uvádzať autorov na webe.
   Obrázky sú vo WebP v dvoch veľkostiach, pod ohybom sa načítavajú lenivo.
   ============================================ */

.fig { margin: 0; }
.fig-box {
    position: relative; overflow: hidden;
    border: 1px solid var(--hair);
    background: var(--paper-3);
}
.fig-box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fig figcaption {
    margin-top: 1rem;
    font-family: 'Inter', sans-serif; font-size: 0.82rem; line-height: 1.6;
    color: var(--ink-3);
    border-left: 1px solid var(--hair-strong); padding-left: 1.1rem;
}
.fig figcaption b { color: var(--ink-2); font-weight: 600; }
.fig--wide .fig-box { aspect-ratio: 16 / 9; }
.fig--port .fig-box { aspect-ratio: 3 / 4; }
.fig--tall .fig-box { aspect-ratio: 2 / 3; }

/* Volebné číslo na fotografiách kandidáta.
   Na hlasovacom lístku je pod číslom 3 — číslo si musí volič zapamätať skôr,
   než príde k urne, a fotografia je to jediné, čo si z webu odnesie v hlave.
   Krúžok je ten istý „dokreslený perom" ako pri značke (.ballot): rovnaká
   elipsa, rovnaký sklon, rovnaká nerovnomerná hrúbka ťahu.
   ROZDIEL oproti .ballot: tam je krúžok prázdny, lebo leží na papieri.
   Tu leží na fotografii, kde je pozadie tmavé aj svetlé (oblek vs. košeľa),
   takže potrebuje vlastnú papierovú výplň — inak by číslica na svetlom mieste
   zmizla. Merané z pixelov screenshotu na oboch portrétoch: 18,3:1 a 17,5:1
   (mobil 19,0:1, 280 px pri trojnásobnom DPR 18,5:1). */
.fig-ballot {
    position: absolute; z-index: 2;
    right: 1.1rem; bottom: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 56px;
    background: var(--paper);
    border: 2px solid var(--accent-fill);
    border-top-width: 1.5px; border-left-width: 2.5px;
    border-radius: 50%;
    transform: rotate(-7deg);
    font-family: 'Spectral', 'EB Garamond', Georgia, serif;
    font-weight: 500; font-size: 1.62rem; line-height: 1;
    color: var(--ink);
    /* fotografia pod ním je na okrajoch raz tmavá, raz svetlá — tieň drží
       odznak čitateľný aj nad svetlou plochou */
    box-shadow: 0 2px 12px rgba(26, 24, 20, 0.34);
}
/* Číslica má v serife dlhý dolný oblúk a v elipse opticky klesá — zdvihnutá
   o 1 px, aby sedela v strede krúžku, nie pod ním. */
.fig-ballot span { display: block; transform: translateY(-1px); }

@media (max-width: 720px) {
    /* fotografia je cez celú šírku, odznak sa nesmie roztiahnuť s ňou */
    .fig-ballot { width: 54px; height: 47px; font-size: 1.36rem; right: 0.85rem; bottom: 0.85rem; }
}

/* Dvojstĺpec, v ktorom je vedľa seba krátky text a vysoká fotografia.
   Bez zvislého vycentrovania text visí hore a pod ním ostane prázdna plocha. */
.two--mid { align-items: center; }

/* Pomalý pohyb obrazu. Nestojí to ani bajt navyše, je to CSS transformácia
   jednej statickej fotografie. Beží, len kým je sekcia na obrazovke —
   triedu `is-live` nasadzuje a odoberá main.js, aby to na telefóne
   zbytočne nekreslilo a nežralo batériu. */
.fig--motion .fig-box img { transform-origin: 50% 56%; }
.fig--motion.is-live .fig-box img {
    will-change: transform;
    animation: fig-kb 32s ease-in-out infinite alternate;
}
@keyframes fig-kb {
    from { transform: scale(1.002); }
    to   { transform: scale(1.09) translate3d(-1.4%, -1.2%, 0); }
}

/* --- Pás fotografií, ktorý sa sám pomaly posúva --- */
.strip {
    position: relative; overflow: hidden;
    margin-top: 3rem;
    --strip-h: clamp(190px, 25vw, 330px);
    --strip-gap: 1.1rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.strip-track { display: flex; width: max-content; }
/* Každá polovica má vlastnú medzeru aj koncové odsadenie, takže posun
   o presne 50 % šírky dráhy sedí na pixel a pás sa nikdy „nezasekne". */
.strip-half { display: flex; gap: var(--strip-gap); padding-right: var(--strip-gap); }
.strip.is-run .strip-track { animation: strip-run 110s linear infinite; }
.strip.is-held .strip-track { animation-play-state: paused; }
@keyframes strip-run {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
.strip figure {
    flex: 0 0 auto; margin: 0;
    height: var(--strip-h);
    border: 1px solid var(--hair);
    background: var(--paper-3);
}
.strip img { display: block; height: 100%; width: auto; }

.strip-ctrl { white-space: nowrap; }

@media (max-width: 720px) {
    .strip { margin-top: 2.2rem; }
    /* `.btn` má pod 720 px šírku 100 %, lebo sú to výzvy na akciu. Ovládanie
       pásu je ale pomôcka, nie výzva — cez celú šírku by vyzeralo ako hlavné
       tlačidlo sekcie. Dotykový cieľ ostáva 52 px na výšku. */
    .strip-ctrl { width: auto; align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    /* Kto má v systéme vypnuté animácie, dostane pás ako bežný vodorovný
       zoznam, ktorý si posunie sám. Tlačidlo na zastavenie potom nemá čo robiť. */
    .strip { overflow-x: auto; }
    .strip-track { animation: none !important; }
    .strip-ctrl { display: none; }
    .fig--motion.is-live .fig-box img { animation: none; }
}