/* Kroužky – styly. Mobile first, tmavý režim přes prefers-color-scheme.
   Barvy a písmo podle identity Čenda S. (varianta C, viz značka/vyber/VYBER.md). */

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("../fonts/nunito-sans-latin-ext-wght-normal.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: "Nunito Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("../fonts/nunito-sans-latin-wght-normal.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;
}

:root {
  color-scheme: light dark;

  /* Paleta značky */
  --znacka-tmava: #2f4a3f;
  --znacka-tepla: #b98a6a;
  --znacka-salvej: #8a9b8e;
  --znacka-svetla: #e8dcc8;

  --pozadi: #f6f5f0;
  --povrch: #ffffff;
  --text: #2f4a3f;
  --text-tlumeny: #55665d;
  --okraj: #e8dcc8;
  --okraj-pole: #6f8075;
  --akcent: #2f4a3f;
  --akcent-text: #ffffff;
  --akcent-jemny: #efe7da;
  --zvyrazneni: #b98a6a;
  --focus: #9a6a48;

  --probiha-pozadi: #dcebdf;
  --probiha-text: #1f4a30;
  --brzy-pozadi: #f4e3d3;
  --brzy-text: #6b3f1f;
  --prubezne-pozadi: #dfe7ef;
  --prubezne-text: #2c4560;
  --sedy-pozadi: #eceae3;
  --sedy-text: #4a5550;
  --varovani-text: #8a4a1c;

  --paticka-pozadi: #2f4a3f;
  --paticka-text: #e8dcc8;

  --polomer: 12px;
  --polomer-maly: 8px;
  --stin: 0 1px 2px rgb(47 74 63 / 6%);
  --mezera: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pozadi: #1f2e28;
    --povrch: #2a3d35;
    --text: #ede6da;
    --text-tlumeny: #b9c2bb;
    --okraj: #3e5a4e;
    --okraj-pole: #8a9b8e;
    --akcent: #e8dcc8;
    --akcent-text: #1f2e28;
    --akcent-jemny: #34493f;
    --zvyrazneni: #d2a888;
    --focus: #d2a888;

    --probiha-pozadi: #1e4430;
    --probiha-text: #cde8d3;
    --brzy-pozadi: #4a3020;
    --brzy-text: #f4d6bc;
    --prubezne-pozadi: #22364a;
    --prubezne-text: #cfddec;
    --sedy-pozadi: #34433c;
    --sedy-text: #d0d6d2;
    --varovani-text: #f0be94;

    --paticka-pozadi: #18241f;
    --paticka-text: #e8dcc8;

    --stin: none;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--pozadi);
}

h1, h2, h3, h4, p, ul, dl, dd {
  margin: 0;
}

a {
  color: var(--akcent);
  text-underline-offset: 0.15em;
}

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

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

.preskocit {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  padding: 0.5rem 0.75rem;
  background: var(--povrch);
  border-radius: var(--polomer);
  z-index: 10;
}

.preskocit:focus {
  top: 0.5rem;
}

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

/* Hlavička */

.hlavicka {
  background: var(--povrch);
  border-bottom: 1px solid var(--okraj);
}

.hlavicka__obsah {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 1rem;
}

.hlavicka__znacka {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hlavicka__logo-odkaz {
  display: block;
  flex: none;
  border-radius: 0.5rem;
}

.hlavicka__logo {
  display: block;
  flex: none;
  width: 2.5rem;
  height: auto;
}

.hlavicka__nazev {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.hlavicka__nazev a {
  color: inherit;
  text-decoration: none;
}

.hlavicka__podtitul {
  color: var(--text-tlumeny);
}

.hlavicka__statistiky {
  /* Místo je rezervované předem, aby hlavička po načtení dat neposkočila. */
  min-height: 1.5em;
  font-size: 0.9rem;
  color: var(--text-tlumeny);
}

.hlavicka__statistiky strong {
  color: var(--text);
  font-weight: 800;
}

.hlavicka nav a {
  font-weight: 600;
}

/* Rozvržení */

.rozvrzeni {
  display: grid;
  gap: var(--mezera);
  padding-block: var(--mezera) 2rem;
  /* Patička zůstane pod okrajem obrazovky i během načítání, takže po vykreslení karet neposkočí. */
  min-height: 100vh;
  align-content: start;
}

/* Filtry */

.filtry__panel {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem 1rem 1rem;
  background: var(--povrch);
  border: 1px solid var(--okraj);
  border-radius: var(--polomer);
  box-shadow: var(--stin);
}

/* Na mobilu je nadpis jen pro čtečky; hledání je vždy vidět a ostatní filtry jsou sbalené pod ním. */
.filtry__nadpis {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  font-size: 1.1rem;
}

.filtry__souhrn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--akcent);
  list-style: none;
}

/* „Rozbalit vše“ (karty v seznamu) je na mobilu na stejném řádku jako „Další filtry“, vpravo. */
.filtry__radek {
  position: relative;
}

.filtry__rozbalit {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.filtry__rozbalit input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--akcent);
}

.filtry__souhrn::-webkit-details-marker {
  display: none;
}

.filtry__souhrn::before {
  content: "▸";
  transition: transform 0.15s;
}

.filtry__dalsi[open] > .filtry__souhrn::before {
  transform: rotate(90deg);
}

/* Počet aktivních filtrů ve sbalené části, např. „Další filtry (2)“. */
.filtry__pocet:not(:empty) {
  padding: 0.05rem 0.5rem;
  font-size: 0.8rem;
  color: var(--akcent-text);
  background: var(--akcent);
  border-radius: 999px;
}

.filtry__formular {
  display: grid;
  gap: 1rem;
  padding-top: 0.5rem;
}

/* Bez aktivních filtrů není na mobilu co rušit. */
.filtry__panel--prazdne > [type="reset"] {
  display: none;
}

/* Rychlé zrušení filtrů na mobilu hned za počtem aktivních filtrů; šířku souhrnu nastavuje app.js. */
.filtry__zrusit {
  position: absolute;
  top: 0;
  left: calc(var(--sirka-souhrnu, 7.5rem) + 0.25rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--akcent);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.filtry__zrusit:hover {
  background: var(--akcent-jemny);
}

.filtry__zrusit[hidden] {
  display: none;
}

.pole {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pole > label,
.pole > legend {
  font-weight: 600;
  padding: 0;
}

.pole > legend {
  margin-bottom: 0.35rem;
}

.pole__poznamka {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-tlumeny);
}

input[type="search"],
input[type="number"],
select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--povrch);
  border: 1px solid var(--okraj-pole);
  border-radius: var(--polomer-maly);
}

.chipy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  position: relative;
  display: inline-flex;
}

.chipy[hidden],
.chip[hidden] {
  display: none;
}

/* Podkategorie vybraných skupin: menší a odsazené, aby bylo vidět, že skupinu upřesňují. */
.podkategorie[hidden] {
  display: none;
}

/* Každá skupina má vlastní podbarvený rámeček s nadpisem, aby se řádky více skupin neslévaly. */
.chipy--pod {
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0.5rem 0.6rem 0.6rem;
  background: var(--akcent-jemny);
  background: color-mix(in srgb, var(--akcent-jemny) 30%, var(--povrch));
  border-left: 3px solid var(--zvyrazneni);
  border-radius: 0 var(--polomer-maly) var(--polomer-maly) 0;
}

.chipy__nadpis {
  flex-basis: 100%;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
}

.chipy__nadpis::before {
  content: "↳ ";
  color: var(--zvyrazneni);
}

.chipy--pod .chip span {
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
}

.chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.chip span {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--okraj-pole);
  border-radius: 999px;
  font-size: 0.9rem;
  background: var(--povrch);
}

.chip input:checked + span {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--akcent-text);
}

.chip input:checked + span::before {
  content: "✓ ";
}

.chip input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Tlačítka */

.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--akcent-text);
  background: var(--akcent);
  border: 1px solid var(--akcent);
  border-radius: var(--polomer-maly);
  cursor: pointer;
}

.tlacitko--vedlejsi {
  color: var(--akcent);
  background: transparent;
}

/* Výsledky */

.vysledky:focus {
  outline: none;
}

.vysledky__pocet {
  font-weight: 600;
  margin-bottom: 0.75rem;
  min-height: 1.5em;
}

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

.karty > li {
  display: flex;
  min-width: 0;
}

.karta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem;
  background: var(--povrch);
  border: 1px solid var(--okraj);
  border-radius: var(--polomer);
  box-shadow: var(--stin);
  overflow-wrap: anywhere;
}

.karta__nazev {
  font-size: 1.15rem;
  line-height: 1.3;
}

.karta__organizace {
  color: var(--text-tlumeny);
  font-size: 0.95rem;
}

.karta__popis {
  font-size: 0.95rem;
}

.stav {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--sedy-pozadi);
  color: var(--sedy-text);
}

.stav--probiha { background: var(--probiha-pozadi); color: var(--probiha-text); }
.stav--brzy { background: var(--brzy-pozadi); color: var(--brzy-text); }
.stav--prubezne { background: var(--prubezne-pozadi); color: var(--prubezne-text); }
.stav--ukonceno { text-decoration: line-through; }

.karta--ukonceno .karta__nazev,
.karta--ukonceno .karta__organizace {
  opacity: 0.8;
}

.stitky {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  list-style: none;
}

.stitek {
  padding: 0.1rem 0.5rem;
  font-size: 0.8rem;
  background: var(--akcent-jemny);
  border-radius: 6px;
}

.udaje {
  display: grid;
  gap: 0.35rem;
  font-size: 0.95rem;
}

.udaje__radek {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.5rem;
}

/* Rozvrh v údaji „Kdy“: dny pod sebou, tučně, časy zarovnané do sloupce. */
.rozvrh {
  display: grid;
  gap: 0.4rem;
}

.rozvrh p {
  margin: 0;
}

.rozvrh__dny {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rozvrh__den {
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  gap: 0.5rem;
}

.rozvrh__skupina > p {
  font-weight: 600;
}

.rozvrh__skupina > .rozvrh__dny {
  padding-left: 0.75rem;
  border-left: 2px solid var(--okraj);
}

/* Pololetí: stejné odsazení jako dny, ale menší a tlumenější. */
.rozvrh__obdobi {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0 0 0 0.75rem;
  list-style: none;
  font-size: 0.875rem;
  color: var(--text-tlumeny);
  border-left: 2px solid var(--okraj);
}

.rozvrh__obdobi strong {
  color: var(--text);
  font-weight: 600;
}

.rozvrh__misto,
.rozvrh__doplnek {
  color: var(--text-tlumeny);
}

.rozvrh__doplnek {
  font-size: 0.875rem;
}

.udaje dt {
  color: var(--text-tlumeny);
}

.prihlaska {
  display: grid;
  gap: 0.4rem;
  padding: 0.75rem;
  background: var(--pozadi);
  border-radius: 8px;
  font-size: 0.95rem;
}

.prihlaska__nadpis {
  font-size: 1rem;
}

.prihlaska__poznamka {
  color: var(--text-tlumeny);
}

.prihlaska .tlacitko {
  justify-self: start;
  margin-top: 0.25rem;
}

.karta__paticka {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--okraj);
  font-size: 0.85rem;
  color: var(--text-tlumeny);
}

/* Sbalená karta v seznamu: na mobilu jen souhrn, podrobnosti po rozbalení. */
.kdy__souhrn {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Sbalená karta ukáže zkrácené „Kdy“, rozbalená na stejném místě celý rozvrh. */
.karta--rozbalena .kdy__souhrn,
.karta:not(.karta--rozbalena) .kdy__cely {
  display: none;
}

.karta__vice {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Přepínač podrobností vypadá jako vedlejší tlačítko přes celou šířku karty. */
.karta__vice-souhrn {
  display: flex;
  gap: 0.5rem;
  list-style: none;
}

.karta__vice-souhrn::-webkit-details-marker {
  display: none;
}

.karta__vice-souhrn::before {
  content: "▾";
  transition: transform 0.15s;
}

.karta__vice[open] > .karta__vice-souhrn::before {
  transform: rotate(180deg);
}

.karta__vice[open] .karta__vice-zavrene,
.karta__vice:not([open]) .karta__vice-otevrene {
  display: none;
}

.karta__vice-obsah {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.75rem;
  padding-top: 1rem;
}

.zastarale {
  color: var(--varovani-text);
  font-weight: 600;
}

.stav-stranky {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  background: var(--povrch);
  border: 1px dashed var(--okraj);
  border-radius: var(--polomer);
}

/* Patička */

.paticka {
  padding-block: 1.5rem 2rem;
  background: var(--paticka-pozadi);
  color: var(--paticka-text);
  font-size: 0.95rem;
}

.paticka a {
  color: inherit;
}

.paticka :focus-visible {
  outline-color: var(--paticka-text);
}

/* „Projekt Čenda S.“ – označení autora podle pravidel značky. */
.paticka__znacka {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.paticka__znacka img {
  width: 1.5rem;
  height: auto;
}

.paticka .obal {
  display: grid;
  gap: 0.5rem;
}

.paticka__odkazy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

/* Textové stránky */

.text-stranka {
  max-width: 46rem;
  padding-block: 1.5rem 2.5rem;
}

.text-stranka h2 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.text-stranka p,
.text-stranka ul {
  margin-bottom: 0.75rem;
}

/* Desktop */

@media (min-width: 900px) {
  .rozvrzeni {
    grid-template-columns: 280px 1fr;
    align-items: start;
    gap: 1.5rem;
  }

  .filtry {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }

  .filtry__panel {
    gap: 1rem;
    padding: 0.75rem 1rem 1rem;
  }

  .filtry__nadpis {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }

  /* Na desktopu jsou filtry i karty vždy rozbalené, přepínače „Další filtry“ a „Rozbalit vše“ nejsou potřeba. */
  .filtry__souhrn,
  .filtry__rozbalit,
  .filtry__zrusit {
    display: none;
  }

  .filtry__formular {
    padding-top: 0;
  }

  .filtry__panel--prazdne > [type="reset"] {
    display: inline-flex;
  }

  .karty {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  /* Na desktopu jsou podrobnosti karet vždy rozbalené. */
  .karta__vice-souhrn {
    display: none;
  }

  .karta__vice-obsah {
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Detail jedné aktivity (#/aktivita/{id}) */

.rozvrzeni--detail .filtry {
  display: none;
}

.detail {
  display: grid;
  gap: var(--mezera);
  max-width: 42rem;
}

.detail__zpet {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
}

.karta__nazev a {
  color: inherit;
  text-decoration: none;
}

.karta__nazev a:hover {
  text-decoration: underline;
}

.sdilet {
  min-height: 2.75rem;
  margin-left: auto;
  padding: 0 0.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--akcent);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

@media (min-width: 900px) {
  .rozvrzeni--detail {
    grid-template-columns: 1fr;
  }
}

.rozvrzeni--detail .vysledky__pocet {
  display: none;
}