/* =====================================================================
   WEB – mmatejova.sk
   Dizajn vychádza z letáku (letak/letak.css). Farby a písma sú v tokens.css.
   ---------------------------------------------------------------------
   Priorita: čitateľnosť pre seniorov.
   - základné písmo 20 px (html 125 % → rešpektuje nastavenie prehliadača)
   - riadkovanie 1,65, dĺžka riadku max 62 znakov
   - kontrast textu vždy ≥ 4,5 : 1
   - odkazy vždy podčiarknuté, klikacie plochy ≥ 48 × 48 px
   - žiadne animácie pri scrollovaní, žiadne automatické video
   ===================================================================== */

/* ---------------------------------------------------------------------
   ZÁKLAD
   --------------------------------------------------------------------- */

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

html {
  font-size: 125%;              /* 1rem = 20 px pri bežnom nastavení prehliadača */
  color-scheme: light;          /* identita je krémový papier – tmavý režim nemáme */
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* aby kotvy neskončili pod lepkavou hlavičkou */
  -webkit-text-size-adjust: 100%;
}
html[data-pismo="v"]  { font-size: 140%; }
html[data-pismo="vv"] { font-size: 155%; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--s-3);
  color: var(--green);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 6vw, 2.8rem); }
h2 { font-size: clamp(1.7rem, 5vw, 2.3rem); }
h3 { font-size: clamp(1.25rem, 3.5vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--terracotta-ink);
  text-underline-offset: .18em;
  text-decoration-thickness: .08em;
}
a:hover { color: var(--green); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.3em; }
li { margin-bottom: var(--s-2); }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }

.obal { width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s-5); }
.text { max-width: var(--w-text); }
.skryte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* preskočiť na obsah – pre čítačky obrazovky a klávesnicu */
.preskocit {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--green); color: var(--cream);
  padding: var(--s-3) var(--s-5); border-radius: var(--r);
  text-decoration: none; font-weight: 700;
}
.preskocit:focus { top: var(--s-4); color: var(--cream); }

/* ---------------------------------------------------------------------
   IKONY (Lucide, ISC licencia – rovnaké ako na letáku)
   --------------------------------------------------------------------- */
.ico {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

/* ---------------------------------------------------------------------
   TLAČIDLÁ
   Hlavné sú zelené (kontrast 8,6 : 1). Terakota je akcent, nie podklad
   pre bežný text – na kréme má len 4,0 : 1.
   --------------------------------------------------------------------- */
.tlacidlo {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 3rem; padding: var(--s-3) var(--s-5);
  background: var(--green); color: var(--cream);
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  border: 2px solid var(--green); border-radius: var(--r);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease;
}
.tlacidlo:hover { background: var(--green-hover); border-color: var(--green-hover); color: var(--cream); }
.tlacidlo[disabled] { opacity: .55; cursor: not-allowed; }

.tlacidlo--druhe { background: transparent; color: var(--green); border-color: var(--green); }
.tlacidlo--druhe:hover { background: var(--green-soft); color: var(--green); }

.tlacidlo--svetle { background: var(--cream); color: var(--green); border-color: var(--cream); }
.tlacidlo--svetle:hover { background: #fff; color: var(--green); border-color: #fff; }

/* obrysové tlačidlo na tmavom podklade (hero) */
.tlacidlo--obrys { background: transparent; color: var(--cream); border-color: rgba(246, 241, 231, .6); }
.tlacidlo--obrys:hover { background: rgba(246, 241, 231, .14); color: var(--cream); border-color: var(--cream); }

.tlacidlo--male { min-height: 2.6rem; padding: var(--s-2) var(--s-4); font-size: .9rem; }

/* ---------------------------------------------------------------------
   HLAVIČKA A NAVIGÁCIA
   Žiadny hamburger – pre seniorov je to bariéra. Odkazy sa jednoducho
   zalomia do dvoch riadkov.
   --------------------------------------------------------------------- */
.hlavicka {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 241, 231, .97);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(6px);
}
.hlavicka .obal {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
  padding-top: var(--s-3); padding-bottom: var(--s-3);
}
.znacka {
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  color: var(--green); text-decoration: none; line-height: 1.2;
  display: flex; align-items: center; gap: var(--s-3);
}
.znacka .cislo {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--terracotta); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; flex: none;
}
.znacka small { display: block; font-family: var(--sans); font-weight: 400; font-size: .68rem; color: var(--muted); }

.menu { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); list-style: none; margin: 0; padding: 0; }
.menu li { margin: 0; }
.menu a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: var(--s-2) var(--s-3);
  color: var(--green); font-weight: 600; font-size: .88rem;
  text-decoration: none; border-radius: var(--r-sm);
}
.menu a:hover { background: var(--green-soft); text-decoration: underline; }

/* prepínač veľkosti písma */
.pismo { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.pismo-popis { font-size: .78rem; color: var(--muted); }
.pismo button {
  min-width: 2.75rem; min-height: 2.75rem;
  background: var(--paper); color: var(--green);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-family: var(--serif); font-weight: 700; cursor: pointer; line-height: 1;
}
.pismo button:hover { background: var(--green-soft); }
.pismo button[aria-pressed="true"] { background: var(--green); color: var(--cream); border-color: var(--green); }
.pismo button.p1 { font-size: .85rem; }
.pismo button.p2 { font-size: 1rem; }
.pismo button.p3 { font-size: 1.2rem; }

@media (max-width: 860px) {
  /* Na telefóne hlavička NIE JE lepkavá – inak by zabrala pol obrazovky
     hneď po naskenovaní QR kódu. Ponuka odscrolluje preč a odkazy sú aj
     v hero sekcii a v pätičke. */
  .hlavicka { position: static; }
  .hlavicka .obal { gap: var(--s-3); padding-top: var(--s-3); padding-bottom: var(--s-3); }

  .znacka { font-size: .95rem; gap: var(--s-2); }
  .znacka .cislo { width: 1.7rem; height: 1.7rem; font-size: .95rem; }
  .znacka small { font-size: .62rem; }

  .menu {
    order: 3; width: 100%;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  }
  .menu a { min-height: 2.7rem; padding: var(--s-1) 2px; font-size: .78rem; justify-content: center; text-align: center; }

  .pismo { order: 4; margin-left: 0; width: 100%; justify-content: flex-end; }
  .pismo button { min-width: 2.5rem; min-height: 2.5rem; }
  .pismo-popis { margin-right: auto; }
}

@media (max-width: 359px) {
  .menu { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------
   HERO – vychádza z prednej strany letáku
   --------------------------------------------------------------------- */
.hero { background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%); color: var(--cream); overflow: hidden; }
.hero .obal {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-7);
  align-items: center;
  padding-top: var(--s-7); padding-bottom: var(--s-7);
}
.hero h1, .hero h2, .hero h3 { color: var(--cream); }

.hero-tag {
  display: inline-block; background: var(--cream); color: var(--green);
  font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-sm);
  margin-bottom: var(--s-5);
}
.hero-meno { font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.1; }
.hero-rola { font-size: 1rem; color: rgba(246, 241, 231, .88); margin-top: var(--s-2); }
.hero-linka { width: 6rem; height: 5px; background: var(--preliv); margin: var(--s-5) 0 var(--s-4); border-radius: 3px; }
.hero-slogan {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 4.2rem); line-height: 1; letter-spacing: -.01em;
  margin: 0 0 var(--s-5); color: var(--cream);
}
.hero-slogan .bodka { color: var(--terracotta); }
.hero-tlacidla { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }

.hero-badge { display: flex; align-items: center; gap: var(--s-4); }
.hero-badge .kruh {
  width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--terracotta); color: var(--na-akcente);
  font-family: var(--serif); font-weight: 700; font-size: 2.1rem;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.hero-badge .popis { font-size: .9rem; line-height: 1.35; color: rgba(246, 241, 231, .92); max-width: 16rem; }
.hero-badge .popis strong { display: block; color: var(--cream); font-size: 1rem; }

/* Druhá kandidatúra – menší kruh aj text. Starostka má vždy prednosť. */
.hero-badge--druhe { margin-top: var(--s-4); }
.hero-badge--druhe .kruh {
  width: 2.8rem; height: 2.8rem; font-size: 1.3rem;
  background: transparent; color: var(--terracotta);
  border: 3px solid var(--terracotta);
}
.hero-badge--druhe .popis { font-size: .82rem; }
.hero-badge--druhe .popis strong { font-size: .9rem; }

.hero-foto {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: #c9c8c4; aspect-ratio: 4 / 5;
}
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }

@media (max-width: 900px) {
  .hero .obal { grid-template-columns: 1fr; gap: var(--s-5); padding-top: var(--s-5); }
  .hero-foto { order: -1; aspect-ratio: 3 / 2; max-height: 22rem; }
  .hero-foto img { object-position: 50% 18%; }
}

/* ---------------------------------------------------------------------
   SEKCIE
   --------------------------------------------------------------------- */
.sekcia { padding: var(--s-8) 0; border-top: 1px solid var(--rule); scroll-margin-top: 5.5rem; }
.sekcia:first-of-type { border-top: 0; }
.sekcia--svetla { background: var(--green-soft); }
.sekcia--papier { background: var(--paper); }

.nadpis-sekcie { margin-bottom: var(--s-6); }
.nadpis-sekcie .oko {
  font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--terracotta-ink); margin-bottom: var(--s-2);
}
.nadpis-sekcie p { color: var(--muted); max-width: var(--w-text); margin-bottom: 0; }

/* ---------------------------------------------------------------------
   KARTY, FAKTOVÉ BOXY
   --------------------------------------------------------------------- */
.karta {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r);
  padding: var(--s-5); box-shadow: var(--shadow-sm);
}
.mriezka { display: grid; gap: var(--s-5); }
/* min() je tu nutné: základ je 20 px (html 125 %), takže 20rem = 400 px.
   Bez neho si mriežka vynúti 400 px aj na 360 px širokom telefóne a odreže
   sa pravý okraj celej stránky. */
.mriezka--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.mriezka--3 { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }

.fakt {
  background: var(--green-soft); border-left: 5px solid var(--green);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s-4) var(--s-5); margin: var(--s-4) 0;
  color: var(--green-deep); font-size: .95rem;
}
.fakt strong { color: var(--green); }
.fakt :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   PILIERE PROGRAMU
   Odrážky z letáku sú viditeľné hneď – to je posolstvo. Rozbaľuje sa len
   hĺbka (prečo, ako, z čoho), natívnym <details>, čiže aj bez JavaScriptu.
   --------------------------------------------------------------------- */
.piliere { display: grid; gap: var(--s-5); }

.pilier { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }

.pilier-hlava { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-5) 0; }
.pilier-hlava .ikona-kruh {
  width: 3.2rem; height: 3.2rem; border-radius: 50%; flex: none;
  background: var(--terracotta); color: var(--na-akcente);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.pilier-hlava h3 { margin: 0; }
.pilier-hlava .pod {
  display: block; font-family: var(--sans); font-weight: 700; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--terracotta-ink); margin-bottom: 2px;
}

.pilier-zaklad { padding: var(--s-4) var(--s-5) var(--s-5); }
.pilier-zaklad > *:last-child { margin-bottom: 0; }

.pilier-viac { border-top: 1px solid var(--rule); background: var(--cream); }
.pilier-viac > summary {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 3.5rem; padding: var(--s-3) var(--s-5);
  color: var(--green); font-weight: 700; font-size: .95rem;
  cursor: pointer; list-style: none;
}
.pilier-viac > summary::-webkit-details-marker { display: none; }
.pilier-viac > summary:hover { background: var(--green-soft); }
.pilier-viac > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.pilier-viac .sipka { margin-left: auto; font-size: 1.4rem; transition: transform .18s ease; }
.pilier-viac[open] .sipka { transform: rotate(180deg); }
.pilier-viac[open] > summary { border-bottom: 1px solid var(--rule); }
.pilier-telo { padding: var(--s-5); background: var(--paper); }
.pilier-telo > *:first-child { margin-top: 0; }
.pilier-telo > *:last-child { margin-bottom: 0; }

/* odrážky z letáku – terakotový štvorček */
.odrazky { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.odrazky li { position: relative; padding-left: 1.6rem; margin-bottom: var(--s-3); }
.odrazky li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; background: var(--terracotta); border-radius: 2px;
}
.odrazky--velke li { font-size: 1.05rem; }

.podnadpis {
  font-family: var(--sans); font-weight: 700; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--terracotta-ink);
  margin: var(--s-5) 0 var(--s-3);
}

.zdroje { font-size: .82rem; color: var(--muted); margin-top: var(--s-4); }
.zdroje a { color: var(--muted); }
.zdroje a:hover { color: var(--green); }

/* nesľubujem – čestná poznámka */
.nesubujem {
  border: 1px dashed var(--rule); border-radius: var(--r);
  padding: var(--s-4) var(--s-5); margin-top: var(--s-5);
  font-size: .95rem; color: var(--muted);
}
.nesubujem strong { color: var(--ink); }

/* ---------------------------------------------------------------------
   Z ČOHO TO ZAPLATÍME
   --------------------------------------------------------------------- */
.financovanie { list-style: none; padding: 0; margin: 0; }
.financovanie li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-3) 0; border-top: 1px dotted var(--rule); margin: 0;
}
.financovanie li:first-child { border-top: 0; }
/* Bez white-space: nowrap. Dlhá hodnota („výzva otvorená, Skýcov je oprávnená
   obec") roztiahla riadok na 518 px a tým celú stránku – na mobile sa potom
   odrezala pravá štvrtina všetkého. Čísla držia pohromade nezlomiteľnými
   medzerami priamo v texte. */
.financovanie .kolko { color: var(--terracotta-ink); font-weight: 700; }

@media (max-width: 680px) {
  /* na úzkej obrazovke je dvojstĺpec aj tak nečitateľný – radšej pod seba */
  .financovanie li { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------
   AKO BUDEM PRACOVAŤ – zelený box ako na chlopni letáku
   --------------------------------------------------------------------- */
.zeleny-box {
  background: var(--green); color: var(--cream);
  border-radius: var(--r); padding: var(--s-5) var(--s-6);
}
.zeleny-box h3, .zeleny-box h2 { color: var(--cream); }
.zeleny-box a { color: var(--terracotta); }
.fajky { list-style: none; padding: 0; margin: 0; }
.fajky li { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-3); }
.fajky li:last-child { margin-bottom: 0; }
.fajky .ico { color: var(--terracotta); margin-top: .35em; stroke-width: 3; }

/* motto pod bodmi v zelenom boxe */
.motto {
  font-family: var(--serif); font-weight: 700;
  font-size: 1.15rem; letter-spacing: .01em;
  margin: var(--s-5) 0 0; color: var(--terracotta);
}
.motto--tiche { font-size: .95rem; font-weight: 600; margin-top: var(--s-2); color: rgba(246, 241, 231, .85); }

/* citát z letáku */
.citat {
  border-left: 5px solid var(--terracotta);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  margin: var(--s-5) 0;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.2rem, 3vw, 1.45rem); line-height: 1.35;
  color: var(--terracotta-ink);
}
.podpis { font-family: var(--serif); font-weight: 700; color: var(--green); font-size: 1.1rem; }
.podpis small { display: block; font-family: var(--sans); font-weight: 400; font-size: .82rem; color: var(--muted); }

/* ---------------------------------------------------------------------
   AKO VOLIŤ – číslované kroky
   --------------------------------------------------------------------- */
.kroky { counter-reset: krok; list-style: none; padding: 0; margin: 0; }
.kroky li {
  counter-increment: krok; position: relative;
  padding-left: 3.5rem; margin-bottom: var(--s-5); min-height: 2.5rem;
}
.kroky li::before {
  content: counter(krok); position: absolute; left: 0; top: -.1em;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--green); color: var(--cream);
  font-weight: 700; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
.kroky li:last-child { margin-bottom: 0; }
.cislo2 {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem;
  background: var(--terracotta); color: var(--na-akcente);
  font-weight: 700; border-radius: var(--r-sm); vertical-align: -.35em;
}
/* „2 – Ing. Martina Matejová“ drží pokope. Bez toho sa to na užšom okne
   zalomí tak, že „Ing.“ zostane samo na konci riadka. Ak sa celá dvojica
   na riadok nezmestí, prehliadač ju presunie nadol vcelku. */
.volba-riadok { white-space: nowrap; }

/* číslo do zastupiteľstva – rovnaký tvar, ale obrysom, nech dvojka zostane silnejšia */
.cislo2--male {
  background: transparent; color: var(--terracotta-ink);
  box-shadow: inset 0 0 0 2px var(--terracotta-ink);
}

/* ---------------------------------------------------------------------
   FORMULÁRE – veľké polia, jasné popisy
   --------------------------------------------------------------------- */
.pole { margin-bottom: var(--s-5); }
.pole label, .legenda { display: block; font-weight: 700; margin-bottom: var(--s-2); color: var(--green); }
.pole .pomoc { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); margin-bottom: var(--s-2); }

/* Blazor InputText vykreslí <input> BEZ atribútu type, preto aj input:not([type]). */
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="tel"], input:not([type]), textarea, select {
  width: 100%; padding: var(--s-3) var(--s-4);
  font-family: var(--sans); font-size: 1rem; line-height: 1.5; color: var(--ink);
  background: #fff; border: 2px solid var(--rule); border-radius: var(--r);
  min-height: 3rem;
}
textarea { min-height: 9rem; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--green); outline: 3px solid var(--focus); outline-offset: 1px; }

.zaskrtnutie { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-4); }
.zaskrtnutie input[type="checkbox"] { width: 1.5rem; height: 1.5rem; margin: .15rem 0 0; flex: none; accent-color: var(--green); }
.zaskrtnutie label { font-weight: 400; color: var(--ink); margin: 0; }

.chyba { color: #8c2f1c; font-weight: 600; }
.oznam {
  border-radius: var(--r); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5);
  border: 1px solid var(--rule); background: var(--green-soft); color: var(--green-deep);
}
.oznam--chyba { background: #fbe9e5; border-color: #e3b5a8; color: #7d2a18; }

/* pasca na roboty – pre človeka neviditeľná */
.pasca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------
   NÁPADY
   --------------------------------------------------------------------- */
.napady { display: grid; gap: var(--s-4); }
.napad { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s-5); }
.napad-text { font-size: 1.05rem; margin-bottom: var(--s-4); }
.napad-pata { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); justify-content: space-between; }
.napad-kto { font-size: .85rem; color: var(--muted); }

.hlas-tlacidlo {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.75rem; padding: var(--s-2) var(--s-4);
  background: var(--paper); color: var(--green);
  border: 2px solid var(--green); border-radius: 999px;
  font-family: var(--sans); font-size: .9rem; font-weight: 700; cursor: pointer;
}
.hlas-tlacidlo:hover { background: var(--green-soft); }
.hlas-tlacidlo[disabled], .hlas-tlacidlo[aria-disabled="true"] { border-color: var(--rule); color: var(--muted); cursor: default; background: var(--cream); }
.hlas-pocet { font-variant-numeric: tabular-nums; }

.poznamka { font-size: .85rem; color: var(--muted); }

/* ---------------------------------------------------------------------
   AKTUALITY
   --------------------------------------------------------------------- */
.aktualita { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: start; padding: var(--s-5) 0; border-top: 1px solid var(--rule); }
.aktualita:first-child { border-top: 0; padding-top: 0; }
.aktualita .datum {
  background: var(--green); color: var(--cream); border-radius: var(--r);
  padding: var(--s-3); text-align: center; min-width: 4.5rem; line-height: 1.15;
}
.aktualita .datum .den { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.5rem; }
.aktualita .datum .mesiac { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.aktualita h3 { margin-bottom: var(--s-2); }
@media (max-width: 560px) { .aktualita { grid-template-columns: 1fr; gap: var(--s-3); } .aktualita .datum { justify-self: start; } }

/* ---------------------------------------------------------------------
   FOTKY
   --------------------------------------------------------------------- */
.foto { position: relative; border-radius: var(--r); overflow: hidden; background: #ccc; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-6) var(--s-4) var(--s-3);
  background: linear-gradient(to top, rgba(47, 31, 82, .9), rgba(47, 31, 82, 0));
  color: var(--cream); font-size: .9rem; line-height: 1.3;
}
.foto figcaption strong { display: block; font-family: var(--serif); font-size: 1.05rem; }

/* ---------------------------------------------------------------------
   KONTAKT
   --------------------------------------------------------------------- */
.kontakty { list-style: none; padding: 0; margin: 0; }
.kontakty li { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.kontakty .ico { color: var(--terracotta); font-size: 1.4rem; }
/* e-mail je jedno dlhé slovo – na úzkom telefóne sa musí dať zalomiť,
   inak pretečie stránku */
.kontakty a { font-weight: 600; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------
   VÝZVA NA ZÁVER (terakotová – text je veľký, kontrast stačí)
   --------------------------------------------------------------------- */
.vyzva {
  background: var(--preliv);
  color: var(--ink);
  border-radius: var(--r-lg); padding: var(--s-6) var(--s-6);
  text-align: center;
}
.vyzva h2 { color: var(--na-akcente); font-size: clamp(1.6rem, 5vw, 2.4rem); }
.vyzva p { color: var(--ink); margin-bottom: 0; }
.vyzva .velke { font-family: var(--serif); font-weight: 700; font-size: 1.3em; }
.vyzva-druhe { font-size: 1.05rem; margin-top: var(--s-2) !important; }
.vyzva-meno { font-size: .9rem; margin-top: var(--s-4) !important; color: var(--na-akcente); }

/* ---------------------------------------------------------------------
   PÄTIČKA
   --------------------------------------------------------------------- */
.paticka { background: var(--green-deep); color: rgba(246, 241, 231, .88); padding: var(--s-7) 0 var(--s-6); margin-top: var(--s-8); }
.paticka a { color: var(--terracotta); }
.paticka .obal { display: grid; gap: var(--s-5); }
.paticka .povinne {
  border-top: 1px solid rgba(246, 241, 231, .2); padding-top: var(--s-4);
  font-size: .85rem; line-height: 1.5;
}

/* ---------------------------------------------------------------------
   MORATÓRIUM
   --------------------------------------------------------------------- */
.moratorium {
  background: var(--green-soft); border: 2px solid var(--green);
  border-radius: var(--r); padding: var(--s-5) var(--s-6); color: var(--green-deep);
}
.moratorium h3 { margin-bottom: var(--s-2); }

/* ---------------------------------------------------------------------
   ADMIN – jednoduchý, nie pekný
   --------------------------------------------------------------------- */
.admin { padding: var(--s-6) 0; }
.admin table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin th, .admin td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.admin th { color: var(--green); font-weight: 700; }
.admin .akcie { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.stav { display: inline-block; padding: 2px var(--s-3); border-radius: 999px; font-size: .78rem; font-weight: 700; }
.stav--novy { background: #fdf0d5; color: #7a5410; }
.stav--schvaleny { background: var(--green-soft); color: var(--green); }
.stav--zamietnuty { background: #f3eceb; color: var(--muted); }

/* ---------------------------------------------------------------------
   ŠTATISTIKA v administrácii (docs/navrh-statistiky.md)

   Pruhy a grafy sú SVG, nie <div style="width:…"> – CSP na tomto webe
   nepovoľuje vložené štýly, takže šírka sa musí zapísať atribútom vo vnútri
   SVG. Farby preto chodia cez fill, nie cez background.
   --------------------------------------------------------------------- */
.obdobia { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0; }
.obdobia a {
  padding: var(--s-2) var(--s-4); border: 1px solid var(--rule); border-radius: 999px;
  font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--green);
}
.obdobia a:hover { background: var(--green-soft); }
.obdobia a.je-vybrate { background: var(--green); border-color: var(--green); color: #fff; }

.teraz { margin: var(--s-5) 0; font-size: 1.05rem; }
.teraz .poznamka { display: inline; margin-left: var(--s-2); }

.karty-cisel {
  display: grid; gap: var(--s-4); margin: var(--s-5) 0 var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.cislo-karta {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r); padding: var(--s-5);
}
.cislo-karta .cislo {
  font-family: var(--serif); font-weight: 700; font-size: 2rem;
  line-height: 1.1; color: var(--green); margin: 0;
}
.cislo-karta .popis { margin: var(--s-1) 0 0; font-size: .9rem; color: var(--muted); }
.cislo-karta .poznamka { margin: var(--s-2) 0 0; font-size: .8rem; }
.zmena { margin: var(--s-2) 0 0; font-size: .8rem; font-weight: 700; }
.zmena--hore { color: var(--terracotta-ink); }
.zmena--dole { color: var(--muted); }

/* --- pruh k číslu --- */
.pruh { display: block; width: 100%; height: .6rem; }
.pruh-podklad { fill: var(--green-soft); }
.pruh-hodnota { fill: var(--green); }
.pruh-hodnota--doraz { fill: var(--terracotta-ink); }

.rebricek { width: 100%; }
.admin .rebricek th, .admin .rebricek td { border-bottom: 1px solid var(--rule); vertical-align: middle; }
.admin .rebricek th { font-weight: 600; color: var(--ink); width: 40%; }
.rebricek-pruh { width: 40%; }
.rebricek-cislo { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rebricek-cislo small { display: block; color: var(--muted); font-weight: 400; }
.bunka-pruh { display: flex; align-items: center; gap: var(--s-3); min-width: 9rem; }
.bunka-pruh .pruh { flex: 1; }
.bunka-pruh span { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- stĺpcový graf --- */
.graf { margin: var(--s-4) 0 var(--s-6); }
.stlpce { display: block; width: 100%; height: 9rem; overflow: visible; }
.stlpce-stlpec { fill: var(--green); }
.stlpce-stlpec:hover { fill: var(--green-deep); }
.stlpce-mriezka { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.stlpce-popisy {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  margin-top: var(--s-2); text-align: center;
}
.stlpce-popisy small { font-size: .7rem; color: var(--muted); }
.stlpce-znacka { display: block; color: var(--terracotta-ink); font-size: .9rem; line-height: 1; }

.dvojstlpec {
  display: grid; gap: var(--s-6) var(--s-7); margin-top: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.dvojstlpec h2 { margin-top: 0; }
.varovanie { color: #9a3412; }

/* ---------------------------------------------------------------------
   TLAČ – keby si to niekto chcel vytlačiť
   --------------------------------------------------------------------- */
@media print {
  .hlavicka, .pismo, .hero-tlacidla, .napad-pata, form, .preskocit { display: none !important; }
  body { background: #fff; }
  .pilier-telo { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* ---------------------------------------------------------------------
   PLACEHOLDER – rovnako ako žlté .todo na letáku.
   Nesmie ostať ani jeden, kým web pôjde von (docs/todo.md D).
   --------------------------------------------------------------------- */
.todo {
  background: #ffe97a;
  border: 1px dashed #c9a400;
  border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-4);
  color: #4a3c00;
  font-size: .95rem;
}
.todo strong { color: #3a2f00; }
.todo :last-child { margin-bottom: 0; }
.todo--riadok { display: inline; padding: 0 .3em; border: 0; }

/* ---------------------------------------------------------------------
   VIDEO – YouTube sa načíta až po kliknutí
   --------------------------------------------------------------------- */
.video {
  position: relative; aspect-ratio: 16 / 9; max-width: 56rem; margin: 0 auto;
  background: var(--green-deep); border-radius: var(--r-lg); overflow: hidden;
}
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-nahlad { display: block; width: 100%; height: 100%; position: relative; }
.video-nahlad img { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 5rem; height: 5rem; border-radius: 50%;
  background: var(--green); color: var(--cream);
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
  box-shadow: var(--shadow-md);
}
.video-nahlad:hover .video-play { background: var(--green); }
.video-play .ico { fill: currentColor; stroke: none; margin-left: .15em; }

/* ---------------------------------------------------------------------
   ÚZKE TELEFÓNY – získať späť šírku pre text
   --------------------------------------------------------------------- */
@media (max-width: 560px) {
  .obal { padding: 0 var(--s-4); }

  .pilier-hlava { padding: var(--s-4) var(--s-4) 0; gap: var(--s-3); }
  .pilier-hlava .ikona-kruh { width: 2.6rem; height: 2.6rem; font-size: 1.3rem; }
  .pilier-zaklad { padding: var(--s-3) var(--s-4) var(--s-4); }
  .pilier-viac > summary { padding: var(--s-3) var(--s-4); }
  .pilier-telo { padding: var(--s-4); }

  .karta { padding: var(--s-4); }
  .sekcia { padding: var(--s-7) 0; }
  .zeleny-box { padding: var(--s-4) var(--s-5); }
  .vyzva { padding: var(--s-5) var(--s-4); }

  .kroky li { padding-left: 3rem; }
  .kroky li::before { width: 2.2rem; height: 2.2rem; font-size: 1rem; }

  /* „2 – Ing. Martina Matejová“ potrebuje 252 px a v odsadenom kroku ich
     na telefóne nemá – chýbalo 19 px. Dostane preto vlastný riadok a vystúpi
     z odsadenia kroku (-3rem presne ruší padding vyššie). Číslo kroku je
     v tej chvíli už o pár riadkov vyššie, takže sa nič neprekrýva. */
  .volba-riadok { display: block; margin-left: -3rem; margin-top: var(--s-2); }
}

/* Pod 340 px už ani celá šírka karty nestačí: dvojica meria 252 px a karta
   pri 320 px ponúka 238 px. Zmenšenie na .9em ju stiahne na 230 px.
   Nad 340 px je písmo plné – pri 375 px zostáva 41 px rezervy. */
@media (max-width: 340px) {
  .volba-riadok { font-size: .9em; }
}

/* ---------------------------------------------------------------------
   POMOCNÉ TRIEDY
   Používame ich namiesto style="..." – Content-Security-Policy inline
   štýly blokuje (style-src 'self') a nechceme ju kvôli pár okrajom
   rozvoľňovať na 'unsafe-inline'.
   --------------------------------------------------------------------- */
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.ml-5 { margin-left: var(--s-5); }
.stred { margin-left: auto; margin-right: auto; }
.riadkovo { display: inline; }
.sprite { position: absolute; }

.karta--uzka { max-width: 28rem; }
.karta--formular { max-width: 44rem; }
.bunka-text { max-width: 32rem; }
.bunka-text--sirsia { max-width: 40rem; }
.foto--3-2 { aspect-ratio: 3 / 2; }
.obrazok-aktuality { border-radius: var(--r); margin-top: var(--s-3); }