@charset "UTF-8";
/* =====================================================================
   Členská sekce (/vyuka/).

   Staví na tokenech z styl.css, takže se převléká se vzhledem webu stejně
   jako prodejní stránka. Platí tu totéž pravidlo: v komponentě se NIKDY
   nepíše konkrétní barva ani poloměr, jen var(--…). Kdo sem vloží
   natvrdo #123456, rozbije 63 vzhledů ze 64.

   Prodejní stránka je výkladní skříň, tohle je pracovní plocha: klidnější,
   hustší, bez ozdob. Proto vlastní soubor a ne další vrstva v lp.css.
   ===================================================================== */

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

.vh {
    position: sticky; top: 0; z-index: 90;
    background: var(--pozadi);
    border-bottom: var(--okraj-sila) solid var(--okraj);
}
.vh__in {
    max-width: var(--sirka); margin: 0 auto; padding: .85rem 22px;
    display: flex; align-items: center; gap: .9rem 1.4rem; flex-wrap: wrap;
}
.vh .znacka { text-decoration: none; }
.vh__nav { display: flex; gap: 1.4rem; font-size: .93rem; margin-left: 1.2rem; }
.vh__nav a { color: var(--text-tlumeny); text-decoration: none; }
.vh__nav a:hover { color: var(--text-vyrazny); }
.vh__odhlas { display: flex; align-items: center; gap: .9rem; margin: 0 0 0 auto; }
.vh__kdo { color: var(--text-tlumeny); font-size: .88rem; }
.vh__odhlas button {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--text-tlumeny); font-size: .88rem; text-decoration: underline;
    text-underline-offset: .16em;
}
.vh__odhlas button:hover { color: var(--text-vyrazny); }

@media (max-width: 620px) {
    .vh__in { gap: .6rem 1rem; }
    .vh__nav { margin-left: 0; order: 3; width: 100%; }
    .vh__kdo { display: none; }
}

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

.vp { margin-top: var(--mezera); background: var(--pozadi-alt); border-top: var(--okraj-sila) solid var(--okraj); }
.vp__in {
    max-width: var(--sirka); margin: 0 auto; padding: 1.6rem 22px;
    display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center;
    color: var(--text-tlumeny); font-size: .9rem;
}
.vp__in nav { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-left: auto; }
.vp__in a { color: var(--text-tlumeny); text-decoration: none; }
.vp__in a:hover { color: var(--text-vyrazny); text-decoration: underline; }
.vp__upozorneni { border-top: var(--okraj-sila) solid var(--okraj); }
.vp__upozorneni p {
    max-width: var(--sirka); margin: 0 auto; padding: 1.1rem 22px 1.6rem;
    color: var(--text-tlumeny); font-size: .82rem; line-height: 1.6;
}

/* ---------- Plochy ---------- */

.vsekce { padding: clamp(2rem, 1.4rem + 2.6vw, 3.4rem) 0 0; }
.vsekce .hlava { margin-bottom: 2rem; }
.vsekce h1 { font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.3rem); }

.vdrobky { color: var(--text-tlumeny); font-size: .87rem; margin-bottom: 1.2rem; }
.vdrobky a { color: var(--text-tlumeny); text-decoration: none; }
.vdrobky a:hover { color: var(--text-vyrazny); text-decoration: underline; }
.vdrobky span { padding: 0 .25rem; }

.vstav { color: var(--text-tlumeny); font-size: .92rem; margin-bottom: 1.3rem; }
.vstav strong { color: var(--text-vyrazny); }

.vuvod { color: var(--text-tlumeny); }
.vuvod p { margin-bottom: .8em; }

.vzpet { margin: 2.4rem 0 0; font-size: .92rem; }
.vzpet a { color: var(--text-tlumeny); }

.vpozn { color: var(--text-tlumeny); font-size: .87rem; margin-top: 1rem; }
.vpozn--stred { text-align: center; max-width: 52ch; margin-inline: auto; margin-top: 2.2rem; }

/* ---------- Zprávy ---------- */

.vzprava {
    padding: .8rem 1rem; border-radius: var(--r-s); margin-bottom: 1.4rem;
    border: var(--okraj-sila) solid var(--okraj); background: var(--karta);
    font-size: .93rem; color: var(--text);
}
.vzprava--ok { border-left: 3px solid var(--uspech); }
.vzprava--chyba { border-left: 3px solid var(--varovani); }

/* ---------- Karty ---------- */

.vkarta {
    background: var(--karta); border: var(--okraj-sila) solid var(--okraj);
    border-radius: var(--r); padding: clamp(1.2rem, 1rem + 1.4vw, 2rem);
    margin-bottom: 1.6rem;
}
.vkarta h2 { font-size: 1.12rem; margin-bottom: .7rem; }
.vkarta p { color: var(--text-tlumeny); }
.vkarta--prazdno { text-align: center; }
.vkarta--prazdno h1 { font-size: 1.5rem; }
.vkarta--prazdno .btn { margin-top: 1.2rem; }
.vkarta__vyrazne { color: var(--text-vyrazny); font-size: 1.05rem; }

/* minmax(0, 1fr) a overflow-wrap: anywhere: dlouhá e-mailová adresa je jedno slovo bez
   mezer a obyčejný sloupec 1fr by se kvůli ní roztáhl za okraj karty i telefonu. */
.vudaje { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.4rem; margin: 0 0 1rem; }
.vudaje dt { color: var(--text-tlumeny); font-size: .9rem; }
.vudaje dd { margin: 0; color: var(--text-vyrazny); font-size: .95rem; overflow-wrap: anywhere; }

/* ---------- Přihlašovací plochy ---------- */

.vbrana { display: grid; place-items: center; padding: clamp(2rem, 1rem + 5vw, 5rem) 22px; }
.vbrana__karta {
    width: 100%; max-width: 26rem;
    background: var(--karta); border: var(--okraj-sila) solid var(--okraj);
    border-radius: var(--r); padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.3rem);
}
.vbrana__karta h1 { font-size: 1.5rem; margin-bottom: .5rem; }
.vbrana__pod { color: var(--text-tlumeny); font-size: .93rem; margin-bottom: 1.6rem; }
.vbrana__pomoc { margin-top: 1.4rem; font-size: .88rem; }
.vbrana__pomoc a { color: var(--text-tlumeny); }
.vbrana__pomoc a:hover { color: var(--text-vyrazny); }

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

.vform label {
    display: block; margin-bottom: .3rem; font-size: .82rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-tlumeny);
}
.vform input[type="email"], .vform input[type="password"], .vform input[type="text"] {
    display: block; width: 100%; margin-bottom: 1.1rem; font: inherit; font-size: .98rem;
    color: var(--text-vyrazny); background: var(--pozadi);
    border: var(--okraj-sila) solid var(--okraj-silny); border-radius: var(--r-s);
    padding: .68rem .8rem;
}
.vform input:focus { outline: 2px solid var(--akcent-pismo); outline-offset: 1px; border-color: var(--akcent-pismo); }
.vform .btn { margin-top: .4rem; }
/* Zápis přes label.vform__pamet je nutný: samotná třída má nižší specificitu než
   .vform label výš, takže by zaškrtávátko zdědilo verzálky určené popiskům polí. */
.vform label.vform__pamet {
    display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1rem;
    text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--text);
}
.vform__pamet input { width: auto; margin-top: .3rem; flex: none; }
.vform__pamet small { display: block; color: var(--text-tlumeny); font-size: .84rem; margin-top: .15rem; }

/* ---------- Seznam modulů ---------- */

.vmoduly { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.vmodul {
    display: flex; align-items: center; gap: 1.1rem;
    background: var(--karta); border: var(--okraj-sila) solid var(--okraj);
    border-radius: var(--r); padding: 1.1rem 1.3rem;
    transition: border-color .16s ease, background .16s ease;
}
.vmodul:hover { border-color: var(--okraj-silny); }
.vmodul--zamceny { background: transparent; }
.vmodul--zamceny h2 { color: var(--text-tlumeny); }
/* Číslo stojí na druhé kartě a tlumený text na ní nevyhověl poměru 4,5:1 v jednadvaceti
   vzhledech ze čtyřiašedesáti. Zamčený modul poznat i tak, karta je průhledná. */
.vmodul--zamceny .vmodul__cislo { color: var(--text); }
.vmodul__cislo {
    flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
    border-radius: var(--r-s); background: var(--karta-2); color: var(--text-vyrazny);
    font-family: var(--font-nadpis); font-weight: var(--nadpis-vaha); font-size: 1.05rem;
}
.vmodul__telo { min-width: 0; flex: 1; }
.vmodul__telo h2 { font-size: 1.08rem; margin-bottom: .2rem; }
.vmodul__telo h2 a { text-decoration: none; }
.vmodul__telo h2 a:hover { text-decoration: underline; text-underline-offset: .18em; }
.vmodul__podtitul { color: var(--text-tlumeny); font-size: .92rem; margin-bottom: .35rem; }
.vmodul__stav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0; }
.vmodul__lekci { color: var(--text-tlumeny); font-size: .86rem; }
.vmodul__sipka { flex: none; color: var(--akcent-pismo); text-decoration: none; }
.vmodul__zamek { flex: none; color: var(--text-tlumeny); }

.vznak {
    display: inline-block; padding: .1rem .5rem; border-radius: var(--r-s);
    border: var(--okraj-sila) solid var(--okraj-silny); color: var(--text-tlumeny);
    font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
}
/* Akcent zůstává jen v rámečku. Jako barva drobného textu nevyhověl poměru 4,5:1
   na kartě v jedenácti vzhledech ze čtyřiašedesáti. */
.vznak--ok { color: var(--text-vyrazny); border-color: var(--akcent); }

@media (max-width: 520px) {
    .vmodul { gap: .8rem; padding: 1rem; }
    .vmodul__cislo { width: 2.2rem; height: 2.2rem; font-size: .95rem; }
}

/* ---------- Seznam lekcí ---------- */

.vlekce { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; }
/* Rámeček řádku je stejný pro lekci, která jde otevřít, i pro připravovanou:
   ta má místo odkazu obyčejný blok, aby se nedala prokliknout. */
.vlekce__polozka a, .vlekce__ramec {
    display: flex; align-items: center; gap: 1rem; text-decoration: none;
    background: var(--karta); border: var(--okraj-sila) solid var(--okraj);
    border-radius: var(--r-s); padding: .85rem 1.1rem;
    transition: border-color .16s ease;
}
.vlekce__polozka a:hover { border-color: var(--okraj-silny); }
.vlekce__polozka--pripravuje .vlekce__ramec { background: transparent; border-style: dashed; }
.vlekce__polozka--pripravuje .vlekce__text strong { color: var(--text); }
/* Padesát procent je tvar, ne designový poloměr: kolečko má zůstat kolečkem
   i ve vzhledech s ostrými hranami, proto se tu token --r-s schválně nepoužívá. */
.vlekce__stav {
    flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
    border-radius: 50%; border: var(--okraj-sila) solid var(--okraj-silny);
    color: var(--text-tlumeny); font-size: .85rem;
}
.vlekce__polozka.je-hotova .vlekce__stav { color: var(--akcent-pismo); border-color: var(--akcent-pismo); }
/* Text pro čtečky uvnitř kolečka nesmí roztáhnout jeho tvar. */
.vlekce__stav .jen-cteckam { position: absolute; }
.vlekce__text { min-width: 0; flex: 1; display: block; }
.vlekce__text strong { display: block; color: var(--text-vyrazny); font-size: .99rem; font-weight: 600; }
.vlekce__popis { display: block; color: var(--text-tlumeny); font-size: .88rem; margin-top: .12rem; }
.vlekce__meta { flex: none; display: flex; gap: .8rem; color: var(--text-tlumeny); font-size: .84rem; }

@media (max-width: 520px) {
    /* Meta se na úzkém displeji nezahazuje, jen se přesune pod název: informace
       o délce videa a počtu materiálů je užitečná i na telefonu. */
    .vlekce__polozka a, .vlekce__ramec { flex-wrap: wrap; }
    /* Odsazení pod název je vnitřní, ne okraj: okraj by se přičetl ke 100 % šířky
       a řádek by přetekl kartu i okno, stránka by šla na telefonu posunout do strany. */
    .vlekce__meta { flex: 1 0 100%; padding-left: 2.9rem; }
}

/* ---------- Video ---------- */

.vvideo {
    position: relative; aspect-ratio: 16 / 9; width: 100%; margin-bottom: 1.8rem;
    background: var(--pozadi-kontrast); border: var(--okraj-sila) solid var(--okraj);
    border-radius: var(--r); overflow: hidden;
}
.vvideo iframe, .vvideo video {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}

/* ---------- Text lekce ---------- */

.vtext { margin-bottom: 2rem; }
.vtext h3 { font-size: 1.08rem; margin: 1.8rem 0 .5rem; }
.vtext p { margin-bottom: 1.05em; }
.vtext ul { padding-left: 1.15rem; margin: 0 0 1.2rem; }
.vtext li { margin-bottom: .45rem; }
/* Odkazy v textu mají barvu textu a akcent jen v podtržení. Akcent jako barva písma
   nevyhověl poměru 4,5:1 na pozadí v deseti vzhledech ze čtyřiašedesáti. */
.vtext a { color: var(--text-vyrazny); text-decoration-color: var(--akcent); }
.vtext--uvod { color: var(--text-tlumeny); margin-bottom: 1.6rem; }

/* ---------- Odkazy a materiály ---------- */

.vodkazy, .vmaterialy { margin-bottom: 2rem; }
.vodkazy h2, .vmaterialy h2 {
    font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-tlumeny); margin-bottom: .8rem;
}
/* minmax(0, 1fr): odkaz bez popisu se ukazuje celou adresou a materiál bez názvu jménem
   souboru, obojí bývá jedno dlouhé slovo a sloupec by se kvůli němu roztáhl přes okraj. */
.vodkazy ul, .vmaterialy ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.vodkazy li { padding-left: 1.1rem; position: relative; }
.vodkazy li::before { content: '›'; position: absolute; left: 0; color: var(--akcent-pismo); }
.vodkazy a { color: var(--text-vyrazny); text-decoration-color: var(--akcent); overflow-wrap: anywhere; }
.vodkazy__popis { display: block; color: var(--text-tlumeny); font-size: .88rem; }

.vmaterialy a {
    display: flex; align-items: center; gap: 1rem; text-decoration: none;
    background: var(--karta); border: var(--okraj-sila) solid var(--okraj);
    border-radius: var(--r-s); padding: .8rem 1rem;
    transition: border-color .16s ease;
}
.vmaterialy a:hover { border-color: var(--akcent); }
/* Barva je --text, ne --text-tlumeny: písmo je malé (0,72 rem) a tlumený text na druhé
   kartě nevyhověl poměru 4,5:1 ve dvaceti vzhledech ze čtyřiašedesáti. */
.vmaterialy__znak {
    flex: none; min-width: 3.2rem; text-align: center; padding: .3rem .45rem;
    border-radius: var(--r-s); background: var(--karta-2); color: var(--text);
    font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
}
.vmaterialy__text { min-width: 0; flex: 1; }
.vmaterialy__text strong { display: block; color: var(--text-vyrazny); font-size: .96rem; font-weight: 600; overflow-wrap: anywhere; }
.vmaterialy__text span { display: block; color: var(--text-tlumeny); font-size: .87rem; }
.vmaterialy__velikost { flex: none; color: var(--text-tlumeny); font-size: .84rem; }

/* ---------- Hotovo a navigace mezi lekcemi ---------- */

.vhotovo {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 1.3rem 0; border-top: var(--okraj-sila) solid var(--okraj);
}
.vhotovo form { margin: 0; }
/* Hláška o nepovedeném odškrtnutí stojí na vlastním řádku nad tlačítkem. */
.vhotovo .vzprava { flex: 1 0 100%; margin: 0; }
.vhotovo__stav { color: var(--text-tlumeny); font-size: .9rem; }

.vnavigace {
    display: flex; gap: 1rem; flex-wrap: wrap;
    padding-top: 1.3rem; border-top: var(--okraj-sila) solid var(--okraj);
}
.vnavigace a {
    flex: 1 1 14rem; min-width: 0; text-decoration: none;
    background: var(--karta); border: var(--okraj-sila) solid var(--okraj);
    border-radius: var(--r-s); padding: .9rem 1.1rem;
    transition: border-color .16s ease;
}
.vnavigace a:hover { border-color: var(--okraj-silny); }
.vnavigace span { display: block; color: var(--text-tlumeny); font-size: .78rem;
    letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2rem; }
.vnavigace strong { display: block; color: var(--text-vyrazny); font-size: .96rem; font-weight: 600; }
.vnavigace__dal { text-align: right; }