/* SAH kurzy – hlavička, patička, úvodní pásy a komponenty kurzů.
   Hlavička, patička a úvodní pás odpovídají komponentám nového webu (TopBar, MegaMenu, Footer, Hero). */

body { background: var(--bila); }
/* pojistka proti vodorovnému posunu stránky na mobilu (clip na rozdíl od hidden nerozbije lepkavou hlavičku) */
html, body { overflow-x: clip; }
main { display: block; }

/* ---------- horní pruh ---------- */
.horni-pruh { background: var(--svetla); color: var(--modra-tmava); font-size: 0.9rem; border-bottom: 1px solid var(--cara); }
.horni-pruh__radek { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.2rem; }
.horni-pruh__info { margin: 0; font-style: italic; color: var(--text-jemny); }
.horni-pruh__info a { color: inherit; font-weight: 700; text-decoration: none; }
.horni-pruh__info a:hover { text-decoration: underline; text-decoration-color: var(--oranzova); text-decoration-thickness: 2px; }
.horni-pruh ul { list-style: none; margin: 0 0 0 auto; padding: 0.3rem 0; display: flex; justify-content: flex-end; gap: 0.25rem 1.5rem; flex-wrap: wrap; }
.horni-pruh li { margin: 0; }
.horni-pruh ul a { color: var(--modra-tmava); text-decoration: none; font-weight: 700; }
.horni-pruh ul a:hover, .horni-pruh ul a[aria-current] { color: var(--text); text-decoration: underline; text-decoration-color: var(--oranzova); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 760px) { .horni-pruh__info { display: none; } .horni-pruh ul { justify-content: center; gap: 0.2rem 1.1rem; margin: 0 auto; } }

/* ---------- hlavička a menu ---------- */
.hlavicka { position: sticky; top: 0; z-index: 50; background: var(--modra); color: var(--bila); box-shadow: 0 6px 24px rgba(37, 59, 102, 0.2); }
.admin-bar .hlavicka { top: 32px; }
@media (max-width: 782px) { .admin-bar .hlavicka { top: 0; } }
.hlavicka__radek { display: flex; align-items: center; gap: 1rem; min-height: 4.6rem; }
.logo { display: flex; align-items: center; gap: 0.75rem; flex: none; text-decoration: none; color: var(--bila); }
.logo__napis { width: 200px; height: auto; }
.logo__kurzy { font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; padding: 0.2em 0.75em; border-radius: 999px; background: rgba(255, 255, 255, 0.18); line-height: 1.4; }
.logo:hover { color: var(--bila); }

.menu { display: flex; align-items: center; gap: 0.8rem; margin-left: auto; }
.menu__seznam { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.15rem; }
.menu__polozka { position: relative; margin: 0; display: flex; align-items: center; border-radius: 999px; transition: background-color 0.15s; }
.menu__odkaz { display: block; padding: 0.55rem 0.85rem; color: var(--bila); text-decoration: none; font-weight: 700; font-size: 1.05rem; white-space: nowrap; border-radius: 999px; }
.menu__odkaz:hover { color: var(--bila); }
.kosik { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; color: var(--bila); background: rgba(37, 59, 102, 0.25); text-decoration: none; flex: none; }
.kosik:hover { color: var(--bila); background: rgba(37, 59, 102, 0.4); }
.kosik svg { width: 1.35rem; height: 1.35rem; }
.kosik__pocet { position: absolute; top: -0.2rem; right: -0.25rem; min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem; border-radius: 999px; background: var(--oranzova); color: var(--text); font-size: 0.8rem; font-weight: 700; line-height: 1.3rem; text-align: center; }

@media (min-width: 1001px) {
  .menu__polozka:hover, .menu__polozka:focus-within { background: rgba(255, 255, 255, 0.16); }
  .menu__polozka:has(> .menu__odkaz[aria-current]) { background: var(--bila); }
  .menu__polozka:has(> .menu__odkaz[aria-current]) > .menu__odkaz { color: var(--modra-tmava); }
}

.menu-prepinac { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(37, 59, 102, 0.4); color: var(--bila); border: 0; border-radius: 999px; padding: 0.55rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
.menu-prepinac__ikona { width: 1.2rem; height: 0.9rem; position: relative; display: inline-block; }
.menu-prepinac__ikona::before, .menu-prepinac__ikona::after, .menu-prepinac__ikona span { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.menu-prepinac__ikona::before { top: 0; }
.menu-prepinac__ikona span { top: calc(50% - 1px); }
.menu-prepinac__ikona::after { bottom: 0; }
.menu-prepinac[aria-expanded='true'] .menu-prepinac__ikona::before { transform: translateY(0.4rem) rotate(45deg); }
.menu-prepinac[aria-expanded='true'] .menu-prepinac__ikona span { opacity: 0; }
.menu-prepinac[aria-expanded='true'] .menu-prepinac__ikona::after { transform: translateY(-0.4rem) rotate(-45deg); }
@media (min-width: 1001px) { .menu-prepinac { display: none; } }

@media (max-width: 1000px) {
  .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--modra-pozadi); padding: 0.5rem var(--okraj) 1.5rem; border-radius: 0 0 var(--rad-velky) var(--rad-velky); box-shadow: 0 18px 30px rgba(37, 59, 102, 0.25); max-height: calc(100dvh - 4.25rem); overflow-y: auto; display: none; }
  .hlavicka.je-otevreno .menu { display: flex; }
  .menu__seznam { flex-direction: column; align-items: stretch; }
  .menu__polozka { border-bottom: 1px solid rgba(255, 255, 255, 0.18); border-radius: 0; }
  .menu__odkaz { flex: 1; padding: 0.85rem 0; font-size: 1.2rem; }
  .menu__odkaz[aria-current] { text-decoration: underline; text-decoration-color: var(--oranzova); text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .menu__cta { margin-top: 1.2rem; align-self: center; }
  .kosik--menu { display: none; }
  .hlavicka__radek > .kosik { margin-left: auto; }
  .hlavicka__radek > .kosik + .menu-prepinac { margin-left: 0; }
}
@media (min-width: 1001px) { .hlavicka__radek > .kosik { display: none; } }
/* telefon: hlavička se musí vejít i s košíkem a tlačítkem Menu */
@media (max-width: 600px) {
  .hlavicka__radek { gap: 0.6rem; min-height: 4rem; }
  .logo__napis { width: 165px; }
  .logo__kurzy { display: none; }
  .kosik { width: 2.6rem; height: 2.6rem; }
  .menu-prepinac { padding: 0.5rem 0.85rem; }
}
@media (max-width: 360px) { .logo__napis { width: 140px; } .menu-prepinac > span:last-child { display: none; } }

/* ---------- úvodní pás ---------- */
.hero { background: var(--svetla); border-radius: 0 0 var(--rad-velky) var(--rad-velky); padding: clamp(1.5rem, 3.5vw, 2.6rem) 0 clamp(2.5rem, 5vw, 3.8rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero__obsah { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .hero--s-obrazkem .hero__obsah { grid-template-columns: 1.15fr 1fr; } }
.hero h1 { margin-bottom: 0.35em; }
.hero__text > :last-child { margin-bottom: 0; }
.hero__perex { font-size: var(--vel-perex); line-height: 1.5; max-width: 38em; color: var(--text); }
.hero__obrazek { border-radius: var(--rad); box-shadow: var(--stin); width: 100%; height: auto; object-fit: cover; }
.hero .drobecky { padding-top: 0; margin-bottom: 1.4rem; }

.hero--velky { position: relative; padding: 0; background: var(--modra-pozadi); overflow: hidden; min-height: clamp(30rem, 72vh, 42rem); display: flex; align-items: flex-end; }
.hero--velky .hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero--velky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(88, 115, 180, 0.88) 0%, rgba(88, 115, 180, 0.4) 45%, transparent 75%), linear-gradient(to right, rgba(88, 115, 180, 0.6) 0%, rgba(88, 115, 180, 0.25) 45%, transparent 70%); }
.hero--velky .hero__obsah { position: relative; z-index: 1; padding-block: 3rem clamp(5.5rem, 9vw, 7.5rem); }
.hero--velky .hero__text { max-width: 44rem; color: var(--bila); text-shadow: 0 1px 12px rgba(37, 59, 102, 0.35); }
.hero--velky h1, .hero--velky .hero__perex { color: var(--bila); }
.hero--velky .nadtitulek { color: var(--bila); background: rgba(88, 115, 180, 0.55); padding: 0.35em 1em; border-radius: 999px; backdrop-filter: blur(4px); }
.hero--velky .nadtitulek::before { display: none; }

/* pruh s čísly / výhodami pod velkým úvodním pásem (jako na hlavním webu) */
.vyhody-pruh { position: relative; z-index: 2; margin-top: clamp(-4.5rem, -6vw, -3rem); margin-bottom: var(--mezera); }
.vyhody-pruh ul { list-style: none; margin: 0; padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.2rem, 3vw, 2.2rem); background: var(--bila); border-radius: var(--rad); box-shadow: var(--stin); display: grid; gap: 1.2rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.vyhody-pruh li { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.vyhody-pruh strong { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); font-style: italic; color: var(--modra); line-height: 1.15; }
.vyhody-pruh strong::after { content: ''; display: block; width: 2.2rem; height: 3px; border-radius: 2px; background: var(--oranzova); margin-top: 0.35rem; }
.vyhody-pruh span { font-size: var(--vel-maly); color: var(--text-jemny); line-height: 1.4; }

/* ---------- karty kurzů (archiv, úvod) ---------- */
.kurzy-seznam { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.kurz-karta { display: grid; background: var(--bila); border-radius: var(--rad); box-shadow: var(--stin); overflow: hidden; position: relative; transition: transform 0.15s, box-shadow 0.15s; }
.kurz-karta:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(37, 59, 102, 0.18); }
@media (min-width: 760px) { .kurz-karta { grid-template-columns: minmax(16rem, 22rem) 1fr; } }
.kurz-karta__obrazek { position: relative; background: var(--svetla); }
.kurz-karta__obrazek img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
/* obrázky produktů jsou čtvercové s textem – neořezávat, zbytek sloupce vyplní pozadí */
@media (min-width: 760px) { .kurz-karta__obrazek img { aspect-ratio: auto; position: absolute; inset: 0; object-position: 70% center; } .kurz-karta__obrazek { min-height: 18rem; } }
.kurz-karta__obrazek img { aspect-ratio: 4 / 3; object-position: 70% center; }
.kurz-karta__sleva { position: absolute; top: 1rem; left: 1rem; background: var(--ruzova-tlacitko); color: var(--bila); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; padding: 0.3em 0.9em; border-radius: 999px; z-index: 1; }
.kurz-karta__obsah { padding: clamp(1.3rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 0.5rem; }
.kurz-karta__obsah > * { margin: 0; }
.kurz-karta h3 { font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem); text-transform: none; letter-spacing: 0; }
.kurz-karta h3 a { color: inherit; text-decoration: none; }
.kurz-karta h3 a::after { content: ''; position: absolute; inset: 0; }
.kurz-karta .tlacitka { position: relative; z-index: 1; margin-top: 0.6rem; }
.kurz-karta ul { padding-left: 1.2em; font-size: 1rem; }
.kurz-karta__jazyky { font-size: var(--vel-maly); color: var(--text-jemny); font-style: italic; }
.stitky { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.cena { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); font-weight: 700; font-style: italic; color: var(--modra-tmava); line-height: 1.2; }
.cena s, .cena del { font-size: 0.65em; color: var(--text-jemny); font-weight: 400; margin-left: 0.4em; }
.cena ins { text-decoration: none; }
.cena small { font-size: 0.6em; font-weight: 400; color: var(--text-jemny); font-style: normal; }
.cena-varianta { font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); font-weight: 700; color: var(--modra-pozadi); line-height: 1.3; margin-top: -0.3rem; }

/* ---------- landing page kurzu ---------- */
.produkt-hero .hero__text .tlacitka { margin-top: 1.6rem; }
.produkt-hero__cena { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin: 0.4rem 0 0; }
.produkt-hero__obrazek { position: relative; }
.produkt-hero__obrazek img { border-radius: var(--rad); box-shadow: var(--stin); width: 100%; aspect-ratio: 1; object-fit: cover; }
.produkt-hero__obrazek .video-fasada { margin: 0; aspect-ratio: 16 / 9; }

.boxy { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin-bottom: var(--mezera); }
.box { border-radius: var(--rad); padding: clamp(1.4rem, 3vw, 2rem); background: var(--svetla); }
.box h2 { font-size: var(--vel-h3); margin-bottom: 0.8rem; }
.box--modry { background: var(--modra-pozadi); color: var(--bila); }
.box--modry h2 { color: var(--bila); }
.box ul { list-style: none; padding: 0; margin: 0; }
.box li { position: relative; padding-left: 1.6em; }
.box li::before { content: '✓'; position: absolute; left: 0; color: var(--oranzova); font-weight: 700; }
.box--modry li::before { color: var(--oranzova); }

/* osnova kurzu */
.osnova { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); counter-reset: osnova; }
.osnova li { margin: 0; display: flex; gap: 0.9rem; align-items: center; background: var(--bila); border-radius: var(--rad-maly); padding: 0.85rem 1.1rem; box-shadow: 0 4px 14px rgba(37, 59, 102, 0.08); }
.osnova__cislo { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--svetla); color: var(--modra); font-weight: 700; font-style: italic; }
.osnova__nazev { font-weight: 700; line-height: 1.3; }
.osnova__ukazka { margin-left: auto; flex: none; font-size: 0.85rem; font-weight: 700; text-decoration: none; color: var(--ruzova-tmava); white-space: nowrap; }
.osnova__ukazka::before { content: '▶ '; }

/* výběr varianty: karty místo rozbalovacího seznamu */
.varianty { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: stretch; }
.varianta { position: relative; display: flex; flex-direction: column; gap: 0.7rem; background: var(--bila); border-radius: var(--rad); box-shadow: var(--stin); padding: clamp(1.5rem, 3vw, 2.2rem); border: 3px solid transparent; }
.varianta > * { margin: 0; }
.varianta--doporucena { border-color: var(--ruzova-tlacitko); }
.varianta__odznak { position: absolute; top: 0; right: clamp(1.2rem, 3vw, 2rem); transform: translateY(-50%); background: var(--ruzova-tlacitko); color: var(--bila); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; padding: 0.35em 1em; border-radius: 999px; }
.varianta h3 { font-size: var(--vel-h3); text-transform: none; margin: 0; }
.varianta .cena { font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); }
.varianta ul { list-style: none; padding: 0; }
.varianta li { position: relative; padding-left: 1.6em; }
.varianta li::before { content: '✓'; position: absolute; left: 0; color: var(--oranzova); font-weight: 700; }
.varianta form { margin-top: auto; display: flex; flex-direction: column; gap: 0.9rem; }
.varianta .tlacitko { width: 100%; }
.varianta label { font-weight: 700; font-size: 1rem; display: block; margin-bottom: 0.3rem; }
.varianta select { font: inherit; font-size: 1.05rem; color: var(--text); background: var(--bila); border: 2px solid var(--cara); border-radius: var(--rad-maly); padding: 0.65em 1em; width: 100%; }
.varianta select:focus { outline: none; border-color: var(--modra); box-shadow: 0 0 0 3px rgba(102, 131, 194, 0.25); }
.varianta__pozn { font-size: var(--vel-maly); color: var(--text-jemny); }
.platba-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.6rem; margin-top: 1.6rem; font-size: var(--vel-maly); color: var(--text-jemny); }
.platba-info span::before { content: '✓ '; color: var(--oranzova); font-weight: 700; }

/* příběh / fotky před a po */
.pribeh__fotky { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; }
.pribeh__fotky figure { margin: 0; position: relative; }
.pribeh__fotky img { border-radius: var(--rad); box-shadow: var(--stin); width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.pribeh__fotky figcaption { position: absolute; bottom: 0.8rem; left: 50%; transform: translateX(-50%); background: var(--bila); color: var(--modra-tmava); font-weight: 700; font-style: italic; padding: 0.25em 0.9em; border-radius: 999px; box-shadow: var(--stin); white-space: nowrap; font-size: 0.95rem; }
.pribeh__fotky figure:last-child figcaption { background: var(--oranzova); color: var(--text); }

/* kroky */
.kroky { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: krok; }
.kroky li { margin: 0; background: var(--bila); border-radius: var(--rad); box-shadow: var(--stin); padding: 1.6rem 1.5rem; counter-increment: krok; }
.kroky li::before { content: counter(krok); display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--modra); color: var(--bila); font-weight: 700; font-style: italic; font-size: 1.3rem; margin-bottom: 0.8rem; }
.kroky h3 { font-size: var(--vel-karta); margin-bottom: 0.3rem; }
.kroky p { margin: 0; font-size: 1rem; color: var(--text-jemny); }

/* FAQ */
.faq { max-width: 52rem; margin-inline: auto; display: grid; gap: 0.8rem; }
.faq details { background: var(--bila); border-radius: var(--rad-maly); box-shadow: 0 4px 14px rgba(37, 59, 102, 0.08); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.3rem; font-weight: 700; position: relative; color: var(--modra-tmava); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--oranzova); line-height: 1; transition: transform 0.15s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding: 0 1.3rem 1.1rem; }
.faq details > div > :last-child { margin-bottom: 0; }

.sekce__hlava { margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.sekce__hlava > :last-child { margin-bottom: 0; }

/* ---------- obecné stránky ---------- */
.stranka-obsah { margin-bottom: var(--mezera); }
.stranka-obsah .prose { max-width: none; }
.stranka-obsah img { border-radius: var(--rad-maly); }

/* ---------- patička ---------- */
.paticka { margin-top: var(--mezera); background: var(--modra-pozadi); color: var(--bila); border-radius: var(--rad-velky) var(--rad-velky) 0 0; padding-top: clamp(2.5rem, 5vw, 4rem); }
main + .paticka { margin-top: 0; }
.paticka a { color: var(--bila); }
.paticka__mrizka { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
@media (min-width: 900px) { .paticka__mrizka { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.paticka__logo { display: inline-flex; margin-bottom: 1rem; }
.paticka__logo img { width: 220px; }
.paticka__znacka p { color: var(--bila); font-size: 0.95em; max-width: 24rem; }
.paticka__nadpis { color: var(--bila); font-size: 1.15rem; text-transform: uppercase; margin-bottom: 0.7rem; }
.paticka ul { list-style: none; padding: 0; margin: 0; }
.paticka nav li { margin: 0 0 0.35rem; }
.paticka nav a { text-decoration: none; }
.paticka nav a:hover { text-decoration: underline; }
.paticka__socialni { display: flex; gap: 0.6rem; }
.paticka__socialni li { margin: 0; }
.paticka__socialni a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
.paticka__socialni a:hover { background: rgba(255, 255, 255, 0.3); }
.paticka__socialni svg { width: 1.3rem; height: 1.3rem; }
.paticka__spodek { margin-top: 2.5rem; padding: 1.2rem 0 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.25); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; font-size: 0.88rem; color: var(--bila); }
.paticka__spodek p { margin: 0; }
.paticka__spodek ul { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.paticka__spodek li { margin: 0; }

/* ---------- úvodní stránka: ukázka kurzu místo fotky ---------- */
.uvod { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(6rem, 10vw, 8.5rem); }
/* jemné barevné skvrny v pozadí (značkové barvy) */
.uvod::before, .uvod::after { content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; pointer-events: none; }
.uvod::before { width: 32rem; height: 32rem; right: -8rem; top: -10rem; background: #c9d5f0; }
.uvod::after { width: 24rem; height: 24rem; right: 22%; bottom: -12rem; background: #f6d3de; }
.uvod__mrizka { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 960px) { .uvod__mrizka { grid-template-columns: 1.15fr 1fr; } }
.uvod h1 { font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem); }
.uvod h1 span { display: block; color: var(--ruzova-tlacitko); }
.uvod .tlacitka { margin-top: 1.8rem; }
.uvod__ujisteni { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: var(--vel-maly); color: var(--text-jemny); }
.uvod__ujisteni li { margin: 0; }
.uvod__ujisteni li::before { content: '✓ '; color: var(--oranzova); font-weight: 700; }

.uvod__ukazka { position: relative; padding: 1.5rem 0 2.5rem; }
.okno { background: var(--bila); border-radius: var(--rad); box-shadow: 0 30px 60px rgba(37, 59, 102, 0.18), 0 8px 20px rgba(37, 59, 102, 0.08); overflow: hidden; transform: rotate(-1.5deg); }
.okno__lista { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; background: var(--svetla); border-bottom: 1px solid var(--cara); }
.okno__lista span { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--cara); }
.okno__lista span:first-child { background: var(--ruzova); }
.okno__lista span:nth-child(2) { background: var(--oranzova); }
.okno__lista em { margin-left: 0.8rem; font-size: 0.8rem; color: var(--text-jemny); background: var(--bila); padding: 0.1rem 0.8rem; border-radius: 999px; }
.okno__telo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; padding: 1rem; }
.okno__video { position: relative; border-radius: var(--rad-maly); overflow: hidden; aspect-ratio: 16 / 10; background: var(--svetla); }
.okno__video img { width: 100%; height: 100%; object-fit: cover; }
.okno__play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--modra); }
.okno__play svg { width: 58px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); }
.okno__casovac { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.7rem; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.7); }
.okno__casovac span { display: block; width: 38%; height: 100%; border-radius: 3px; background: var(--ruzova-tlacitko); }
.okno__lekce { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.92rem; }
.okno__lekce li { margin: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.55rem; border-radius: 10px; line-height: 1.2; font-weight: 700; color: var(--text); }
.okno__lekce li::before { content: ''; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--cara); display: grid; place-items: center; font-size: 0.65rem; color: var(--bila); }
.okno__lekce li.je-hotovo { color: var(--text-jemny); font-weight: 400; }
.okno__lekce li.je-hotovo::before { content: '✓'; background: #5e9a3e; box-shadow: none; }
.okno__lekce li.je-ted { background: var(--modra); color: var(--bila); }
.okno__lekce li.je-ted::before { content: '▶'; background: var(--bila); color: var(--modra); box-shadow: none; font-size: 0.5rem; }

.plovak { position: absolute; background: var(--bila); border-radius: var(--rad-maly); box-shadow: 0 16px 36px rgba(37, 59, 102, 0.2); padding: 0.85rem 1.1rem; line-height: 1.25; }
.plovak--postup { left: -1rem; bottom: 0; width: 13rem; transform: rotate(2deg); }
.plovak--postup strong { font-size: 0.95rem; color: var(--modra-tmava); }
.plovak--postup .mfp-ukazatel { height: 7px; border-radius: 4px; background: var(--svetla); margin-top: 0.5rem; display: block; overflow: hidden; }
.plovak--postup .mfp-ukazatel span { display: block; height: 100%; background: linear-gradient(90deg, var(--oranzova), #f6c46e); }
.plovak--bonus { right: -0.8rem; top: 0; background: var(--oranzova); color: var(--text); transform: rotate(3deg); text-align: center; }
.plovak--bonus b { display: block; font-size: 1.35rem; font-style: italic; }
.plovak--bonus span { font-size: 0.85rem; }
@media (max-width: 600px) {
  .okno__telo { grid-template-columns: 1fr; }
  .okno__lekce { display: none; }
  .plovak--postup { left: 0.5rem; }
  .plovak--bonus { right: 0.5rem; }
}
@media (max-width: 959px) { .uvod__ukazka { max-width: 34rem; margin-inline: auto; width: 100%; } }

/* ---------- proměny (stejné karty jako na asistovanehubnuti.cz) ---------- */
.promena__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
.promena__vysledek { align-self: flex-start; background: var(--oranzova); color: var(--text); font-weight: 700; font-style: italic; border-radius: 999px; padding: 0.15em 0.9em; }
.promena .odkaz-sipka { color: var(--modra-tmava); margin-top: auto; }
.promena__vysledek--hero { display: inline-block; margin: 0 0 0.8rem; }
.promena-detail { margin-bottom: var(--mezera); }
@media (min-width: 1000px) { .promena-detail__panel { position: sticky; top: 7rem; } }
.promena-detail__panel h2 { font-size: var(--vel-karta); }
.prose .galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.8rem; margin: 1.6em 0; }
.prose .galerie img { margin: 0; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; max-width: none; border-radius: var(--rad-maly); }

/* ---------- svět SAH (podcast, Nalejvárna, AI…) ---------- */
.svet__seznam { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.svet__polozka { margin: 0; position: relative; display: flex; flex-direction: column; gap: 0.45rem; padding: 1.5rem; border-radius: var(--rad); background: var(--bila); box-shadow: var(--stin); transition: transform 0.15s, box-shadow 0.15s; }
.svet__polozka:has(.svet__odkaz):hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(37, 59, 102, 0.18); }
.svet__polozka > * { margin: 0; }
.svet__polozka h3 { font-size: var(--vel-karta); }
.svet__polozka p { font-size: 1rem; color: var(--text-jemny); line-height: 1.55; }
.svet__ikona { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 16px; background: var(--svetla); color: var(--modra); margin-bottom: 0.3rem; }
.svet__ikona svg { width: 1.6rem; height: 1.6rem; }
.svet__polozka:nth-child(3n+2) .svet__ikona { background: #f9e7ed; color: var(--ruzova-tmava); }
.svet__polozka:nth-child(3n) .svet__ikona { background: #fdf0dc; color: #b9791c; }
.svet__odkaz { margin-top: auto; padding-top: 0.3rem; font-size: 1rem; }
.svet__odkaz::after { content: ' ↗'; }
.svet__odkaz::before { content: ''; position: absolute; inset: 0; }
.svet__polozka--brzy { background: linear-gradient(135deg, var(--bila), var(--svetla)); }
.svet__polozka--brzy .stitek { margin-top: auto; background: var(--oranzova); color: var(--text); }

/* ---------- kontakt ---------- */
.kontakt { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-bottom: var(--mezera); }
@media (min-width: 960px) { .kontakt { grid-template-columns: 1.15fr 1fr; } }
.kontakt__formular h2 { font-size: var(--vel-h3); text-transform: none; margin-bottom: 0.4rem; }
.kontakt__formular .karta__obsah { padding: clamp(1.5rem, 3vw, 2.2rem); gap: 0.8rem; }
.formular__radek { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .formular__radek { grid-template-columns: 1fr 1fr; } }
.formular .tlacitko { align-self: flex-start; }
.kontakt__pozn { color: var(--text-jemny); margin: 0.6rem 0 0; }
.kontakt__lenka { display: grid; gap: 1.4rem; }
@media (min-width: 640px) and (max-width: 959px) { .kontakt__lenka { grid-template-columns: 1fr 1.2fr; align-items: center; } }
.kontakt__foto { margin: 0; position: relative; }
.kontakt__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rad-velky); box-shadow: var(--stin); }
.kontakt__foto::after { content: ''; position: absolute; width: 38%; aspect-ratio: 1; right: -1rem; bottom: -1rem; border-radius: 50%; background: var(--ruzova); opacity: 0.45; z-index: -1; }
.kontakt__lenka-text h2 { font-size: var(--vel-h3); margin-bottom: 0.4rem; }
.kontakt__lenka-text p { color: var(--text-jemny); }
.kontakt__spojeni { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.6rem; }
.kontakt__spojeni li { margin: 0; display: flex; flex-direction: column; background: var(--svetla); border-radius: var(--rad-maly); padding: 0.7rem 1rem; }
.kontakt__spojeni span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-jemny); }
.kontakt__spojeni a { font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.pomoc h3 { font-size: var(--vel-karta); }
.kontakt__spodek { display: grid; gap: 2rem; }
.kontakt__spodek .cta { margin: 0; }
.provozovatel { font-size: 0.95rem; color: var(--text-jemny); }
.provozovatel h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--modra-tmava); margin-bottom: 0.5rem; }
.provozovatel p { margin: 0 0 0.4rem; }

/* ---------- obálka kurzu (okno přehrávače místo samotné fotky) ---------- */
.obalka { position: relative; display: grid; place-items: center; padding: clamp(1.2rem, 3vw, 2rem); height: 100%; overflow: hidden; background: linear-gradient(140deg, #6683c2, #4f6aa8); }
.obalka--ruzova { background: linear-gradient(140deg, #e3adbd, #ce6f8b); }
.obalka--oranzova { background: linear-gradient(140deg, #f6c46e, #f2a93b); }
.obalka::before, .obalka::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.obalka::before { width: 70%; aspect-ratio: 1; right: -25%; top: -30%; }
.obalka::after { width: 45%; aspect-ratio: 1; left: -15%; bottom: -20%; background: rgba(255, 255, 255, 0.1); }
.obalka__okno { position: relative; z-index: 1; width: 100%; max-width: 26rem; background: var(--bila); border-radius: var(--rad-maly); box-shadow: 0 20px 40px rgba(37, 59, 102, 0.28); overflow: hidden; transform: rotate(-2deg); }
.obalka__lista { display: flex; gap: 0.3rem; padding: 0.5rem 0.7rem; background: var(--svetla); }
.obalka__lista span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--cara); }
.obalka__lista span:first-child { background: var(--ruzova); }
.obalka__lista span:nth-child(2) { background: var(--oranzova); }
.obalka__video { position: relative; aspect-ratio: 16 / 9; background: var(--svetla); }
.obalka__video img { width: 100%; height: 100%; object-fit: cover; }
.obalka__play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ruzova-tlacitko); }
.obalka__play svg { width: 54px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)); }
.obalka__pocet { position: absolute; top: 0.6rem; left: 0.6rem; background: rgba(37, 59, 102, 0.85); color: var(--bila); font-weight: 700; font-style: italic; font-size: 0.8rem; padding: 0.2em 0.7em; border-radius: 999px; }
.obalka__casovac { position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.55rem; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.75); }
.obalka__casovac span { display: block; width: 30%; height: 100%; border-radius: 2px; background: var(--ruzova-tlacitko); }
.obalka__lekce { list-style: none; margin: 0; padding: 0.55rem; display: grid; gap: 0.25rem; font-size: 0.82rem; }
.obalka__lekce li { margin: 0; display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.45rem; border-radius: 8px; font-weight: 700; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obalka__lekce li::before { content: ''; flex: none; width: 0.95rem; height: 0.95rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--cara); display: grid; place-items: center; font-size: 0.55rem; color: var(--bila); }
.obalka__lekce li.je-hotovo { color: var(--text-jemny); font-weight: 400; }
.obalka__lekce li.je-hotovo::before { content: '✓'; background: #5e9a3e; box-shadow: none; }
.obalka__lekce li.je-ted { background: var(--modra); color: var(--bila); }
.obalka__lekce li.je-ted::before { content: '▶'; background: var(--bila); color: var(--modra); box-shadow: none; font-size: 0.45rem; }
/* v kartě kurzu vyplní obálka celý levý sloupec */
.kurz-karta__obrazek .obalka { min-height: 100%; }
@media (min-width: 760px) { .kurz-karta__obrazek .obalka { position: absolute; inset: 0; } }
.produkt-hero__obrazek .obalka { border-radius: var(--rad); box-shadow: var(--stin); aspect-ratio: 1; }
@media (min-width: 760px) { .kurz-karta__obrazek:has(.obalka) { min-height: 20rem; } }
@media (min-width: 960px) { .kontakt__foto img { aspect-ratio: 1; object-position: center 30%; } }

/* sleva: tmavě modrý štítek na obálce (kontrast na růžové i modré) + oranžový u ceny */
.kurz-karta__sleva { z-index: 3; background: var(--text); color: var(--bila); font-size: 0.95rem; padding: 0.4em 1.1em; box-shadow: 0 6px 16px rgba(37, 59, 102, 0.35); transform: rotate(-3deg); }
.cena__sleva { display: inline-block; margin-left: 0.5em; padding: 0.15em 0.6em; border-radius: 999px; background: var(--oranzova); color: var(--text); font-size: 0.55em; font-weight: 700; font-style: normal; vertical-align: middle; letter-spacing: 0.02em; }

/* Tlačítko přihlášení v hlavičce se nesmí zalomit ("Se connecter") */
.menu__cta { white-space: nowrap; }