/*
Theme Name:   Lukáš Vráb
Theme URI:    https://lukasvrab.com
Author:       —
Description:  Bloková téma pre web svadobného fotografa Lukáša Vrába. Samostatná téma, nie child Twenty Twenty-Five. Obsah (typ „Svadobný príbeh“ a jeho polia) je v plugine Lukáš Vráb — Core, aby prežil výmenu témy.
Version:      1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  lukasvrab
Tags:         block-theme, photography, portfolio, custom-colors, custom-menu, editor-style, full-site-editing
*/

/* =========================================================================
   Poradie: tokeny → základ → komponenty → responzivita → prístupnosť

   Farby, veľkosti písma a rozostupy sú v theme.json a sem sa len prezývajú.
   Ak tu pribudne literál, ktorý má aj preset, je to chyba — admin ho
   v Štýloch zmení a polovica webu ho nebude počúvať. Viď ARCHITECTURE.md §3.1.

   Komponenty dizajnového systému sú nabalené na štýly blokov
   (`is-style-lv-*`) — to je jediná vec, ktorú si klient vie kliknúť.
   Holé triedy `.lv-*` majú len tie prvky, ktoré sú ručne písaným HTML
   a blokom sa vyjadriť nedajú: hlavička, hamburger, panel, pätička,
   šípky karuselu a obal formulára.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokeny
   ---------------------------------------------------------------------- */

:root {
	/* farby — aliasy na presety z theme.json */
	--lv-text:           var(--wp--preset--color--text);
	--lv-text-muted:     var(--wp--preset--color--text-muted);
	--lv-text-subtle:    var(--wp--preset--color--text-subtle);
	--lv-surface:        var(--wp--preset--color--surface);
	--lv-sand:           var(--wp--preset--color--surface-sand);
	--lv-sand-light:     var(--wp--preset--color--surface-sand-light);
	--lv-white:          var(--wp--preset--color--surface-white);
	--lv-dark:           var(--wp--preset--color--surface-dark);
	--lv-accent:         var(--wp--preset--color--accent);
	--lv-accent-hover:   var(--wp--preset--color--accent-hover);
	--lv-accent-light:   var(--wp--preset--color--accent-light);
	--lv-accent-kicker:  var(--wp--preset--color--accent-kicker);
	--lv-on-dark:        var(--wp--preset--color--on-dark-text);
	--lv-on-dark-muted:  var(--wp--preset--color--on-dark-muted);
	--lv-on-dark-subtle: var(--wp--preset--color--on-dark-subtle);
	--lv-hairline:       var(--wp--preset--color--hairline);

	/* písma — aliasy na presety z theme.json */
	--lv-font-heading: var(--wp--preset--font-family--heading);
	--lv-font-body:    var(--wp--preset--font-family--body);

	/* rozostupy — aliasy na presety z theme.json (presety sú fluidné) */
	--lv-space-s:       var(--wp--preset--spacing--30);
	--lv-pad-x:         var(--wp--preset--spacing--40);
	--lv-pad-x-wide:    var(--wp--preset--spacing--50);
	--lv-section-y:     var(--wp--preset--spacing--60);
	--lv-section-y-lg:  var(--wp--preset--spacing--70);

	/* hodnoty bez zodpovedajúceho presetu v theme.json */
	--lv-dark-border:  #302C28;
	--lv-field-border: #3D3934;
	--lv-field-holder: #8A827A;
	--lv-scrim:        rgba(32, 31, 29, .28);
	--lv-on-photo:     rgba(255, 255, 255, .82);

	/*
	 * Výplň prvkov ležiacich na fotke — štítok s miestom a dátumom aj krúžok
	 * so šípkou. Svetlý film a rozostrenie, žiadne stmavenie: tmavý chip
	 * preberal dominanciu nad menami páru, čo je dizajnové rozhodnutie
	 * klienta a má prednosť.
	 *
	 * Nemeniť „pre lepší kontrast“ bez toho, aby si to prerátal. Zlatá
	 * #D8B888 je svetlá, takže mierne stmavenie ju zhorší, nie zlepší —
	 * namerané na svetlej fotke: bez stmavenia 1.70, pri 20 % 1.14,
	 * pri 35 % 1.25. Nad východiskový stav sa dostane až za polovicou.
	 */
	--lv-chip-bg:       rgba(251, 249, 246, .14);
	--lv-chip-bg-hover: rgba(251, 249, 246, .24);

	--lv-grid-gap:   clamp(14px, 2vw, 24px);
	--lv-radius-pill: 999px;
	--lv-radius-area: 20px;
	--lv-panel-w:     440px;
	--lv-ease:        cubic-bezier(.4, 0, .2, 1);

	/*
	 * Geometria buttonu. Nie je to preset pre admina, ale konštanta komponentu,
	 * preto žije tu — a theme.json sa na ňu odkazuje cez var(), aby hodnota
	 * existovala len raz. Fluidne, takže mobil nepotrebuje vlastné pravidlo.
	 */
	--lv-btn-py: clamp(13px, 1.4vw, 17px);
	--lv-btn-px: clamp(26px, 3.4vw, 42px);
	--lv-btn-fs: clamp(12px, 1vw, 14px);
	--lv-btn-ls: clamp(.16em, .5vw, .22em);
}

/* -------------------------------------------------------------------------
   2. Základ
   ---------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * Sekcie na seba nadväzujú bez medzery. WordPress dáva každému bloku
 * v toku odstup 28px (blockGap) — vnútri textu je to správne, ale medzi
 * hlavičkou, obsahom a pätičkou a medzi celými sekciami z toho vzniknú
 * biele pásy cez celú šírku. Odstup si každá sekcia rieši vlastným
 * odsadením, tu sa preto na najvyššej úrovni nuluje.
 */
body .wp-site-blocks > *,
body .entry-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * Playfair sa na tomto webe nikdy nesadzuje tučne — ani v <strong> vnútri
 * nadpisu. Je to dizajnové pravidlo z handoffu, nie preferencia.
 */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--lv-font-heading);
	font-weight: 400;
	text-wrap: pretty;
}

h1 strong, h2 strong, h3 strong,
h1 b, h2 b, h3 b { font-weight: 400; }

strong, b { font-weight: 500; }

p { text-wrap: pretty; }

img,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a { text-decoration: none; }

/* -------------------------------------------------------------------------
   3. Komponenty
   ---------------------------------------------------------------------- */

/* --- Kicker: malý uppercase nadpisok nad sekciou --- */

.is-style-lv-kicker,
.is-style-lv-kicker-hero {
	display: block;
	font-family: var(--lv-font-body);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 400;
	letter-spacing: .3em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--lv-accent-kicker);
}

/* Kicker na fotke — svetlejšia zlatá kvôli kontrastu */
.is-style-lv-kicker-on-photo {
	color: var(--lv-accent-light);
}

/* Kicker v hero — nie zlatý, ale tlmene biely, aby nekonkuroval sloganu */
.is-style-lv-kicker-hero {
	letter-spacing: .36em;
	color: var(--lv-on-photo);
}

/* --- Buttony --- */

/*
 * Geometriu, farbu a typografiu buttonu nesie theme.json (styles.elements.button)
 * — tu sú len veci, ktoré theme.json nevie: hit target a varianty outline.
 */
.wp-block-button__link {
	min-height: 44px;
	transition:
		background-color .25s var(--lv-ease),
		border-color .25s var(--lv-ease),
		color .25s var(--lv-ease);
}

.is-style-lv-outline-dark .wp-block-button__link {
	background: transparent;
	border-color: var(--lv-text);
	color: var(--lv-text);
}

.is-style-lv-outline-dark .wp-block-button__link:hover {
	background: var(--lv-text);
	border-color: var(--lv-text);
	color: var(--lv-surface);
}

.is-style-lv-outline-light .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, .7);
	color: var(--lv-white);
}

.is-style-lv-outline-light .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .12);
	border-color: var(--lv-white);
	color: var(--lv-white);
}

/* --- Pilulka na fotke (dlaždica príbehu) --- */

.is-style-lv-pill-photo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	padding: 10px 20px;
	border-radius: var(--lv-radius-pill);
	background: var(--lv-surface);
	color: var(--lv-accent);
	font-size: var(--wp--preset--font-size--kicker-s);
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1;
}

/*
 * Štítok aj kicker na fotke sa skladajú z miesta a dátumu svadby. Kým ich
 * niekto nedoplní, binding vráti prázdny reťazec — a prázdna pilulka
 * s rámom a rozostrením by visela na hero fotke. Preto sa skryje.
 */
.is-style-lv-badge:empty,
.is-style-lv-kicker-on-photo:empty {
	display: none;
}

/* --- Štítok na hero fotke príbehu: „Liptov · Jún 2026“ --- */

.is-style-lv-badge {
	display: inline-block;
	width: fit-content;
	padding: 9px 20px;
	border: 1px solid rgba(216, 184, 136, .6);
	border-radius: var(--lv-radius-pill);
	background: var(--lv-chip-bg);
	color: var(--lv-accent-light);
	font-size: var(--wp--preset--font-size--kicker-s);
	letter-spacing: .24em;
	line-height: 1.4;
	text-transform: uppercase;
	backdrop-filter: blur(2px);
}

/* -------------------------------------------------------------------------
   4. Hlavička a panel menu
   ---------------------------------------------------------------------- */

.lv-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lv-space-s);
	padding: 32px var(--lv-pad-x);
	background: var(--lv-surface);
	border-bottom: 1px solid var(--lv-hairline);
}

.lv-nav__logo { display: block; }
.lv-nav__logo img { width: 160px; height: auto; }

/*
 * Nav leží na fotke tam, kde stránka začína hero Coverom. Triedu na <body>
 * pridáva functions.php podľa obsahu stránky, nie podľa jej slugu —
 * takže to platí aj na budúcich landing pages.
 */
.lv-has-hero .lv-nav {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 2;
	padding-block: 38px;
	background: transparent;
	border-bottom: 0;
}

.lv-has-hero .lv-nav__logo img { filter: brightness(0) invert(1); }
.lv-has-hero .lv-burger__label { color: var(--lv-white); }
.lv-has-hero .lv-burger__line { background: var(--lv-white); }

/* --- Hamburger: dve čiarky, nie tri (dizajnová voľba) --- */

.lv-burger {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding: 10px;
	border: 0;
	background: none;
	cursor: pointer;
}

.lv-burger__label {
	font-family: var(--lv-font-body);
	font-size: var(--wp--preset--font-size--kicker);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--lv-text);
}

.lv-burger__lines {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.lv-burger__line {
	display: block;
	width: 32px;
	height: 1.5px;
	background: var(--lv-text);
}

/* --- Scrim: stránka pod ním zostáva viditeľná, nie čierna obrazovka --- */

.lv-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--lv-scrim);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s var(--lv-ease), visibility .2s;
}

.lv-scrim[data-open="true"] {
	opacity: 1;
	visibility: visible;
}

/* --- Panel: desktop zprava, mobil zhora. Fade celej plochy, žiadny slide. --- */

/*
 * Dvojitá trieda zámerne: WordPress dáva flex layoutu skupiny vlastné
 * pravidlo s rovnakou špecificitou (.wp-container-…) a tlačí do stĺpca
 * align-items: flex-start. Pätka panelu s hairline by potom bola široká
 * len ako jej obsah.
 */
.lv-panel.lv-panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: var(--lv-panel-w);
	max-width: 100%;
	height: 100dvh;
	background: var(--lv-sand);
	box-shadow: -20px 0 50px rgba(32, 31, 29, .14);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s var(--lv-ease), visibility .2s;
}

.lv-panel[data-open="true"] {
	opacity: 1;
	visibility: visible;
}

.lv-panel__close {
	display: flex;
	align-items: center;
	align-self: flex-end;
	gap: 12px;
	min-height: 44px;
	margin: 32px 40px 0;
	padding: 10px;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--lv-font-body);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--lv-text);
}

.lv-panel__nav {
	flex: 1;
	padding-inline: 40px;
	color: var(--lv-text);
}

/* Odkazy sú vertikálne vycentrované vo zvyšnej výške panelu. */
.lv-panel__nav .wp-block-navigation__container {
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	width: 100%;
}

.lv-panel__nav .wp-block-navigation-item__content {
	font-family: var(--lv-font-heading);
	font-size: clamp(30px, 4vw, 38px);
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lv-text);
}

.lv-panel__nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--lv-accent-hover);
}

/*
 * Aktuálna stránka zlatá. Jadro dáva odkazom `color: inherit` selektorom
 * s váhou troch tried, takže farba sa nastavuje na samotný <nav> a stavy
 * sa prebíjajú rovnakým zdvojením triedy.
 */
.lv-panel__nav .current-menu-item .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--lv-accent);
}

.lv-panel__foot {
	gap: 22px;
	padding: 32px 40px 40px;
	border-top: 1px solid rgba(32, 31, 29, .12);
}

.lv-panel__social {
	margin: 0;
	font-size: var(--wp--preset--font-size--kicker-s);
	letter-spacing: .22em;
	text-transform: uppercase;
}

.lv-panel__social a { color: var(--lv-text-subtle); }
.lv-panel__social a:hover { color: var(--lv-accent); }

/* -------------------------------------------------------------------------
   5. Pätička
   ---------------------------------------------------------------------- */

.lv-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lv-space-s);
	padding: 26px var(--lv-pad-x);
	background: var(--lv-dark);
	border-top: 1px solid var(--lv-dark-border);
}

.lv-footer__logo { width: 108px; height: auto; }

.lv-footer__nav .wp-block-navigation__container { gap: 30px; }

.lv-footer__nav {
	color: var(--lv-on-dark-muted);
}

.lv-footer__nav .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--kicker);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--lv-on-dark-muted);
}

.lv-footer__nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--lv-accent-light);
}

.lv-footer__nav .current-menu-item .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--lv-accent);
}

.lv-footer__copy {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--lv-on-dark-subtle);
}

/* -------------------------------------------------------------------------
   6. Sekcie dizajnového systému

   Všetko je nabalené na štýly blokov (`is-style-lv-*`), nie na vlastný
   markup — vďaka tomu funguje rovnako vo vzore aj vtedy, keď si klient
   vloží holý blok a štýl si klikne. Farby pozadia a rozostupy sekcií si
   nastavuje natívne v editore, preto tu nie sú.
   ---------------------------------------------------------------------- */

/* --- Hero: Cover cez celú obrazovku --- */

.wp-block-cover.is-style-lv-hero {
	min-height: 700px;
	text-align: center;
}

.wp-block-cover.is-style-lv-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	max-width: 1100px;
}

.is-style-lv-hero :is(h1, h2, .wp-block-heading) {
	color: var(--lv-white);
	line-height: .98;
	letter-spacing: -.01em;
	margin: 0;
}

.is-style-lv-hero .wp-block-buttons {
	gap: 16px;
	margin-top: 8px;
}

/* Hero príbehu je nižší a má vlastný gradient (nastavený v šablóne). */
.lv-hero--story .wp-block-cover.is-style-lv-hero,
.wp-block-cover.is-style-lv-hero.lv-hero--story {
	min-height: 620px;
}

/*
 * Krúžok so šípkou pod menami v hero príbehu. Zámerne nesie tú istú
 * skleněnú úpravu ako štítok „Miesto · Mesiac Rok“ nad menami — je to
 * ten istý jazyk prvkov na fotke, len okrúhly.
 */
.lv-scroll {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(216, 184, 136, .6);
	border-radius: var(--lv-radius-pill);
	background: var(--lv-chip-bg);
	color: var(--lv-accent-light);
	backdrop-filter: blur(2px);
	transition:
		background-color .25s var(--lv-ease),
		border-color .25s var(--lv-ease),
		color .25s var(--lv-ease),
		transform .25s var(--lv-ease);
}

.lv-scroll:hover {
	background: var(--lv-chip-bg-hover);
	border-color: var(--lv-accent-light);
	color: var(--lv-white);
	transform: translateY(3px);
}

/* --- Galéria: masonry v troch stĺpcoch --- */

/*
 * Tri rovnaké stĺpce, fotka si drží svoj vlastný pomer strán — na výšku
 * aj na šírku. Nič sa neoreže, riadky sa nezarovnávajú; fotky tečú stĺpcami
 * pod seba a rozdielne výšky vytvárajú ten editoriálny rytmus.
 *
 * Je to viacstĺpcový text (`columns`), nie mriežka. Mriežka potrebuje pre
 * každú bunku dopredu známu výšku, čo znamená orezávanie — presne to, čo
 * horizontálnym fotkám odrezalo vrch a spodok. Poradie je preto stĺpcové:
 * prvé fotky idú do ľavého stĺpca zhora nadol.
 *
 * Funguje na hocijakej stránke a bez vývojára — je to len štýl bloku
 * Galéria (ARCHITECTURE.md §3.4).
 */
.wp-block-gallery.has-nested-images.is-style-lv-editorial {
	display: block;
	columns: 3;
	column-gap: var(--lv-grid-gap);
}

/*
 * Jadro dáva figure `width: calc(50% - gap)` selektorom, ktorý má vnútri
 * :not() identifikátor — najvyššia váha v celom stylesheete jadra. Bez
 * tohto dlhého selektora by fotky zaberali polovicu stĺpca.
 */
.wp-block-gallery.has-nested-images.is-style-lv-editorial > figure.wp-block-image:not(#individual-image) {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0 0 var(--lv-grid-gap);
	break-inside: avoid;
}

.wp-block-gallery.has-nested-images.is-style-lv-editorial > figure.wp-block-image > img {
	width: 100%;
	height: auto;
	object-fit: initial;
}

/*
 * Jediná ručná výnimka: fotka cez celú šírku galérie. Klient si ju klikne
 * v štýloch obrázka, keď chce dať jednej fotke priestor.
 */
.is-style-lv-editorial > figure.wp-block-image.is-style-lv-full {
	column-span: all;
	margin-bottom: var(--lv-grid-gap);
}

/*
 * Pás medzi textom — fotka cez celú šírku, ktorá delí dlhší text.
 *
 * Bez stropu na výšku je to pasca: fotka 3:2 cez celú šírku okna vyjde na
 * 15" notebooku 843 px vysoká, teda vyššia než samotné okno. Návštevník sa
 * potom scrolluje cez fotku naslepo a stratí niť textu. Je to ten istý
 * dôvod, pre ktorý sa opustila editoriálna mriežka, viď
 * docs/DESIGN-DECISIONS.md §1.
 *
 * Strop je vo `vh`, nie v pixeloch, aby na vysokom monitore fotka priestor
 * dostala a na nízkom nezabrala celú obrazovku. `object-fit` zaručí, že sa
 * fotka orezáva, nie deformuje.
 */
figure.wp-block-image.is-style-lv-band img {
	width: 100%;
	max-height: 62vh;
	object-fit: cover;
	object-position: center;
}

/* --- Split: text a fotka vedľa seba --- */

.wp-block-columns:is(.is-style-lv-split-media-first, .is-style-lv-split-media-last) {
	gap: 0;
	align-items: stretch;
	margin-block: 0;
}

/*
 * Pomer stĺpcov drží CSS, nie atribút šírky v editore. Návrh chce 1.05 : 1
 * a `fr` sa vo flexboxe použiť nedá — WordPress by z neho spravil neplatné
 * `flex-basis: 1.05fr`, deklarácia by vypadla a stĺpec by sa zmrštil na
 * šírku jedného znaku. Preto flex-grow.
 *
 * min-width: 0 vypína minimálnu šírku podľa obsahu — bez nej dlhé slovo
 * roztiahne stĺpec a pomer sa rozsype.
 */
/*
 * Šírky stĺpcov sú v markupe vzoru ako percentá, nie tu. Jadro má pravidlo
 * `.wp-block-columns:not(...) > .wp-block-column:not([style*=flex-basis])`
 * s váhou štyroch tried, ktoré každému stĺpcu bez vlastnej šírky nastaví
 * `flex: 1 1 0` — prebiť sa to zvonku prakticky nedá. Stĺpec, ktorý šírku
 * má, si toho pravidla nevšíma. Preto ju dostal priamo vo vzore.
 */
/*
 * border-box je tu nutnosť: bez neho sa vnútorné odsadenie textového stĺpca
 * pripočíta k jeho šírke navrch, oba stĺpce sa potom pomerovo zmrštia a
 * z pomeru 51 : 49 vyjde 57 : 43 — fotka sa opticky zúži.
 */
:is(.is-style-lv-split-media-first, .is-style-lv-split-media-last) > .wp-block-column {
	box-sizing: border-box;
	min-width: 0;
}

/*
 * Ktorý stĺpec je fotka, sa pozná podľa obsahu, nie podľa poradia — klient
 * ich vie v editore prehodiť a sekcia sa nerozsype.
 */
:is(.is-style-lv-split-media-first, .is-style-lv-split-media-last) > .wp-block-column:not(:has(> .wp-block-image)) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 28px;
	padding: clamp(32px, 4vw, 72px) var(--lv-pad-x-wide);
}

:is(.is-style-lv-split-media-first, .is-style-lv-split-media-last) > .wp-block-column:has(> .wp-block-image) {
	display: flex;
	min-height: clamp(300px, 31vw, 480px);
	padding: 0;
}

/*
 * Oba stĺpce sú flex kontajnery a odstupy v nich rieši `gap`. WordPress
 * k tomu pridáva ešte blockGap ako margin každému bloku, takže medzera
 * medzi kickerom, nadpisom, odsekmi a tlačidlom vychádzala dvojnásobne
 * (28 + 28 = 56px). Margin sa preto nuluje a jediným zdrojom odstupu
 * zostáva gap.
 *
 * Fotke to zároveň zoberie odstup zhora, takže ide od okraja po okraj bloku.
 */
:is(.is-style-lv-split-media-first, .is-style-lv-split-media-last) > .wp-block-column > * {
	margin-block: 0;
}

:is(.is-style-lv-split-media-first, .is-style-lv-split-media-last) > .wp-block-column > figure.wp-block-image {
	flex: 1;
	margin: 0;
	align-self: stretch;
}

:is(.is-style-lv-split-media-first, .is-style-lv-split-media-last) > .wp-block-column > figure.wp-block-image > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Čísla --- */

.wp-block-columns.is-style-lv-numbers { gap: 0; }

.is-style-lv-numbers > .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.is-style-lv-numbers .wp-block-heading {
	margin: 0;
	font-size: clamp(48px, 6vw, 72px);
	line-height: 1;
	color: var(--lv-accent);
	font-feature-settings: 'tnum';
}

.is-style-lv-numbers p {
	margin: 0;
	font-size: var(--wp--preset--font-size--kicker-s);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--lv-text-muted);
	line-height: 1.5;
}

/* --- FAQ: natívny blok Detaily --- */

/*
 * Medzera medzi otázkami je 2× toto odsadenie plus blockGap medzi blokmi,
 * čiže 14 + 28 + 14 = 56px. Pôvodných 26px dávalo 80px a zoznam sa
 * zbytočne naťahoval.
 */
.wp-block-details.is-style-lv-faq {
	padding: 14px 0;
	border-bottom: 1px solid var(--lv-hairline);
}

.is-style-lv-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 44px;
	list-style: none;
	cursor: pointer;
	font-size: clamp(15px, 1.6vw, 19px);
	color: var(--lv-text);
}

.is-style-lv-faq summary::-webkit-details-marker { display: none; }

.is-style-lv-faq summary::after {
	content: "+";
	flex: none;
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1;
	color: var(--lv-accent);
	transition: transform .25s var(--lv-ease);
}

.is-style-lv-faq[open] summary::after { transform: rotate(45deg); }

.is-style-lv-faq p {
	max-width: 720px;
	margin: 18px 0 0;
	font-size: clamp(14px, 1.4vw, 16px);
	line-height: 1.8;
	color: var(--lv-text-muted);
}

/* --- Recenzie --- */

.lv-quotes__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}

/*
 * Vodorovný scroll so snapom namiesto posunu cez transform: šípky len
 * volajú scrollBy(), takže na mobile funguje natívny ťah prstom a na
 * desktope aj kolieskom či klávesnicou. Viď ARCHITECTURE.md §3.2.
 */
.is-style-lv-quotes {
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.is-style-lv-quotes::-webkit-scrollbar { display: none; }

.is-style-lv-quotes > .wp-block-quote {
	flex: 0 0 calc((100% - 48px) / 3);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 36px 32px;
	border: 1px solid var(--lv-hairline);
	border-radius: 10px;
	background: var(--lv-surface);
}

.is-style-lv-quotes .wp-block-quote p {
	margin: 0;
	font-family: var(--lv-font-heading);
	font-style: italic;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	color: #3B3630;
}

.is-style-lv-quotes .wp-block-quote cite {
	font-family: var(--lv-font-body);
	font-style: normal;
	font-size: var(--wp--preset--font-size--kicker-s);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lv-accent-kicker);
}

.lv-quotes__arrows { display: flex; gap: 12px; }

.lv-quotes__arrow {
	width: 44px;
	height: 44px;
	border: 1px solid #DED4C2;
	border-radius: var(--lv-radius-pill);
	background: none;
	cursor: pointer;
	color: var(--lv-text-muted);
	font-size: 17px;
	line-height: 1;
}

.lv-quotes__arrow:hover {
	border-color: var(--lv-accent);
	color: var(--lv-accent);
}

.lv-quotes__arrow[disabled] { opacity: .35; cursor: default; }

/* --- CTA blok --- */

.wp-block-group.is-style-lv-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.is-style-lv-cta .wp-block-heading {
	max-width: 640px;
	margin: 0;
	line-height: 1.2;
}

/* --- Dlaždice príbehov --- */

.lv-stories {
	gap: 2px;
	background: var(--lv-hairline);
}

.wp-block-cover.lv-story {
	aspect-ratio: 3 / 4;
	min-height: 0;
	padding: 28px;
	justify-content: flex-end;
	overflow: hidden;
}

.lv-story .wp-block-cover__image-background {
	transition: transform .5s var(--lv-ease);
}

.lv-story:hover .wp-block-cover__image-background {
	transform: scale(1.03);
}

.lv-story .wp-block-cover__inner-container { width: 100%; }

.lv-story__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.lv-story__title {
	margin: 0;
	font-size: clamp(26px, 3vw, 30px);
	line-height: 1.1;
	color: var(--lv-surface);
}

/*
 * Odkazom je pilulka, ale kliknúť sa dá kdekoľvek na dlaždicu — pretiahnutý
 * ::after prekryje celú plochu. Návrh chce klikateľnú dlaždicu, čítačka
 * obrazovky pritom dostane jeden odkaz s rozumným názvom, nie tri.
 */
.lv-story__cta { margin-top: 10px; }

.lv-story__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* --- Sticky CTA: len mobil, len stránka príbehu --- */

.lv-sticky-cta {
	position: fixed;
	left: 50%;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	z-index: 80;
	display: none; /* zapína JS */
	align-items: center;
	gap: 10px;
	padding: 12px 16px 12px 22px;
	border-radius: var(--lv-radius-pill);
	background: var(--lv-dark);
	box-shadow: 0 10px 30px rgba(32, 31, 29, .32);
	opacity: 0;
	transform: translateX(-50%) translateY(12px);
	transition: opacity .3s var(--lv-ease), transform .3s var(--lv-ease);
}

.lv-sticky-cta[data-visible="true"] {
	display: flex;
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.lv-sticky-cta__link {
	font-family: var(--lv-font-body);
	font-size: var(--wp--preset--font-size--kicker-s);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lv-on-dark);
}

.lv-sticky-cta__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 0;
	background: none;
	cursor: pointer;
	color: #9A9289;
	font-size: 16px;
	line-height: 1;
}

@media (min-width: 768px) {
	.lv-sticky-cta { display: none !important; }
}

/* --- Formulár (WPForms) --------------------------------------------------

   WPForms si nesie vlastný základný štýl (`wpforms-full.css`) a píše ho
   selektormi tvaru `div.wpforms-container-full .wpforms-form .X` — tri triedy
   a dva prvky. Navyše otvára univerzálnym resetom
   `div.wpforms-container-full .wpforms-form *`, ktorý zmaže pozadie, rámček,
   zaoblenie, `letter-spacing`, `text-transform` aj `outline`.

   Preto je každé pravidlo nižšie predsadené `.lv-form-dark .wpforms-container
   .wpforms-form`. Sú to štyri triedy, čiže o jednu viac, než má plugin —
   prebije ho to bez jediného `!important`.

   Zámerne `wpforms-container`, nie `wpforms-container-full`: triedu `-full`
   plugin pridáva len vtedy, keď má v Nastaveniach zapnuté vlastné štýly.
   Keby ich admin vypol, celá táto sekcia by prestala platiť.

   Stĺpce nerieši `float` — v grid kontajneri sa ignoruje a polia by skončili
   pod sebou. Rieši ich dvanásťstĺpcová mriežka, do ktorej sa prekladajú
   triedy `wpforms-one-half` a spol. Vďaka tomu funguje aj ľubovoľné iné
   rozdelenie, ktoré si admin v pluginu nastaví.
   -------------------------------------------------------------------- */

.lv-form-dark .wpforms-container {
	width: 100%;
	max-width: none;
	margin: 0;
}

.lv-form-dark .wpforms-container .wpforms-form .wpforms-field-container {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 14px;
}

.lv-form-dark .wpforms-container .wpforms-form .wpforms-field {
	grid-column: span 12;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}

/* Preklad stĺpcových tried WPForms na mriežku. */
.lv-form-dark .wpforms-container .wpforms-form .wpforms-one-sixth    { grid-column: span 2; }
.lv-form-dark .wpforms-container .wpforms-form .wpforms-one-fourth   { grid-column: span 3; }
.lv-form-dark .wpforms-container .wpforms-form .wpforms-one-third,
.lv-form-dark .wpforms-container .wpforms-form .wpforms-two-sixths   { grid-column: span 4; }
.lv-form-dark .wpforms-container .wpforms-form .wpforms-one-half,
.lv-form-dark .wpforms-container .wpforms-form .wpforms-two-fourths,
.lv-form-dark .wpforms-container .wpforms-form .wpforms-three-sixths { grid-column: span 6; }
.lv-form-dark .wpforms-container .wpforms-form .wpforms-two-thirds,
.lv-form-dark .wpforms-container .wpforms-form .wpforms-four-sixths  { grid-column: span 8; }
.lv-form-dark .wpforms-container .wpforms-form .wpforms-three-fourths { grid-column: span 9; }
.lv-form-dark .wpforms-container .wpforms-form .wpforms-five-sixths  { grid-column: span 10; }

/* Pole Meno v režime „Meno + Priezvisko“ — vnútri má vlastný riadok. */
.lv-form-dark .wpforms-container .wpforms-form .wpforms-field-row {
	display: flex;
	gap: 14px;
	max-width: none;
}

.lv-form-dark .wpforms-container .wpforms-form .wpforms-field-row-block {
	flex: 1;
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
}

.lv-form-dark .wpforms-container .wpforms-form input[type="text"],
.lv-form-dark .wpforms-container .wpforms-form input[type="email"],
.lv-form-dark .wpforms-container .wpforms-form input[type="tel"],
.lv-form-dark .wpforms-container .wpforms-form input[type="url"],
.lv-form-dark .wpforms-container .wpforms-form input[type="number"],
.lv-form-dark .wpforms-container .wpforms-form input[type="date"],
.lv-form-dark .wpforms-container .wpforms-form select,
.lv-form-dark .wpforms-container .wpforms-form textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: auto;
	padding: 16px 26px;
	border: 1px solid var(--lv-field-border);
	border-radius: var(--lv-radius-pill);
	background: transparent;
	color: var(--lv-on-dark);
	font-family: var(--lv-font-body);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.4;
	transition: border-color .2s var(--lv-ease);
}

/* Plugin dáva textarea pevnú výšku podľa veľkosti poľa (`wpforms-field-large`
   je 220 px) selektorom s váhou troch tried a dvoch prvkov. Preto je tu
   navyše `.wpforms-field` — bez neho by `height` z pluginu vyhralo. */
.lv-form-dark .wpforms-container .wpforms-form .wpforms-field textarea {
	height: auto;
	min-height: 96px;
	border-radius: var(--lv-radius-area);
	resize: vertical;
}

.lv-form-dark .wpforms-container .wpforms-form input::placeholder,
.lv-form-dark .wpforms-container .wpforms-form textarea::placeholder {
	color: var(--lv-field-holder);
	opacity: 1;
}

.lv-form-dark .wpforms-container .wpforms-form input:focus,
.lv-form-dark .wpforms-container .wpforms-form textarea:focus { border-color: var(--lv-accent); }

/* Reset pluginu zhodí `outline`, takže globálne pravidlo zo sekcie 8 sem
   nedosiahne. Bez tohto nemá klávesnicový návštevník vo formulári fokus. */
.lv-form-dark .wpforms-container .wpforms-form input:focus-visible,
.lv-form-dark .wpforms-container .wpforms-form select:focus-visible,
.lv-form-dark .wpforms-container .wpforms-form textarea:focus-visible,
.lv-form-dark .wpforms-container .wpforms-form button:focus-visible {
	outline: 2px solid var(--lv-accent);
	outline-offset: 2px;
}

/* Návrh počíta s poľami bez viditeľných menoviek — text nesie placeholder.
   V pluginu majú polia zapnuté „Skryť menovku“, takže menovka v HTML zostáva
   pre čítačky obrazovky. Tieto pravidlá platia, ak ju admin niekedy zapne. */
.lv-form-dark .wpforms-container .wpforms-form .wpforms-field-label,
.lv-form-dark .wpforms-container .wpforms-form .wpforms-field-sublabel {
	margin: 0 0 8px 2px;
	color: var(--lv-on-dark-muted);
	font-family: var(--lv-font-body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.lv-form-dark .wpforms-container .wpforms-form .wpforms-required-label { color: var(--lv-accent); }

.lv-form-dark .wpforms-container .wpforms-form .wpforms-submit-container { padding: 14px 0 0; }

.lv-form-dark .wpforms-container .wpforms-form button[type="submit"] {
	min-height: 44px;
	padding: var(--lv-btn-py) var(--lv-btn-px);
	border: 1px solid var(--lv-accent);
	border-radius: var(--lv-radius-pill);
	background: var(--lv-accent);
	color: var(--lv-white);
	font-family: var(--lv-font-body);
	font-size: var(--lv-btn-fs);
	letter-spacing: var(--lv-btn-ls);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s var(--lv-ease);
}

.lv-form-dark .wpforms-container .wpforms-form button[type="submit"]:hover,
.lv-form-dark .wpforms-container .wpforms-form button[type="submit"]:focus {
	border-color: var(--lv-accent-hover);
	background: var(--lv-accent-hover);
	color: var(--lv-white);
}

/* Po odoslaní plugin nahradí formulár hláškou, takže `.wpforms-form`
   už v strome nie je — tento selektor sa oň nesmie opierať. */
.lv-form-dark .wpforms-container .wpforms-confirmation-container-full {
	box-sizing: border-box;
	margin: 0;
	padding: 20px 26px;
	border: 1px solid var(--lv-accent);
	border-radius: var(--lv-radius-area);
	background: transparent;
	color: var(--lv-on-dark);
}

.lv-form-dark .wpforms-container .wpforms-confirmation-container-full p { color: var(--lv-on-dark); }

.lv-form-dark .wpforms-container .wpforms-form label.wpforms-error,
.lv-form-dark .wpforms-container .wpforms-form .wpforms-error-container {
	margin-top: 6px;
	color: var(--lv-accent-light);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 781px) {
	.lv-form-dark .wpforms-container .wpforms-form .wpforms-field { grid-column: span 12; }

	.lv-form-dark .wpforms-container .wpforms-form input[type="text"],
	.lv-form-dark .wpforms-container .wpforms-form input[type="email"],
	.lv-form-dark .wpforms-container .wpforms-form input[type="tel"],
	.lv-form-dark .wpforms-container .wpforms-form input[type="url"],
	.lv-form-dark .wpforms-container .wpforms-form input[type="number"],
	.lv-form-dark .wpforms-container .wpforms-form input[type="date"],
	.lv-form-dark .wpforms-container .wpforms-form select,
	.lv-form-dark .wpforms-container .wpforms-form textarea {
		padding: 13px 20px;
	}
}

/* -------------------------------------------------------------------------
   7. Responzivita
   ---------------------------------------------------------------------- */

/*
 * Väčšina hodnôt škáluje plynulo cez clamp() v presetoch a v tokenoch —
 * tvrdý zlom potrebujú len veci, ktoré sa nedajú interpolovať.
 */

@media (max-width: 1023px) {
	.wp-block-gallery.has-nested-images.is-style-lv-editorial { columns: 2; }
	.is-style-lv-numbers { flex-wrap: wrap; row-gap: 40px; }
	.is-style-lv-numbers > .wp-block-column { flex-basis: 50% !important; }
	.is-style-lv-quotes > .wp-block-quote { flex-basis: calc((100% - 24px) / 2); }
}

/*
 * Stĺpce z jadra sa lámu pod 782px — split musí prepnúť na tej istej
 * hranici, inak by medzi 768 a 781 px ostala fotka vysoká 800 px.
 */
@media (max-width: 781px) {
	:is(.is-style-lv-split-media-first, .is-style-lv-split-media-last) > .wp-block-column:has(> .wp-block-image) {
		min-height: 360px;
	}

	.is-style-lv-split-media-first > .wp-block-column:has(> .wp-block-image) { order: -1; }
	.is-style-lv-split-media-last  > .wp-block-column:has(> .wp-block-image) { order: 1; }
}

/*
 * Split na mobile: text odsadiť len raz.
 *
 * Bočné odsadenie tu vzniká dvakrát — raz na sekcii, raz na textovom stĺpci.
 * Na širokej obrazovke to spolu dáva žiadaný vzduch, lenže na mobile sa obe
 * zastavia na svojom minime (35,6 + 32 px) a sčítajú sa na 68 px z každej
 * strany. Z displeja širokého 375 px tak na text zostane 240 px, čo je
 * 33 znakov na riadok. Pohodlné čítanie začína zhruba na 45; pri 33 oko
 * skáče z riadka na riadok a text pôsobí stlačený do komína. Na 320 px
 * displeji to bolo dokonca 25 znakov.
 *
 * Na mobile preto odsadzuje len sekcia, a to 24 px — teda gutter, s akým
 * počíta handoff §7. Namerané po oprave: 375 px → 45 znakov, 320 px → 37.
 * Zvislé odsadenie stĺpca zostáva, mení sa výhradne bočné.
 */
@media (max-width: 600px) {
	.wp-block-columns:is(.is-style-lv-split-media-first, .is-style-lv-split-media-last) {
		padding-inline: 24px;
	}

	:is(.is-style-lv-split-media-first, .is-style-lv-split-media-last) > .wp-block-column:not(:has(> .wp-block-image)) {
		padding-inline: 0;
	}
}

@media (max-width: 767px) {
	body { font-size: var(--wp--preset--font-size--body-s); }

	.lv-kicker,
	.is-style-lv-kicker {
		font-size: var(--wp--preset--font-size--kicker-s);
		letter-spacing: .28em;
	}

	/* CTA je na mobile vždy centrované — dizajnové pravidlo z handoffu §7 */
	.wp-block-buttons { justify-content: center; }

	/* Nav pod notchom */
	.lv-nav {
		padding-top: calc(20px + env(safe-area-inset-top, 0px));
		padding-bottom: 20px;
	}

	.lv-nav__logo img { width: 128px; }

	/* Panel zhora nadol, nie zboku */
	.lv-panel {
		top: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: auto;
		max-height: 100dvh;
		overflow-y: auto;
		box-shadow: 0 20px 40px rgba(32, 31, 29, .16);
	}

	.lv-panel__nav {
		flex: none;
		padding: 16px 24px 24px;
	}

	.lv-panel__nav .wp-block-navigation__container { gap: 8px; }
	.lv-panel__close { margin: 24px 24px 0; }
	.lv-panel__foot { padding: 24px; }

	/* Pätička na seba */
	.lv-footer {
		flex-direction: column;
		gap: 20px;
		padding: 28px var(--lv-pad-x);
		text-align: center;
	}

	.lv-footer__nav .wp-block-navigation__container {
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
	}

	.lv-footer__nav .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--kicker-s);
	}

	/*
	 * Galéria na mobile v dvoch stĺpcoch, nie v jednom.
	 *
	 * Jeden stĺpec znamená, že návštevník vidí naraz jednu fotku a k ďalšej
	 * sa musí preskrolovať — z mriežky sa stane nekonečný pás a prehľad
	 * o tvorbe sa stratí. Dva stĺpce sú užšie, ale ukážu rytmus.
	 * Rozhodnutie klienta, platí všade vrátane domovskej.
	 */
	.wp-block-gallery.has-nested-images.is-style-lv-editorial { columns: 2; }

	/* Čísla dva a dva */
	.is-style-lv-numbers > .wp-block-column { flex-basis: 50% !important; }

	/* Dlaždice príbehov do jedného stĺpca */
	.lv-stories { grid-template-columns: 1fr !important; }
	.lv-story__meta { gap: 4px; }
	.wp-block-cover.lv-story { padding: 18px; }

	/* Recenzie — natívny ťah prstom, karta na šírku obrazovky */
	.is-style-lv-quotes { gap: 14px; }

	.is-style-lv-quotes > .wp-block-quote {
		flex: 0 0 250px;
		padding: 24px 22px;
	}

	.lv-quotes__head { margin-bottom: 24px; }
}

/* -------------------------------------------------------------------------
   8. Prístupnosť
   ---------------------------------------------------------------------- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--lv-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/*
 * Dotykové ciele — handoff §7 žiada aspoň 44 × 44 px.
 *
 * Namerané pred opravou: odkazy v pätičke 20 px vysoké, Instagram 18 px,
 * položky panelu menu 36 px. Prvé dve sú pod hranicou 24 × 24, ktorú
 * žiada aj WCAG 2.2, nie je to teda len kozmetika.
 *
 * V pätičke sa plocha rozširuje pseudoprvkom, nie paddingom: pätička je
 * zámerne nízka (DESIGN-DECISIONS §4) a padding by ju zväčšil. Rozšírenie
 * 12 px je menej než polovica medzery 30 px medzi položkami, takže sa dva
 * susedné ciele neprekryjú.
 */
.lv-footer__nav .wp-block-navigation-item__content,
.lv-panel__social a,
.lv-nav__logo {
	position: relative;
}

.lv-footer__nav .wp-block-navigation-item__content::after,
.lv-panel__social a::after,
.lv-nav__logo::after {
	content: "";
	position: absolute;
	inset: -13px;
}

/* Panel menu má miesta dosť, tam stačí skutočná výška. */
.lv-panel__nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.lv-visually-hidden:not(:focus):not(:active) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lv-skip-link {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 200;
	padding: 12px 20px;
	background: var(--lv-dark);
	color: var(--lv-on-dark);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.lv-skip-link:focus { left: 0; }

/* Zamknutý scroll, kým je otvorený panel menu (step 4) */
body.lv-menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}