/*
 * Generation 22 — сторінка "День відкритих дверей" (/den-vidkrytykh-dverei/,
 * post_name підтверджено через canonical у розмітці, id 25). Підключається
 * автоматично поверх inner-henna.css (functions.php:
 * assets/css/pages/{slug}.css).
 *
 * Марк-ап НЕ змінюється (форма/hidden-поля/honeypot/nonce — не чіпати) —
 * тут лише візуальна мова: світло-сірий фон, картки #f4f4f2, mono-eyebrow
 * з жовтим тире, фіолетові pill-кнопки, локальні motion-токени + reveal
 * зі страховкою видимості (той самий принцип, що й g22-reveal-fallback-in
 * у home-studio.css, — застосовано локально до .g22-page-content, без
 * залежності від reveal.js, чий revealSelector цю сторінку не покриває:
 * .g22-page-section / .g22-page-kicker / .g22-page-title / .g22-page-summary
 * / .g22-cta-panel в його списку немає — тільки #reviews-класи, які вже й
 * так повністю стилізовані сайт-вайд у home-henna.css/home-studio.css поза
 * .g22-henna--clean скоупом, тому цей файл їх не чіпає).
 *
 * Токени --g22h-* — з home-henna.css (dep 'g22-home', завжди в каскаді).
 *
 * ВАЖЛИВО (звіт): у ТЗ секція 1 описана як "Про день відкритих дверей +
 * кнопка «Записатися»", що веде якорем до форми (секція 3). У фактичній
 * розмітці сторінки такої кнопки/посилання в секції 1 НЕМАЄ ВЗАГАЛІ — є
 * лише kicker + H1 + summary (.g22-page-section), без жодного <a>/<button>.
 * У .g22-cta-panel теж немає id для якоря. Це прогалина контенту/розмітки
 * (page.php + Gutenberg-контент), а не стилів — CSS не може додати
 * клікабельний елемент чи id в DOM. Не виправлено навмисно (заборонено
 * редагувати розмітку/контент цим агентом) — потрібен окремий прохід іншого
 * агента з правом редагувати контент сторінки/page.php.
 */

/* -------------------------------------------------- */
/* Локальні motion-токени (скоуп: .g22-page-content)    */
/* Значення узгоджені з .g22-henna--clean у               */
/* home-studio.css — один моушн-язик на весь сайт.       */
/* -------------------------------------------------- */

.g22-page-content {
	--dvd-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--dvd-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
	--dvd-dur-quick: 160ms;
	--dvd-dur-std: 380ms;
	--dvd-stagger: 70ms;
	--dvd-rise: 18px;
}

/* -------------------------------------------------- */
/* Canvas — світло-сірий фон замість дефолтного          */
/* сайт-вайд bg (успадкованого з home-henna.css), щоб     */
/* картка #f4f4f2 читалась як піднята над полотном.       */
/* -------------------------------------------------- */

body.page-id-25 {
	background: #ececea;
}

/* -------------------------------------------------- */
/* Секція 1 — hero type from shared inner-henna tokens  */
/* -------------------------------------------------- */

/* The summary paragraph carries a `has-text-align-center` class from the
 * block editor — realign left to match the headline. */
body.page-id-25 .g22-page-summary {
	text-align: left;
}

.g22-page-title .g22-marker-word {
	padding-inline: 0.02em;
}

.g22-page-section {
	position: relative;
	padding-block: 0 clamp(24px, 3vw, 40px);
}

body.page-den-vidkrytykh-dverei .g22-page-shell {
	overflow: clip;
}

/* -------------------------------------------------- */
/* Henna-жест 1 — стрілка-нотатка "сюди" між інтро й      */
/* формою: та сама mask-техніка, що й .g22-content-grid   */
/* ::after у vartist.css. Тільки ink-тон і низька opacity, */
/* щоб лишитись тихим маргінальним жестом, не акцентом.    */
/* -------------------------------------------------- */

body.page-den-vidkrytykh-dverei .g22-page-section::after {
	content: "";
	position: absolute;
	right: clamp(8px, 6vw, 64px);
	bottom: clamp(-56px, -6vw, -36px);
	width: 56px;
	height: 56px;
	background-color: var(--g22h-ink);
	-webkit-mask: url("../../images/brand/doodles/arrow-curve.svg") center / contain no-repeat;
	mask: url("../../images/brand/doodles/arrow-curve.svg") center / contain no-repeat;
	transform: rotate(96deg) scaleX(-1);
	opacity: 0.28;
	pointer-events: none;
}

@media (max-width: 781px) {
	body.page-den-vidkrytykh-dverei .g22-page-section::after {
		display: none;
	}
}

/* Єдиний живий H2 сторінки — заголовок форми в .g22-cta-panel. */
.g22-page-content h2 {
	font-family: "Manrope", var(--g22h-font);
	font-weight: 700;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	max-width: none;
}

/* -------------------------------------------------- */
/* Секція 3 — CTA-панель + форма                        */
/* -------------------------------------------------- */

.g22-cta-panel {
	border-radius: 20px;
	background: #f4f4f2;
	border: 1px solid rgba(26, 26, 26, 0.06);
	box-shadow: 0 1px 2px rgba(26, 26, 26, 0.03);
}

/* -------------------------------------------------- */
/* Henna-жест 2 — наклон-виняток на заголовку форми:      */
/* жовта плашка + rotate, ті самі значення, що й            */
/* .g22-tilt у henna-gestures.css (rotate(-2.5deg),         */
/* transform-origin 30% 50%, spring-transition на hover).   */
/* -------------------------------------------------- */

.g22-cta-panel h2 {
	display: inline-block;
	max-width: fit-content;
	margin: 0 0 clamp(28px, 3.4vw, 40px);
	padding: 0.2em 0.5em 0.28em;
	border-radius: 10px;
	background: #ffd141;
	transform: rotate(-2.5deg);
	transform-origin: 30% 50%;
	transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.g22-cta-panel:hover h2 {
	transform: rotate(-0.75deg) translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.g22-cta-panel h2,
	.g22-cta-panel:hover h2 {
		transition: none;
		transform: none;
	}
}

.g22-cta-panel .g22-form {
	gap: 18px;
}

/* Інпути — фіолетове фокус-кільце, перехід 100ms. Механіку полів
   (hidden/honeypot/nonce/name-атрибути) не чіпаємо — лише вигляд. */
.g22-cta-panel .g22-form input,
.g22-cta-panel .g22-form textarea {
	background: #fff;
	border-color: rgba(26, 26, 26, 0.1);
	transition:
		border-color var(--dvd-ease-enter) 100ms,
		box-shadow var(--dvd-ease-enter) 100ms;
}

.g22-cta-panel .g22-form input:focus-visible,
.g22-cta-panel .g22-form textarea:focus-visible {
	outline: none;
	border-color: var(--g22h-purple);
	box-shadow: 0 0 0 4px var(--g22h-purple-border);
}

/* Кнопка форми — фіолетовий pill: hover lift + active scale 0.98,
   той самий патерн, що й .g22-clean__btn на головній (home-studio.css). */
.g22-cta-panel .g22-form button {
	border-radius: 999px;
	background: var(--g22h-purple);
	box-shadow: 0 10px 24px rgba(63, 39, 128, 0.22);
	transition:
		background-color var(--dvd-dur-quick) var(--dvd-ease),
		box-shadow var(--dvd-dur-quick) var(--dvd-ease),
		transform 100ms var(--dvd-ease-enter);
}

.g22-cta-panel .g22-form button:hover {
	background: var(--g22h-purple-hover);
	box-shadow: 0 14px 30px rgba(63, 39, 128, 0.3);
	transform: translateY(-2px);
}

.g22-cta-panel .g22-form button:active {
	box-shadow: 0 6px 16px rgba(63, 39, 128, 0.2);
	transform: translateY(0) scale(0.98);
}

.g22-cta-panel .g22-form button:focus-visible {
	outline: 2px solid var(--g22h-purple);
	outline-offset: 3px;
}

/* -------------------------------------------------- */
/* Reveal + страховка видимості                          */
/*                                                        */
/* reveal.js вантажиться на внутрішніх сторінках           */
/* (functions.php), але його revealSelector не включає     */
/* жоден клас нижче — .g22-be-reveal сюди ніколи не        */
/* додасться. Тому motion тут не залежить від              */
/* JS/IntersectionObserver: одна @keyframes, що стартує    */
/* від paint і гарантовано завершується за частки          */
/* секунди — той самий принцип, що й                      */
/* g22-reveal-fallback-in у home-studio.css, але без        */
/* .is-in-гейта, якого тут нема кому виставляти.            */
/* Базовий стан — opacity:1 у звичайному каскаді;           */
/* keyframes лише додають вхідний рух, якщо @keyframes      */
/* підтримуються — інакше контент лишається видимим за      */
/* замовчуванням (страховка).                              */
/* -------------------------------------------------- */

@keyframes dvd-reveal-in {
	from {
		opacity: 0;
		transform: translate3d(0, var(--dvd-rise), 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.g22-page-kicker,
.g22-page-title,
.g22-page-summary,
.g22-cta-panel {
	animation: dvd-reveal-in var(--dvd-dur-std) var(--dvd-ease-enter) both;
}

.g22-page-kicker { animation-delay: 0ms; }
.g22-page-title { animation-delay: calc(var(--dvd-stagger) * 1); }
.g22-page-summary { animation-delay: calc(var(--dvd-stagger) * 2); }
.g22-cta-panel { animation-delay: calc(var(--dvd-stagger) * 3); }

@media (prefers-reduced-motion: reduce) {
	.g22-page-kicker,
	.g22-page-title,
	.g22-page-summary,
	.g22-cta-panel,
	.g22-cta-panel .g22-form button,
	.g22-cta-panel .g22-form input,
	.g22-cta-panel .g22-form textarea {
		animation: none !important;
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* -------------------------------------------------- */
/* Мобайл 390px                                          */
/* -------------------------------------------------- */

@media (max-width: 480px) {
	.g22-cta-panel {
		padding: 24px 20px;
	}

	.g22-cta-panel h2 {
		display: block;
		max-width: none;
		font-size: clamp(1.5rem, 6.5vw, 1.9rem);
		transform: rotate(-1.5deg);
	}

	.g22-cta-panel:hover h2 {
		transform: rotate(-1.5deg);
	}

	.g22-cta-panel .g22-form button {
		width: 100%;
	}
}

/* Client deck: a real-school image in the hero removes the grey-only first fold. */
body.page-den-vidkrytykh-dverei .g22-page-content > .g22-page-section:first-child {
	position: relative;
	min-height: 470px;
	padding-right: min(46%, 540px);
}

body.page-den-vidkrytykh-dverei .g22-page-content > .g22-page-section:first-child::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: min(42%, 500px);
	height: auto;
	aspect-ratio: var(--g22-hero-media-ratio, 4 / 3);
	border-radius: var(--g22-hero-media-radius, 20px);
	background: url("../../images/photos/g22-open-day.webp?v3") center / cover no-repeat;
	box-shadow: var(--g22-hero-media-shadow, 0 24px 60px rgba(26, 26, 26, 0.14));
}

body.page-den-vidkrytykh-dverei .g22-cta-panel {
	background: linear-gradient(135deg, #f4f4f5, #e8e8ea);
}

@media (max-width: 820px) {
	body.page-den-vidkrytykh-dverei .g22-page-content > .g22-page-section:first-child {
		min-height: 0;
		padding-right: 0;
	}

	body.page-den-vidkrytykh-dverei .g22-page-content > .g22-page-section:first-child::before {
		position: relative;
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: var(--g22-hero-media-ratio-narrow, 16 / 10);
		margin-top: 30px;
		border-radius: var(--g22-hero-media-radius, 20px);
	}
}