/*
 * Komponenty webu. Kazdy blok je samostatny – trida se pouziva presne tam,
 * kde je popsana, nic se nedei pres kaskadu z rodice.
 */

/* ==========================================================================
   Tlacitka
   ========================================================================== */

.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mezera-2);
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-kruh);
  background: var(--zelena-600);
  color: var(--bila);
  font-weight: 600;
  font-size: var(--velikost-maly);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--prechod), transform var(--prechod),
              box-shadow var(--prechod), border-color var(--prechod);
}

.tlacitko:hover {
  background: var(--zelena-700);
  color: var(--bila);
  transform: translateY(-2px);
  box-shadow: var(--stin-m);
}

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

.tlacitko-svetle {
  background: var(--bila);
  color: var(--zelena-800);
  box-shadow: var(--stin-s);
}

.tlacitko-svetle:hover {
  background: var(--bila);
  color: var(--zelena-900);
}

.tlacitko-obrys {
  background: transparent;
  border-color: color-mix(in srgb, var(--bila) 55%, transparent);
  color: var(--bila);
}

.tlacitko-obrys:hover {
  background: color-mix(in srgb, var(--bila) 14%, transparent);
  border-color: var(--bila);
  color: var(--bila);
}

.tlacitko-tmave-obrys {
  background: transparent;
  border-color: var(--zelena-300);
  color: var(--zelena-800);
}

.tlacitko-tmave-obrys:hover {
  background: var(--zelena-100);
  color: var(--zelena-900);
}

.tlacitko svg { width: 1.1em; height: 1.1em; flex: none; }

/* ==========================================================================
   Hero – uvodni stranka
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(84dvh, 46rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--zelena-900);
}

.hero-foto,
.hero-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dva prechody: spodni kvuli citelnosti textu, horni kvuli lepive hlavicce. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(20 34 8 / 0.92) 0%, rgb(20 34 8 / 0.55) 38%,
                    rgb(20 34 8 / 0.12) 70%, rgb(20 34 8 / 0.30) 100%);
}

.hero-obsah {
  position: relative;
  z-index: 1;
  padding-block: var(--mezera-8) var(--mezera-9);
  color: var(--bila);
  max-width: 46rem;
}

/* Nadpis je dvouurovnovy: nazev statku velky, misto pod nim mensi. Rozdeleny
   je uz v sablone, tady se jen kazde urovni da vlastni velikost. Nazev statku
   je kratky, takze se do sloupce vejde i hodne velky. */
.hero h1 {
  font-size: clamp(1.9rem, 0.6rem + 6.4vw, 5rem);
  color: var(--bila);
  margin-bottom: var(--mezera-5);
  text-shadow: 0 2px 24px rgb(15 25 5 / 0.35);
  /* Zadny overflow-wrap: dohromady s text-wrap: balance by prohlizeci dovolil
     zlomit i uvnitr pevnych mezer a nazev obce by se zase rozpadl. */
}

/* Nazev obce drzi typo() pohromade pevnymi mezerami (a spojovnikem slov za
   pomlckou), nemuze se tedy zalomit – cely "Roudnice n. L. – Vedomice"
   potrebuje 12,05 nasobek velikosti pisma a musi se vejit vzdycky. Uvnitr
   46rem sloupce (656 px cisteho) na to staci strop 3.3rem. */
.hero-misto {
  display: block;
  font-size: clamp(1.4rem, 0.35rem + 5.24vw, 3.3rem);
}

.hero-lead {
  font-size: var(--velikost-lead);
  color: color-mix(in srgb, var(--bila) 92%, transparent);
  margin-bottom: var(--mezera-6);
  max-width: 38rem;
}

.hero-tlacitka {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mezera-3);
}

.hero-stitek {
  display: inline-flex;
  align-items: center;
  gap: var(--mezera-2);
  padding: 0.4rem 0.95rem;
  margin-bottom: var(--mezera-5);
  border-radius: var(--radius-kruh);
  background: color-mix(in srgb, var(--zelena-400) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--zelena-200) 45%, transparent);
  backdrop-filter: blur(6px);
  color: var(--bila);
  font-size: var(--velikost-mini);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Bez tehle vysky by se SVG bez atributu width roztahlo pres cely pruh. */
.hero-stitek svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* --- Hlavicka vnitrnich stranek --- */

.zahlavi {
  position: relative;
  padding-block: var(--mezera-8) var(--mezera-7);
  background: linear-gradient(150deg, var(--zelena-800), var(--zelena-900) 65%);
  color: var(--bila);
  overflow: hidden;
}

/* Jemny svetelny kruh vpravo nahore – rozbiji plochou barvu. */
.zahlavi::before {
  content: "";
  position: absolute;
  top: -45%;
  right: -12%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle,
              color-mix(in srgb, var(--zelena-400) 30%, transparent), transparent 68%);
  pointer-events: none;
}

.zahlavi-foto {
  position: absolute;
  inset: 0;
  opacity: 0.28;
}

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

.zahlavi .obal { position: relative; z-index: 1; }
.zahlavi h1 { color: var(--bila); margin-bottom: var(--mezera-3); }

.zahlavi-lead {
  font-size: var(--velikost-lead);
  color: color-mix(in srgb, var(--zelena-100) 95%, transparent);
  max-width: 42rem;
  margin: 0;
}

/* --- Drobeckova navigace --- */

.drobecky {
  margin-bottom: var(--mezera-5);
  font-size: var(--velikost-mini);
}

.drobecky ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mezera-2);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.drobecky li { margin: 0; }

.drobecky li + li::before {
  content: "/";
  margin-right: var(--mezera-2);
  color: color-mix(in srgb, var(--zelena-200) 55%, transparent);
}

.drobecky a { color: color-mix(in srgb, var(--zelena-100) 88%, transparent); }
.drobecky a:hover { color: var(--bila); }
.drobecky [aria-current] { color: color-mix(in srgb, var(--bila) 70%, transparent); }

/* ==========================================================================
   Nadpisy sekci
   ========================================================================== */

.nadpis-sekce {
  max-width: var(--sirka-textu);
  margin-bottom: var(--mezera-7);
}

.nadpis-sekce.na-stred {
  margin-inline: auto;
  text-align: center;
}

.nadpis-sekce p {
  font-size: var(--velikost-lead);
  color: var(--text-tlumeny);
  margin-bottom: 0;
}

.nadpis-sekce h2 { margin-bottom: var(--mezera-3); }

.nadocko {
  display: block;
  margin-bottom: var(--mezera-3);
  color: var(--zelena-600);
  font-size: var(--velikost-mini);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sekce-zelena .nadocko { color: var(--zelena-300); }
.sekce-zelena .nadpis-sekce p { color: var(--zelena-100); }

/* ==========================================================================
   Karty
   ========================================================================== */

.karty {
  display: grid;
  gap: var(--mezera-5);
  grid-template-columns: 1fr;
}

@media (min-width: 45rem) {
  .karty-2 { grid-template-columns: repeat(2, 1fr); }
  .karty-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62rem) {
  .karty-3 { grid-template-columns: repeat(3, 1fr); }
  .karty-4 { grid-template-columns: repeat(4, 1fr); }
}

.karta {
  display: flex;
  flex-direction: column;
  background: var(--pozadi-karta);
  border: 1px solid var(--linka);
  border-radius: var(--radius-l);
  padding: var(--mezera-6);
  box-shadow: var(--stin-s);
  transition: transform var(--prechod), box-shadow var(--prechod),
              border-color var(--prechod);
}

.karta:hover {
  transform: translateY(-4px);
  box-shadow: var(--stin-m);
  border-color: var(--zelena-200);
}

.karta h3 { margin-bottom: var(--mezera-3); }
.karta p { color: var(--text-tlumeny); margin-bottom: 0; }

.karta-ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--mezera-5);
  border-radius: var(--radius-m);
  background: var(--zelena-100);
  color: var(--zelena-700);
}

.karta-ikona svg { width: 1.75rem; height: 1.75rem; }

/* ==========================================================================
   Dvojice text + fotka
   ========================================================================== */

.dvojice {
  display: grid;
  gap: var(--mezera-6);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .dvojice {
    gap: var(--mezera-8);
    grid-template-columns: repeat(2, 1fr);
  }

  /* Fotka vpravo i pri obracenem poradi v HTML (text drive kvuli ctecce). */
  .dvojice-obracene .dvojice-foto { order: -1; }
}

.dvojice-foto {
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--stin-m);
}

.dvojice-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.dvojice-foto.na-vysku img { aspect-ratio: 3 / 4; }

/* ==========================================================================
   Cisla (kolik hektaru, od kdy...)
   ========================================================================== */

.cisla {
  display: grid;
  gap: var(--mezera-5);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 56rem) {
  .cisla { grid-template-columns: repeat(4, 1fr); }
}

/* Pod .nadpis-sekce mezeru dela jeji spodni okraj, pod .uspech zadny neni –
   posledni odstavec ma margin-bottom: 0, takze by cisla lezela na textu. */
.uspech + .cisla { margin-top: var(--mezera-6); }

.cislo {
  text-align: center;
  padding: var(--mezera-5) var(--mezera-3);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--bila) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--zelena-300) 20%, transparent);
}

/* Ikona jen doprovazi cislo, proto tlumenejsi zelena nez samotny udaj. */
.cislo-ikona {
  display: block;
  margin-bottom: var(--mezera-3);
  color: color-mix(in srgb, var(--zelena-300) 80%, transparent);
}

/* svg je na webu blokove, text-align: center z .cislo na nej neplati –
   na stred ho dostanou az automaticke postranni okraje. */
.cislo-ikona svg { width: 1.5rem; height: 1.5rem; margin-inline: auto; }

.cislo-hodnota {
  display: block;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bila);
  margin-bottom: var(--mezera-2);
}

.cislo-popis {
  font-size: var(--velikost-maly);
  color: var(--zelena-200);
}

/* ==========================================================================
   Aktuality
   ========================================================================== */

.clanek-karta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pozadi-karta);
  border: 1px solid var(--linka);
  border-radius: var(--radius-l);
  box-shadow: var(--stin-s);
  transition: transform var(--prechod), box-shadow var(--prechod),
              border-color var(--prechod);
}

.clanek-karta:hover {
  transform: translateY(-4px);
  box-shadow: var(--stin-m);
  border-color: var(--zelena-200);
}

.clanek-karta-foto {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--zelena-100);
}

.clanek-karta-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--prechod-pomaly);
}

.clanek-karta:hover .clanek-karta-foto img { transform: scale(1.05); }

.clanek-karta-telo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--mezera-5) var(--mezera-5) var(--mezera-6);
}

/*
 * Nadpis karty je h3 na titulce (stoji pod sekcnim <h2>) a h2 na /aktuality
 * (stoji rovnou pod <h1> stranky). Vizualne je to tyz prvek, proto obe znacky.
 */
.clanek-karta h2,
.clanek-karta h3 {
  font-size: 1.2rem;
  margin-bottom: var(--mezera-3);
  letter-spacing: -0.02em;
}

.clanek-karta h2 a,
.clanek-karta h3 a {
  color: inherit;
  text-decoration: none;
}

/* Klikaci je cela karta, ale v DOM je odkaz jen v nadpisu (kvuli cteckam). */
.clanek-karta h2 a::after,
.clanek-karta h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.clanek-karta { position: relative; }

.clanek-karta h2 a:hover,
.clanek-karta h3 a:hover { color: var(--zelena-700); }

.clanek-karta p {
  color: var(--text-tlumeny);
  font-size: var(--velikost-maly);
  margin-bottom: var(--mezera-5);
}

.clanek-karta-patka {
  margin-top: auto;
  font-weight: 600;
  font-size: var(--velikost-maly);
  color: var(--zelena-700);
  display: inline-flex;
  align-items: center;
  gap: var(--mezera-2);
}

.datum {
  display: inline-flex;
  align-items: center;
  gap: var(--mezera-2);
  margin-bottom: var(--mezera-3);
  color: var(--text-svetly);
  font-size: var(--velikost-mini);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.datum::before {
  content: "";
  width: 1.25rem;
  height: 2px;
  background: var(--zelena-400);
  border-radius: 2px;
}

/* --- Detail clanku --- */

.clanek-perex {
  font-size: var(--velikost-lead);
  color: var(--text-tlumeny);
  max-width: var(--sirka-textu);
  margin-bottom: var(--mezera-6);
}

/* Uzky obal je sirsi nez pohodlna mira textu – fotka a galerie tu maji vic
   mista zamerne. Text se ale bez tohohle drzi vlevo a cely rozdil (na 1280 px
   pres 200 px) zbyde vpravo, takze jako jediny prvek stranky nesedi na stejne
   svisle ose jako nadpis, fotka i galerie. Volne misto proto delime na pul. */
.obal-uzky .clanek-perex,
.obal-uzky > .text {
  max-width: var(--sirka-textu);
  margin-inline: auto;
}

/* Perex uz roli uvodniho odstavce plni, prvni odstavec tela proto zustava
   bezny – jinak by byly na strance dva „leady“ za sebou. */
.clanek-perex + .text > p:first-of-type {
  font-size: inherit;
  color: inherit;
}

.clanek-hlavni-foto {
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--stin-m);
  margin-bottom: var(--mezera-7);
}

.clanek-hlavni-foto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Sken na vysku (certifikat, listina) se ukazuje cely, jen uzsi a bez orezu. */
.clanek-hlavni-foto.je-na-vysku {
  max-width: 30rem;
  margin-inline: auto;
}

.clanek-hlavni-foto.je-na-vysku img {
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--krem-200);
}

.clanek-navigace {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mezera-4);
  justify-content: space-between;
  margin-top: var(--mezera-8);
  padding-top: var(--mezera-6);
  border-top: 1px solid var(--linka);
}

/* ==========================================================================
   Galerie
   ========================================================================== */

.galerie {
  display: grid;
  gap: var(--mezera-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 45rem) {
  .galerie { grid-template-columns: repeat(3, 1fr); gap: var(--mezera-4); }
}

@media (min-width: 70rem) {
  .galerie { grid-template-columns: repeat(4, 1fr); }
}

.galerie-polozka {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--zelena-100);
  cursor: zoom-in;
  box-shadow: var(--stin-s);
}

.galerie-polozka img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--prechod-pomaly), filter var(--prechod);
}

.galerie-polozka:hover img {
  transform: scale(1.06);
  filter: brightness(1.04);
}

/* Prvni fotka v galerii dostane dvojnasobek mista – mrizka tim oziije. */
@media (min-width: 45rem) {
  .galerie-polozka.je-velka {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }
}

/* --- Lightbox --- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--nad-vsim);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--mezera-4);
  background: rgb(12 20 5 / 0.94);
  backdrop-filter: blur(6px);
  border: 0;
}

.lightbox[open] { display: flex; }
.lightbox::backdrop { background: rgb(12 20 5 / 0.94); }

.lightbox img {
  max-width: min(100%, 82rem);
  max-height: 86dvh;
  width: auto;
  border-radius: var(--radius-m);
  box-shadow: var(--stin-l);
}

.lightbox-popis {
  position: absolute;
  left: 50%;
  bottom: max(var(--mezera-4), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: min(92%, 48rem);
  text-align: center;
  color: color-mix(in srgb, var(--bila) 88%, transparent);
  font-size: var(--velikost-maly);
  background: rgb(12 20 5 / 0.55);
  padding: var(--mezera-2) var(--mezera-4);
  border-radius: var(--radius-kruh);
}

.lightbox-ovladani {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid color-mix(in srgb, var(--bila) 30%, transparent);
  border-radius: var(--radius-kruh);
  background: rgb(255 255 255 / 0.1);
  color: var(--bila);
  cursor: pointer;
  transition: background-color var(--prechod);
}

.lightbox-ovladani:hover { background: rgb(255 255 255 / 0.22); }
.lightbox-ovladani svg { width: 1.4rem; height: 1.4rem; }

.lightbox-zavrit { top: var(--mezera-4); right: var(--mezera-4); }
.lightbox-predchozi { left: var(--mezera-4); top: 50%; transform: translateY(-50%); }
.lightbox-dalsi { right: var(--mezera-4); top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   Dokumenty
   ========================================================================== */

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

.dokument {
  display: flex;
  align-items: center;
  gap: var(--mezera-4);
  padding: var(--mezera-4) var(--mezera-5);
  background: var(--pozadi-karta);
  border: 1px solid var(--linka);
  border-radius: var(--radius-m);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--prechod), box-shadow var(--prechod),
              transform var(--prechod);
  margin: 0;
}

.dokument:hover {
  border-color: var(--zelena-300);
  box-shadow: var(--stin-m);
  transform: translateX(3px);
  color: var(--text);
}

.dokument-ikona {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-s);
  background: var(--zlata-100);
  color: var(--zlata-600);
}

.dokument-ikona svg { width: 1.5rem; height: 1.5rem; }

/* Nazev a velikost pod sebou – jinak by se slily do jedne vety. */
.dokument-nazev {
  display: block;
  font-weight: 600;
}

.dokument-popis {
  display: block;
  font-size: var(--velikost-mini);
  color: var(--text-svetly);
}

.dokument-sipka {
  margin-left: auto;
  color: var(--zelena-600);
  flex: none;
}

/* ==========================================================================
   Kontakt
   ========================================================================== */

.kontakt-mrizka {
  display: grid;
  gap: var(--mezera-6);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .kontakt-mrizka { grid-template-columns: 1fr 1fr; gap: var(--mezera-8); }
}

.udaje {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--mezera-5);
}

.udaj {
  display: flex;
  gap: var(--mezera-4);
  margin: 0;
}

.udaj-ikona {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-m);
  background: var(--zelena-100);
  color: var(--zelena-700);
}

.udaj-ikona svg { width: 1.4rem; height: 1.4rem; }

.udaj-popis {
  display: block;
  font-size: var(--velikost-mini);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-svetly);
  margin-bottom: 2px;
}

.udaj-hodnota {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--zelena-900);
}

.udaj-hodnota a { color: inherit; }

.tabulka-udaju {
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--linka);
  background: var(--pozadi-karta);
}

.tabulka-udaju th,
.tabulka-udaju td {
  padding: var(--mezera-4) var(--mezera-5);
  text-align: left;
  border-bottom: 1px solid var(--linka);
  vertical-align: top;
}

.tabulka-udaju tr:last-child th,
.tabulka-udaju tr:last-child td { border-bottom: 0; }

.tabulka-udaju th {
  width: 42%;
  font-weight: 600;
  color: var(--text-tlumeny);
  font-size: var(--velikost-maly);
}

.mapa {
  border: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
  box-shadow: var(--stin-m);
}

/* ==========================================================================
   Zvyraznene pruhy
   ========================================================================== */

.uspech {
  display: grid;
  gap: var(--mezera-6);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .uspech { grid-template-columns: auto 1fr; gap: var(--mezera-8); }
}

.uspech-znak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--zlata-500), var(--zlata-600));
  color: var(--bila);
  box-shadow: var(--stin-l);
}

.uspech-znak svg { width: 3.25rem; height: 3.25rem; }

.zrizovatel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mezera-5);
  padding: var(--mezera-5) var(--mezera-6);
  background: var(--pozadi-karta);
  border: 1px solid var(--linka);
  border-radius: var(--radius-l);
}

.zrizovatel img { width: auto; max-height: 3.5rem; }
.zrizovatel p { margin: 0; color: var(--text-tlumeny); font-size: var(--velikost-maly); }

/* ==========================================================================
   Drobne pomocne tridy
   ========================================================================== */

.stred-tlacitko {
  margin-top: var(--mezera-7);
  margin-bottom: 0;
  text-align: center;
}

.odsazeni-nahore {
  margin-top: var(--mezera-6);
  margin-bottom: 0;
}

/* Nadpis galerie pod textem clanku potrebuje vetsi odstup nez bezny nadpis. */
.odsazeni-galerie {
  margin-top: var(--mezera-8);
}

/* ==========================================================================
   Odhalovani pri scrollu
   ========================================================================== */

.odhaleni {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.odhaleni.je-videt {
  opacity: 1;
  transform: none;
}

/* Bez JS (a s vypnutymi animacemi) musi byt obsah videt vzdy. */
.bez-js .odhaleni {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .odhaleni { opacity: 1; transform: none; transition: none; }
}