/*
Theme Name:       Vědomé Žití Theme
Theme URI:        https://www.vedomeziti.cz
Version:          1.5.1
Requires at least: 6.9
Requires PHP:     8.1
Description:      Šablona webu Vědomé žití – barvy a oblé tvary Nádechu, písma a rytmus z 1.3, připomínky grafika, UX zpětná vazba 1.5 (dvě služby, kratší stránky, jedna výzva „Domluvit první sezení“). Písma Fraunces + Manrope uložená v šabloně. Vlastní bloky (cena, storno, panely, kroky, ilustrace, video smyčka, pás frází, adresa), styly bloků a vzory stránek. Ceny, délky, storno, kontakt, barvy a SMTP server: Nastavení → Vědomé žití.
Text Domain:      vedome-ziti-theme
*/

/* =====================================================================
 * OBSAH SOUBORU
 *
 *   PÍSMA                @font-face (Fraunces, Manrope)
 *   GLOBÁLNÍ ZÁKLAD      tokeny (:root), základ stránky
 *   TLAČÍTKA             jedna komponenta pro všechna tlačítka webu
 *   NAVIGACE A PATIČKA   plovoucí lišta, menu, patička, spodní lišta, závoj
 *   ROZVRŽENÍ SEKCÍ      sekce, typografie, sloupce, mřížky, pomocné třídy
 *   LANDING PAGE         úvod s videem, karty, cenovka, služby, animace
 *
 * Styly bloků se načítají jen tam, kde je blok použitý:
 *   assets/css/jadro/<blok>.css   jádrové bloky a jejich styly (Tlačítko, Seznam …)
 *   bloky/<blok>/style.css        bloky šablony (Cena, Storno, Panely, Video smyčka …)
 *   assets/css/ilustrace.css      animace ilustrací
 * WordPress je vkládá do stránky PŘED tenhle soubor. Obecná pravidla tady
 * proto drží nízkou specificitu (:where), aby je třída komponenty vždy přebila.
 *
 * ZLOMY – na celém webu jen tři, nic jiného:
 *   telefon   do 559 px       @media (max-width: 559px)
 *   tablet    560–919 px      chová se jako velký telefon: menu sbalené, spodní lišta
 *   desktop   od 920 px       @media (min-width: 920px) / (max-width: 919px)
 * (CSS proměnné v @media nefungují, proto jsou čísla vypsaná.)
 * ===================================================================== */

/* =====================================================================
 * PÍSMA – uložená v šabloně (assets/pisma/), nic se nestahuje z Googlu.
 * Fraunces: nadpisy; jediná váha 300, živá je jen optická velikost 14–72,
 *   takže H1 a drobný nadpisek vypadají jako jedno písmo (opsz řídí prohlížeč
 *   sám podle velikosti písma).
 * Manrope: text, popisky, tlačítka; váha 400–600.
 * Obě ořezané na latinku + Latin Extended-A (česká diakritika) a typografii;
 * znovu se vygenerují skriptem nastroje/pisma.py. Licence OFL leží vedle souborů.
 * ===================================================================== */
@font-face {
	font-family: "Fraunces";
	src: url("assets/pisma/fraunces.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("assets/pisma/fraunces-kurziva.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Manrope";
	src: url("assets/pisma/manrope.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

/* =====================================================================
 * GLOBÁLNÍ ZÁKLAD – tokeny a základ stránky
 * ===================================================================== */

:root {
	/* ── Barvy ─────────────────────────────────────────────────────────
	   Výchozí hodnoty; přepisuje je Nastavení → Vědomé žití (inc/nastaveni.php
	   je vypisuje do <head>, včetně RGB kanálů pro průhlednosti). */
	--vz-papir: #f7f4ee;
	--vz-inkoust: #22365c;
	--vz-zelen: #4c7a3a;
	--vz-zelen-tmava: #3a5e2c;
	--vz-oranz: #ee7f2d;
	--vz-salvej: #c3d1b4;
	--vz-mlha: #edeae1;
	--vz-bily: #fdfcf9;
	--vz-papir-rgb: 247, 244, 238;
	--vz-inkoust-rgb: 34, 54, 92;
	--vz-zelen-rgb: 76, 122, 58;
	--vz-oranz-rgb: 238, 127, 45;
	--vz-salvej-rgb: 195, 209, 180;
	--vz-bily-rgb: 253, 252, 249;

	/* ── Odvozené odstíny ──────────────────────────────────────────────
	   Počítají se z hlavních barev, takže se změní s nimi. Kontrasty v
	   komentářích platí pro výchozí barvy (WCAG AA: text 4,5, velký text 3). */
	--vz-karta: color-mix(in srgb, var(--vz-bily) 70%, #fff8ec);
	--vz-papir-2: color-mix(in srgb, var(--vz-papir) 90%, #a8977a 10%);
	--vz-linka: color-mix(in srgb, var(--vz-papir) 67%, #a8977a 33%);
	--vz-inkoust-jemny: color-mix(in srgb, var(--vz-inkoust) 80%, #fff 20%);
	--vz-mlha-modra: color-mix(in srgb, var(--vz-inkoust) 22%, #fff);
	--vz-salvej-svetla: color-mix(in srgb, var(--vz-salvej) 40%, #fff);
	--vz-oranz-svetla: color-mix(in srgb, var(--vz-oranz) 18%, #fff);
	/* oranžový text na světlém: 5,2 na papíru, 4,8 na mlze, ploše i šalvěji */
	--vz-oranz-tmava: color-mix(in srgb, var(--vz-oranz) 65%, #000);
	/* oranžová kurzíva v nadpisech: 3,3–3,8 (velký text chce 3) */
	--vz-oranz-nadpis: color-mix(in srgb, var(--vz-oranz) 82%, #000);
	/* oranžový text na inkoustu: 4,9 (čistá oranž jen 4,4) */
	--vz-oranz-na-tmave: color-mix(in srgb, var(--vz-oranz) 90%, #fff);
	/* podklad tlačítek: inkoustový text na něm má 4,7 (na čisté oranži 4,4) */
	--vz-oranz-tlacitko: color-mix(in srgb, var(--vz-oranz) 93%, #fff);

	/* ── Písmo ─────────────────────────────────────────────────────────
	   Názvy tokenů zůstaly z 1.2, ať se nemusí přepisovat celý web. */
	--vz-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
	--vz-sans: "Manrope", "Segoe UI", system-ui, sans-serif;

	/* ── Škála mezer ───────────────────────────────────────────────────
	   Rozestupy mezi bloky a sekcemi jsou vždy jedna z těchhle hodnot.
	   Vnitřní odsazení drobných ovládacích prvků (pilulky, štítky,
	   posuvník) zůstává v px – tam jde o optické doladění, ne o rytmus. */
	--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;

	/* ── Rozvržení ─────────────────────────────────────────────────────
	   Míra (kolik znaků na řádek) se dává prvku, ne obalu – jinak se
	   rozbije mřížka. Mezeru mezi sekcemi nese každá sekce napůl, takže
	   mezi dvěma sousedními je vždy přesně jednou. */
	--vz-mira: 62ch;
	--vz-mira-perex: 50ch;
	--vz-mira-nadpis: 20ch;
	--vz-mira-h2: 24ch;
	--vz-obal: 1120px;
	--vz-gutter: clamp(20px, 4vw, 40px);
	--vz-oddil: clamp(76px, 12vw, 152px);
	--vz-radius: 22px;
	--vz-organic: 58% 42% 55% 45% / 52% 48% 52% 48%;
	/* výška plovoucí navigace – pod ni se zarovnávají kotvy a lepicí sloupce */
	--vz-nav-h: calc(78px + var(--wp-admin--admin-bar--height, 0px));

	/* ── Tlačítka (viz oddíl TLAČÍTKA) ─────────────────────────────── */
	--vz-tl-vyska: 56px;
	--vz-tl-vyska-male: 44px;
	--vz-tl-prechod: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;

	/* ── Pohyb ─────────────────────────────────────────────────────── */
	--vz-dech: 8s;
	--vz-ease: cubic-bezier(0.22, 0.8, 0.26, 1);

	/* ── Závoj přes video v úvodu ──────────────────────────────────────
	   Vlevo, kde je nadpis a perex, skoro plný papír; doprava řídne.
	   Na telefonu shora dolů (nahoře text, dole formulář). */
	--vz-zavoj-smycky: linear-gradient(
		100deg,
		rgba(var(--vz-papir-rgb), 0.97) 0%,
		rgba(var(--vz-papir-rgb), 0.94) 40%,
		rgba(var(--vz-papir-rgb), 0.6) 62%,
		rgba(var(--vz-papir-rgb), 0.18) 100%
	);
	--vz-zavoj-smycky-mobil: linear-gradient(
		180deg,
		rgba(var(--vz-papir-rgb), 0.96) 0%,
		rgba(var(--vz-papir-rgb), 0.88) 55%,
		rgba(var(--vz-papir-rgb), 0.62) 100%
	);
}

/* ---------- základ ---------- */
html {
	scroll-padding-top: var(--vz-nav-h);
}
body {
	margin: 0;
	line-height: 1.6;
	font-family: var(--vz-sans);
	font-weight: 400;
	color: var(--vz-inkoust);
	background: var(--vz-papir);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}
:where(section, [id]) {
	scroll-margin-top: var(--vz-nav-h);
}
/* Fokus z klávesnice je vidět všude stejně: 3px oranžový obrys s odsazením (kontrast 3,6 : 1 na papíru). */
:focus-visible {
	outline: 3px solid var(--vz-oranz-nadpis);
	outline-offset: 3px;
	border-radius: 6px;
}
img {
	max-width: 100%;
	height: auto;
}

/* Poznámka „doplnit / ověřit“ (<span class="vz-todo">) je vzkaz autorovi, ne text webu.
   Návštěvník ji nevidí; přihlášený ji vidí zvýrazněnou, ať nezapadne. V editoru
   ji zapíná assets/css/editor.css. Věta kolem musí dávat smysl i bez ní. */
.vz-todo {
	display: none;
	background: var(--vz-oranz-svetla);
	color: var(--vz-oranz-tmava);
	border-radius: 4px;
	padding: 0.05em 0.4em;
	font-size: 0.88em;
	font-weight: 500;
}
body.logged-in .vz-todo {
	display: inline;
}

/**
 * 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%);
	}
}

/* =====================================================================
 * TLAČÍTKA – jeden vzor pro celý web
 *
 * Každé tlačítko na webu je jedna ze dvou variant, se stejnou geometrií
 * a stejným chováním. Dřív jich bylo pět se čtyřmi různými efekty
 * (posun, oranžová záře, jiný text, jiná výška) – grafik to právem
 * označil za rušivé: lišily se natolik, že to bylo vidět, a málo na to,
 * aby to něco znamenalo.
 *
 *   Hlavní  oranžová výplň, inkoustový text      → při najetí plný inkoust
 *   Obrys   průhledné, inkoustový rámeček 1,5px  → při najetí plný inkoust
 *
 * Společné: pilulka, Manrope 600 / 16px, výška 56px (v liště 44px),
 * jen změna barvy – žádný stín, žádný posun. Stisk lehce zmenší.
 *
 * Kdo komponentu používá:
 *   .vz-tlacitko                      vlastní tlačítka šablony (lišta, formulář, panel)
 *   .is-style-vz-primarni / -obrys    blok Tlačítko v editoru (styl „Hlavní“ / „Obrys“)
 *   .wpcf7-submit                     odeslání formuláře z Contact Form 7
 * ===================================================================== */
/* Selektory jsou vypsané čárkou, ne přes :is() – :is() by všem dal
   specificitu toho nejsilnějšího a modifikátor --male by pak nezabral. */
.vz-tlacitko,
.wp-block-button.is-style-vz-primarni .wp-block-button__link,
.wp-block-button.is-style-vz-obrys .wp-block-button__link,
.vz-formular .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: var(--vz-tl-vyska);
	padding: 0 28px;
	box-sizing: border-box;
	border: 1.5px solid var(--vz-oranz-tlacitko);
	border-radius: 999px;
	background: var(--vz-oranz-tlacitko); /* o vlas světlejší než čistá oranž: inkoustový text má 4,7 : 1 */
	color: var(--vz-inkoust);
	font: 600 1rem/1.2 var(--vz-sans);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: var(--vz-tl-prechod);
}

/* Obrys */
.vz-tlacitko--obrys,
.wp-block-button.is-style-vz-obrys .wp-block-button__link {
	border-color: var(--vz-inkoust);
	background: transparent;
}

/* Menší v plovoucí liště */
.vz-tlacitko--male {
	min-height: var(--vz-tl-vyska-male);
	padding-inline: 18px;
	font-size: 0.9375rem;
}

/* Najetí: obě varianty překlopí na plný inkoust */
@media (hover: hover) {
	.vz-tlacitko:hover,
	.wp-block-button.is-style-vz-primarni .wp-block-button__link:hover,
	.wp-block-button.is-style-vz-obrys .wp-block-button__link:hover,
	.vz-formular .wpcf7-submit:hover {
		border-color: var(--vz-inkoust);
		background: var(--vz-inkoust);
		color: var(--vz-papir);
	}
}

/* Stisk */
.vz-tlacitko:active,
.wp-block-button .wp-block-button__link:active,
.vz-formular .wpcf7-submit:active {
	transform: scale(0.97);
}

/* Na tmavé ploše (sekce Tmavá, závěrečný box) by inkoustový stav splynul
   s podkladem – překlopí se na papír. */
:is(.is-style-vz-tmava, .is-style-vz-zaver) .vz-tlacitko--obrys,
:is(.is-style-vz-tmava, .is-style-vz-zaver) .wp-block-button.is-style-vz-obrys .wp-block-button__link {
	border-color: rgba(var(--vz-papir-rgb), 0.6);
	color: var(--vz-papir);
}
@media (hover: hover) {
	:is(.is-style-vz-tmava, .is-style-vz-zaver) .vz-tlacitko:hover,
	:is(.is-style-vz-tmava, .is-style-vz-zaver) .wp-block-button .wp-block-button__link:hover {
		border-color: var(--vz-papir);
		background: var(--vz-papir);
		color: var(--vz-inkoust);
	}
}

/* =====================================================================
 * NAVIGACE A PATIČKA – plovoucí lišta nahoře, patička v šířce obsahu.
 * ===================================================================== */

/* ---------- plovoucí navigace ----------
   Obal je roztažený přes celou šířku okna a lištu v něm vystředí flex.
   Dřív stál na `left: 50%` + posunu o polovinu vlastní šířky – jenže tím
   prohlížeči zbyla jako volné místo jen pravá polovina okna, lištu začal
   mačkat dřív, než místo opravdu došlo, a nápis „Vědomé žití“ přetekl
   do prvního odkazu. Prázdné místo vedle lišty nesmí brát kliknutí,
   proto `pointer-events`. */
.site-navigation-wrapper {
	position: fixed;
	top: calc(18px + var(--wp-admin--admin-bar--height, 0px));
	left: calc(16px + env(safe-area-inset-left, 0px));
	right: calc(16px + env(safe-area-inset-right, 0px));
	z-index: 1000;
	display: flex;
	justify-content: center;
	pointer-events: none;
}
.site-navigation-wrapper > nav {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 7px 9px 7px 12px;
	border: 1px solid rgba(var(--vz-inkoust-rgb), 0.08);
	border-radius: 999px;
	background: rgba(var(--vz-bily-rgb), 0.78);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 8px 32px rgba(var(--vz-inkoust-rgb), 0.1);
	pointer-events: auto;
}
.nav-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-right: 8px;
	min-width: 0;
	min-height: 44px;
	text-decoration: none;
}
.nav-logo img {
	width: 30px;
	height: 30px;
	flex: none;
}
/* Kdyby přece jen 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-size: 1.12rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--vz-inkoust);
}
.nav-logo em {
	color: var(--vz-zelen-tmava);
}
.nav-links {
	display: flex;
	gap: 2px;
}
.nav-links a {
	padding: 8px 13px;
	border-radius: 999px;
	font-size: 0.9rem;
	white-space: nowrap;
	color: var(--vz-inkoust);
	text-decoration: none;
	transition: background 0.25s;
}
.nav-links a:hover {
	background: rgba(var(--vz-zelen-rgb), 0.1);
}
.nav-links a[aria-current="page"] {
	background: rgba(var(--vz-zelen-rgb), 0.14);
	font-weight: 500;
}
/* „Domluvit první sezení“ v liště je komponenta Tlačítko (vz-tlacitko--male), tady jen zalomení */
.nav-cta {
	white-space: nowrap;
}

/* ---------- 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: 999px;
	cursor: pointer;
	list-style: none;
	transition: background 0.25s;
}
.nav-vice > summary::-webkit-details-marker {
	display: none;
}
.nav-vice > summary:hover {
	background: rgba(var(--vz-zelen-rgb), 0.1);
}
.nav-vice > summary i {
	position: relative;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--vz-inkoust);
	transition: background 0.2s;
}
.nav-vice > summary i::before,
.nav-vice > summary i::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--vz-inkoust);
	transition: transform 0.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% + 12px);
	display: grid;
	gap: 2px;
	min-width: 232px;
	padding: 10px;
	border: 1px solid rgba(var(--vz-inkoust-rgb), 0.08);
	border-radius: 20px;
	background: var(--vz-karta);
	box-shadow: 0 18px 44px rgba(var(--vz-inkoust-rgb), 0.22);
}
.nav-vice__panel a {
	padding: 11px 14px;
	border-radius: 12px;
	font-size: 1rem;
	color: var(--vz-inkoust);
	text-decoration: none;
}
.nav-vice__panel a:hover {
	background: rgba(var(--vz-zelen-rgb), 0.1);
}
.nav-vice__panel a[aria-current="page"] {
	background: rgba(var(--vz-zelen-rgb), 0.14);
	font-weight: 500;
}

/* Do 919 px se odkazy sbalí do rozbalovacího menu – tablet se chová jako velký
   telefon. Od 920 px se vejdou i se záložním písmem (než se načte Manrope). */
@media (max-width: 919px) {
	.nav-links {
		display: none;
	}
	.nav-vice {
		display: block;
	}
}
@media (max-width: 559px) {
	.site-navigation-wrapper {
		top: calc(10px + var(--wp-admin--admin-bar--height, 0px));
		left: calc(10px + env(safe-area-inset-left, 0px));
		right: calc(10px + env(safe-area-inset-right, 0px));
	}
	.site-navigation-wrapper > nav {
		flex: 1;
		justify-content: space-between;
	}
	.nav-logo {
		margin-right: 0;
	}
	.nav-logo span {
		font-size: 1.05rem;
	}
	/* Na telefonu „Domluvit první sezení“ v horní liště nevede: úvod má vlastní
	   tlačítko a po odscrollování nastoupí spodní lišta s tímtéž tlačítkem.
	   Dvě stejné výzvy na jedné obrazovce by jen mačkaly název webu. */
	.nav-cta {
		display: none;
	}
}

/* ---------- patička ---------- */
footer {
	padding-block: 52px;
	background: var(--vz-inkoust);
	color: rgba(var(--vz-papir-rgb), 0.68);
	font-size: 0.9rem;
	line-height: 1.6;
}
.foot-mrizka {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
}
footer h4 {
	margin-bottom: 12px;
	font-family: var(--vz-serif);
	font-weight: 300;
	font-size: 1.15rem;
	color: var(--vz-papir);
}
footer p {
	margin: 0;
}
footer a {
	color: rgba(var(--vz-papir-rgb), 0.8);
	text-decoration: none;
}
footer a:hover {
	color: var(--vz-oranz);
}
footer .drobne {
	margin: 40px 0 0;
	padding-top: 22px;
	border-top: 1px solid rgba(var(--vz-papir-rgb), 0.12);
	font-size: 0.8125rem;
	color: rgba(var(--vz-papir-rgb), 0.62);
} /* .5 mělo kontrast 4.0, tohle 5.3 */
@media (max-width: 919px) {
	.foot-mrizka {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
	.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 (jen mobil) ── */
.vz-mbar {
	display: none;
}
@media (max-width: 919px) {
	.vz-mbar {
		display: flex;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(var(--vz-papir-rgb), 0.9);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-top: 1px solid var(--vz-linka);
		transform: translateY(110%);
		transition: transform 0.35s var(--vz-ease);
	}
	.vz-mbar.show {
		transform: none;
	}
	.vz-mbar__cta {
		flex: 1;
	}
	/* kulaté tlačítko „Napsat zprávu“ – stejná výška i rámeček jako tlačítko Obrys */
	.vz-mbar__msg {
		flex: none;
		width: var(--vz-tl-vyska);
		height: var(--vz-tl-vyska);
		border-radius: 50%;
		box-sizing: border-box;
		border: 1.5px solid var(--vz-inkoust);
		display: grid;
		place-items: center;
		color: var(--vz-inkoust);
		transition: var(--vz-tl-prechod);
	}
	.vz-mbar__msg:hover {
		background: var(--vz-inkoust);
		color: var(--vz-papir);
	}
	.vz-mbar__msg svg {
		width: 22px;
		height: 22px;
	}
	body.vz-ma-listu footer {
		padding-bottom: calc(52px + var(--vz-tl-vyska) + 20px + env(safe-area-inset-bottom, 0px));
	}
}

/* ── Závoj: přechod mezi kotvami (logo pulzuje, panel přejede přes obrazovku) ── */
.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 0.38s var(--vz-ease) forwards;
}
.vz-zavoj.out {
	animation: vz-zavoj-out 0.45s 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).
 * Stejná sada pro všechny stránky:
 *   vz-oddil            sekce stránky (svislé odsazení)
 *   vz-oddil--uvod      úvod pod plovoucí navigací
 *   vz-oddil--bez-horniho
 *   vz-obal             šířka obsahu + boční okraj
 *   vz-hlavicka         nadpisek + nadpis + perex sekce
 *   vz-sloupce--55-45 … dva sloupce (na mobilu pod sebou)
 *   vz-mrizka--290 …    karty v mřížce (min. šířka karty)
 *   vz-listovani        na mobilu vodorovné listování palcem
 * ===================================================================== */

/* Gutenberg dává blokům ve skupinách 24px mezeru; v sekcích šablony
   rozestupy řídí tyto styly (původní landing page to nemění) */
/* Specificita 0,1,0 – stejná jako výchozí rozestup WordPressu (:root :where(.is-layout-flow) > *),
   který přebije díky pořadí. Komponenty dál v tomhle souboru si vlastní okraj nastaví a vyhrají
   – dřív to bylo 0,2,0 a třeba mostu „Nevíte, kam patříte?“ to sebralo horní odstup. */
:where(.vz-oddil).is-layout-flow > *,
.vz-oddil :where(.is-layout-flow) > * {
	margin-block-start: 0;
}

/* Sousední sekce se o mezeru dělí – každá nese polovinu, takže mezi nimi je
   --vz-oddil přesně jednou a nikdy zdvojeně. Sekce s vlastním podkladem
   (mlha, šalvěj, tmavá) dostávají o trochu víc, ať se text netiskne na hranu pruhu. */
.vz-oddil {
	padding-block: calc(var(--vz-oddil) / 2);
	position: relative;
	font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.125rem);
	line-height: 1.65;
}
.vz-oddil:is(.is-style-vz-mlha, .is-style-vz-salvej, .is-style-vz-plocha, .is-style-vz-tmava) {
	padding-block: calc(var(--vz-oddil) * 0.625);
}
.vz-oddil--uvod {
	padding-block: calc(var(--vz-nav-h) + clamp(32px, 6vw, 64px)) clamp(48px, 8vw, 96px);
	overflow: hidden;
}
.vz-oddil--bez-horniho {
	padding-top: 0;
}
.vz-obal {
	max-width: var(--vz-obal);
	margin-inline: auto;
	padding-inline: var(--vz-gutter);
	box-sizing: border-box;
}

/* ---------- typografická hierarchie ----------
   Kontejner je v :where(), takže tahle pravidla mají nejnižší možnou
   specificitu. Styly bloků (formulář, panely …) WordPress vkládá do stránky
   před style.css – při shodné specificitě by jim základní typografie
   přepsala okraje a velikosti. Takhle vyhraje každá třída komponenty.
   H1 a H2 patkové (Fraunces 300), H3 záměrně bezpatkové (Manrope 600):
   dřív byly H1–H3 všechny patkové, takže třetí úroveň vypadala jako menší
   druhá a stránka neměla dno. Šířku nadpisu omezuje míra, ne obal – dlouhý
   nadpis se zalomí po ~20 znacích, místo aby se táhl přes celou stránku.
   Odstavec nemá být širší než 62 znaků; `:where` má nulovou specificitu,
   takže každé výslovné max-width vyhraje. */
:where(.vz-oddil) :where(h1, h2) {
	font-family: var(--vz-serif);
	font-weight: 300;
	margin: 0;
	text-wrap: balance;
}
:where(.vz-oddil) :where(p) {
	margin: 0;
	max-width: var(--vz-mira);
}
:where(.vz-oddil) :where(p.has-text-align-center) {
	margin-inline: auto;
}
:where(.vz-oddil) h1 {
	font-size: clamp(2.375rem, 6.4vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	max-width: var(--vz-mira-nadpis);
}
:where(.vz-oddil) h1 em {
	font-style: italic;
	color: var(--vz-zelen);
}
:where(.vz-oddil) h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	max-width: var(--vz-mira-h2);
}
:where(.vz-oddil) h2 em {
	font-style: italic;
	color: var(--vz-oranz-nadpis);
}
/* na inkoustu je ztmavená oranžová málo kontrastní (3,0) – tam čistá oranž (4,4) */
:is(.is-style-vz-tmava, .is-style-vz-zaver) :is(h2, h3) em {
	color: var(--vz-oranz);
}
:where(.vz-oddil) h3 {
	font-family: var(--vz-sans);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0;
	text-wrap: balance;
	max-width: var(--vz-mira-h2);
}
:where(.vz-oddil) a {
	color: inherit;
}

/* Hlavička sekce: štítek → nadpis 16px, nadpis → perex 24px, pak 48px na obsah.
   Nad nadpisem je vždy víc místa než pod ním (2:1) – nadpis tak opticky patří
   k textu pod sebou, ne k tomu nad sebou. */
.vz-hlavicka {
	display: grid;
	gap: var(--vz-m4);
	margin-bottom: var(--vz-m7);
}
.vz-hlavicka > :is(h1, h2) + .is-style-vz-perex {
	margin-top: var(--vz-m2);
}
.vz-hlavicka--bez-mezery {
	margin-bottom: 0;
}

.vz-sloupce {
	display: grid;
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}
.vz-sloupce--stred {
	align-items: center;
}
/* Sloupce zarovnané spodní hranou: kratší sloupec (fotka) končí na stejné čáře jako delší text,
   vzduch zůstane nahoře vedle nadpisu – ne jako useknutý prázdný roh dole. */
.vz-sloupce--dno {
	align-items: end;
}
@media (min-width: 920px) {
	.vz-sloupce--50-50 {
		grid-template-columns: 1fr 1fr;
	}
	.vz-sloupce--55-45 {
		grid-template-columns: 1.1fr 0.9fr;
	}
	.vz-sloupce--57-43 {
		grid-template-columns: 1.35fr 1fr;
	}
	.vz-sloupce--60-40 {
		grid-template-columns: 1.2fr 0.8fr;
	}
	.vz-sloupce--45-55 {
		grid-template-columns: 0.9fr 1.1fr;
	}
	.vz-sloupce--40-60 {
		grid-template-columns: 0.8fr 1.2fr;
	}
	.vz-sloupce--auto-1 {
		grid-template-columns: auto 1fr;
		gap: clamp(22px, 3vw, 40px);
	}
}

.vz-mrizka {
	display: grid;
	gap: var(--vz-m6);
}
.vz-mrizka--240 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.vz-mrizka--280 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.vz-mrizka--290 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.vz-mrizka--3 {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 919px) {
	.vz-mrizka--3 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 919px) {
	.vz-listovani {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		margin-inline: calc(-1 * var(--vz-gutter));
		padding-inline: var(--vz-gutter);
		scroll-padding-inline: var(--vz-gutter);
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.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: 8px;
	margin-top: 14px;
	font-size: 0.85rem;
	opacity: 0.8;
}
.vz-listovani-tecky i {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.3;
	transition:
		width 0.25s,
		opacity 0.25s;
}
.vz-listovani-tecky i.on {
	width: 18px;
	border-radius: 3px;
	opacity: 1;
	color: var(--vz-salvej);
}
@media (max-width: 919px) {
	.vz-listovani-tecky {
		display: flex;
	}
}

/* ---------- úvodní sekce: jeden rytmus na všech stránkách ----------
   štítek → 16 → H1 → 24 → perex → 48 → tlačítka → 24 → řádek důvěry.
   Úvodní sloupec se pozná bez vlastní třídy: je to první svislý stoh v úvodu.
   Selektor je dvoutřídní schválně – musí přebít `margin-block-start: 0`,
   kterým sekce ruší výchozí rozestupy Gutenbergu. */
.vz-oddil--uvod .vz-obal > .vz-stoh:first-child {
	display: block;
}
.vz-oddil--uvod .vz-obal > .vz-stoh:first-child > * + * {
	margin-block-start: var(--vz-m5);
}
.vz-oddil--uvod .vz-obal > .vz-stoh:first-child > .is-style-vz-nadpisek + :is(h1, h2) {
	margin-block-start: var(--vz-m4);
}
.vz-oddil--uvod .vz-obal > .vz-stoh:first-child > .is-style-vz-perex + :is(.wp-block-buttons, .wp-block-list) {
	margin-block-start: var(--vz-m7);
}

/* ---------- pomocné třídy (Pokročilé → Další CSS třídy) ---------- */

/* Přilepený sloupec: kratší ze dvou sloupců jede při scrollu s delším, takže
   vedle dlouhého textu nebo formuláře nezůstane prázdný roh. Jen od 920 px –
   pod tím jsou sloupce pod sebou. Nadřazená mřížka musí mít align-items: start
   (vz-sloupce to má) a žádný předek nesmí mít overflow: hidden. */
@media (min-width: 920px) {
	.vz-lepici {
		position: sticky;
		top: calc(var(--vz-nav-h) + var(--vz-m5));
		align-self: start;
	}
}
.vz-stoh {
	display: grid;
	gap: 16px;
	align-content: start;
}
.vz-stoh--6 {
	gap: 6px;
}
.vz-stoh--8 {
	gap: 8px;
}
.vz-stoh--10 {
	gap: 10px;
}
.vz-stoh--12 {
	gap: 12px;
}
.vz-stoh--14 {
	gap: 14px;
}
.vz-stoh--16 {
	gap: 16px;
}
.vz-stoh--22 {
	gap: 22px;
}
@media (max-width: 919px) {
	.vz-stoh--22 {
		gap: 16px;
	}
}
.vz-oddil .vz-mezera-nahore {
	margin-top: var(--vz-m5);
}
.vz-obal--uzky {
	max-width: 860px;
}
.vz-oddil--tesny {
	padding-block: 0;
}
.vz-oddil--zaver {
	padding-block: clamp(var(--vz-m7), 7vw, var(--vz-m9));
}
.vz-mrizka--340 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: var(--vz-m6);
	align-items: start;
}
@media (max-width: 919px) {
	.vz-skryt-mobil {
		display: none !important;
	}
	.vz-nahoru-mobil {
		order: -1;
		justify-self: start;
	}
}
/* `vz-mezinadpis` býval bezpatkový mezinadpis – od 1.2.2 je to výchozí vzhled H3, třída jen doplní mezeru pod sebou */
.vz-oddil h3.vz-mezinadpis {
	margin-bottom: var(--vz-m3);
}

/* Souvislý text (příběh) */
.vz-text {
	display: grid;
	gap: 1.1em;
	max-width: 36em;
	color: var(--vz-inkoust-jemny);
	padding-top: 6px;
}
.vz-text strong {
	color: var(--vz-inkoust);
	font-weight: 500;
}

/* Jméno v úvodu: pod jménem role menším zeleným písmem */
.vz-oddil h1.vz-jmeno em {
	display: block;
	font-size: 0.52em;
	margin-top: 0.25em;
}

/* Karta v tmavé sekci je jen obrys (situace u omluvy) */
.is-style-vz-tmava .is-style-vz-karta {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.14);
	border-radius: 20px;
	padding: 24px;
	transition:
		border-color 0.3s,
		background 0.3s;
}
@media (hover: hover) {
	.is-style-vz-tmava .is-style-vz-karta:hover {
		border-color: rgba(255, 255, 255, 0.34);
		background: rgba(255, 255, 255, 0.03);
	}
}
.vz-oddil .vz-pripady {
	margin-top: var(--vz-m5);
}

/* Ceník: karta ceny (název, pro koho, cena, fajfky, tlačítko dole) */
.vz-karta-ceny {
	display: grid;
	gap: 18px;
	grid-template-rows: auto auto auto 1fr auto;
	padding: 28px 26px 26px;
	transition: border-color 0.15s ease-out;
}
.vz-karta-ceny h3 {
	font-size: 1.375rem;
}
.vz-karta-ceny > h3 + p {
	margin-top: -14px;
	font-size: 0.95rem;
	color: var(--vz-inkoust-jemny);
}
.vz-karta-ceny .wp-block-buttons,
.vz-karta-ceny .wp-block-button,
.vz-karta-ceny .wp-block-button__link {
	width: 100%;
}
@media (hover: hover) {
	.vz-karta-ceny:hover {
		border-color: var(--vz-inkoust);
	}
}
@media (max-width: 919px) {
	.vz-karta-ceny {
		padding: 22px 20px 20px;
		gap: 14px;
	}
	.vz-karta-ceny > h3 + p {
		margin-top: -10px;
	}
	.vz-karta-ceny h3 {
		font-size: 1.25rem;
	}
}
.vz-oddil .vz-platba {
	margin-top: var(--vz-m5);
	display: grid;
	gap: var(--vz-m5);
	padding: var(--vz-m6);
}
/* nadpis platby je věta s kurzívou – zůstává patkový jako H2 */
.vz-platba h3 {
	font-family: var(--vz-serif);
	font-weight: 300;
	font-size: clamp(1.7rem, 3.2vw, 2.2rem);
	line-height: 1.12;
}
.vz-platba h3 em {
	font-style: italic;
	color: var(--vz-oranz-nadpis);
}
.vz-platba__perex {
	color: var(--vz-inkoust-jemny);
	font-size: 1rem;
	max-width: 40em;
}
.vz-oddil .vz-poznamky {
	margin-top: var(--vz-m5);
	gap: var(--vz-m4);
}

/* Služby: celá karta je odkaz (odkaz v nadpisu se roztáhne přes kartu) */
/* Pozor: třída `vz-sluzba` nese dvě různé věci.
   Tady je to karta služby z O mně – vždy se stylem „Karta“, proto ta dvojitá
   třída v selektoru. Blok s dlaždicemi na úvodní stránce je níž v souboru
   a pozná se podle hlavičky uvnitř; bez tohohle rozlišení by si obě sady
   pravidel lezly do zelí (třeba neviditelný překryv odkazu přes celý blok). */
.is-style-vz-karta.vz-sluzba {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 14px;
	padding: 30px 28px;
	border-radius: 24px;
	transition:
		transform 0.25s,
		box-shadow 0.25s,
		border-color 0.25s;
}
.is-style-vz-karta.vz-sluzba h3 {
	font-size: 1.375rem;
}
.is-style-vz-karta.vz-sluzba h3 a {
	text-decoration: none;
}
.is-style-vz-karta.vz-sluzba h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.is-style-vz-karta.vz-sluzba p {
	color: var(--vz-inkoust-jemny);
	font-size: 1rem;
}
.vz-sluzba__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.9rem;
	padding-top: 14px;
	border-top: 1px solid var(--vz-linka);
}
.vz-sluzba__meta span {
	color: var(--vz-oranz-tmava);
	font-weight: 500;
}
/* Tmavá karta služby: obecné .is-style-vz-karta.vz-sluzba p má vyšší specificitu
   než tmavá varianta v group.css – popis a délka tu byly tmavě šedé na inkoustu (1,8 : 1). */
.is-style-vz-karta.vz-sluzba.vz-karta--tmava p {
	color: var(--vz-mlha-modra);
}
.is-style-vz-karta.vz-sluzba.vz-karta--tmava .vz-sluzba__meta span {
	color: var(--vz-oranz-na-tmave);
}
@media (hover: hover) {
	.is-style-vz-karta.vz-sluzba:hover {
		border-color: var(--vz-inkoust);
	}
}
@media (max-width: 919px) {
	.is-style-vz-karta.vz-sluzba {
		padding: 24px 22px;
	}
}

/* Úvod s dýchající skvrnou v pozadí */
.vz-skvrna::before {
	content: "";
	position: absolute;
	right: -140px;
	top: -90px;
	width: 440px;
	height: 440px;
	border-radius: 46% 54% 60% 40% / 50% 42% 58% 50%;
	background: var(--vz-salvej-svetla);
	z-index: 0;
	animation: vz-skvrna 11s ease-in-out infinite;
	pointer-events: none;
}
.vz-skvrna > * {
	position: relative;
	z-index: 1;
}
@keyframes vz-skvrna {
	50% {
		transform: scale(1.07) rotate(8deg);
		border-radius: 56% 44% 42% 58% / 44% 58% 42% 56%;
	}
}
@media (max-width: 919px) {
	.vz-skvrna::before {
		width: 300px;
		height: 300px;
		right: -150px;
		top: -120px;
	}
}

/* Čí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--3 .vz-cislo {
	font-size: clamp(1.7rem, 3vw, 2.2rem);
}
.vz-cisla > * {
	padding: 28px 20px 26px;
	border-left: 1px solid var(--vz-linka);
}
.vz-cisla > :first-child {
	border-left: 0;
	padding-left: 0;
}
.vz-cisla .vz-cislo {
	font-family: var(--vz-serif);
	font-size: clamp(2.4rem, 4.6vw, 3.4rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.vz-cisla .vz-cislo sub {
	font-size: 0.45em;
	color: var(--vz-oranz-tmava);
	margin-left: 0.15em;
	vertical-align: baseline;
}
.vz-cisla .vz-cislo + p {
	margin-top: 10px;
	font-size: 0.95rem;
	color: var(--vz-inkoust-jemny);
	max-width: 14em;
}
@media (max-width: 919px) {
	.vz-cisla {
		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: 20px 12px 18px;
	}
	.vz-cisla .vz-cislo + p {
		font-size: 0.9rem;
	}
}
@media (max-width: 919px) {
	.vz-cisla--3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.vz-cisla--3 > :nth-child(-n + 2) {
		border-bottom: 0;
	}
	.vz-cisla--3 > :nth-child(3) {
		border-left: 1px solid var(--vz-linka);
		padding-left: 12px;
	}
}
@media (max-width: 559px) {
	.vz-cisla .vz-cislo {
		font-size: 2.1rem;
	}
	.vz-cisla--3 .vz-cislo {
		font-size: 1.5rem;
	}
}

/* Portrét: sem patří blok Obrázek s výřezem fotky; skvrny dýchají v pozadí */
.vz-portret {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 100%;
	width: 100%;
}
.vz-portret::before,
.vz-portret::after {
	content: "";
	position: absolute;
	border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%;
	animation: vz-portret 9s ease-in-out infinite;
}
.vz-portret::before {
	inset: 0 12% 18% 0;
	background: var(--vz-oranz-svetla);
	opacity: 0.7;
	animation-delay: -4s;
	border-radius: 44% 56% 60% 40% / 52% 40% 60% 48%;
}
.vz-portret::after {
	inset: 8% 0 0 6%;
	background: var(--vz-salvej-svetla);
}
.vz-portret > * {
	position: relative;
	z-index: 1;
}
.vz-portret .wp-block-image,
.vz-portret__misto {
	position: absolute;
	inset: 4% 6% 0 10%;
	margin: 0;
	display: grid;
	place-items: end center;
	z-index: 1;
}
.vz-portret .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom;
}
.vz-portret__misto {
	inset: 16% 17% 0 18%;
	border-radius: 48% 48% 8% 8% / 38% 38% 8% 8%;
	background: linear-gradient(170deg, #c9c2b3, #a79f8f);
	color: #fff;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	place-items: center;
	padding: 20px;
}
.vz-portret__stitek {
	position: absolute;
	left: 0;
	bottom: 8%;
	z-index: 2;
	max-width: 62%;
	font-size: 0.9rem;
	line-height: 1.4;
	padding: 14px 18px;
	border-radius: 18px;
	background: rgba(var(--vz-papir-rgb), 0.86);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 12px 30px -18px rgba(var(--vz-inkoust-rgb), 0.45);
}
.vz-portret__stitek strong {
	display: block;
	font-family: var(--vz-serif);
	font-weight: 300;
	font-size: 1.3rem;
}
@keyframes vz-portret {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.035);
	}
}
@media (max-width: 919px) {
	.vz-portret {
		max-width: 300px;
		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-oranz);
}
.vz-svg .f-o {
	fill: var(--vz-oranz);
}
.vz-svg .s-z {
	stroke: var(--vz-zelen);
}
.vz-svg .f-z {
	fill: var(--vz-zelen);
}
.vz-svg .s-s {
	stroke: var(--vz-salvej);
}
.vz-svg .f-s {
	fill: var(--vz-salvej);
}
.vz-svg .s-p {
	stroke: var(--vz-papir);
}
.vz-svg .f-p {
	fill: var(--vz-papir);
}
.vz-svg .f-k {
	fill: var(--vz-karta);
}
.vz-svg .s-m {
	stroke: var(--vz-mlha-modra);
}
.vz-svg .f-m {
	fill: var(--vz-mlha-modra);
}
.vz-svg .f-j {
	fill: var(--vz-inkoust-jemny);
}

/* Kresba se „dokreslí“ při prvním zobrazení (třída is-in od vz.js) */
.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: 0.3s;
}
.is-in .vz-svg .draw.d3,
.is-drawing .draw.d3 {
	animation-delay: 0.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;
	}
}

/* =====================================================================
 * LANDING PAGE – úvod s videem, karty formátů/pilířů, cenovka, závěr.
 * (individuální a párová terapie; sdílené s ostatními stránkami)
 * ===================================================================== */

/* ---------- úvod přes celou obrazovku s videem na pozadí ----------
   Individuální a párová terapie: pod úvodem běží tichá smyčka z terapeutovny
   (blok Video smyčka, bloky/smycka/). Video a obsah leží na sobě v jedné
   buňce mřížky, ne přes position: absolute – editor bloků každému bloku
   vnucuje position: relative a s absolutním pozicováním by se v něm rozpadl.

   Odsazení nese obsah (.vz-obal), ne sekce: buňka mřížky tak sahá od horní
   hrany okna až dolů a video pokryje celou sekci včetně místa pod lištou. */
.vz-oddil.vz-uvod-media {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 100svh;
	padding-block: 0;
	overflow: hidden;
}
.vz-uvod-media > * {
	grid-area: 1 / 1;
	min-width: 0;
}
.vz-uvod-media > .vz-obal {
	position: relative;
	z-index: 2;
	align-self: center;
	padding-block: calc(var(--vz-nav-h) + clamp(32px, 6vw, 64px)) clamp(72px, 8vw, 96px);
}
.vz-uvod-media > :is(.vz-smycka, .vz-uvod-media__media) {
	align-self: stretch;
}
.vz-uvod-media h1 {
	max-width: 15ch;
}
@media (max-width: 919px) {
	.vz-oddil.vz-uvod-media {
		min-height: 0;
	}
	.vz-uvod-media > .vz-obal {
		padding-block: calc(var(--vz-nav-h) + var(--vz-m4)) var(--vz-m9);
	}
}

/* Stránky vytvořené podle 1.2 mají místo bloku Video smyčka skupinu
   s popisem záběru (vz-uvod-media__media). Vypadá stejně jako smyčka bez videa. */
.vz-uvod-media__media {
	position: relative;
	display: grid;
	align-content: end;
	justify-items: center;
	overflow: hidden;
	background: linear-gradient(135deg, var(--vz-inkoust), var(--vz-zelen-tmava));
}
.vz-uvod-media__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--vz-zavoj-smycky);
	pointer-events: none;
}
.vz-uvod-media__popis {
	display: none;
}
@media (max-width: 919px) {
	.vz-uvod-media__media::after {
		background: var(--vz-zavoj-smycky-mobil);
	}
}

/* ---------- karta s ilustrací na pozadí (formáty, pilíře) ---------- */
.vz-karta--podklad {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: var(--vz-m3);
	padding: var(--vz-m6);
}
.vz-karta--podklad > .vz-ilustrace {
	position: absolute;
	right: -34px;
	bottom: -34px;
	z-index: -1;
	width: 260px;
	height: 260px;
	opacity: 0.32;
	pointer-events: none;
	margin: 0;
	transition:
		opacity 0.4s,
		transform 0.6s cubic-bezier(0.34, 1.56, 0.3, 1);
}
@media (hover: hover) {
	.vz-karta--podklad:hover > .vz-ilustrace {
		opacity: 0.45;
		transform: scale(1.06) rotate(-4deg);
	}
}
@media (max-width: 919px) {
	.vz-karta--podklad > .vz-ilustrace {
		width: 200px;
		height: 200px;
		right: -40px;
		bottom: -40px;
	}
}
.vz-karta--podklad h3 {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}
.vz-motto {
	font-family: var(--vz-serif);
	font-style: italic;
	font-size: 1.12rem;
	color: var(--vz-inkoust-jemny);
}
.vz-ramec {
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--vz-linka);
	font-size: 0.86rem;
	color: var(--vz-inkoust-jemny);
	display: flex;
	gap: 6px 18px;
	flex-wrap: wrap;
}
.vz-ramec > * {
	margin: 0;
}
.vz-ramec strong {
	font-weight: 500;
	color: var(--vz-inkoust);
}
/* odkaz „Jak to vypadá na sezení →“ pod kartou */
.vz-vice {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	gap: 7px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--vz-zelen-tmava);
	text-decoration: none;
	margin-top: 16px;
}
.vz-vice::after {
	content: "→";
}
.vz-vice:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.vz-karta--podklad .vz-vice {
	margin-bottom: 0;
}
.vz-most {
	max-width: 640px;
	margin: var(--vz-m7) auto 0;
	text-align: center;
	background: rgba(var(--vz-zelen-rgb), 0.08);
	border: 1.5px dashed rgba(var(--vz-zelen-rgb), 0.35);
	border-radius: 20px;
	padding: 26px 30px;
}
.vz-most p {
	margin: 0;
}
.vz-serif {
	font-family: var(--vz-serif);
	font-size: 1.35rem;
	display: block;
	margin-bottom: 8px;
	color: var(--vz-zelen-tmava);
}

/* ---------- ilustrace vedle odstavce (tělo, most) ---------- */
.vz-telo-radek {
	display: flex;
	gap: 18px;
	align-items: center;
}
.vz-telo-radek > .vz-ilustrace {
	width: 92px;
	height: 92px;
	flex: none;
	margin: 0;
}
.vz-telo-radek > p {
	margin: 0;
	font-size: 1rem;
	color: var(--vz-inkoust-jemny);
}
@media (max-width: 559px) {
	.vz-telo-radek {
		gap: 14px;
	}
	.vz-telo-radek > .vz-ilustrace {
		width: 72px;
		height: 72px;
	}
}

/* ---------- portrét u častých otázek ---------- */
.vz-portret-radek {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-top: 26px;
}
.vz-portret-radek > p {
	margin: 0;
	font-family: var(--vz-serif);
	font-style: italic;
	font-size: 1.08rem;
	color: var(--vz-inkoust-jemny);
}

/* ---------- cenovka na tmavém (landing) ---------- */
.vz-cenovka {
	background: rgba(var(--vz-papir-rgb), 0.06);
	border: 1px solid rgba(var(--vz-papir-rgb), 0.15);
	border-radius: 22px;
	padding: clamp(24px, 3vw, 32px) clamp(22px, 3vw, 34px);
}
.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), 0.78);
}
.vz-cenovka .vz-sazba {
	border: 0;
	padding-block: 0;
}
.vz-cenovka ul {
	margin-top: 20px;
}
.vz-upozorneni {
	margin-top: 22px;
	padding: 20px 22px;
	border-radius: 16px;
	background: rgba(var(--vz-oranz-rgb), 0.16);
	border: 1px solid rgba(var(--vz-oranz-rgb), 0.45);
	font-size: 0.92rem;
	backdrop-filter: blur(3px);
}
.vz-upozorneni strong {
	font-weight: 500;
	color: color-mix(in srgb, var(--vz-oranz) 55%, #fff);
} /* kontrast 4.9 na tmavé kartě */
/* V kartě s cenou je poznámka jen oddělený odstavec – vlastní oranžová plocha
   uvnitř karty byla plocha v ploše. Oranžovou nese jen tučný začátek věty. */
.vz-cenovka .vz-upozorneni {
	padding: var(--vz-m5) 0 0;
	border: 0;
	border-top: 1px solid rgba(var(--vz-papir-rgb), 0.15);
	border-radius: 0;
	background: none;
	backdrop-filter: none;
}
.vz-podpis {
	font-family: var(--vz-serif);
	font-style: italic;
	font-size: 1.2rem;
	color: var(--vz-salvej);
}

/* ---------- služba na úvodní stránce (hlavička + dlaždice témat) ----------
   Každá ze tří služeb je vlastní sekce se střídavým podkladem – ten je
   odděluje, ne rámeček. Blok služby proto nemá plochu: dřív měl šedé pole
   a uvnitř bílé dlaždice, tedy plochu v ploše (třináctkrát za sebou).
   Předěl nese nadpis se svislou oranžovou značkou a jedna vlasová linka. */
.vz-sluzba:has(> .vz-sluzba-radek) {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}
.vz-sluzba-radek {
	padding: 0 0 var(--vz-m5);
	margin-bottom: var(--vz-m6);
	border-bottom: 1px solid var(--vz-linka);
}
.vz-sluzba-radek h3 {
	position: relative;
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	margin: 0 0 var(--vz-m1);
	padding-left: 18px;
}
/* svislá značka u nápisu – drobnost, díky které se název nedá přehlédnout */
.vz-sluzba-radek h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.18em;
	bottom: 0.18em;
	width: 4px;
	border-radius: 4px;
	background: var(--vz-oranz);
}
/* Odkaz v nadpisu má aspoň 44 px na výšku – rozšíří se o svislé odsazení, které se hned vrátí záporným okrajem, takže rozvržení zůstává. */
.vz-sluzba-radek h3 a {
	display: inline-block;
	padding-block: 10px;
	margin-block: -10px;
	text-decoration: none;
}
.vz-sluzba-radek p {
	margin: 0 0 0 18px;
	font-size: 1rem;
	color: var(--vz-inkoust-jemny);
}
/* Pod dlaždicemi jen nejčastější témata – zbytek je na stránce služby */
.vz-sluzba-vse {
	margin: var(--vz-m5) 0 0;
}
/* Karta „Kolik to stojí“ u formuláře: ceny v řádcích, pravidla drobněji */
.vz-ceny-radky + p {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--vz-inkoust-jemny);
}
.vz-sluzba-vse .vz-vice {
	margin-top: 0;
	font-weight: 600;
}

/* ---------- průběh terapie: ilustrace + číslované kroky v kartě ---------- */
.vz-prubeh {
	margin-top: var(--vz-m7);
	display: grid;
	gap: var(--vz-m4);
}
.vz-prubeh .vz-kroky {
	margin-top: var(--vz-m1);
}

/* ---------- plochy se skvrnami ---------- */
.vz-skvrny {
	position: relative;
	overflow: hidden;
}
.vz-skvrny::before,
.vz-skvrny::after {
	content: "";
	position: absolute;
	border-radius: var(--vz-organic);
	background: rgba(var(--vz-salvej-rgb), 0.35);
	animation: vz-plynuti calc(var(--vz-dech) * 2) ease-in-out infinite;
	pointer-events: none;
}
.vz-skvrny::before {
	width: 380px;
	height: 380px;
	top: -160px;
	left: -120px;
}
.vz-skvrny::after {
	width: 320px;
	height: 320px;
	bottom: -140px;
	right: -100px;
	animation-delay: -6s;
}
.vz-skvrny > * {
	position: relative;
	z-index: 1;
}
.is-style-vz-tmava.vz-skvrny::before {
	background: rgba(var(--vz-zelen-rgb), 0.3);
	width: 520px;
	height: 520px;
	top: auto;
	left: auto;
	bottom: -260px;
	right: -230px;
}
.is-style-vz-tmava.vz-skvrny::after {
	display: none;
}

/* ---------- styl bloku „Píše se“ (nadpis, odstavec, citát) ----------
   Věta se objevuje znak po znaku, jako když ji někdo říká. Text je
   v HTML celý; JS ho jen rozdělí na znaky, které od začátku drží místo
   (nic neposkakuje). Bez JavaScriptu, v editoru a při vypnutých
   animacích je text rovnou vidět.

   U nadpisu a odstavce je to styl bloku („Píše se“), u citátu se přidá
   třída `vz-pise` – aby nekolidovala se stylem „Velký citát“.
   Na stránce patří nejvýš jednou a nikdy do úvodního nadpisu: 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 0.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 ---------- */
/* Třída se dává obalu; jeho přímí potomci se odhalí po sobě (JS přidá .is-in).
   Vše je pod `html.vz-js`, aby bez JavaScriptu (a v editoru bloků) bylo hned vidět. */
html.vz-js .vz-odhal > * {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 0.8s ease,
		transform 0.8s cubic-bezier(0.22, 0.9, 0.3, 1);
}
html.vz-js .vz-odhal.is-in > * {
	opacity: 1;
	transform: none;
}
html.vz-js .vz-odhal.is-in > :nth-child(2) {
	transition-delay: 0.09s;
}
html.vz-js .vz-odhal.is-in > :nth-child(3) {
	transition-delay: 0.18s;
}
html.vz-js .vz-odhal.is-in > :nth-child(4) {
	transition-delay: 0.27s;
}
html.vz-js .vz-odhal.is-in > :nth-child(n + 5) {
	transition-delay: 0.36s;
}
@media (prefers-reduced-motion: reduce) {
	html.vz-js .vz-odhal > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}