/* =========================================================
   Pro Bohutín — hlavní stylopis
   Design tokeny podle handoff balíčku (reference/README.md)
   ========================================================= */

:root {
  /* ---- Barvy obce ---- */
  --green: #009D59;
  --yellow: #FCEB15;
  --ink: #1D1B19;
  --white: #FFFFFF;

  /*
   * Značková zelená #009D59 má proti bílé kontrast 3,5:1. To stačí na velký
   * text a na rámečky, ale ne na běžný text ani na popisky tlačítek, kde
   * WCAG AA žádá 4,5:1. Pro všechno, co nese text — zelené plochy, tlačítka,
   * odkazy, malá čísla — je proto o odstín tmavší varianta. Vedle sebe je
   * skoro nerozeznáte, ale text na ní je čitelný i pro slabší oči.
   */
  --green-deep: #00733F;

  /* ---- Odvozené neutrály (nové nezavádět, používat tyto) ---- */
  --surface: #F4F3F0;      /* sekundární plocha: anketa, formulář, boční box */
  --line: #E7E5E1;         /* linky a okraje */
  --line-input: #DDD9D3;   /* okraj vstupního pole */
  --line-row: #ECEAE6;     /* okraj řádku ankety */
  --text-strong: #3A3630;  /* tmavší body text */
  --muted: #6B6862;        /* sekundární text */
  /* Návrh měl na popisky #8A867F (3,6:1). Obsahové popisky jsou proto
     v --muted; #8A867F zůstává jen na popiscích fotoplaceholderů, které
     po nahrání fotek zmizí. */
  --muted-soft: #8A867F;
  --on-dark: #9C9891;      /* text v patičce */
  --on-dark-lead: #C9C6C0; /* perex v hero */
  --on-green-lead: #DCF0E6;/* perex na zelené */
  --ink-line: #33302B;     /* dělicí linka na tmavém */
  --ink-line-2: #4A4741;   /* okraj obrysového tlačítka na tmavém */
  --poll-fill: #E6F5EE;    /* výplň pruhu v anketě */

  --stripes-light: repeating-linear-gradient(135deg, #EFEDE9 0 10px, #E4E1DC 10px 20px);
  --stripes-dark: repeating-linear-gradient(135deg, #2A2723 0 12px, #232019 12px 24px);
  --stripes-dark-line: #3A3630;

  --err: #B4291F;
  --ok: #1F6B3A;

  /* ---- Typografie ---- */
  --font-head: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Rozměry ----
   * Kontejner 1220 px a boční odsazení 32 px podle návrhu; na užších
   * displejích se odsazení stahuje na 20 px, jak doporučuje handoff.
   */
  --max-w: 1220px;
  --gutter: clamp(20px, 3.2vw, 32px);

  /* Vertikální odsazení sekcí. Horní hodnota je vždy ta z návrhu. */
  --y-hero-top: clamp(56px, 8vw, 96px);
  --y-hero-bottom: clamp(60px, 8.5vw, 104px);
  --y-section: clamp(64px, 8.2vw, 100px);
  --y-poll: clamp(60px, 7.2vw, 88px);
  --y-candidates: clamp(64px, 7.8vw, 96px);
  --y-cta: clamp(52px, 5.9vw, 72px);
  --y-page-head: clamp(52px, 6.5vw, 80px);
  --y-page-body: clamp(52px, 5.9vw, 72px);

  --gap-cards: 20px;
  --gap-cand: 24px;
  --gap-cols: clamp(40px, 5.2vw, 64px);
  --gap-cols-wide: clamp(40px, 5.9vw, 72px);

  --transition: 140ms ease;
}

/* ---------- Základ ---------- */

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

html { scroll-behavior: smooth; }

/* Sticky hlavička by jinak zakryla cíl odkazu s kotvou. */
:target { scroll-margin-top: 110px; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

p { text-wrap: pretty; }

h1, h2, h3 { text-wrap: balance; }

a { color: var(--green-deep); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

input, textarea, button, select { font: inherit; color: inherit; }

::selection { background: var(--yellow); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--focus-ring, var(--green-deep));
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--yellow);
  color: var(--ink);
  padding: 14px 22px;
  font: 700 14px/1 var(--font-body);
}
.skip-link:focus { left: 0; }

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

/* ---------- Rozvržení ---------- */

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.page { min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1; }

.section--white { background: var(--white); padding-block: var(--y-section); }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }

/*
 * Barva textu i nadtitulku se řídí podkladem. Tmavé a zelené bloky jen
 * přepíšou proměnné — nový blok stačí dopsat do seznamu a text v něm
 * se srovná sám, včetně libovolně vnořených odstavců.
 */
:root {
  --eyebrow-color: var(--green-deep);
  --focus-ring: var(--green-deep);
}
.hero, .page-head--dark, .page-head--green, .sec-green {
  --eyebrow-color: var(--yellow);
}
/* Na žluté ploše by žlutý ani zelený rámeček nebyl vidět. */
.cta { --focus-ring: var(--ink); }
.hero, .page-head--dark { --focus-ring: var(--yellow); }
.page-head--green, .sec-green { --focus-ring: var(--white); }

/* ---------- Typografie ---------- */

.eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eyebrow-color);
}

.h1-hero {
  margin: 26px 0 0;
  font: 800 clamp(34px, 5.4vw, 66px)/1.02 var(--font-head);
  letter-spacing: -0.03em;
}

.h1-page {
  margin: 16px 0 0;
  font: 800 clamp(34px, 4.9vw, 60px)/1.04 var(--font-head);
  letter-spacing: -0.03em;
  max-width: 900px;
}
.h1-page--sm {
  margin-top: 14px;
  font-size: clamp(32px, 4.1vw, 50px);
  line-height: 1.06;
}

.h2 {
  margin: 14px 0 0;
  font: 800 clamp(28px, 3.6vw, 44px)/1.08 var(--font-head);
  letter-spacing: -0.025em;
}
.h2--lg { font-size: clamp(30px, 3.9vw, 48px); }
.h2--sm { font-size: clamp(26px, 3.3vw, 40px); line-height: 1.1; }

.tx-green { color: var(--green); }
.tx-yellow { color: var(--yellow); }

/* Na bílé ploše potřebuje zelené zvýraznění tmavší odstín. */
.section--white .tx-green,
.section--surface .tx-green,
.page-body .tx-green { color: var(--green-deep); }

.lead {
  margin: 22px 0 0;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  color: var(--text-strong);
}
.lead--hero {
  margin-top: 24px;
  max-width: 560px;
  line-height: 1.55;
  color: var(--on-dark-lead);
}
.lead--dark { max-width: 680px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--on-dark-lead); }
.lead--green { max-width: 680px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--on-green-lead); }
.lead--muted { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--muted); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

/* ---------- Tlačítka ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 16px 28px;
  font: 700 16px/1 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover { text-decoration: none; }

.btn--green { background: var(--green-deep); color: var(--white); }
.btn--green:hover { background: var(--yellow); color: var(--ink); }

.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--green-deep); color: var(--white); }

.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { background: var(--yellow); color: var(--ink); }

.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--yellow:hover { background: var(--white); color: var(--ink); }

/* Obrysové na tmavém podkladu */
.btn--ghost-dark { background: transparent; border-color: var(--ink-line-2); color: var(--white); }
.btn--ghost-dark:hover { border-color: var(--white); color: var(--white); }

/* Obrysové na světlém podkladu */
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }

.btn--sm { padding: 13px 22px; font-size: 15px; white-space: nowrap; }
.btn--lg { padding: 18px 34px; font-size: 17px; }

.btn-row { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }

/* ---------- Hlavička ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__bar {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Trikolóra obce pod hlavičkou */
.tricolor {
  height: 3px;
  background: linear-gradient(90deg,
    var(--green) 0 33%,
    var(--yellow) 33% 66%,
    var(--ink) 66% 100%);
}

.lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}
.lockup:hover { color: var(--ink); text-decoration: none; }
.lockup__crest { height: 44px; width: auto; flex: none; }
.lockup__text { display: flex; flex-direction: column; line-height: 1.15; }
.lockup__name { font: 800 17px/1.15 var(--font-head); letter-spacing: -0.01em; }
.lockup__sub { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  padding: 10px 14px;
  border-radius: 8px;
  font: 600 15px/1 var(--font-body);
  color: var(--ink);
  text-decoration: none;
}
.nav__link:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.nav__link[aria-current="page"] { background: var(--surface); font-weight: 700; }
.nav .btn { margin-left: 8px; padding: 11px 20px; font-size: 15px; }

/* Hamburger — návrh je desktopový, na mobilu se nabídka schová pod tlačítko. */
.burger {
  display: none;
  width: 44px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger span {
  display: block;
  width: 18px; height: 2px;
  margin: 2px auto;
  background: var(--ink);
}
.menu { display: none; }

/* ---------- Hero ---------- */

.hero {
  background: var(--ink);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--y-hero-top) var(--gutter) var(--y-hero-bottom);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--gap-cols);
  align-items: center;
}

.hero__badge {
  display: inline-block;
  margin: 0;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  font: 700 13px/1.2 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--ink-line);
}
.hero__stat-value { font: 800 30px/1.1 var(--font-head); color: var(--yellow); }
.hero__stat-label { font-size: 14px; color: var(--on-dark); }

.hero__figure { position: relative; }
/* Dekorativní kruh za fotkou. */
.hero__figure::before {
  content: "";
  position: absolute;
  inset: -18px -18px auto auto;
  width: 180px; height: 180px;
  background: var(--green);
  border-radius: 999px;
  opacity: 0.35;
}
.hero__photo { position: relative; border-radius: 20px; }

/*
 * Prezentace fotek v hero. Fotky leží na sobě a prolínají se; viditelnost
 * první drží CSS (`:first-child`), takže bez JavaScriptu zůstane vidět ona
 * místo prázdného rámu. Skript pak přebírá řízení atributem `data-aktivni`.
 */
.hero__photo--slideshow { position: relative; }

.hero__slides {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  background: var(--stripes-dark);
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}
.hero__slide:first-child { opacity: 1; }
/* Jakmile skript převezme řízení, rozhoduje o viditelnosti jen tenhle atribut. */
[data-hero-slideshow][data-prevzato="true"] .hero__slide { opacity: 0; }
[data-hero-slideshow][data-prevzato="true"] .hero__slide[data-aktivni="true"] { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

.hero__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.hero__dot {
  width: 10px; height: 10px;
  padding: 0;
  border: 1px solid var(--ink-line-2);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.hero__dot:hover { border-color: var(--white); }
.hero__dot[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); }

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

/* ---------- Fotky a placeholdery ---------- */

.ph {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  background: var(--stripes-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph__hint {
  font: 400 11px/1.4 var(--font-mono);
  color: var(--muted-soft);
  text-align: center;
  padding: 10px;
}

.ph--hero {
  aspect-ratio: 4 / 5;
  align-items: flex-end;
  padding: 22px;
  background: var(--stripes-dark);
  border: 1px solid var(--stripes-dark-line);
}
.ph--hero .ph__hint {
  font-size: 12px;
  color: var(--on-dark);
  background: var(--ink);
  padding: 8px 12px;
  border-radius: 6px;
}
/* S nahranou fotkou placeholderové odsazení nemá co dělat. */
.ph--hero:has(img) { padding: 0; border-color: transparent; }

.ph--square { aspect-ratio: 1 / 1; }
.ph--wide { aspect-ratio: 4 / 3; }
.ph--map { height: 200px; border-radius: 14px; }

/*
 * Volební pruh nad hlavičkou. Zelená je tmavší varianta — nese text, takže
 * značková #009D59 by na kontrast nestačila (viz poznámka u tokenů nahoře).
 */
.slogan {
  background: var(--green-deep);
  color: var(--white);
  --focus-ring: var(--white);
}
.slogan__text {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(24px, 3.6vw, 44px) var(--gutter);
  text-align: center;
  /* Spodní mez platí na mobilu, kde 4vw ještě nic nedává — proto rovnou 25px. */
  font: 800 clamp(25px, 4vw, 38px)/1.2 var(--font-head);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Na zelené by zelené zvýraznění zaniklo, žluté funguje (kontrast 4,8:1). */
.slogan .tx-green { color: var(--yellow); }

/* ---------- O nás ---------- */

.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-cards);
  margin-top: 52px;
}
.card-about {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
}
.card-about__mark {
  width: 34px; height: 34px;
  border-radius: 8px;
}
.card-about__mark--green { background: var(--green); }
.card-about__mark--yellow { background: var(--yellow); }
.card-about__mark--ink { background: var(--ink); }
.card-about__title { margin: 18px 0 0; font: 700 19px/1.2 var(--font-head); }
.card-about__text { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ---------- Anketa ---------- */

.poll {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--y-poll) var(--gutter);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--gap-cols);
  align-items: start;
}
.poll__text { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.poll__total {
  margin: 24px 0 0;
  font: 400 13px/1.5 var(--font-mono);
  color: var(--muted);
}

.poll__panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

/*
 * Řádek ankety je tlačítko ve formuláři, takže hlasování funguje i bez
 * JavaScriptu — odešle se, server hlas zapíše a vrátí návštěvníka zpět.
 * Skript to pak převezme a pruhy překreslí bez načtení stránky.
 */
.poll__row {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 16px 18px;
  border: 1px solid var(--line-row);
  border-radius: 12px;
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition);
}
.poll__row:hover { border-color: var(--green); }

.poll__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--poll-fill);
  transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.poll__line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}
.poll__radio {
  width: 20px; height: 20px;
  flex: none;
  border: 2px solid var(--green);
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.poll__radio::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--green);
  transform: scale(0);
  transition: transform var(--transition);
}
.poll__row[aria-pressed="true"] .poll__radio::after { transform: scale(1); }
.poll__label { flex: 1; font: 600 17px/1.35 var(--font-body); color: var(--ink); }
.poll__pct { font: 800 17px/1 var(--font-head); color: var(--green-deep); }

.poll__thanks { margin: 0; padding: 14px 18px; font-size: 15px; color: var(--muted); }
.poll__err { margin: 0; padding: 14px 18px; font-size: 15px; color: var(--err); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .poll__fill, .poll__radio::after { transition: none; }
}

/* ---------- Body programu (úvod) ---------- */

.prog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-cards);
  margin-top: 44px;
}
.prog-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 230px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.prog-card:hover {
  border-color: var(--green);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  color: var(--ink);
  text-decoration: none;
}
.prog-card__num {
  font: 800 14px/1 var(--font-head);
  letter-spacing: 0.08em;
  color: var(--green-deep);
}
.prog-card__title { font: 700 22px/1.2 var(--font-head); letter-spacing: -0.01em; }
.prog-card__text { font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---------- Kandidáti (úvod) ---------- */

.sec-green {
  background: var(--green-deep);
  color: var(--white);
  padding-block: var(--y-candidates);
}
/*
 * Schválně tu není pravidlo pro `a` — celá sekce je jen nadpis, tlačítko
 * a bílé karty kandidátů a každý z nich si barvu určuje sám. Obarvit odkazy
 * hromadně nejde: přebilo by to i text v kartách, který stojí na bílém.
 */

.cand-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-cards);
  margin-top: 44px;
}
.cand-mini {
  background: var(--white);
  color: var(--ink);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: transform var(--transition);
}
.cand-mini:hover { color: var(--ink); text-decoration: none; transform: translateY(-2px); }
.cand-mini__figure { border-radius: 0; }
/*
 * Karta je odkaz, takže její vnitřek skládají `span`y. Ty musí být blokové:
 * u řádkového prvku se vodorovné odsazení uplatní jen na jeho vlastní
 * fragment, takže by ho dostalo číslo, ale jméno a profese by z něj vypadly
 * na kraj karty.
 */
.cand-mini__body { display: block; padding: 18px 20px 22px; }
.cand-mini__num { display: block; font: 800 14px/1 var(--font-head); color: var(--green-deep); }
.cand-mini__name { display: block; margin-top: 4px; font: 700 19px/1.25 var(--font-head); }
.cand-mini__role { display: block; margin-top: 2px; font-size: 15px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .cand-mini:hover { transform: none; }
}

/* ---------- Výzva ---------- */

.cta { background: var(--yellow); }
.cta__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--y-cta) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta .h2 { margin: 0; }
.cta__lead { margin: 12px 0 0; font-size: 18px; color: var(--text-strong); }

/* ---------- Hlavičky podstránek ---------- */

.page-head { padding-block: var(--y-page-head); }
.page-head--dark { background: var(--ink); color: var(--white); }
.page-head--green { background: var(--green-deep); color: var(--white); }

.page-body { background: var(--white); padding-block: var(--y-page-body); }

/* ---------- Stránka Program ---------- */

.prog-list { display: flex; flex-direction: column; }
.prog-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
  padding: 44px 0;
  border-top: 1px solid var(--line);
}
.prog-item__num { font: 800 44px/1 var(--font-head); color: var(--green); }
.prog-item__title { margin: 0; font: 800 clamp(24px, 2.5vw, 30px)/1.15 var(--font-head); letter-spacing: -0.02em; }
.prog-item__text { margin: 12px 0 0; max-width: 640px; font-size: 18px; line-height: 1.65; color: var(--text-strong); }

.bullets { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bullets li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.55; color: var(--text-strong); }
.bullets li::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  margin-top: 9px;
  border-radius: 2px;
  background: var(--yellow);
}

/*
 * Bez financování u kteréhokoli bodu nemá třetí sloupec co držet.
 * Uzavřeno v dotazu na šířku schválně: pravidlo se dvěma třídami má vyšší
 * specificitu než `.prog-item` v media queries níž, takže by bez téhle
 * hranice přebilo i mobilní jednosloupcové rozvržení. Pod 1080 px si užší
 * sloupce řeší responzivní pravidla sama.
 */
@media (min-width: 1081px) {
  .prog-list--bez-financi .prog-item { grid-template-columns: 120px minmax(0, 1fr); }
  .prog-list--bez-financi .prog-item__text { max-width: 760px; }
}

.money {
  background: var(--surface);
  border-radius: 14px;
  padding: 22px;
}
.money__label {
  margin: 0;
  font: 700 12px/1.3 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.money__value { margin: 4px 0 0; font-size: 16px; color: var(--text-strong); }

/* ---------- Stránka Kandidáti ---------- */

.cand-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-cand);
}
.cand-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color var(--transition);
}
.cand-card:hover { border-color: var(--green); }
/* Karta, na kterou vede odkaz zvenčí, se na chvíli zvýrazní. */
.cand-card:target { border-color: var(--green); box-shadow: 0 0 0 3px var(--poll-fill); }

.cand-card__figure { position: relative; }
.cand-card__badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--ink);
  color: var(--yellow);
  border-radius: 8px;
  padding: 5px 11px;
  font: 800 14px/1 var(--font-head);
}
/*
 * Karta bez portrétu. Odznak s číslem nemá nad čím ležet, takže se posadí
 * dovnitř karty nad jméno — zůstane z něj stejná pilulka, jen ve statickém
 * toku. Vršek karty má o pár pixelů víc vzduchu, aby odznak nesedl na rámeček.
 */
.cand-card__badge--inline {
  position: static;
  align-self: flex-start;
  margin-bottom: 2px;
}
.cand-card--bez-foto .cand-card__body { padding-top: 24px; }
.cand-card__body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.cand-card__name { margin: 0; font: 800 21px/1.2 var(--font-head); letter-spacing: -0.01em; }
.cand-card__role { margin: 0; font: 600 15px/1.4 var(--font-body); color: var(--green-deep); }
.cand-card__bio { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ---------- Stránka Kontakt ---------- */

.contact {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--gap-cols-wide);
  align-items: start;
}

.contact__list {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.contact__list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.contact__label { color: var(--muted); font-size: 15px; }
.contact__value { font-weight: 600; }

.contact__map { margin-top: 28px; }

.panel {
  background: var(--surface);
  border-radius: 22px;
  padding: clamp(24px, 3.3vw, 40px);
}
.panel__title { margin: 0; font: 800 26px/1.2 var(--font-head); letter-spacing: -0.02em; }

.form { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > label,
.field__label { font: 600 14px/1.35 var(--font-body); color: var(--text-strong); }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea,
.form select {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line-input);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 16px;
  outline: none;
}
.form textarea { resize: vertical; min-height: 140px; font-family: inherit; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--green); }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible {
  outline: 2px solid var(--green-deep);
  outline-offset: 1px;
}

.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check input {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--green);
}
.check span { font-size: 14px; line-height: 1.5; color: var(--muted); }

.form__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form__hint { margin: 0; font-size: 14px; color: var(--muted); }
.form__hint--err { color: var(--err); font-weight: 600; }

.req { color: var(--err); }
.opt { color: var(--muted-soft); font-weight: 400; }

/* Past na roboty — člověk tohle pole nikdy neuvidí. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Potvrzení po odeslání */
.sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 40px 0;
}
.sent__mark {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--green);
  display: grid;
  place-items: center;
  color: var(--white);
  font: 700 26px/1 var(--font-body);
}
.sent__title { margin: 0; font: 800 30px/1.15 var(--font-head); letter-spacing: -0.02em; }
.sent__text { margin: 0; max-width: 420px; font-size: 17px; color: var(--muted); }

/* ---------- Patička ---------- */

.footer { background: var(--ink); color: var(--on-dark); }
.footer__grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 56px var(--gutter) 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
.footer .lockup { color: var(--white); }
.footer .lockup__name { font-size: 18px; color: var(--white); }
.footer .lockup__sub { color: var(--on-dark); }
.footer .lockup__crest { height: 46px; }
.footer__desc { margin: 18px 0 0; max-width: 360px; font-size: 15px; line-height: 1.6; }

.footer__heading { margin: 0 0 14px; font: 700 15px/1.3 var(--font-body); color: var(--white); }
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__list a { color: var(--on-dark); font-size: 15px; }
.footer__list a:hover { color: var(--white); }
.footer__list span { font-size: 15px; }

.footer__imprint {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) 20px;
  font-size: 13px;
}
.footer__bottom { border-top: 1px solid var(--ink-line); }
.footer__bottom-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
}
/*
 * Odkaz v řádku se zadavatelem. Globální zelená má na tmavém podkladu
 * kontrast 3:1 a na třinácti pixelech by se ztratila — zákonný údaj musí
 * zůstat čitelný, takže bílá s podtržením.
 */
.footer__bottom-inner a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer__bottom-inner a:hover { color: var(--yellow); }

/* ---------- Značky pro editora ---------- */

.chip {
  display: inline-block;
  border-radius: 6px;
  padding: 4px 9px;
  font: 700 11px/1.3 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chip--todo { background: var(--yellow); color: var(--ink); }

.notice {
  background: var(--yellow);
  color: var(--ink);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 28px;
}

.notice-msg {
  border-radius: 14px;
  padding: 14px 18px;
  font: 600 15px/1.5 var(--font-body);
  margin: 0 0 20px;
}
.notice-msg--ok { background: var(--poll-fill); color: var(--ok); }
.notice-msg--err { background: #FBECEA; color: var(--err); }

.admin-flag {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 60;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 18px;
  font: 700 13px/1.3 var(--font-body);
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.admin-flag:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Zpět nahoru ---------- */

.to-top {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 55;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 18px;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.to-top[data-visible="true"] { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--green-deep); color: var(--white); text-decoration: none; }

/* ---------- Právní texty ---------- */

.legal { max-width: 800px; }
.legal h2 { margin: 40px 0 12px; font: 800 26px/1.2 var(--font-head); letter-spacing: -0.02em; }
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  margin: 26px 0 12px;
  font: 700 13px/1.3 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.7; color: var(--text-strong); }
.legal code {
  font: 400 14px/1 var(--font-mono);
  background: var(--surface);
  border-radius: 6px;
  padding: 3px 6px;
}
.table-wrap { overflow-x: auto; margin: 0 0 24px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.legal th, .legal td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { font: 700 13px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* =========================================================
   Responzivita
   Návrh je desktopový (kontejner 1220 px). Níž se drží pořadí
   doporučené v handoffu: dvousloupcové gridy do jednoho sloupce,
   mřížky karet na dva sloupce, pak na jeden.
   ========================================================= */

@media (max-width: 1080px) {
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cand-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prog-item { grid-template-columns: 80px minmax(0, 1fr); gap: 28px; }
  .prog-item__num { font-size: 36px; }
  .money { grid-column: 2; }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  /* Fotka pod textem: na úzkém displeji je důležitější nadpis. */
  .hero__figure { order: 2; max-width: 420px; }
  .poll { grid-template-columns: 1fr; gap: 36px; }
  .contact { grid-template-columns: 1fr; gap: 44px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 760px) {
  .nav { display: none; }
  .burger { display: grid; }

  .menu {
    display: block;
    border-top: 1px solid var(--line);
    background: var(--white);
    padding: 10px var(--gutter) 18px;
  }
  .menu[data-open="false"] { display: none; }
  .menu__link {
    display: block;
    padding: 13px 0;
    font: 600 17px/1 var(--font-body);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    text-decoration: none;
  }
  .menu__link:hover { color: var(--green-deep); text-decoration: none; }
  .menu .btn { margin-top: 16px; width: 100%; }

  .lockup__sub { display: none; }
  .lockup__crest { height: 38px; }
  .header__bar { gap: 14px; }

  .prog-item { grid-template-columns: 1fr; gap: 16px; }
  .prog-item__num { font-size: 32px; }
  .money { grid-column: auto; }

  .cta__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .cta .btn { width: 100%; }
}

@media (max-width: 620px) {
  .cards-4, .cand-grid, .prog-grid, .cand-list { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__stats { gap: 28px; }
  .btn-row .btn { width: 100%; }
  /* Dekorativní kruh se na úzkém displeji opře o pravou hranu a čte se
     jako zelená šmouha, ne jako ozdoba. Radši ať tam není. */
  .hero__figure::before { display: none; }
  .poll__label { font-size: 16px; }
  .prog-card { min-height: 0; }
}