/* STOP kratom z.s. — hlavní styly
   Paleta: petrolejová #16414A, šalvějová #7FA694, slonovinová #FAF7F1,
           okrová #C8832E, grafitová #1E2B2E, linky #E4DCCF            */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Inter-400-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: 400;
  font-display: swap;
  src: url(../fonts/Inter-400-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: 500;
  font-display: swap;
  src: url(../fonts/Inter-500-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: 500;
  font-display: swap;
  src: url(../fonts/Inter-500-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: 600;
  font-display: swap;
  src: url(../fonts/SourceSerif4-600-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: 600;
  font-display: swap;
  src: url(../fonts/SourceSerif4-600-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;
}

:root {
  --petrolej: #16414A;
  --petrolej-tmavy: #0E2F36;
  --salvej: #7FA694;
  --salvej-svetla: #E8F0EB;
  --slonovina: #FAF7F1;
  --bila: #FFFFFF;
  --okr: #C8832E;
  --okr-tmavy: #A66A1E;
  --grafit: #1E2B2E;
  --text-tlumeny: #55666B;
  --linka: #E4DCCF;

  --sirka: 1120px;
  --radius: 4px;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--grafit);
  background: var(--slonovina);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--petrolej);
  margin: 0 0 .6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }

a { color: var(--petrolej); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--okr-tmavy); }

img { max-width: 100%; height: auto; }

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

.obal { width: 100%; max-width: var(--sirka); margin: 0 auto; padding: 0 24px; }
.uzky { max-width: 720px; }

.preskocit {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--okr); color: #fff; padding: 12px 20px;
}
.preskocit:focus { left: 0; }

/* --- Horní lišta s krizovou linkou --------------------------------- */

.pruh-pomoc {
  background: var(--petrolej-tmavy);
  color: #DCE7E5;
  font-size: 14.5px;
  padding: 9px 0;
}
.pruh-pomoc .obal {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
}
.pruh-pomoc a { color: #fff; font-weight: 500; }
.pruh-pomoc strong { color: var(--okr); font-weight: 500; }

/* --- Hlavička ------------------------------------------------------ */

.hlavicka {
  background: var(--slonovina);
  border-bottom: 1px solid var(--linka);
  position: sticky; top: 0; z-index: 40;
}
.hlavicka .obal {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 84px;
}
.logo img { display: block; height: 44px; width: auto; }

.menu-tlacitko {
  display: none; background: none; border: 1px solid var(--linka);
  border-radius: var(--radius); padding: 9px 14px; font: inherit;
  color: var(--petrolej); cursor: pointer;
}

.navigace ul {
  display: flex; gap: 26px; list-style: none; margin: 0; padding: 0;
  align-items: center; flex-wrap: wrap;
}
.navigace a {
  text-decoration: none; font-size: 16px; color: var(--petrolej);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.navigace a:hover { border-bottom-color: var(--salvej); }
.navigace a.aktivni { border-bottom-color: var(--okr); font-weight: 500; }

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

.tlacitko {
  display: inline-block; font: inherit; font-weight: 500; font-size: 16px;
  padding: 13px 26px; border-radius: var(--radius); border: 1.5px solid var(--petrolej);
  color: var(--petrolej); background: transparent; text-decoration: none;
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.tlacitko:hover { background: var(--petrolej); color: var(--slonovina); }

.tlacitko--hlavni {
  background: var(--okr); border-color: var(--okr); color: #fff;
}
.tlacitko--hlavni:hover { background: var(--okr-tmavy); border-color: var(--okr-tmavy); color: #fff; }

.tlacitko--svetle { border-color: rgba(255,255,255,.55); color: #fff; }
.tlacitko--svetle:hover { background: #fff; color: var(--petrolej); }

/* --- Sekce --------------------------------------------------------- */

.sekce { padding: 74px 0; }
.sekce--bila { background: var(--bila); }
.sekce--salvej { background: var(--salvej-svetla); }

.nadpis-sekce { max-width: 640px; margin-bottom: 40px; }
.nadpis-sekce p { color: var(--text-tlumeny); margin-bottom: 0; }

.oznaceni {
  display: inline-block; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--okr-tmavy); font-weight: 500;
  margin-bottom: 12px;
}

/* --- Úvodní blok --------------------------------------------------- */

.uvod { padding: 90px 0 78px; background: var(--slonovina); }
.uvod h1 { max-width: 21ch; }
.uvod .perex {
  max-width: 56ch; font-size: 19px; color: var(--text-tlumeny); margin-bottom: 32px;
}
.uvod-tlacitka { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- Drobečková navigace ------------------------------------------- */

.drobecky { background: var(--slonovina); padding: 16px 0 0; font-size: 14.5px; }
.drobecky ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--text-tlumeny);
}
.drobecky li { display: flex; align-items: center; gap: 10px; }
.drobecky li + li::before { content: "/"; color: #B9AE9A; }
.drobecky a { color: var(--text-tlumeny); text-decoration: none; }
.drobecky a:hover { color: var(--petrolej); text-decoration: underline; }
.drobecky span { color: var(--petrolej); }

/* --- Časté otázky -------------------------------------------------- */

.faq { margin: 2.6em 0 2em; }
.faq > h2 { margin-bottom: .8em; }
.faq-polozka {
  border-top: 1px solid var(--linka); padding: 20px 0 4px;
}
.faq-polozka:last-child { border-bottom: 1px solid var(--linka); margin-bottom: 4px; }
.faq-polozka h3 {
  font-family: var(--sans); font-size: 17.5px; font-weight: 500;
  color: var(--petrolej); margin-bottom: .45em;
}
.faq-polozka p { color: var(--text-tlumeny); margin-bottom: .8em; }

/* --- Motto --------------------------------------------------------- */

.motto { padding: 70px 0 10px; background: var(--slonovina); }
.motto h1 {
  max-width: 22ch;
  font-size: clamp(2.2rem, 4.7vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: .35em;
}
.motto-dovetek {
  max-width: 54ch; font-size: 19.5px; color: var(--text-tlumeny); margin-bottom: 0;
}

/* --- Rozcestník ---------------------------------------------------- */

.rozcestnik { padding: 46px 0 78px; background: var(--slonovina); }
.rozcestnik-mrizka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

.rozcestnik-karta {
  position: relative; display: flex; flex-direction: column;
  background: var(--bila); border: 1px solid var(--linka); border-top: 4px solid var(--salvej);
  border-radius: 0; padding: 32px 34px 30px; text-decoration: none; color: var(--grafit);
  transition: border-color .15s ease, transform .15s ease;
}
.rozcestnik-karta:hover { border-color: var(--salvej); transform: translateY(-2px); }
.rozcestnik-karta--ja { border-top-color: var(--okr); }
.rozcestnik-karta--ja:hover { border-color: var(--okr); }
.rozcestnik-karta .oznaceni { margin-bottom: 8px; }
.rozcestnik-karta--okoli .oznaceni { color: #2E6551; }

.rozcestnik-nadpis {
  font-family: var(--serif); font-weight: 600; color: var(--petrolej);
  font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.15; margin-bottom: .45em;
}
.rozcestnik-popis { color: var(--text-tlumeny); font-size: 16.5px; }
.rozcestnik-sipka {
  margin-top: 22px; font-size: 24px; line-height: 1; color: var(--okr);
  transition: transform .15s ease;
}
.rozcestnik-karta:hover .rozcestnik-sipka { transform: translateX(5px); }

/* --- Přehled s přepínáním ------------------------------------------ */

/* Bez JavaScriptu zůstanou panely pod sebou a přepínače se nezobrazí. */
.prehled-lista { display: none; }
.prehled-panel + .prehled-panel { margin-top: 64px; }

.js .prehled-lista {
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 38px;
  border-bottom: 1px solid var(--linka);
}
.js .prehled-panel + .prehled-panel { margin-top: 0; }

.prehled-prepinac {
  position: relative; font: inherit; font-size: 16.5px; font-weight: 500;
  color: var(--text-tlumeny); background: none; border: 0;
  padding: 10px 2px 14px; margin-right: 18px; cursor: pointer;
}
.prehled-prepinac:hover { color: var(--petrolej); }
.prehled-prepinac[aria-selected="true"] { color: var(--petrolej); }

/* Proužek pod záložkou ukazuje, že se za chvíli přepne na další. */
.prehled-pruh {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--linka); transform: scaleX(0); transform-origin: left;
}
.prehled-prepinac[aria-selected="true"] .prehled-pruh {
  background: var(--okr); transform: scaleX(1);
}
.prehled-prepinac[aria-selected="true"].je-odpocet .prehled-pruh {
  animation: prehled-odpocet var(--prodleva, 7s) linear forwards;
}
@keyframes prehled-odpocet { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Než skript změří panely, zobrazuje se jen ten aktivní — blok tak má
   rovnou správnou výšku a nikam neposkočí. */
.js .prehled-panel { display: none; }
.js .prehled-panel.je-videt { display: block; }

/* Po změření se panely překryjí a výška se plynule přizpůsobuje obsahu. */
.js .prehled-panely.je-mereno { position: relative; transition: height .4s ease; }
.js .prehled-panely.je-mereno .prehled-panel {
  display: block; position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
.js .prehled-panely.je-mereno .prehled-panel.je-videt {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
.prehled-odkaz { margin-top: 36px; margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .js .prehled-panely.je-mereno,
  .js .prehled-panely.je-mereno .prehled-panel { transition: none; }
  .prehled-prepinac[aria-selected="true"].je-odpocet .prehled-pruh { animation: none; }
}

/* --- Dlaždice s články --------------------------------------------- */

.dlazdice {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;
}
.dlazdice-karta {
  display: flex; flex-direction: column; background: var(--bila);
  border: 1px solid var(--linka); border-radius: var(--radius); overflow: hidden;
  transition: border-color .15s ease;
}
.dlazdice-karta:hover { border-color: var(--salvej); }
.dlazdice-obrazek {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--slonovina);
}
.dlazdice-obrazek img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.dlazdice-telo { padding: 20px 22px 18px; display: flex; flex-direction: column; flex: 1; }
.dlazdice-telo h3 { font-size: 1.12rem; line-height: 1.3; margin-bottom: .45em; }
.dlazdice-telo h3 a { text-decoration: none; }
.dlazdice-telo h3 a:hover { text-decoration: underline; }
.dlazdice-telo p { color: var(--text-tlumeny); font-size: 15.5px; }
.dlazdice-patka {
  margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--text-tlumeny);
}
.dlazdice-karta--bez-obrazku { border-left: 3px solid var(--salvej); }

/* --- Delší texty --------------------------------------------------- */

.perex-clanku {
  font-size: 19.5px; color: var(--text-tlumeny); border-left: 3px solid var(--salvej);
  padding-left: 20px; margin-bottom: 2em;
}
.clanek h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin-top: 1.6em; }

.kontrolni-seznam { list-style: none; margin: 0 0 1.6em; padding: 0; }
.kontrolni-seznam li {
  position: relative; padding: 0 0 0 34px; margin-bottom: 14px; font-size: 17.5px;
}
.kontrolni-seznam li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 15px; height: 15px; border: 2px solid var(--salvej); border-radius: 2px;
}

.body-seznam { list-style: none; margin: 0 0 1.6em; padding: 0; }
.body-seznam li {
  position: relative; padding: 0 0 0 26px; margin-bottom: 14px; font-size: 17.5px;
}
.body-seznam li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--salvej);
}

.rady { padding-left: 0; list-style: none; counter-reset: rada; margin-bottom: 1.6em; }
.rady li {
  position: relative; padding-left: 48px; margin-bottom: 20px; counter-increment: rada;
}
.rady li::before {
  content: counter(rada); position: absolute; left: 0; top: 2px;
  width: 30px; height: 30px; border-radius: 50%; background: var(--salvej-svetla);
  color: #2E6551; font-size: 15px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}

.duraz {
  background: var(--salvej-svetla); border-left: 3px solid var(--salvej);
  padding: 22px 26px; margin: 0 0 1.8em;
}
.duraz p:last-child { margin-bottom: 0; }
.duraz--naliehave { background: #FBF2E4; border-left-color: var(--okr); }

.video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 1.8em; background: var(--grafit); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Karty s příběhy ----------------------------------------------- */

.mrizka { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.karta-pribeh {
  background: var(--bila); border: 1px solid var(--linka);
  border-radius: var(--radius); padding: 30px 30px 26px;
  display: flex; flex-direction: column;
  transition: border-color .15s ease;
}
.karta-pribeh:hover { border-color: var(--salvej); }
.karta-pribeh::before {
  content: "\201E"; font-family: var(--serif); font-size: 64px; line-height: .6;
  color: var(--okr); display: block; margin-bottom: 8px;
}
.karta-pribeh h3 { margin-bottom: .4em; }
.karta-pribeh h3 a { text-decoration: none; }
.karta-pribeh p { color: var(--text-tlumeny); }
.karta-pribeh .patka {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linka);
  font-size: 14.5px; color: var(--text-tlumeny);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.karta-pribeh .autor { font-weight: 500; color: var(--petrolej); }

.prazdno {
  border: 1px dashed var(--linka); border-radius: var(--radius);
  padding: 44px 30px; text-align: center; color: var(--text-tlumeny);
  background: var(--bila);
}
.prazdno p:last-child { margin-bottom: 0; }

/* --- Detail příběhu ------------------------------------------------ */

.clanek { max-width: 680px; }
.clanek .meta { color: var(--text-tlumeny); font-size: 15px; margin-bottom: 28px; }
.clanek p { font-size: 18.5px; }
.clanek::after {
  content: ""; display: block; width: 64px; height: 3px;
  background: var(--okr); margin-top: 36px;
}

/* --- Organizace ---------------------------------------------------- */

.seznam-organizaci { display: grid; gap: 18px; }
.karta-organizace {
  background: var(--bila); border: 1px solid var(--linka);
  border-left: 3px solid var(--salvej); border-radius: 0;
  padding: 24px 26px;
}
.karta-organizace h3 { margin-bottom: .3em; }
.karta-organizace .kontakty {
  display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15.5px; margin-top: 10px;
}

/* --- Transparentní účet -------------------------------------------- */

.ucet { background: var(--petrolej); color: #E7EFED; }
.ucet .obal { display: flex; flex-wrap: wrap; gap: 34px; align-items: center; justify-content: space-between; }
.ucet h2 { color: #fff; }
.ucet p { color: #C6D6D4; max-width: 46ch; margin-bottom: 0; }
.ucet-cislo {
  font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #fff; letter-spacing: .02em; display: block; margin-bottom: 6px;
  text-decoration: none;
}
.ucet-cislo:hover { color: var(--okr); }
.ucet-box { text-align: right; }
.ucet-box .banka { font-size: 14.5px; color: #A9C0BD; display: block; margin-bottom: 14px; }

/* --- Formulář ------------------------------------------------------ */

.formular { max-width: 680px; }
.pole { margin-bottom: 24px; }
.pole label { display: block; font-weight: 500; margin-bottom: 6px; color: var(--petrolej); }
.pole .napoveda { font-size: 14.5px; color: var(--text-tlumeny); margin: 0 0 8px; }

input[type="text"], input[type="email"], input[type="password"], textarea, select {
  width: 100%; font: inherit; font-size: 16.5px; color: var(--grafit);
  padding: 12px 14px; background: var(--bila);
  border: 1px solid #CFC8BB; border-radius: var(--radius);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--salvej); outline: 3px solid rgba(127,166,148,.35); outline-offset: 0;
}
textarea { min-height: 260px; resize: vertical; line-height: 1.7; }

.zaskrtavatko { display: flex; gap: 12px; align-items: flex-start; }
.zaskrtavatko input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
.zaskrtavatko label { font-weight: 400; color: var(--grafit); }

.med { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hlaska {
  padding: 16px 20px; border-radius: var(--radius); margin-bottom: 28px;
  border-left: 3px solid var(--salvej); background: var(--salvej-svetla);
}
.hlaska--chyba { border-left-color: #B4453C; background: #FBEDEB; }
.hlaska--info { border-left-color: var(--okr); background: #FBF2E4; }

.upozorneni-pomoc {
  background: var(--salvej-svetla); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 32px; font-size: 16px;
}
.upozorneni-pomoc strong { color: var(--petrolej); }

/* --- Stránkování --------------------------------------------------- */

.strankovani { display: flex; gap: 10px; justify-content: center; margin-top: 46px; flex-wrap: wrap; }
.strankovani a, .strankovani span {
  padding: 9px 16px; border: 1px solid var(--linka); border-radius: var(--radius);
  text-decoration: none; background: var(--bila);
}
.strankovani .aktivni { background: var(--petrolej); color: #fff; border-color: var(--petrolej); }

/* --- Patička ------------------------------------------------------- */

.paticka { background: var(--petrolej-tmavy); color: #B9CBC9; padding: 60px 0 28px; font-size: 15.5px; }
.paticka a { color: #E6EEEC; }
.paticka a:hover { color: var(--okr); }
.paticka h4 { color: #fff; font-family: var(--sans); font-size: 14px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 500; margin-bottom: 14px; }
.paticka-mrizka { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; }
.paticka ul { list-style: none; margin: 0; padding: 0; }
.paticka li { margin-bottom: 8px; }
.paticka-logo { height: 38px; width: auto; margin-bottom: 18px; }
.paticka-spodek {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 44px; padding-top: 20px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14.5px;
}
.paticka-odkazy { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.paticka-odkazy > * + *::before {
  content: "·"; color: rgba(255,255,255,.35); margin-right: 18px;
}

.webdesign-tlacitko {
  font: inherit; color: #B9CBC9; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.webdesign-tlacitko:hover { color: var(--okr); }
.webdesign-adresa { white-space: nowrap; }

/* --- Cookie lišta -------------------------------------------------- */

.cookie-lista {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 680px; margin: 0 auto; background: var(--bila);
  border: 1px solid var(--linka); border-top: 3px solid var(--okr);
  border-radius: var(--radius); padding: 22px 24px;
  box-shadow: 0 10px 34px rgba(20,45,50,.18);
}
.cookie-lista p { font-size: 15.5px; margin-bottom: 16px; }
.cookie-lista .tlacitka { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-lista .tlacitko { padding: 10px 20px; font-size: 15px; }

/* --- Administrace -------------------------------------------------- */

.admin-hlavicka {
  background: var(--petrolej); color: #fff; padding: 16px 0;
}
.admin-hlavicka .obal { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.admin-hlavicka a { color: #DCE7E5; text-decoration: none; margin-left: 22px; font-size: 15.5px; }
.admin-hlavicka a:hover { color: var(--okr); }
.admin-hlavicka .znacka { font-family: var(--serif); font-size: 19px; }

.tabulka { width: 100%; border-collapse: collapse; background: var(--bila); font-size: 15.5px; }
.tabulka th, .tabulka td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--linka); vertical-align: top; }
.tabulka th { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tlumeny); font-weight: 500; }
.tabulka tr:last-child td { border-bottom: none; }

.stav { display: inline-block; font-size: 13px; padding: 3px 10px; border-radius: 20px; }
.stav--ceka { background: #FBF2E4; color: var(--okr-tmavy); }
.stav--schvalen { background: var(--salvej-svetla); color: #2E6551; }
.stav--zamitnut { background: #F3EFEA; color: var(--text-tlumeny); }

.akce { display: flex; gap: 8px; flex-wrap: wrap; }
.akce button {
  font: inherit; font-size: 14px; padding: 7px 14px; border-radius: var(--radius);
  border: 1px solid var(--linka); background: var(--bila); cursor: pointer; color: var(--petrolej);
}
.akce button:hover { border-color: var(--salvej); }
.akce button.hlavni { background: var(--petrolej); border-color: var(--petrolej); color: #fff; }
.akce button.hlavni:hover { background: var(--petrolej-tmavy); }

.prihlaseni { max-width: 400px; margin: 90px auto; background: var(--bila);
  border: 1px solid var(--linka); border-radius: var(--radius); padding: 40px; }

/* --- Responzivita -------------------------------------------------- */

@media (max-width: 860px) {
  .mrizka { grid-template-columns: 1fr; }
  .rozcestnik-mrizka { grid-template-columns: 1fr; }
  .paticka-mrizka { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ucet .obal { flex-direction: column; align-items: flex-start; }
  .ucet-box { text-align: left; }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .sekce { padding: 54px 0; }
  .uvod { padding: 60px 0 52px; }
  .motto { padding: 54px 0 8px; }
  .rozcestnik { padding: 34px 0 54px; }
  .rozcestnik-karta { padding: 26px 24px 24px; }
  .dlazdice { grid-template-columns: 1fr; }
  .menu-tlacitko { display: block; }
  .navigace {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--slonovina); border-bottom: 1px solid var(--linka); padding: 12px 0 20px;
  }
  .navigace.otevreno { display: block; }
  .navigace ul { flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 24px; }
  .navigace a { display: block; padding: 10px 0; width: 100%; }
  .hlavicka .obal { position: relative; min-height: 70px; }
  .logo img { height: 42px; }
  .paticka-mrizka { grid-template-columns: 1fr; }
}

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

@media print {
  .pruh-pomoc, .navigace, .cookie-lista, .uvod-tlacitka { display: none; }
  body { background: #fff; }
}