/* =========================================================
   Sai Mai — souhlas s cookies

   Tři kusy, které spolu drží:

     .cc     lišta, která se ukáže při první návštěvě
     .ccm    okno s podrobným nastavením (druhá vrstva souhlasu)
     .ccbl   záslepka místo obsahu, který se bez souhlasu nenačte
             (mapa Google na kontaktu)

   a k tomu .cdoc — sazba stránky „Zásady používání cookies".

   Stylopis je schválně samostatný, ne v branch.css: lištu potřebuje
   i rozcestník, který branch.css nenačítá. Pořadí zůstává
   base.css → cookies.css → branch.css → stylopis stránky; cookies.css
   nesahá na nic cizího, takže na místě v řadě nezáleží.

   Barvy, mezery i písma jsou tokeny z base.css — lišta musí vypadat
   jako kus webu, ne jako cizí plugin nalepený přes patičku.
   ========================================================= */

/* =========================================================
   Lišta — první vrstva souhlasu

   Kompaktní kartička v pravém dolním rohu, ne pruh přes celou šířku.
   Přes celou šířku to původně bylo a bylo to rušivé: pás nad patičkou
   ukrojil třetinu první obrazovky a překryl přesně to, kvůli čemu na
   web člověk přišel. Souhlas se má nabídnout, ne postavit do cesty.

   Vpravo, ne vlevo: obsah na tomhle webu je zarovnaný doleva — hero
   nadpis, text v sekcích i tlačítka — takže levý roh je právě ten,
   kde něco stojí. Vpravo dole bývá fotka.

   Obal je průchozí pro myš (pointer-events: none) — klikací je jen
   karta uvnitř. Bez toho by neviditelná vrstva polykala kliknutí
   na odkazy pod ní.

   Není to cookie wall: stránka pod kartou zůstává čitelná i ovladatelná
   a karta nemá past na Tab. Zákon nedovolí obsah podmínit souhlasem,
   takže smí překážet, ne blokovat.
   ========================================================= */
.cc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  justify-content: flex-end;
  padding: var(--s3);
  pointer-events: none;
}

.cc__card {
  pointer-events: auto;
  width: 100%;
  /* 400 px je šířka, ve které se text láme na pohodlných ~45 znaků
     a dvojice tlačítek se ještě vejde vedle sebe. */
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--radius);
  background: var(--surface);
  /* Zlatý vlas místo rámečku — táž linka, jakou mají karty na webu. */
  box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(197, 160, 89, .35);
}

/* Nájezd zespoda. Lišta nikdy nepřiletí dřív, než je co číst — třídu
   is-in nasazuje skript až po vložení do stránky, takže se přechod
   spustí z klidového stavu a ne uprostřed prvního vykreslení. */
.cc {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.cc.is-in { opacity: 1; transform: none; }
/* Autorské display: flex výš přebíjí UA pravidlo pro [hidden] — bez
   tohohle řádku by atribut hidden lištu neschoval. */
.cc[hidden] { display: none; }

.cc__text { display: flex; flex-direction: column; gap: var(--s1); }


.cc__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: var(--lh3);
  color: var(--ink);
}

.cc__p {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: var(--lh2);
  color: var(--body);
}

.cc__p a,
.cc__note a {
  color: var(--brown);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cc__p a:hover,
.cc__note a:hover { color: var(--gold); }

.cc__note {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh2);
  color: var(--muted);
}

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

   „Přijmout vše" a „Odmítnout vše" mají stejný tvar, stejnou velikost
   i stejné místo v pořadí — jinak by odmítnutí bylo těžší než přijetí
   a souhlas by nebyl svobodný. Liší se jen výplní, protože tlačítko
   značky je zlaté a dvě zlatá vedle sebe by si konkurovala.

   „Nastavit podrobně" je třetí rovnocenná volba, ne schovaný odkaz.
   --------------------------------------------------------- */
.cc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
}

/* Ano a ne si dělí řádek přesně na půl (flex: 1 1 0, ne na obsah), takže
   ani delší slovo jedno z nich nezvětší. Rovnocennost dvojice musí být
   vidět na první pohled — jinak souhlas není svobodný. */
.cc__actions .btn { flex: 1 1 0; min-width: 0; }

.cc .btn {
  min-height: 48px;
  padding: var(--s1) var(--s2);
  font-size: 12px;
  letter-spacing: .6px;
  white-space: nowrap;
}
.ccm .btn {
  min-height: 48px;
  padding: var(--s1) var(--s3);
  font-size: 13px;
  letter-spacing: .8px;
  white-space: nowrap;
}

/* Textová varianta pro „Nastavit podrobně" — pořád tlačítko s celou
   klikací plochou, jen bez rámečku, aby dvojice ano/ne zůstala čitelná
   jako dvojice. Vlastní řádek pod nimi, protože je to třetí cesta,
   ne třetí možnost v řadě. */
.cc__more {
  flex: 1 0 100%;
  min-height: 32px;
  padding: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: var(--lh2);
  letter-spacing: .8px;
  color: var(--brown);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .25s var(--ease-out);
}
.cc__more:hover { color: var(--gold); }

/* =========================================================
   Okno s nastavením — druhá vrstva

   Tohle už modál je: aria-modal, past na Tab, zámek rolování. Rozdíl
   proti liště je záměrný — v liště se rozhoduje jedním klikem, tady se
   čte a přepíná, a nic pod oknem v tu chvíli není důležité.
   ========================================================= */
.ccm {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s3);
  background: rgba(41, 29, 18, .62);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.ccm.is-open { opacity: 1; }
.ccm[hidden] { display: none; }

.ccm__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: calc(100dvh - var(--s6));
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-dark);
  transform: translateY(12px);
  transition: transform .3s var(--ease-out);
}
.ccm.is-open .ccm__box { transform: none; }

.ccm__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s3);
  border-bottom: 1px solid var(--line-soft);
}

.ccm__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: var(--lh4);
  color: var(--ink);
}

.ccm__lede {
  margin-top: var(--s1);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: var(--lh2);
  color: var(--body);
}
.ccm__lede a {
  color: var(--brown);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ccm__lede a:hover { color: var(--gold); }

.ccm__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--muted);
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.ccm__close:hover { background: var(--cream); color: var(--ink); }
.ccm__close svg { width: 18px; height: 18px; }

.ccm__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s3) var(--s5) var(--s4);
}

.ccm__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s3) var(--s5) var(--s5);
  border-top: 1px solid var(--line-soft);
}
/* Uložení volby je hlavní akce okna — přijmout/odmítnout vše zůstávají
   po ruce, aby se dalo rozhodnout i odsud. */
.ccm__foot .btn { flex: 1 1 180px; }

/* ---------------------------------------------------------
   Kategorie
   --------------------------------------------------------- */
.ccat {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.ccat:last-child { border-bottom: 0; }

.ccat__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
}

.ccat__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 19px;
  line-height: var(--lh3);
  color: var(--ink);
}

.ccat__always {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: var(--lh1);
  letter-spacing: 1.4px;
  color: var(--copper);
  text-transform: uppercase;
}

.ccat__desc {
  margin-top: var(--s1);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: var(--lh2);
  color: var(--body);
}

/* Výpis konkrétních cookies je schovaný do details — v okně jde
   o rozhodnutí, ne o čtení tabulek, ale kdo chce jméno a dobu uložení,
   najde je bez odchodu na jinou stránku. */
.ccat__more { margin-top: var(--s2); }
.ccat__more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: var(--lh2);
  letter-spacing: 1px;
  color: var(--brown);
  text-transform: uppercase;
  list-style: none;
}
.ccat__more > summary::-webkit-details-marker { display: none; }
.ccat__more > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease-out);
}
.ccat__more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ccat__more > summary:hover { color: var(--gold); }

/* ---------------------------------------------------------
   Přepínač

   Nativní checkbox zůstává v DOM a nese stav — kreslí se jen jinak.
   Klávesnice, čtečka i formulářové chování tím zůstávají netknuté.
   --------------------------------------------------------- */
.ccsw { position: relative; display: inline-flex; flex: none; }
.ccsw input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ccsw__track {
  display: block;
  width: 56px;
  height: 32px;
  border-radius: 9999px;
  background: var(--cream-mid);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.ccsw__track::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease-out);
}
.ccsw input:checked + .ccsw__track {
  background: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.ccsw input:checked + .ccsw__track::after { transform: translateX(24px); }
.ccsw input:focus-visible + .ccsw__track {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
/* Nezbytné cookies se vypnout nedají — přepínač to musí přiznat
   pohledem, ne až po kliknutí. */
.ccsw input:disabled { cursor: default; }
.ccsw input:disabled + .ccsw__track { background: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(197, 160, 89, .45); }
.ccsw input:disabled + .ccsw__track::after { background: var(--cream-hi); }

/* ---------------------------------------------------------
   Tabulka cookies — v okně i na stránce se zásadami
   --------------------------------------------------------- */
.cctab {
  width: 100%;
  margin-top: var(--s2);
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: var(--lh2);
  color: var(--body);
}
.cctab th,
.cctab td {
  padding: var(--s1) var(--s2) var(--s1) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.cctab th {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.1px;
  color: var(--muted);
  text-transform: uppercase;
}
.cctab td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cctab__none {
  margin-top: var(--s2);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: var(--lh2);
  color: var(--muted);
}
/* Úzké okno tabulku nezalomí čitelně — pustí se do vodorovného
   rolování, aby se sloupce nerozsypaly. */
.cctab__wrap { overflow-x: auto; }

/* =========================================================
   Záslepka místo nenačteného obsahu

   Mapa Google si stáhne cookies od Googlu v okamžiku, kdy se iframe
   vloží do stránky — takže se do stránky nevloží, dokud k tomu není
   důvod. Adresa i odkaz „Navigovat" fungují bez ní, takže nikdo o nic
   nepřijde; kdo mapu chce, klikne a uvidí ji hned.
   ========================================================= */
.ccbl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  height: 100%;
  padding: var(--s4);
  text-align: center;
  background: var(--stripe);
}
.ccbl__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 19px;
  line-height: var(--lh3);
  color: var(--ink);
}
.ccbl__p {
  max-width: 46ch;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: var(--lh2);
  color: var(--body);
}
.ccbl .btn { min-height: 48px; padding: var(--s1) var(--s3); font-size: 13px; }
.ccbl__link {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh2);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ccbl__link:hover { color: var(--brown); }

/* =========================================================
   Stránka „Zásady používání cookies"

   Vlastní sazba, protože žádný stávající stylopis stránky se na dlouhý
   právní text nehodí — ostatní stránky jsou skládané ze sekcí s fotkou.
   ========================================================= */
.cdoc {
  padding: var(--s12) var(--edge) var(--s13);
  background: var(--cream);
}
.cdoc__inner { max-width: 800px; margin: 0 auto; }

.cdoc__title {
  margin-top: var(--s2);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: var(--lh6);
  color: var(--ink);
}
.cdoc__lede {
  margin-top: var(--s3);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: var(--lh3);
  color: var(--body);
}
.cdoc__updated {
  margin-top: var(--s2);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: var(--lh2);
  color: var(--muted);
}

.cdoc__sec {
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
}
.cdoc__h {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: var(--lh4);
  color: var(--ink);
}
.cdoc__h3 {
  margin-top: var(--s4);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 19px;
  line-height: var(--lh3);
  color: var(--brown);
}
.cdoc p {
  margin-top: var(--s2);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: var(--lh3);
  color: var(--body);
}
.cdoc p a {
  color: var(--brown);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cdoc p a:hover { color: var(--gold); }
.cdoc strong { font-weight: 600; color: var(--ink); }

.cdoc__list {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-top: var(--s2);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: var(--lh3);
  color: var(--body);
}
.cdoc__list li { position: relative; padding-left: var(--s3); }
.cdoc__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* Karta s jedním údajem — správce, kontakt, doba uložení. */
.cdoc__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s3);
  padding: var(--s4);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-card);
}
.cdoc__fact { display: flex; flex-direction: column; gap: 2px; }
.cdoc__fact dt {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh2);
  letter-spacing: 1.1px;
  color: var(--muted);
  text-transform: uppercase;
}
.cdoc__fact dd {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: var(--lh2);
  color: var(--ink);
}
.cdoc__fact dd a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }

.cdoc__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
  .cdoc { padding: var(--s10) var(--edge) var(--s11); }
  .cdoc__title { font-size: 40px; line-height: var(--lh5); }
  .cdoc__facts { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Na telefonu roh nedává smysl — 400px karta je skoro celá šířka
     okna, tak ať je celá a drží se okrajů stejně z obou stran. */
  .cc { padding: var(--s2); }
  .cc__card { max-width: none; }
  .cc__title { font-size: 19px; line-height: var(--lh3); }

  .ccm { padding: 0; align-items: flex-end; }
  .ccm__box {
    max-width: none;
    max-height: 92dvh;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .ccm__head { padding: var(--s4) var(--s3) var(--s3); }
  .ccm__title { font-size: 24px; line-height: var(--lh3); }
  .ccm__body { padding: var(--s2) var(--s3) var(--s3); }
  .ccm__foot { padding: var(--s3); }
  .ccm__foot .btn { flex: 1 1 100%; }

  .cdoc__title { font-size: 32px; line-height: var(--lh4); }
  .cdoc__h { font-size: 24px; line-height: var(--lh3); }
}

/* Kdo si vypnul animace, ten nechce ani nájezd lišty — objeví se rovnou.
   Zbytek webu se drží téhož pravidla, viz js/main.js. */
@media (prefers-reduced-motion: reduce) {
  .cc,
  .ccm,
  .ccm__box,
  .ccsw__track,
  .ccsw__track::after {
    transition: none;
  }
  .cc { opacity: 1; transform: none; }
}

/* Tisk: lišta ani okno na papír nepatří. */
@media print {
  .cc, .ccm { display: none !important; }
}