/* ==========================================================================
   Martina Bajerová — Yoga & Vision Academy®
   Sdílený styl repliky webu. Statické CSS, žádný build, žádný framework.
   Zdroj pravdy: ../DESIGN BRIEF.md
   Fonty se linkují v HTML (<link> na Google Fonts), tady jsou jen stacky.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Proměnné
   -------------------------------------------------------------------------- */

:root {
  /* Barvy — ověřeno v inline :root originálu */
  --pozadi-stranky: #f9f7f2;
  --bila: #ffffff;
  --text: #000000;
  --text-tlumeny: #2d2d2d;
  --odkaz: #44243e;
  --odkaz-hover: #e1d5e7;
  --zlata: #b5925a;
  --zlata-svetla: #d9ba85;
  --zlata-jasna: #d4af37;
  --zlata-menu: #d4a83f;
  --zlata-bezova: #e0cca3;
  --fialova-tmava: #632d57;
  --fialova-syta: #69085c;
  /* tmavá zlatohnědá — jen jako text na zlaté ploše (kontrast 4,8 : 1) */
  --text-na-zlate: #3a2a12;
  --ametyst: #594b5e;
  --sedomodra: #778b8f;

  /* Rozměry */
  --page-width: 970px;
  --header-width: 1024px;
  /* Skutečná výška fixní hlavičky (doměřeno, ne odhad).
     Desktop: 1 px linka + 10 px padding + logo 288 px (poměr 2560×810 → 91,1 px)
              + 6 px mezera + řádek menu 33 px + 10 px padding = 151,1 px → 152 px
     Mobil:   1 px linka + 12 px padding + logo 210 px (66,4 px) + 12 px padding = 91,4 px → 92 px */
  --vyska-hlavicky: 152px;
  --vyska-hlavicky-mobil: 92px;

  /* Fonty */
  --font-nadpis: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-text: "Open Sans Condensed", "Open Sans", "Arial Narrow", Arial, sans-serif;
  --font-bio: "Alegreya Sans", "Open Sans", Arial, sans-serif;
  --font-citat: "Merriweather", Georgia, "Times New Roman", serif;
  --font-menu: "Open Sans", Arial, Helvetica, sans-serif;
  --font-podpis: "Allura", "Brush Script MT", cursive;

  /* Rytmus */
  --mezera-sekce: 72px;
  --mezera-sekce-mobil: 48px;
  --mezera-mrizky: 28px;
}

/* --------------------------------------------------------------------------
   2. Reset a základ
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--vyska-hlavicky) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-top: var(--vyska-hlavicky);
  background: var(--pozadi-stranky);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.2;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
}

a {
  color: var(--odkaz);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

a:hover,
a:focus-visible { color: var(--zlata); }

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

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

/* --------------------------------------------------------------------------
   3. Typografie
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-nadpis);
  font-weight: 400;
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 0.55em;
}

h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }

.nadpis-sekce {
  font-family: var(--font-nadpis);
  font-size: 32px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0.5em;
}

.nadpis-sekce--zlaty { color: var(--zlata); }
.nadpis-sekce--fialovy { color: var(--fialova-tmava); }

.podnadpis {
  font-family: var(--font-nadpis);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-tlumeny);
  text-align: center;
  margin: 0 0 1em;
}

.verzalky {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.text-stred { text-align: center; }
.text-vlevo { text-align: left; }

.text-tlumeny { color: var(--text-tlumeny); }
.text-zlaty { color: var(--zlata); }
.text-fialovy { color: var(--fialova-tmava); }

/* Blok „O Martině" — Alegreya Sans 18 px / 300 */
.bio {
  font-family: var(--font-bio);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-tlumeny);
}

/* Citát v sekci Krédo — 21 px */
.citat {
  font-family: var(--font-nadpis);
  font-size: 21px;
  line-height: 1.6;
  text-align: center;
  color: var(--fialova-tmava);
  margin: 0 auto;
  max-width: 760px;
}

/* Závěrečný citát — Merriweather 27 px, line-height 2, #69085c */
.citat--zaver {
  font-family: var(--font-citat);
  font-size: 27px;
  line-height: 2;
  color: var(--fialova-syta);
}

.podpis {
  font-family: var(--font-podpis);
  font-size: 34px;
  color: var(--zlata);
  text-align: center;
  line-height: 1.4;
}

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

/* --------------------------------------------------------------------------
   4. Tlačítka — pilulka, průhledné pozadí, jen rámeček
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-nadpis);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  background: transparent;
  border-radius: 9999px;
  cursor: pointer;
  max-width: 100%;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* fialová varianta — původní #element_3_1_2, #element_3_1_3 */
.btn--fialove {
  color: var(--fialova-tmava);
  border: 2px solid var(--zlata-svetla);
  padding: calc(1.2em - 2px) 3em;
}

/* Po najetí se plocha zlatě vyplní, ale text zůstává tmavý — bílá by na světlé
   zlaté měla kontrast 1,86 : 1 a text by prakticky zmizel. Takhle je to 5,5 : 1. */
.btn--fialove:hover,
.btn--fialove:focus-visible {
  background: var(--zlata-svetla);
  color: var(--fialova-tmava);
}

/* zlatá varianta — původní #element_4_0_4, #element_4_0_5 */
.btn--zlate {
  color: var(--zlata);
  border: 2px solid var(--zlata);
  padding: calc(1.1em - 2px) 2.1em;
}

/* Totéž u zlaté varianty: bílá na #b5925a dává jen 2,91 : 1. Zlatá výplň zůstává
   (barevná logika prvku), text je tmavá zlatohnědá → 4,8 : 1. */
.btn--zlate:hover,
.btn--zlate:focus-visible {
  background: var(--zlata);
  color: var(--text-na-zlate);
}

/* dvě tlačítka vedle sebe (upsell na prodejce) */
.tlacitka-radek {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
}

/* flex + centrování, aby text v nižším z dvojice nezůstal přilepený nahoře */
.tlacitka-radek .btn {
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   5. Hlavička — fixní, vystředěné menu, tři úrovně
   -------------------------------------------------------------------------- */

.hlavicka {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 1);
  border-bottom: 1px solid var(--zlata-jasna);
}

.hlavicka__vnitrek {
  max-width: var(--header-width);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hlavicka__logo { display: block; line-height: 0; }

.hlavicka__logo img {
  max-width: 288px;
  width: 100%;
  height: auto;
  /* Poměr originálního souboru (2560×810). Drží výšku hlavičky stabilní
     už před načtením obrázku, takže obsah pod hlavičkou neposkakuje. */
  aspect-ratio: 2560 / 810;
  margin: 0 auto;
}

/* přepínač mobilního menu (jen CSS, bez knihoven) */
.menu-prepinac {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.hamburger {
  display: none;
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 26px;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: var(--fialova-tmava);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* navigace */
.menu { width: 100%; }

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

.menu__uroven1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 26px;
}

.menu a {
  display: block;
  font-family: var(--font-menu);
  font-size: 13px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--odkaz);
  padding: 10px 2px;
  white-space: nowrap;
}

.menu a:hover,
.menu a:focus-visible,
.menu .je-aktivni > a { color: var(--zlata-menu); }

.menu__polozka { position: relative; }

/* rozbalovací úrovně */
.menu__uroven2,
.menu__uroven3 {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: var(--bila);
  border: 1px solid var(--zlata-jasna);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 20;
}

.menu__uroven3 {
  top: -9px;
  left: 100%;
  min-width: 320px;
}

.menu__uroven2 a,
.menu__uroven3 a {
  padding: 9px 18px;
  white-space: normal;
  line-height: 1.35;
}

.menu__uroven2 a:hover,
.menu__uroven3 a:hover { background: var(--odkaz-hover); }

.menu__polozka:hover > .menu__uroven2,
.menu__polozka:focus-within > .menu__uroven2,
.menu__polozka:hover > .menu__uroven3,
.menu__polozka:focus-within > .menu__uroven3 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* šipka u položky s podmenu (na desktopu jen dekorace, na mobilu ovladač) */
.podmenu-prepinac {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.podmenu-sipka {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 40px;
  cursor: pointer;
}

.podmenu-sipka::after {
  content: "";
  position: absolute;
  top: 15px;
  right: 18px;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--fialova-tmava);
  border-bottom: 1px solid var(--fialova-tmava);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

/* Fokus při ovládání klávesnicí. Samotné přepínače jsou skryté 1×1 px inputy,
   takže se rámeček musí vykreslit na viditelném ovladači (stejný postup
   používá i filtr v magazínu). Tmavě fialová má proti bílé hlavičce 10,3 : 1,
   zatímco --zlata-jasna jen 2,0 : 1 — token se ale nemění, používá ho i linka. */
.menu-prepinac:focus-visible ~ .hamburger,
.podmenu-prepinac:focus-visible ~ .podmenu-sipka {
  outline: 2px solid var(--fialova-tmava);
  outline-offset: 2px;
}

.menu__polozka--rozbal > a::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  vertical-align: 2px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   6. Patička
   -------------------------------------------------------------------------- */

.paticka {
  background: var(--bila);
  border-top: 1px solid var(--zlata-jasna);
  padding: 54px 0 34px;
  color: var(--text-tlumeny);
  font-size: 14px;
}

.paticka__logo {
  max-width: 260px;
  margin: 0 auto 22px;
}

.paticka__linka {
  max-width: 420px;
  margin: 0 auto 30px;
}

.paticka__sloupce {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  margin-bottom: 34px;
}

.paticka__nadpis {
  font-family: var(--font-nadpis);
  font-size: 17px;
  color: var(--zlata);
  margin: 0 0 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.paticka__seznam {
  list-style: none;
  margin: 0;
  padding: 0;
}

.paticka__seznam li { margin-bottom: 8px; }

.paticka__seznam a { color: var(--text-tlumeny); }
.paticka__seznam a:hover { color: var(--zlata); }

.paticka__site {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-bottom: 28px;
  font-family: var(--font-menu);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.paticka__copyright {
  max-width: 820px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-tlumeny);
}

/* --------------------------------------------------------------------------
   7. Sekce a obal
   -------------------------------------------------------------------------- */

.obal {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 20px;
}

.obal--siroky { max-width: var(--header-width); }
.obal--uzky { max-width: 720px; }

.sekce {
  position: relative;
  padding: var(--mezera-sekce) 0;
}

.sekce--bila { background: var(--bila); }
.sekce--kremova { background: var(--pozadi-stranky); }
.sekce--uzka { padding: 40px 0; }
.sekce--bez-mezery { padding: 0; }

/* fotografické pozadí s bílým překryvem 0.52–0.76 */
.sekce--foto {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sekce--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.68);
  pointer-events: none;
}

.sekce--foto > * { position: relative; z-index: 1; }

.sekce--foto-svetla::before { background: rgba(255, 255, 255, 0.76); }
.sekce--foto-tmava::before { background: rgba(255, 255, 255, 0.52); }

/* hero — jeden obrázek přes celou šířku */
.hero { position: relative; line-height: 0; }
.hero img { width: 100%; height: auto; }

.hero__sipka {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-right: 2px solid var(--bila);
  border-bottom: 2px solid var(--bila);
  rotate: 45deg;
  opacity: 0.85;
  animation: sipka-dolu 2s ease-in-out infinite;
}

@keyframes sipka-dolu {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* --------------------------------------------------------------------------
   8. Mřížky — nahrazují desktop/mobil duplikaci originálu
   -------------------------------------------------------------------------- */

.mrizka {
  display: grid;
  gap: var(--mezera-mrizky);
  align-items: start;
}

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

/* nesymetrické: 1/3 + 2/3 a naopak */
.mrizka--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.mrizka--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* magazín: 50 % + 25 % + 25 % */
.mrizka--magazin { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }

.mrizka--stred { align-items: center; }
.mrizka--siroka-mezera { gap: 44px; }

/* --------------------------------------------------------------------------
   9. Karty
   -------------------------------------------------------------------------- */

/* karta kurzu — obrázek 1:1, titulek Playfair 20 px, prokliknutá celá */
.karta-kurzu {
  display: block;
  color: var(--text);
  text-decoration: none;
}

.karta-kurzu__obrazek {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.karta-kurzu:hover .karta-kurzu__obrazek,
.karta-kurzu:focus-visible .karta-kurzu__obrazek { opacity: 0.88; }

.karta-kurzu__titulek {
  font-family: var(--font-nadpis);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  margin: 16px 0 0;
  color: var(--text);
}

.karta-kurzu:hover .karta-kurzu__titulek,
.karta-kurzu:focus-visible .karta-kurzu__titulek { color: var(--zlata); }

/* instruktorská karta — obrázek 723 × 1028.
   Je to odkaz: v originále nemá tlačítko, prokliknutá je celá karta. */
.karta-instruktor {
  display: block;
  color: var(--text);
  text-align: center;
  text-decoration: none;
}

.karta-instruktor__obrazek {
  width: 100%;
  aspect-ratio: 723 / 1028;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

.karta-instruktor:hover .karta-instruktor__obrazek,
.karta-instruktor:focus-visible .karta-instruktor__obrazek { opacity: 0.88; }

.karta-instruktor__titulek {
  font-family: var(--font-nadpis);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
  margin: 18px 0 14px;
  color: var(--text);
}

.karta-instruktor:hover .karta-instruktor__titulek,
.karta-instruktor:focus-visible .karta-instruktor__titulek { color: var(--zlata); }

/* karta článku v magazínu */
.clanek-karta {
  display: block;
  color: var(--text);
  background: var(--bila);
  border-bottom: 1px solid var(--zlata-bezova);
  padding-bottom: 20px;
}

.clanek-karta__obrazek {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: 14px;
}

.clanek-karta__rubrika {
  display: block;
  font-family: var(--font-menu);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zlata);
  margin-bottom: 8px;
}

.clanek-karta__titulek {
  font-family: var(--font-nadpis);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 10px;
}

.clanek-karta__perex {
  font-family: var(--font-nadpis);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-tlumeny);
  margin: 0;
}

.clanek-karta:hover .clanek-karta__titulek { color: var(--zlata); }

.clanek-karta--hlavni .clanek-karta__titulek { font-size: 30px; }
.clanek-karta--hlavni .clanek-karta__perex { font-size: 17px; }

/* banner rubriky */
.rubrika-banner { margin: 0 0 26px; }
.rubrika-banner img { width: 100%; }

/* postranní panel magazínu */
.postranni-panel {
  background: var(--pozadi-stranky);
  padding: 24px 20px;
}

.postranni-panel__nadpis {
  font-family: var(--font-nadpis);
  font-size: 18px;
  color: var(--zlata);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hledani { display: flex; gap: 8px; margin-bottom: 26px; }

.hledani input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-text);
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--zlata-bezova);
  border-radius: 9999px;
  background: var(--bila);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   10. Dekorace
   -------------------------------------------------------------------------- */

/* zlatá linka z obrázku (hotlink na originál) */
.zlata-linka {
  max-width: 420px;
  margin: 30px auto;
}

.zlata-linka--siroka { max-width: 700px; }

/* čistě CSS oddělovač, když se obrázek nehodí */
.oddelovac {
  height: 1px;
  border: 0;
  background: var(--zlata-jasna);
  max-width: 240px;
  margin: 30px auto;
  opacity: 0.7;
}

/* dekorativní kapka */
.kapka {
  width: 46px;
  margin: 0 auto 18px;
}

.kapka--velka { width: 80px; }

/* seznam sedmi svalů a podobné výčty */
.seznam-vycet {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.seznam-vycet li {
  position: relative;
  padding: 0 0 12px 24px;
  line-height: 1.45;
  font-size: 15px;
}

.seznam-vycet li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zlata);
}

.seznam-vycet strong {
  font-family: var(--font-nadpis);
  font-weight: 400;
  color: var(--fialova-tmava);
}

/* --------------------------------------------------------------------------
   11. Prodejní stránka — opakující se bloky
   -------------------------------------------------------------------------- */

/* blok obrázek vlevo / text vpravo (a obrácená varianta) */
.blok-problem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--zlata-bezova);
}

.blok-problem:last-of-type { border-bottom: 0; }

.blok-problem--obraceny .blok-problem__obrazek { order: 2; }

.blok-problem__titulek {
  font-family: var(--font-nadpis);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--fialova-tmava);
}

/* cena a value stacking */
.cena {
  text-align: center;
  font-family: var(--font-nadpis);
}

.cena__stara {
  display: block;
  font-size: 18px;
  color: var(--text-tlumeny);
  text-decoration: line-through;
  margin-bottom: 6px;
}

.cena__nova {
  display: block;
  font-size: 38px;
  color: var(--zlata);
  line-height: 1.2;
}

.rekapitulace {
  list-style: none;
  margin: 0 auto 26px;
  padding: 0;
  max-width: 620px;
}

.rekapitulace li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--zlata-bezova);
}

.disclaimer {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tlumeny);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   12. Responzivita — tablet 969 px, mobil 767 px
   -------------------------------------------------------------------------- */

@media (max-width: 969px) {
  .mrizka--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mrizka--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mrizka--magazin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mrizka--1-2,
  .mrizka--2-1 { grid-template-columns: minmax(0, 1fr); }

  .clanek-karta--hlavni { grid-column: 1 / -1; }

  h1 { font-size: 34px; }
  h2, .nadpis-sekce { font-size: 28px; }

  /* --- mobilní hlavička a rozbalovací menu --- */
  :root { --vyska-hlavicky: var(--vyska-hlavicky-mobil); }

  .hlavicka__vnitrek {
    padding: 12px 20px;
    position: relative;
    /* −1 px = linka pod hlavičkou, ať celek sedí přesně na --vyska-hlavicky-mobil */
    min-height: calc(var(--vyska-hlavicky-mobil) - 1px);
    justify-content: center;
  }

  .hlavicka__logo img { max-width: 210px; }

  .hamburger { display: block; }

  .menu {
    display: none;
    /* menu začíná pod logem (mezera 6 px + margin-top 10 px), proto se odečítá i to */
    max-height: calc(100vh - var(--vyska-hlavicky-mobil) - 16px);
    /* dvh počítá s vysunutou URL lištou mobilních prohlížečů */
    max-height: calc(100dvh - var(--vyska-hlavicky-mobil) - 16px);
    overflow-y: auto;
    border-top: 1px solid var(--zlata-jasna);
    margin-top: 10px;
    padding-bottom: 20px;
  }

  .menu-prepinac:checked ~ .menu { display: block; }

  .menu-prepinac:checked ~ .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-prepinac:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
  .menu-prepinac:checked ~ .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .menu__uroven1 {
    display: block;
    gap: 0;
  }

  .menu__polozka {
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  }

  .menu a {
    white-space: normal;
    padding: 12px 46px 12px 4px;
    font-size: 14px;
    line-height: 1.35;
  }

  .menu__polozka--rozbal > a::after { display: none; }

  .podmenu-sipka { display: block; }

  .menu__uroven2,
  .menu__uroven3 {
    position: static;
    min-width: 0;
    border: 0;
    padding: 0 0 6px 16px;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    background: transparent;
    transition: none;
  }

  /* na dotyku otevírá jen zaškrtnutý přepínač, ne hover */
  .menu__polozka:hover > .menu__uroven2,
  .menu__polozka:focus-within > .menu__uroven2,
  .menu__polozka:hover > .menu__uroven3,
  .menu__polozka:focus-within > .menu__uroven3 { display: none; }

  .podmenu-prepinac:checked ~ .menu__uroven2,
  .podmenu-prepinac:checked ~ .menu__uroven3 { display: block; }

  .podmenu-prepinac:checked ~ .podmenu-sipka::after { transform: rotate(-135deg); }

  .menu__uroven2 a,
  .menu__uroven3 a { padding: 10px 46px 10px 4px; font-size: 13px; }
}

@media (max-width: 767px) {
  body { font-size: 15px; }

  .sekce { padding: var(--mezera-sekce-mobil) 0; }

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

  .blok-problem { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .blok-problem--obraceny .blok-problem__obrazek { order: 0; }

  .paticka__sloupce { grid-template-columns: minmax(0, 1fr); }

  h1 { font-size: 28px; }
  h2, .nadpis-sekce { font-size: 24px; }
  h3 { font-size: 20px; }

  .citat { font-size: 19px; }
  .citat--zaver { font-size: 21px; line-height: 1.75; }

  .bio { font-size: 17px; }

  .btn--fialove { padding: calc(1.2em - 2px) 2em; }
  .tlacitka-radek .btn { flex: 1 1 100%; }

  .hero__sipka { width: 24px; height: 24px; bottom: 14px; }
}

/* --------------------------------------------------------------------------
   13. Ohledy
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body { padding-top: 0; background: #fff; }
  .hlavicka,
  .hamburger,
  .hero__sipka { display: none !important; }
  .sekce { padding: 16px 0; }
  a { color: #000; }
}