/*
Theme Name:       Vědomé Žití Theme
Theme URI:        https://www.vedomeziti.cz
Version:          1.3.0
Requires at least: 6.9
Requires PHP:     8.1
Description:      Světlina – šablona webu Vědomé žití. Vlastní bloky (cena, storno, panely, kroky, ilustrace, pás frází, adresa), styly bloků a vzory stránek. Ceny, délky, storno, kontakt a barvy: Nastavení → Vědomé žití.
Text Domain:      vedome-ziti-theme
*/

/* =====================================================================
 * GLOBÁLNÍ ZÁKLAD – tokeny, typografie, navigace, patička, rozvržení.
 *
 * Systém: Světlina (design-system-svetlina.md) + Úpravy 1.3 + dodatek grafika.
 * Tři pravidla, ze kterých plyne skoro všechno ostatní:
 *   1. Plocha nesmí obsahovat jinou plochu.
 *   2. Každá svislá mezera je jedna hodnota ze škály --vz-m1…--vz-m10.
 *   3. Akcentní barva nese jen to, co je klikatelné.
 *
 * Zlomy jsou na celém webu jen tři:
 *   max-width: 559px    mobil
 *   max-width: 919px    mobil + tablet
 *   min-width: 920px    desktop      (+ min-width: 1200px velký desktop)
 * Nikde jinde se nová šířka nezavádí. Kdyby ji komponenta potřebovala,
 * je to signál, že potřebuje jiné rozvržení – ne vlastní zlom.
 *
 * Styly bloků se načítají jen tam, kde je blok použitý:
 *   assets/css/jadro/<blok>.css – core bloky a jejich styly (Tlačítko, Seznam …)
 *   bloky/<blok>/style.css   – bloky šablony (Cena, Storno, Panely …)
 *   assets/css/ilustrace.css – animace ilustrací
 * ===================================================================== */

:root {
    /* ── Barvy: výchozí hodnoty. Přepisují se z Nastavení → Vědomé žití ──
       Šest barev, nic víc. Akcent nese odkaz, focus, hover tlačítka a znak +
       u rozklikávacích témat – nikde jinde se nepoužívá. */
    --vz-papir: #F3F4F0;      /* plocha stránky */
    --vz-plocha: #E8EAE3;     /* klidnější pruh sekce */
    --vz-inkoust: #16222B;    /* text, tmavé sekce, primární tlačítko */
    --vz-inkoust-2: #5B6771;  /* vedlejší text, popisky */
    --vz-linka: #D5D9D0;      /* vlasová linka místo karet */
    --vz-akcent: #B8430F;     /* jen to, co je klikatelné */
    /* RGB kanály pro průhlednosti – generuje je nastavení, tady jen záloha */
    --vz-papir-rgb: 243, 244, 240;
    --vz-plocha-rgb: 232, 234, 227;
    --vz-inkoust-rgb: 22, 34, 43;
    --vz-akcent-rgb: 184, 67, 15;

    /* ── Zpětná kompatibilita ──────────────────────────────────────────
       Názvy z Nádechu (1.2). Zůstávají, aby starší obsah, SVG ilustrace
       a bloky šablony dál kreslily správně – jen teď ukazují na Světlinu.
       V novém kódu se nepoužívají. */
    --vz-oranz: var(--vz-akcent);
    --vz-oranz-rgb: var(--vz-akcent-rgb);
    --vz-oranz-tmava: var(--vz-akcent);
    --vz-oranz-svetla: color-mix(in srgb, var(--vz-akcent) 10%, var(--vz-papir));
    --vz-zelen: var(--vz-akcent);
    --vz-zelen-rgb: var(--vz-akcent-rgb);
    --vz-zelen-tmava: var(--vz-inkoust-2);
    --vz-salvej: var(--vz-plocha);
    --vz-salvej-rgb: var(--vz-plocha-rgb);
    --vz-salvej-svetla: var(--vz-plocha);
    --vz-mlha: var(--vz-plocha);
    --vz-mlha-modra: color-mix(in srgb, var(--vz-papir) 72%, var(--vz-inkoust));
    --vz-bily: var(--vz-papir);
    --vz-bily-rgb: var(--vz-papir-rgb);
    --vz-karta: var(--vz-papir);
    --vz-papir-2: var(--vz-plocha);
    --vz-inkoust-jemny: var(--vz-inkoust-2);

    /* ── Písmo ──────────────────────────────────────────────────────────
       Fraunces je variabilní (osy opsz + wght), takže H1 i H3 vypadají jako
       jedno písmo. Manrope má vyšší střední výšku než Outfit – na mobilu
       v 17px čitelnější. */
    --vz-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --vz-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ── Míry textu: aplikují se na prvek, ne na obal ── */
    --vz-mira: 62ch;          /* běžný text */
    --vz-mira-perex: 50ch;    /* perex – větší písmo, užší blok */
    --vz-mira-nadpis: 20ch;   /* H1 */
    --vz-mira-h2: 24ch;

    /* ── Škála mezer: každá svislá mezera na webu je jedna z těchto ── */
    --vz-m1: 4px;  --vz-m2: 8px;   --vz-m3: 12px; --vz-m4: 16px;
    --vz-m5: 24px; --vz-m6: 32px;  --vz-m7: 48px; --vz-m8: 64px;
    --vz-m9: 96px; --vz-m10: clamp(76px, 12vw, 152px);

    /* ── Rozvržení ── */
    --vz-gutter: clamp(20px, 4vw, 40px);
    --vz-obal: 1120px;
    --vz-oddil: var(--vz-m10);
    --vz-popisek: 200px;      /* přilepený levý sloupec rozvržení A */
    --vz-radius: 3px;         /* na celém webu 3px, nebo 50 % u kolečka. Nic mezi. */
    --vz-ease: cubic-bezier(.22, .8, .26, 1);
    --vz-dech: 8s;
    --vz-organic: 58% 42% 55% 45% / 52% 48% 52% 48%;
    /* výška plovoucí navigace – pod ni se zarovnávají kotvy a lepicí lišty */
    --vz-nav-h: calc(72px + var(--wp-admin--admin-bar--height, 0px));
}

/* ---------- základ ---------- */
html { scroll-padding-top: var(--vz-nav-h); }
body {
    margin: 0;
    line-height: 1.65;
    font-family: var(--vz-sans);
    font-size: 17px;
    font-weight: 400;
    color: var(--vz-inkoust);
    background: var(--vz-papir);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
@media (min-width: 920px) { body { font-size: 18px; } }
:where(section, [id]) { scroll-margin-top: var(--vz-nav-h); }
:focus-visible { outline: 3px solid var(--vz-akcent); outline-offset: 3px; border-radius: var(--vz-radius); }
img { max-width: 100%; height: auto; }

/* Odkaz v textu: nikdy barva bez podtržení – na papírovém podkladu není
   akcent sám o sobě dost čitelný signál. */
.vz-oddil p a:not([class]), .vz-oddil li a:not([class]) {
    color: var(--vz-akcent); text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: .12em; transition: text-decoration-thickness .15s ease-out;
}
.vz-oddil p a:not([class]):hover, .vz-oddil li a:not([class]):hover { text-decoration-thickness: 2px; }

/* Poznámka „doplnit / ověřit“ – na webu zvýrazněná, ať nezapadne.
   Na hotové stránce nesmí zůstat ani jedna. */
.vz-todo { background: var(--vz-oranz-svetla); color: var(--vz-akcent); border-radius: var(--vz-radius); padding: .05em .4em; font-size: .88em; font-weight: 500; }

/**
 * Animations
 */
@keyframes vz-dych { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes vz-plynuti {
    0%, 100% { border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%; }
    50%      { border-radius: 45% 55% 48% 52% / 55% 45% 55% 45%; }
}
@keyframes vz-bezet { to { transform: translateX(-50%); } }


/* =====================================================================
 * NAVIGACE A PATIČKA
 * Lišta je plochá: bez rádiusu, bez stínu, bez skla. Drží ji jen vlasová
 * linka dole a poloprůhledný podklad, aby text pod ní neprosvítal.
 * ===================================================================== */

.site-navigation-wrapper {
    position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 1000;
    background: rgba(var(--vz-papir-rgb), .92);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--vz-linka);
}
.site-navigation-wrapper > nav {
    display: flex; align-items: center; gap: var(--vz-m2);
    max-width: var(--vz-obal); margin-inline: auto;
    padding: var(--vz-m3) var(--vz-gutter); box-sizing: border-box;
    min-height: var(--vz-nav-h);
}
.nav-logo { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; min-width: 0; text-decoration: none; }
.nav-logo img { width: 30px; height: 30px; flex: none; }
/* Kdyby došlo místo, ať se název zkrátí třemi tečkami – nikdy nepřeteče. */
.nav-logo span { min-width: 0; overflow: hidden; font-family: var(--vz-serif); font-weight: 400; font-size: 1.12rem; white-space: nowrap; text-overflow: ellipsis; color: var(--vz-inkoust); }
.nav-logo em { font-style: italic; color: var(--vz-inkoust-2); }
.nav-links { display: flex; gap: var(--vz-m1); }
.nav-links a {
    display: flex; align-items: center; min-height: 44px; padding: 0 12px;
    border-radius: var(--vz-radius); font-size: .95rem; white-space: nowrap;
    color: var(--vz-inkoust); text-decoration: none;
    transition: color .15s ease-out, background .15s ease-out;
}
@media (hover: hover) { .nav-links a:hover { color: var(--vz-akcent); } }
.nav-links a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--vz-akcent); }

/* „Objednat se“ v hlavičce = primární tlačítko ve verzi 44px.
   Stejné hodnoty jako assets/css/jadro/button.css – tady musí stát zvlášť,
   protože hlavička je na každé stránce, i tam, kde žádné tlačítko není. */
.nav-cta {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 20px; box-sizing: border-box;
    border-radius: var(--vz-radius); border: 1.5px solid var(--vz-inkoust);
    background: var(--vz-inkoust); color: var(--vz-papir);
    font: 600 15px/1 var(--vz-sans); white-space: nowrap; text-decoration: none;
    transition: background .15s ease-out, border-color .15s ease-out;
}
@media (hover: hover) { .nav-cta:hover { background: var(--vz-akcent); border-color: var(--vz-akcent); } }
.nav-cta:active { transform: scale(.97); }

/* ---------- menu na malých displejích: rozbalovací, bez JavaScriptu ---------- */
.nav-vice { display: none; position: relative; }
.nav-vice > summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--vz-radius); cursor: pointer; list-style: none; }
.nav-vice > summary::-webkit-details-marker { display: none; }
.nav-vice > summary i { position: relative; width: 20px; height: 1.5px; background: var(--vz-inkoust); transition: background .2s; }
.nav-vice > summary i::before, .nav-vice > summary i::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--vz-inkoust); transition: transform .25s var(--vz-ease); }
.nav-vice > summary i::before { top: -6px; }
.nav-vice > summary i::after { top: 6px; }
.nav-vice[open] > summary i { background: transparent; }
.nav-vice[open] > summary i::before { transform: translateY(6px) rotate(45deg); }
.nav-vice[open] > summary i::after { transform: translateY(-6px) rotate(-45deg); }
.nav-vice__panel {
    position: absolute; right: 0; top: calc(100% + var(--vz-m3)); display: grid;
    min-width: 248px; padding: var(--vz-m2);
    border: 1px solid var(--vz-linka); border-radius: var(--vz-radius); background: var(--vz-papir);
}
.nav-vice__panel a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--vz-m3); font-size: 1rem; color: var(--vz-inkoust); text-decoration: none; }
@media (hover: hover) { .nav-vice__panel a:hover { color: var(--vz-akcent); } }
.nav-vice__panel a[aria-current="page"] { font-weight: 600; }

/* Tablet se chová jako velký mobil, ne jako mačkaný desktop:
   odkazy se sbalí a dole se ukáže lišta s objednáním (viz .vz-mbar). */
@media (max-width: 919px) {
    .nav-links { display: none; }
    .nav-vice { display: block; }
}
@media (max-width: 559px) {
    .nav-logo span { font-size: 1.05rem; }
}

/* ---------- patička ---------- */
footer { padding-block: var(--vz-m8); background: var(--vz-inkoust); color: rgba(var(--vz-papir-rgb), .72); font-size: .95rem; line-height: 1.65; }
.foot-mrizka { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vz-m6); }
footer h4 { margin: 0 0 var(--vz-m3); font-family: var(--vz-serif); font-weight: 400; font-size: 1.2rem; color: var(--vz-papir); }
footer p { margin: 0; }
footer a { color: rgba(var(--vz-papir-rgb), .84); text-decoration: none; }
@media (hover: hover) { footer a:hover { color: var(--vz-papir); text-decoration: underline; text-underline-offset: .12em; } }
footer .drobne { margin: var(--vz-m7) 0 0; padding-top: var(--vz-m5); border-top: 1px solid rgba(var(--vz-papir-rgb), .14); font-size: .875rem; color: rgba(var(--vz-papir-rgb), .55); }
@media (max-width: 919px) {
    .foot-mrizka { grid-template-columns: 1fr 1fr; gap: var(--vz-m5); }
    .foot-mrizka > :nth-child(3) { grid-column: span 2; }
}
@media (max-width: 559px) {
    .foot-mrizka { grid-template-columns: 1fr; }
    .foot-mrizka > :nth-child(3) { grid-column: span 1; }
}

/* ── Spodní lišta s objednáním (mobil i tablet) ──
   Do 919px nahrazuje „Objednat se“ v menu, které je tam sbalené. */
.vz-mbar { display: none; }
@media (max-width: 919px) {
    .vz-mbar {
        display: flex; gap: var(--vz-m3); position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        padding: var(--vz-m3) var(--vz-gutter) calc(var(--vz-m3) + env(safe-area-inset-bottom, 0px));
        background: rgba(var(--vz-papir-rgb), .94);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid var(--vz-linka);
        transform: translateY(110%); transition: transform .35s var(--vz-ease);
    }
    .vz-mbar.show { transform: none; }
    .vz-mbar__cta {
        flex: 1; display: flex; align-items: center; justify-content: center; min-height: 56px;
        border-radius: var(--vz-radius); background: var(--vz-inkoust); color: var(--vz-papir);
        font: 600 1rem/1 var(--vz-sans); text-decoration: none;
    }
    .vz-mbar__msg {
        flex: none; width: 56px; height: 56px; border-radius: var(--vz-radius);
        border: 1.5px solid var(--vz-inkoust); display: grid; place-items: center; color: var(--vz-inkoust);
    }
    .vz-mbar__msg svg { width: 22px; height: 22px; }
    body.vz-ma-listu footer { padding-bottom: calc(var(--vz-m8) + 72px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Závoj: přechod mezi kotvami (logo pulzuje, panel přejede přes obrazovku)
   Překryje celou obrazovku, ne text pod sebou – proto zůstává. Zkrácený na 240 ms. ── */
.vz-zavoj { position: fixed; inset: 0; z-index: 2000; background: var(--vz-papir); display: grid; place-items: center; transform: translateY(100%); pointer-events: none; visibility: hidden; }
.vz-zavoj.in, .vz-zavoj.out { visibility: visible; }
.vz-zavoj.in { animation: vz-zavoj-in .24s var(--vz-ease) forwards; }
.vz-zavoj.out { animation: vz-zavoj-out .24s var(--vz-ease) forwards; }
.vz-zavoj img { width: 56px; height: 56px; animation: vz-dych 1.1s ease-in-out infinite; }
@keyframes vz-zavoj-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes vz-zavoj-out { from { transform: translateY(0); } to { transform: translateY(-100%); } }


/* =====================================================================
 * ROZVRŽENÍ SEKCÍ – třídy pro Skupinu (Pokročilé → Další CSS třídy).
 *
 * Tři rozvržení, která se střídají a nikdy nejdou dvakrát po sobě:
 *   A  vz-oddil--popisek   přilepený štítek vlevo (200px) + obsah   – výchozí
 *   B  vz-sloupce--55-45   text + fotka nebo ilustrace
 *   C  vz-obal--uzky       úzký na střed (citát, závěrečná výzva)
 *
 * Levý sloupec s popiskem je hlavní rytmický prvek: dává oku pevnou levou
 * hranu a zároveň vzniká velká prázdná plocha, která nic nestojí.
 * Pod 920px se štítek překlopí nad obsah.
 *
 * Pomocné:
 *   vz-oddil            sekce stránky (svislé odsazení)
 *   vz-oddil--uvod      úvod pod plovoucí navigací
 *   vz-oddil--vazany    menší mezera k následující sekci (patří k sobě)
 *   vz-obal             šířka obsahu + boční okraj
 *   vz-hlavicka         nadpisek + nadpis + perex sekce
 *   vz-mrizka--3        tři sloupce bez karet (tablet 2, mobil 1)
 * ===================================================================== */

/* Gutenberg dává blokům ve skupinách 24px mezeru; v sekcích šablony
   rozestupy řídí tyto styly. */
.vz-oddil.is-layout-flow > *, .vz-oddil .is-layout-flow > * { margin-block-start: 0; }

/* Mezera mezi dvěma sekcemi je --vz-m10, a je jen jednou: každá sekce k ní
   přispívá polovinou. Zdvojená mezera je ve 1.2 nejčastější zdroj
   „někde je díra, jinde tlačenka“. */
.vz-oddil { padding-block: calc(var(--vz-oddil) / 2); position: relative; }
/* Sekce, které patří k sobě (stejná kapitola), se přitáhnou blíž. */
.vz-oddil--vazany + .vz-oddil, .vz-oddil--vazany { padding-block: calc(var(--vz-m8) / 2); }
.vz-oddil--uvod { padding-block: clamp(64px, 9vw, 112px); padding-top: calc(var(--vz-nav-h) + clamp(32px, 5vw, 64px)); }
.vz-oddil--bez-horniho { padding-top: 0; }
.vz-oddil--tesny { padding-block: 0; }
.vz-obal { max-width: var(--vz-obal); margin-inline: auto; padding-inline: var(--vz-gutter); box-sizing: border-box; }
.vz-obal--uzky { max-width: calc(var(--vz-mira) + 2 * var(--vz-gutter)); }

/* ---------- typografická hierarchie ----------
   H1/H2 jsou Fraunces, H3 je záměrně bezpatkové Manrope 600. Ve 1.2 bylo
   všechno od H1 po H3 serifové, takže třetí úroveň vypadala jako čtvrtá
   druhá – stránka neměla dno. */
.vz-oddil :where(h1, h2) { font-family: var(--vz-serif); font-weight: 300; line-height: 1.08; margin: 0; text-wrap: balance; font-optical-sizing: auto; }
.vz-oddil :where(p) { margin: 0; }
.vz-oddil h1 { font-size: clamp(38px, 6.4vw, 60px); line-height: 1.05; letter-spacing: -.015em; max-width: var(--vz-mira-nadpis); }
.vz-oddil h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -.01em; max-width: var(--vz-mira-h2); }
.vz-oddil :where(h3) { font-family: var(--vz-sans); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: 0; margin: 0; }
/* Kurzíva Fraunces nese zvýrazněnou část nadpisu – jediný typografický
   ornament v systému. Barvu nedostává: akcent patří klikatelnému. */
.vz-oddil :is(h1, h2) em { font-style: italic; color: inherit; }
.vz-oddil a { color: inherit; }
.vz-oddil :where(p, li) { max-width: var(--vz-mira); }

/* Hlavička sekce: štítek → nadpis 16px, nadpis → perex 24px */
.vz-hlavicka { display: grid; gap: var(--vz-m4); margin-bottom: var(--vz-m7); }
.vz-hlavicka > .is-style-vz-nadpisek + :is(h1, h2) { margin-top: 0; }
.vz-hlavicka > :is(h1, h2) + .is-style-vz-perex { margin-top: var(--vz-m2); }
.vz-hlavicka--bez-mezery { margin-bottom: 0; }

/* ---------- rozvržení A: přilepený popisek + obsah ---------- */
.vz-oddil--popisek > .vz-obal { display: grid; gap: var(--vz-m6); }
@media (min-width: 920px) {
    .vz-oddil--popisek > .vz-obal { grid-template-columns: var(--vz-popisek) 1fr; gap: var(--vz-m8); }
    .vz-oddil--popisek > .vz-obal > .vz-popisek { position: sticky; top: calc(var(--vz-nav-h) + var(--vz-m6)); align-self: start; }
}
.vz-popisek { display: grid; gap: var(--vz-m2); align-content: start; }

/* Vedlejší sloupec, který je kratší než hlavní: přilepí se k horní hraně,
   takže pod ním nevzniká prázdný dolní roh. */
@media (min-width: 920px) {
    .vz-lepici { position: sticky; top: calc(var(--vz-nav-h) + var(--vz-m6)); align-self: start; }
}

/* ---------- rozvržení B: dva sloupce ---------- */
.vz-sloupce { display: grid; gap: var(--vz-m6); align-items: start; }
.vz-sloupce--stred { align-items: center; }
/* Konec dírám vpravo dole: sloupce se zarovnají spodní hranou, ne horní. */
.vz-sloupce--dno { align-items: end; }
@media (min-width: 920px) {
    .vz-sloupce { gap: var(--vz-m8); }
    .vz-sloupce--50-50 { grid-template-columns: 1fr 1fr; }
    .vz-sloupce--55-45 { grid-template-columns: 1.1fr .9fr; }
    .vz-sloupce--57-43 { grid-template-columns: 1.35fr 1fr; }
    .vz-sloupce--60-40 { grid-template-columns: 1.2fr .8fr; }
    .vz-sloupce--45-55 { grid-template-columns: .9fr 1.1fr; }
    .vz-sloupce--40-60 { grid-template-columns: .8fr 1.2fr; }
    .vz-sloupce--auto-1 { grid-template-columns: auto 1fr; gap: var(--vz-m7); }
}
/* Na tabletu jsou sloupce pod sebou, ale obsah se nesmí roztáhnout na celou
   šířku – řádek by byl dvakrát delší, než se dá číst. */
@media (max-width: 919px) {
    .vz-sloupce > * { max-width: var(--vz-mira); }
}

/* ---------- mřížky bez karet ---------- */
.vz-mrizka { display: grid; column-gap: var(--vz-m6); row-gap: var(--vz-m5); }
.vz-mrizka--2 { grid-template-columns: repeat(2, 1fr); }
.vz-mrizka--3 { grid-template-columns: repeat(3, 1fr); }
.vz-mrizka--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 919px) { .vz-mrizka--3, .vz-mrizka--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .vz-mrizka--2, .vz-mrizka--3, .vz-mrizka--4 { grid-template-columns: 1fr; } }
/* Staré názvy z 1.2 – obsah stránek je ještě používá */
.vz-mrizka--240, .vz-mrizka--280, .vz-mrizka--290, .vz-mrizka--340 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

@media (max-width: 919px) {
    .vz-listovani { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--vz-m3); margin-inline: calc(-1 * var(--vz-gutter)); padding-inline: var(--vz-gutter); scroll-padding-inline: var(--vz-gutter); scrollbar-width: none; padding-bottom: var(--vz-m1); }
    .vz-listovani::-webkit-scrollbar { display: none; }
    .vz-listovani > * { flex: 0 0 84%; scroll-snap-align: start; }
}
.vz-listovani-tecky { display: none; align-items: center; gap: var(--vz-m2); margin-top: var(--vz-m3); font-size: .85rem; }
.vz-listovani-tecky i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--vz-linka); transition: width .25s, background .25s; }
.vz-listovani-tecky i.on { width: 18px; border-radius: 2px; background: var(--vz-akcent); }
@media (max-width: 919px) { .vz-listovani-tecky { display: flex; } }

/* ---------- pomocné třídy ---------- */
.vz-stoh { display: grid; gap: var(--vz-m4); align-content: start; }
.vz-stoh--6 { gap: var(--vz-m1); } .vz-stoh--8 { gap: var(--vz-m2); } .vz-stoh--10 { gap: var(--vz-m3); }
.vz-stoh--12 { gap: var(--vz-m3); } .vz-stoh--14 { gap: var(--vz-m4); } .vz-stoh--16 { gap: var(--vz-m4); }
.vz-stoh--22 { gap: var(--vz-m5); }
.vz-oddil .vz-mezera-nahore { margin-top: var(--vz-m5); }
.vz-oddil h3.vz-mezinadpis { margin-bottom: var(--vz-m3); }
.vz-skryt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 919px) {
    .vz-skryt-mobil { display: none !important; }
    .vz-nahoru-mobil { order: -1; justify-self: start; }
}

/* Souvislý text (příběh) */
.vz-text { display: grid; gap: 1.1em; max-width: var(--vz-mira); color: var(--vz-inkoust-2); }
.vz-text strong { color: var(--vz-inkoust); font-weight: 600; }

/* Jméno v úvodu: pod jménem role menším písmem */
.vz-oddil h1.vz-jmeno em { display: block; font-size: .42em; margin-top: var(--vz-m3); color: var(--vz-inkoust-2); }


/* =====================================================================
 * KOMPONENTY STRÁNEK
 * Pravidlo pro celý tenhle oddíl: plocha nesmí obsahovat jinou plochu.
 * Seskupení dělá vlasová linka a mezera, ne další rámeček.
 * ===================================================================== */

/* ---------- služba na úvodní stránce (hlavička + dlaždice témat) ----------
   Do 1.2 měla každá služba vlastní šedý podklad a dlaždice v něm bílou
   plochu se stínem – dvě úrovně nad sebou, třináctkrát. Teď nemá podklad
   ani jedna: služby od sebe dělí mezera a nadpis se svislou značkou,
   dlaždice drží pohromadě jen mřížka. */
.vz-sluzba { margin: 0; }
.vz-sluzba + .vz-sluzba { margin-top: var(--vz-m8); }
.vz-sluzba-radek { display: flex; align-items: baseline; gap: var(--vz-m4); padding: 0 0 var(--vz-m4); margin-bottom: var(--vz-m5); border-bottom: 1px solid var(--vz-linka); }
.vz-sluzba-radek > div { flex-grow: 1; min-width: 0; }
.vz-sluzba-radek h3 { position: relative; font-family: var(--vz-serif); font-weight: 300; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.12; margin: 0 0 var(--vz-m1); padding-left: var(--vz-m4); }
/* svislá značka u názvu – jediný nosič předělu mezi službami */
.vz-sluzba-radek h3::before { content: ""; position: absolute; left: 0; top: .16em; bottom: .16em; width: 3px; background: var(--vz-akcent); }
/* Název služby je odkaz – musí mít pod prstem aspoň 44 px. */
.vz-sluzba-radek h3 a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
@media (hover: hover) { .vz-sluzba-radek h3 a:hover { color: var(--vz-akcent); } }
.vz-sluzba-radek p { margin: 0 0 0 var(--vz-m4); font-size: .95rem; color: var(--vz-inkoust-2); }
/* Kolečko „→“ z 1.2 se ruší: název služby je odkaz taky a kroužek by po
   odebrání okolních ploch zůstal jako jediný rádius na stránce. */
.vz-sluzba-radek .vz-vice { display: none; }

/* ---------- karta služby (O mně): celá karta je odkaz ----------
   Rámeček místo podkladu a stínu; odkaz v nadpisu se roztáhne přes kartu,
   takže je klikatelná celá a má víc než 44px pod prstem. */
.is-style-vz-karta.vz-sluzba { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--vz-m4); transition: border-color .15s ease-out; }
.is-style-vz-karta.vz-sluzba h3 a { display: block; min-height: 44px; text-decoration: none; }
.is-style-vz-karta.vz-sluzba h3 a::after { content: ""; position: absolute; inset: 0; }
.is-style-vz-karta.vz-sluzba p { color: var(--vz-inkoust-2); font-size: 15px; }
.vz-sluzba__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--vz-m4); font-size: 14px; padding-top: var(--vz-m4); margin-top: auto; border-top: 1px solid var(--vz-linka); }
.vz-sluzba__meta span { color: var(--vz-akcent); font-weight: 600; }
@media (hover: hover) { .is-style-vz-karta.vz-sluzba:hover { border-color: var(--vz-akcent); } }

/* ---------- odkaz „Víc o tom →“ ---------- */
.vz-vice { display: inline-flex; align-items: center; gap: var(--vz-m2); min-height: 44px; font-size: .95rem; font-weight: 600; color: var(--vz-akcent); text-decoration: none; }
.vz-vice::after { content: "→"; transition: transform .15s ease-out; }
@media (hover: hover) { .vz-vice:hover { text-decoration: underline; text-underline-offset: .18em; } .vz-vice:hover::after { transform: translateX(3px); } }

/* ---------- ceník ----------
   Karta ceny ztrácí stín i posun při najetí: není klikatelná, takže se
   nemá chovat jako tlačítko. Drží ji vlasová linka. */
.vz-karta-ceny { display: grid; gap: var(--vz-m5); grid-template-rows: auto auto auto 1fr auto; }
.vz-karta-ceny h3 { font-family: var(--vz-serif); font-weight: 300; font-size: 28px; line-height: 1.12; }
.vz-karta-ceny > h3 + p { margin-top: calc(-1 * var(--vz-m4)); font-size: .95rem; color: var(--vz-inkoust-2); }
.vz-karta-ceny .wp-block-buttons, .vz-karta-ceny .wp-block-button, .vz-karta-ceny .wp-block-button__link { width: 100%; }
.vz-oddil .vz-platba { margin-top: var(--vz-m6); display: grid; gap: var(--vz-m5); }
.vz-platba h3 { font-family: var(--vz-serif); font-weight: 300; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.12; }
.vz-platba__perex { color: var(--vz-inkoust-2); max-width: var(--vz-mira); }
.vz-oddil .vz-poznamky { margin-top: var(--vz-m5); gap: var(--vz-m4); }
.vz-oddil .vz-pripady { margin-top: var(--vz-m5); }

/* ---------- čísla v řádku (8 000 h · 700 · …) ---------- */
.vz-cisla { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--vz-linka); }
.vz-cisla--3 { grid-template-columns: repeat(3, 1fr); }
.vz-cisla > * { padding: var(--vz-m6) var(--vz-m5) var(--vz-m6) 0; border-left: 1px solid var(--vz-linka); padding-left: var(--vz-m5); }
.vz-cisla > :first-child { border-left: 0; padding-left: 0; }
.vz-cisla .vz-cislo { font-family: var(--vz-serif); font-weight: 300; font-size: clamp(32px, 4.6vw, 48px); line-height: 1; font-variant-numeric: tabular-nums; }
.vz-cisla .vz-cislo sub { font-size: .45em; color: var(--vz-inkoust-2); margin-left: .15em; vertical-align: baseline; }
.vz-cisla .vz-cislo + p { margin-top: var(--vz-m2); font-size: .95rem; color: var(--vz-inkoust-2); max-width: 16em; }
@media (max-width: 919px) {
    .vz-cisla, .vz-cisla--3 { grid-template-columns: 1fr 1fr; }
    .vz-cisla > :nth-child(3) { border-left: 0; padding-left: 0; }
    .vz-cisla > :nth-child(-n+2) { border-bottom: 1px solid var(--vz-linka); }
    .vz-cisla > * { padding: var(--vz-m5) var(--vz-m4) var(--vz-m5) var(--vz-m4); }
    .vz-cisla > :nth-child(odd) { padding-left: 0; }
    .vz-cisla--3 > :nth-child(3) { grid-column: span 2; border-bottom: 0; }
}

/* ---------- ilustrace vedle odstavce ---------- */
.vz-telo-radek { display: flex; gap: var(--vz-m5); align-items: center; }
.vz-telo-radek > .vz-ilustrace { width: 92px; height: 92px; flex: none; margin: 0; }
.vz-telo-radek > p { margin: 0; color: var(--vz-inkoust-2); }
@media (max-width: 559px) { .vz-telo-radek { gap: var(--vz-m4); } .vz-telo-radek > .vz-ilustrace { width: 72px; height: 72px; } }

.vz-portret-radek { display: flex; gap: var(--vz-m4); align-items: center; margin-top: var(--vz-m6); }
.vz-portret-radek > p { margin: 0; font-family: var(--vz-serif); font-style: italic; font-weight: 300; font-size: 1.15rem; color: var(--vz-inkoust-2); }

/* ---------- ceník na tmavé sekci ---------- */
.vz-cenovka { border: 1px solid rgba(var(--vz-papir-rgb), .2); border-radius: var(--vz-radius); padding: var(--vz-m6); }
.vz-cenovka, .vz-cenovka :is(.vz-sazba__castka, .vz-sazba__mena, strong) { color: var(--vz-papir); }
.vz-cenovka :is(p, li, small) { color: rgba(var(--vz-papir-rgb), .8); }
.vz-cenovka .vz-sazba { border: 0; padding-block: 0; }
.vz-cenovka ul { margin-top: var(--vz-m5); }
.vz-upozorneni { margin-top: var(--vz-m5); padding: var(--vz-m5); border-left: 3px solid var(--vz-akcent); }
.vz-upozorneni strong { font-weight: 600; }
.vz-podpis { font-family: var(--vz-serif); font-style: italic; font-weight: 300; font-size: 1.25rem; color: var(--vz-inkoust-2); }
.vz-motto { font-family: var(--vz-serif); font-style: italic; font-weight: 300; font-size: 1.15rem; color: var(--vz-inkoust-2); }
.vz-serif { font-family: var(--vz-serif); font-weight: 300; font-size: 1.4rem; display: block; margin-bottom: var(--vz-m2); }
.vz-ramec { margin-top: auto; padding-top: var(--vz-m5); border-top: 1px solid var(--vz-linka); font-size: .9rem; color: var(--vz-inkoust-2); display: flex; gap: var(--vz-m1) var(--vz-m5); flex-wrap: wrap; }
.vz-ramec > * { margin: 0; }
.vz-ramec strong { font-weight: 600; color: var(--vz-inkoust); }
.vz-most { max-width: var(--vz-mira); margin: var(--vz-m7) auto 0; text-align: center; border-top: 1px solid var(--vz-linka); border-bottom: 1px solid var(--vz-linka); padding: var(--vz-m6) 0; }
.vz-most p { margin: 0; }

/* ---------- průběh terapie ---------- */
.vz-prubeh { margin-top: var(--vz-m6); display: grid; gap: var(--vz-m5); }
.vz-prubeh .vz-ilustrace--siroka { width: min(520px, 100%); margin-inline: auto; }
.vz-prubeh .vz-kroky { margin-top: var(--vz-m1); }

/* ---------- portrét ----------
   Skvrny, které dřív dýchaly za fotkou, jsou pryč: pohyb pod textem ruší.
   Zůstal samotný výřez. */
.vz-portret { position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 360px; }
.vz-portret .wp-block-image, .vz-portret__misto { position: absolute; inset: 0; margin: 0; display: grid; place-items: end center; }
.vz-portret .wp-block-image img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.vz-portret__misto { border: 1px dashed var(--vz-linka); color: var(--vz-inkoust-2); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; place-items: center; padding: var(--vz-m5); }
.vz-portret__stitek { margin-top: var(--vz-m4); font-size: .95rem; line-height: 1.5; color: var(--vz-inkoust-2); }
.vz-portret__stitek strong { display: block; font-family: var(--vz-serif); font-weight: 300; font-size: 1.3rem; color: var(--vz-inkoust); }
@media (max-width: 919px) { .vz-portret { max-width: 280px; margin-inline: auto; } }

/* ---------- SVG ilustrace a ikony: barvy z tokenů ---------- */
.vz-svg { display: block; max-width: 100%; overflow: visible; }
.vz-svg .s-i { stroke: var(--vz-inkoust); } .vz-svg .f-i { fill: var(--vz-inkoust); }
.vz-svg .s-o { stroke: var(--vz-akcent); }  .vz-svg .f-o { fill: var(--vz-akcent); }
.vz-svg .s-z { stroke: var(--vz-inkoust-2); } .vz-svg .f-z { fill: var(--vz-inkoust-2); }
.vz-svg .s-s { stroke: var(--vz-linka); }   .vz-svg .f-s { fill: var(--vz-linka); }
.vz-svg .s-p { stroke: var(--vz-papir); }   .vz-svg .f-p { fill: var(--vz-papir); }
.vz-svg .f-k { fill: var(--vz-plocha); }
.vz-svg .s-m { stroke: var(--vz-inkoust-2); } .vz-svg .f-m { fill: var(--vz-mlha-modra); }
.vz-svg .f-j { fill: var(--vz-inkoust-2); }

/* Kresba se „dokreslí“ při prvním zobrazení (třída is-in od vz.js).
   Kreslí se vedle textu, ne pod ním – proto zůstává. */
.vz-svg .draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.is-in .vz-svg .draw, .is-in.vz-svg .draw, .is-drawing .draw { animation: vz-draw 1.4s var(--vz-ease) both; }
.is-in .vz-svg .draw.d2, .is-drawing .draw.d2 { animation-delay: .3s; }
.is-in .vz-svg .draw.d3, .is-drawing .draw.d3 { animation-delay: .6s; }
@keyframes vz-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ── Animace mimo obrazovku se pozastaví (šetří baterii na mobilu) ── */
.vz-off, .vz-off * { animation-play-state: paused !important; }

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

/* ---------- styl bloku „Píše se“ ----------
   Věta se objevuje znak po znaku. Hýbe samotným textem, jednou, pak je
   statický – proto zůstává. Na stránce nejvýš jednou a nikdy v H1:
   ten se měří jako LCP a animace by zdržela načtení. */
html.vz-js :is(.vz-pise, .is-style-vz-pise).vz-pise-hotovo .vz-znak { opacity: 0; }
html.vz-js :is(.vz-pise, .is-style-vz-pise).vz-pise-hotovo.is-in .vz-znak {
    animation: vz-znak .34s var(--vz-ease) both;
    animation-delay: calc(var(--i) * var(--krok, 22ms));
}
@keyframes vz-znak { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) {
    html.vz-js :is(.vz-pise, .is-style-vz-pise) .vz-znak { opacity: 1; animation: none; }
}

/* ---------- odhalení obsahu sekce při scrollu ---------- */
html.vz-js .vz-odhal > * { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s var(--vz-ease); }
html.vz-js .vz-odhal.is-in > * { opacity: 1; transform: none; }
html.vz-js .vz-odhal.is-in > :nth-child(2) { transition-delay: .09s; }
html.vz-js .vz-odhal.is-in > :nth-child(3) { transition-delay: .18s; }
html.vz-js .vz-odhal.is-in > :nth-child(4) { transition-delay: .27s; }
html.vz-js .vz-odhal.is-in > :nth-child(n + 5) { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) { html.vz-js .vz-odhal > * { opacity: 1; transform: none; transition: none; } }