/*
 * Stránka Demo — split, gradientová plocha, okno so screenshotom a pravý panel.
 *
 * Sekcia je **vzor z core blokov**, nie vlastný blok: ľavá plocha aj pravý
 * panel sú `core/group`, okno je `core/image`, nadpis a lead sú `core/heading`
 * a `core/paragraph`. Vlastný je len `egrant/demo-booking` (pilulka, formulár,
 * poďakovanie) a ten má svoj vlastný štýl v plugine.
 *
 * Šablóna `templates/page-demo.html` je jediná na webe bez hlavičky a pätičky,
 * takže `main.egrant-demo` je tu celá stránka.
 *
 * Odmerané na ráme `1280 Demo` (`09-11 12-53-16`), mierka snímky 0,905:
 * plocha 592, medzera 32, panel 592, odsadenie stránky 32 — dokopy presne 1280.
 */

.egrant-demo {
	--egrant-demo-pad: var(--wp--preset--spacing--70); /* 32 */

	/*
	 * 🔴 **Od `100vh` treba odrátať admin bar.** Ten posúva `html` nadol
	 * o svojich 32 px, takže stránka vysoká celých `100vh` končí 32 px pod
	 * spodnou hranou okna — a to, čo vypadne, je presne spodný padding.
	 * Vyzerá to, že gradientová plocha ide až po okraj (všimol si Lukáš
	 * 2026-09-18 na stage, kde je prihlásený).
	 *
	 * `--wp-admin--admin-bar--height` definuje jadro na `html`
	 * (`wp-includes/css/admin-bar.css:1-3`, 32 px a 46 pod 782). Pre
	 * odhláseného návštevníka premenná neexistuje, takže sa uplatní záloha
	 * `0px` a správanie sa nemení — čo je aj dôvod, prečo to nikto nevidel
	 * skôr než na stage.
	 */
	--egrant-demo-viewport: calc(100vh - var(--wp-admin--admin-bar--height, 0px));

	box-sizing: border-box;
	min-height: var(--egrant-demo-viewport);
	padding: var(--egrant-demo-pad);
	background: var(--wp--preset--color--base);
}

/*
 * 🔴 Mriežka patrí na obal obsahu, nie na `main`.
 *
 * `wp:post-content` vkladá medzi šablónu a bloky stránky vlastný `<div
 * class="entry-content wp-block-post-content">`. Keby bola mriežka na `main`,
 * mala by **jediného potomka** — ten obal — a obe polovice by zostali pod
 * sebou v ňom. (Odmerané: `main` mal jedno dieťa a stĺpce vyšli `800px 384px`.)
 */
.egrant-demo > .wp-block-post-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/*
	 * Riadku treba povedať, že má vyplniť výšku. Samotný `min-height` nechá
	 * riadok na výške obsahu a pod ním mŕtve miesto.
	 */
	grid-template-rows: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70); /* 32 */
	align-items: stretch;
	min-height: calc(var(--egrant-demo-viewport) - 2 * var(--egrant-demo-pad));
}

/*
 * `is-layout-flow` vešia na súrodencov `margin-block-start` z `blockGap`.
 * V mriežke je to medzera navyše k `gap` a posunulo by to obe polovice.
 */
.egrant-demo > .wp-block-post-content > * {
	margin-block: 0;
}

/* ── Ľavá polovica: gradientová plocha ─────────────────────────────────── */

.egrant-demo__visual {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--xl); /* 16 */
	/* Presvitá, kým sa nevykreslí prvá vrstva gradientu. */
	background: var(--wp--preset--color--neutral);
	display: flex;
	align-items: center; /* Figma centruje okno zvisle */
}

/*
 * Jedna vrstva na gradient, crossfadujú sa — `background-image` sa animovať
 * nedá. Vrstvy vkladá `assets/app/gradient-field.js`, tu je len ich vzhľad.
 * Rovnaký princíp aj rovnaké hodnoty ako pás D (`pattern-system-preview.css`).
 */
.egrant-demo__visual .egrant-gradient-field__layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--egrant-gradient-field-fade, 4200ms) linear;
}

/*
 * 🔴 Nulový margin je nutný, nie kozmetika.
 *
 * `core/group` je `is-layout-flow` a jadro vešia na **každého potomka okrem
 * prvého** `margin-block-start` z `blockGap`. Absolútne umiestnenej vrstve to
 * margin nezruší: `inset: 0` jej dá polohu, ale margin ju z nej ešte posunie.
 * Prvá vrstva teda sedela správne a vrstvy 2–6 boli o 32 nižšie a o 32 kratšie
 * — a cez ten pruh navrchu presvitalo sivé pozadie plochy (`neutral`).
 * Bolo to vidieť len vtedy, keď bola aktívna iná vrstva než prvá, teda 5/6
 * času. Odmerané v prehliadači: vrstva 1 `y: 32`, vrstvy 2–6 `y: 64`.
 *
 * Z toho istého dôvodu tu musí byť aj okno — inak ho margin zhora vysunie
 * z vertikálneho stredu plochy.
 */
.egrant-demo .egrant-demo__visual.wp-block-group > * {
	margin-block: 0;
}

.egrant-demo__visual .egrant-gradient-field__layer.is-active {
	opacity: 1;
}

/* ── Okno so screenshotom ──────────────────────────────────────────────── */

.egrant-demo__window {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: var(--egrant-demo-window, 768px);
	/*
	 * Odsadenie zľava je jedno pravidlo pre všetky šírky — ten istý idióm ako
	 * v páse D: kým sa okno do plochy zmestí, `(100 % − okno) / 2` ho
	 * vycentruje, a keď je plocha užšia, vyhrá 32 a okno vytŕča vpravo.
	 *
	 * Je to priamo odpoveď na komentár vo Figme na snímke `12-53-27`:
	 * „Obrazok potom responzívne pri väčšom rozlíšení hodiť na stred plochy.
	 * Takto sa orezáva pri menších rozlíšeniach." Na 1280 je plocha 592
	 * a okno 768, takže sa orezáva aj tam — vycentruje sa až nad 832.
	 */
	margin: 0 0 0 max(var(--wp--preset--spacing--70), (100% - var(--egrant-demo-window, 768px)) / 2);
	border-radius: var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0 0; /* 8 8 0 0 */
	overflow: hidden;
}

/*
 * Pruh okna prehliadača.
 *
 * ⚠️ **Bez troch bodiek a v inej farbe než v prototype.** Prototyp má
 * `.demo-window__bar` svetlobéžový (#EFECE8) s tromi bodkami; na ráme je pruh
 * **holý a sivý** — odmerané `#D9D9D9` a výška 28 (snímka `12-53-16`,
 * riadky 258–283 pri mierke 0,905). Rám je novší, takže platí rám.
 *
 * Farba je napísaná natvrdo zámerne: v palete témy nie je a nepatrí do nej —
 * je to chrom okna cudzej aplikácie, nie značková farba webu.
 */
.egrant-demo__window::before {
	content: '';
	display: block;
	height: 28px;
	background: #d9d9d9;
}

.egrant-demo__window img {
	display: block;
	width: 100%;
	/* Figma 5160:14124 — plocha screenshotu pod pruhom. */
	aspect-ratio: 768 / 452.8;
	object-fit: cover;
	/*
	 * Screenshot je vyšší, než sa doň zmestí, takže sa oreže. Zhora zľava,
	 * nie na stred: hore je hlavička appky a prvý rad kariet, teda to, čo má
	 * návštevník spoznať.
	 */
	object-position: top left;
	background: var(--wp--preset--color--surface);
}

/* ── Pravá polovica: panel s formulárom ────────────────────────────────── */

.egrant-demo__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Figma 2925:5061 — medzera hlavička / úvod / telo. */
	gap: var(--wp--preset--spacing--80); /* 40 */
	/*
	 * Keď stĺpec prerastie formulár, zvyšok musí padnúť na **obe** strany —
	 * `stretch` by panel pritlačil k prostrednej medzere.
	 */
	align-self: center;
	width: 100%;
	max-width: 600px; /* Figma 2925:5061 max-w-[600px] */
	margin-inline: auto;
}

/*
 * 🔴 Medzery drží `gap`, nie margin — a `blockGap` z `is-layout-flow` sa naň
 * **pripočítava**. Kým tu toto pravidlo nebolo, bolo medzi logom a nadpisom
 * 72 namiesto 40 (všimol si Lukáš 2026-09-18, odmerané v prehliadači).
 *
 * Tri triedy v selektore sú nutné: jadro píše
 * `.wp-block-group.is-layout-flow > :where(…)`, teda (0,2,0). Dve triedy by
 * boli remíza a rozhodovalo by poradie stylesheetov — presne ten druh
 * závislosti, ktorý sa raz sám prevráti.
 */
.egrant-demo .egrant-demo__panel.wp-block-group > * {
	margin-block: 0;
}

.egrant-demo__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40); /* 16 */
	margin: 0;
}

.egrant-demo__logo {
	display: block;
	line-height: 0;
	border-radius: var(--wp--custom--radius--sm);
	transition: opacity var(--wp--custom--transition--fast);
}

.egrant-demo__logo:hover {
	opacity: 0.7;
}

/* Odmerané na ráme: znak je vysoký 35 obrazových bodov pri mierke 0,905. */
.egrant-demo__logo svg {
	display: block;
	height: 38.4px;
	width: auto;
}

/* Okrúhle „‹" — Figma 7060:10647. Markup je `[egrant_demo_head]`. */
.egrant-demo__back {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 38px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
	transition:
		background var(--wp--custom--transition--fast),
		transform var(--wp--custom--transition--fast);
}

.egrant-demo__back:hover {
	background: var(--wp--preset--color--ink-hover);
}

.egrant-demo__back:active {
	transform: scale(0.96);
}

/*
 * Nadpis a lead sú v tom istom kroku škály ako inde na webe: 17,6 a 14,4.
 * Odmerané na ráme — výška verzálky nadpisu 12 a rozstup riadkov leadu 16
 * obrazových bodov pri mierke 0,905.
 *
 * Lead ide presetom `button` (14,4 na oboch šírkach), nadpis zostáva
 * literálom: preset `small` klesá pod 900 na 16,6 a rám pre mobilné Demo,
 * ktorý by to potvrdil alebo vyvrátil, nie je.
 */
.egrant-demo__title {
	margin: 0;
	font-size: 17.6px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.2px;
	color: var(--wp--preset--color--ink);
}

.egrant-demo__lead {
	/* Figma 2925:5074 — nadpis a lead sú jedna dvojica s medzerou 12. */
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--button); /* 14,4 */
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.2px;
	color: var(--wp--preset--color--muted);
}

/*
 * Nadpis a lead patria k sebe, takže medzi nimi nesmie byť medzera panelu (40).
 * `gap` na flexe sa nedá vynulovať pre jednu dvojicu, preto lead vyskočí hore
 * o presne tú medzeru a svojich 12 si dá marginom vyššie.
 */
.egrant-demo .egrant-demo__panel.wp-block-group > .egrant-demo__lead {
	margin-top: calc(var(--wp--preset--spacing--30) - var(--wp--preset--spacing--80));
}

/* ── Pod 1024: jeden stĺpec, plocha odpadá ─────────────────────────────── */

/*
 * ⚠️ **Rám `375 Demo` gradientovú plochu nemá vôbec** — na mobile je len
 * formulár. Prototyp ju drží ako pruh nad formulárom; rám je novší, takže
 * platí rám.
 *
 * Zlom je `lg` (1024), nie 375: okno má 768 a celý zmysel plochy je ukázať ho.
 * V stĺpci užšom než 832 sa okno aj tak orezáva a pod 1024 by z neho zostal
 * roh dashboardu. Jedno pravidlo namiesto troch medzistavov.
 */
@media (max-width: 1024px) {
	.egrant-demo > .wp-block-post-content {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		align-items: start;
	}

	.egrant-demo__visual {
		display: none;
	}

	/*
	 * 🔴 Bez plochy vedľa seba stráca zvislé centrovanie zmysel a začne vadiť:
	 * na 375 × 1227 je formulár kratší než okno, takže sa panel odsunul o ~180
	 * od hornej hrany (všimol si Lukáš 2026-09-18). Rám `375 Demo` má logo
	 * hneď pod odsadením stránky. Rovnako to rieši prototyp
	 * (`styles.css:3243`, `.demo-formcol { justify-content: flex-start }`).
	 */
	.egrant-demo__panel {
		justify-content: flex-start;
		align-self: start;
	}
}

/*
 * Polia idú pod seba už z `pattern-form.css` (`@media (max-width: 720px)`),
 * rovnako ako na Kontakte — tu sa opakovať nemusia. Zostáva odsadenie stránky,
 * ktoré prototyp na tejto šírke znižuje z 32 na 20.
 */
@media (max-width: 720px) {
	.egrant-demo {
		--egrant-demo-pad: var(--wp--preset--spacing--50); /* 20 */
	}
}