/* ==================================================================
   Ing. Jozef Daniško — kandidát na starostu obce Trenčianska Teplá
   Štýly webu. Všetky rozmery a farby pochádzajú z tokenov nižšie.
   ================================================================== */

/* ------------------------------------------------------------------
   1. Tokeny

   Web má jednu svetlú identitu — na letáku, na Facebooku aj tu vyzerá
   kampaň rovnako. Automatický tmavý režim tu zámerne nie je: menil by
   farbu značky a stránka by pôsobila ťaživo.

   Modrá z kravaty na kampaňovej fotografii nesie celý web — tlačidlá,
   zvýraznenia aj farebné plochy. Červená zo znaku kampane je vyhradená
   jedinému prvku: srdcu pri hesle. Tým zostane výnimočná.
   ------------------------------------------------------------------ */

:root {
  color-scheme: light;

  /* Povrchy — celý web je svetlý */
  --color-surface:          #ffffff;
  --color-surface-raised:   #f6f8fb;
  --color-surface-sunken:   #e8edf4;

  /* Text */
  --color-text:             #17202c;
  --color-text-muted:       #566173;
  --color-text-inverse:     #f4f7fb;
  --color-text-inverse-muted:#c2cedd;

  /* Linky a okraje */
  --color-border:           #dfe5ee;
  --color-border-strong:    #b6c0cf;

  /* Značková modrá — hlavná farba webu */
  --color-accent:           #175ea6;
  --color-accent-hover:     #114a85;
  --color-accent-soft:      #e8f0f8;
  --color-accent-on:        #ffffff;
  --color-accent-deep:      #12395e;   /* sýte plochy: pás údajov, pätička */

  /* Žltá z kampaňového banneru — doplnková farba.
     Na bielom je nečitateľná (kontrast 1,2 : 1), preto sa používa výhradne
     na modrom alebo tmavom podklade: srdce a heslo v úvode, hlavné tlačidlo
     v úvodnom páse a krúžky s číslami kandidátov. */
  --color-yellow:           #f9e90b;
  --color-yellow-ink:       #0f3050;   /* text na žltej ploche */

  /* Stavy */
  --color-success:          #15703e;
  --color-warning:          #8a5300;
  --color-danger:           #ad1f18;
  --color-focus:            #175ea6;

  /* Typografia — nadpisy nesú charakter, text je pokojný */
  --font-display: "Archivo", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Arial, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Helvetica Neue", Arial, sans-serif;

  /* Základ je 17 px — web čítajú aj starší obyvatelia */
  --text-xs:   0.8125rem;  /* 13 */
  --text-sm:   0.9375rem;  /* 15 */
  --text-base: 1.0625rem;  /* 17 */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.5rem;     /* 24 */

  --text-h3:    clamp(1.25rem, 1.1rem + 0.7vw,  1.5rem);
  --text-h2:    clamp(1.75rem, 1.4rem + 1.6vw,  2.6rem);
  --text-h1:    clamp(2.1rem,  1.6rem + 2.4vw,  3.4rem);
  --text-hero:  clamp(2.6rem,  1.7rem + 4.2vw,  5rem);
  --text-numeral: clamp(2.5rem, 2rem + 2vw, 3.5rem);

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   700;
  --weight-black:  800;

  --leading-tight: 1.05;
  --leading-head:  1.15;
  --leading-body:  1.65;

  --tracking-tight: -0.03em;
  --tracking-wide:   0.14em;

  /* Odstupy — 4px mriežka */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --section-gap: clamp(var(--space-16), 9vw, var(--space-24));

  /* Rádiusy */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   28px;
  --radius-full: 999px;

  /* Tiene */
  --shadow-subtle:   0 1px 2px rgba(23, 32, 44, 0.06);
  --shadow-raised:   0 6px 24px rgba(23, 32, 44, 0.08);
  --shadow-floating: 0 18px 48px rgba(18, 57, 94, 0.18);

  /* Rozmery ovládacích prvkov — jedna škála pre web aj administráciu */
  --control-md:     52px;    /* tlačidlá, polia, okrúhle ovládače */
  --prehravac:      40px;    /* výška vlastného ovládania videa */
  /* Pás pod záberom, v ktorom leží zbalený popis: dva riadky textu (42),
     medzera (4), tlačidlo „Zobraziť viac“ (44) a odstup od záberu (8). */
  --popis-pas:      104px;
  /* Koľko výšky okna ostane na záber, keď popis nie je. Odpočítané je
     odsadenie dialógu, počítadlo pod ním a medzera medzi nimi. */
  --zaber-plne:     calc(100vh - 160px);
  --zaber-vyska:    var(--zaber-plne);
  --control-sm:     44px;    /* malé tlačidlá; zároveň dotykové minimum */
  --icon-sm:        18px;
  --icon-md:        22px;
  --icon-lg:        26px;
  --icon-xl:        36px;    /* srdce v odznaku úvodu */
  --logo-vyska:     56px;    /* políčko loga podporujúcej strany (3 : 2) */

  /* Tmavé plochy, ktoré sa opakujú (karta O mne, video) */
  --gradient-deep:  linear-gradient(165deg, #143a5e 0%, #0d2740 100%);
  --color-video-bg: #0a1c2e;
  --color-yellow-hover: #fff27a;

  /* Rozmery */
  --size-avatar:    160px;   /* okrúhla fotografia kandidáta */
  --size-number:    40px;    /* krúžok s číslom na hlasovacom lístku */
  --container:      1180px;
  --container-text: 66ch;
  --header-height:  72px;

  /* Pohyb */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-micro: 150ms;
  --duration-panel: 250ms;
}

/* ------------------------------------------------------------------
   2. Základ
   ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-surface);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  line-height: var(--leading-head);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
a {
  color: var(--color-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--color-accent); }
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-16));
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-floating);
  transition: top var(--duration-micro) var(--ease-out);
}

.skip-link:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   3. Rozloženie a hlavičky sekcií
   ------------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 640px) {
  .container { padding-inline: var(--space-8); }
}

.section { padding-block: var(--section-gap); }

/* Prvá sekcia podstránky. Omrvinky patria hneď pod hlavičku — s plným
   odstupom sekcie by stránka začínala prázdnym pásom cez pol obrazovky. */
.section--page { padding-top: var(--space-8); }

/* Kratšia sekcia — pre úzke pásy, ktoré nemajú niesť vlastný nadpis */
.section--tight { padding-block: var(--space-12); }

.section--raised { background: var(--color-surface-raised); }

.section--sunken { background: var(--color-surface-sunken); }
/* Zvýraznená sekcia — jemný modrý nádych, žiadna tmavá plocha.
   Používa sa raz, na zakončenie stránky. */
.section--brand {
  background: var(--color-accent-soft);
  border-block: 1px solid var(--color-border);
}

.section__head {
  max-width: var(--container-text);
  margin-bottom: var(--space-12);
}
/* Popisok nad nadpisom s krátkou linkou — drží sekcie opticky pohromade */
.section__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.section__eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.section__lead {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: var(--container-text);
}

.prose { max-width: var(--container-text); }

.prose h2 { margin-top: var(--space-12); }

.prose h3 { margin-top: var(--space-8); }

.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }

.prose li { margin-bottom: var(--space-2); }

.prose img { border-radius: var(--radius-md); margin-block: var(--space-8); }

.prose blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface-raised);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-lg);
  font-style: italic;
}

.prose blockquote p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   4. Tlačidlá
   ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-md);
  padding: var(--space-3) var(--space-8);
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  font: inherit;
  font-weight: var(--weight-bold);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-micro) var(--ease-out),
              color var(--duration-micro) var(--ease-out),
              border-color var(--duration-micro) var(--ease-out),
              box-shadow var(--duration-micro) var(--ease-out),
              transform var(--duration-micro) var(--ease-out);
}

.btn:hover { transform: translateY(-2px); }

.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-on);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.btn--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-accent-on);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-accent) 38%, transparent);
}

.btn--ghost {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn--ghost:hover {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-surface);
}

.btn--on-dark {
  background: transparent;
  border-color: color-mix(in srgb, var(--color-text-inverse) 45%, transparent);
  color: var(--color-text-inverse);
}

.btn--on-dark:hover {
  background: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
  color: var(--color-accent-deep);
}

.btn--sm { min-height: var(--control-sm); padding: var(--space-2) var(--space-5); font-size: var(--text-sm); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ------------------------------------------------------------------
   5. Hlavička a navigácia
   ------------------------------------------------------------------ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--color-border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
}

.header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  min-width: 0;
}
/* Monogram — drobná značka, ktorá sa opakuje aj v pätičke */
.brand-mark {
  display: grid;
  place-items: center;
  width: var(--control-sm);
  height: var(--control-sm);
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-on);
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-lg);
  letter-spacing: -0.04em;
}

.header__brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }

.header__brand-name {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-base);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.header__brand-role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;   /* v úzkej hlavičke ho flex stláčal na 43 px */
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--duration-micro) var(--ease-out),
              opacity var(--duration-micro) var(--ease-out);
}

.nav-toggle__bars { position: relative; }

.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }

.nav-toggle__bars::before { top: -6px; }

.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-raised);
}

.nav[data-open="true"] { display: block; }

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav__link {
  display: block;
  white-space: nowrap;
  min-height: var(--control-md);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--weight-medium);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* hlavná akcia v rozbalenom menu — oddelená linkou, cez celú šírku */
.nav__cta {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.nav__cta .btn { width: 100%; }

.header__cta { display: none; white-space: nowrap; }

/* Plné menu sa zapne až tam, kde sa značka, päť položiek a tlačidlo zmestia
   do jedného riadku — pri 1024 px sa položky lámali na dva riadky. */
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .nav {
    display: block;
    position: static;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .nav__list { flex-direction: row; align-items: center; gap: var(--space-1); }
  .nav__cta { display: none; }
  .nav__link {
    position: relative;
    min-height: var(--control-sm);
    display: flex;
    align-items: center;
    padding-inline: var(--space-3);
    background: transparent;
  }
  .nav__link:hover { background: transparent; color: var(--color-accent); }
  /* aktívnu položku značí linka pod textom, nie plocha */
  .nav__link[aria-current="page"] { background: transparent; color: var(--color-text); }
  .nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 2px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-accent);
  }
  .header__cta { display: inline-flex; }
}

/* ------------------------------------------------------------------
   6. Hero a predstavenie

   Hore široká fotografia zo života obce, pod ňou farebná plocha s heslom.
   Portrét kandidáta prichádza až v ďalšej sekcii, v karte, ktorá do
   farebnej plochy zasahuje — dve fotografie tak nesúperia o pozornosť.
   ------------------------------------------------------------------ */

.hero { position: relative; }

.hero__banner {
  position: relative;
  /* Pevná výška, nie pomer strán: pri obmedzenej výške by pomer strán
     dopočítal aj šírku a pás by sa zúžil na časť obrazovky. */
  width: 100%;
  height: clamp(220px, 46vw, 420px);
  background: var(--color-surface-sunken);
  overflow: hidden;
}

.hero__banner img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .hero__banner { height: clamp(320px, 34vw, 520px); }
}
/* Bez nahranej fotografie sa pás nezobrazí ako prázdna diera */
.hero__banner--empty {
  display: grid;
  place-items: center;
  /* šírka musí byť plná — pomer strán sám by ju dopočítal z výšky */
  width: 100%;
  min-height: 200px;
  padding-block: var(--space-16);
  padding-inline: var(--space-8);
  background: var(--color-surface-sunken);
  border-bottom: 2px dashed var(--color-border-strong);
  color: var(--color-text-muted);
  text-align: center;
  font-size: var(--text-sm);
}
/* Farebná plocha s heslom kampane */
.hero__slogan {
  background: var(--color-accent);
  color: var(--color-accent-on);
  padding-block: var(--space-12);
  text-align: center;
}
/* Priestor navyše dole, do ktorého zasahuje karta s portrétom */
/* Karta zasahuje do plochy o 48–96 px; spodné odsadenie musí byť o toľko
   väčšie, inak by karta doliehala na tlačidlá. */
.hero__slogan--with-card { padding-bottom: 112px; }

@media (min-width: 768px) {
  .hero__slogan { padding-block: var(--space-16); }
  .hero__slogan--with-card { padding-bottom: 168px; }
}

.hero__eyebrow {
  /* mriežka, nie flex: srdce si tak môže vziať výšku odznaku v percentách */
  display: inline-grid;
  /* text smie ustúpiť až na nulu, srdce nie — inak sa zúži stĺpec pod jeho
     šírku a srdce sa prekryje s textom (ukázalo sa to pri 320 px) */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: #fff;
  background: var(--color-accent-deep);
  text-align: left;
}

/* Srdce má pevnú veľkosť zo škály ikon. Percento z výšky odznaku tu byť nesmie:
   odznak si výšku berie od obsahu, takže by si ju srdce určovalo samo. Blink ten
   kruh preruší, WebKit (Safari aj prehliadače na iPhone) nie — srdce tam vyrástlo
   na 861 px, odznak na 957 px a text sa zúžil na jedno písmeno v stĺpci. */
.hero__eyebrow svg {
  align-self: center;
  width: var(--icon-xl);
  height: var(--icon-xl);
  color: var(--color-yellow);
}

/* riadky rozdelené na približne rovnaké dĺžky, nie po okraj;
   keby niekto zadal dlhší text, radšej sa zlomí slovo než odznak */
.hero__eyebrow-text {
  text-wrap: balance;
  overflow-wrap: break-word;
}

.hero__title {
  font-size: var(--text-hero);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 auto var(--space-6);
  max-width: 16ch;
  color: var(--color-accent-on);
  text-wrap: balance;
}
/* Zvýraznené slovo je na farebnej ploche svetlejšie, nie inej farby */
.hero__title .accent { color: var(--color-yellow); }
/* Srdce v hesle kampane */
.hero__heart {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  vertical-align: -0.05em;
  color: var(--color-yellow);
}

.hero__subtitle {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 54ch;
  margin: 0 auto var(--space-8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
/* Tlačidlá na farebnej ploche */
.hero__actions .btn--primary {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-yellow-ink);
  box-shadow: none;
}

.hero__actions .btn--primary:hover { background: var(--color-yellow-hover); border-color: var(--color-yellow-hover); color: var(--color-yellow-ink); }

.hero__actions .btn--ghost { border-color: rgba(255, 255, 255, 0.6); color: #fff; }

.hero__actions .btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; }
/* --- Predstavenie: portrét a text v jednej karte --- */

.intro {
  /* Karta má záporný odsun nahor a zasahuje do farebnej plochy. Bez vlastnej
     pozície by ju prekryl banner — ten je pozicionovaný, karta nie. */
  position: relative;
  z-index: 1;
  padding-block: 0 var(--section-gap);
}

.intro__card {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-md);
  /* biely rám oddelí kartu od farebnej plochy, do ktorej zasahuje */
  border: 8px solid var(--color-surface);
  box-shadow: var(--shadow-floating);
  background: var(--color-surface);
}
/* Karta zasahuje do farebnej plochy nad ňou */
.intro__card--overlap { margin-top: clamp(-96px, -7vw, -48px); }

/* Logá strán, ktoré kandidatúru podporujú — pod kartou O mne.
   Rad leží v medzere, ktorá tu bola aj bez neho: sekcia stratí spodný odstup
   a rad si z neho vezme presne toľko, koľko je odstup mínus výška loga. Pás
   s výzvou na sledovanie tak ostane na svojom mieste.
   Každé logo má rovnaké políčko 3 : 2 a vpasuje sa doň bez deformácie — logá
   majú rôzny pomer strán a pri rovnakej výške by široké pôsobilo väčšie. */
.intro--s-logami { padding-bottom: 0; }

.support { margin-top: calc(var(--section-gap) - var(--logo-vyska)); }

.support__label {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

/* Na monitore je text v jednom rade s logami — rad tak nie je vyšší než logá
   a pás s výzvou sa nepohne. */
@media (min-width: 768px) {
  .support {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
  }
  .support__label { white-space: nowrap; }
}

/* Na telefóne sa text vedľa štyroch log nezmestí, ide nad ne. Riadok textu
   (20 px) a medzeru pod ním (8 px) si rad vezme z odstupu k výzve — záporným
   spodným okrajom —, takže pás s výzvou ostane tam, kde bol. */
@media (max-width: 767px) {
  .support {
    --podpora-text: calc(var(--space-5) + var(--space-2));
    margin-top: var(--space-5);
    margin-bottom: calc(var(--section-gap) - var(--space-5) - var(--podpora-text) - var(--logo-vyska));
    text-align: center;
  }
  .support__label {
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    line-height: var(--space-5);
  }
}

.support__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .support__list { gap: var(--space-8); }
}

@media (min-width: 1024px) {
  .support__list { gap: var(--space-16); }
}

/* Na telefóne menšie políčko — štyri logá sa tak zmestia do jedného radu aj
   pri 320 px a rad nepridá výšku navyše. */
@media (max-width: 767px) {
  :root { --logo-vyska: 36px; }
}

.support__item {
  position: relative;
  height: var(--logo-vyska);
  aspect-ratio: 3 / 2;
}

/* Obrázok leží v políčku absolútne — inak by si políčko naťahoval podľa
   vlastného rozmeru a každé by vyšlo inak vysoké. Odtiene šedej zjednotia
   farebne rôzne logá; úplne jednofarebná silueta by zmazala biely text
   v logách Hlasu a Republiky. */
.support__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
}

.intro__photo {
  aspect-ratio: 4 / 5;
  background: var(--color-surface-sunken);
}

.intro__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* orez od hornej hrany — pri portréte nesmie zmiznúť tvár */
  object-position: 50% 8%;
}

.intro__body {
  padding: var(--space-8);
  background: var(--gradient-deep);
  color: var(--color-text-inverse);
}

.intro__label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
}

.intro__name {
  margin: 0 0 var(--space-6);
  font-size: var(--text-h2);
  color: var(--color-text-inverse);
}

.intro__text { color: var(--color-text-inverse-muted); }

.intro__text p { margin-bottom: var(--space-4); }

.intro__text strong { color: var(--color-text-inverse); }

.intro__signature {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: var(--space-4);
}

.intro__fact-label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
}

.intro__fact-value {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
}
/* promo video v karte — prehráva sa až po kliknutí */
.intro__video {
  display: grid;
  place-items: center;
  padding: var(--space-4);
  /* rovnaká plocha ako text vedľa — dva tmavé stĺpce splynú do jedného pásu */
  background: var(--gradient-deep);
}

.intro__video video {
  display: block;
  width: 100%;
  max-height: 100%;
  /* natočené telefónom je na výšku; širšie video ostane celé, len s pruhmi */
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: var(--color-video-bg);
  border-radius: var(--radius-sm);
  /* pod sebou by video na výšku cez celú šírku zabralo celú obrazovku */
  max-width: 380px;
  margin-inline: auto;
}

/* na mobile ide portrét, video a text pod sebou */
.intro__photo { order: 1; }
.intro__video { order: 2; }
.intro__body  { order: 3; }

@media (min-width: 860px) {
  .intro__card { grid-template-columns: 1.1fr 0.9fr; }
  .intro__photo { aspect-ratio: auto; height: 100%; min-height: 420px; }
  .intro__body { padding: var(--space-12); }

  /* text do širšieho stĺpca vľavo, portrét do užšieho vpravo — text musí
     zostať taký široký, aby sa údaje pod ním zmestili do jedného riadka */
  .intro__body  { order: 1; }
  .intro__photo { order: 2; }

  /* na tejto šírke by tretí stĺpec text príliš zúžil — video ide nad kartu */
  .intro__card--video .intro__video {
    order: 0;
    grid-column: 1 / -1;
    padding: var(--space-6);
  }
  .intro__card--video .intro__video video { max-width: 320px; }
}

/* širší monitor: video vľavo, text v strede, portrét vpravo.
   Až od 1200 px — na užšom monitore by na text zostalo tak málo miesta, že by
   sa údaje pod ním zalomili do dvoch riadkov. */
@media (min-width: 1200px) {
  /* text dostáva zvyšok šírky, video a portrét majú pevné rozpätie */
  .intro__card--video {
    grid-template-columns: clamp(210px, 20%, 260px) minmax(0, 1fr) clamp(270px, 26%, 320px);
  }

  /* užší text znesie tri údaje vedľa seba len s menšou najmenšou šírkou */
  .intro__card--video .intro__signature {
    grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
    gap: var(--space-3);
  }

  .intro__card--video .intro__video {
    order: 1;
    grid-column: auto;
    padding: var(--space-4);
  }
  .intro__card--video .intro__video video { max-width: none; }

  .intro__card--video .intro__body  { order: 2; }
  .intro__card--video .intro__photo { order: 3; }
}

/* ------------------------------------------------------------------
   7. Karty článkov
   ------------------------------------------------------------------ */

.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--duration-micro) var(--ease-out),
              transform var(--duration-micro) var(--ease-out),
              border-color var(--duration-micro) var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-raised);
  border-color: var(--color-border-strong);
  transform: translateY(-3px);
}

.card:focus-within {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.card__media {
  aspect-ratio: 16 / 10;
  background: var(--color-surface-sunken);
  overflow: hidden;
}

.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duration-panel) var(--ease-out);
}

.card:hover .card__media img { transform: scale(1.03); }

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  flex: 1;
}

.card__meta {
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.card__title { margin: 0; font-size: var(--text-h3); }

.card__title a { color: inherit; text-decoration: none; }

.card__title a::after { content: ""; position: absolute; inset: 0; }

/* odkaz pokrýva celú kartu, preto prstenec fokusu dostane karta, nie text */
.card__title a:focus-visible { outline: none; }
.card:has(.card__title a:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.card__text { margin: 0; color: var(--color-text-muted); }

.card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: auto 0 0;
  padding-top: var(--space-3);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  font-size: var(--text-sm);
}

.card:hover .card__more { gap: var(--space-3); }

/* ------------------------------------------------------------------
   8. Program — jeden blok cez celú šírku, pod ním dva vedľa seba
   ------------------------------------------------------------------ */

.priorities {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  counter-reset: priorita;
}

@media (min-width: 768px) {
  .priorities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .priority--wide { grid-column: 1 / -1; }
}

.priority {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  counter-increment: priorita;
  overflow: hidden;
  transition: border-color var(--duration-micro) var(--ease-out),
              box-shadow var(--duration-micro) var(--ease-out);
}

.priority:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-raised);
}
/* Poradové číslo vpravo hore — orientácia v dlhšom zozname */
.priority::before {
  content: "0" counter(priorita);
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-numeral);
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--color-surface-sunken);
  pointer-events: none;
}

/* nadpis nesmie zájsť pod veľké poradové číslo v pravom hornom rohu */
.priority__title {
  margin: 0;
  padding-right: var(--space-24);
  font-size: var(--text-h3);
}

.priority__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--color-text-muted);
}

.priority__list li {
  position: relative;
  padding-left: var(--space-6);
  line-height: 1.5;
}

/* Široký blok má dlhý zoznam (aj 17 bodov) — na monitore ide do dvoch
   stĺpcov, aby nebol dlhší než oba bloky pod ním dokopy. */
@media (min-width: 900px) {
  .priority--wide .priority__list {
    display: block;
    columns: 2;
    column-gap: var(--space-12);
  }
  .priority--wide .priority__list li {
    break-inside: avoid;
    margin-bottom: var(--space-3);
  }
}

.priority__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
}

/* ------------------------------------------------------------------
   9. Môj príbeh — časová os
   ------------------------------------------------------------------ */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
  max-width: var(--container-text);
}

.timeline__item {
  position: relative;
  padding-left: var(--space-12);
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  bottom: calc(-1 * var(--space-8));
  width: 2px;
  background: var(--color-border);
  opacity: 0.5;
}

.timeline__item:last-child::before { display: none; }

.timeline__item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.timeline__year {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.timeline__title { margin-bottom: var(--space-2); font-size: var(--text-h3); }

.timeline__text { margin: 0; }

/* ------------------------------------------------------------------
   11. Fotogaléria, obrázok článku a zväčšovanie

   Masonry je urobené cez CSS stĺpce — bez JavaScriptu a bez počítania
   výšok. Fotografie tečú stĺpcami zhora nadol, takže poradie čítania je
   po stĺpcoch, nie po riadkoch; pri galérii to nevadí.
   ------------------------------------------------------------------ */

.article__hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-12);
  background: var(--color-surface-sunken);
}

.masonry {
  columns: 1;
  column-gap: var(--space-4);
}

@media (min-width: 560px) { .masonry { columns: 2; } }
@media (min-width: 900px) { .masonry { columns: 3; } }
@media (min-width: 1200px) { .masonry { columns: 4; } }

/* ------------------------------------------------------------------
   Volebné noviny — PDF ako listovacia publikácia (flipbook.js)
   ------------------------------------------------------------------ */

.flipbook { display: grid; gap: var(--space-4); }

/* Kniha si šírku berie z tohto prvku a výšku dopočíta z pomeru strany.
   Knižnica mu nastaví najväčšiu šírku tak, aby sa dvojstrana zmestila do
   výšky okna — vtedy ostane na stred. */
.flipbook__stage {
  position: relative;
  width: 100%;
  min-height: 240px;
  margin-inline: auto;
  border-radius: var(--radius-sm);
}

/* kniha (knižnica jej nastaví najväčšiu šírku) ostáva na stred */
.flipbook__book { margin-inline: auto; }

.flipbook__page { background: #fff; }

/* Neviditeľná strana pred titulkou a za poslednou stranou (flipbook.js).
   Nesmie byť priehľadná: pri listovaní späť ňou knižnica zakrýva zdvihnutú
   časť strany pod ňou — priehľadnou by tá strana presvitala. Má preto farbu
   pozadia, na ktorom kniha leží, a v pokoji s ním splynie. */
.flipbook { --flipbook-pozadie: var(--color-surface); }
.section--raised .flipbook,
.flipbook:fullscreen { --flipbook-pozadie: var(--color-surface-raised); }
.flipbook__page--prazdna { background: var(--flipbook-pozadie); }
/* Tieň v strede dvojstrany, ako pri zlome časopisu. Je to jeden pás cez
   obe strany nad nimi — keby mala tieň každá strana zvlášť, pri
   neceločíselnom zväčšení obrazovky (napr. 125 %) sa okraje strán stretnú
   uprostred pixelu a v strede ostane svetlá deliaca čiara. Pri titulke,
   poslednej strane a na mobile (flipbook.js nedá triedu --dvojstrana) nie je;
   počas otáčania strany zmizne (--otaca). */
.flipbook__book { position: relative; }
.flipbook__book::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 28%;
  translate: -50% 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to right,
    rgba(23, 32, 44, 0) 0%, rgba(23, 32, 44, 0.015) 14%,
    rgba(23, 32, 44, 0.05) 29%, rgba(23, 32, 44, 0.11) 39%,
    rgba(23, 32, 44, 0.18) 46%, rgba(23, 32, 44, 0.2) 50%,
    rgba(23, 32, 44, 0.18) 54%, rgba(23, 32, 44, 0.11) 61%,
    rgba(23, 32, 44, 0.05) 71%, rgba(23, 32, 44, 0.015) 86%,
    rgba(23, 32, 44, 0) 100%);
  transition: opacity var(--duration-micro) var(--ease-out);
}
.flipbook--dvojstrana .flipbook__book::after { opacity: 1; }
.flipbook--otaca .flipbook__book::after { opacity: 0; transition: none; }

.flipbook__page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.flipbook__stage:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

/* stav pred zobrazením: odkaz na PDF, načítavanie, chyba */
.flipbook__state {
  display: grid;
  place-items: center;
  min-height: 240px;
  margin: 0;
  padding: var(--space-8);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  text-align: center;
}
.flipbook__state[hidden] { display: none; }

.flipbook__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}

.flipbook__nav,
.flipbook__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.flipbook__btn {
  display: grid;
  place-items: center;
  width: var(--control-sm);
  height: var(--control-sm);
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}
.flipbook__btn:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.flipbook__btn:disabled { opacity: 0.4; cursor: default; }

.flipbook__pages {
  min-width: 13ch;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.flipbook__share-status {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.flipbook__share-status:empty { display: none; }

/* Bez načítanej knihy nemajú šípky a počítadlo čo ovládať. */
.flipbook:not(.is-ready) .flipbook__nav { visibility: hidden; }

/* celá obrazovka: kniha vyplní plochu nad lištou */
.flipbook:fullscreen {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface-raised);
}
.flipbook:fullscreen .flipbook__stage { flex: 1; min-height: 0; }

/* Letáky sú v riadkovej mriežke, nie v stĺpcoch ako fotografie: stĺpce
   radia položky zhora nadol, takže poradie z administrácie by sa na monitore
   čítalo inak než vľavo → vpravo, a pri troch letákoch vyšli 2 + 1. Najviac
   tri v rade, aby bol náhľad dosť veľký na to, aby sa dal leták spoznať. */
.leaflet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-4);
  align-items: start;
}

@media (min-width: 560px) { .leaflet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .leaflet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.leaflet-grid .masonry__item { margin: 0; }

.masonry__item {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  /* fotografia sa nesmie rozdeliť medzi dva stĺpce */
  break-inside: avoid;
}

.masonry__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  transition: transform var(--duration-panel) var(--ease-out),
              box-shadow var(--duration-micro) var(--ease-out);
}

.masonry__item:hover img {
  transform: scale(1.02);
  box-shadow: var(--shadow-raised);
}

/* na karte stačia dva riadky — celý popis je v zväčšenom zobrazení */
.masonry__caption,
.video-card__caption {
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* --- videá na výšku --- */

/* videá a fotografie sú dve samostatné časti — medzi nimi musí byť vidieť
   predel, inak to na jednej stránke splynie do jednej natlačenej kopy */
.gallery-block + .gallery-block { margin-top: var(--space-24); }

.gallery-part {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-h3);
}

/* linka doprava od nadpisu oddelí časť od tej predošlej */
.gallery-part::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) { .videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .videos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.video-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.video-card__frame {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
}

.video-card__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-panel) var(--ease-out);
}

.video-card:hover .video-card__media { transform: scale(1.03); }

.video-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(rgba(12, 10, 11, 0) 45%, rgba(12, 10, 11, 0.45));
  transition: background var(--duration-micro) var(--ease-out);
}

.video-card__play svg {
  width: var(--control-md);
  height: var(--control-md);
  filter: drop-shadow(0 2px 6px rgba(12, 10, 11, 0.55));
}

.video-card:hover .video-card__play { background: rgba(12, 10, 11, 0.3); }

.video-card:focus-visible .video-card__frame {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* --- galéria v článku: menšie štvorcové náhľady --- */

.gallery {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
  margin-top: var(--space-8);
}

.gallery__item {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  cursor: zoom-in;
  padding: 0;
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duration-panel) var(--ease-out);
}
.gallery__item:hover img { transform: scale(1.05); }

/* --- zväčšená fotografia s listovaním --- */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  padding: var(--space-4);
  border: 0;
  background: rgba(12, 10, 11, 0.94);
}

.lightbox[open] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: var(--space-2);
}

.lightbox::backdrop { background: rgba(12, 10, 11, 0.94); }

/* Keď má položka popis, ubratá výška záberu uvoľní pás pod ním. Bez popisu
   si záber vezme celú plochu. */
.lightbox--s-popisom { --zaber-vyska: calc(var(--zaber-plne) - var(--popis-pas)); }

/* pri otvorenom zväčšení sa stránka pod ním neroluje (a nemá posuvník) */
.lightbox-open { overflow: hidden; }

/* ------------------------------------------------------------------
   Vlastné ovládanie videa v zväčšení
   ------------------------------------------------------------------ */

.prehravac {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--prehravac);
  padding-inline: var(--space-2);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: linear-gradient(to top, rgba(8, 10, 14, 0.85), rgba(8, 10, 14, 0.45));
  color: #fff;
}

.prehravac[hidden] { display: none; }

.prehravac__btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: inherit;
  cursor: pointer;
}

.prehravac__btn:hover { background: rgba(255, 255, 255, 0.18); }
.prehravac__btn svg { width: 20px; height: 20px; }

/* v každom tlačidle sú dve ikony, vidno vždy tú podľa stavu */
.prehravac__btn svg:last-child { display: none; }
.prehravac--hra [data-prehrat] svg:first-child,
.prehravac--ticho [data-zvuk] svg:first-child { display: none; }
.prehravac--hra [data-prehrat] svg:last-child,
.prehravac--ticho [data-zvuk] svg:last-child { display: block; }

.prehravac__posuvnik {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: grid;
  align-content: center;
  cursor: pointer;
}

.prehravac__posuvnik::before {
  content: "";
  grid-area: 1 / 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.prehravac__stav {
  grid-area: 1 / 1;
  width: 0;
  height: 4px;
  border-radius: 2px;
  background: #fff;
}

.prehravac__posuvnik:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.prehravac__cas {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.86);
}

/* Miesta v mriežke sú pevné. Bez toho by sa pri skrytých šípkach (keď je
   v galérii jediná položka) obsah presunul do prvého stĺpca a ostal vľavo. */
.lightbox__nav--prev { grid-area: 1 / 1; }
.lightbox__figure    { grid-area: 1 / 2; }
.lightbox__nav--next { grid-area: 1 / 3; }
.lightbox__counter   { grid-area: 2 / 2; }

/* v prehrávači patrí klik jemu, nie listovaniu */
.lightbox__video { cursor: auto; }

.lightbox__figure {
  margin: 0;
  min-width: 0;
  display: grid;
  justify-items: center;
}

/* Pás pre popis je súčasťou rámu, takže sa záber aj s popisom vycentruje ako
   celok — bez toho by popis visel pod stredom obrazovky. */
.lightbox--s-popisom .lightbox__figure { padding-bottom: var(--popis-pas); }

.lightbox img,
.lightbox__video {
  display: block;
  max-width: 100%;
  max-height: var(--zaber-vyska);
  width: auto;
  border-radius: var(--radius-sm);
  /* kým sa fotografia načíta, nie je na mieste prázdno */
  background: var(--color-video-bg);
}

/* Kým prehliadač nepozná rozmer videa, nemá box z čoho odvodiť veľkosť —
   šírka aj výška vyjdú nula. Dovtedy mu preto držíme výšku aj pomer 9 : 16
   (videá z telefónu sú na výšku); po načítaní si rozmer určí samo video. */
.lightbox__video--nacitava {
  aspect-ratio: 9 / 16;
  height: var(--zaber-vyska);
}

/* Výška sa videu nevnucuje — s pevnou výškou a užšou obrazovkou obraz v boxe
   „pláva“ a nad ním aj pod ním vidno tmavý pás podkladu. Veľkosť pred načítaním
   rieši trieda --nacitava. */
.lightbox__video { background: var(--color-video-bg); }

.lightbox img[hidden],
.lightbox__video[hidden] { display: none; }

.lightbox__caption {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.86);
}

/* Obal má šírku presne podľa záberu, aby naň popis aj ovládanie sadli presne. */
.lightbox__media {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* Zbalený popis leží v páse pod záberom — nie na ňom, aby nezakrýval obraz
   ani ovládanie prehrávača. Ukotvený je pri spodnej hrane pásu, takže sa pri
   rozvinutí nepohne: len narastie nahor cez záber. */
.lightbox__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--popis-pas));
  /* nad ovládaním prehrávača — rozvinutý popis ho prekryje celý, inak by cezeň
     presvitali tlačidlá a text by sa nedal prečítať; kliky naň prechádzajú */
  z-index: 2;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-1);
  max-height: var(--popis-pas);
  padding: var(--space-2) var(--space-4) 0;
  border-radius: var(--radius-sm);
  /* prechod do tmava — potrebný až vtedy, keď popis leží na zábere */
  background: none;
  color: #fff;
  text-align: left;
  /* Prekryv nesmie brať kliky: pod ním je prehrávač. Klikateľný je len text
     (kvôli označeniu) a tlačidlo — zvyšok prechádza na video, takže funguje
     pauza klikom aj lišta s posuvníkom. */
  pointer-events: none;
}

.lightbox__text,
.lightbox__more { pointer-events: auto; }

.lightbox__overlay[hidden] { display: none; }

.lightbox__text {
  margin: 0;
  font-size: var(--text-sm);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Rozvinutý popis vyrastie z pásu nahor na záber a smie zabrať najviac dve
   tretiny jeho výšky — aby bolo stále vidieť, o čom je. Zvyšok textu sa roluje.
   Prekryje pritom aj ovládanie prehrávača; to je v poriadku, po zbalení je
   zasa celé voľné a kliky naň prechádzajú aj spod popisu. */
.lightbox--popis .lightbox__overlay {
  max-height: calc(66% + var(--popis-pas));
  align-content: end;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: var(--space-8) var(--space-4) var(--space-2);
  background: linear-gradient(to top,
    rgba(8, 10, 14, 0.95) 0%,
    rgba(8, 10, 14, 0.93) 60%,
    rgba(8, 10, 14, 0.72) 82%,
    rgba(8, 10, 14, 0.3) 93%,
    rgba(8, 10, 14, 0) 100%);
}

.lightbox--popis .lightbox__text {
  display: block;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}



.lightbox__more {
  min-height: var(--control-sm);
  padding: 0;
  font-size: var(--text-sm);
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: var(--weight-bold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.lightbox__more:hover { text-decoration: underline; }
.lightbox__more[hidden] { display: none; }

.lightbox__counter {
  align-self: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.lightbox__nav {
  position: relative;
  z-index: 2;   /* nad záberom — inak ho prekryje, lebo je v poradí neskôr */
  display: grid;
  place-items: center;
  width: var(--control-md);
  height: var(--control-md);
  padding: 0;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-micro) var(--ease-out),
              border-color var(--duration-micro) var(--ease-out);
}
.lightbox__nav:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.lightbox__nav[hidden] { display: none; }

.lightbox__close {
  position: absolute;
  z-index: 3;   /* krížik musí byť nad všetkým, aj nad záberom */
  top: var(--space-4);
  right: var(--space-4);
  width: var(--control-md);
  height: var(--control-md);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: var(--text-lg);
  cursor: pointer;
}
.lightbox__close:hover { background: var(--color-accent); border-color: var(--color-accent); }

/* Na telefóne tvoria šípky s počítadlom spodnú lištu. Po stranách by ukrojili
   tretinu šírky a záber by sa zbytočne zmenšil. */
@media (max-width: 640px) {
  .lightbox { padding: var(--space-2); }

  .lightbox[open] {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--space-2);
  }

  .lightbox__figure    { grid-area: 1 / 1 / 2 / -1; }
  .lightbox__nav--prev { grid-area: 2 / 1; }
  .lightbox__counter   { grid-area: 2 / 2; }
  .lightbox__nav--next { grid-area: 2 / 3; }

  .lightbox__nav {
    width: var(--control-sm);
    height: var(--control-sm);
    font-size: 1.5rem;
  }

  .lightbox__close { width: var(--control-sm); height: var(--control-sm); }

  /* Šípky sú na okraji okna, preto si odsadenie nesú samy — dialóg ho nemá. */
  .lightbox__nav { margin-inline: var(--space-3); }

  /* Video sa opiera o horný okraj: má pomer na výšku, takže mu pod ním aj tak
     ostane miesto na lištu. Fotografia je na šírku aj na výšku rôzna, tá ostáva
     na stred zvyšnej plochy. */
  .lightbox--video[open] { align-items: start; }

  /* Záber ide na celú šírku okna. Bočné okraje by ho zúžili a s ním — pomer
     strán sa zachováva — aj zvislo, takže by video aj fotografia vyšli menšie.
     Z rovnakého dôvodu tu nie je ani odsadenie zdola: každý ubratý bod výšky
     zoberie záberu zhruba pol bodu šírky. */
  .lightbox { padding: 0; }
  .lightbox img,
  .lightbox__video { border-radius: 0; }
  .prehravac { border-radius: 0; }

  /* Video z telefónu má menšie rozlíšenie než displej (360 × 640), takže samo
     od seba okno nevyplní — dostane šírku celého obalu. Obal sa drží pomeru
     9 : 16, aby popis aj ovládanie sadli presne na obraz a neprečnievali. */
  /* Rám záberu sa inak zmrští na obsah a vnútro by nemalo z čoho brať šírku. */
  .lightbox__figure { width: 100%; }

  .lightbox__media--video { width: min(100%, calc(var(--zaber-vyska) * 9 / 16)); }

  .lightbox__video {
    width: 100%;
    height: auto;
  }

  .lightbox__video--nacitava { height: auto; }

  .lightbox__text,
  .lightbox__more { font-size: var(--text-xs); }

  /* Záber dostane celú výšku okrem spodnej lišty so šípkami (44 + 8 medzera).
     Pás popisu je presne na dva riadky menšieho písma (39), medzeru (4)
     a tlačidlo (44) — pri 375 × 812 tak na video ostane celá šírka. */
  .lightbox {
    --zaber-plne: calc(100vh - 52px);
    --popis-pas: 88px;
  }

  .lightbox__overlay { padding-top: 0; }

}

/* na telefónoch s pohyblivou lištou prehliadača je dvh presnejšie */
/* na telefónoch s pohyblivou lištou prehliadača je dvh presnejšie */
@supports (height: 100dvh) {
  .lightbox { --zaber-plne: calc(100dvh - 160px); }

  @media (max-width: 640px) {
    .lightbox { --zaber-plne: calc(100dvh - 52px); }
  }
}

/* ------------------------------------------------------------------
   12. Formulár
   ------------------------------------------------------------------ */

.form { display: grid; gap: var(--space-6); max-width: 640px; }

.field { display: grid; gap: var(--space-2); }

.field__label { font-weight: var(--weight-bold); font-size: var(--text-sm); }

.field__optional { font-weight: var(--weight-normal); color: var(--color-text-muted); }

.field__control {
  width: 100%;
  min-height: var(--control-md);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-micro) var(--ease-out),
              box-shadow var(--duration-micro) var(--ease-out);
}

.field__control:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 22%, transparent);
  outline: none;
}
textarea.field__control { min-height: 150px; resize: vertical; }

.field__hint { font-size: var(--text-sm); color: var(--color-text-muted); }

.field--error .field__control { border-color: var(--color-danger); border-width: 2px; }

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-danger);
  font-weight: var(--weight-medium);
}

.field__error svg { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; margin-top: 2px; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1.5;
}

.checkbox input {
  width: var(--icon-md); height: var(--icon-md);
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid;
  border-left-width: 4px;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.alert svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }

.alert--success {
  background: color-mix(in srgb, var(--color-success) 9%, var(--color-surface));
  border-color: var(--color-success);
  color: var(--color-success);
}

.alert--warning {
  background: color-mix(in srgb, var(--color-warning) 9%, var(--color-surface));
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.alert--error {
  background: color-mix(in srgb, var(--color-danger) 9%, var(--color-surface));
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* ------------------------------------------------------------------
   12b. Výzva na sledovanie

   Svetlý pás s jednou vetou a jedným tlačidlom. Zámerne bez nadpisu —
   nie je to ďalšia kapitola stránky, ale pozvánka medzi dvoma sekciami.
   ------------------------------------------------------------------ */

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  text-align: center;
}

.cta__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3);
  line-height: var(--leading-head);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  max-width: 34ch;
}

.cta__button svg { width: 20px; height: 20px; }

@media (min-width: 700px) {
  .cta { flex-wrap: nowrap; justify-content: space-between; text-align: left; }
  .cta__button { flex-shrink: 0; }
}

/* ------------------------------------------------------------------
   13. Kandidáti na poslancov

   Okrúhla fotografia, pod ňou vycentrované meno a krátky popis — bez rámčeka
   karty. Stĺpce: 3 od 900 px, 2 od 380 px, 1 pod 380 px.

   Fotografia má najviac --size-avatar, v úzkom stĺpci 80 % jeho šírky, aby
   kruh nenarážal do susedného. Veľkosť sa berie zo šírky (aspect-ratio 1),
   výška sa nikde neobmedzuje — inak by pomer strán dopočítal šírku z výšky.
   ------------------------------------------------------------------ */

.candidates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) var(--space-4);
}

.candidate { text-align: center; }

.candidate__photo {
  position: relative;
  display: grid;
  place-items: center;
  width: min(var(--size-avatar), 80%);
  aspect-ratio: 1 / 1;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-full);
  border: 3px solid var(--color-surface);
  background: var(--color-accent-soft);
  box-shadow: var(--shadow-subtle);
}

.candidate__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* zaoblenie orezáva obrázok sám — karta nesmie mať overflow: hidden,
     inak by sa odrezal krúžok s číslom, ktorý presahuje okraj */
  border-radius: inherit;
  object-fit: cover;
  /* pri portréte na výšku je tvár v hornej časti */
  object-position: 50% 20%;
}

.candidate__initials {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-xl);
  letter-spacing: -0.04em;
  color: var(--color-accent);
}

/* Číslo na hlasovacom lístku — krúžok vpravo dole na fotografii */
.candidate__number {
  position: absolute;
  right: 0;
  bottom: var(--space-1);
  display: grid;
  place-items: center;
  min-width: var(--size-number);
  height: var(--size-number);
  padding-inline: var(--space-1);
  border-radius: var(--radius-full);
  border: 3px solid var(--color-surface);
  background: var(--color-yellow);
  color: var(--color-yellow-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-base);
  line-height: 1;
}

.candidate__name {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
}

.candidate__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

@media (min-width: 380px) {
  .candidates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .candidate__number { --size-number: 34px; font-size: var(--text-sm); }
}

@media (min-width: 600px) {
  .candidate__number { --size-number: 40px; font-size: var(--text-base); }
}

@media (min-width: 900px) {
  .candidates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-12) var(--space-6);
  }
}

/* ------------------------------------------------------------------
   14. Pätička
   ------------------------------------------------------------------ */

.footer {
  padding-block: var(--space-12) var(--space-8);
  /* odznak cookies je pripnutý vľavo dole — na telefóne by prekryl posledný riadok */
  padding-bottom: calc(var(--space-8) + var(--control-md));
  background: var(--color-surface-raised);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Odkazy v pätičke sú ciele: na monitore stačí 24 px (WCAG 2.5.8),
   na telefóne sa do nich trafí palec, preto celých 44 px. */
.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--color-text);
  text-decoration: none;
}

@media (max-width: 700px) {
  .footer__list a { min-height: var(--control-sm); }
}

.footer a:hover { color: var(--color-accent); text-decoration: underline; }

.footer__grid {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; }
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.footer__name {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}

.footer__heading {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

/* Spodný pás: povinné údaje kampane vľavo, autorstvo vpravo.
   Údaje sú v riadku za sebou, oddelené bodkami — na troch samostatných
   riadkoch pôsobili ako zoznam, hoci je to jedna povinná poznámka. */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* obe strany majú rovnaký stred — pri rôznom počte riadkov inak „plávajú“ */
  align-items: center;
  gap: var(--space-4) var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  line-height: 1.7;
}

.footer__legal { flex: 1 1 320px; }
.footer__legal p { margin: 0; }

.footer__author {
  flex: 0 1 auto;
  text-align: left;
}
.footer__author p { margin: 0; }
.footer__author a { font-weight: var(--weight-medium); }

/* oddeľovač je ozdoba (v značke má aria-hidden), ale aj tak musí byť vidieť */
.footer__sep {
  margin-inline: var(--space-2);
  color: var(--color-text-muted);
}

@media (min-width: 700px) {
  .footer__author { text-align: right; }
}

/* ------------------------------------------------------------------
   15. Prázdne stavy, stránkovanie, omrvinky
   ------------------------------------------------------------------ */

.empty {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
}

.empty__title { margin: 0; color: var(--color-text); font-size: var(--text-h3); }

.empty p { margin: 0; max-width: 46ch; }

.empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-12);
  list-style: none;
  padding: 0;
}

.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-md);
  min-height: var(--control-md);
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); }

.pagination [aria-current="page"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-on);
  font-weight: var(--weight-bold);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--color-text-muted);
}

.breadcrumbs li + li::before { content: "→"; margin-right: var(--space-2); }

/* ------------------------------------------------------------------
   16. Lišta o súboroch cookie
   ------------------------------------------------------------------ */

.cookiebar {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 150;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
}

.cookiebar[hidden] { display: none; }

.cookiebar__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.cookiebar__text {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
}

.cookiebar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cookiebar__actions .btn { flex: 1 1 auto; min-width: 150px; }
/* Odznak na neskoršiu zmenu voľby */
.cookie-badge {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 140;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Medzera len v rozbalenom stave: popis má v zbalenom stave nulovú šírku,
     ale medzera za ikonou by zostala a posunula ikonu o polovicu doľava. */
  gap: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-raised);
  cursor: pointer;
  transition: width var(--duration-panel) var(--ease-out),
              color var(--duration-micro) var(--ease-out),
              border-color var(--duration-micro) var(--ease-out);
  overflow: hidden;
  white-space: nowrap;
}

.cookie-badge[hidden] { display: none; }

.cookie-badge svg { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; }

.cookie-badge__label {
  max-width: 0;
  opacity: 0;
  font-size: var(--text-sm);
  transition: max-width var(--duration-panel) var(--ease-out),
              opacity var(--duration-micro) var(--ease-out);
}

.cookie-badge:hover,
.cookie-badge:focus-visible {
  width: auto;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.cookie-badge:hover .cookie-badge__label,
.cookie-badge:focus-visible .cookie-badge__label {
  max-width: 220px;
  opacity: 1;
}

/* ------------------------------------------------------------------
   17. Pohyb
   ------------------------------------------------------------------ */

/* Obsah je predvolene viditeľný. Skryje sa len vtedy, keď skript beží
   a vie ho zase odkryť — inak by pri chybe JS zostala stránka prázdna. */
.reveal { opacity: 1; }

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease-out),
              transform 500ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover { transform: none; }
}
/* ------------------------------------------------------------------
   18. Pomocné triedy

   Namiesto atribútov style="…" v šablónach. Názvy a hodnoty zodpovedajú
   škále odstupov vyššie (mt-12 = 48 px atď.).
   ------------------------------------------------------------------ */

.m-0  { margin: 0; }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-12 { margin-top: var(--space-12); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.text-sm { font-size: var(--text-sm); }

@media print {
  .header, .footer, .nav-toggle, .hero__actions, .form,
  .cookiebar, .cookie-badge { display: none; }
  body { color: #000; background: #fff; }
  .hero { background: #fff; color: #000; }
}