@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/source-sans-3.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --vinova: #4E1B3C;
  --vinova-tmava: #3A1229;
  --kremova: #FAF9F5;
  --kremova-tepla: #F3EFE7;
  --ruzova: #F7BBCB;
  --zelena: #5F6E43;
  --zlata: #6B520B;
  --text: #3A1229;
  --text-tlumeny: #5E4152;
  --text-slaby: #75596A;
  --linka: #E0D5C6;
  --linka-slaba: #E8E0D4;

  --pismo: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --pismo-nadpis: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --sirka: 1120px;
  --radius: 18px;
  --radius-maly: 12px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  font-family: var(--pismo);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--kremova);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--pismo-nadpis); font-weight: 600; letter-spacing: -0.01em; }
img { max-width: 100%; display: block; }

a { color: var(--vinova); }
a:hover { color: var(--vinova-tmava); }

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

.obal {
  width: 100%;
  max-width: var(--sirka);
  margin-inline: auto;
  padding-inline: 20px;
}

.preskocit {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vinova);
  color: var(--kremova);
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.preskocit:focus { left: 0; }

.stitek {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zlata);
}

.sekce { padding-block: 72px; }
.sekce--tepla { background: var(--kremova-tepla); }
.sekce-hlavicka { max-width: 680px; margin-bottom: 40px; }

/* Na širokém displeji se nadpisy sekcí vejdou na jeden řádek, popisek pod
   nimi ale držíme užší, jinak by se dlouhé řádky špatně četly. */
@media (min-width: 1100px) {
  .sekce-hlavicka { max-width: 920px; }
  .sekce-hlavicka p { max-width: 680px; }
}
/* Tlačítko sdílení sedí pod popisem sekce, aby u všech sekcí začínalo
   na stejném místě. Vedle nadpisu skákalo podle jeho délky. */
.sdilet--sekce {
  margin-top: 18px;
  font-size: 14px;
  padding: 9px 15px;
  min-height: 42px;
}
.volit .sdilet--sekce {
  background: rgba(250, 249, 245, .1);
  border-color: rgba(250, 249, 245, .3);
  color: var(--kremova);
}
.volit .sdilet--sekce:hover { background: rgba(250, 249, 245, .18); }
.volit .sdilet--sekce[data-hotovo] { border-color: var(--ruzova); color: var(--ruzova); }

.sekce-hlavicka h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.12;
  color: var(--vinova);
}
.sekce-hlavicka p {
  margin: 0;
  font-size: clamp(17px, 2.4vw, 19px);
  line-height: 1.55;
  color: var(--text-tlumeny);
}

/* Poznámka o videích je oddělená od úvodního odstavce, ať se s ním
   neslije. Značka stojí před textem, ne uprostřed věty, kde trhala řádek. */
.sekce-pozn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  padding: 13px 20px 13px 15px;
  background: var(--kremova-tepla);
  border: 1px solid var(--linka);
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-tlumeny);
  width: fit-content;
  max-width: 100%;
}
.sekce--tepla .sekce-pozn { background: var(--kremova); }
.pozn-znak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--vinova);
  color: var(--kremova);
}
.pozn-znak svg { width: 11px; height: 11px; margin-left: 1px; }

@media (max-width: 560px) {
  .sekce-pozn { align-items: flex-start; padding: 12px 15px; }
  .pozn-znak { margin-top: 1px; }
}

.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .15s ease, color .15s ease;
}
.tlacitko svg { width: 17px; height: 17px; flex-shrink: 0; }
.tlacitko--hlavni { background: var(--ruzova); color: var(--vinova-tmava); }
.tlacitko--hlavni:hover { background: #F3A6BA; color: var(--vinova-tmava); }
.tlacitko--tmavy { background: var(--vinova); color: var(--kremova); }
.tlacitko--tmavy:hover { background: var(--vinova-tmava); color: var(--kremova); }
.tlacitko--obrys {
  background: transparent;
  color: var(--kremova);
  border-color: rgba(250, 249, 245, .5);
}
.tlacitko--obrys:hover { background: rgba(250, 249, 245, .12); color: var(--kremova); }

/* ---------------------------------------------------------------- hlavicka */

.hlavicka {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 249, 245, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linka-slaba);
}
.hlavicka > .obal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 10px;
}
.znacka {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  text-decoration: none;
  color: var(--vinova);
}
.znacka-znak { height: 62px; width: auto; flex-shrink: 0; }
.znacka-text { display: flex; flex-direction: column; line-height: 1.1; }
.znacka-nazev {
  font-family: var(--pismo);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--vinova);
}
.znacka-mesto {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-tlumeny);
}

@media (max-width: 560px) {
  .znacka-znak { height: 48px; width: auto; }
  .znacka-nazev { font-size: 17px; }
  .znacka-mesto { font-size: 14px; letter-spacing: .06em; }
  .znacka { gap: 7px; }
}

.menu { display: flex; align-items: center; gap: 26px; }
.menu a:not(.tlacitko):not(.znacka-site) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: var(--vinova);
  padding: 8px 6px;
}
.menu a:not(.tlacitko):not(.znacka-site):hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.menu .tlacitko { font-size: 15px; min-height: 44px; padding: 10px 20px; }

.menu-prepinac {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--linka);
  border-radius: var(--radius-maly);
  color: var(--vinova);
  cursor: pointer;
}
.menu-prepinac svg { width: 24px; height: 24px; }

@media (max-width: 900px) {
  .menu-prepinac { display: inline-flex; }
  .menu {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    background: var(--kremova);
    border-bottom: 1px solid var(--linka);
  }
  .menu.je-otevrene { display: flex; }
  .menu a:not(.tlacitko):not(.znacka-site) {
    padding: 15px 4px;
    border-bottom: 1px solid var(--linka-slaba);
    font-size: 17px;
  }
  .menu .tlacitko {
    margin-top: 14px;
    border-bottom: 0;
    font-size: 16px;
    min-height: 52px;
  }
}

/* -------------------------------------------------------------------- hero */

/* Čtyři kandidátky zabírají fotku od 14 do 88 procent šířky, takže na
   text v ní není místo, aniž by někomu padl do obličeje. Fotka proto
   drží vlastní pás a do vínové plochy pod sebou přechází dlouhým
   prostupem, ne hranou. */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  background: var(--vinova);
  overflow: hidden;
}
.hero-obraz {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  /* Tlačítka musí zůstat nad okrajem okna, jinak je návštěvník nevidí.
     Nad fotkou je hlavička, pod ní text s tlačítky, a obojí je v každém
     pásmu jinak vysoké (změřeno, ne odhad). Strop fotky je proto tím, co
     ve okně zbude. Čísla platí pro toto pásmo, ostatní si je přepisují. */
  max-height: min(56vh, calc(100vh - 500px));
  overflow: hidden;
}
.hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

/* Na úzkém displeji se ze široké fotky ořízne svislý pruh. Držíme ho
   u pravé strany, kde stojí kandidátky, a hero necháme vyšší, aby na
   ně zbylo místo nad textem. */
@media (max-width: 640px) {
  /* Na telefonu je fotka vyšší, aby na ní byly tváře poznat. Text je tu
     ale nejdelší (podtitul na čtyři řádky), takže na nízkém telefonu
     jako iPhone SE musí fotka ustoupit, jinak tlačítka vypadnou ven. */
  .hero-obraz { aspect-ratio: 4 / 3; max-height: min(44vh, calc(100vh - 506px)); }
  .hero-foto { object-position: 60% 26%; }
  .hero > .obal { margin-top: -22px; padding-block: 0 40px; }
}
/* Prostup přes spodní třetinu fotky. Dost dlouhý na to, aby nikde
   nevznikla viditelná hrana mezi fotkou a plochou pod ní, ale ne tak
   dlouhý, aby kandidátkám překryl půlku postavy. Začíná až pod jejich
   tvářemi. */
.hero-obraz::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(78, 27, 60, 0) 55%,
    rgba(78, 27, 60, .25) 70%,
    rgba(78, 27, 60, .70) 85%,
    rgba(78, 27, 60, .94) 95%,
    var(--vinova) 100%);
}
.hero > .obal {
  position: relative;
  z-index: 1;
  margin-top: -26px;
  padding-block: 0 54px;
}
.hero-telo { max-width: 760px; }

.hero-znacka {
  display: inline-flex;
  align-items: center;
  background: rgba(247, 187, 203, .16);
  border: 1px solid rgba(247, 187, 203, .45);
  color: var(--ruzova);
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(36px, 7.5vw, 60px);
  line-height: 1.06;
  color: var(--kremova);
  text-wrap: balance;
}
.hero-podtitul {
  margin: 0 0 28px;
  font-size: clamp(17px, 2.6vw, 21px);
  line-height: 1.5;
  color: rgba(250, 249, 245, .92);
  max-width: 560px;
}
.hero-akce { display: flex; gap: 12px; flex-wrap: wrap; }

/* Na širokém displeji se nadpis vejde na jeden řádek a podtitul na dva
   místo tří, takže tlačítka zůstanou nad okrajem obrazovky. Pod 1100 px
   se obojí zalomí samo. Musí stát až za .hero-podtitul, jinak ho jeho
   vlastní max-width přebije. */
@media (min-width: 1100px) {
  .hero-telo { max-width: 900px; }
  .hero-podtitul { max-width: 900px; }
  /* Nadpis se tu vejde na řádek a podtitul na dva, text je tedy o 95 px
     nižší než v užším pásmu a fotka smí být vyšší. */
  .hero-obraz { max-height: min(56vh, calc(100vh - 405px)); }
}

@media (max-width: 520px) {
  .hero-akce { flex-direction: column; align-items: stretch; }
  .hero-akce .tlacitko { width: 100%; }
}

/* -------------------------------------------------------------------- pruh */

.pruh { background: var(--vinova-tmava); color: var(--kremova); }
.pruh > .obal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding-block: 36px;
}
.pruh-cislo {
  margin: 0;
  font-family: var(--pismo-nadpis);
  font-size: clamp(30px, 4.5vw, 42px);
  line-height: 1;
  color: var(--ruzova);
}
.pruh-popis {
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(250, 249, 245, .82);
}
@media (max-width: 720px) {
  .pruh > .obal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}

/* ----------------------------------------------------------------- program */

.program-mrizka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 780px) { .program-mrizka { grid-template-columns: minmax(0, 1fr); } }

.program-karta {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--kremova-tepla);
  border: 1px solid var(--linka-slaba);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.sekce--tepla .program-karta { background: var(--kremova); }
.program-ikona {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-maly);
  background: var(--kremova);
  border: 1px solid var(--linka);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vinova);
}
.sekce--tepla .program-ikona { background: var(--kremova-tepla); }
.program-ikona--zelena { color: var(--zelena); }
.program-ikona--zlata { color: var(--zlata); }
.program-ikona svg { width: 23px; height: 23px; }
.program-cislo {
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--zlata);
}
.program-karta h3 {
  margin: 0 0 7px;
  font-family: var(--pismo);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--vinova);
}
.program-popis { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-tlumeny); }

.program-detail { margin-top: 12px; }
.program-detail summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--vinova);
  cursor: pointer;
  list-style: none;
}
.program-detail summary::-webkit-details-marker { display: none; }
.program-detail summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.program-detail[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.program-detail ul {
  margin: 4px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.program-detail li { font-size: 15px; line-height: 1.5; color: var(--text-tlumeny); }
.program-detail li::marker { color: var(--ruzova); }

.kandidatka-tema {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--zlata);
  font-weight: 600;
}

.znacka-site {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--vinova);
  text-decoration: none;
}
.znacka-site:hover { background: var(--kremova-tepla); }
.znacka-site svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ otisky */

.otisky-mrizka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 980px) { .otisky-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .otisky-mrizka { grid-template-columns: minmax(0, 1fr); } }

.otisk {
  display: flex;
  flex-direction: column;
  background: var(--kremova-tepla);
  border: 1px solid var(--linka-slaba);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.otisk:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(58, 18, 41, .1); }

.otisk-nahled {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.otisk-obrazek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.otisk:hover .otisk-obrazek { transform: scale(1.03); }
/* Ztmavení pod play tlačítkem, aby bylo čitelné i na světlém náhledu. */
.otisk-nahled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(58, 18, 41, .28) 0%, rgba(58, 18, 41, .12) 45%, rgba(58, 18, 41, .05) 100%);
}
.otisk-znacka, .otisk-play { position: relative; z-index: 1; }
.otisk-nahled--zelena { background: linear-gradient(150deg, #B5C292 0%, #7E8F5C 100%); }
.otisk-nahled--vinova { background: linear-gradient(150deg, #8E6A82 0%, #4E1B3C 100%); }
.otisk-nahled--ruzova { background: linear-gradient(150deg, #D9A7B8 0%, #8E5570 100%); }
.otisk-nahled--zlata  { background: linear-gradient(150deg, #C9A227 0%, #7A5E10 100%); }

.otisk-znacka {
  position: absolute;
  top: 13px;
  left: 14px;
  background: rgba(58, 18, 41, .78);
  color: var(--kremova);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
.otisk-play {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: rgba(250, 249, 245, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vinova);
}
.otisk-play svg { width: 23px; height: 23px; margin-left: 2px; }
.otisk:hover .otisk-play { background: #fff; }

.otisk-text { display: block; padding: 20px 22px 22px; }
.otisk-nadpis {
  display: block;
  font-family: var(--pismo);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--vinova);
  margin-bottom: 7px;
}
.otisk-popis {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-tlumeny);
  margin-bottom: 12px;
}
.otisk-zdroj {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--vinova);
}
.otisk-zdroj svg { width: 14px; height: 14px; }

.otisky-vic { margin-top: 26px; display: flex; justify-content: center; }

/* ------------------------------------------------------------- kandidatky */

/* Jednička má mít nejvíc prostoru, ne nejmíň. Fotka proto sahá od kraje
   ke kraji karty a je skoro dvakrát větší než na běžné kartě. */
.lidryne {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  background: var(--kremova);
  border: 1px solid var(--linka);
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 24px;
}
.lidryne-foto-obal { position: relative; display: block; }
.lidryne-poradi {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(78, 27, 60, .94);
  color: var(--kremova);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dokud nedorazí příběh lídryně, drží blok menší výšku, ať vedle fotky
   nezeje prázdno. S textem se roztáhne sám. */
.lidryne--bez-textu .lidryne-foto {
  height: 330px;
  min-height: 0;
}
.lidryne--bez-textu .lidryne-telo { padding-block: 30px; }

.lidryne-foto {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  object-position: center 18%;
  background: var(--linka-slaba);
}
.lidryne-telo { min-width: 0; padding: 34px 36px; }
.lidryne-telo .stitek {
  display: inline-block;
  background: var(--vinova);
  color: var(--kremova);
  padding: 6px 13px;
  border-radius: 999px;
  letter-spacing: .09em;
  font-size: 14px;
}
.lidryne-telo h3 {
  margin: 0 0 4px;
  font-size: clamp(24px, 3.6vw, 31px);
  line-height: 1.15;
  color: var(--vinova);
}
.lidryne-role { margin: 0 0 16px; font-size: 16px; color: var(--text-slaby); }
/* Téma vypadá stejně jako na řádkové kartě, jen sedí pod rolí. Zápornou
   horní mezerou stáhne odstup po roli, aby se dvě mezery nesčítaly.
   Bez :has(), které v CSS nikde jinde není a kvůli dvanácti pixelům
   nemá smysl ho zavádět. */
/* Dvě třídy, aby barvu nepřebilo obecnější .lidryne-telo p níž v souboru. */
.lidryne-telo .lidryne-tema {
  margin: -12px 0 16px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--zlata);
}
.lidryne blockquote {
  margin: 0 0 14px;
  font-family: var(--pismo-nadpis);
  font-size: clamp(18px, 2.6vw, 21px);
  line-height: 1.45;
  font-style: italic;
  color: var(--vinova);
}
.lidryne-telo p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: var(--text-tlumeny); }
.lidryne-zaver { font-weight: 600; color: var(--vinova) !important; }

@media (max-width: 860px) {
  .lidryne { grid-template-columns: 320px 1fr; }
  .lidryne-foto { min-height: 420px; }
  .lidryne-telo { padding: 26px 24px; }
}

@media (max-width: 720px) {
  /* Na telefonu fotka nahoře přes celou šířku, text pod ní. */
  .lidryne { grid-template-columns: minmax(0, 1fr); }
  .lidryne-foto {
    min-height: 0;
    aspect-ratio: 4 / 3;
    object-position: center 16%;
  }
  .lidryne-telo { padding: 22px 20px 24px; }
}

.kandidatky-mrizka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1000px) { .kandidatky-mrizka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .kandidatky-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } }

.kandidatka {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--kremova);
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.kandidatka:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(58, 18, 41, .1); }
.kandidatka[data-bez-textu] { cursor: default; }
.kandidatka[data-bez-textu]:hover { transform: none; box-shadow: none; }

.kandidatka-foto { position: relative; display: block; }
.kandidatka-obrazek {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--linka-slaba);
}
.kandidatka-poradi {
  position: absolute;
  top: 11px;
  left: 11px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(78, 27, 60, .92);
  color: var(--kremova);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Značka videa na kartě, aby bylo vidět, u koho je co pustit. */
.kandidatka-video {
  position: absolute;
  right: 11px;
  bottom: 11px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(250, 249, 245, .94);
  color: var(--vinova);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(58, 18, 41, .2);
}
.kandidatka-video svg { width: 15px; height: 15px; margin-left: 2px; }
/* Lídryně má větší fotku, značka roste s ní. Je to odkaz, ne jen ozdoba. */
.lidryne-video { right: 16px; bottom: 16px; width: 42px; height: 42px; }
.lidryne-video svg { width: 18px; height: 18px; }
.lidryne-video:hover { background: var(--kremova); color: var(--vinova-tmava); }

.kandidatka-telo { display: block; padding: 15px 16px 18px; }
.kandidatka-jmeno {
  display: block;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--vinova);
  margin-bottom: 3px;
}
.kandidatka-profese {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-slaby);
}
.kandidatka-vic {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--vinova);
  border-bottom: 2px solid var(--ruzova);
  padding-bottom: 2px;
}
/* Na desktopu je příběh v kartě celý, ale dialog drží sdílení a odkaz na
   vlastní stránku. Bez tlačítka se k nim u lídryně nejde dostat. */
.lidryne-vic {
  display: inline-block;
  align-self: flex-start;
  margin-top: 14px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 2px solid var(--ruzova);
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--vinova);
  cursor: pointer;
}

/* Na mobilu jedna kandidátka na řádek, foto vlevo. Přes celou šířku by listina
   21 portrétů narostla na desítky tisíc pixelů a nešla by projet. */
@media (max-width: 560px) {
  .kandidatky-mrizka { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .kandidatka { flex-direction: row; align-items: stretch; }
  .kandidatka-foto { flex: 0 0 104px; overflow: hidden; border-radius: calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px); }
  .kandidatka-obrazek { height: 100%; min-height: 132px; aspect-ratio: auto; }
  .kandidatka-poradi { top: 7px; left: 7px; width: 26px; height: 26px; font-size: 12px; }
  .kandidatka-video { right: 7px; bottom: 7px; width: 28px; height: 28px; }
  .kandidatka-video svg { width: 12px; height: 12px; }
  .kandidatka-telo { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; padding: 13px 15px; }
  .kandidatka-vic { margin-top: 7px; }

  /* Lídryně splyne s listinou. Na širším displeji má velký blok co ukázat,
     na mobilu by z jedné ženy udělal třetinu obrazovky a z dvaceti řádky. */
  .lidryne {
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: stretch;
    border-radius: var(--radius);
    margin-bottom: 10px;
  }
  .lidryne-foto-obal { overflow: hidden; border-radius: calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px); }
  .lidryne-foto,
  .lidryne--bez-textu .lidryne-foto {
    height: 100%;
    min-height: 132px;
    aspect-ratio: auto;
    object-position: center 16%;
  }
  .lidryne--bez-textu .lidryne-telo { padding-block: 13px; }
  .lidryne-poradi { top: 7px; left: 7px; width: 26px; height: 26px; font-size: 12px; }
  .lidryne-video { right: 7px; bottom: 7px; width: 28px; height: 28px; }
  .lidryne-video svg { width: 12px; height: 12px; }
  .lidryne-telo { display: flex; flex-direction: column; justify-content: center; padding: 13px 15px; }
  /* Odznak nic nevysvětlí a web jinde slovo lídryně nepoužívá. Na řádkové
     kartě bez příběhu by to byl titul bez pokrytí, číslo 1 stačí. */
  .lidryne-telo .stitek { display: none; }
  .lidryne-telo h3 { font-size: 17px; margin-bottom: 3px; }
  .lidryne-role { margin: 0; font-size: 14px; line-height: 1.35; }
  .lidryne blockquote { font-size: 15px; margin: 8px 0 0; }
  .lidryne-telo p { font-size: 14px; line-height: 1.45; margin: 6px 0 0; }
  /* Tři odstavce příběhu by řádkovou kartu natáhly přes celou obrazovku.
     Na mobilu se čte v dialogu stejně jako u ostatních kandidátek. Téma
     ale patří k hlavičce, ne k příběhu, a řádkové karty ho tu mají taky. */
  .lidryne-telo > p:not(.lidryne-role):not(.lidryne-tema),
  .lidryne blockquote { display: none; }
  .lidryne-telo .lidryne-tema { margin: 4px 0 0; }
  .lidryne-vic { margin-top: 7px; font-size: 14px; }
}

/* ------------------------------------------------------------------ dialog */

dialog.medailonek {
  width: min(620px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--kremova);
  color: var(--text);
  overflow: auto;
  overscroll-behavior: contain;
}
dialog.medailonek::backdrop { background: rgba(58, 18, 41, .62); backdrop-filter: blur(3px); }

.medailonek-hlavicka {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 26px 16px;
}
/* Zavřít je křížek v rohu hlavičky. Vlastní pás jen pro jedno tlačítko bral
   dole místo, které patří textu. */
.medailonek-krizek {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  margin: -6px -6px 0 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--vinova);
  cursor: pointer;
}
.medailonek-krizek svg { width: 21px; height: 21px; stroke-width: 2; }
.medailonek-krizek:hover { background: var(--kremova-tepla); }
.medailonek-pata { display: none; }

/* Jediný pás na dně dialogu: listování vlevo, sdílení vpravo. Drží se u spodní
   hrany i při posouvání, takže dole nemusí být ještě patička se Zavřít. */
.medailonek-ovladani {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-top: 1px solid var(--linka);
  background: var(--kremova-tepla);
}
.medailonek-foto {
  width: 132px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 14px;
  flex-shrink: 0;
  background: var(--linka-slaba);
}
/* Sloupec se jménem vyplní zbytek, aby křížek zůstal v pravém rohu. */
.medailonek-hlavicka > div { flex-grow: 1; min-width: 0; }
.medailonek-hlavicka h3 {
  margin: 0 0 4px;
  font-size: 25px;
  line-height: 1.15;
  color: var(--vinova);
}
.medailonek-role { margin: 0 0 12px; font-size: 15px; color: var(--text-slaby); }
/* Citát je v HTML dvakrát: vedle fotky, kde na širším displeji vyplní místo,
   které by jinak zůstalo prázdné, a pod hlavičkou pro telefon, kde by vedle
   fotky roztáhl hlavičku na 259 px a nechal pod ní 82 px prázdna. Vidět je
   vždycky jen jeden, ten druhý je display:none. */
.medailonek .citat-pod { display: none; }
.medailonek blockquote {
  margin: 10px 0 0;
  font-family: var(--pismo-nadpis);
  font-size: 18px;
  line-height: 1.45;
  font-style: italic;
  color: var(--vinova);
}
.medailonek-telo { padding: 0 26px 22px; }
.medailonek-telo p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--text-tlumeny); }
.medailonek-telo p:last-child { margin-bottom: 0; }
.medailonek-zaver { font-weight: 600; color: var(--vinova) !important; }

/* Témata sedí uvnitř posouvaného textu, odsazení tedy drží ten, ne ona. */
.medailonek-temata { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.tema {
  display: inline-flex;
  align-items: center;
  background: var(--kremova-tepla);
  border: 1px solid var(--linka);
  color: var(--vinova);
  font-size: 14px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
}

.medailonek-navigace {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-grow: 1;
  min-width: 0;
  padding: 0;
}
.listovat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--linka);
  border-radius: 999px;
  background: var(--kremova);
  color: var(--vinova);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  max-width: 44%;
}
.listovat span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listovat svg { width: 18px; height: 18px; stroke-width: 2.2; flex-shrink: 0; }
.listovat:hover:not(:disabled) { background: var(--kremova-tepla); }
.listovat:disabled { opacity: .38; cursor: default; }
.medailonek-pocet {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-slaby);
}

/* Video je jedna z informací o kandidátce, ne hlavní akce dialogu. Jako tmavý
   pruh přes celou šířku křičelo víc než medailonek sám. */
.video-pruh {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 16px;
  padding: 10px 17px 10px 11px;
  border: 1px solid var(--linka);
  border-radius: 999px;
  background: var(--kremova);
  color: var(--vinova);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.video-pruh:hover { background: var(--kremova-tepla); color: var(--vinova); }
.video-pruh-ikona {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ruzova);
  color: var(--vinova-tmava);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-pruh-ikona svg { width: 12px; height: 12px; margin-left: 1px; }
.video-pruh-text { display: flex; line-height: 1.25; }
.video-pruh-nadpis { font-size: 16px; font-weight: 600; }
/* Že to vede na Instagram, prozradí šipka ven. Druhý řádek v pilulce nemá kde být. */
.video-pruh-zdroj { display: none; }
.video-pruh > svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .55; }

.zavrit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--linka);
  background: var(--kremova);
  color: var(--vinova);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.zavrit:hover { background: var(--kremova-tepla); }

/* Medailonek se na telefon celý nevejde, texty mají 850 až 1150 px.
   Stavíme ho proto jako list přes celou obrazovku: hlavička se jménem
   a fotkou drží nahoře, ovládání dole, a posouvá se jen text uprostřed.
   Člověk tak vždycky ví, čí medailonek čte, a šipky má po ruce. */
@media (max-width: 560px) {
  /* Selektor musí mít [open]. Samotné dialog.medailonek s display:flex
     přebije výchozí display:none prohlížeče, takže i zavřený dialog
     zabere 100dvh a na konci stránky vznikne prázdné místo pod patičkou. */
  dialog.medailonek[open] {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .medailonek-hlavicka {
    flex-shrink: 0;
    gap: 14px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--linka);
  }
  .medailonek-foto { width: 104px; border-radius: 11px; }
  .medailonek-hlavicka h3 { font-size: 20px; }
  .medailonek-role { margin-bottom: 7px; font-size: 14px; }
  .medailonek .citat-vedle { display: none; }
  .medailonek .citat-pod { display: block; margin: 0 0 16px; font-size: 16px; line-height: 1.45; }
  /* Jediná část, která se posouvá. */
  .medailonek-telo {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px;
  }
  .medailonek-telo p { font-size: 16px; }

  .video-pruh { margin: 4px 0 14px; padding: 9px 15px 9px 10px; font-size: 15px; }
  .video-pruh-nadpis { font-size: 15px; }
  .tema { font-size: 13px; padding: 5px 11px; }

  .medailonek-ovladani { flex-shrink: 0; padding: 10px 18px; }
  .listovat { padding: 9px 13px; font-size: 14px; max-width: none; }
  /* Jméno další kandidátky se na užší displej nevejde, samotná šipka stačí. */
  .medailonek-navigace .listovat:last-of-type {
    width: 44px;
    padding: 9px;
    justify-content: center;
    flex-shrink: 0;
  }
  .medailonek-navigace .listovat:last-of-type span { display: none; }
}

/* --------------------------------------------------------------- jak volit */

.volit { background: var(--vinova); color: var(--kremova); }
.volit .sekce-hlavicka h2 { color: var(--kremova); }
.volit .sekce-hlavicka p { color: rgba(250, 249, 245, .85); }
.volit .stitek { color: var(--ruzova); }

.volit-obsah {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 48px;
  align-items: stretch;
}
@media (max-width: 900px) { .volit-obsah { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.volit-kroky { display: flex; flex-direction: column; gap: 14px; }
.volit-krok {
  background: rgba(250, 249, 245, .09);
  border: 1px solid rgba(250, 249, 245, .2);
  border-radius: 16px;
  padding: 22px 24px;
}
.volit-krok--hlavni { border-color: rgba(247, 187, 203, .5); background: rgba(247, 187, 203, .1); }
.volit-krok-nadpis {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  font-family: var(--pismo);
  font-size: 19px;
  font-weight: 700;
  color: var(--kremova);
}
.volit-cislo {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(250, 249, 245, .22);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.volit-krok--hlavni .volit-cislo { background: var(--ruzova); color: var(--vinova-tmava); }
/* Varování o neplatném hlasu stálo přilepené na konci třetí možnosti, kde
   ho šlo snadno přehlédnout. Stojí pod oběma sloupci, ne uvnitř levého:
   čtvrtý box v mřížce kroků natahoval sloupec a s ním i volební lístek,
   který má align-items stretch. Bez rámečku, je to poznámka pod sekcí,
   ne čtvrtá možnost, jak volit. */
.volit-pozor {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(250, 249, 245, .22);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(250, 249, 245, .85);
}
.volit-pozor strong { color: var(--ruzova); }
.volit-krok p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(250, 249, 245, .85); }
.volit-krok strong { color: var(--ruzova); }

.listek {
  display: flex;
  flex-direction: column;
  background: var(--kremova);
  border-radius: var(--radius);
  padding: 24px 22px;
  color: var(--text);
}
.listek-titul {
  margin: 0 0 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linka);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-slaby);
  text-align: center;
}
.listek-radek {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  border: 2px solid var(--vinova);
  border-radius: var(--radius-maly);
  background: #FDF4F7;
  margin-bottom: 12px;
}
.listek-ctverec {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 2.5px solid var(--vinova);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kremova);
  color: var(--vinova);
}
.listek-ctverec svg { width: 22px; height: 22px; stroke-width: 3.5; }
.listek-jmeno { font-size: 16px; font-weight: 700; color: var(--vinova); letter-spacing: .02em; }
/* Vylosované číslo je na skutečném lístku první, co volič u strany vidí. */
.listek-cislo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-right: 7px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--vinova);
  color: var(--kremova);
  font-size: 13px;
  letter-spacing: 0;
  vertical-align: 1px;
}
.listek-role { font-size: 14px; color: var(--text-slaby); }

/* Místo šedých proužků skutečná jména z kandidátní listiny, aby volič
   poznal, co na lístku hledá. */
/* Lístek stojí vedle tří kroků, které jsou o pár desítek pixelů vyšší.
   Rozdíl se rozpustí do mezer mezi jmény, ne do prázdna pod poznámkou. */
.listek-jmena {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  gap: 6px;
}
.listek-jmena li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  border: 1.5px solid #E0D5C6;
  border-radius: 10px;
}
.listek-ctverec--prazdny {
  width: 26px;
  height: 26px;
  border: 2px solid #B9A895;
  border-radius: 5px;
  background: transparent;
}
.listek-jmeno-radek { font-size: 15px; color: var(--text-tlumeny); }
.listek-zbytek {
  border: 0 !important;
  padding: 8px 15px 2px !important;
  font-size: 14px;
  color: var(--text-slaby);
}

.listek-pozn {
  margin: 17px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--linka);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-tlumeny);
}
.listek-pozn strong { color: var(--vinova); }

/* --------------------------------------------------------------------- faq */

.faq { max-width: 820px; }
.faq-seznam { display: flex; flex-direction: column; gap: 12px; }

.faq-polozka {
  background: var(--kremova-tepla);
  border: 1px solid var(--linka);
  border-radius: 14px;
  overflow: hidden;
}
.sekce--tepla .faq-polozka { background: var(--kremova); }
.faq-polozka--klicova { border-left: 3px solid var(--ruzova); }

.faq-polozka summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--vinova);
  list-style: none;
}
.faq-polozka summary::-webkit-details-marker { display: none; }
.faq-znak {
  flex-shrink: 0;
  color: var(--vinova);
  transition: transform .18s ease;
  margin-top: 2px;
}
.faq-znak svg { width: 20px; height: 20px; stroke-width: 2.2; }
.faq-polozka[open] .faq-znak { transform: rotate(180deg); }
.faq-odpoved { padding: 0 22px 20px; }
.faq-odpoved p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-tlumeny); }

/* --------------------------------------------------------------- sdileni */

.sdileni {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  padding: 0 26px 18px;
}
/* V pásu dialogu jsou sdílení jen ikony, jinak by dva popsané knoflíky vedle
   listování zabraly víc místa než samotný medailonek. */
.medailonek-ovladani .sdileni { flex-wrap: nowrap; gap: 8px; padding: 0; flex-shrink: 0; }
.medailonek-ovladani .sdilet { width: 44px; padding: 9px; justify-content: center; }
.medailonek-ovladani .sdilet span { display: none; }
.sdilet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--linka);
  border-radius: 999px;
  background: var(--kremova);
  color: var(--vinova);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.sdilet:hover { background: var(--kremova-tepla); }
.sdilet svg { width: 17px; height: 17px; flex-shrink: 0; }
.sdilet[data-hotovo] { border-color: var(--zelena); color: var(--zelena); }

.vyzva-sdileni { padding-block: 56px; }
.vyzva {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: center;
  background: var(--vinova);
  border-radius: 22px;
  padding: 32px 36px;
  color: var(--kremova);
}
.vyzva-telo h2 {
  margin: 0 0 9px;
  font-size: clamp(24px, 3.6vw, 30px);
  line-height: 1.15;
  color: var(--kremova);
}
.vyzva-telo p {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(250, 249, 245, .85);
  max-width: 520px;
}
.vyzva-akce { display: flex; gap: 11px; flex-wrap: wrap; }
.vyzva-akce .tlacitko { font-size: 16px; }

.vyzva-znak { width: 128px; height: auto; }

@media (max-width: 720px) {
  .vyzva { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 22px; }
  .vyzva-znak { width: 96px; justify-self: start; order: -1; }
  .vyzva-akce .tlacitko { width: 100%; }
}

@media (max-width: 560px) {
  .sdileni { padding: 0 18px 12px; flex-shrink: 0; }
  .sdilet { flex: 1 1 auto; justify-content: center; padding: 10px 12px; font-size: 14px; }
}

/* ------------------------------------------------------------------- pata */

.pata { background: var(--vinova-tmava); color: var(--kremova); padding-block: 56px 32px; }
.pata-horni {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  padding-bottom: 38px;
  border-bottom: 1px solid rgba(250, 249, 245, .18);
}
@media (max-width: 820px) { .pata-horni { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.pata h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.15;
  color: var(--kremova);
}
.pata-uvod {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(250, 249, 245, .85);
  max-width: 520px;
}
.pata-site {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  max-width: 560px;
}
.site-dlazdice {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(250, 249, 245, .09);
  border: 1px solid rgba(250, 249, 245, .18);
  color: var(--kremova);
  text-decoration: none;
  min-height: 44px;
}
.site-dlazdice:hover {
  background: rgba(247, 187, 203, .16);
  border-color: rgba(247, 187, 203, .45);
  color: var(--kremova);
}
.site-ikona {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(247, 187, 203, .18);
  color: var(--ruzova);
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-ikona svg { width: 21px; height: 21px; }
.site-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.site-nazev { font-size: 16px; font-weight: 700; }
.site-popis {
  font-size: 14px;
  color: rgba(250, 249, 245, .7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pata-vedle { padding-top: 6px; }
.pata-vedle-nadpis {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ruzova);
}
.pata-vedle-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(250, 249, 245, .78);
}

.pata-dolni {
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  color: rgba(250, 249, 245, .62);
}
.pata-dolni a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(250, 249, 245, .62);
}
.pata-dolni a:hover { color: var(--ruzova); }

/* --------------------------------------------------------------- rozsireni */

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

.doplnit {
  color: var(--zlata);
  font-style: normal;
}

/* --------------------------------------------------------- vnitřní strana */

.strana { padding-block: 48px 64px; max-width: 760px; }
.strana h1 {
  margin: 0 0 26px;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15;
  color: var(--vinova);
}
.strana h2 {
  margin: 32px 0 10px;
  font-family: var(--pismo);
  font-size: 20px;
  font-weight: 700;
  color: var(--vinova);
}
.strana p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; color: var(--text-tlumeny); }
.strana-datum { margin-top: 30px; font-size: 15px; color: var(--text-slaby); }
.strana .tlacitko { margin-top: 12px; }