@charset "utf-8";

/* Tokeny značky se načítají před tímto souborem. Komponenty používají jen role.
   Základ tokenů je bez vrstvy; i zde mají společné základy stejnou prioritu. */
@layer reset, rozvrzeni;
@layer reset {
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  *, *::before, *::after { box-sizing: border-box; }
  img, picture, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { border: 0; background: none; cursor: pointer; }
  ul[class], ol[class], nav ul, nav ol { list-style: none; padding: 0; }
}
:root { --sekce: var(--m10); }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
/* Záře pod snímkem (`.snimek::before`) záměrně přetéká o 5 % ven. Absolutně
   umístěný prvek tím ale zvětšuje rolovatelnou plochu stránky — na 768px
   displeji se kvůli tomu na 31 stránkách objevila vodorovná posuvník.
   `clip` ořeže, ale na rozdíl od `hidden` nevytváří rolovací kontejner,
   takže sticky obsah článku dál drží u okraje okna. */
body { margin: 0; overflow-x: clip; background: var(--wue-papir); color: var(--wue-text-2); font: var(--t-text)/1.62 var(--p-text); -webkit-font-smoothing: antialiased; }
/* `overflow-wrap` se uplatní teprve, když se slovo nevejde ani samo — běžné
   zalamování nemění. Bez něj vystrčilo „vzduchotechniku“ v nadpisu celou
   stránku na šířku už na 320px displeji. Čeština má takových slov dost. */
h1, h2, h3, h4 { margin: 0; color: var(--wue-text); font-family: var(--p-nadpis); font-weight: 800; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: var(--t-titul); line-height: 1.03; letter-spacing: -.03em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem); line-height: 1.14; letter-spacing: -.022em; }
h3 { font-size: var(--t-h3); line-height: 1.22; letter-spacing: -.018em; }
h4 { font-size: var(--t-h4); line-height: 1.3; }
p { margin: 0; max-width: 66ch; text-wrap: pretty; }
li { text-wrap: pretty; }
a { color: var(--wue-modra); text-decoration: none; text-underline-offset: .18em; text-decoration-thickness: from-font; }
:where(a[href]) { display: inline-block; min-height: 44px; min-width: 44px; max-width: 100%; align-content: center; }
/* 44px cil patri samostatnemu ovladacimu prvku. Odkaz uvnitr vety je soucast
   radku: inline-block vysoky 44 px roztahne radek, na kterem lezi, a odstavec
   ztrati rytmus. WCAG 2.5.8 takove odkazy z pravidla vyjima. */
:where(p a[href], :is(td, th) a[href], .proza :is(li, dd) a[href]) { display: inline; min-height: 0; min-width: 0; }
/* Podtrzeni si drzi souvisly text, kde je jedinym voditkem, ze slovo uprostred
   vety je odkaz, a kde pomaha cteni. Jinde ho nahradi chovani pri prejeti. */
:is(p, dd, td, th, blockquote, figcaption, .proza li, .ramec) a[href]:not(.tl, .stitek, .odkaz-podrobne, .logo) {
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--pohyb-rychle), text-decoration-thickness var(--pohyb-rychle), color var(--pohyb-rychle);
}
:is(p, dd, td, th, blockquote, figcaption, .proza li, .ramec) a[href]:not(.tl, .stitek, .odkaz-podrobne, .logo):is(:hover, :focus-visible) {
  color: var(--wue-fialova); text-decoration-color: var(--wue-jiskra-text); text-decoration-thickness: 2px;
}
button, input, select, textarea { font-family: var(--p-text); }
:focus-visible { outline: 3px solid var(--wue-zamereni); outline-offset: 2px; border-radius: var(--r-1); }
::selection { background: var(--wue-modra-ticha); color: var(--wue-text); }
[id] { scroll-margin-top: calc(var(--hlavicka-vyska) + var(--m5)); }
[hidden] { display: none !important; }
fieldset { min-inline-size: 0; border: 0; margin: 0; padding: 0; }
legend { padding: 0; }
ul, ol { padding-inline-start: var(--m5); }
input[type=checkbox], input[type=radio] { margin: 0; accent-color: var(--wue-modra); }
code, kbd, samp, .kod { font-family: var(--p-kod); }
.cisla, .plan__cena, .cislo b, .tabulka { font-variant-numeric: tabular-nums lining-nums; }

/* Šířky a rytmus: papír, otevřený bílý obsah, plný tmavý pruh. */
@layer rozvrzeni {
  .obal { width: 100%; max-width: calc(var(--wue-sloupec) + 2 * var(--m8)); padding-inline: var(--m8); margin-inline: auto; }
  .obal--uzky { max-width: calc(66ch + 2 * var(--m8)); }
  .sekce { padding-block: var(--sekce); }
  .sekce--linka { border-block-start: 1px solid var(--wue-linka); }
  .mrizka, .stoh { display: grid; gap: var(--m5); align-content: start; }
  .stoh--tesny { gap: var(--m2); }
  .mrizka--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .mrizka--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .mrizka--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
  .radek { display: flex; flex-wrap: wrap; gap: var(--m3); align-items: center; }
  .deleno { display: grid; gap: var(--m7); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
  .deleno > *, .mrizka > * { min-inline-size: 0; }
}
.hlavicka-sekce { display: grid; gap: var(--m4); max-width: 66ch; margin-block-end: var(--m7); }
.hlavicka-sekce > p:not(.stitek) { font-size: var(--t-vetsi); }
.stitek { display: inline-block; color: var(--wue-jiskra-text); font: 700 var(--t-maly)/1.4 var(--p-nadpis); letter-spacing: 0; text-transform: none; }
/* Odkaz není nadtitulek: modrá ho odlišuje od oranžové redakční značky. */
a.stitek { color: var(--wue-modra); min-height: 44px; display: inline-flex; align-items: center; }
.tise, .tl-pod { color: var(--wue-text-2); }
.mala, .tl-pod { font-size: var(--t-maly); }
.nedelit { white-space: nowrap; }
.daleko { margin-block-start: var(--m7); }
.stred { text-align: center; }
.stred .hlavicka-sekce { margin-inline: auto; }
.jen-pro-cteni { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.preskocit { position: fixed; z-index: 200; top: var(--m4); left: var(--m5); padding: var(--m3) var(--m5); border-radius: var(--r-2); background: var(--wue-plocha); transform: translateY(-200%); }
.preskocit:focus { transform: none; }
.odlozit { content-visibility: auto; contain-intrinsic-size: auto 48rem; }

/* Akce: zvedá se pouze hlavní tlačítko, ostatní stavy stojí na místě. */
.tl { display: inline-flex; align-items: center; justify-content: center; gap: var(--m2); min-height: 48px; min-width: 44px; padding: var(--m3) var(--m5); border: 1px solid var(--wue-linka-silna); border-radius: var(--r-2); background: var(--wue-plocha); color: var(--wue-text); font-weight: 600; text-decoration: none; letter-spacing: 0; transition: transform var(--pohyb-rychle), translate var(--pohyb-rychle), border-color var(--pohyb-rychle); }
/* Druhotna tlacitka se drive pri prejeti jen prebarvila. Jeden pixel nahoru
   staci na to, aby prvek odpovedel na ukazatel, a nic to nestoji. */
.tl:not(.tl--hlavni):hover { translate: 0 -1px; }
.tl:not(.tl--hlavni):active { translate: 0 1px; }
.tl:hover { text-decoration: none; border-color: var(--wue-modra); }
.tl--hlavni { border-color: transparent; background: var(--prechod-tlacitko); background-size: 170% 100%; background-position: 0% 50%; color: var(--wue-text-na-tmavem); box-shadow: var(--stin-barevny); }
/* Prechod je sirsi nez tlacitko a pri prejeti se po nem posune. Je to jedina
   zmena barvy, kterou si tlacitko dovoli, a ctenar ji vnima jako material,
   ne jako blikani. */
.tl--hlavni { transition: transform var(--pohyb-rychle), box-shadow var(--pohyb-rychle), background-position var(--pohyb-klidne); }
.tl--hlavni:hover { transform: translateY(-2px); background-position: 100% 50%; box-shadow: 0 14px 30px -10px rgba(84,46,200,.55), 0 2px 4px rgba(84,46,200,.2); }
.tl--hlavni:active { transform: none; }
.tl--velke { padding: var(--m4) var(--m6); font-size: var(--t-vetsi); }
.tl--sirka { width: 100%; }

/* Navigace zůstává dostupná i bez JavaScriptu.
   Hlavička drží nahoře přes position: sticky. Výšku NEMĚNÍME ani po
   odscrollování: hlavička je v toku, takže každá změna její výšky posune
   celý obsah pod ní a zapíše se do CLS. Mění se jen barva, rozostření
   a stín — to layout nestojí nic. */
/* 72 px: tlačítka mají 40, lišta kolem nich nemá nafukovat vzduch. */
:root { --hlavicka-vyska: 72px; }
.hlavicka { position: sticky; top: 0; z-index: 50; container-type: scroll-state; container-name: hlavicka; }
/* Posun hlavičky je čistě transform, takže ani skrývání nic neposouvá. */
.hlavicka { transition: translate var(--pohyb-klidne); }
.hlavicka[data-skryta] { translate: 0 -100%; }
.hlavicka:focus-within { translate: 0 0; }
.hlavicka__pozadi { position: absolute; z-index: -1; inset: 0; background: var(--wue-papir); border-block-end: 1px solid var(--wue-linka); transition: background-color var(--pohyb-klidne), box-shadow var(--pohyb-klidne); }
.hlavicka__obal { display: flex; align-items: center; gap: var(--m4); min-height: var(--hlavicka-vyska); }
/* Sklo se zapne, teprve když hlavička opravdu visí nahoře. Prohlížeč bez
   scroll-state nechá plný podklad — pořád je to čitelná, přilepená lišta. */
@container hlavicka scroll-state(stuck: top) {
  .hlavicka__pozadi { background: color-mix(in srgb, var(--wue-papir) 76%, transparent); border-block-end-color: transparent; box-shadow: var(--stin-2); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); }
  .je-home .hlavicka__pozadi { background: color-mix(in srgb, var(--wue-plocha-tmava) 72%, transparent); }
}
/* Barvu loga drží jedna proměnná; SVG uvnitř si ji bere přes currentColor.
   Hodnoty jsou ze značkového manuálu — na tmavém se logo neinvertuje do
   čisté bílé, #EAEFFB drží modrý podtón a nehaluje. */
:root { --wue-logo: #4D2395; }
.logo { display: inline-flex; align-items: center; width: 120px; min-width: 104px; min-height: 44px; }
.logo svg { width: 100%; height: auto; }
.nav { margin-inline-start: auto; }
.nav ul { display: flex; gap: var(--m2); align-items: center; padding: 0; list-style: none; }
.nav a { display: inline-flex; align-items: center; gap: var(--m2); min-height: 44px; padding: var(--m2); font-size: var(--t-maly); font-weight: 600; color: var(--wue-text-2); text-decoration: none; }
.nav a:is(:hover, [aria-current]) { color: var(--wue-modra); }
/* Cena u odkazu na ceník je vědomý štítek, ne utržený kus věty: vlastní
   podklad z průhledné currentColor, takže drží na světlé i tmavé liště. */
.nav__cena { display: inline-block; padding: 2px var(--m1); border-radius: var(--r-1); background: color-mix(in srgb, currentColor 14%, transparent); font-weight: 700; font-size: .72rem; line-height: 1.45; white-space: nowrap; }
/* Barvu NENASTAVUJEME — dědí se z odkazu. Na podstránkách je hlavička
   světlá, na úvodu tmavá; pevná tmavá barva měla na úvodu kontrast 2,2 : 1. */
.nav a:is(:hover, [aria-current]) .nav__cena { color: inherit; text-decoration: none; }
/* Akce v hlavičce: jedna plná, jedna duchová. Web prodává registraci, takže
   výraznou plochu dostane „Vyzkoušet“. „Přihlásit“ je servisní odkaz pro ty,
   kdo už účet mají — stačí mu obrys, jinak by o pozornost soupeřily dvě
   stejně těžké bílé plochy. Výška 40 px, ať lišta nevypadá nafouklá. */
.hlavicka__akce { display: flex; gap: var(--m2); align-items: center; margin-inline-start: var(--m2); }
.hlavicka__akce .tl { min-height: 40px; padding: 0 var(--m4); font-size: var(--t-maly); border-radius: var(--r-2); transition: translate var(--pohyb-rychle), background-color var(--pohyb-rychle), border-color var(--pohyb-rychle); }
.hlavicka__akce .tl--druhe { background: transparent; border-color: color-mix(in srgb, currentColor 30%, transparent); color: var(--wue-text); box-shadow: none; }
.hlavicka__akce .tl--druhe:hover { background: color-mix(in srgb, currentColor 9%, transparent); border-color: color-mix(in srgb, currentColor 48%, transparent); }
.hlavicka__akce .tl--hlavni { background: var(--prechod-tlacitko); color: var(--wue-text-na-tmavem); border-color: transparent; box-shadow: var(--stin-barevny); transform: none; }
.hlavicka__akce .tl:hover { translate: 0 -1px; }
.hlavicka__akce .tl:active { translate: 0 1px; }
/* Hamburger je navigační ikona, ne druhá hlavní akce — bez rámečku. */
.prepinac { display: none; width: 44px; height: 44px; flex: none; padding: 10px; border: 1px solid transparent; border-radius: var(--r-2); color: var(--wue-text); }
.prepinac svg { width: 100%; height: 100%; }
.prepinac:is(:hover, [aria-expanded=true]) { background: color-mix(in srgb, currentColor 10%, transparent); }
@media (prefers-color-scheme: dark) { :root { --wue-logo: #EAEFFB; } }

/* Hero má jediný plošný přechod. Scéna je úměrná dostupné šířce. */
.je-home .hlavicka__pozadi { background: var(--wue-plocha-tmava); border: 0; }
.je-home .hlavicka, .paticka { --wue-logo: #EAEFFB; }
.je-home .hlavicka :is(.nav a, .prepinac) { color: var(--wue-text-na-tmavem); }
/* Na fialové liště je plná bílá čitelnější než značkový přechod, který by
   splynul s pozadím. Duchové tlačítko drží bílý text a tenký bílý obrys. */
.je-home .hlavicka__akce .tl--hlavni { background: #fff; color: var(--f-700); box-shadow: 0 8px 20px -10px rgba(0,0,0,.55); }
.je-home .hlavicka__akce .tl--druhe { color: var(--wue-text-na-tmavem); }
/* Modrý prstenec zaměření má na fialové kontrast 2,2 : 1 — tady bílý. */
.je-home .hlavicka :focus-visible { outline-color: #fff; }
.hero { position: relative; isolation: isolate; background: var(--prechod-hero); color: var(--wue-text-na-tmavem-2); padding-block: var(--m8) var(--m11); }
.hero > .deleno { gap: var(--m7); }
.hero .stoh { gap: var(--m5); }
.hero h1 { color: var(--wue-text-na-tmavem); max-width: 20ch; font-size: clamp(2.625rem, 1.5rem + 2.8vw, 4rem); }
.hero__lid { font-size: var(--t-vetsi); line-height: 1.6; max-width: 48ch; color: inherit; }
.hero .stitek { color: var(--wue-jiskra); }
.hero .tl-pod { color: var(--wue-text-na-tmavem-2); }
.hero .tl--druhe { background: transparent; color: var(--wue-text-na-tmavem); border-color: var(--wue-text-na-tmavem-2); }
.hero__ciselnik { display: flex; flex-wrap: wrap; gap: var(--m5); padding-block-start: var(--m5); border-block-start: 1px solid var(--wue-text-na-tmavem-2); }
.cislo { display: grid; gap: var(--m1); }
.cislo b { font-size: var(--t-h4); color: var(--wue-text-na-tmavem); }
.cislo span { font-size: var(--t-maly); }
/* Scéna je vlastní kontejner: telefon i notebook se měří podle ní, ne podle
   okna prohlížeče. Stejné proporce pak platí v hrdinovi i v užším sloupci. */
.zarizeni-scena { position: relative; min-width: 0; container-type: inline-size; padding: var(--m5) var(--m5) var(--m9); }
.brand-w { position: absolute; width: 24%; top: 0; right: 0; opacity: .12; pointer-events: none; z-index: -1; }
.zarizeni-scena .snimek--telefon { position: absolute; width: 24cqi; right: 0; bottom: var(--m4); }
@media (min-width: 1100px) {
  .zarizeni-scena { perspective: 2400px; perspective-origin: 70% 45%; }
  .zarizeni-scena > .snimek { transform: rotateY(-7deg) rotateX(2deg); }
}
.hero__vlna { position: absolute; bottom: -1px; width: 100%; height: clamp(48px, 7vw, 104px); fill: var(--wue-papir); pointer-events: none; }

/* Prohlídka: navigace a jeden silný panel namísto série snímků. */
.prohlidka { background: var(--wue-papir); }
.tour { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--m6); align-items: start; }
.tour__bok { min-width: 0; }
.tour__bok .hlavicka-sekce { margin-block-end: var(--m5); }
.tour__menu { display: grid; gap: var(--m5); }
.tour__skupina h3 { padding-inline: var(--m4); margin-block-end: var(--m2); font-size: var(--t-maly); letter-spacing: 0; color: var(--wue-text-3); }
.tour__nav { display: grid; gap: var(--m1); }
.tour__volba { display: flex; align-items: center; min-height: 44px; padding: var(--m3) var(--m4); border: 1px solid transparent; border-radius: var(--r-2); color: var(--wue-text-2); font-size: var(--t-maly); font-weight: 600; text-decoration: none; }
.tour__volba:is(:hover, :focus-visible, [aria-selected=true]) { background: var(--wue-plocha-modra); color: var(--wue-modra); border-color: var(--wue-modra); }
/* Vybraná volba měla podtržení, které ji dělalo k nerozeznání od odkazu —
   a protože hover má stejnou plochu i rámeček, bylo to jediné, čím se
   vybraný tab lišil od najectého. Teď to říká svislý proužek na hraně:
   označení polohy, ne dekorace. */
.tour__volba[aria-selected=true] { font-weight: 700; box-shadow: inset 3px 0 0 var(--wue-modra); }
.tour__panely { min-width: 0; }
.tour__panel { overflow: clip; border: 1px solid var(--wue-linka); border-radius: var(--r-4); background: var(--wue-plocha); margin-block-end: var(--m6); box-shadow: var(--stin-2); }
.tour__text { padding: var(--m5); display: grid; grid-auto-rows: max-content; align-content: start; gap: var(--m5); }
.tour__text > .uvod-stitek { margin: 0; }
.tour__text h3 { font-size: var(--t-h3); }
.tour__text a { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }
.tour__panel .snimek { margin: 0 var(--m5) var(--m5); }
/* Panel bez snímku nesmí vypadat jako panel, kterému se obrázek nenačetl.
   Místo prázdného rámu dostane vlastní plochu a dotáhne spodní okraj. */
.tour__panel:not(:has(.snimek)) { background: linear-gradient(145deg, var(--wue-plocha) 55%, var(--wue-plocha-modra)); }
.tour__panel:not(:has(.snimek)) .tour__text { padding-block-end: var(--m6); }
.vypocet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m2); counter-reset: vypocet; list-style: none; padding: 0; }
.vypocet li { counter-increment: vypocet; padding: var(--m3); border-radius: var(--r-1); background: var(--wue-plocha-modra); font-size: var(--t-maly); color: var(--wue-text); }
.vypocet li::before { content: counter(vypocet, decimal-leading-zero) ' '; color: var(--wue-text-3); margin-inline-end: var(--m2); }
.vypocet li:last-child { font-weight: 700; border: 1px solid var(--wue-modra); }

/* Obory tvoří otevřenou bílou sekci, nikoli další sadu velkých karet. */
.obory-home { background: var(--wue-plocha); }
.obory-uvod { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m8); align-items: start; }
.obory-uvod .hlavicka-sekce { margin: 0; }
.bolesti { padding: var(--m5); border-inline-start: 3px solid var(--wue-modra); border-radius: var(--r-3); background: var(--wue-plocha-modra); }
.bolesti h3 { font-size: var(--t-h4); margin-block-end: var(--m5); }
.bolesti ul { display: grid; gap: var(--m4); padding-inline-start: var(--m4); }
.obory-seznam { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--m2); margin-block: var(--m7); }
.obory-seznam > :is(a, span) { display: flex; justify-content: space-between; align-items: center; gap: var(--m4); min-height: 64px; padding: var(--m4); border-block-end: 1px solid var(--wue-linka); color: var(--wue-text); font-size: var(--t-maly); text-decoration: none; }
.obory-seznam > a:is(:hover, :focus-visible) { color: var(--wue-modra); background: var(--wue-plocha-modra); }
.obory-seznam > a span { color: var(--wue-modra); }
.obory-dukaz { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--m7); align-items: start; padding-block-start: var(--m7); border-block-start: 1px solid var(--wue-linka); }
.obory-dukaz > div:first-child { display: grid; gap: var(--m4); }

/* Přehled funkcí: jedna hlavní karta a úsporné redakční řádky. */
.karta, .plan { display: grid; gap: var(--m4); align-content: start; padding: var(--m5); background: var(--wue-plocha); border: 1px solid var(--wue-linka); border-radius: var(--r-3); box-shadow: var(--stin-1); }
.karta { position: relative; isolation: isolate; transition: translate var(--pohyb-klidne), border-color var(--pohyb-klidne); }
.karta::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-3); box-shadow: var(--stin-2); opacity: 0; z-index: -1; pointer-events: none; transition: opacity var(--pohyb-klidne); }
.karta:is(:hover, :focus-within) { border-color: var(--wue-modra); translate: 0 -3px; }
/* Odznak se zvedne o pixel driv nez karta. Dve sladena gesta misto jednoho
   velkeho: karta tim pusobi jako jeden kus, ne jako obdelnik, ktery poskocil. */
.karta .ikona-kruh { transition: translate var(--pohyb-hravy); }
.karta:is(:hover, :focus-within) .ikona-kruh { translate: 0 -2px; }
/* Řádky v bentu nejsou karty, jen odsazené položky — ty se nezvedají. */
.bento .karta:not(:first-child):is(:hover, :focus-within) { translate: none; }
.karta:is(:hover, :focus-within)::after { opacity: 1; }
.karta--odkaz { text-decoration: none; }
.karta h3 { font-size: var(--t-h4); }
.karta p { font-size: var(--t-text); line-height: 1.62; }
/* Celá karta bývá odkaz, takže text uvnitř dědil odkazovou modrou: čtyři
   řádky souvislého textu v modré se čtou hůř a nadpis karty tím přestal
   být nejvýraznější prvek. Barvu nese nadpis při přejetí, ne odstavec.
   Pravidlo musí zůstat tady, ne na konci souboru — #moduly si světlý text
   na tmavém pruhu přepisuje až níže a musí vyhrát. */
.karta--odkaz :is(p, .tise) { color: var(--wue-text-2); }
.karta--odkaz h3 { transition: color var(--pohyb-rychle); }
.karta--odkaz:is(:hover, :focus-within) h3 { color: var(--wue-modra); }
.cislo-kroku, .obor-ikona { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-2); background: var(--wue-plocha-modra); color: var(--wue-modra); }
.cislo-kroku svg, .obor-ikona svg { width: 24px; height: 24px; }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m6); }
.bento .karta:not(:first-child) { grid-template-columns: auto 1fr; gap: var(--m3) var(--m5); padding: var(--m5) 0; border: 0; border-block-start: 1px solid var(--wue-linka); background: transparent; box-shadow: none; }
.bento .karta:not(:first-child) :is(h3, p, a) { grid-column: 2; }
.bento .karta:not(:first-child) .cislo-kroku { grid-row: 1 / span 3; }
.bento .karta:not(:first-child)::after { display: none; }
.bento .karta:not(:first-child):focus-within { border-color: var(--wue-modra); }
.bento .karta:first-child { grid-column: 1 / -1; grid-template-columns: 1fr 1.4fr; gap: var(--m5) var(--m7); padding: var(--m7); border-radius: var(--r-4); background: var(--wue-plocha-modra); }
.bento .karta:first-child > :not(.snimek) { grid-column: 1; }
.bento .karta:first-child .snimek { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
.bento .karta:first-child::after { border-radius: var(--r-4); }
.bento .karta:first-child h3 { font-size: var(--t-h3); }
.bento .karta:is(:hover, :focus-within) h3 { color: var(--wue-modra); }

/* === Snímky aplikace ====================================================
   Snímek je obsah, rám je jen podstavec. Proto žádný kreslený prohlížeč
   s puntíky: hloubku nese tenký rám, vrstvený stín a záře pod zařízením.
   Komponenta se řídí šířkou svého slotu (cqi), ne šířkou obrazovky — stejný
   kód tak sedí v hrdinovi, v kartě i v tmavém pruhu. */
.snimek { position: relative; margin: 0; min-width: 0; container-type: inline-size; }
/* Záře je čistě dekorativní, proto pseudoprvek místo dalšího uzlu v DOM. */
.snimek::before { content: ''; position: absolute; z-index: -1; inset: 32% -5% -8%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--wue-modra-ziva) 70%, transparent), transparent); filter: blur(26px); opacity: .5; pointer-events: none; }
/* Stín má pět vrstev místo jedné: jediný stín končí viditelnou hranou. */
.snimek__ram { position: relative; padding: clamp(3px, .7cqi, 9px); border-radius: clamp(12px, 2.6cqi, 26px); background: linear-gradient(180deg, color-mix(in srgb, var(--wue-plocha) 90%, var(--wue-linka)), var(--wue-plocha)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--wue-linka-silna) 65%, transparent), 0 1px 2px rgba(39,31,99,.05), 0 6px 12px -5px rgba(39,31,99,.10), 0 18px 34px -14px rgba(39,31,99,.18), 0 44px 80px -30px rgba(39,31,99,.24); }
/* Poměr drží plocha, ne obrázek. Rozvržení tak zná výšku dřív než data. */
.snimek__plocha { display: block; position: relative; width: 100%; padding: 0; overflow: clip; aspect-ratio: var(--snimek-pomer, 16 / 10); border-radius: clamp(9px, 2cqi, 20px); background: var(--wue-plocha-ticha); color: inherit; }
button.snimek__plocha { border: 0; cursor: zoom-in; }
.snimek__plocha:focus-visible { outline-offset: 3px; }
.snimek__plocha picture { height: 100%; }
.snimek__plocha img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Lupa se hlásí až při najetí nebo zaměření, aby neseděla přes snímek pořád. */
.snimek__lupa { position: absolute; z-index: 2; inset-inline-end: var(--m3); inset-block-end: var(--m3); display: inline-flex; align-items: center; padding: var(--m2) var(--m3); border-radius: var(--r-pill); background: color-mix(in srgb, var(--wue-plocha-tmava) 88%, transparent); color: var(--wue-text-na-tmavem); font: 700 var(--t-mikro)/1.2 var(--p-text); visibility: hidden; opacity: 0; translate: 0 6px; transition: opacity var(--pohyb-rychle), translate var(--pohyb-rychle), visibility 0s linear 140ms; }
.snimek__plocha:is(:hover, :focus-visible) .snimek__lupa { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
.snimek__popis { margin-block-start: var(--m4); font-size: var(--t-maly); color: var(--wue-text-3); text-wrap: pretty; }
.sekce--tmava .snimek__popis { color: var(--wue-text-na-tmavem-2); }
/* Dokument na výšku je papír: bílá plocha, ostřejší rohy, užší sloupec. */
.snimek--list { max-width: 30rem; margin-inline: auto; }
.snimek--list .snimek__ram { border-radius: clamp(6px, 1.4cqi, 12px); }
.snimek--list .snimek__plocha { border-radius: clamp(4px, 1cqi, 8px); background: #fff; }
/* Telefon: tmavé tělo, světlá hrana místo obrysu a ostrůvek nad displejem —
   bez něj je to jen zakulacený obdélník. */
.snimek--telefon .snimek__ram { padding: clamp(4px, 1.7cqi, 11px); border-radius: clamp(16px, 7cqi, 44px); background: linear-gradient(165deg, color-mix(in srgb, var(--wue-plocha-tmava) 80%, #fff), var(--wue-plocha-tmava)); box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 20px 40px -16px rgba(10,6,30,.6), 0 48px 90px -40px rgba(10,6,30,.65); }
.snimek--telefon .snimek__plocha { border-radius: clamp(12px, 5.6cqi, 34px); }
/* V hrdinovi leží snímek na tmavém přechodu: silnější záře a měkký dosed. */
.sekce--tmava .snimek__ram { background: linear-gradient(180deg, color-mix(in srgb, var(--wue-plocha) 88%, var(--wue-linka)), var(--wue-plocha)); box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 10px 24px -10px rgba(5,2,18,.6), 0 40px 80px -30px rgba(5,2,18,.75); }
.sekce--tmava .snimek::before { opacity: .55; background: radial-gradient(closest-side, color-mix(in oklab, var(--m-400) 70%, transparent), transparent); }
.snimek--hrdina::before { inset: 10% -12% -14%; opacity: .6; filter: blur(44px); background: radial-gradient(closest-side, color-mix(in oklab, var(--m-300) 90%, transparent), transparent); }
.snimek--hrdina.snimek--displej::after { content: ''; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: -7%; height: 11%; border-radius: 50%; background: rgba(6,2,20,.72); filter: blur(26px); }
/* Uvnitř karty a panelu se záře ořízne o okraj, tak ji držíme při zemi. */
:is(.karta, .tour__panel) .snimek::before { inset: 45% -1% -3%; opacity: .3; filter: blur(18px); }
.karta .snimek__ram { border-radius: clamp(10px, 2cqi, 18px); }
/* Na úzkém displeji běží mobilní větev snímku; poměr se mění s ní, takže
   výška je známá předem a nic se nepřeskládá. */
@media (max-width: 48rem) {
  .snimek--ma-mobil .snimek__plocha { aspect-ratio: 4 / 3; }
}
.stoh-oken { display: grid; gap: var(--m5); }
.sekce--tmava { background: var(--wue-plocha-tmava); color: var(--wue-text-na-tmavem-2); }
.sekce--tmava :is(h2, h3, .vyzva h2) { color: var(--wue-text-na-tmavem); }
.sekce--tmava .hlavicka-sekce > p { color: var(--wue-text-na-tmavem-2); }
.sekce--tmava .hlavicka-sekce > .stitek { color: var(--wue-jiskra); }
.vyzva { display: grid; gap: var(--m6); align-items: center; padding: var(--m7); background: var(--wue-plocha); border: 1px solid var(--wue-linka); border-radius: var(--r-4); }
.vyzva p { color: var(--wue-text-2); }
.sekce--tmava .vyzva { padding: var(--m7) 0 0; border: 0; border-block-start: 1px solid var(--wue-text-na-tmavem-2); background: transparent; }
.sekce--tmava .vyzva p { color: inherit; }
.cesta-sekce, #caste-dotazy { background: var(--wue-plocha); }
.cesta-vizual { margin-block-start: var(--m6); display: grid; gap: var(--m5); }
.cesta-tok { display: flex; flex-wrap: wrap; gap: var(--m2); }
.cesta-tok span { padding: var(--m2) var(--m3); border: 1px solid var(--wue-linka); border-radius: var(--r-1); font-size: var(--t-maly); }
.kroky { counter-reset: krok; }
.krok { display: grid; grid-template-columns: auto 1fr; gap: var(--m2) var(--m5); padding-block: var(--m5); border-block-start: 1px solid var(--wue-linka); }
.krok::before { counter-increment: krok; content: counter(krok, decimal-leading-zero); color: var(--wue-modra); font-variant-numeric: tabular-nums; }
.krok h3 { font-size: var(--t-h4); }
.krok p { grid-column: 2; }
/* Pozadí tady ZÁMĚRNĚ není. Sekce má v šabloně třídu `sekce--tmava`
   a texty v ní jsou barvené „na tmavém“ (viz `#moduly .karta` níž).
   Dřív tu stálo `#moduly { background: var(--wue-plocha); }` — selektor
   přes id přebil `.sekce--tmava` jen v pozadí, barvy textu zůstaly
   světlé, a nadpis sekce i názvy všech tří karet tak byly bílé na
   bílé, tedy úplně neviditelné. */
#moduly .mrizka { gap: 0; }
#moduly .karta { background: transparent; border: 0; border-inline-start: 1px solid var(--wue-linka); border-radius: var(--r-1); box-shadow: none; }
#moduly .karta::after { display: none; }
#cenik > .deleno { align-items: start; }
#cenik .tabulka-obal { grid-column: 1 / -1; }

/* Tabulky se posouvají uvnitř vlastního pojmenovaného regionu. */
.tabulka-obal { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--wue-linka); border-radius: var(--r-3); background: var(--wue-plocha); scrollbar-color: var(--wue-linka-silna) var(--wue-plocha-ticha); }
.tabulka { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-text); line-height: 1.6; }
.tabulka :is(th, td) { padding: var(--m4) var(--m5); text-align: left; vertical-align: top; border-block-end: 1px solid var(--wue-linka); color: var(--wue-text-2); }
.tabulka thead th { background: var(--wue-plocha-modra); color: var(--wue-text); font-weight: 700; }
.tabulka tbody tr:nth-child(even) > * { background: var(--wue-plocha-ticha); }
.tabulka tbody th { color: var(--wue-text); font-weight: 600; }
.tabulka tbody tr:last-child > * { border-block-end: 0; }
.tabulka tbody tr:is(:hover, :focus-within) > * { background: var(--wue-plocha-modra); color: var(--wue-text); }
.tabulka :is(th, td).tabulka__cislo { text-align: right; white-space: nowrap; color: var(--wue-text); }
.tabulka--srovnani td:last-child { font-weight: 600; color: var(--wue-text); }
.tabulka-obal.je-posuvna { border-inline-end: 4px solid var(--wue-modra); }

/* Kalkulačka: okamžitý stav ovladačů, plynulé číslo zajišťuje JS. */
.karta.kalkulacka { gap: var(--m5); padding: var(--m5); container: kalkulacka / inline-size; }
.kalkulacka h2 { font-size: var(--t-h4); }
.kalkulacka__ovladani { display: grid; gap: var(--m5); min-width: 0; }
.nabidka__soucet { display: grid; grid-template-columns: 1fr auto; gap: var(--m2) var(--m4); align-items: center; padding: var(--m4); border-radius: var(--r-2); background: var(--wue-plocha-tmava); color: var(--wue-text-na-tmavem); }
.nabidka__soucet b { font: 600 clamp(1.75rem, 5cqi, 2.25rem)/1.2 var(--p-text); white-space: nowrap; text-align: right; }
.nabidka__soucet em { grid-column: 1 / -1; font-size: var(--t-maly); font-style: normal; color: var(--wue-text-na-tmavem-2); }
.kalkulacka output { font-size: var(--t-h3); font-weight: 600; font-variant-numeric: tabular-nums; }
.kalkulacka .pole > label { display: flex; align-items: center; justify-content: space-between; }
.kalkulacka fieldset > label { display: flex; flex-wrap: nowrap; align-items: start; gap: var(--m3); min-height: 44px; padding: var(--m3); border: 1px solid var(--wue-linka); border-radius: var(--r-2); cursor: pointer; }
.kalkulacka fieldset > label:is(:hover, :focus-within), .kalkulacka fieldset > label:has(:checked) { background: var(--wue-plocha-modra); border-color: var(--wue-modra); }
.kalkulacka fieldset small { display: block; font-size: var(--t-maly); }
.kalkulacka :is(input[type=checkbox], input[type=radio]) { width: 20px; height: 20px; flex: none; }
.kalkulacka input[type=range] { appearance: none; width: 100%; min-height: 48px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
.kalkulacka input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: var(--r-1); background: var(--wue-linka-silna); }
.kalkulacka input[type=range]::-moz-range-track { height: 8px; border-radius: var(--r-1); background: var(--wue-linka-silna); }
.kalkulacka input[type=range]::-moz-range-progress { height: 8px; border-radius: var(--r-1); background: var(--wue-modra); }
.kalkulacka input[type=range]::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; margin-top: calc(-1 * var(--m2)); border: 4px solid var(--wue-plocha); border-radius: var(--r-1); background: var(--wue-modra); box-shadow: var(--stin-1); }
.kalkulacka input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 4px solid var(--wue-plocha); border-radius: var(--r-1); background: var(--wue-modra); }
.obdobi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m2); }
.obdobi label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m2); min-height: 44px; padding: var(--m3); border: 1px solid var(--wue-linka); border-radius: var(--r-2); font-size: var(--t-maly); cursor: pointer; }
.obdobi label:is(:hover, :focus-within), .obdobi label:has(:checked) { background: var(--wue-plocha-modra); border-color: var(--wue-modra); }
/* Zaškrtnuté období už hlásí samotný přepínač, plocha i rámeček. Podtržení
   bylo čtvrtý signál navíc a dělalo z popisku odkaz. */
.obdobi label:has(:checked) { font-weight: 600; }
.plan__odznak { display: inline-block; padding: var(--m1) var(--m2); border-radius: var(--r-1); background: var(--wue-plocha-modra); color: var(--wue-modra); font-size: var(--t-maly); font-weight: 600; }
@container kalkulacka (width < 350px) {
  .nabidka__soucet { grid-template-columns: 1fr; }
  .nabidka__soucet b { justify-self: end; }
  .obdobi { grid-template-columns: 1fr; }
}

/* Formulář a FAQ zachovávají nativní ovládání a původní zpracování. */
.pole { display: grid; gap: var(--m2); }
.pole label { font-size: var(--t-maly); font-weight: 600; }
.pole :is(input, textarea, select) { width: 100%; min-height: 44px; padding: var(--m3); border: 1px solid var(--wue-linka-silna); border-radius: var(--r-2); background: var(--wue-papir); color: var(--wue-text); }
.pole :is([type=checkbox], [type=radio]) { width: auto; min-height: auto; }
.pole small { font-size: var(--t-maly); color: var(--wue-text-3); }
.pole--chyba input { border-color: var(--wue-chyba); }
.formular { display: grid; gap: var(--m5); padding: var(--m5); background: var(--wue-plocha); border: 1px solid var(--wue-linka); border-radius: var(--r-4); box-shadow: var(--stin-2); }
.formular__stopa { grid-column: 1 / -1; }
.formular__stopa label { display: flex; align-items: center; gap: var(--m3); min-height: 44px; }
.hlaska { padding: var(--m4); border: 1px solid; border-radius: var(--r-2); }
.hlaska--chyba { background: var(--wue-chyba-plocha); color: var(--wue-chyba); }
.hlaska--ok { background: var(--wue-hotovo-plocha); color: var(--wue-hotovo); }
.seznam-ano { display: grid; gap: var(--m3); list-style: none; padding: 0; }
.seznam-ano li { display: grid; grid-template-columns: auto 1fr; gap: var(--m3); }
.seznam-ano li::before { content: '✓'; color: var(--wue-hotovo); font-weight: 600; }
.faq { border-block-start: 1px solid var(--wue-linka); }
.faq details { padding-block: var(--m5); border-block-end: 1px solid var(--wue-linka); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--m4); min-height: 44px; list-style: none; font: 700 var(--t-vetsi)/1.5 var(--p-nadpis); color: var(--wue-text); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-size: var(--t-h3); color: var(--wue-modra); }
.faq details[open] summary::after { content: '−'; }
.faq summary:is(:hover, :focus-visible), .faq details[open] summary { color: var(--wue-modra); }
.faq details > div { max-width: 66ch; padding-block-start: var(--m4); }
.faq details > div > * + * { margin-block-start: var(--m3); }

/* Podstránky: souvislý text je užší než obrazové materiály. */
.drobecky { padding-block: var(--m5); font-size: var(--t-maly); color: var(--wue-text-3); }
.drobecky ol { display: flex; flex-wrap: wrap; gap: var(--m2); list-style: none; padding: 0; }
.drobecky a { display: inline-flex; align-items: center; min-height: 44px; }
.drobecky li + li::before { content: '/'; margin-inline-end: var(--m2); }
.drobecky + main > .sekce:first-child { padding-block-start: var(--m7); }
.detail-rozvrzeni, .clanek-rozvrzeni { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--m8); align-items: start; }
.proza { min-width: 0; max-width: 66ch; font-family: var(--p-text); font-size: var(--t-text); line-height: 1.62; }
.proza > * + * { margin-block-start: var(--m4); }
.proza h1 { max-width: 23ch; font-size: clamp(2.625rem, 1.5rem + 3vw, 4rem); }
.proza h1 + p { font-size: var(--t-vetsi); line-height: 1.6; margin-block-start: var(--m5); }
.proza :is(h2, h3) { margin-block-start: var(--m7); }
.proza :is(h2, h3, h4) + :is(p, ul, ol) { margin-block-start: var(--m4); }
.proza :is(ul, ol) { display: grid; gap: var(--m2); padding-inline-start: var(--m5); }
.proza hr { border: 0; border-block-start: 1px solid var(--wue-linka); margin-block: var(--m8); }
.proza :is(figure, .tabulka-obal, .ramec) { margin-block: var(--m6); }
.proza blockquote { padding-inline-start: var(--m5); border-inline-start: 3px solid var(--wue-modra); }
.proza code { font-family: var(--p-kod); font-size: var(--t-maly); padding: var(--m1); border-radius: var(--r-1); background: var(--wue-plocha-ticha); }
.ramec { padding: var(--m5); border: 1px solid var(--wue-linka); border-inline-start: 3px solid var(--wue-modra); border-radius: var(--r-3); background: var(--wue-plocha); }
.ramec > strong:first-child { display: block; margin-block-end: var(--m2); }
.obsah-clanku { position: sticky; top: var(--m10); display: grid; gap: var(--m1); max-height: calc(100dvh - var(--m11)); overflow: auto; padding-inline-start: var(--m5); border-inline-start: 1px solid var(--wue-linka); }
.obsah-clanku a { display: flex; align-items: center; min-height: 44px; padding: var(--m2) var(--m3); font-size: var(--t-maly); color: var(--wue-text-2); text-decoration: none; }
.obsah-clanku a:is(:hover, [aria-current=true]) { color: var(--wue-modra); background: var(--wue-plocha-modra); }
.blog-seznam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m5); }
/* Tři doporučené články pod textem — na dva sloupce by poslední visel sám. */
.blog-seznam--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clanek-karta { display: grid; gap: var(--m4); align-content: start; overflow: hidden; padding: var(--m5); border: 1px solid var(--wue-linka); border-radius: var(--r-3); background: var(--wue-plocha); text-decoration: none; }
.clanek-karta :is(h2, h3) { font-size: var(--t-h3); }
.clanek-karta p { color: var(--wue-text-2); }
.clanek-karta:is(:hover, :focus-visible) { border-color: var(--wue-modra); }
.clanek-karta:is(:hover, :focus-visible) :is(h2, h3) { color: var(--wue-modra); }

/* --- Ilustrace k článkům ------------------------------------------------
   Šest motivů ze stejné mřížky. Barvy jdou z rolí, ne z pevných hodnot,
   proto se dá týž motiv na kartě ztlumit a nad článkem zesílit, aniž by
   existoval dvakrát. */
.ilustrace { display: block; inline-size: 100%; block-size: auto; }
.ilustrace .ilu-cary { fill: none; stroke: var(--wue-linka-silna); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ilustrace .ilu-cara-silna { stroke: var(--wue-modra); stroke-width: 2.5; }
.ilustrace .ilu-plochy { fill: var(--wue-plocha-modra); stroke: var(--wue-linka); stroke-width: 1.5; }
.ilustrace .ilu-drobne { fill: var(--wue-plocha); stroke: var(--wue-linka-silna); }
.ilustrace .ilu-panely { fill: var(--wue-modra-ticha); stroke: var(--wue-linka-silna); }
/* Jeden akcent na motiv. Dva už nejsou důraz, ale výzdoba. */
.ilustrace .ilu-akcent { fill: var(--wue-modra-ziva); stroke: none; }
.ilustrace .ilu-akcent-bod { fill: var(--wue-modra-ziva); }
.ilustrace .ilu-akcent-tah { fill: none; stroke: var(--wue-modra-ziva); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Pás nad textem karty. `aspect-ratio` drží všechny karty stejně vysoké
   i když mají různě dlouhý nadpis. */
.clanek-karta__ilustrace { display: grid; place-items: center; overflow: hidden; margin: calc(-1 * var(--m5)) calc(-1 * var(--m5)) 0; padding: var(--m5) var(--m6); border-block-end: 1px solid var(--wue-linka); background: linear-gradient(180deg, var(--wue-plocha-modra), var(--wue-plocha)); aspect-ratio: 16 / 5; }
.clanek-karta__ilustrace .ilustrace { max-inline-size: 215px; }
/* Na kartě je ilustrace doprovod, ne téma — proto tišší. */
.clanek-karta__ilustrace .ilu-cary { stroke: var(--wue-linka); }
.clanek-karta:is(:hover, :focus-visible) .clanek-karta__ilustrace { background: linear-gradient(180deg, var(--wue-modra-ticha), var(--wue-plocha)); }

/* Nad článkem má motiv nahradit chybějící snímek, takže dostane šířku prózy. */
.clanek-ilustrace { display: grid; place-items: center; margin-block: var(--m6); padding: var(--m6); border: 1px solid var(--wue-linka); border-radius: var(--r-3); background: linear-gradient(180deg, var(--wue-plocha-modra), var(--wue-plocha)); }
.clanek-ilustrace .ilustrace { max-inline-size: 380px; }

.meta { display: flex; flex-wrap: wrap; gap: var(--m2) var(--m4); font-size: var(--t-maly); color: var(--wue-text-3); }
.je-clanek .meta { margin-block-end: var(--m5); }

/* Patička a pomocná rozhraní. */
/* Patička je rejstřík, ne další sekce: hustý rytmus, tiché linky, nic navíc.
   Řádek odkazu měl 52 px (44 px dotykový cíl + 8 px mezera) při textu 14 px —
   na myši z toho byl žebřík s dírami. Dotykový cíl je skutečné pravidlo, ale
   platí tam, kde se opravdu klepe prstem: pod 1100 px, kde se web stejně
   přepíná do mobilní navigace. Nad tím stačí, aby řádek obepnul text. */
.paticka { padding-block: var(--m8) var(--m6); background: var(--wue-plocha-tmava); color: var(--wue-text-na-tmavem-2); font-size: var(--t-maly); }
.paticka a { display: inline-block; min-height: 0; min-width: 0; padding-block: var(--m1); color: var(--wue-text-na-tmavem); line-height: 1.45; }
/* Odsazení seznamů: `ul, ol { padding-inline-start: var(--m5) }` je mimo
   vrstvu, takže přebije reset `ul[class] { padding: 0 }` z @layer reset.
   V patičce z toho bylo 24 px, o které odkazy utekly doprava od vlastního
   nadpisu — sloupec neměl rovnou levou hranu a přišel o čtvrtinu šířky. */
.paticka .stoh { padding-inline-start: 0; }
.paticka .stoh--tesny { gap: 0; }
.paticka__nadpis { font: 700 var(--t-maly)/1.5 var(--p-nadpis); color: var(--wue-text-na-tmavem); letter-spacing: .005em; margin-block-end: var(--m2); }
.paticka .tise { color: var(--wue-text-na-tmavem-2); }
.paticka__znacka p { max-width: 30ch; }
/* Oborů je dvanáct. V jednom sloupci z nich byla věž, která nad ostatní
   přečnívala o dvě stě pixelů mrtvého místa; ve dvou podsloupcích je z toho
   šest řádků jako všude jinde. `columns` potřebuje blokový tok, proto se tu
   ruší mřížka, kterou nese .stoh. */
.paticka__seznam--dva li { break-inside: avoid; }
/* Linky v patičce dělila barva textu (#D6CDF5). Jako 1px pravítko na tmavé
   fialové to byl svítící pruh, ne předěl. */
.paticka__spodek { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--m3) var(--m5); margin-block-start: var(--m6); padding-block-start: var(--m4); border-block-start: 1px solid color-mix(in srgb, var(--wue-text-na-tmavem) 16%, transparent); }
.paticka__firma { margin-block-start: var(--m6); padding-block-start: var(--m5); border-block-start: 1px solid color-mix(in srgb, var(--wue-text-na-tmavem) 16%, transparent); }
.fakturacni-udaje { display: grid; gap: var(--m4); overflow-wrap: anywhere; }
.paticka__firma .fakturacni-udaje { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m6); }
/* Nabídka instalace na plochu. Pořadí shora dolů je pořadí důležitosti:
   co to je, proč to chtít, na čem to běží, jedna plná akce, tichý návod.
   Zavření je ikona v rohu — zavřít není nabídka, je to únik. */
.pwa-nabidka { position: fixed; z-index: 60; inset-block-end: var(--m4); inset-inline-end: var(--m4); width: 360px; max-width: calc(100% - 2 * var(--m4)); display: grid; gap: var(--m3); padding: var(--m5); padding-inline-end: var(--m7); border: 1px solid var(--wue-linka); border-radius: var(--r-3); background: var(--wue-plocha); color: var(--wue-text); box-shadow: var(--stin-3); }
.pwa-nabidka__nadpis { font: 700 var(--t-h4)/1.25 var(--p-nadpis); letter-spacing: -.012em; color: var(--wue-text); }
.pwa-nabidka__popis { font-size: var(--t-maly); line-height: 1.5; color: var(--wue-text-2); }
/* Dva piktogramy se jménem platformy. Vlastní kresba, ne cizí ochranné
   známky: obrázek řekne „telefon a tablet“, text řekne „Android, iPhone“. */
.pwa-zarizeni { display: flex; flex-wrap: wrap; gap: var(--m2) var(--m5); padding: 0; list-style: none; padding-block: var(--m1); border-block: 1px solid var(--wue-linka-ticha); }
.pwa-zarizeni li { display: flex; align-items: center; gap: var(--m2); font-size: var(--t-mikro); font-weight: 700; color: var(--wue-text-2); }
.pwa-zarizeni__ikona { display: grid; place-items: center; flex: none; color: var(--wue-modra); }
.pwa-zarizeni__ikona svg { inline-size: 22px; block-size: 22px; }
/* Na iPhonu se tlačítko nenabízí, instalaci dělá uživatel přes Sdílet.
   Ten návod je pak hlavní obsah karty, tak ať má svou plochu. */
.pwa-nabidka__navod { padding: var(--m3) var(--m4); border-radius: var(--r-2); background: var(--wue-plocha-modra); font-size: var(--t-maly); line-height: 1.45; color: var(--wue-text); }
.pwa-nabidka__odkaz { justify-self: center; padding-block: var(--m1); font-size: var(--t-maly); font-weight: 600; color: var(--wue-text-2); }
.pwa-nabidka__zavrit { position: absolute; inset-block-start: var(--m2); inset-inline-end: var(--m2); display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: var(--r-2); color: var(--wue-text-3); transition: color var(--pohyb-rychle), background-color var(--pohyb-rychle); }
.pwa-nabidka__zavrit svg { inline-size: 16px; block-size: 16px; }
.pwa-nabidka__zavrit:hover { color: var(--wue-text); background: var(--wue-plocha-ticha); }
.lupa { width: min(96%, 1600px); max-height: 94dvh; padding: var(--m5); border: 1px solid var(--wue-linka); border-radius: var(--r-4); background: var(--wue-plocha); color: var(--wue-text); box-shadow: var(--stin-4); }
.lupa::backdrop { background: color-mix(in srgb, var(--wue-plocha-tmava) 80%, transparent); }
.lupa__obrazek img { width: 100%; height: auto; border-radius: var(--r-2); }
.lupa figcaption { margin-block-start: var(--m4); }
.lupa form { display: flex; justify-content: end; margin-block-end: var(--m4); }
/* Náhradní náčrt využívá stejné role a neovlivňuje systém snímků. */

/* Rozvržení se zmenšuje podle obsahu, zařízení nikdy nepřetéká z obrazce. */
@media (min-width: 1100px) {
  .hero > .deleno { grid-template-columns: 1fr 1.15fr; gap: var(--m6); }
  .vyzva { grid-template-columns: 1.4fr auto; }
}
@media (min-width: 640px) {
  .formular--dvojice { grid-template-columns: 1fr 1fr; }
  .formular--dvojice > .pole--siroke { grid-column: 1 / -1; }
}
@media (min-width: 1600px) { :root { --sekce: var(--m11); } }
@media (max-width: 1279px) {
  .obal { padding-inline: var(--m6); }
  .hlavicka__obal { gap: var(--m4); }
  .hlavicka__akce .tl--druhe { display: none; }
  .detail-rozvrzeni, .clanek-rozvrzeni { gap: var(--m6); }
}
@media (max-width: 1099px) {
  :root { --hlavicka-vyska: 56px; }
  .logo { width: 96px; min-width: 96px; }
  .hlavicka__akce { margin-inline-start: var(--m2); }
  .hlavicka__akce .tl { min-height: 44px; }
  .hero .zarizeni-scena { width: 100%; max-width: 840px; margin-inline: auto; }
  .hero .stoh { max-width: 66ch; }
  .prepinac { display: inline-flex; margin-inline-start: auto; }
  .nav { width: 100%; }
  .hlavicka__obal { flex-wrap: wrap; padding-block: var(--m2); }
  .js .nav { display: none; position: absolute; top: 100%; left: 0; padding: var(--m5); background: var(--wue-plocha); border-block-end: 1px solid var(--wue-linka); box-shadow: var(--stin-2); }
  .js .nav[data-otevreno] { display: block; }
  .js .nav ul { align-items: stretch; flex-direction: column; }
  .js .nav a { display: flex; }
  .je-home .hlavicka .nav a { color: var(--wue-text); }
  html:not(.js) .prepinac { display: none; }
  html:not(.js) .nav { order: 4; }
  html:not(.js) .nav ul { flex-wrap: wrap; }
}
@media (max-width: 800px) {
  .tour, .detail-rozvrzeni, .clanek-rozvrzeni, .obory-uvod, .obory-dukaz { grid-template-columns: 1fr; gap: var(--m6); }
  .tour__menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m4); }
  .tour__volba { padding: var(--m2); }
  .tour__skupina h3 { padding-inline: var(--m2); }
  .obory-seznam { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento .karta:first-child { grid-template-columns: 1fr; padding: var(--m5); }
  .bento .karta:first-child .snimek { grid-column: 1; grid-row: auto; }
  .obsah-clanku { position: static; max-height: none; border: 1px solid var(--wue-linka); border-radius: var(--r-3); padding: var(--m5); }
  .tabulka { min-width: 560px; }
  .paticka__firma .fakturacni-udaje { grid-template-columns: 1fr; gap: var(--m4); }
}
@media (max-width: 540px) {
  .obal { padding-inline: var(--m5); }
  .hlavicka__obal { gap: var(--m2); }
  .hlavicka__akce { gap: var(--m1); margin-inline-start: var(--m1); }
  .hlavicka__akce .tl { max-width: 128px; padding-inline: var(--m3); text-align: center; }
  .hero { padding-block-start: var(--m7); }
  .hero h1 { font-size: 2.625rem; }
  .hero__ciselnik { gap: var(--m4); }
  .hero__ciselnik .cislo { flex: 1 1 88px; }
  .cislo b { font-size: var(--t-vetsi); }
  .zarizeni-scena { padding: var(--m4) var(--m4) var(--m8); }
  .zarizeni-scena .snimek--telefon { width: 30cqi; }
  .obory-seznam, .bento, .blog-seznam, .blog-seznam--tri { grid-template-columns: 1fr; }
  .obory-seznam > :is(a, span) { min-height: 48px; }
  .vypocet { grid-template-columns: 1fr; }
  .bento .karta:not(:first-child) { gap: var(--m3); }
  .vyzva { padding: var(--m5); }
  #moduly .karta { border-inline-start: 0; border-block-start: 1px solid var(--wue-linka); }
}

/* Pohyb je pouze nadstavba. Bez podpory časové osy zůstává vše vidět. */
@keyframes wue-nastup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wue-odhaleni { from { opacity: .25; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wue-snimek { from { opacity: .25; transform: translateY(22px) scale(.975); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .zarizeni-scena { animation: wue-nastup var(--pohyb-hravy) both; }
  @supports (animation-timeline: view()) and (animation-range: entry 0% entry 100%) {
    .sekce .hlavicka-sekce, .krok {
      animation: wue-odhaleni auto linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    .sekce .hlavicka-sekce:focus-within { animation: none; }
    /* Karty a dlaždice se odhalují samy podle toho, kde jsou na stránce —
       vlastní časová osa každého prvku dělá přirozené prostřídání, takže
       na to není potřeba ani řádek JS. */
    :is(.karta, .plan, .vyzva, .nabidka, .clanek-karta, .tabulka-obal, .obory-seznam > :is(a, span)) {
      animation: wue-odhaleni auto linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    /* Snímek se zvedne, až když na něj uživatel dojede. Hýbe se jen
       opacity a transform, takže je to práce kompozitoru a žádný posun
       rozvržení — CLS zůstává nula. Hrdinu neanimujeme, ten je hned vidět. */
    .snimek:not(.snimek--hrdina) {
      animation: wue-snimek auto linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: cubic-bezier(.22,.7,.25,1); }
  .js .nav[data-otevreno], .lupa[open] { transition: opacity var(--pohyb-klidne), transform var(--pohyb-klidne); }
  @starting-style {
    .js .nav[data-otevreno], .lupa[open] { opacity: 0; transform: translateY(8px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .tl--hlavni:hover { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(root) { animation: none !important; }
  @view-transition { navigation: none; }
}

/* Nadtitulky a rozvržení používané ve sdílených šablonách. */
.uvod-stitek { display: inline-flex; align-items: center; gap: var(--m2); color: var(--wue-jiskra-text); font: 800 var(--t-maly)/1.4 var(--p-nadpis); margin-block-end: var(--m2); }
.uvod-stitek::before { content: ''; width: 8px; height: 8px; border-radius: var(--r-1); background: currentColor; flex: none; }
.stitek--akcent { color: var(--wue-jiskra-text); padding: var(--m2) var(--m4); border-radius: var(--r-1); background: var(--wue-jiskra-ticha); }
.nabidka { display: grid; gap: var(--m5); padding: var(--m6); border: 1px solid var(--wue-linka); border-radius: var(--r-4); background: var(--wue-plocha); box-shadow: var(--stin-2); }
.produkt-prehled { overflow: hidden; }
.stoh-oken--perspektiva { perspective: 1200px; padding: var(--m5); }
.stoh-oken--perspektiva > .snimek { transform: rotateX(2.5deg); transform-origin: center top; }
@media (min-width: 1100px) {
  .deleno--54 { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
  #cenik > .deleno--54 > .tabulka-obal { grid-column: 1 / -1; }
}
.detail-obsah { border-inline-start: 1px solid var(--wue-linka); padding-inline-start: var(--m5); }

/* Stránka se všemi otázkami. Okruhy odděluje mřížka s mezerou, ne margin:
   `.faq` má vlastní linky nahoře i dole a svislé marginy sousedních bloků
   by se slily do jedné — nadpis okruhu by pak seděl natěsno na poslední
   odpovědi okruhu předchozího. */
.faq-skupiny { display: grid; gap: var(--m8); }
.faq-skupina > h2 { margin-block-end: var(--m5); }
@media (max-width: 800px) {
  /* Ve sloupci pod sebou by rozcestník okruhů skončil až za dvaadvaceti
     otázkami, tedy přesně tam, kde už ho nikdo nepotřebuje. */
  .detail-rozvrzeni > .faq-skupiny { order: 2; }
}

/* Barevné vstupy: stejné tři značkové přechody, posunuté pořadí v sekcích. */
.ikona-kruh { display: inline-grid; place-items: center; flex: none; inline-size: 56px; block-size: 56px; border-radius: var(--r-4); background: var(--prechod-ikona-a); color: var(--wue-text-na-tmavem); box-shadow: var(--stin-barevny); }
.ikona-kruh svg { inline-size: 24px; block-size: 24px; }
:is(.karta, .krok, .tour__panel, .bolesti li, .seznam-ano li):nth-child(3n + 2) .ikona-kruh { background: var(--prechod-ikona-b); }
:is(.karta, .krok, .tour__panel, .bolesti li, .seznam-ano li):nth-child(3n) .ikona-kruh { background: var(--prechod-ikona-c); }
#moduly .karta:nth-child(3n + 1) .ikona-kruh { background: var(--prechod-ikona-b); }
#moduly .karta:nth-child(3n + 2) .ikona-kruh { background: var(--prechod-ikona-c); }
#moduly .karta:nth-child(3n) .ikona-kruh { background: var(--prechod-ikona-a); }
.bento .karta:not(:first-child) .ikona-kruh { grid-row: 1 / span 3; }
.tour__text > .ikona-kruh { margin: 0; }
.tour__skupina h3 { color: var(--wue-modra); }
.tour__skupina:nth-child(2n) h3 { color: var(--wue-jiskra-text); }
.krok { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: start; }
.krok::before { grid-column: 3; grid-row: 1 / span 2; font: 800 var(--t-h2)/1 var(--p-nadpis); color: var(--wue-jiskra-text); }
.krok > .ikona-kruh { grid-column: 1; grid-row: 1 / span 2; }
.krok h3 { grid-column: 2; grid-row: 1; }
.krok p { grid-column: 2; grid-row: 2; }
.bolesti ul { padding: 0; list-style: none; display: grid; gap: var(--m5); }
.bolesti li, .je-home .seznam-ano li { display: flex; align-items: center; gap: var(--m4); }
.je-home .seznam-ano li::before { display: none; }
.je-home .seznam-ano li { padding-inline-start: 0; }
.hero__ciselnik .cislo b { color: var(--wue-jiskra); font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.15; }
.nabidka__soucet b { color: var(--wue-jiskra); }
#cenik .tabulka__cislo { color: var(--wue-modra); font-size: var(--t-h4); font-weight: 700; }
#moduly .karta { border-color: var(--wue-text-na-tmavem-2); }
#moduly .karta p, #moduly .karta .tise { color: var(--wue-text-na-tmavem-2); }
.sekce--tmava .uvod-stitek { color: var(--wue-jiskra); }
.sekce--tmava .stitek--akcent { color: var(--wue-jiskra); background: transparent; padding-inline: 0; }
.je-home #demo h2 { color: var(--wue-modra); }
@media (max-width: 540px) {
  .krok { grid-template-columns: 56px minmax(0, 1fr); gap: var(--m4); }
  .krok::before { grid-column: 1; grid-row: 2; font-size: var(--t-h4); text-align: center; }
  .krok > .ikona-kruh { grid-row: 1; }
  .krok p { grid-row: 2; }
  #cenik .tabulka__cislo { font-size: var(--t-vetsi); }
}
.hero .stitek--akcent { background: transparent; padding: 0; }
@media (max-width: 800px) {
  .detail-obsah { border-inline-start: 0; padding-inline-start: var(--m5); }
}

/* Třetí kolo: kompaktní rytmus úvodní stránky a vyvážené sloupce. */
.je-home { --sekce: var(--m7); }
.odkaz-podrobne { justify-self: start; font-weight: 700; }
#moduly > .obal, #caste-dotazy > .obal { display: block; }
#moduly .hlavicka-sekce, #caste-dotazy .hlavicka-sekce { max-width: 66ch; }
.crm-srovnani__mrizka { display: grid; gap: var(--m5); align-items: start; }
.crm-srovnani .tabulka { table-layout: fixed; min-width: 0; }
#caste-dotazy .faq { display: grid; gap: 0 var(--m6); align-items: start; border: 0; }
#caste-dotazy .faq details { border-block-start: 1px solid var(--wue-linka); border-block-end: 0; padding-block: var(--m4); }
@media (min-width: 801px) {
  .tour__bok { position: sticky; top: var(--m5); max-height: calc(100dvh - var(--m7)); overflow-y: auto; }
  .crm-srovnani__mrizka, #caste-dotazy .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Úvod nad vysokým obsahem smí být krátký jen tehdy, když jej doprovází. */
  .obory-uvod > .hlavicka-sekce, .obory-dukaz > div:first-child { position: sticky; top: var(--m5); }
}

/* Text karty má vlastní řádky; výška snímku neroztahuje mezery mezi nimi. */
.karta__obsah { display: grid; gap: var(--m5); align-content: start; }
.bento .karta:not(:first-child) { display: block; }
.bento .karta:not(:first-child) .karta__obsah { grid-template-columns: auto minmax(0, 1fr); gap: var(--m5); }
.bento .karta:first-child { align-items: start; }
.bento .karta:first-child .snimek { grid-row: 1; }
.bento .karta:first-child .karta__obsah > * { grid-column: 1; }
@media (max-width: 800px) {
  .bento .karta:first-child .snimek { grid-row: auto; }
}

/* === Výzva k založení účtu (nahradila kontaktní formulář) ============== */
.registrace { gap: var(--m5); }
.registrace .tl { justify-self: stretch; text-align: center; }
.registrace__telefon { margin-block-start: var(--m2); padding-block-start: var(--m4); border-block-start: 1px solid var(--wue-linka); font-size: var(--t-maly); color: var(--wue-text-2); }

/* === Lišta souhlasu s měřením ========================================== */
/* Dole, přes celou šířku, nad obsahem. Záměrně bez tmavých vzorců: obě
   tlačítka mají stejnou váhu a odmítnutí je jeden klik. Na mobilu se tlačítka
   zarovnají pod text, ať se dají trefit prstem (48 px má .tl už samo). */
.souhlas { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--m4); padding: var(--m4) var(--m5); border-block-start: 1px solid var(--wue-linka); background: var(--wue-plocha); box-shadow: 0 -8px 24px -12px rgba(39,31,99,.25); }
.souhlas[hidden] { display: none; }
.souhlas__text { max-width: 62ch; margin: 0; font-size: var(--t-maly); color: var(--wue-text-2); }
.souhlas__tlacitka { display: flex; flex-wrap: wrap; gap: var(--m3); }
@media (max-width: 40rem) { .souhlas { justify-content: flex-start; } .souhlas__tlacitka { inline-size: 100%; } .souhlas__tlacitka .tl { flex: 1 1 auto; } }

/* === Čtvrté kolo: podtržení jako chování, patička jako rejstřík ========
   Zadání znělo: „to podtržení pod linky je humus, dal bych hezké hover“.
   Podtržení u všech odkazů naráz dělalo z každého seznamu šrafovanou plochu.
   Teď je výchozí stav čistý a čára je odměna za to, že na odkaz ukážeš.
   Dvě provedení, obě se stejným časováním, takže působí jako jedna rodina:

   1. VYJÍŽDĚJÍCÍ ČÁRA — tam, kde se odkaz vejde na jeden řádek (navigace,
      drobečky, samostatné odkazy). Hýbe se jen transform, což je práce
      kompozitoru: žádné překreslení textu, žádný posun rozvržení.
   2. NAJÍŽDĚJÍCÍ PODTRŽENÍ — v patičce, kde se názvy článků lámou do dvou
      řádků. Absolutně umístěná čára by u zalomeného odkazu vedla přes celou
      šířku pod krátkým druhým řádkem; text-decoration-color kopíruje text
      přesně, a protože je to barva, dá se plynule přejet.
   Kdo má vypnutý pohyb, dostane obojí skokem — čára je informace, ne efekt,
   tak nesmí zmizet. O to se stará globální pravidlo prefers-reduced-motion. */

:is(.nav a, .nav__text, .drobecky a, .odkaz-podrobne, .pwa-nabidka__odkaz) {
  position: relative;
  text-decoration: none;
  transition: color var(--pohyb-rychle);
}
:is(.nav a, .nav__text, .drobecky a, .odkaz-podrobne, .pwa-nabidka__odkaz)::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: var(--podtrzeni-dno, 0px);
  height: 1px;
  background: currentColor;
  opacity: .75;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--pohyb-klidne);
}
:is(.nav a, .drobecky a, .odkaz-podrobne, .pwa-nabidka__odkaz):is(:hover, :focus-visible)::after { transform: scaleX(1); }
/* Čára patří pod text, ne na dno dotykového cíle — proto se dno ladí
   pro každý kontext zvlášť podle toho, jak vysoká je ta neviditelná plocha. */
.nav a { --podtrzeni-dno: 9px; }
.drobecky a { --podtrzeni-dno: 10px; }
.odkaz-podrobne { --podtrzeni-dno: 10px; }
.pwa-nabidka__odkaz { --podtrzeni-dno: 11px; }
/* Odkaz na ceník nese štítek s cenou. Čára patří pod slovo, ne pod štítek —
   přes zakulacený štítek vypadala jako přeškrtnutí. Proto ji u tohohle
   jednoho odkazu nese vnitřní .nav__text, který obepíná jen text. */
.nav a:has(.nav__cena)::after { content: none; }
.nav__text { display: inline-block; --podtrzeni-dno: -3px; }
.nav a:is(:hover, :focus-visible, [aria-current]) .nav__text::after { transform: scaleX(1); }
.nav a[aria-current]::after { transform: scaleX(1); }
.pwa-nabidka__odkaz:is(:hover, :focus-visible) { color: var(--wue-text); }
.odkaz-podrobne:is(:hover, :focus-visible) { color: var(--wue-fialova); }

/* Patička: bílý text na fialové nemá kam posunout barvu, aniž by ztratil
   kontrast. Posune se tedy podtržení — do jiskry — a celý odkaz o tři pixely
   doprava. Při přejetí prstem po sloupci z toho je vlna, a ta sloupci dodá
   ten pohyb, který mu chyběl. */
.paticka a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-color var(--pohyb-klidne), translate var(--pohyb-rychle); }
.paticka a:is(:hover, :focus-visible) { text-decoration-color: var(--wue-jiskra); translate: 3px 0; }
.paticka .logo:is(:hover, :focus-visible) { translate: 0; text-decoration-color: transparent; }

/* Rozvržení patičky. Nad 1100 px má značka vlastní sloupec a obory se lámou
   do dvou podsloupců; níž jde značka přes celou šířku a odkazy se skládají
   do čtyř, tří a nakonec dvou sloupců, aby nikde nevznikl hadí sloupec. */
@media (min-width: 1100px) {
  /* Stopy jsou vyměřené podle nejdelšího odkazu v každém sloupci (změřeno
     v prohlížeči, ne odhadem): 137, 210, 2x157 a 159 px. Součet i s mezerami
     sedí do 1112 px obsahu, takže se v patičce neláme ani jeden název. */
  .paticka .mrizka--4 { grid-template-columns: 1.15fr .82fr 1.2fr 1.9fr .95fr; gap: var(--m6); }
  .paticka__seznam--dva { display: block; columns: 2; column-gap: var(--m5); }
}
@media (max-width: 1099px) {
  .paticka a { min-height: 44px; align-content: center; }
  .paticka .mrizka--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--m6) var(--m5); }
  .paticka__znacka { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .paticka .mrizka--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .paticka { padding-block: var(--m7) var(--m5); }
  .paticka .mrizka--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Na telefonu zabírala karta třetinu obrazovky. Užší vzduch, stejná hierarchie. */
  .pwa-nabidka { gap: var(--m2); padding: var(--m4); padding-inline-end: var(--m6); }
}

/* Nabídka instalace se objeví až po projevení zájmu — tedy uprostřed čtení.
   Když se vysune zdola, čtenář pochopí, že přišla teď, a nemusí ji hledat.
   Běží to na @starting-style, takže JS zůstal nedotčený. */
@media (prefers-reduced-motion: no-preference) {
  .pwa-nabidka { transition: opacity var(--pohyb-klidne), translate var(--pohyb-klidne); }
  @starting-style { .pwa-nabidka { opacity: 0; translate: 0 var(--m5); } }
}