/*
  Design systém SDH Vepřová.

  Barvy, typografii a rozestupy bere z tokenů níže. Nikde v šabloně se
  nesmí psát barva ani velikost písma napřímo, vždy jen přes proměnnou.

  Fonty jsou uložené u nás, žádný požadavek na cizí doménu. Je to
  požadavek ochrany osobních údajů, ne technická preference.
*/

/* ---------------------------------------------------------------- FONTY */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- TOKENY */

:root {
  --barva-cervena: #c8102e;
  --barva-cervena-tmava: #8e0b20;
  --barva-antracit: #16191d;
  --barva-antracit-2: #262b32;
  --barva-popel: #f4f5f7;
  --barva-bila: #ffffff;
  --barva-signalni: #f2c200;
  --barva-text: #1c1f23;
  --barva-text-slaby: #5a6169;
  --barva-linka: #dde1e6;

  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-kronika: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Typová stupnice. Nic mezi těmito hodnotami. */
  --text-13: 0.8125rem;
  --text-15: 0.9375rem;
  --text-17: 1.0625rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-32: 2rem;
  --text-44: 2.75rem;
  --text-60: 3.75rem;

  /* Osmibodová mřížka. */
  --mezera-8: 0.5rem;
  --mezera-16: 1rem;
  --mezera-24: 1.5rem;
  --mezera-32: 2rem;
  --mezera-48: 3rem;
  --mezera-64: 4rem;
  --mezera-96: 6rem;

  --sirka-obsah: 1140px;
  --sirka-text: 68ch;
  --radius: 4px;
  --prechod: 150ms;
}

/*
  Tmavý režim.

  Většina návštěv je z mobilu a tmavý režim v telefonu je běžné nastavení.
  Není to inverze: přepisují se jen tokeny, komponenty zůstávají stejné.

  Dvě věci, které se snadno přehlédnou:

  1. Červená #c8102e má na tmavém podkladu kontrast 3,6:1, což nestačí.
     Posouvá se proto na světlejší odstín. Na červeném tlačítku zůstává
     původní, tam je červená podkladem pod bílým textem, ne textem.

  2. Tmavá sekce musí zůstat tmavší než okolí, jinak přestane fungovat
     jako dělič a stránka se slije. Antracit se proto ztmavuje.

  Signální žlutá se nemění. Je to varovná barva a musí vypadat stejně
  v obou režimech.
*/
/*
  Tmavé tokeny se uplatní ve dvou případech:

  1. Zařízení má tmavý režim a člověk si na webu nezvolil světlý.
  2. Člověk si na webu zvolil tmavý, ať má zařízení cokoli.

  Volba na webu proto musí přebít nastavení zařízení v obou směrech,
  jinak by přepínač u poloviny lidí nefungoval. Hodnoty jsou v obou
  případech stejné, proto sdílejí jeden seznam.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-motiv="svetly"]) {
    --barva-bila: #14171a;
    --barva-popel: #1b1f24;
    --barva-text: #e6e9ec;
    --barva-text-slaby: #9aa2ab;
    --barva-linka: #2c323a;
    --barva-cervena: #ff4256;
    --barva-cervena-tmava: #ff6b7a;
    --barva-antracit: #0e1013;
    --barva-antracit-2: #1b1f24;
    --barva-na-tmavem: #eef1f4;
    --barva-na-tmavem-slaby: #b9c0c8;
  }
}

:root[data-motiv="tmavy"] {
  --barva-bila: #14171a;
  --barva-popel: #1b1f24;
  --barva-text: #e6e9ec;
  --barva-text-slaby: #9aa2ab;
  --barva-linka: #2c323a;
  --barva-cervena: #ff4256;
  --barva-cervena-tmava: #ff6b7a;
  --barva-antracit: #0e1013;
  --barva-antracit-2: #1b1f24;
  --barva-na-tmavem: #eef1f4;
  --barva-na-tmavem-slaby: #b9c0c8;
}

/*
  Ve světlém režimu je podklad tlačítka totožný s akcentem.

  Token --barva-na-tmavem je světlý text na tmavém podkladu: v tmavé sekci,
  v patičce a nad hero fotkou. Nesmí se pro něj používat --barva-bila,
  ta se v tmavém režimu stane tmavou a text by zmizel.
*/
:root {
  --barva-cervena-plocha: #c8102e;
  --barva-cervena-plocha-hover: #8e0b20;
  --barva-na-tmavem: #ffffff;
  --barva-na-tmavem-slaby: #dde1e6;

  /*
    Červená jako text na antracitu. Základní #c8102e tam má kontrast
    přesně 3,00:1, což projde jen u velkého tučného textu a je to na hraně.
    V tmavé sekci se proto používá světlejší odstín, který dá 5,6:1.
  */
  --barva-cervena-na-tmavem: #ff4256;
}



/* ------------------------------------------------------------- ZÁKLADY */

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

body {
  margin: 0;
  background-color: var(--barva-bila);
  color: var(--barva-text);
  font-family: var(--font-text);
  font-size: var(--text-17);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}

h1,
h2 {
  letter-spacing: -0.02em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* Odkazy musí být poznatelné i bez barvy. Požadavek WCAG. */
a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--prechod) ease-out;
}

a:hover {
  color: var(--barva-cervena-tmava);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--barva-antracit);
  outline-offset: 2px;
  border-radius: 2px;
}

.na-tmavem :focus-visible {
  outline-color: var(--barva-na-tmavem);
}

/*
  Tmavá sekce.

  Text v ní musí barvu dostat výslovně. Jinak zdědí antracitovou z body
  a na antracitovém podkladu je nečitelný. Barvu proto nastavuje obal,
  ne jednotlivé komponenty.
*/
.na-tmavem,
.sekce--tmava {
  color: var(--barva-na-tmavem-slaby);
}

.na-tmavem h1,
.na-tmavem h2,
.na-tmavem h3,
.sekce--tmava h1,
.sekce--tmava h2,
.sekce--tmava h3 {
  color: var(--barva-na-tmavem);
}

.na-tmavem a,
.sekce--tmava a {
  color: var(--barva-na-tmavem);
}

.na-tmavem a:hover,
.na-tmavem a:focus-visible,
.sekce--tmava a:hover,
.sekce--tmava a:focus-visible {
  color: var(--barva-signalni);
}

/* Červené akcenty uvnitř tmavé sekce, viz komentář u tokenu. */
.na-tmavem .vyjezd__cislo,
.sekce--tmava .vyjezd__cislo,
.na-tmavem .sekce__cislo .cislice,
.sekce--tmava .sekce__cislo .cislice {
  color: var(--barva-cervena-na-tmavem);
}

/* Tlačítko si drží vlastní barvy, tmavá sekce mu do nich nemluví. */
.na-tmavem .tlacitko,
.sekce--tmava .tlacitko {
  color: var(--barva-na-tmavem);
}

.na-tmavem .tlacitko--obtazene,
.sekce--tmava .tlacitko--obtazene {
  border-color: rgb(255 255 255 / 0.4);
}

.na-tmavem .vyjezd__datum,
.sekce--tmava .vyjezd__datum,
.na-tmavem .karta__datum,
.sekce--tmava .karta__datum,
.na-tmavem .karta__perex,
.sekce--tmava .karta__perex {
  color: var(--barva-na-tmavem-slaby);
  opacity: 0.8;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

time,
td,
th,
.cislice {
  font-variant-numeric: tabular-nums;
}

::selection {
  background-color: var(--barva-cervena-plocha);
  color: var(--barva-na-tmavem);
}

/* ------------------------------------------------------------- POMOCNÉ */

.obal {
  max-width: var(--sirka-obsah);
  margin-inline: auto;
  padding-inline: var(--mezera-16);
}

@media (width >= 64rem) {
  .obal {
    padding-inline: var(--mezera-32);
  }
}

.text-blok {
  max-width: var(--sirka-text);
}

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

/* Odkaz na přeskočení obsahu. */
.preskocit {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--mezera-8) var(--mezera-16);
  background-color: var(--barva-signalni);
  color: var(--barva-antracit);
  font-family: var(--font-display);
  font-size: var(--text-15);
  text-decoration: none;
}

.preskocit:focus {
  left: var(--mezera-8);
  top: var(--mezera-8);
}

/*
  Signature prvek: reflexní pruh jako dělič sekcí.
  Odkaz na reflexní pruh na zásahovém obleku.
  Nejvýše dvakrát na stránce.
*/
.reflexni-pruh {
  height: 6px;
  background-image: repeating-linear-gradient(
    45deg,
    var(--barva-cervena) 0 12px,
    var(--barva-bila) 12px 24px
  );
}

/* Návěstí sekce. Popis pole na formuláři, ne ozdobný nadpis. */
.navesti {
  display: block;
  padding-top: var(--mezera-8);
  border-top: 2px solid var(--barva-cervena);
  font-family: var(--font-display);
  font-size: var(--text-13);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--barva-text-slaby);
}

.na-tmavem .navesti {
  color: var(--barva-na-tmavem-slaby);
}

/* Tlačítko */
.tlacitko {
  display: inline-block;
  padding: var(--mezera-16) var(--mezera-32);
  border: 0;
  border-radius: var(--radius);
  background-color: var(--barva-cervena-plocha);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--prechod) ease-out;
}

.tlacitko:hover {
  background-color: var(--barva-cervena-plocha-hover);
  color: #fff;
}

.tlacitko--obtazene {
  background-color: transparent;
  border: 1px solid var(--barva-linka);
  color: var(--barva-text);
}

.tlacitko--obtazene:hover {
  background-color: transparent;
  border-color: var(--barva-cervena);
  color: var(--barva-text);
}

/* -------------------------------------------------------------- HLAVIČKA */

.hlavicka {
  position: relative;
  z-index: 10;
  background-color: var(--barva-bila);
  border-bottom: 1px solid var(--barva-linka);
}

/* Na úvodní stránce hlavička leží přes fotku. */
.hlavicka--pres-hero {
  position: absolute;
  inset: 0 0 auto;
  background-color: transparent;
  border-bottom: 0;
  color: var(--barva-na-tmavem);
}

.hlavicka__obal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mezera-24);
  padding-block: var(--mezera-16);
}

.znacka {
  display: flex;
  align-items: center;
  gap: var(--mezera-16);
  text-decoration: none;
}

.znacka__symbol {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--radius);
  background-color: var(--barva-cervena-plocha);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.04em;
}

/*
  Nahrané logo na místě symbolu.

  Stejný čtverec jako symbol, aby se hlavička nehýbala podle toho, jestli
  sbor logo nahrál. Obrázek se do čtverce vejde celý, neořezává se:
  znak jednotky nesnese uříznutý okraj.
*/
.znacka__logo {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  object-fit: contain;
}

.znacka__nazev {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.znacka__hlavni {
  font-family: var(--font-display);
  font-size: var(--text-20);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.znacka__podnadpis {
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.14em;
  color: var(--barva-text-slaby);
}

.hlavicka--pres-hero .znacka__hlavni {
  color: var(--barva-na-tmavem);
}

.hlavicka--pres-hero .znacka__podnadpis {
  color: var(--barva-na-tmavem-slaby);
}

/* Hlavní navigace */
.navigace {
  display: none;
}

@media (width >= 64rem) {
  .navigace {
    display: block;
  }
}

.navigace ul {
  display: flex;
  align-items: center;
  gap: var(--mezera-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigace a {
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--barva-text-slaby);
}

.navigace a:hover {
  color: var(--barva-text);
  border-bottom-color: var(--barva-na-tmavem-slaby);
}

.navigace .current-menu-item > a,
.navigace .current_page_item > a {
  color: var(--barva-text);
  border-bottom-color: var(--barva-cervena);
}

.hlavicka--pres-hero .navigace a {
  color: var(--barva-na-tmavem-slaby);
}

.hlavicka--pres-hero .navigace a:hover,
.hlavicka--pres-hero .navigace .current-menu-item > a {
  color: var(--barva-na-tmavem);
  border-bottom-color: var(--barva-cervena);
}

/* Mobilní menu stojí na details a summary, funguje bez JavaScriptu. */
.menu-mobil {
  position: relative;
}

@media (width >= 64rem) {
  .menu-mobil {
    display: none;
  }
}

.menu-mobil > summary {
  display: flex;
  align-items: center;
  gap: var(--mezera-8);
  padding: var(--mezera-8) var(--mezera-16);
  border: 1px solid var(--barva-linka);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.menu-mobil > summary::-webkit-details-marker {
  display: none;
}

.hlavicka--pres-hero .menu-mobil > summary {
  border-color: rgb(255 255 255 / 0.5);
  color: var(--barva-na-tmavem);
}

.menu-mobil__panel {
  position: absolute;
  inset-inline: auto 0;
  top: calc(100% + var(--mezera-8));
  z-index: 30;
  min-width: 15rem;
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
  border: 1px solid var(--barva-linka);
  border-radius: var(--radius);
  background-color: var(--barva-bila);
  color: var(--barva-text);
}

.menu-mobil__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-mobil__panel li {
  border-bottom: 1px solid var(--barva-linka);
}

.menu-mobil__panel li:last-child {
  border-bottom: 0;
}

.menu-mobil__panel a {
  display: block;
  padding: var(--mezera-16);
  font-family: var(--font-display);
  font-size: var(--text-17);
  text-decoration: none;
}

/* ------------------------------------------------------------------ HERO */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 32rem;
  height: 78vh;
  max-height: 46rem;
  overflow: hidden;
  text-align: center;
}

.hero__fotka {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  Tmavý překryv. Design systém vyžaduje alespoň 45 procent,
  tady je víc, aby bílý text nad fotkou spolehlivě splňoval kontrast.
*/
.hero__prekryv {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(22 25 29 / 0.55) 0%,
    rgb(22 25 29 / 0.45) 45%,
    rgb(22 25 29 / 0.75) 100%
  );
}

.hero__obsah {
  position: relative;
  padding: var(--mezera-96) var(--mezera-16) var(--mezera-64);
  color: var(--barva-na-tmavem);
}

.hero__navesti {
  font-family: var(--font-display);
  font-size: var(--text-15);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--barva-na-tmavem);
}

@media (width >= 48rem) {
  .hero__navesti {
    font-size: var(--text-20);
    letter-spacing: 0.3em;
  }
}

.hero__nazev {
  margin-top: var(--mezera-8);
  font-size: var(--text-44);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--barva-na-tmavem);
  text-transform: uppercase;
}

@media (width >= 48rem) {
  .hero__nazev {
    font-size: var(--text-60);
  }
}

@media (width >= 64rem) {
  .hero__nazev {
    font-size: 5rem;
  }
}

/* Červená linka pod názvem. Nese barvu, kterou nesmí nést text. */
.hero__linka {
  width: 6rem;
  height: 4px;
  margin: var(--mezera-24) auto 0;
  background-color: var(--barva-cervena);
}

.hero__tlacitko {
  margin-top: var(--mezera-32);
}

/* ================================================================ SEKCE */

/*
  Sekce je základní pásmo stránky. Střídání bílé, popelové a tmavé plochy
  je jediný dělič, který web používá. Stíny ani rámečky kolem sekcí ne.
*/

.sekce {
  padding-block: var(--mezera-48);
}

@media (width >= 48rem) {
  .sekce {
    padding-block: var(--mezera-64);
  }
}

@media (width >= 64rem) {
  .sekce {
    padding-block: var(--mezera-96);
  }
}

.sekce--popel {
  background-color: var(--barva-popel);
}

/*
  Tmavá sekce. Podle design systému patří zásahové jednotce a technice,
  tedy technické části webu. Nikde jinde.
*/
.sekce--tmava {
  background-color: var(--barva-antracit);
}

.sekce__hlavicka {
  margin-bottom: var(--mezera-32);
}

.sekce__nadpis {
  margin: var(--mezera-8) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-32);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

@media (width >= 48rem) {
  .sekce__nadpis {
    font-size: var(--text-44);
  }
}

.na-tmavem .sekce__nadpis,
.sekce--tmava .sekce__nadpis {
  color: var(--barva-na-tmavem);
}

/* =============================================================== MŘÍŽKA */

.mrizka {
  display: grid;
  gap: var(--mezera-32);
}

@media (width >= 48rem) {
  .mrizka--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mrizka--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 64rem) {
  .mrizka--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ================================================================ KARTA */

/*
  Karta obsahu. Ohraničená linkou, ne stínem. Technický pocit,
  jak vyžaduje design systém.
*/

.karta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--barva-linka);
  border-radius: var(--radius);
  background-color: var(--barva-bila);
  overflow: hidden;
}

.sekce--tmava .karta {
  border-color: var(--barva-antracit-2);
  background-color: var(--barva-antracit-2);
}

.karta img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.karta__telo {
  flex: 1;
  padding: var(--mezera-24);
}

.karta__datum {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.08em;
  color: var(--barva-text-slaby);
}

.karta__nadpis {
  margin: var(--mezera-8) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-20);
  line-height: 1.25;
}

.karta__nadpis a {
  color: var(--barva-text);
  text-decoration: none;
}

.karta__nadpis a:hover,
.karta__nadpis a:focus-visible {
  color: var(--barva-cervena);
}

.sekce--tmava .karta__nadpis a {
  color: var(--barva-na-tmavem);
}

.karta__perex {
  margin: var(--mezera-8) 0 0;
  font-size: var(--text-15);
  color: var(--barva-text-slaby);
}

/* ============================================================= VÝJEZDY */

/*
  Seznam výjezdů. Sazba je tabulková, ne kartová.
  Zdroj: formulář zápisu o zásahu, kde jde jeden řádek pod druhý.
*/

.vyjezdy {
  margin-top: var(--mezera-24);
  border-bottom: 1px solid var(--barva-linka);
}

.sekce--tmava .vyjezdy {
  border-bottom-color: var(--barva-antracit-2);
}

.sekce--tmava .vyjezd {
  border-top-color: var(--barva-antracit-2);
}

/* ============================================================== PATIČKA */

.paticka {
  background-color: var(--barva-antracit);
  color: var(--barva-na-tmavem-slaby);
  padding-block: var(--mezera-48);
}

.paticka__obal {
  display: grid;
  gap: var(--mezera-32);
}

@media (width >= 48rem) {
  .paticka__obal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mezera-48);
  }
}

@media (width >= 64rem) {
  .paticka__obal {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.paticka a {
  color: var(--barva-na-tmavem);
}

.paticka a:hover,
.paticka a:focus-visible {
  color: var(--barva-signalni);
}

.paticka__zapis {
  margin: var(--mezera-16) 0 0;
  font-size: var(--text-15);
}

.paticka__zapis div + div {
  margin-top: var(--mezera-8);
}

.paticka__zapis dt {
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--barva-na-tmavem-slaby);
}

.paticka__zapis dd {
  margin: 0;
  color: var(--barva-na-tmavem-slaby);
}

.paticka__rozcestnik {
  margin: var(--mezera-16) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-15);
}

.paticka__rozcestnik li + li {
  margin-top: var(--mezera-8);
}

.paticka__spodek {
  margin-top: var(--mezera-48);
  padding-top: var(--mezera-24);
  border-top: 1px solid var(--barva-antracit-2);
  font-size: var(--text-13);
  color: var(--barva-na-tmavem-slaby);
}

.zapis {
  margin: 0;
  display: grid;
  gap: var(--mezera-8);
}

.zapis > div {
  display: grid;
  gap: 2px;
  padding-block: var(--mezera-8);
  border-top: 1px solid var(--barva-linka);
}

.sekce--tmava .zapis > div {
  border-top-color: var(--barva-antracit-2);
}

.zapis dt {
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--barva-text-slaby);
}

.sekce--tmava .zapis dt {
  color: var(--barva-na-tmavem-slaby);
}

.zapis dd {
  margin: 0;
}

@media (width >= 40rem) {
  .zapis > div {
    grid-template-columns: 6rem 1fr;
    gap: var(--mezera-24);
    align-items: baseline;
  }
}

/* --------------------------------------------------------------- VÝJEZDY */

.vyjezd {
  padding-block: var(--mezera-24);
  border-top: 1px solid var(--barva-linka);
}

.vyjezd__hlava {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mezera-8) var(--mezera-16);
}

.vyjezd__cislo {
  font-family: var(--font-display);
  font-size: var(--text-20);
  letter-spacing: 0.04em;
  color: var(--barva-cervena);
}

.vyjezd__datum {
  font-size: var(--text-15);
  color: var(--barva-text-slaby);
}

.vyjezd__obec {
  margin-top: var(--mezera-16);
  font-size: var(--text-20);
}

.vyjezd__popis {
  margin-top: var(--mezera-8);
}

.vyjezd__popis p {
  margin: 0;
}

.vyjezd .zapis {
  margin-top: var(--mezera-16);
}

/*
  Odznak typu události.
  Zdroj vizuálu: štítek se značením na technice. Obdélník se zaoblením,
  ne měkká pilulka. Planý poplach je schválně jen obtažený, aby v seznamu
  nepůsobil jako skutečný zásah.
*/
.odznak {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--text-13);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Cervena je tady plocha pod svetlym textem, proto si drzi sytost. */
.odznak--pozar {
  background-color: var(--barva-cervena-plocha);
  color: var(--barva-na-tmavem);
}

.odznak--nehoda {
  background-color: var(--barva-antracit);
  color: var(--barva-na-tmavem);
}

.odznak--pomoc {
  background-color: var(--barva-linka);
  color: var(--barva-text);
}

.odznak--unik {
  background-color: var(--barva-signalni);
  color: var(--barva-antracit);
}

.odznak--plany,
.odznak--ostatni {
  border: 1px solid var(--barva-text-slaby);
  color: var(--barva-text-slaby);
}

/* Archiv po letech */
.roky {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mezera-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.roky__odkaz {
  display: inline-flex;
  align-items: baseline;
  gap: var(--mezera-8);
  padding: var(--mezera-8) var(--mezera-16);
  border: 1px solid var(--barva-linka);
  border-radius: var(--radius);
  background-color: var(--barva-bila);
  font-family: var(--font-display);
  font-size: var(--text-15);
  text-decoration: none;
}

.roky__odkaz:hover {
  border-color: var(--barva-cervena);
  color: var(--barva-text);
}

/* Vybraný rok. Nestačí barva, rozdíl musí být poznat i bez ní. */

.roky__odkaz--vybrany {
  border-color: var(--barva-cervena);
  background-color: var(--barva-cervena-plocha);
  color: var(--barva-na-tmavem);
}

.roky__odkaz--vybrany:hover {
  color: var(--barva-na-tmavem);
}

.roky__odkaz--vybrany .roky__pocet {
  color: inherit;
  opacity: 0.75;
}

.roky__pocet {
  font-size: var(--text-13);
  color: var(--barva-text-slaby);
}

/* Prázdný stav je výzva k akci, ne omluva. */
/*
  Prázdný stav.

  Web sboru bude dlouho neúplný, sbor údaje dodává postupně. Prázdný stav
  je proto běžný stav, ne výjimka, a sází se v běžné velikosti písma.
  Kurzíva ani zmenšené písmo ne, není to poznámka pod čarou.

  Přerušovaný rámeček dřív naznačoval, že tu něco chybí. Vypadalo to jako
  chyba webu. Teď je to plná plocha s červenou linkou vlevo, stejně jako
  úkol v administraci: sdělení, ne omluva.
*/
.prazdny-stav {
  max-width: var(--sirka-text);
  padding: var(--mezera-24);
  border-left: 4px solid var(--barva-cervena);
  border-radius: 0 var(--radius) var(--radius) 0;
  background-color: var(--barva-popel);
  font-size: var(--text-17);
}

.sekce--popel .prazdny-stav {
  background-color: var(--barva-bila);
}

.sekce--tmava .prazdny-stav,
.na-tmavem .prazdny-stav {
  background-color: var(--barva-antracit-2);
  color: var(--barva-na-tmavem);
}

/* Odkaz na to nejbližší užitečné. Prázdná sekce má vždy nabídnout, kam dál. */
.prazdny-stav__kam {
  display: block;
  margin-top: var(--mezera-16);
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Text z editoru */
.obsah h2 {
  margin-top: var(--mezera-32);
  font-size: var(--text-24);
}

.obsah p {
  margin-top: var(--mezera-16);
}

.obsah ul {
  margin-top: var(--mezera-16);
  padding-left: 1.25rem;
}

.obsah li {
  margin-top: var(--mezera-8);
}

/* Pohyb minimální a vždy s respektem k nastavení uživatele. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------------- OSOBA */

.osoba {
  display: flex;
  gap: var(--mezera-24);
  padding-block: var(--mezera-24);
  border-top: 1px solid var(--barva-linka);
}

.osoba__fotka {
  width: 6rem;
  height: 6rem;
  flex: none;
  border-radius: var(--radius);
  object-fit: cover;
}

.osoba__jmeno {
  margin-top: var(--mezera-8);
  font-size: var(--text-20);
}

/* Upozornění na tísňovou linku. Signální žlutá jen tady a v boxu čísel. */
.upozorneni {
  margin-top: var(--mezera-16);
  padding: var(--mezera-8) var(--mezera-16);
  border-radius: var(--radius);
  background-color: var(--barva-signalni);
  color: var(--barva-antracit);
  font-size: var(--text-13);
  max-width: 40rem;
}

/* --------------------------------------------------------------- KRONIKA */

/*
  Záznam z kroniky.

  Dřív to bylo pásmo přes celou šířku okna. Když se historie přesunula
  do běžné stránky, ocitl se záznam uvnitř obalu a pásmo přes celou šířku
  už nešlo udělat bez triku s jednotkou vw, který na počítači s viditelným
  posuvníkem způsobí vodorovné přetečení.

  Je to teď blok uvnitř stránky. Střídání podkladu zůstává, jen nesahá
  až k okraji okna.
*/
.kronika {
  margin-top: var(--mezera-32);
  padding: var(--mezera-32);
  border-radius: var(--radius);
}

.kronika--popel {
  background-color: var(--barva-popel);
}

.kronika__obal {
  display: grid;
  gap: var(--mezera-24);
}

@media (width >= 64rem) {
  .kronika__obal {
    grid-template-columns: 8rem 1fr;
    gap: var(--mezera-48);
  }
}

/* Sloupec s rokem. Zdroj: sazba v kronice, kde rok stojí na kraji stránky. */
.kronika__rok {
  position: sticky;
  top: var(--mezera-16);
  align-self: start;
}

.kronika__rok-od {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-32);
  line-height: 1;
  color: var(--barva-cervena);
}

.kronika__rok-do {
  display: block;
  margin-top: var(--mezera-8);
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--barva-text-slaby);
}

.kronika__nadpis {
  font-size: var(--text-24);
}

.kronika__citace {
  margin: var(--mezera-24) 0 0;
  padding-left: var(--mezera-24);
  border-left: 2px solid var(--barva-cervena);
  font-family: var(--font-kronika);
  font-size: var(--text-20);
  font-style: italic;
}

/* Kronika je jediné místo na webu s patkovým písmem. */
.kronika__text {
  margin-top: var(--mezera-24);
  max-width: 60ch;
  font-family: var(--font-kronika);
}

/* ------------------------------------------------------------------ AKCE */

.akce {
  display: flex;
  gap: var(--mezera-16);
  padding: var(--mezera-24);
  border: 1px solid var(--barva-linka);
  border-radius: var(--radius);
  background-color: var(--barva-bila);
}

.akce--zrusena {
  opacity: 0.6;
}

/* Datum je nejdůležitější údaj na celé kartě. */
.akce__datum {
  flex: none;
  padding-right: var(--mezera-16);
  border-right: 1px solid var(--barva-linka);
  text-align: center;
}

.akce__den {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-44);
  line-height: 1;
}

.akce__mesic {
  display: block;
  margin-top: var(--mezera-8);
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.akce__rok {
  display: block;
  margin-top: 2px;
  font-size: var(--text-13);
  color: var(--barva-text-slaby);
}

.akce__telo p {
  margin: 0;
}

/* ------------------------------------------------------------- DROBEČKY */

.drobecky {
  margin-bottom: var(--mezera-24);
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.drobecky a {
  color: var(--barva-text-slaby);
  text-decoration: none;
}

.drobecky a::before {
  content: '\2190';
  margin-right: var(--mezera-8);
}

.drobecky a:hover {
  color: var(--barva-cervena);
}

/* --------------------------------------------------------- DETAIL STROJE */

.stroj__fotka {
  margin: 0;
  background-color: var(--barva-antracit);
}

.stroj__fotka img {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
}

/* ---------------------------------------------------------- DETAIL AKCE */

.akce__termin {
  display: flex;
  align-items: baseline;
  gap: var(--mezera-16);
  margin-top: var(--mezera-16);
  font-family: var(--font-display);
  font-size: var(--text-24);
  color: var(--barva-cervena);
}

.akce__hodina {
  padding-left: var(--mezera-16);
  border-left: 1px solid var(--barva-linka);
  color: var(--barva-text);
}

/* -------------------------------------------------------------- GALERIE */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--mezera-8);
}

.galerie__polozka {
  display: block;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--barva-popel);
}

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

.galerie__polozka:hover img,
.galerie__polozka:focus-visible img {
  transform: scale(1.04);
}

/* Prohlížeč fotek. Bez JavaScriptu se nezobrazí a odkazy vedou na plnou fotku. */

/*
  Prohlížeč fotek.

  Vždycky tmavý, ať má web zapnutý světlý nebo tmavý vzhled. Fotka se
  na tmavém podkladu čte lépe a oko od ní nic neodvádí. Barvy jsou proto
  zapsané napevno a záměrně nevycházejí z tokenů.

  Rozvržení se zapíná až u otevřeného dialogu. Zavřený dialog prohlížeč
  sám skrývá, ale zápis display: flex je silnější a přebil by ho.
*/

.prohlizec {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 0;
  border: 0;
  background-color: rgb(9 11 13 / 0.97);
  color: #fff;

  /* Rozměry se musí uvést výslovně. Prohlížeč jinak dá dialogu
     šířku i výšku podle obsahu a zůstane z něj proužek. */
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  overflow: hidden;
  transition: opacity 120ms linear;
}

.prohlizec[open] {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.prohlizec::backdrop {
  background-color: rgb(9 11 13 / 0.97);
}

/* Horní lišta. Pořadí vlevo, křížek vpravo, jak to lidé čekají. */

.prohlizec__horni {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mezera-16);
  padding: max(var(--mezera-16), env(safe-area-inset-top)) var(--mezera-16) var(--mezera-16);
}

.prohlizec__pocet {
  font-family: var(--font-display);
  font-size: var(--text-15);
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 0.75);
}

/* Plocha s fotkou. */

.prohlizec__plocha {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}

/*
  Kurzor slibuje jen to, co se opravdu stane.

  Lupa byla dřív na celé ploše, takže slibovala přiblížení i vedle fotky,
  kde klepnutí naopak zavíralo. Lupa patří na fotku, plocha kolem nese
  kříž na znamení, že klepnutí zavře.
*/
.prohlizec__plocha {
  cursor: zoom-out;
}

.prohlizec__fotka {
  cursor: zoom-in;
}

.prohlizec__plocha--priblizeno .prohlizec__fotka {
  cursor: zoom-out;
}

.prohlizec__fotka {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transform-origin: center;
  transition: opacity 160ms ease-out;
  user-select: none;
  -webkit-user-drag: none;
}

.prohlizec__fotka--nactena {
  opacity: 1;
}

/* Kolečko, které se točí, dokud se fotka nenačte. */

.prohlizec__nacitani {
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid rgb(255 255 255 / 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sdh-toceni 700ms linear infinite;
}

@keyframes sdh-toceni {
  to { transform: rotate(360deg); }
}

/* Popis fotky dole. */

.prohlizec__popis {
  margin: 0;
  padding: var(--mezera-16) var(--mezera-24) max(var(--mezera-16), env(safe-area-inset-bottom));
  font-size: var(--text-15);
  line-height: 1.4;
  text-align: center;
  color: rgb(255 255 255 / 0.85);
}

/*
  Kulatá tlačítka. Plocha nejméně 44 px, aby se do nich dalo trefit prstem.

  Podklad je tmavý, ne světlý. Světlá průhledná výplň zanikla nad světlou
  fotkou a šipky nebylo vidět. Tmavý kroužek s bílým znakem se čte nad
  jasnou oblohou i nad tmavým interiérem.
*/

.prohlizec__zavrit,
.prohlizec__sip {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 50%;
  background-color: rgb(9 11 13 / 0.55);
  color: #fff;
  font-size: var(--text-20);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--prechod) ease-out;
  backdrop-filter: blur(4px);
}

.prohlizec__zavrit:hover,
.prohlizec__sip:hover {
  background-color: rgb(9 11 13 / 0.85);
  border-color: rgb(255 255 255 / 0.6);
}

.prohlizec__zavrit:focus-visible,
.prohlizec__sip:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Šipky po stranách, svisle na střed. */

.prohlizec__sip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.prohlizec__sip--vlevo {
  left: var(--mezera-16);
}

.prohlizec__sip--vpravo {
  right: var(--mezera-16);
}

.prohlizec__sip:disabled {
  opacity: 0.25;
  cursor: default;
}

.prohlizec__sip:disabled:hover {
  background-color: rgb(9 11 13 / 0.55);
  border-color: rgb(255 255 255 / 0.25);
}

/*
  Na dotykovém zařízení se šipky skrývají a listuje se prstem.
  Mířit na tlačítko v jedoucím autobuse je horší než přejet.
*/
@media (pointer: coarse) {
  .prohlizec__sip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prohlizec,
  .prohlizec__fotka,
  .prohlizec__zavrit,
  .prohlizec__sip {
    transition: none;
  }

  .prohlizec__nacitani {
    animation-duration: 2s;
  }
}

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

  .galerie__polozka:hover img,
  .galerie__polozka:focus-visible img {
    transform: none;
  }
}

/* ------------------------------------------------- SOUSEDNÍ AKTUALITY */

.sousedni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--mezera-16);
  margin-top: var(--mezera-64);
  padding-top: var(--mezera-32);
  border-top: 1px solid var(--barva-linka);
}

.sousedni__odkaz {
  display: block;
  padding: var(--mezera-24);
  border: 1px solid var(--barva-linka);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--barva-text);
}

.sousedni__odkaz:hover {
  border-color: var(--barva-cervena);
}

.sousedni__odkaz--vpravo {
  text-align: right;
}

.sousedni__nazev {
  display: block;
  margin-top: var(--mezera-8);
  font-family: var(--font-display);
  font-size: var(--text-17);
  line-height: 1.3;
}

/* ----------------------------------------------------------------- MAPA */

.mapa {
  margin: 0;
}

.mapa__ramec {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--barva-linka);
  border-radius: var(--radius);
  background-color: var(--barva-popel);
}

.mapa__podklad {
  display: block;
  width: 100%;
  height: auto;
}

.mapa__body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mapa__znacka {
  cursor: pointer;
}

.mapa__body a:focus-visible .mapa__znacka circle:nth-child(2) {
  stroke: var(--barva-signalni);
  stroke-width: 4;
}

.mapa__meritko {
  font-family: var(--font-display);
  font-size: 24px;
  fill: var(--barva-antracit);
  paint-order: stroke;
  stroke: var(--barva-bila);
  stroke-width: 5px;
}

.mapa__popisek {
  margin-top: var(--mezera-16);
}

.mapa__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mezera-8) var(--mezera-24);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-13);
}

.mapa__legenda li {
  display: flex;
  align-items: center;
  gap: var(--mezera-8);
}

.mapa__tecka {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid;
  border-radius: 50%;
}

.mapa__zdroj {
  margin-top: var(--mezera-16);
  font-size: var(--text-13);
  color: var(--barva-text-slaby);
}

/* Živá mapa. Vzniká až v prohlížeči, ve statické podobě na stránce není. */

.mapa__zive {
  height: 30rem;
  border: 1px solid var(--barva-linka);
  border-radius: var(--radius);
  background-color: var(--barva-popel);
}

@media (width >= 64rem) {
  .mapa__zive {
    height: 36rem;
  }
}

/* Leaflet si vykresluje vlastní ovládání, sladíme ho s design systémem. */

.mapa__zive .leaflet-container {
  font-family: var(--font-text);
  font-size: var(--text-13);
  background-color: var(--barva-popel);
}

.mapa__zive .leaflet-control-zoom a {
  font-family: var(--font-display);
  color: var(--barva-text);
  border-radius: var(--radius);
}

.mapa__zive .leaflet-popup-content-wrapper {
  border-radius: var(--radius);
}

.mapa__zive .leaflet-popup-content {
  margin: var(--mezera-16);
  font-size: var(--text-15);
}

.mapa__zive .leaflet-container a.leaflet-popup-close-button {
  color: var(--barva-text-slaby);
}

.mapa__popup-navesti {
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--barva-text-slaby);
}

.mapa__popup-obec {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: var(--text-20);
}

/* ----------------------------------------------------------------- GRAF */

.graf {
  margin: 0;
}

.graf__plocha {
  display: block;
  width: 100%;
  height: auto;
}

.graf__hodnota {
  font-family: var(--font-display);
  font-size: 18px;
  fill: var(--barva-text);
}

.graf__popisek {
  font-family: var(--font-text);
  font-size: 17px;
  fill: var(--barva-text-slaby);
}

.graf__tabulka {
  margin-top: var(--mezera-24);
  font-size: var(--text-15);
}

.graf__tabulka summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--barva-text-slaby);
}

.graf__tabulka table {
  margin-top: var(--mezera-16);
  border-collapse: collapse;
  width: 100%;
  max-width: 28rem;
}

.graf__tabulka th,
.graf__tabulka td {
  padding: var(--mezera-8) var(--mezera-16);
  border-bottom: 1px solid var(--barva-linka);
  text-align: left;
}

.graf__tabulka thead th {
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--barva-text-slaby);
}

.graf__tabulka tbody th {
  font-weight: 400;
}

/* Vodorovný rozpad na podíly. */

.rozpad {
  margin: 0;
}

.rozpad__popis {
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--barva-text-slaby);
  margin-bottom: var(--mezera-16);
}

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

/*
 * Popisek, pruh a číslo vedle sebe. Pruh si vezme zbytek místa.
 * Na úzkém displeji se popisek přesune nad pruh, jinak by se zalámal
 * do čtyř řádků a z pruhu by zbyl proužek.
 */
.rozpad__radek {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "nazev cislo"
    "pruh  pruh";
  align-items: center;
  gap: var(--mezera-8) var(--mezera-16);
}

.rozpad__nazev {
  grid-area: nazev;
  font-size: var(--text-15);
}

.rozpad__pruh {
  grid-area: pruh;
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--barva-linka);
  overflow: hidden;
}

.rozpad__vypln {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--barva-cervena);
}

.rozpad__cislo {
  grid-area: cislo;
  font-family: var(--font-display);
  font-size: var(--text-17);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rozpad__procenta {
  font-family: var(--font-text);
  font-size: var(--text-13);
  color: var(--barva-text-slaby);
  margin-left: var(--mezera-8);
}

@media (min-width: 40rem) {
  .rozpad__radek {
    grid-template-columns: minmax(11rem, 14rem) 1fr auto;
    grid-template-areas: "nazev pruh cislo";
  }
}

/* Text jen pro odečítač obrazovky. */

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

/* ------------------------------------------------------------- DOKUMENTY */

.dokumenty {
  margin: var(--mezera-24) 0 0;
  padding: 0;
  list-style: none;
}

.dokumenty li {
  padding-top: var(--mezera-16);
  border-top: 1px solid var(--barva-linka);
}

.dokumenty li + li {
  margin-top: var(--mezera-16);
}

.dokumenty h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-20);
  font-weight: 700;
}

.dokumenty p {
  margin: var(--mezera-8) 0 0;
  font-size: var(--text-15);
  color: var(--barva-text-slaby);
}

/* Dokument, který zatím nemáme. Nadpis není odkaz, tak ať to je vidět. */
.dokumenty--chybejici h2 {
  color: var(--barva-text-slaby);
  font-weight: 400;
}

/* --------------------------------------------------------------- HLEDÁNÍ */

.hledani {
  display: flex;
  gap: var(--mezera-8);
}

.hledani__pole {
  flex: 1;
  min-width: 0;
  padding: var(--mezera-16);
  border: 1px solid var(--barva-linka);
  border-radius: var(--radius);
  background-color: var(--barva-bila);
  color: var(--barva-text);
  font-family: var(--font-text);
  font-size: var(--text-17);
}

.hledani__pole:focus-visible {
  outline: 2px solid var(--barva-cervena);
  outline-offset: 1px;
}

.hledani__tlacitko {
  flex: none;
}

.vysledky {
  margin-top: var(--mezera-32);
}

.vysledek {
  padding-top: var(--mezera-24);
  border-top: 1px solid var(--barva-linka);
}

.vysledek + .vysledek {
  margin-top: var(--mezera-24);
}

.vysledek__nadpis {
  margin: var(--mezera-8) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-24);
  line-height: 1.2;
}

.vysledek__perex {
  margin: var(--mezera-8) 0 0;
  max-width: var(--sirka-text);
  color: var(--barva-text-slaby);
}

/* Doplňkové položky a hledání v mobilním menu. */

.menu-mobil__doplnkove {
  margin-top: var(--mezera-16);
  padding-top: var(--mezera-16);
  border-top: 1px solid var(--barva-linka);
}

.menu-mobil__doplnkove a {
  font-size: var(--text-15);
  color: var(--barva-text-slaby);
}

.menu-mobil__hledani {
  margin-top: var(--mezera-24);
  padding-top: var(--mezera-24);
  border-top: 1px solid var(--barva-linka);
}

/* Hlavička sekce s číslem po straně. */

.sekce__hlavicka--radek {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mezera-24);
}

.sekce__cislo {
  margin: 0;
}

/* Na širokém okně stojí číslo napravo od nadpisu, na mobilu pod ním. */
@media (width >= 48rem) {
  .sekce__cislo {
    text-align: right;
  }
}

.sekce__cislo .cislice {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-44);
  line-height: 1;
  color: var(--barva-cervena);
}

.sekce__cislo span:last-child {
  font-size: var(--text-13);
  color: var(--barva-text-slaby);
}

.sekce--tmava .sekce__cislo span:last-child {
  color: var(--barva-na-tmavem-slaby);
}

/* ====================================================== ÚVODNÍ STRÁNKA */

/*
 * Pás nejbližší akce.
 *
 * Nejčastější důvod návštěvy webu. Musí být na mobilu vidět hned pod hero,
 * bez scrollování. Datum je největší prvek celého pásu.
 *
 * Zdroj: vývěska u zbrojnice, kde je datum vždy nahoře a největší.
 */

.pas-akce {
  background-color: var(--barva-bila);
  border-bottom: 1px solid var(--barva-linka);
}

.pas-akce__obal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mezera-16) var(--mezera-24);
  padding-block: var(--mezera-24);
}

/* Datum jako blok s červenou linkou. Odkaz na razítko v zápise. */
.pas-akce__datum {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 4.5rem;
  padding: var(--mezera-8) var(--mezera-16);
  border-radius: var(--radius);
  background-color: var(--barva-cervena-plocha);
  color: var(--barva-na-tmavem);
  line-height: 1;
}

.pas-akce__den {
  font-family: var(--font-display);
  font-size: var(--text-32);
  letter-spacing: -0.02em;
}

.pas-akce__mesic {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pas-akce__telo {
  flex: 1 1 14rem;
  min-width: 0;
}

.pas-akce__navesti {
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--barva-text-slaby);
}

.pas-akce__nazev {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-24);
  line-height: 1.2;
}

.pas-akce__nazev a {
  color: var(--barva-text);
  text-decoration: none;
}

.pas-akce__nazev a:hover,
.pas-akce__nazev a:focus-visible {
  color: var(--barva-cervena);
}

/* Bez vypsaného termínu je to sdělení, ne nadpis. */
.pas-akce__nazev--prazdny {
  font-family: var(--font-text);
  font-size: var(--text-17);
  color: var(--barva-text-slaby);
  max-width: var(--sirka-text);
}

.pas-akce__podrobnosti {
  margin: var(--mezera-8) 0 0;
  font-size: var(--text-15);
  color: var(--barva-text-slaby);
}

.pas-akce__odkaz {
  flex: none;
  margin: 0;
}

/*
 * Box tísňových čísel.
 *
 * Signální žlutá s antracitovým textem. Žlutá se na webu používá jen tady
 * a ve varováních, nikde jinde, aby si ji člověk spojil s ohrožením.
 * Nikdy pod bílým textem, kontrast by nestačil.
 *
 * Zdroj: nálepka s tísňovými čísly na technice a ve zbrojnici.
 */

.tisnova {
  background-color: var(--barva-signalni);
  color: var(--barva-antracit);
  padding-block: var(--mezera-32);
}

.tisnova__obal {
  display: grid;
  gap: var(--mezera-24);
}

@media (width >= 48rem) {
  .tisnova {
    padding-block: var(--mezera-48);
  }

  .tisnova__obal {
    grid-template-columns: auto 1fr;
    gap: var(--mezera-64);
    align-items: center;
  }

  /* Svislá linka mezi čísly a textem. Zdroj: dělicí linka ve formuláři zápisu. */
  .tisnova__text {
    padding-left: var(--mezera-64);
    border-left: 2px solid rgb(22 25 29 / 0.2);
  }
}

.tisnova__hlava {
  flex: none;
}

.tisnova__navesti {
  font-family: var(--font-display);
  font-size: var(--text-13);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--barva-antracit);
}

.tisnova__cisla {
  display: flex;
  align-items: baseline;
  gap: var(--mezera-16);
  margin: var(--mezera-8) 0 0;
}

.tisnova__cislo {
  font-family: var(--font-display);
  font-size: var(--text-44);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--barva-antracit);
  text-decoration: none;
  border-bottom: 4px solid var(--barva-cervena);
}

.tisnova__cislo:hover,
.tisnova__cislo:focus-visible {
  color: var(--barva-cervena);
}

.tisnova__nebo {
  font-size: var(--text-15);
  color: var(--barva-antracit);
  opacity: 0.7;
}

.tisnova__text {
  max-width: var(--sirka-text);
}

.tisnova__text p {
  margin: 0;
  color: var(--barva-antracit);
}

.tisnova__odkaz {
  margin-top: var(--mezera-16) !important;
}

.tisnova__text a {
  color: var(--barva-antracit);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.tisnova__text a:hover,
.tisnova__text a:focus-visible {
  color: var(--barva-cervena-tmava);
}

/* ------------------------------------------------------- PŘEPÍNAČ VZHLEDU */

/*
  Tlačítko vyrábí až JavaScript, v HTML ze serveru není. Bez skriptu
  by to bylo tlačítko, které nic nedělá.

  Vzhledem odpovídá tlačítku menu vedle sebe, jen je čtvercové, protože
  nese jen znak. Popis stavu je v textu pro odečítač obrazovky.
*/

.motiv {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--barva-linka);
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--barva-text);
  cursor: pointer;
  transition: border-color var(--prechod) ease-out;
}

.motiv:hover {
  border-color: var(--barva-cervena);
}

.motiv__znak {
  font-size: var(--text-17);
  line-height: 1;
}

/* Nad hero fotkou stojí hlavička na tmavém podkladu. */
.hlavicka--pres-hero .motiv {
  border-color: rgb(255 255 255 / 0.5);
  color: var(--barva-na-tmavem);
}

.hlavicka--pres-hero .motiv:hover {
  border-color: var(--barva-na-tmavem);
}

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

/* --------------------------------------------------- NÁSTROJE U AKCE */

.akce__nastroje {
  margin-top: var(--mezera-48);
  padding-top: var(--mezera-24);
  border-top: 1px solid var(--barva-linka);
}

.akce__napoveda {
  margin: var(--mezera-8) 0 0;
  max-width: var(--sirka-text);
  font-size: var(--text-15);
  color: var(--barva-text-slaby);
}

/* Hlavička plakátu. Na obrazovce se nezobrazuje, jen na papíře. */
.plakat-hlavicka,
.plakat-patka {
  display: none;
}

/* ================================================================= TISK */

/*
  Plakát na vývěsku.
  Zdroj: vývěska u zbrojnice, kam sbor plakáty vyvěšuje.

  Sbor plakáty dosud sázel zvlášť ve Wordu. Tohle znamená napsat údaje
  jednou. Vytiskne se stránka akce, ne obrazovka: navigace, tlačítka
  a odkazy zmizí, zůstane termín, název, místo a jedna věta.

  Typografie je záměrně velká. Plakát se čte z metru, ne z klína.
*/

@media print {
  @page {
    size: A4 portrait;
    margin: 18mm 16mm;
  }

  /* Na papíře nemá co dělat nic, co se nedá kliknout ani přečíst. */
  .hlavicka,
  .paticka,
  .reflexni-pruh,
  .menu-mobil,
  .navigace,
  .motiv,
  .drobecky,
  .akce__nastroje,
  .sousedni,
  .hledani,
  .prohlizec,
  .tlacitko {
    display: none !important;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }

  .sekce {
    padding: 0 !important;
  }

  .obal {
    max-width: none;
    padding: 0;
  }

  .plakat-hlavicka {
    display: block;
    margin-bottom: 10mm;
    padding-bottom: 4mm;
    border-bottom: 3pt solid #000;
    text-align: center;
  }

  .plakat-hlavicka__sbor {
    display: block;
    font-family: var(--font-display);
    font-size: 20pt;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .plakat-hlavicka__zve {
    display: block;
    margin-top: 2mm;
    font-size: 12pt;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  /* Návěstí typu akce na papíře nic neříká. */
  .navesti {
    display: none;
  }

  .sekce__nadpis {
    font-size: 40pt;
    line-height: 1.05;
    text-align: center;
    text-wrap: balance;
  }

  /* Termín je na plakátu to hlavní. */
  .akce__termin {
    display: block;
    margin: 8mm 0;
    font-size: 26pt;
    text-align: center;
    color: #000;
  }

  .akce__hodina {
    padding-left: 4mm;
    border-left: 1pt solid #000;
    color: #000;
  }

  .obsah,
  .obsah p {
    max-width: none;
    font-size: 13pt;
    text-align: center;
    color: #000;
  }

  .plakat-patka {
    display: block;
    margin-top: 12mm;
    padding-top: 4mm;
    border-top: 1pt solid #000;
    font-family: var(--font-display);
    font-size: 13pt;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    color: #000;
  }

  .zapis {
    max-width: none;
    margin: 10mm auto 0;
    max-inline-size: 120mm;
  }

  .zapis > div {
    border-top: 0.5pt solid #000;
  }

  .zapis dt,
  .zapis dd {
    color: #000;
  }

  /* Fotka akce se tiskne přes celou šířku, ale nesmí vytlačit text. */
  figure img {
    max-height: 90mm;
    object-fit: cover;
  }

  /* Adresa odkazu v textu, ať plakát nese, kde se dozvědět víc. */
  .obsah a::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
  }

  .upozorneni {
    border: 1pt solid #000;
    background: none;
    color: #000;
  }
}

/* Odebíraný kalendář na výpisu akcí. */

.akce__odber {
  margin-top: var(--mezera-16);
  max-width: var(--sirka-text);
}

.akce__odber span {
  display: block;
  margin-top: 2px;
  font-size: var(--text-15);
  color: var(--barva-text-slaby);
}

/*
  Obsah stránky s výpisem.

  Odstavce a nadpisy si drží šířku textu, ale mřížky, mapa a graf
  se roztáhnou přes celý obal. Bez toho by se karty mačkaly do sloupce
  širokého 68 znaků.
*/

.obsah--siroky > p,
.obsah--siroky > h2,
.obsah--siroky > h3,
.obsah--siroky > ul,
.obsah--siroky > ol {
  max-width: var(--sirka-text);
}

.obsah--siroky > h2 {
  margin-top: var(--mezera-64);
  font-family: var(--font-display);
  font-size: var(--text-32);
  letter-spacing: -0.02em;
}

.obsah--siroky .mrizka,
.obsah--siroky .mapa,
.obsah--siroky .graf,
.obsah--siroky .vyjezdy,
.obsah--siroky .roky {
  max-width: none;
}

/* ============================================== MOBIL NA PRVNÍM MÍSTĚ

  Šablona byla od začátku psaná od mobilu vzhůru, všechny dotazy na šířku
  jsou `width >=`. Měření ale ukázalo, že „psáno od mobilu" a „funguje na
  mobilu" nejsou totéž. Na šířce 320 px, což je iPhone SE a starší
  Androidy, přetékala každá stránka o 16 px a na dotyk bylo moc malých
  cílů: na stránce výjezdů čtyřiačtyřicet.

  Rozměr dotykového cíle je 2.75rem, tedy 44 px. Není to zvyk, ale
  rozhodnutí podle publika: významná část návštěvníků je nad 60 let
  a trefit se do půlcentimetrového odkazu na tramvaji nikdo nechce.
*/

/* Nic nesmí přetéct na šířku. Vodorovné rolování na mobilu znamená, že
   se text u okraje nedá přečíst a stránka „ujíždí" pod prstem. */
html,
body {
  overflow-x: clip;
}

/* --- Hlavička se musí vejít do 320 px ---------------------------------

  Značka, přepínač motivu a tlačítko menu se do 320 px nevešly a hlavička
  vytlačila stránku o 16 px. Mezera 24 px mezi třemi prvky je na malém
  displeji luxus, na který není místo.
*/
.hlavicka__obal {
  gap: var(--mezera-16);
}

@media (width >= 48rem) {
  .hlavicka__obal {
    gap: var(--mezera-24);
  }
}

/* Značka smí zmenšit sebe, ne sousedy. Bez min-width flexbox text
   nezalomí ani nezkrátí a místo toho roztlačí celý řádek. */
.znacka {
  min-width: 0;
}

.znacka__nazev {
  min-width: 0;
}

/*
  Název obce se nikdy nesmí zalomit. Povolené lámání kdekoli z něj
  na úzkém displeji udělalo „VEP ŘOV Á" na tři řádky. Radši ať se
  zmenší písmo, než aby se rozpadl název sboru.
*/
.znacka__hlavni,
.znacka__podnadpis {
  white-space: nowrap;
}

/*
  Nejužší displeje, tedy do 384 px včetně rozšířených Androidů se 360 px.
  Vejít se tam musí znak, název obce,
  přepínač motivu i tlačítko menu. Zmenšuje se všechno o kousek, aby
  nemusel zmizet žádný z nich: slovo MENU si člověk nad 60 najde líp
  než tři čárky.
*/
@media (width < 24rem) {
  .hlavicka__obal {
    gap: var(--mezera-8);
  }

  .znacka {
    gap: var(--mezera-8);
  }

  .znacka__logo,
  .znacka__symbol {
    width: 2.25rem;
    height: 2.25rem;
  }

  .znacka__hlavni {
    font-size: var(--text-17);
  }

  .znacka__podnadpis {
    font-size: 0.6875rem;
  }

  .menu-mobil > summary {
    padding-inline: var(--mezera-8);
  }
}

/* --- Dotykové cíle ---------------------------------------------------- */

/* Přepínač motivu se na úzkém displeji smrskl na 24 px. Ovládací prvek
   se nesmí zmenšovat, ať je místa kolik chce. */
.motiv {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
}

.menu-mobil > summary {
  min-height: 2.75rem;
}

/* Panel menu byl širší než displej: měl min-width 15rem, ale nic mu
   nebránilo roztáhnout se podle nejdelší položky na 391 px. Na displeji
   širokém 320 px pak část nabídky ležela mimo obrazovku. */
.menu-mobil__panel {
  max-width: min(22rem, calc(100vw - var(--mezera-32)));
}

/* Odkaz na výjezd byl vysoký 26 px. Je to hlavní odkaz na celé stránce
   výjezdů, takže se do něj musí dát trefit. */
.vyjezd__obec a {
  display: inline-block;
  padding-block: var(--mezera-8);
}

/* Přepínač let, rozbalení tabulky u grafu a přeskočení na obsah. */
.roky__odkaz,
.graf__tabulka summary,
.preskocit {
  min-height: 2.75rem;
}

.roky__odkaz {
  align-items: center;
}

.graf__tabulka summary {
  display: flex;
  align-items: center;
}

.preskocit {
  display: inline-flex;
  align-items: center;
}

/* Ovládání přiblížení mapy dělá knihovna Leaflet a její tlačítka mají
   30 px. Na dotyk je to málo, na myš to nevadí. */
.mapa__zive .leaflet-control-zoom a {
  width: 2.25rem;
  height: 2.25rem;
  line-height: 2.25rem;
}

@media (pointer: coarse) {
  .mapa__zive .leaflet-control-zoom a {
    width: 2.75rem;
    height: 2.75rem;
    line-height: 2.75rem;
  }
}

/* --- Karta je jeden dotykový cíl -------------------------------------

  Název alba byl vysoký 22 px a obrázek nad ním byl samostatný odkaz.
  Obojí vede na tutéž stránku, takže z karty může být jeden velký cíl:
  odkaz v nadpisu se roztáhne přes celou kartu.

  Text v kartě zůstává vybratelný, protože roztažená je jen neviditelná
  vrstva odkazu, ne samotný nadpis.
*/
.karta {
  position: relative;
}

.karta__nadpis a::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Pod obsahem karty, aby šel text pořád označit myší. */
  z-index: 1;
}

/* --- Rozcestník v patičce --------------------------------------------

  Odkazy v patičce stály v seznamu pod sebou a byly vysoké 19 px,
  s osmipixelovou mezerou mezi nimi. Na mobilu se do nich trefí jen
  ten, kdo míří přesně.

  Odkaz se roztáhne na celou šířku sloupce, takže cíl je celý řádek,
  ne jen text. Odkazy uvnitř věty se takhle nezvětšují, tam by to
  rozbilo sazbu, a norma je z požadavku na velikost cíle vyjímá.
*/
.paticka__rozcestnik a {
  display: block;
  min-height: 2.75rem;
  padding-block: var(--mezera-8);
}

.paticka__rozcestnik li + li {
  margin-top: 0;
}

/* --- Samostatná výzva k akci -----------------------------------------

  Odkaz, který stojí sám na řádku pod textem, není odkaz uvnitř věty.
  Je to tlačítko bez rámečku a musí se do něj dát trefit prstem.

  Odkazy uvnitř věty se nezvětšují. Rozházelo by to řádkování a norma
  je z požadavku na velikost cíle vyjímá právě proto, že jejich rozměr
  určuje text okolo.
*/
.sekce__odkaz {
  margin-top: var(--mezera-24);
}

.sekce__odkaz a,
.tisnova__odkaz a,
.pas-akce__odkaz a,
.sousedni__odkaz a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* Kontakt v patičce. E-mail a web obce jsou pro návštěvníka akce,
   ne údaj na přečtení. */
.paticka__zapis dd a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* --- Navigace na velkém displeji --------------------------------------

  Položky navigace jsou vysoké 20 px. Zvětšit je nejde přímo: spodní
  linka pod odkazem označuje aktivní stránku a s vyšším odkazem by se
  odlepila od textu.

  Plocha pro klepnutí se proto roztáhne neviditelnou vrstvou. Linka
  zůstane u textu, cíl je přesto vysoký 44 px.
*/
.navigace a {
  position: relative;
}

.navigace a::after {
  content: '';
  position: absolute;
  /*
    Rozšíření nad i pod text. Nestačí spočítat 44 minus výška textu:
    směrem dolů plochu o pár pixelů ukusuje okraj hlavičky, takže se
    rozšíření volí s rezervou a výsledek se měří.
  */
  inset: -1rem 0;
}

/* --- Zbylé dotykové cíle ---------------------------------------------

  Doměřeno po první opravě. Čísla z měření, ne odhad.
*/

/* Značka v hlavičce je odkaz na úvodní stránku a měla 36 px. */
.znacka {
  min-height: 2.75rem;
}

/* Kontakt vypsaný v obsahu stránky, ne v patičce. E-mail je akce. */
.zapis dd a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/*
  Odkaz, který je v položce seznamu sám, je rozcestník, ne odkaz uvnitř
  věty. Podmínka only-child je tu právě proto: položka, ve které je
  odkaz uprostřed textu, se nezvětší a sazba zůstane v pořádku.
*/
.obsah li > a:only-child,
.text-blok li > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/*
  Ovládání přiblížení mapy. Leaflet si velikost nastavuje sám selektorem
  .leaflet-touch .leaflet-bar a a jeho styl se načítá po našem, takže
  při stejné síle vyhrál on.

  Třída leaflet-touch přitom sedí na tomtéž prvku jako mapa__zive, ne
  uvnitř něj. Zápis s mezerou hledal potomka a nenašel nic; musí se
  psát bez mezery.
*/
.mapa__zive.leaflet-touch .leaflet-bar a,
.mapa__zive .leaflet-bar a {
  width: 2.25rem;
  height: 2.25rem;
  line-height: 2.25rem;
}

@media (pointer: coarse) {
  .mapa__zive.leaflet-touch .leaflet-bar a,
  .mapa__zive .leaflet-bar a {
    width: 2.75rem;
    height: 2.75rem;
    line-height: 2.75rem;
  }
}

/* --- Menu na úvodní stránce nebylo vidět -----------------------------

  Na úvodní stránce leží hlavička přes fotku a nese třídu na-tmavem,
  která barví odkazy na bílo. Rozbalené menu je ale bílý panel, takže
  položky byly bílé na bílém. Nešly přečíst vůbec, ne jen špatně.

  Panel je vlastní světlá plocha bez ohledu na to, nad čím leží, a musí
  si barvy určit sám. Zápis přes .na-tmavem je tu proto, aby přebil
  pravidlo hlavičky, ne kvůli vzhledu.
*/
.menu-mobil__panel a,
.na-tmavem .menu-mobil__panel a {
  color: var(--barva-text);
}

.menu-mobil__panel a:hover,
.menu-mobil__panel a:focus-visible,
.na-tmavem .menu-mobil__panel a:hover,
.na-tmavem .menu-mobil__panel a:focus-visible {
  color: var(--barva-cervena);
}

.menu-mobil__doplnkove a,
.na-tmavem .menu-mobil__doplnkove a {
  color: var(--barva-text-slaby);
}

.menu-mobil__doplnkove a:hover,
.menu-mobil__doplnkove a:focus-visible,
.na-tmavem .menu-mobil__doplnkove a:hover,
.na-tmavem .menu-mobil__doplnkove a:focus-visible {
  color: var(--barva-cervena);
}

/* Obrys při procházení klávesnicí. Panel je světlý i nad fotkou. */
.na-tmavem .menu-mobil__panel :focus-visible {
  outline-color: var(--barva-cervena);
}

/* ==================================================== PŘIHLÁŠKA DO SBORU */

.prihlaska {
  max-width: 34rem;
}

.prihlaska__nadpis {
  font-family: var(--font-display);
  font-size: var(--text-32);
  margin: 0;
}

.prihlaska__text {
  margin-top: var(--mezera-8);
  color: var(--barva-text-slaby);
}

.prihlaska__formular {
  display: grid;
  gap: var(--mezera-24);
  margin-top: var(--mezera-32);
}

.prihlaska__pole {
  display: grid;
  gap: var(--mezera-8);
  margin: 0;
}

.prihlaska__pole label {
  font-family: var(--font-display);
  font-size: var(--text-15);
}

.prihlaska__nepovinne {
  font-family: var(--font-text);
  font-size: var(--text-13);
  font-weight: 400;
  color: var(--barva-text-slaby);
}

/*
  Pole je vysoké 2.75rem jako každý dotykový cíl. Velikost písma 17 px
  není kvůli vzhledu: prohlížeč na telefonu při menším písmu stránku
  po klepnutí do pole přiblíží a rozhodí rozvržení.
*/
.prihlaska__pole input,
.prihlaska__pole select,
.prihlaska__pole textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--mezera-8) var(--mezera-16);
  border: 1px solid var(--barva-linka);
  border-radius: var(--radius);
  background-color: var(--barva-bila);
  color: var(--barva-text);
  font-family: var(--font-text);
  font-size: var(--text-17);
}

.prihlaska__pole textarea {
  line-height: 1.6;
  resize: vertical;
}

.prihlaska__pole input:focus-visible,
.prihlaska__pole select:focus-visible,
.prihlaska__pole textarea:focus-visible {
  border-color: var(--barva-cervena);
}

.prihlaska__souhlas {
  margin: 0;
}

.prihlaska__souhlas label {
  display: flex;
  align-items: flex-start;
  gap: var(--mezera-8);
  font-size: var(--text-15);
}

.prihlaska__souhlas input {
  /* Zaškrtávátko má výchozích 13 px, na dotyk je to málo. */
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 2px;
  flex: none;
}

.prihlaska__poznamka {
  margin: 0;
  font-size: var(--text-13);
  color: var(--barva-text-slaby);
}

/*
  Past na roboty. Nesmí být display:none, to část robotů pozná
  a pole přeskočí. Odsune se proto mimo obrazovku.
*/
.prihlaska__past {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.prihlaska__hlaska {
  margin-top: var(--mezera-24);
  padding: var(--mezera-16);
  border-left: 4px solid var(--barva-cervena);
  border-radius: var(--radius);
  background-color: var(--barva-popel);
}

.prihlaska__hlaska--ok {
  border-left-color: #1f7a3d;
}

/* ================================================== JEMNÁ INTERAKTIVITA

  Design systém povoluje z pohybu dvě věci: jemné odkrytí karet při
  scrollu a přechod barvy u odkazů, 150 až 200 ms. Nic dalšího.

  Omezení není opatrnost, ale rozhodnutí podle publika: významná část
  návštěvníků je nad 60 let a většina chodí z mobilu. Poskakující
  stránka se hůř čte a působí pomaleji, než je.
*/

/* --- Karta reaguje na najetí ------------------------------------------

  Celá karta je jeden odkaz, takže musí být poznat, že se na ni dá
  klepnout. Mění se barva rámečku, ne poloha: karta, která uskočí,
  se hůř trefuje, a na dotykovém displeji se hover stejně neprojeví.
*/
.karta {
  transition: border-color var(--prechod) ease-out;
}

.karta:hover,
.karta:focus-within {
  border-color: var(--barva-cervena);
}

/* --- Řádek výjezdu ---------------------------------------------------- */

.vyjezd {
  transition: background-color var(--prechod) ease-out;
}

.vyjezd:hover,
.vyjezd:focus-within {
  background-color: var(--barva-popel);
}

/* --- Odkrytí při rolování ---------------------------------------------

  Třídu přidává skript, ne šablona. Kdyby to bylo naopak a skript se
  nenačetl, zůstal by z webu prázdný list.
*/
.odkryti {
  opacity: 0;
  /* Osm pixelů. Víc už není odkrytí, ale naskočení. */
  transform: translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.odkryti--videt {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .karta,
  .vyjezd,
  .odkryti {
    transition: none;
  }

  .odkryti {
    opacity: 1;
    transform: none;
  }
}