/*
 * Komponentní CSS podle schváleného návrhu (prototyp lukaskrajanek-v2).
 *
 * Design tokeny vlastní theme.json; tento soubor je nikdy nepřepisuje ani
 * nekopíruje, jen na ně odkazuje přes vygenerované proměnné. Jednorázové
 * hodnoty komponent (poměry stran, konkrétní odsazení jedné sekce) jsou tady
 * záměrně — do škály v theme.json nepatří, protože se nikde neopakují.
 *
 * Estetika: krémová editorial, monochrom. Barvu nesou výhradně fotografie.
 *
 * ## Proč některá pravidla začínají `:root`
 *
 * Jádro vypisuje z theme.json pravidla `:root :where(…)`; `:where()` do
 * specificity nepřidává nic, takže je to remíza s běžným `.trida`. Frontend ji
 * vyhrává pořadím, editor prohrává — globální styly do canvasu vkládá
 * Gutenberg až po stylech theme. Kolidují `blockGap: 0` (jádro z něj udělá
 * `:root :where(.is-layout-flow) > * { margin-block: 0 }`) a výchozí tlačítko.
 * `:root` remízu odstraní bez změny hodnot. Kdo přidá odsazení bloku, který je
 * přímým potomkem skupiny, doplní `:root` také — a přidá ho i modifikátoru
 * téhož pravidla, jinak ho základní pravidlo přebije.
 * Kontrolu dělá `tools/compare-editor.mjs`.
 */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

img,
svg {
	display: block;
	max-width: 100%;
}

ul,
ol {
	list-style: none;
}

address {
	font-style: normal;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

body.is-locked {
	overflow: hidden;
	height: 100vh;
}

/* ---------- Most k WordPress core blokům ----------
   Core layout přidává vlastní rozestupy mezi potomky. Sekce návrhu si
   rozestupy řídí samy, takže je tady vypínáme cíleně, ne globálním resetem. */
.wp-block-group.lk-section > * + * {
	margin-block-start: 0;
}

.lk-section {
	position: relative;
}

.lk-inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* Běžná stránka, kterou založí klient. Návrhové sekce si velikost i proklad
   řídí samy a globální default proto kopíruje prototyp (1rem / normal); tady
   ale žádný návrh není, takže text potřebuje čitelné výchozí hodnoty. */
.lk-prose {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.65;
}

/* Proklad a prostrkání nadpisů nejsou v theme.json globálně: návrh je nastavuje
   u každé komponenty zvlášť a globální hodnota by je tiše přepsala — projevilo
   se to zalomením nadpisu výzvy o řádek jinak než v prototypu. Tady jde o obsah
   bez návrhu, takže si default zaslouží. */
.lk-prose :is( h1, h2, h3, h4, h5, h6 ) {
	line-height: 1.15;
	letter-spacing: var(--wp--custom--tracking--tight);
}

.lk-prose > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ---------- Typografie textové stránky ----------
   Právní stránky (`/zasady-cookies/`, `/ochrana-osobnich-udaju/`) jsou jediný
   dlouhý plynulý text na webu a jediné stránky na `page.html`; landing
   stránky, úvodní stránka ani příběhy `lk-prose` nemají, takže sem sahá jen
   obsah bez návrhu.

   Škála písma v theme.json je stavěná pro návrh, ne pro čtení: naměřeno
   2. 9. 2026 na 1440 px měl H1 z presetu `xxl` **115 px**, H2 z `xl` 72 px
   a H3 41,6 px, takže nadpis druhé úrovně byl větší než titulek většiny
   webů. Nadpisy se tady proto odvozují od velikosti textu odstavce
   (`md`), ne z presetů — poměry 2 / 1,55 / 1,25 drží pořadí úrovní na všech
   šířkách a škálují s textem, zatímco preset by musel mít vlastní clamp pro
   každou úroveň. `styles.elements.h1–h3` v theme.json se kvůli tomu měnit
   nesmí: ty vlastní hero a sekce návrhu. */
.lk-prose .wp-block-post-title {
	font-size: 2em;
}

.lk-prose .entry-content h2 {
	font-size: 1.55em;
}

.lk-prose .entry-content h3 {
	font-size: 1.25em;
}

.lk-prose .entry-content h4 {
	font-size: 1.1em;
}

/* Měřítko čtení. Obsahová šířka 62rem je stavěná pro sekce návrhu; na plynulém
   textu z ní vznikalo **91 znaků na řádek** (naměřeno 2. 9. 2026 na 1440 px),
   tedy dvakrát tolik, co oko udrží při zpětném skoku na začátek dalšího řádku.
   `--wp--custom--measure` (44rem) dává při velikosti `md` 64 až 73 znaků
   (naměřeno na obou právních stránkách).

   Zarovnání se tady nenastavuje záměrně. Layout `constrained` drží potomkům
   `margin-left` i `margin-right` na `auto` **pravidlem s `!important`**, takže
   ho z themu přebít nejde a užší blok se vycentruje — vlastní
   `margin-inline: 0 auto` tu chvíli byl a byl to mrtvý kód. Na stránce, kde
   není nic než text, je osa v pořádku: titulek i obsah mají stejnou šířku,
   takže drží jednu levou hranu (ověřeno, oba 296 px na 1440 px). */
.lk-prose .wp-block-post-title,
.lk-prose .entry-content {
	max-width: var(--wp--custom--measure);
}

/* Vertikální rytmus uvnitř obsahu. Globální `blockGap: 0` z theme.json dává
   potomkům `is-layout-*` `margin-block: 0` a `.lk-prose > * + *` na ně
   nedosáhne — je to přímý potomek `main`, kdežto odstavce jsou o úroveň níž
   v `post-content`. Naměřeno 2. 9. 2026: **všechny bloky obsahu měly nulové
   okraje**, takže odstavce, nadpisy i seznamy tvořily jeden slitý blok.

   Nad nadpisem je mezera větší než pod ním, aby nadpis patřil k textu, který
   uvádí, ne k tomu, který končí. Pravidlo „po nadpisu“ je záměrně poslední:
   při stejné specificitě vyhrává, takže H3 hned za H2 dostane malou mezeru
   místo sekční — a přesně tuhle dvojici právní stránky mají. */
.lk-prose .entry-content > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.lk-prose .entry-content > * + h2 {
	margin-block-start: var(--wp--preset--spacing--60);
}

.lk-prose .entry-content > * + :is( h3, h4 ) {
	margin-block-start: var(--wp--preset--spacing--50);
}

.lk-prose .entry-content > :is( h2, h3, h4 ) + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Odrážky. Globální reset výš vypíná `list-style` kvůli seznamům v sekcích
   návrhu, které jsou mřížky a ne výčty; v plynulém textu tím ale seznam
   přestal být poznat od odstavců. `revert` vrací značku prohlížeče, takže
   `ul` i `ol` dostanou tu svou bez druhého pravidla. */
.lk-prose .entry-content :is( ul, ol ) {
	padding-inline-start: 1.5em;
	list-style: revert;
}

.lk-prose .entry-content li::marker {
	color: var(--wp--preset--color--subtle);
}

.lk-prose .entry-content li + li {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Názvy cookies v textu jsou `code`. Bez tohohle pravidla je vykreslí
   výchozím Courierem, který se s Outfitem ani Playfairem nepotká. */
.lk-prose .entry-content code {
	font-family: ui-monospace, "SF Mono", "Cascadia Mono", menlo, monospace;
	font-size: 0.9em;
}

/* Tonální rytmus krému. Tmavá je vyhrazená patičce — tmavá sekce uprostřed
   stránky signalizuje konec a lidé přestanou scrollovat. */
.lk-bg-cream {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.lk-bg-cream-2 {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.lk-bg-dark {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--on-dark);
}

/* ---------- Typografické utility ---------- */
.eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	font-weight: 500;
	color: var(--wp--preset--color--subtle);
}

em {
	font-style: normal;
	font-weight: 600;
}

/* Editorial odkaz s podtržením, které při hoveru odjíždí. */
.ilink {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--md);
}

/* Šipka jako maska, ne inline SVG: core bloky arbitrární značky uvnitř textu
   neudrží a klient by je při editaci smazal. Maska dědí barvu, takže funguje
   nad krémem i nad tmavou patičkou. Sedí v ::before s flex order, protože
   ::after drží podtržení — a podtržení musí zůstat mimo box, jinak by odkaz
   narostl o odsazení a rozešel se s návrhem. */
.ilink::before {
	content: "";
	order: 2;
	flex: none;
	width: 0.9em;
	height: 0.9em;
	background: currentColor;
	mask: url("../images/arrow.svg") center / contain no-repeat;
	transition: transform 0.5s var(--wp--custom--ease--out);
}

.ilink:hover::before {
	transform: translate(3px, -3px);
}

.ilink::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.35em;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(1);
	transform-origin: right;
	transition: transform 0.55s var(--wp--custom--ease--out);
}

.ilink:hover::after {
	transform: scaleX(0);
}

/* ---------- Dotykové cíle ----------
   WCAG 2.5.8 chce cíl nejméně 24 × 24 CSS px. Řádkové odkazy webu měly 19 až
   21 px na výšku, protože jejich box je celý daný `line-height` písma —
   týkalo se to loga, položek menu, tlačítka „Menu“, odkazů v patičce
   i podtržených CTA `.ilink` (docs/SEO-AUDIT.md, nález S6).

   Zvětšuje se **jen plocha, na kterou jde kliknout, ne vzhled.** U řádkových
   prvků svislé odsazení výšku řádku nemění, takže stačí samo o sobě.
   U prvků, ze kterých udělal `display` blok nebo flex položku, se odsazení
   vyruší záporným okrajem a posunuté pseudoprvky s podtržením se vrátí
   o stejnou hodnotu zpátky. Ověřeno proti prototypu, odchylka zůstává nula. */
.wp-block-site-title a,
.footer__col p a,
.footer__fine a,
.contact__alt a,
.cinfo__block a {
	padding-block: 3px;
}

.wp-block-navigation-item:not( .nav__link--cta )
	> .wp-block-navigation-item__content,
.ilink {
	padding-block: 3px;
	margin-block: -3px;
}

.wp-block-navigation-item:not( .nav__link--cta )
	> .wp-block-navigation-item__content::after {
	bottom: -1px;
}

.ilink::after {
	bottom: calc(-0.35em + 3px);
}

/* ---------- Filmové zrno ---------- */
.grain {
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Vlastní kurzor ---------- */
.cursor {
	position: fixed;
	top: 0;
	left: 0;
	/* Nad lightboxem (100), jinak by nad otevřenou fotkou zmizel. */
	z-index: 110;
	pointer-events: none;
	mix-blend-mode: difference;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform;
}

.cursor__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fff;
	transition: width 0.45s var(--wp--custom--ease--out),
		height 0.45s var(--wp--custom--ease--out);
}

/* Rozšířený kurzor = plná obrácená paleta, ne stříbrný blend */
.cursor.is-expanded {
	mix-blend-mode: normal;
}

.cursor.is-expanded .cursor__dot {
	width: 84px;
	height: 84px;
	background: var(--wp--preset--color--contrast);
}

.cursor__label {
	position: absolute;
	color: var(--wp--preset--color--base);
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 500;
	opacity: 0;
	transition: opacity 0.3s var(--wp--custom--ease--out);
	white-space: nowrap;
}

.cursor.is-expanded .cursor__label {
	opacity: 1;
}

@media (hover: none), (pointer: coarse) {
	.cursor {
		display: none;
	}
}

/* ---------- Hlavička a navigace ----------
   Původní návrh měl mix-blend-mode: difference. Blend tvoří izolovanou grupu,
   takže tmavé CTA tlačítko uvnitř by se invertovalo.

   Výchozí stav je plná krémová plocha s tenkou linkou dole, bez přechodu
   a bez rozostření pozadí. Rozhodnutí klienta 28. 8. 2026 — nad galerií byl
   poloprůhledný přechod nečitelný a na mobilu se spodní okraj hlavičky slíval
   s obsahem. `backdrop-filter` odpadl s ním; dělal z hlavičky containing block
   pro `position: fixed` panelu menu.

   Nad celoplošným hero úvodní stránky se ale hlavička propadá do fotky
   (`is-transparent`, rozhodnutí klienta 28. 8. 2026) a po jeho opuštění se
   vrací sem. Průhlednost **přidává** JavaScript, nikdy neubírá: bez něj
   zůstane hlavička krytá, což je čitelný stav nad každou sekcí. */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: clamp(1.1rem, 2vw, 1.9rem) var(--wp--preset--spacing--gutter);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--custom--line--soft);
	transition: background-color 0.4s var(--wp--custom--ease--out),
		border-color 0.4s var(--wp--custom--ease--out),
		color 0.4s var(--wp--custom--ease--out);
}

/* ---------- Hlavička nad celoplošným hero ----------
   Písmo krémové, podklad žádný. Kontrast drží horní pruh ztmavení v hero
   (`.hero--full::after`), ne hlavička sama — proto tenhle stav platí jen tam,
   kde ten pruh existuje. Třídu přepíná `initHeaderOverHero()` v motion.js. */
.site-header.is-transparent {
	color: var(--wp--preset--color--on-dark);
	background-color: transparent;
	border-bottom-color: transparent;
}

/*
 * Otevřený panel menu na mobilu překrývá celou obrazovku krémovou plochou,
 * takže krémové písmo hlavičky by v něm zmizelo. Průhlednost se proto ruší už
 * v CSS, ne až v JS — panel otevírá `core/navigation` sám a jeho třídu nemá
 * smysl sledovat na dvou místech.
 */
.site-header.is-transparent:has(.is-menu-open) {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
}

/* CTA se obrací: nad fotkou je krémové s tmavým písmem, na hover naopak.
   `:not(:has(...))` je nutné — v otevřeném panelu zůstává tmavé tlačítko,
   krémové by na krémové ploše zmizelo. */
.site-header.is-transparent:not(:has(.is-menu-open))
	.nav__link--cta
	> .wp-block-navigation-item__content {
	background: var(--wp--preset--color--on-dark);
}

.site-header.is-transparent:not(:has(.is-menu-open))
	.wp-block-navigation
	.nav__link--cta
	> .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--dark);
}

.site-header.is-transparent:not(:has(.is-menu-open))
	.nav__link--cta
	> .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--dark);
}

.site-header.is-transparent:not(:has(.is-menu-open))
	.wp-block-navigation
	.nav__link--cta
	> .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--on-dark);
}

/* Bez `min-width: 0` název vytlačí přepínač menu z obrazovky. */
.brand {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

/* ---------- Navigace ----------
   Stavíme na `core/navigation` s inline položkami: nevzniká tím žádná entita
   v databázi (ověřeno, 0 postů wp_navigation), takže menu zůstává v Gitu a
   klient kvůli němu nepotřebuje edit_theme_options. Overlay na mobilu obsluhuje
   nativní Interactivity API včetně focus trapu, což je lepší než vlastní JS
   z prototypu. Tady se řeší jen vzhled. */
/* Logo nese stejné písmo jako wordmark v patičce (`.footer__wordmark span`):
   Playfair Display v řezu 500 s prostrkáním `tight`. Hlavička a patička tak
   drží jednu značku, ne dvě — dosud tady byl Outfit prostrkaný na 0.18em, tedy
   font navigace, a logo se od položek menu lišilo jen mezerami mezi písmeny.

   Verzálky jsou pryč: jméno se čte tak, jak je zapsané v názvu webu.
   Rozhodl vlastník projektu 2. 9. 2026 proti variantě s verzálkami, která
   by se patičce blížila víc.

   Velikost je jednorázová hodnota mimo škálu písma, protože je to jediný
   prvek, který ji potřebuje: `sm` (1rem) je velikost položek navigace a
   Playfair na ní působí menší než Outfit, `md` (až 1.3rem) by logo naopak
   zvětšil o třetinu. 1.2rem je o 20 % větší než dosud a bez verzálek je to
   „o trošičku“, které bylo zadané — samotné +15 % působilo po ztrátě verzálek
   menší než původní logo. Šířka 130 px se vejde i na 320 px, kde má logo
   místo 192 px (naměřeno na šesti šířkách od 320 do 1440 px). */
.brand a {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.2rem;
	letter-spacing: var(--wp--custom--tracking--tight);
	font-weight: 500;
	white-space: nowrap;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wp-block-navigation__container {
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.75rem);
}

.wp-block-navigation-item__content {
	position: relative;
	font-size: var(--wp--preset--font-size--sm);
}

.wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.5s var(--wp--custom--ease--out);
}

.wp-block-navigation-item__content:hover::after,
.wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* CTA v menu je plné tmavé tlačítko — ostré hrany drží tvarový jazyk webu.
   Barvu je nutné zapsat se čtyřmi třídami: core má na položkách navigace
   pravidlo `color: inherit` se záměrně zdvojenou třídou, aby přebilo theme.
   Se slabším selektorem měl tmavý podklad tmavý text (kontrast 1,11). */
.nav__link--cta > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--dark);
	padding: 0.62rem 1.15rem;
	transition: background-color 0.3s var(--wp--custom--ease--out),
		color 0.3s var(--wp--custom--ease--out);
}

.wp-block-navigation
	.nav__link--cta
	> .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--on-dark);
}

/* U CTA nahrazuje podtržení šipka; pseudoprvek je stejný, jen jiná role. */
.nav__link--cta > .wp-block-navigation-item__content::after {
	position: static;
	width: 0.8em;
	height: 0.8em;
	transform: none;
	transition: transform 0.4s var(--wp--custom--ease--out);
	mask: url("../images/arrow.svg") center / contain no-repeat;
}

.nav__link--cta > .wp-block-navigation-item__content:hover::after {
	transform: translate(2px, -2px);
}

.nav__link--cta > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--contrast);
}

.wp-block-navigation
	.nav__link--cta
	> .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--base);
}

/* ---------- Přepínač mobilního menu ----------
   Dvě linky kreslí jediný pseudoprvek dvěma přechody; druhý pseudoprvek na
   tlačítku není potřeba a text „Menu“ zůstává skutečným textem. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;

	/*
	 * Svislé odsazení dělá z 20px vysokého textu 44px dotykový cíl a záporný
	 * okraj vrátí hlavičku do původní výšky. Nula tu byla proto, aby tlačítko
	 * nevyčnívalo z řádku hlavičky — o to se teď stará ten okraj.
	 */
	padding: 12px 0;
	margin-block: -12px;
	color: inherit;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 1.6rem;
	height: 0.7rem;
	background: linear-gradient(currentColor, currentColor) top left / 100% 1px
			no-repeat,
		linear-gradient(currentColor, currentColor) bottom left / 100% 1px
			no-repeat;
}

.wp-block-navigation__responsive-container-close::before {
	content: "";
	width: 1.1rem;
	height: 1.1rem;
	background: currentColor;
	mask: url("../images/close.svg") center / contain no-repeat;
}

/* Otevřený panel: krémová plocha přes celou obrazovku, velké patkové odkazy
   doleva. Barvy dávají `overlayBackgroundColor` a `overlayTextColor`
   v parts/header.html; zdvojená třída dorovnává specificitu core. */
.is-menu-open.is-menu-open.is-menu-open {
	padding: 7rem var(--wp--preset--spacing--gutter) 3rem;
}

/* Obaly od core nemají výšku, obsah by se neměl kam vycentrovat. */
.is-menu-open .wp-block-navigation__responsive-close,
.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1 1 auto;
	align-items: flex-start;
	justify-content: center;
	justify-content: safe center; /* dosažitelnost na nízké obrazovce */
	padding-top: 0;
}

.is-menu-open.is-menu-open.is-menu-open .wp-block-navigation__container {
	flex: 0 0 auto;
	align-items: flex-start;
	gap: clamp(0.5rem, 2vh, 1.25rem);
}

/* Křížek na řádek přepínače; dialog začíná až za odsazením panelu. */
.is-menu-open .wp-block-navigation__responsive-container-close {
	top: calc(clamp(1.1rem, 2vw, 1.9rem) - 7rem);
}

.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: clamp(1.9rem, 8.5vw, 2.8rem);
	line-height: 1.15;
}

/* CTA si drží plochu tlačítka; core v panelu nuluje odsazení. */
.is-menu-open.is-menu-open.is-menu-open
	.nav__link--cta
	> .wp-block-navigation-item__content {
	margin-top: 1rem;
	padding: 0.62rem 1.15rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md);
}

/* Sedm položek vedle názvu webu potřebuje 722 až 846 px, takže zlom
   návrhu (720) ani core (600) nestačí. */
@media (min-width: 600px) and (max-width: 899.98px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
	}
}

/* ---------- Tlačítka ----------
   Stylujeme přímo `core/button`. Prototyp měl uvnitř tlačítka dva spany
   a inline SVG; core blok je neudrží, takže kolečko se šipkou kreslí ::after
   a nájezd barvy ::before. Ostré hrany drží tvarový jazyk webu.

   `:root` viz hlavička souboru: jádro vypisuje výchozí tlačítko selektorem
   `:root :where(.wp-element-button, .wp-block-button__link)` a bez `:root` by
   nám v editoru přebilo tučnost, prostrkání i odsazení. Varianty `is-style-*`
   níž mají stejnou specificitu a rozhoduje pořadí, takže platí dál. */
:root .wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.95rem 1.5rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	letter-spacing: 0.01em;
	border-radius: 0;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid var(--wp--preset--color--contrast);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	transition: color 0.4s var(--wp--custom--ease--out);
}

/* Nájezd plochy zdola. z-index -1 ho drží pod textem tlačítka. */
.wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--contrast);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.55s var(--wp--custom--ease--out);
}

.wp-block-button__link:hover::before {
	transform: scaleY(1);
}

.wp-block-button__link:hover {
	color: var(--wp--preset--color--base);
}

/* Kolečko i šipka jsou uvnitř jednoho SVG. Kdyby kolečko dělal border,
   maska by ho odmaskovala spolu s pozadím a zbyla by jen šipka. */
.wp-block-button__link::after {
	content: "";
	flex: none;
	width: 1.9rem;
	height: 1.9rem;
	background: currentColor;
	mask: url("../images/button-icon.svg") center / contain no-repeat;
	transition: transform 0.5s var(--wp--custom--ease--out);
}

.wp-block-button__link:hover::after {
	transform: translate(2px, -2px);
}

.wp-block-button__link:active {
	transform: scale(0.98);
}

/* Plná varianta: výchozí stav je tmavý, nájezd ho vybílí */
.is-style-solid .wp-block-button__link {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.is-style-solid .wp-block-button__link::before {
	background: var(--wp--preset--color--base);
}

.is-style-solid .wp-block-button__link:hover {
	color: var(--wp--preset--color--contrast);
}

.is-style-big .wp-block-button__link {
	font-size: var(--wp--preset--font-size--md);
	padding: 1.15rem 1.4rem 1.15rem 1.9rem;
}

/* ---------- HERO úvodní stránky ----------
   Společný základ; podobu dává modifikátor `hero--full` o blok níž. Do
   28. 8. 2026 tady bydlela koláž čtyř plovoucích fotek (`hero__ph--1` až
   `--4`) a celý blok byl stavěný kolem ní — proto zbyla třída `hero` bez
   modifikátoru. Koláž nahradila celoplošná fotka, viz docs/DIARY.md. */
.hero {
	position: relative;
	/*
	 * `svh`, ne `dvh`: `dvh` se na mobilu mění pokaždé, když prohlížeč
	 * schová nebo ukáže lištu, a sekce vysoká na celý viewport by při každé
	 * takové změně překreslila layout pod sebou — stránka pod prstem
	 * poskočí. `svh` je výška s **viditelnými** lištami, takže se nemění a
	 * hero se vejde celé i s nimi.
	 */
	min-height: 100svh;
	width: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	padding: 9rem var(--wp--preset--spacing--gutter) 5rem;
}

/*
 * Šířka textu se váže na okno, ale ne celé: přes 62 vw se nadpis roztáhne na
 * jeden dlouhý řádek a přestane držet pohromadě jako blok. Strop 1150 px pak
 * krotí širokoúhlé displeje, kde by 62 vw byl přes tisíc dvě stě pixelů.
 */
.hero__type {
	position: relative;
	z-index: 3;
	max-width: min(62vw, 1150px);
}

:root .hero__intro {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 1.8rem;
}

/*
 * Velikost se váže na šířku textového sloupce, ne na celé okno, jinak by se
 * nadpis po zúžení sloupce lámal na tři a čtyři řádky.
 */
.hero__title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: clamp(2.6rem, 5.6vw, 6.6rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.hero__title em {
	padding-bottom: 0.08em;
	display: inline-block;
}

:root .hero__cta {
	margin-top: 2.6rem;
}

/* ---------- HERO: celoplošná fotka ----------
   Text sedí u spodní hrany, fotka drží celé okno. Sekce nese `hero` i tenhle
   modifikátor: na `hero` visí nástup animace v `motion.js`, modifikátor mění
   jen vzhled. Pozadí je tmavé, protože ho vidět nemá — je to podklad pro
   případ, kdy se fotka ještě nestáhla. */
.hero--full {
	/*
	 * Síla obou ztmavení. Jsou to proměnné, protože se ladí podle fotky:
	 * prosvícená louka potřebuje výrazně víc než tmavý parket.
	 *
	 * `--hero-scrim-top` drží čitelnost průhledné hlavičky, takže se po výměně
	 * fotky musí přeměřit. Se snímkem z 28. 8. 2026 (pár ve vlčím máku, nahoře
	 * prosvícená obloha) vychází nejhorší místo pod písmem 4,93 : 1 na
	 * 1440×900 — nad hranicí AA, ale s malou rezervou.
	 */
	--hero-scrim: 0.82;
	--hero-scrim-top: 0.72;

	align-items: flex-end;
	color: var(--wp--preset--color--on-dark);
	background: var(--wp--preset--color--dark);
	padding-bottom: clamp(3.5rem, 9vh, 7rem);
}

/* Fotka je `core/image`, ne CSS pozadí: klient ji vyměňuje týmž tlačítkem
   jako každou jinou a WordPress k ní dopočítá `srcset`. Vrstvení proto řeší
   `position`, ne `background-image`. */
.hero--full .hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	pointer-events: none;
}

.hero--full .hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;

	/* Nad středem, ne na něm: u fotek na výšku by střed usekl obličeje. */
	object-position: center 42%;
}

/*
 * Ztmavení je pseudoprvek sekce, ne blok. Kdyby byl blok, klient by ho smazal
 * a nechal nadpis na světlé fotce nečitelný; takhle mu zbývá jen výměna fotky.
 *
 * Přechody jsou dva. Spodní nese nadpis a odkaz, horní je jediné, o co se
 * opírá čitelnost průhledné hlavičky — ta sama pod sebou nemá nic. Musí být
 * silný: krémové písmo nad prosvícenou oblohou má bez ztmavení kontrast pod
 * 1,5 : 1 a hodnoty kolem 0,4 ho nezvednou ani na dvojku. Uprostřed se obojí
 * rozestoupí, aby fotka měla kde dýchat.
 */
.hero--full::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to bottom,
			rgb(18 16 14 / var(--hero-scrim-top)) 0%,
			rgb(18 16 14 / calc(var(--hero-scrim-top) * 0.83)) 7%,
			rgb(18 16 14 / calc(var(--hero-scrim-top) * 0.36)) 15%,
			rgb(18 16 14 / 0) 26%
		),
		linear-gradient(
			to top,
			rgb(18 16 14 / var(--hero-scrim)) 0%,
			rgb(18 16 14 / calc(var(--hero-scrim) * 0.86)) 20%,
			rgb(18 16 14 / calc(var(--hero-scrim) * 0.62)) 46%,
			rgb(18 16 14 / 0.05) 78%
		);
}

/*
 * Text je nad ztmavením i nad fotkou. Stín je široký a slabý — na kontrast se
 * spoléhat nedá u písma, jehož tahy jsou u Playfairu místy jednopixelové,
 * ale vidět nemá být.
 */
.hero--full .hero__type {
	text-shadow: 0 2px 30px rgb(18 16 14 / 0.45);
}

/*
 * Nadřazený text zůstává v plné krémové, ne v `on-dark-muted`. Ztlumená
 * varianta má proti čistě tmavému podkladu kontrast 7 : 1, ale pod ztmavením
 * nad prosvícenou fotkou spadne kolem 2 : 1 — a to je malé verzálkové písmo,
 * které potřebuje 4,5 : 1. Sekundární dojem tady dělá velikost a prostrkání,
 * ne barva.
 *
 * Ze stejného důvodu tu od 29. 8. 2026 není ani `opacity: 0.86`. Ta dělala
 * přesně to, co odmítá odstavec výš, jen jinou cestou: naměřeno ze skutečných
 * pixelů podkladu vycházel nejhorší bod 3,10 : 1 na 1440×900 a 3,88 : 1 na
 * 390×844 (docs/SEO-AUDIT.md, nález S6). Samotné zrušení průhlednosti
 * nestačilo — muselo se s ním zesílit i ztmavení ve střední části sekce,
 * kde nadřazený text leží.
 */
/* `:root` kvůli kolizi s `:root .hero__intro` výš. */
:root .hero--full .hero__intro {
	color: var(--wp--preset--color--on-dark);
}

/* Nájezd fotky. Text si obsluhuje `motion.js` (visibility + SplitText), fotka
   ne — ta je v DOM od prvního paintu a bez `html.js` se ukáže rovnou. */
@media (prefers-reduced-motion: no-preference) {
	html.js .hero--full .hero__media img {
		animation: hero-media-in 2.6s var(--wp--custom--ease--out) both;
	}
}

@keyframes hero-media-in {
	0% {
		transform: scale(1.09);
		opacity: 0;
	}

	32% {
		opacity: 1;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* ---------- Hero podstránky ---------- */
.phero {
	padding: clamp(9rem, 17vh, 13rem) var(--wp--preset--spacing--gutter)
		clamp(3.5rem, 7vw, 7rem);
}

:root .phero__title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--mega);
	line-height: 1.02;
	letter-spacing: -0.03em;
	margin-top: 1.2rem;
}

:root .phero__lead {
	margin-top: 2.2rem;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	max-width: 54ch;
}

:root .phero__cta {
	margin-top: clamp(2rem, 3.5vw, 3rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 2.2rem;
}

/* ---------- Statement ---------- */
.statement {
	padding: var(--wp--preset--spacing--section)
		var(--wp--preset--spacing--gutter);
}

.statement__inner {
	max-width: 1300px;
	margin-inline: auto;
}

.statement__text {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.26;
	letter-spacing: -0.01em;
}

.statement__text .word-dim {
	opacity: 0.14;
}

/* ---------- Maska řádku při nástupu nadpisu ----------
   Řádky nadpisu přilétají střídavě: sudé zdola, liché shora. Liché tím musí
   projít pásmem řádku nad sebou. Naměřeno 29. 8. 2026 na úvodní stránce při
   1440 × 900: druhý řádek zasahoval do pásma prvního až o 157 px kolem 300
   až 400 ms a do nuly se srovnal kolem jedné sekundy. Do CLS se to nepočítá
   (je to `transform`), ale vypadá to jako chyba sazby.

   Maska na řádku to řeže. Bez odsazení by ale ořezala dolní dotažnice (y, g,
   j) a českou diakritiku nad verzálkami (Á, Ř) — proto `padding-block`, které
   masku roztáhne, a záporný `margin-block`, který ten přírůstek vrátí zpátky,
   takže se výška nadpisu nezmění ani o pixel.

   Platí jen po dobu nástupu: `motion.js` masku po dohrání sundá, aby řádek
   nezůstal navždy formátovacím kontextem navíc. */
.sp-line {
	overflow: hidden;
	padding-block: 0.2em;
	margin-block: -0.2em;
}

.sp-line.is-landed {
	overflow: visible;
}

/* ---------- Hlavička sekce ---------- */
:root .section-head {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto var(--wp--preset--spacing--head);
}

.section-head__title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.08;
	letter-spacing: var(--wp--custom--tracking--tight);
}

/* Kompaktní varianta: nadpis nesmí sežrat obrazovku určenou fotkám */
:root .section-head--tight {
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.section-head--tight .section-head__title {
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: -0.01em;
	margin-top: 0.35rem;
}

/* ---------- Celoplošná fotka se zoom-parallaxem ---------- */
.showcase {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.showcase__fig {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.showcase__fig img {
	width: 100%;
	height: 128%;
	object-fit: cover;
	will-change: transform;
}

/* ---------- Marquee ---------- */
.marquee {
	background: var(--wp--preset--color--surface);
	padding: clamp(1.5rem, 3vw, 2.8rem) 0;
	overflow: hidden;
}

.marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.marquee__item {
	flex: none;
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: clamp(1.8rem, 4vw, 3.6rem);
	white-space: nowrap;
	color: var(--wp--preset--color--contrast);
	padding-right: 2.5rem;
}

/* Oddělovač mezi opakováními je dekorace, ne text — proto pseudoprvek.
   Vlastní značka uvnitř odstavce by editaci v editoru nepřežila.

   **Maska, ne znak.** Do 3. 9. 2026 tu byl `content: "✳"` (U+2733). Playfair
   pro ten znak glyf nemá, takže o vzhledu rozhodoval fallback — a ten se na
   každé platformě liší: desktop propadl na Georgii a nakreslil tenkou hnědou
   hvězdičku, jak návrh chtěl, ale **WebKit na mobilu propadl na emoji font
   a udělal z oddělovače zelený obrázek s bílou hvězdou** (ověřeno v mobilním
   WebKitu 3. 9. 2026, nahlásil vlastník projektu ze skutečného telefonu).
   Znaky s emoji variantou proto do dekorace nepatří.

   `mask` přes barvu z palety je stejný idiom jako u `.ilink::before`: kresba
   je v `assets/images/star.svg`, barvu drží CSS, a na výsledku se nepodílí
   žádný font. Velikost je v `em`, aby oddělovač škáloval s písmem pásu,
   které je samo fluidní. */
.marquee__item::after {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.5em;
	margin-left: 2.5rem;
	background: var(--wp--preset--color--subtle);
	mask: url("../images/star.svg") center / contain no-repeat;
}

/* ---------- Rozcestník žánrů ---------- */
.services {
	position: relative;
	padding: var(--wp--preset--spacing--section)
		var(--wp--preset--spacing--gutter);
}

.svc-list {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.svc {
	position: relative;
	border-top: 1px solid var(--wp--custom--line--soft);
}

/* Odkaz je v názvu žánru, ale klikací plocha má být celý řádek. Pseudoprvek
   ho roztáhne přes skupinu, takže nevzniká druhý odkaz bez textu. */
.svc__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Zdroj náhledu, který sleduje kurzor. Na myši je fotka schovaná a skript ji
   přenáší na plovoucí prvek; na dotyku se ukazuje rovnou v řádku (viz mobilní
   blok níž), protože přejetí myší tam nikdy nepřijde. */
.svc__preview {
	display: none;
}

.svc:last-child {
	border-bottom: 1px solid var(--wp--custom--line--soft);
}

.svc__row {
	display: grid;
	grid-template-columns: 1.1fr 1.5fr auto;
	align-items: baseline;
	gap: 1.5rem;
	padding: clamp(1.8rem, 3.4vw, 3rem) 0;
	transition: padding-left 0.6s var(--wp--custom--ease--out);
}

.svc__row:hover {
	padding-left: clamp(1rem, 2vw, 2.5rem);
}

.svc__name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	transition: opacity 0.4s;
}

.svc__desc {
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--muted);
}

.svc__price {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--muted);
}

.svc-list:hover .svc:not(:hover) .svc__name {
	opacity: 0.35;
}

.svc-follow {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 70;
	width: 22vw;
	max-width: 360px;
	aspect-ratio: 7 / 5;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	will-change: transform, opacity;
}

.svc-follow img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Blok fotka + text ---------- */

/*
 * Sekce je mřížka i obal s okraji zároveň, takže `max-width` musí okraje
 * obsahovat; jinak je vnitřek o dva guttery užší než ostatní sekce. `:root`
 * řeší remízu s jádrem, které na `.alignfull` v `constrained` rodiči nuluje
 * vodorovné marginy — sekce pak nebyla vystředěná (ADR-006).
 */
:root .about {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(2rem, 5vw, 6rem);
	align-items: center;
	max-width: calc(
		var(--wp--style--global--wide-size) + 2 *
			var(--wp--preset--spacing--gutter)
	);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--section)
		var(--wp--preset--spacing--gutter);
}

.about__ph {
	grid-column: 1 / 6;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.about__ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}

/*
 * `7 / 12` nechávalo dvanáctý sloupec i s mezerou prázdný, takže sekce končila
 * o 114 px dřív než ostatní (1440 px) a vypadala odsunutá doleva. Šířku řádku
 * drží `max-width` na textu, ne prázdný sloupec.
 */
.about__body {
	grid-column: 7 / -1;
}

:root .about__title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.04;
	margin-bottom: 1.8rem;
}

:root .about__text {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.65;
	max-width: 46ch;
	margin-bottom: 2.4rem;
	color: var(--wp--preset--color--muted);
}

/* ---------- Proces ---------- */
.process {
	padding: var(--wp--preset--spacing--section)
		var(--wp--preset--spacing--gutter);
}

.steps {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 5vw, 6rem);
}

.step {
	border-top: 1px solid var(--wp--custom--line--soft);
	padding-top: 1.6rem;
}

:root .step__t {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--lg);
	margin-bottom: 0.8rem;
}

.step__d {
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--muted);
	line-height: 1.55;
	max-width: 34ch;
}

/* ---------- Ceník ---------- */
.pricing {
	padding: var(--wp--preset--spacing--section)
		var(--wp--preset--spacing--gutter);
}

.tiers {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

.tier {
	border: 1px solid var(--wp--custom--line--soft);
	padding: clamp(1.8rem, 2.5vw, 2.8rem);
	display: flex;
	flex-direction: column;
}

.tier--feature {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--contrast);
}

:root .tier__name {
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.6rem;
}

:root .tier__price {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: clamp(2.6rem, 4.5vw, 4rem);
	line-height: 1;
	margin-bottom: 2rem;
}

.tier__cur {
	font-size: 0.34em;
	font-family: var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--subtle);
	margin-left: 0.4em;
	letter-spacing: 0.05em;
}

/* Štítek nad názvem balíčku, například „Nejoblíbenější“ */
:root .tier__flag {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.9rem;
}

/* Cena vyjádřená textem, například „individuálně“.
   `:root` i u modifikátoru, jinak ho přebije základní pravidlo. */
:root .tier__price--txt {
	font-size: clamp(1.7rem, 2.8vw, 2.5rem);
	line-height: 1.15;
	padding: 0.35em 0;
}

:root .tier__list {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-top: auto;
}

.tier__list li {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	padding-left: 1.2rem;
	position: relative;
	line-height: 1.45;
}

.tier__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 7px;
	height: 1px;
	background: var(--wp--preset--color--contrast);
}

:root .pricing__note {
	max-width: 62ch;
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--subtle);
	line-height: 1.6;
}

/* ---------- Doplňky a příplatky ---------- */
.addons {
	padding: var(--wp--preset--spacing--section)
		var(--wp--preset--spacing--gutter);
}

/* Když doplňky navazují přímo na ceník, tvoří s ním jeden blok a horní
   odsazení by ho rozseklo. Samostatně stojící sekce odsazení potřebuje. */
.pricing + .addons {
	padding-top: 0;
}

.addons__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.addon {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem 2.5rem;
	padding: clamp(1.3rem, 2.2vw, 1.8rem) 0;
	border-top: 1px solid var(--wp--custom--line--soft);
}

.addons__list .addon:last-child {
	border-bottom: 1px solid var(--wp--custom--line--soft);
}

.addon__name {
	font-size: var(--wp--preset--font-size--md);
}

.addon__price {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

:root .addons__note {
	max-width: 62ch;
	margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--subtle);
	line-height: 1.6;
}

/* ---------- Reference ---------- */
.testimonials {
	padding: var(--wp--preset--spacing--section)
		var(--wp--preset--spacing--gutter);
}

.quotes {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 5rem);
}

.quotes--single {
	grid-template-columns: 1fr;
	max-width: 1020px;
}

.quote {
	border-top: 1px solid var(--wp--custom--line--soft);
	padding-top: 2rem;
}

:root .quote__body {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.32;
	margin-bottom: 1.8rem;
}

.quotes--single .quote__body {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.25;
}

.quote__by {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.02em;
}

:root .quote__role {
	color: var(--wp--preset--color--subtle);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	font-size: var(--wp--preset--font-size--xs);
	margin-top: 0.45rem;
}

/* ---------- FAQ (nativní details, funguje bez JS) ---------- */
.faq {
	padding: var(--wp--preset--spacing--section)
		var(--wp--preset--spacing--gutter);
}

.faq__list {
	max-width: 1020px;
	margin-inline: auto;
}

.faq__item {
	border-top: 1px solid var(--wp--custom--line--soft);
}

.faq__item:last-child {
	border-bottom: 1px solid var(--wp--custom--line--soft);
}

.faq__item > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2rem;
	padding: clamp(1.5rem, 2.6vw, 2.1rem) 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.2;
}

.faq__item > summary::-webkit-details-marker {
	display: none;
}

.faq__item > summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 200;
	font-size: 1.7rem;
	color: var(--wp--preset--color--subtle);
	line-height: 1;
	transition: transform 0.4s var(--wp--custom--ease--out);
}

.faq__item[open] .faq__item > summary::after {
	transform: rotate(45deg);
}

.faq__a {
	padding-bottom: clamp(1.6rem, 2.6vw, 2.2rem);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	max-width: 62ch;
}

/* ---------- Fakta ---------- */
.facts {
	padding: 0 var(--wp--preset--spacing--gutter)
		var(--wp--preset--spacing--section);
}

.facts__grid {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(2rem, 4vw, 4.5rem);
}

.fact {
	border-top: 1px solid var(--wp--custom--line--soft);
	padding-top: 1.5rem;
}

.fact__v {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1;
}

:root .fact__l {
	margin-top: 0.8rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
	max-width: 24ch;
}

/* ---------- Fotomřížka podstránek ---------- */
.pgrid {
	padding: clamp(3rem, 6vw, 6rem) var(--wp--preset--spacing--gutter)
		var(--wp--preset--spacing--section);
}

.pgrid__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(1rem, 2vw, 2.2rem);
	align-items: start;
}

.pgrid__ph {
	overflow: hidden;
	will-change: transform;
}

.pgrid__ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}

.pgrid__ph--a {
	grid-column: 1 / 8;
	aspect-ratio: 7 / 5;
}

:root .pgrid__ph--b {
	grid-column: 9 / 13;
	aspect-ratio: 3 / 4;
	margin-top: clamp(2rem, 6vw, 7rem);
}

:root .pgrid__ph--c {
	grid-column: 2 / 6;
	aspect-ratio: 4 / 5;
	margin-top: clamp(1rem, 4vw, 4rem);
}

:root .pgrid__ph--d {
	grid-column: 7 / 12;
	aspect-ratio: 7 / 5;
	margin-top: clamp(2rem, 7vw, 8rem);
}

/* ---------- Kontaktní CTA ---------- */
.contact {
	padding: var(--wp--preset--spacing--section)
		var(--wp--preset--spacing--gutter);
	text-align: center;
}

.contact__inner {
	max-width: 1200px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

:root .contact__title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--mega);
	line-height: 1;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* Delší titulky (celé věty) o stupeň menší, ať se lámou do dvou řádků.
   `:root` i u modifikátoru, jinak ho přebije základní pravidlo. */
:root .contact__title--long {
	font-size: var(--wp--preset--font-size--xxl);
}

.contact__title em {
	padding-bottom: 0.08em;
	display: inline-block;
}

:root .contact__sub {
	font-size: var(--wp--preset--font-size--md);
	max-width: 40ch;
	margin-bottom: 2.8rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

:root .contact__alt {
	margin-top: 1.8rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.contact__alt a {
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* ---------- Výzva ke kontaktu s formulářem ----------
   Táž sekce jako výzva s tlačítkem, jen s formulářem místo něj. Je na konci
   žánrových stránek, galerie a svatebního příběhu — návštěvník tam nemusí
   nikam klikat, aby se ozval. Sekce je jinak beze změny, včetně náhradního
   telefonu a e-mailu pod formulářem. */
.contact--form .wpcf7 {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-top: clamp(1rem, 2.5vw, 2rem);

	/* Sekce je na střed, formulář v ní ne: popisky polí patří nad levý okraj
	   svého pole, ne nad jeho střed. */
	text-align: left;
}

/* Poznámka o zpracování údajů a tlačítko jsou závěr sekce, ne pole — drží se
   proto zarovnání sekce. */
.contact--form .form__note {
	text-align: center;
}

/* `display: flex` tady musí být zapsané: obal tlačítka je značka Contact
   Formu, ne blok `core/buttons`, takže na stránce není blokový styl jádra,
   který by ho na flex přepnul, a samotné `justify-content` by nemělo na čem
   účinkovat. */
.contact--form .form .wp-block-buttons {
	display: flex;
	justify-content: center;
}

/* ---------- Kontaktní stránka ---------- */
.contact-page {
	padding: clamp(2rem, 4vw, 4rem) var(--wp--preset--spacing--gutter)
		var(--wp--preset--spacing--section);
}

.contact-page__grid {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(3rem, 7vw, 8rem);
	align-items: start;
}

.cinfo {
	display: grid;
	gap: clamp(2rem, 3.5vw, 3rem);
	align-content: start;
}

:root .cinfo__label {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	color: var(--wp--preset--color--subtle);
	margin-bottom: 0.7rem;
}

.cinfo__mail {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.5rem, 2.4vw, 2.3rem);
	line-height: 1.2;
	border-bottom: 1px solid currentColor;
	width: fit-content;
	padding-bottom: 0.12em;
}

.cinfo__item {
	display: block;
	width: fit-content;
	font-size: var(--wp--preset--font-size--md);
}

a.cinfo__item {
	border-bottom: 1px solid var(--wp--custom--line--soft);
	padding-bottom: 2px;
	transition: border-color 0.3s;
}

a.cinfo__item:hover {
	border-color: var(--wp--preset--color--contrast);
}

.cinfo__text {
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
	max-width: 34ch;
}

.cinfo__lines {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--muted);
}

/* ---------- Formulář ---------- */
.form {
	display: grid;
	gap: clamp(1.7rem, 2.8vw, 2.4rem);
}

.form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.7rem, 2.8vw, 2.4rem);
}

.field {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	border-bottom: 1px solid var(--wp--custom--line--soft);
	padding-bottom: 0.8rem;
	transition: border-color 0.3s;
}

.field:focus-within {
	border-color: var(--wp--preset--color--contrast);
}

.field__label {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	color: var(--wp--preset--color--subtle);
}

.field input,
.field select,
.field textarea {
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 300;
	color: var(--wp--preset--color--contrast);
	outline: none;
	border-radius: 0;
}

.field input::placeholder,
.field textarea::placeholder {
	color: var(--wp--preset--color--subtle);
}

.field textarea {
	resize: vertical;
	min-height: 6.5rem;
}

.field select {
	appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23211B15' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.1rem center;
	padding-right: 1.5rem;
}

.form__note {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--subtle);
	line-height: 1.55;
}

.form .btn {
	justify-self: start;
}

/* ---------- Contact Form 7 ----------
   Formulář vykresluje Contact Form 7, značku i mailovou šablonu drží site
   plugin. Návrhové třídy (.form, .form__row, .field) jsou v jeho šabloně,
   takže tady se dostyluje jen to, co plugin přidává sám. Vlastní styly
   pluginu se nevypínají — skrývají za nás skryté kontejnery a stavy. */

/* Obal formuláře nesmí zúžit sloupec mřížky pod jeho podíl. */
.contact-page__grid > .wpcf7 {
	min-width: 0;
}

/* Plugin obaluje každý ovládací prvek inline spanem. V .field, což je flex
   sloupec, by zůstal na šířku obsahu — prvek pak nesedí s návrhem. */
.wpcf7-form-control-wrap {
	display: block;
}

/* Blok, ne inline: textarea i input jsou ve výchozím stavu inline-block, takže
   by pod nimi v blokovém obalu zůstala mezera na sestupníky písma — pole by
   bylo o 4 px vyšší než v návrhu. */
.field .wpcf7-form-control {
	display: block;
	width: 100%;
}

/* Past na roboty. Skrytá i pro odečítač obrazovky: pole nemá co nabídnout
   nikomu, kdo stránku čte. Nepoužívá se display: none, protože prohlížeče
   takové pole nemusí odeslat a past by nefungovala. */
.lk-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Chyba u konkrétního pole. Plugin má vlastní červenou (`#dc3232`), kterou
   paleta návrhu nemá, takže hlášení stojí na barvě `contrast`.

   **Prostrkání tady být nesmí.** Do 3. 9. 2026 mělo `tracking--wide`
   (0.2em) — vzor, který na webu patří popiskům polí a eyebrow, tedy krátkým
   verzálkovým útržkům. Na celé větě z něj vzniklo „T o h l e  p o l e  j e
   p o v i n n é .“ a protože hlášení leží **uvnitř rámečku pole**, nad jeho
   spodní linkou, vypadalo jako stylizovaný obsah pole, ne jako chyba
   (vidět na `/kontakt/` po odeslání prázdného formuláře). Hlášku proto od
   obsahu odlišuje ikona, tučnější řez a normální prostrkání. */
:root .wpcf7-not-valid-tip {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.6rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: normal;
}

:root .wpcf7-not-valid-tip::before {
	content: "";
	flex: none;
	width: 0.95em;
	height: 0.95em;
	background: currentColor;
	mask: url("../images/alert.svg") center / contain no-repeat;
}

.field:has( .wpcf7-not-valid ) {
	border-color: var(--wp--preset--color--contrast);
}

/* ---------- Souhrnné hlášení po odeslání ----------
   Plugin ho ukazuje jen ve stavech, kdy je co říct, a sám si ho v ostatních
   skrývá.

   **Barvu si do něj do 3. 9. 2026 prosazoval plugin.** Jeho stavová pravidla
   (`.wpcf7 form.sent .wpcf7-response-output` a spol.) mají specificitu 0,3,1
   a přebíjela theme s 0,2,1, takže z hlášení svítila zelená `#46b450` po
   odeslání, žlutá `#ffb900` u chyb validace, červená `#dc3232` při selhání
   odeslání a oranžová `#f56e28` u spamu — čtyři barvy, které paleta webu
   nemá. Naměřeno na `/kontakt/`: úspěch i chyba vypadaly jinak jen tím
   pruhem, tedy cizí barvou.

   Selektory proto nesou `[data-status]`. Atribut zvedne specificitu na
   0,4,1 a přebije **všechny** stavy pluginu jedním pravidlem místo šesti —
   včetně těch, které plugin přidá později. Rozlišení stavů drží plocha
   a ikona, ne odstín. */
:root .wpcf7 form[data-status] .wpcf7-response-output {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0;
	padding: 1.05rem 1.3rem;
	border: 0;
	border-left: 2px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
}

/* Ikona je maska, ne znak — ze stejného důvodu jako oddělovač v pásu textů:
   znak by na některé platformě propadl na emoji font. Dědí barvu textu,
   takže v tmavém panelu níž zesvětlá sama. */
:root .wpcf7 form[data-status] .wpcf7-response-output::before {
	content: "";
	flex: none;
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.12em;
	background: currentColor;
	mask: url("../images/alert.svg") center / contain no-repeat;
}

/* Stavy, ve kterých plugin hlášení skrývá. Vypisují se zvlášť, protože
   `display: flex` výš má vyšší specificitu než pluginové
   `.wpcf7 form.init .wpcf7-response-output { display: none }` — bez tohohle
   pravidla by na nedotčeném formuláři svítil prázdný panel. */
:root .wpcf7 form[data-status="init"] .wpcf7-response-output,
:root .wpcf7 form[data-status="resetting"] .wpcf7-response-output,
:root .wpcf7 form[data-status="submitting"] .wpcf7-response-output {
	display: none;
}

/* Odesláno. Tmavá plocha je na tomhle webu signál uzavření — drží ji patička
   a nikde jinde se neobjevuje — a odeslaná poptávka je přesně to. Hláška
   k tomu dostane o stupeň větší písmo: je to jediná věta, kterou návštěvník
   po odeslání hledá, a v krémovém sloupci formuláře ji nesmí přehlédnout. */
:root .wpcf7 form[data-status="sent"] .wpcf7-response-output {
	border-left-color: var(--wp--preset--color--dark);
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--on-dark);
	font-size: var(--wp--preset--font-size--md);
}

:root .wpcf7 form[data-status="sent"] .wpcf7-response-output::before {
	mask-image: url("../images/check.svg");
}

/* Čekání na odeslání. Plugin kreslí kolečko vlastním pseudoprvkem; tady jde
   jen o to, aby nesedělo na tlačítku. */
.wpcf7-spinner {
	margin: 0 0 0 0.9rem;
}

/* ---------- Galerie (masonry) ----------
   Sloupce přes CSS columns: responzivita bez měření výšek v JS. Fotka se
   nikdy neškáluje ani nepřebarvuje — odkrývá se výhradně maskou. */
.gallery {
	padding: clamp(0.5rem, 1.5vw, 1.5rem) var(--wp--preset--spacing--gutter)
		var(--wp--preset--spacing--section);
}

.gallery__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

:root .gallery__grid.has-nested-images {
	display: block;
	/* Nejdřív vynulovat gap z core, teprve pak nastavit mezeru mezi sloupci —
	   `gap` je shorthand a napsaný pod `column-gap` by ji zase přepsal. */
	gap: 0;
	columns: 4;
	column-gap: var(--wp--custom--gallery--gap);
}

/* Poměr drží položka, ne obrázek: fotka bez `src` (ADR-005) si z atributů
   místo nedrží.

   `:not(#lk-gallery)` je specificita, ne selektor — takové ID na stránce
   není. Core drží `margin: 0` a pevnou šířku pravidlem
   `…figure.wp-block-image:not(#individual-image)`, které má díky ID váhu
   1,3,1; bez stejného triku by masonry přišlo o svislé mezery. `!important`
   by fungoval taky, ale ten si v tomhle theme nedovolujeme (ADR-006). */
:root .gallery__grid.has-nested-images > figure.wp-block-image:not(#lk-gallery) {
	display: block;
	break-inside: avoid;
	width: auto;
	margin: 0 0 var(--wp--custom--gallery--gap);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	aspect-ratio: var(--photo-ar, auto);
}

/* Filtr žánrů schovává fotky atributem `hidden`, jenže pravidlo nad tímhle jim
   `display: block` vrací: **autorský styl přebíjí `[hidden]` z UA stylu bez
   ohledu na specificitu.** Klik na žánr pak přepsal jen počet ve stavovém
   hlášení a mřížka zůstala celá (29. 8. 2026: 72 z 96 položek `hidden`, všech
   96 dál vidět). `:not(#lk-gallery)` je specificita, ne selektor — o třídu víc
   než přebíjené pravidlo, protože ADR-006 zakazuje `!important`. */
:root .gallery__grid.has-nested-images
	> figure.wp-block-image[hidden]:not(#lk-gallery) {
	display: none;
}

:root .gallery__grid.has-nested-images > figure.wp-block-image > a:not(#lk-gallery) {
	display: block;
	height: 100%;
}

:root .gallery__grid img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- 18+ zamlžení v mixované galerii ----------
   Výchozí stav je zamlžený i bez JS, takže se obsah nikdy neodhalí sám. */
:root .gallery__grid > figure.zanr-glamour {
	position: relative;
}

:root .gallery__grid > figure.zanr-glamour img {
	/* scale kryje průhledné okraje, které blur na hranách jinak vytvoří */
	filter: blur(26px);
	transform: scale(1.14);
	transition: filter 0.6s var(--wp--custom--ease--out),
		transform 0.6s var(--wp--custom--ease--out);
}

.adult {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 1rem;
	text-align: center;
	background: color-mix(
		in srgb,
		var(--wp--preset--color--dark) 34%,
		transparent
	);
	color: var(--wp--preset--color--on-dark);
	transition: opacity 0.5s var(--wp--custom--ease--out), visibility 0.5s;
}

.adult__tag {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	line-height: 1;
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	letter-spacing: 0.02em;
}

.adult__txt {
	font-size: var(--wp--preset--font-size--sm);
	max-width: 22ch;
	color: var(--wp--preset--color--on-dark);
}

.adult__btn {
	margin-top: 0.5rem;
	background: var(--wp--preset--color--on-dark);
	color: var(--wp--preset--color--dark);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.03em;
	padding: 0.52rem 0.95rem;
	transition: background-color 0.3s var(--wp--custom--ease--out);
}

/* Potvrzení odmlží všechny naráz, bez procházení prvků.

   Selektor je složený (`:root.adult-ok`), ne potomkovský: třídu přidává
   motion.js na `document.documentElement`, tedy na kořen samotný. Se
   mezerou by pravidlo hledalo `.adult-ok` mezi potomky kořene a nesedlo by
   nikdy — fotky pak po potvrzení věku zůstaly zamlžené, protože překryv
   `.adult` zmizel (jeho pravidlo je psané správně) a zamlžení ne. */
:root.adult-ok .gallery__grid > figure.zanr-glamour img {
	filter: none;
	transform: none;
}

.adult-ok .adult {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ---------- Filtr žánrů ---------- */
.gfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem clamp(1.2rem, 2.5vw, 2.25rem);
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--wp--custom--line--soft);
}

.gfilter__btn {
	position: relative;
	padding: 0;
	color: var(--wp--preset--color--muted);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.03em;
	transition: color 0.3s var(--wp--custom--ease--out);
}

.gfilter__btn::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.35rem;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s var(--wp--custom--ease--inout);
}

.gfilter__btn:hover,
.gfilter__btn.is-active {
	color: var(--wp--preset--color--contrast);
}

.gfilter__btn.is-active::after {
	transform: scaleX(1);
	transform-origin: left;
}

.gfilter__count {
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--xs);
	margin-left: 0.3rem;
}

:root .gallery__status {
	margin: 1.1rem 0 clamp(1.25rem, 2.5vw, 2rem);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--subtle);
	letter-spacing: 0.02em;
}

/* ---------- Postupné odkrývání galerie žánru ----------
   Podstránka žánru ukazuje první dávku fotek a tlačítkem pod mřížkou se
   odkrývají další, dokud nedojdou (rozhodnutí klienta 29. 8. 2026). Do té doby
   tu byl pevný strop 50/30 fotek a odkaz do souhrnné galerie.

   Odkrývá se **ořezem obalu, ne skrýváním fotek.** Mřížka uvnitř zůstává celá,
   takže se rozvržení `columns` spočítá jednou pro celou sadu a už se nemění.
   Kdyby se fotky skrývaly `display: none`, prohlížeč by sloupce po každém
   odkrytí vyvážil znovu — naměřeno 29. 8. 2026: posunulo by se 38 z 50 fotek
   na desktopu a jedna z nich o 4 000 px níž.

   Výšku nastavuje `motion.js` proměnnou `--gallery-window`; bez JavaScriptu
   zůstane `none` a galerie je celá. Fotky pod čárou se nestahují — odloženou
   adresu jim vrací až pozorovatel a ten ořez nadřazeného prvku respektuje. */
:root .gallery--more {
	/* Kolik fotek přidá jedno kliknutí. Na telefonu se níž přepisuje na 12. */
	--gallery-batch: 24;
}

:root .gallery--more .gallery__viewport {
	max-height: var(--gallery-window, none);
	overflow: hidden;
}

/* Přechod do pozadí, aby ořez uprostřed fotek vypadal záměrně. U masonry není
   kam říznout rovně — sloupce končí každý jinde. Ukazuje se jen tehdy, když
   je co odkrývat; třídu řídí `motion.js`. */
:root .gallery--more .gallery__viewport::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: clamp(5rem, 12vw, 9rem);
	background: linear-gradient(
		to bottom,
		transparent,
		var(--wp--preset--color--base)
	);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s var(--wp--custom--ease--out);
}

:root .gallery--more.is-more .gallery__viewport {
	position: relative;
}

:root .gallery--more.is-more .gallery__viewport::after {
	opacity: 1;
}

/* Dokud JS neřekne, že je co odkrývat, tlačítko na stránce není. Galerie
   kratší než jedna dávka ho nepotřebuje vůbec. */
:root .gallery--more .gallery__more {
	display: none;
}

:root .gallery--more.is-more .gallery__more {
	display: flex;
}

/* ---------- Odkaz do souhrnné galerie pod mřížkou ----------
   `:root` kvůli paritě s editorem: Gutenberg nuluje svislé okraje bloků
   v canvasu pravidlem o stejné specificitě a sekce pak byla v editoru
   o 47 px nižší než na webu (ADR-006). */
:root .gallery__more {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* ---------- Věková brána 18+ ---------- */
:root .agegate {
	max-width: 46rem;
	margin: clamp(1rem, 3vw, 2.5rem) 0 0;
	border: 1px solid var(--wp--custom--line--soft);
	padding: clamp(1.6rem, 3.5vw, 2.8rem);
	background: var(--wp--preset--color--surface);
}

.agegate__title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

:root .agegate__text {
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	max-width: 52ch;
}

:root .agegate__actions {
	margin-top: clamp(1.4rem, 2.5vw, 2rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.8rem;
}

.agegate__no {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.agegate__no:hover {
	color: var(--wp--preset--color--contrast);
}

/* ---------- Svatební příběhy: mřížka dlaždic ----------
   Jedna sada pravidel pro obě místa, kde se příběhy vypisují: ochutnávku na
   podstránce svateb a archiv. Liší se jen počtem sloupců. */
.stories-section {
	padding: var(--wp--preset--spacing--section)
		var(--wp--preset--spacing--gutter);
}

.stories {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* `core/post-template` vykresluje seznam. Odrážky ruší core, tady zbývá
   mřížka a mezery. */
.stories__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 4.5rem) clamp(1.5rem, 3vw, 3rem);
}

/* Archiv má příběhy jako hlavní obsah, ne jako ochutnávku, takže dostanou
   větší fotky. Posun každé druhé dlaždice dolů dává mřížce stejný rytmus,
   jaký mají koláže jinde na webu — a bez něj by dva sloupce stejně vysokých
   fotek působily jako tabulka. */
/* V archivu jde mřížka hned pod úvod stránky, který má vlastní spodní
   odsazení. Plná sekční mezera by mezi nadpisem a první fotkou nechala přes
   dvacet rem prázdna. */
:root .stories-section--wide {
	padding-top: clamp(2rem, 4vw, 4rem);
}

.stories-section--wide .stories__grid {
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(3rem, 6vw, 7rem) clamp(2rem, 5vw, 5rem);
}

.stories-section--wide .stories__grid > li:nth-child(even) {
	margin-top: clamp(2rem, 6vw, 6rem);
}

/* Fotka je odkaz na celý příběh. Ořez drží poměr na výšku: svatební portrét
   i skupinovka jsou skoro vždy na výšku a čtvercový výřez jim bere hlavy. */
:root .story-tile__media {
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

/* Poměr stran drží inline `aspect-ratio`, které k obrázku dopíše jádro
   z atributu bloku. Vlastní `height` se sem proto psát nesmí: aspect-ratio
   platí jen tehdy, když je jeden z rozměrů `auto`, a s pevnou výškou by se
   fotky vrátily ke svým původním poměrům. */
.story-tile__media img {
	display: block;
	width: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--wp--custom--ease--out);
}

.story-tile__media a:hover img,
.story-tile__media a:focus-visible img {
	transform: scale(1.04);
}

:root .story-tile__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.55rem;
	margin-top: 1.4rem;
	color: var(--wp--preset--color--subtle);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	font-size: var(--wp--preset--font-size--xs);
}

:root .story-tile__date,
:root .story-tile__place {
	margin: 0;
}

/* Oddělovač kreslí CSS, ne značka: místo konání je nepovinné a prázdný
   odstavec by za sebou nechal osiřelou tečku.

   Visí na datu, ne na místě. Řádek se při dlouhém názvu („Vinice Perná, jižní
   Morava“) zalomí mezi obě hodnoty a oddělovač před místem by zůstal sám na
   začátku druhého řádku. */
.story-tile__date:has(+ .story-tile__place:not(:empty))::after {
	content: "·";
	margin-left: 0.55rem;
}

:root .story-tile__title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-top: 0.5rem;
}

.story-tile__title a {
	text-decoration: none;
}

.story-tile__title a:hover,
.story-tile__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Šířku si v téhle sekci drží každý prvek sám — `.section-head` i `.stories`
   mají vlastní `max-width`. Odkaz ho potřebuje taky: bez něj zůstane na okraji
   sekce, zatímco mřížka nad ním je od `wideSize` (102,5rem) výš vycentrovaná.
   Do 1640 px se rozdíl neprojeví, na 1920 px je to 44 px a na 2560 px už
   356 px. Galerie tenhle problém nemá, protože celý svůj obsah balí do
   `.gallery__inner`; tady by obal znamenal zásah do uložené značky stránek. */
:root .stories__more {
	max-width: var(--wp--style--global--wide-size);
	margin-top: clamp(3rem, 5vw, 5rem);
	margin-inline: auto;
}

:root .stories__empty {
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--md);
}

/* ---------- Svatební příběh: úvod ---------- */

/* Hero příběhu sdílí mechaniku s hero úvodní stránky (fotka přes celé okno,
   text u spodní hrany), jen mu chybí nadřazený text a odkaz — jména páru
   stojí sama. */
:root .story-hero__title {
	max-width: 18ch;
}

.story {
	padding: clamp(4rem, 9vw, 8rem) var(--wp--preset--spacing--gutter)
		clamp(2rem, 4vw, 4rem);
}

.story__intro {
	max-width: 62rem;
	margin-inline: auto;
}

:root .story__dateline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem;
	color: var(--wp--preset--color--subtle);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	font-size: var(--wp--preset--font-size--xs);
}

:root .story__date,
:root .story__place {
	margin: 0;
}

/* Viz oddělovač u dlaždice: patří k datu, aby nezůstal sám na dalším řádku. */
.story__date:has(+ .story__place:not(:empty))::after {
	content: "·";
	margin-left: 0.6rem;
}

:root .story__lead {
	margin-top: 1.8rem;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	max-width: 58ch;
}

/* ---------- Citace od páru ----------
   Hlubší krémová plocha odděluje citaci od galerie nad ní. Je to poslední
   věc, kterou návštěvník na příběhu čte, a jediné místo, kde mluví pár. */
.story-quote {
	padding: var(--wp--preset--spacing--section)
		var(--wp--preset--spacing--gutter);
	background: var(--wp--preset--color--surface);
}

.story-quote__inner {
	max-width: 64rem;
	margin-inline: auto;
}

:root .story-quote__text {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.32;
	text-wrap: pretty;
}

/* Uvozovky jsou dekorace kolem hodnoty z pole, ne součást textu — klient je
   do citace nepíše a nemůže je omylem smazat. Prázdné pole nevykreslí nic. */
.story-quote__text:not(:empty)::before {
	content: "„";
}

.story-quote__text:not(:empty)::after {
	content: "“";
}

/* ---------- Patička ----------
   Jediná tmavá plocha na webu. Inverzní blok, který uzavírá stránku. */
.site-footer {
	padding: clamp(4rem, 8vw, 8rem) var(--wp--preset--spacing--gutter) 2.5rem;
	overflow: hidden;
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--on-dark);
}

.footer__grid {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

:root .footer__label {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	color: var(--wp--preset--color--on-dark-muted);
	margin-bottom: 1.2rem;
}

.footer__col {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	font-size: var(--wp--preset--font-size--sm);
}

.footer__col a,
.footer__col span,
.footer__col p:not(.footer__label) {
	color: var(--wp--preset--color--on-dark-muted);
}

.footer__col a {
	transition: color 0.3s;
	width: fit-content;
}

.footer__col a:hover {
	color: var(--wp--preset--color--on-dark);
}

.footer__wordmark {
	max-width: var(--wp--style--global--wide-size);
	margin: clamp(3rem, 7vw, 7rem) auto 0;
	padding-bottom: 0.14em;
}

/* Nezvyšovat: nad 18 vw se „KRAJÁNEK“ láme na dva řádky. */
.footer__wordmark span {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--tight);
	font-size: clamp(3rem, 17.5vw, 17rem);
	line-height: 1.06;
	display: block;
	color: var(--wp--preset--color--on-dark);
}

.footer__fine {
	max-width: var(--wp--style--global--wide-size);
	margin: 2rem auto 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--on-dark-muted);
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--custom--line--dark);
}

/* ---------- Výchozí stavy animací ----------
   Skryje se jen s JS; bez JS je obsah viditelný kvůli SEO i přístupnosti.
   Prototyp cílil na `data-*` atributy, ty ale core bloky neumí nést. Cílíme
   proto na stejné třídy, které používá motion.js — a hlavně platí od prvního
   paintu, takže obsah nebliká. Pojistka v hlavičce třídu `js` odstraní, pokud
   se animační vrstva nenabootuje.

   Celý blok je uvnitř `prefers-reduced-motion: no-preference`, takže při
   omezeném pohybu se výchozí skrytí vůbec neaplikuje. Vypínat ho zpětně přes
   `!important` by rozbilo legitimní skrývání jinde — zavřené mobilní menu
   i scrim věkové brány stojí na `visibility: hidden`. */
@media (prefers-reduced-motion: no-preference) {

html.js .hero__title,
html.js .hero__intro,
html.js .hero__cta,
html.js .phero__title,
html.js .phero__lead,
html.js .phero__cta,
html.js .section-head__title,
html.js .about__title,
html.js .about__text,
html.js .contact__title,
html.js .contact__sub,
html.js .statement__text,
html.js .footer__wordmark span,
html.js .eyebrow,
html.js .step,
html.js .tier,
html.js .addon,
html.js .quote,
html.js .faq__item,
html.js .fact,
html.js .form,
html.js .cinfo__block,
html.js .addons__note,
html.js .pricing__note {
	visibility: hidden;
}

html.js .pgrid__ph,
html.js .about__ph,
html.js .showcase__fig {
	clip-path: inset(0 0 100% 0);
}

/*
 * Fotka v galerii se odkrývá maskou na `img`, ne na položce seznamu. Mřížka
 * stojí na `columns` a **WebKit počítá `clip-path` fragmentu proti
 * nefragmentovanému boxu**, takže maska na položce udělá z celého druhého
 * sloupce plochu, kterou nejde trefit prstem — klepnutí propadlo na mřížku pod
 * ní a na iPhonu se lightbox neotevřel. Na `img` je maska bez následku, protože odkaz
 * kolem ní zůstane celý. Vizuálně je to totéž: obrázek vyplňuje figuru.
 */
html.js .gallery__grid > figure img {
	clip-path: inset(0 0 100% 0);
}

}
/* konec prefers-reduced-motion: no-preference */


/* ---------- Lightbox galerie ----------
   Fotka v mřížce je odkaz na svůj velký soubor; tenhle blok z něj dělá
   přehlížeč. Bez JS se odkaz chová jako odkaz, takže tu není co skrývat. */
/*
 * Bez `cursor: zoom-in`: nativní lupa přebila vlastní kurzor, který se nad
 * fotkou rozšiřuje na popisek „Zvětšit". Kurzor si na desktopu kreslíme sami,
 * takže systémovou ikonu tu nechceme.
 */
.photo-open {
	display: block;
	width: 100%;
	height: 100%;
}

.lightbox-open {
	overflow: hidden;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 2vw, 2rem);
	padding: clamp(1rem, 4vw, 3rem);
	background: color-mix(in srgb, var(--wp--preset--color--dark) 92%, transparent);
	opacity: 0;
}

.lightbox.je-videt {
	opacity: 1;
}

.lightbox[hidden] {
	display: none;
}

.lightbox__fig {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	/* Zbytek řádku, aby měla definitní šířku: procenta v rámečku pod ní se
	   jinak nemají čeho chytit. */
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	max-height: 100%;
}

/*
 * Rámeček drží tvar fotky **z poměru známého předem**, ne z rozměrů souboru,
 * který se teprve stahuje: `--lb-ar` doplní motion.js z `--photo-ar` položky
 * v mřížce. Bez toho se lightbox otevřel v rozměrech předchozí fotky a po
 * dostažení skočil (29. 8. 2026, linka 1,6 Mb/s: 1,1 s v 514 × 771 px, pak
 * 1 158 × 772). Šířka je menší ze dvou mezí — dostupné a té, co projde na
 * výšku — takže se fotka vejde celá při libovolném tvaru okna i snímku.
 */
.lightbox__frame {
	--lb-vyska: calc(100dvh - 8rem);

	position: relative;
	display: block;
	width: min(100%, calc(var(--lb-vyska) * var(--lb-ar, 1.5)));
	aspect-ratio: var(--lb-ar, 1.5);
	max-height: var(--lb-vyska);
}

/* Obě fotky vyplňují rámeček stejně, takže mezi náhledem a plnou variantou
   není posun — jen se zaostří. `contain` pojistí tvar, kdyby poměr chyběl. */
.lightbox__frame img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Plná fotka dosedne na náhled, až je stažená a složená. */
.lightbox__plna {
	opacity: 0;
}

.lightbox__plna.je-tam {
	opacity: 1;
}

.lightbox__cap {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--on-dark);
}

.lightbox__close,
.lightbox__nav {
	flex: 0 0 auto;
	background: none;
	border: 0;
	color: var(--wp--preset--color--on-dark);
	cursor: pointer;
	line-height: 1;
	padding: 0.4rem 0.7rem;
	transition: opacity 0.3s var(--wp--custom--ease--out);
}

.lightbox__close:hover,
.lightbox__nav:hover {
	opacity: 0.6;
}

.lightbox__close {
	position: absolute;
	top: clamp(0.5rem, 2vw, 1.5rem);
	right: clamp(0.5rem, 2vw, 1.5rem);
	font-size: 2.4rem;
}

.lightbox__nav {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.lightbox__nav[hidden] {
	display: none;
}

/* Na telefonu se šipky nevejdou vedle fotky, tak jdou nad její spodní okraj. */
@media (max-width: 720px) {
	.lightbox__nav {
		position: absolute;
		bottom: clamp(1rem, 4vw, 2rem);
	}

	.lightbox__nav--prev {
		left: 18vw;
	}

	.lightbox__nav--next {
		right: 18vw;
	}

	/* Šipky jsou nad spodní hranou fotky, takže si musí ukrojit víc místa. */
	.lightbox__frame {
		--lb-vyska: calc(100dvh - 12rem);
	}
}

/* Prolnutí je jediná ozdobná část přehlížeče — bez něj funguje všechno
   stejně, jen skokem. Délku si odsud čte `close()` v motion.js, aby se
   schování trefilo do konce přechodu. */
@media (prefers-reduced-motion: no-preference) {
	.lightbox {
		transition: opacity 0.3s var(--wp--custom--ease--out);
	}

	.lightbox__plna {
		transition: opacity 0.3s var(--wp--custom--ease--out);
	}
}

/* ---------- Responzivita ---------- */

@media (max-width: 1024px) {
	:root .gallery__grid.has-nested-images {
		columns: 3;
	}

	/* Tři dlaždice příběhů vedle sebe potřebují na fotku aspoň 20 rem;
	   pod tuhle šířku už by z portrétu byl proužek. */
	.stories__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 860px) {
	/* `:root` musí mít i modifikátor, jinak prohraje s pravidlem výš. */
	:root .about {
		grid-template-columns: 1fr;
	}

	.about__ph {
		grid-column: 1 / -1;
		max-width: 460px;
	}

	.about__body {
		grid-column: 1 / -1;
	}

	.steps,
	.tiers,
	.quotes {
		grid-template-columns: 1fr;
	}

	/* Na jednom sloupci nemá posun co střídat — zbyla by z něj jen mezera
	   navíc nad každou druhou dlaždicí. */
	:root .stories__grid,
	:root .stories-section--wide .stories__grid {
		grid-template-columns: 1fr;
	}

	:root .stories-section--wide .stories__grid > li:nth-child(even) {
		margin-top: 0;
	}

	.svc__row {
		grid-template-columns: 1fr auto;
		gap: 0.4rem 1rem;
		padding-bottom: 1rem;
	}

	.svc__desc {
		grid-column: 1 / -1;
	}

	.pgrid__inner {
		grid-template-columns: repeat(6, 1fr);
	}

	.pgrid__ph--a {
		grid-column: 1 / -1;
	}

	:root .pgrid__ph--b {
		grid-column: 1 / 4;
		margin-top: 0;
	}

	:root .pgrid__ph--c {
		grid-column: 4 / -1;
		margin-top: 2.5rem;
	}

	:root .pgrid__ph--d {
		grid-column: 1 / -1;
		margin-top: 0;
	}

	.facts__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-page__grid,
	.form__row {
		grid-template-columns: 1fr;
	}

	/* Tři sloupce se na užší obrazovku nevejdou. */
	.footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Náhled žánru bez myši ----------
 * Na dotyku je náhled žánru vidět pořád. Plovoucí fotka za kurzorem tam
 * nedává smysl — přejetí myší na telefonu nenastane a návštěvník by se
 * o fotkách nedozvěděl. Klient 29. 8. 2026 vybral ze tří návrhů pás přes
 * celou šířku pod textem: fotografie je hlavní obsah webu, takže má dostat
 * místo, i když je řádek žánru tím pádem vyšší.
 *
 * `16 / 7` je kompromis mezi výškou sekce a tím, aby z fotky na výšku zbyl
 * použitelný výřez.
 *
 * **Podmínka není jen šířka, a to je oprava z 3. 9. 2026.** Tahle pravidla
 * ležela do té doby v bloku `max-width: 860px`, kdežto `initServiceFollow()`
 * v `motion.js` se vypíná podle `(hover: none), (pointer: coarse)`. Na
 * tabletu se ty dvě podmínky rozešly: náhled v řádku byl schovaný, protože
 * obrazovka je širší než 860 px, a plovoucí náhled nevznikl, protože
 * zařízení neumí hover — takže **v rozcestníku nebyla vidět ani jedna
 * fotka**. Naměřeno 3. 9. 2026: iPad landscape 1024 px, iPad Pro 12,9"
 * portrait 1024 px i iPad Air landscape 1180 px měly 0 ze 4 náhledů
 * viditelných; nahlásil vlastník projektu. Šířka v podmínce zůstává, aby si
 * úzké okno na desktopu drželo dosavadní chování — tam je zúžený i řádek
 * žánru a pás pod textem k němu patří. */
@media (max-width: 860px), (hover: none), (pointer: coarse) {
	.svc-follow {
		display: none;
	}

	.svc {
		padding-bottom: 1.4rem;
	}

	.svc__preview {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 7;
		margin: 0;
		overflow: hidden;
		background: var(--wp--preset--color--surface);
	}

	.svc__preview img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

@media (max-width: 560px) {
	.footer__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

@media (max-width: 720px) {
	/* Nadpis na telefonu vyplní šířku okna; `62vw` by z něj udělalo sloupec
	   přes dvě třetiny obrazovky a zbytek by zůstal prázdný. */
	.hero__type {
		max-width: 100%;
	}

	.hero {
		padding-top: 8rem;
	}

	/* Dva sloupce, ne jeden: na telefonu je smyslem galerie vidět co nejvíc */
	:root .gallery__grid.has-nested-images {
		columns: 2;
	}

	/* Dávka je na telefonu poloviční (12 místo 24): dvě fotky na řádek znamenají
	   šest řádů, což je zhruba stejný kus stránky jako 24 fotek ve čtyřech
	   sloupcích na desktopu. Hodnotu čte `motion.js`, protože počet fotek
	   v dávce je chování, ne vzhled — a media query je jediné místo, kde web
	   ví, jak je obrazovka široká. */
	:root .gallery--more {
		--gallery-batch: 12;
	}

	/*
	 * Celoplošná fotka není na telefonu přes celou obrazovku. Na desktopu drží
	 * atmosféru (rozhodnutí klienta 28. 8. 2026 ji tam nechává), na mobilu ale
	 * `100vh` znamenalo plochu 390 × 850 px, kterou fotka na šířku pokryje
	 * jedině tak, že se ořízne na svislý pruh a zvětší 2,5× — proto byla
	 * měkká. Zhruba čtvercový výřez potřebuje o polovinu menší zvětšení a
	 * stránka se o obrazovku zkrátí.
	 *
	 * Výška se odvozuje od **šířky**, ne od výšky okna. Na mobilu mění lišta
	 * prohlížeče výšku viewportu za jízdy a sekce vázaná na `vh` by při každém
	 * jejím zobrazení překreslila layout pod sebou. Šířka se při scrollování
	 * nemění nikdy.
	 */
	.showcase {
		height: clamp(16rem, 90vw, 22rem);
	}
}

/* ---------- prefers-reduced-motion ----------
   Výchozí skrytí se při omezeném pohybu vůbec neaplikuje (viz blok výše),
   takže tady zbývá jen zastavit to, co běží samo. */
@media (prefers-reduced-motion: reduce) {
	.cursor {
		display: none;
	}

	.marquee__track {
		animation: none !important;
		transform: none !important;
	}

	html {
		scroll-behavior: auto !important;
	}
}