/*
 * Сторінка «Навчальний процес» — assets/css/pages/navchalnyi-protses.css
 *
 * ІЗОЛЯЦІЯ: цей файл підключається лише на цій сторінці (per-slug enqueue,
 * functions.php: is_page() + file_exists('assets/css/pages/{slug}.css')),
 * тому додаткового CSS-скоупу технічно не потрібно — та щоб не залежати від
 * каскаду й лишити явний слід ізоляції, усі правила все одно префіксовані
 * `body.page-id-20`.
 *
 * Мета: підняти візуальну мову внутрішньої сторінки до нової головної
 * (front-page.php + assets/css/home-studio.css, скін .g22-henna--clean).
 * Ця сторінка .g22-henna--clean НЕ несе (це маркер тільки front-page.php),
 * тож моушен-токени (--g22-t-fast/--g22-t-med/--g22-ease-out/--g22-spring)
 * оголошено тут ЛОКАЛЬНО — інакше вони резолвились би в invalid var і
 * transition/animation пропускались би цілком (той самий урок, що описаний
 * коментарем у home-studio.css про body:has(.g22-henna--clean)).
 *
 * Кольорові токени --g22h-* (purple #3F2780, yellow #FFD141, ink, bg) вже
 * оголошені на :root у home-henna.css (сайт-вайд, залежність цього файлу) —
 * використовуються напряму, без дублювання значень.
 *
 * ВАЖЛИВО про reveal: reveal.js (єдиний JS-контролер скролл-реveal на
 * внутрішніх сторінках) спостерігає жорсткий список .g22-henna__* класів
 * (functions.php / assets/reveal.js) — жоден з них не збігається з
 * розміткою цієї сторінки (.g22-timeline-item, .g22-card, .g22-page-section
 * — це блоки generation22/* та base .g22-page-*). Тобто JS reveal сюди не
 * дотягується. Замість дублювання чужого JS-контролера — чистий CSS
 * scroll-reveal на animation-timeline: view() з progressive enhancement:
 * підтримка є → fade-up на в'їзді у в'юпорт; підтримки нема → елемент
 * лишається у звичайному видимому стані за замовчуванням (нічого не
 * ховається поза @supports-гілкою). Це і є CSS-страховка видимості —
 * власна копія ідеї g22-reveal-fallback-in з home-studio.css, адаптована
 * під відсутність JS-спостерігача на цій сторінці.
 */

body.page-id-20 {
	/* ---- локальні моушен-токени (своя копія, скоуп цієї сторінки) ---- */
	--g22-t-fast: 100ms;
	--g22-t-med: 200ms;
	--g22-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--g22-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* ---- локальні аліаси кольору/форми (значення = --g22h-* сайт-вайд) ---- */
	--np-purple: var(--g22h-purple, #3F2780);
	--np-purple-hover: var(--g22h-purple-hover, #4c319c);
	--np-yellow: var(--g22h-yellow, #FFD141);
	--np-ink: var(--g22h-ink, #1a1a1a);
	--np-ink-70: rgba(26, 26, 26, 0.8);
	--np-ink-55: rgba(26, 26, 26, 0.55);
	/* WCAG AA fix: 0.45 alpha measured ~2.75:1 on the ~rgb(229,229,229)
	   eyebrow background — fails 4.5:1. Bumped to 0.78 (~6:1) for AA. */
	--np-ink-45: rgba(26, 26, 26, 0.78);
	--np-ink-12: rgba(26, 26, 26, 0.12);
	--np-card: #f4f4f2;
	--np-card-line: rgba(26, 26, 26, 0.08);
	--np-radius: 20px;
	--np-radius-lg: 28px;
	--np-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
	--np-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* -------------------------------------------------- */
/* Reveal — keyframe (власна копія g22-reveal-fallback-in,   */
/* адаптована під CSS-only scroll-timeline, без JS-спостерігача) */
/* -------------------------------------------------- */

@keyframes g22-np-reveal-fallback-in {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		body.page-id-20 .g22-page-section,
		body.page-id-20 .g22-cards__head,
		body.page-id-20 .g22-cards__grid .g22-card,
		body.page-id-20 .g22-timeline__head,
		body.page-id-20 .g22-timeline-item,
		body.page-id-20 .g22-form {
			animation: g22-np-reveal-fallback-in 1 linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 28%;
		}
	}
}

/* prefers-reduced-motion: reduce → повністю статично (жодного opacity:0 і
   поза @supports-гілкою вище не оголошується, тож тут нема чого «вимикати» —
   лишаємо явним для читаності й на випадок майбутніх правок). */
@media (prefers-reduced-motion: reduce) {
	body.page-id-20 .g22-page-section,
	body.page-id-20 .g22-cards__head,
	body.page-id-20 .g22-cards__grid .g22-card,
	body.page-id-20 .g22-timeline__head,
	body.page-id-20 .g22-timeline-item,
	body.page-id-20 .g22-form {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* -------------------------------------------------- */
/* Canvas / shell                                       */
/* -------------------------------------------------- */

body.page-id-20 {
	font-family: var(--np-font);
}

body.page-id-20 .g22-page-content {
	max-width: 1120px;
}

/* -------------------------------------------------- */
/* Eyebrow — IBM Plex Mono, uppercase, жовте тире       */
/* (спільний патерн для kicker / timeline / cards)      */
/* -------------------------------------------------- */

body.page-id-20 .g22-page-kicker,
body.page-id-20 .g22-timeline__eyebrow,
body.page-id-20 .g22-cards__eyebrow {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-family: var(--np-font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--np-ink-45);
}

body.page-id-20 .g22-page-kicker::before,
body.page-id-20 .g22-timeline__eyebrow::before,
body.page-id-20 .g22-cards__eyebrow::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 3px;
	border-radius: 0;
	background: var(--np-yellow);
	flex: 0 0 auto;
}

/* -------------------------------------------------- */
/* Intro — kicker + H1 + summary (перший .g22-page-section) */
/* -------------------------------------------------- */

/* Intro spacing — shared --g22-below-nav owns the top offset. */
body.page-id-20 .g22-page-content > .g22-page-section:not(.g22-surface-panel) {
	padding-block: 0 clamp(24px, 3vw, 40px);
}

body.page-id-20 .g22-page-summary {
	text-align: left;
	color: var(--np-ink-70);
}

/* -------------------------------------------------- */
/* Hero two-column: copy left, classroom photo + proof  */
/* stats right (fills the empty right half of the hero) */
/* -------------------------------------------------- */

body.page-id-20 .g22-study-hero > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.84fr);
	column-gap: clamp(2rem, 4vw, 4.5rem);
	row-gap: 0;
	align-items: start;
}

/* Left column: copy wrapper (kicker / H1 / summary stacked, left-aligned). */
body.page-id-20 .g22-study-hero__copy {
	grid-column: 1;
}

body.page-id-20 .g22-study-hero .g22-page-kicker {
	justify-content: flex-start;
	margin-inline: 0;
}

/* Right column: photo card + proof stats. */
body.page-id-20 .g22-study-hero__aside {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.5rem);
}

body.page-id-20 .g22-study-hero__figure {
	margin: 0;
	border-radius: var(--g22-hero-media-radius, 20px);
	overflow: hidden;
	aspect-ratio: var(--g22-hero-media-ratio, 4 / 3);
	box-shadow: var(--g22-hero-media-shadow, 0 24px 60px rgba(26, 26, 26, 0.14));
}

body.page-id-20 .g22-study-hero__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	content: url("../../images/photos/g22-learn-hero.webp?v3");
}

/* Hero proof strip: shared in inner-henna.css — do not restyle here. */

/* Stack under the copy on narrower viewports. */
@media (max-width: 860px) {
	body.page-id-20 .g22-study-hero > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		row-gap: clamp(1.5rem, 4vw, 2.25rem);
	}
	body.page-id-20 .g22-study-hero__aside {
		grid-column: 1;
		grid-row: auto;
	}
	body.page-id-20 .g22-study-hero__figure {
		aspect-ratio: var(--g22-hero-media-ratio-narrow, 16 / 10);
	}
}

/* -------------------------------------------------- */
/* H2 — уніфіковано з новою головною (clamp 1.75–2.75rem, */
/* Manrope 700, letter-spacing -0.03em)                  */
/* -------------------------------------------------- */

body.page-id-20 .g22-page-content h2,
body.page-id-20 .g22-cards h2 {
	max-width: 20ch;
	margin: 0 0 14px;
	font-family: var(--np-font);
	font-weight: 700;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--np-ink);
}

body.page-id-20 .g22-page-content > .g22-page-section:first-child h2 {
	margin-top: 0;
}

body.page-id-20 .g22-page-content p {
	color: var(--np-ink-70);
	font-size: 1.05rem;
	line-height: 1.65;
}

/* Readability: cap measure on section body copy (surface panels + the
   enrolment-form intro) so lines don't run 120–137 chars on wide desktop
   (target 65–75). Scoped to direct section children so the hero summary,
   timeline intro and cards intro keep their own narrower widths. */
body.page-id-20 .g22-page-content .g22-page-section > .wp-block-group__inner-container > p:not(.g22-page-summary):not(.g22-page-kicker) {
	max-width: 68ch;
}

/* -------------------------------------------------- */
/* Surface panels — «Навчальний день працює…» і         */
/* «П'ятниця — день практик» (світло-сірі картки #f4f4f2, */
/* r 28px, як картки на головній)                        */
/* -------------------------------------------------- */

body.page-id-20 .g22-page-content > .g22-page-section.g22-surface-panel {
	border: 0;
	background: var(--np-card);
	background-image: none;
	box-shadow: none;
	border-radius: var(--np-radius-lg);
	padding: clamp(28px, 4.5vw, 48px);
	margin-block: clamp(20px, 3vw, 32px);
}

body.page-id-20 .g22-page-content > .g22-page-section.g22-surface-panel p:last-child {
	margin-bottom: 0;
}

/* Приклади занять п'ятниці — останній абзац другого surface-панелі
   («П'ятниця…»). Маркап цієї сторінки не містить окремих елементів на
   кожен приклад заняття (просто текст, розділений комами, в одному <p> —
   Gutenberg-контент клієнта, який ми не переписуємо), тому справжні
   картки-чипси по одному прикладу на елемент CSS-шаром зробити неможливо
   без зміни розмітки/контенту — це поза межами задачі (див. звіт).
   Замість цього — єдина виділена «панель прикладів» з жовтим акцентом
   зліва і моно-акцентом на числі стилю, що читається як самостійний блок,
   а не хвіст абзацу. */
body.page-id-20 .g22-page-content > .g22-page-section.g22-surface-panel:nth-of-type(3) p:last-of-type {
	position: relative;
	margin-top: 20px;
	padding: 18px 20px 18px 24px;
	background: #fff;
	border-radius: 14px;
	border-left: 3px solid var(--np-yellow);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--np-ink-70);
}

/* -------------------------------------------------- */
/* Cards — «Як це працює» (.g22-cards / .g22-card)      */
/* -------------------------------------------------- */

body.page-id-20 .g22-cards {
	padding-block: clamp(32px, 5vw, 56px);
}

body.page-id-20 .g22-cards__head {
	max-width: 640px;
	margin: 0 0 32px;
}

body.page-id-20 .g22-cards__intro {
	max-width: 52ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--np-ink-70);
}

body.page-id-20 .g22-cards__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

body.page-id-20 .g22-card {
	border: 0;
	border-radius: var(--np-radius);
	background: var(--np-card);
	box-shadow: none;
	padding: 28px;
	transition:
		transform var(--g22-t-med) var(--g22-ease-out),
		box-shadow var(--g22-t-med) var(--g22-ease-out),
		background-color var(--g22-t-fast) var(--g22-ease-out);
}

body.page-id-20 .g22-card h3 {
	font-family: var(--np-font);
	font-weight: 700;
	font-size: clamp(1.125rem, 1.8vw, 1.35rem);
	letter-spacing: -0.02em;
	color: var(--np-ink);
}

body.page-id-20 .g22-card p {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--np-ink-70);
}

body.page-id-20 .g22-card:hover {
	transform: translateY(-4px);
	background: #fff;
	box-shadow: 0 18px 36px -20px rgba(63, 39, 128, 0.32);
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-20 .g22-card {
		transition: none;
	}
	body.page-id-20 .g22-card:hover {
		transform: none;
	}
}

@media (max-width: 640px) {
	body.page-id-20 .g22-cards__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------- */
/* Розклад дня — таймлайн (головний візуальний елемент   */
/* сторінки, ТЗ п.1). Вертикальна лінія з 5 вузлами на    */
/* всіх ширинах — фактична розмітка блоку (generation22/  */
/* timeline + timeline-item) лінійна (flex-колонка з 5    */
/* .g22-timeline-item), без окремих «доріжок» під          */
/* горизонтальний layout ≥1024px; переписувати розмітку    */
/* заборонено, тож горизонтальний варіант довелося б         */
/* емулювати виключно flex-wrap-хаками — обрано чесну         */
/* вертикальну лінію, яка добре читається на будь-якій         */
/* ширині і не ламає порядок подій зліва-направо/згори-вниз.   */
/* -------------------------------------------------- */

body.page-id-20 .g22-timeline {
	background: transparent;
	color: var(--np-ink);
	max-width: none;
	padding: 0;
}

body.page-id-20 .g22-timeline__head {
	position: relative;
	display: block;
	background: none;
	min-height: 0;
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(48px, 7vw, 88px) 24px clamp(16px, 3vw, 28px);
	text-align: center;
}

body.page-id-20 .g22-timeline__eyebrow {
	justify-content: center;
	margin-inline: auto;
}

body.page-id-20 .g22-timeline__heading {
	max-width: 18ch;
	margin: 0 auto;
	font-family: var(--np-font);
	font-weight: 700;
	font-size: clamp(2.25rem, 4.4vw, 3.5rem);
	letter-spacing: -0.035em;
	line-height: 1.08;
	color: var(--np-ink);
	text-wrap: balance;
}

body.page-id-20 .g22-timeline__intro {
	max-width: 46ch;
	margin: 16px auto 0;
	font-size: clamp(1rem, 1.15vw, 1.1rem);
	line-height: 1.6;
	color: var(--np-ink-70);
}

/* Прибираємо декоративну «синю кулю» + підпис оригінального скіну блоку —
   бренд-правило «без атомів-декорацій». */
body.page-id-20 .g22-timeline__track::before,
body.page-id-20 .g22-timeline__track::after {
	content: none !important;
	display: none !important;
}

body.page-id-20 .g22-timeline__track {
	position: relative;
	margin: 0 auto;
	max-width: 720px;
	padding: clamp(24px, 4vw, 40px) 24px clamp(48px, 6vw, 80px);
}

/* Вертикальна лінія-хребет таймлайна. left вирахувано під сітку елемента
   нижче: 4.5rem (час) + 1.25rem (gap) + половина 2.5rem (колонка вузла) =
   7rem від лівого краю треку. */
body.page-id-20 .g22-timeline__track::before {
	content: "" !important;
	display: block !important;
	position: absolute;
	left: 7rem;
	top: 8px;
	bottom: 56px;
	width: 2px;
	background: var(--np-ink-12);
}

body.page-id-20 .g22-timeline-item {
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem 2.5rem minmax(0, 1fr);
	column-gap: 1.25rem;
	align-items: start;
	padding: 1.6rem 0 1.85rem;
	border-top: 1px solid var(--np-card-line);
}

body.page-id-20 .g22-timeline-item:first-child {
	border-top: 0;
}

/* Лічильник-номер оригінального скіну (::before, «01», «02»…) вимикаємо —
   роль порядкового маркера тепер виконує вузол-крапка. */
body.page-id-20 .g22-timeline-item::before {
	content: none;
}

body.page-id-20 .g22-timeline-item__time {
	grid-column: 1;
	padding-top: 0.3rem;
	font-family: var(--np-font-mono);
	font-size: clamp(0.95rem, 1.2vw, 1.1rem);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	color: var(--np-purple);
	line-height: 1.3;
}

body.page-id-20 .g22-timeline-item__dot {
	display: flex !important;
	grid-column: 2;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	padding-top: 0.35rem;
	z-index: 1;
}

body.page-id-20 .g22-timeline-item__dot::before {
	content: "";
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--np-purple);
	box-shadow: 0 0 0 6px #e5e5e5;
	transition: transform var(--g22-t-med) var(--g22-spring), background-color var(--g22-t-fast) var(--g22-ease-out);
}

/* Останній вузол (16:30 — завершення дня) — жовтий акцент, як «активна»
   фінальна точка ритму дня. */
body.page-id-20 .g22-timeline-item:last-child .g22-timeline-item__dot::before {
	background: var(--np-yellow);
	box-shadow: 0 0 0 6px #e5e5e5, 0 0 0 9px rgba(255, 209, 65, 0.35);
}

body.page-id-20 .g22-timeline-item:hover .g22-timeline-item__dot::before {
	transform: scale(1.15);
}

body.page-id-20 .g22-timeline-item__content {
	display: block;
	grid-column: 3;
}

body.page-id-20 .g22-timeline-item__title {
	margin: 0 0 6px;
	font-family: var(--np-font);
	font-weight: 700;
	font-size: clamp(1.1rem, 1.7vw, 1.4rem);
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--np-ink);
	max-width: none;
}

body.page-id-20 .g22-timeline-item__text {
	margin: 0;
	max-width: 46ch;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--np-ink-70);
}

@media (max-width: 900px) {
	body.page-id-20 .g22-timeline-item {
		grid-template-columns: 3.75rem 2.25rem minmax(0, 1fr);
	}
	body.page-id-20 .g22-timeline__track::before {
		left: 6.125rem;
	}
}

/* The Friday panel is the fourth section element; the final form follows it. */
body.page-navchalnyi-protses .g22-page-content > .g22-page-section.g22-surface-panel:nth-of-type(4) {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
	gap: clamp(30px, 5vw, 70px);
	align-items: stretch;
}

body.page-navchalnyi-protses .g22-page-content > .g22-page-section.g22-surface-panel:nth-of-type(4)::after {
	content: "";
	min-height: 330px;
	border-radius: 20px;
	/* Portrait classroom plate — keep girl + neon-green classmate in frame. */
	background: url("../../images/photos/g22-friday-panel.webp?v1") 42% 28% / cover no-repeat;
}

body.page-navchalnyi-protses .g22-page-content > .g22-page-section.g22-surface-panel:nth-of-type(4) h2.wp-block-heading {
	position: relative;
	display: inline-block;
	transform: rotate(-2deg);
	transform-origin: 30% 50%;
	background-image: linear-gradient(180deg, transparent 62%, rgba(255, 209, 65, .45) 62%);
	padding-inline: .1em;
}

@media (max-width: 900px) {
	body.page-navchalnyi-protses .g22-page-content > .g22-page-section.g22-surface-panel:nth-of-type(4) {
		grid-template-columns: 1fr;
	}

	body.page-navchalnyi-protses .g22-page-content > .g22-page-section.g22-surface-panel:nth-of-type(4)::after {
		min-height: 260px;
	}
}

@media (max-width: 560px) {
	body.page-id-20 .g22-timeline__track {
		padding-inline: 20px;
	}
	body.page-id-20 .g22-timeline-item {
		grid-template-columns: 2.25rem minmax(0, 1fr);
		column-gap: 0.85rem;
		row-gap: 0.3rem;
		padding: 1.35rem 0 1.6rem;
	}
	body.page-id-20 .g22-timeline-item__dot {
		grid-column: 1;
		grid-row: 1 / 3;
		width: 2.25rem;
		padding-top: 0.2rem;
	}
	body.page-id-20 .g22-timeline-item__time {
		grid-column: 2;
		grid-row: 1;
		padding-top: 0;
		font-size: 0.85rem;
	}
	body.page-id-20 .g22-timeline-item__content {
		grid-column: 2;
		grid-row: 2;
	}
	body.page-id-20 .g22-timeline__track::before {
		left: 1.125rem;
	}
}

/* Stagger узлів через animation-delay поверх view()-таймлайну недоступний
   (animation-timeline та animation-delay в одному скороченні конфліктують
   по специфікації по-різному в різних рушіях), тож stagger «по черзі»
   виникає природно: кожен .g22-timeline-item анімується власним
   animation-range у момент, коли САМЕ ВІН перетинає в'юпорт при скролі —
   для лінійної колонки з 5 вузлів це і є послідовний stagger без жодного
   JS. */

@media (prefers-reduced-motion: reduce) {
	body.page-id-20 .g22-timeline-item__dot::before {
		transition: none;
	}
	body.page-id-20 .g22-timeline-item:hover .g22-timeline-item__dot::before {
		transform: none;
	}
}

/* -------------------------------------------------- */
/* CTA-блок — форма «Записатися на знайомство»          */
/* (ТЗ п.4: єдиний CTA-елемент, наявний у розмітці —      */
/* без окремої CTA-панелі з заголовком/лідом, бо такого    */
/* блока в поточному контенті сторінки немає — форма йде   */
/* одразу після «П'ятниці», див. звіт)                    */
/* -------------------------------------------------- */

body.page-id-20 .g22-form {
	max-width: 560px;
	margin: clamp(40px, 6vw, 72px) auto 0;
	padding: clamp(24px, 3.5vw, 40px);
	background: var(--np-card);
	border-radius: var(--np-radius-lg);
	border: 0;
}

body.page-id-20 .g22-form input,
body.page-id-20 .g22-form textarea {
	background: #fff;
	border-color: var(--np-card-line);
	border-radius: 12px;
	transition: border-color var(--g22-t-fast) var(--g22-ease-out), box-shadow var(--g22-t-fast) var(--g22-ease-out);
}

body.page-id-20 .g22-form input:focus-visible,
body.page-id-20 .g22-form textarea:focus-visible {
	outline: 2px solid var(--np-purple);
	outline-offset: 2px;
	border-color: var(--np-purple);
}

body.page-id-20 .g22-form button {
	justify-self: start;
	border-radius: 999px;
	background: var(--np-purple);
	color: #fff;
	font-family: var(--np-font);
	font-weight: 700;
	/* Sitewide pill-button normalization (2026-07-22): canonical +0.02em
	   tracking (was a local -0.01em override, out of step with the
	   inner-henna.css base and every other page's primary CTA). */
	letter-spacing: 0.02em;
	box-shadow: 0 10px 24px rgba(63, 39, 128, 0.22);
	transition:
		background-color var(--g22-t-fast) var(--g22-ease-out),
		box-shadow var(--g22-t-fast) var(--g22-ease-out),
		transform var(--g22-t-fast) var(--g22-ease-out);
}

body.page-id-20 .g22-form button:hover,
body.page-id-20 .g22-form button:focus-visible {
	background: var(--np-purple-hover);
	box-shadow: 0 14px 30px rgba(63, 39, 128, 0.3);
	transform: translateY(-1px);
}

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

body.page-id-20 .g22-form button:focus-visible {
	outline: 2px solid var(--np-purple);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-20 .g22-form button,
	body.page-id-20 .g22-form input,
	body.page-id-20 .g22-form textarea {
		transition: none;
	}
	body.page-id-20 .g22-form button:hover,
	body.page-id-20 .g22-form button:active {
		transform: none;
	}
}

/* -------------------------------------------------- */
/* Фокус-кільця — доступність                            */
/* -------------------------------------------------- */

body.page-id-20 .g22-page-content a:focus-visible {
	outline: 2px solid var(--np-purple);
	outline-offset: 2px;
	border-radius: 4px;
}

/* -------------------------------------------------- */
/* Мобайл 390px — базові відступи блоків                 */
/* -------------------------------------------------- */

@media (max-width: 480px) {
	body.page-id-20 .g22-page-content {
		padding-inline: 20px;
	}
	body.page-id-20 .g22-page-content > .g22-page-section.g22-surface-panel {
		padding: clamp(22px, 6vw, 32px) 20px;
	}
	body.page-id-20 .g22-form {
		padding: 24px 20px;
	}
}

/* ====================================================
 * Art-direction pass — "Ритм дня" (Henna, повзрослішала)
 * ====================================================
 * Додатковий шар поверх усього вище, навмисно на префіксі
 * body.page-navchalnyi-protses (той самий елемент, що й
 * body.page-id-20 — обидва класи є на цій сторінці).
 * Правила нижче йдуть останніми у файлі, тож при однаковій
 * специфічності (body + 1 клас + нащадки) вони коректно
 * перекривають відповідні місця вище — точкові апгрейди без
 * переписування вже робочих блоків.
 *
 * Один жест на секцію, як і в pilot-сторінці (vartist.css):
 *   — Інтро/H1:            без нового дудла (маркер під
 *                            "розвитку" вже малює henna-gestures.js,
 *                            дублювати заборонено ТЗ) — лише
 *                            підсилення масштабу/ваги гарнітури.
 *   — «Навчальний ритм дня»: типографічний жест — три «моментні»
 *                            позначки часу (08:30 / 09:30 / 16:30)
 *                            стають bignum-героєм рядка; два
 *                            «діапазони» (10:00–15:10, 15:10–16:30)
 *                            навмисно лишаються тихим mono-лейблом
 *                            — інакше довгий рядок з тире не
 *                            влізає у колонку без переносу/оверфлоу.
 *   — «П'ятниця»:           один виняток-нахил (мірить .g22-tilt
 *                            з henna-gestures.css) на заголовку +
 *                            жовтий маркер-хайлайт.
 */

body.page-navchalnyi-protses .g22-page-shell {
	overflow: clip;
}

/* ---- Інтро — marker padding only; type from shared --g22-hero-* ---- */

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

/* ---- «Навчальний ритм дня» — bignum-час ---- */

body.page-navchalnyi-protses {
	--np-time-col: clamp(6.5rem, 10vw, 10.5rem);
	--np-dot-col: 2.5rem;
}

@media (max-width: 900px) {
	body.page-navchalnyi-protses {
		--np-time-col: clamp(5.25rem, 9vw, 7.5rem);
		--np-dot-col: 2.25rem;
	}
}

body.page-navchalnyi-protses .g22-timeline-item {
	grid-template-columns: var(--np-time-col) var(--np-dot-col) minmax(0, 1fr);
}

@media (min-width: 561px) {
	body.page-navchalnyi-protses .g22-timeline__track::before {
		left: calc(var(--np-time-col) + 1.25rem + (var(--np-dot-col) / 2));
	}
}

@media (max-width: 560px) {
	/* Мобільний стек (час + крапка в одній колонці над контентом) —
	   3-колонковий шаблон вище тут не діє, повертаємо оригінальні
	   2 колонки мобільної версії з блоку "Розклад дня" вище у файлі. */
	body.page-navchalnyi-protses .g22-timeline-item {
		grid-template-columns: 2.25rem minmax(0, 1fr);
	}
}

/* Три «моментні» позначки (відкриття школи / початок ранкового блоку /
   завершення дня) — типографічний герой рядка, зменшена копія .g22-bignum. */
body.page-navchalnyi-protses .g22-timeline-item:nth-child(1) .g22-timeline-item__time,
body.page-navchalnyi-protses .g22-timeline-item:nth-child(2) .g22-timeline-item__time,
body.page-navchalnyi-protses .g22-timeline-item:nth-child(5) .g22-timeline-item__time {
	font-family: var(--np-font);
	font-weight: 800;
	font-size: clamp(1.85rem, 4vw, 3rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--np-ink);
}

body.page-navchalnyi-protses .g22-timeline-item:nth-child(1) .g22-timeline-item__dot,
body.page-navchalnyi-protses .g22-timeline-item:nth-child(2) .g22-timeline-item__dot,
body.page-navchalnyi-protses .g22-timeline-item:nth-child(5) .g22-timeline-item__dot {
	padding-top: clamp(0.5rem, 1vw, 0.9rem);
}

@media (max-width: 560px) {
	body.page-navchalnyi-protses .g22-timeline-item:nth-child(1) .g22-timeline-item__time,
	body.page-navchalnyi-protses .g22-timeline-item:nth-child(2) .g22-timeline-item__time,
	body.page-navchalnyi-protses .g22-timeline-item:nth-child(5) .g22-timeline-item__time {
		font-size: clamp(1.5rem, 8vw, 2.1rem);
	}
}

/* Два діапазони (навчальні блоки / самопідготовка) — тиха mono-мітка,
   щоб довгий рядок із тире не ламав колонку. */
body.page-navchalnyi-protses .g22-timeline-item:nth-child(3) .g22-timeline-item__time,
body.page-navchalnyi-protses .g22-timeline-item:nth-child(4) .g22-timeline-item__time {
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--np-ink);
}

/* ---- «П'ятниця — день практик» — виняток-нахил + жовтий маркер ---- */

body.page-navchalnyi-protses .g22-page-content > .g22-page-section.g22-surface-panel:last-of-type h2.wp-block-heading {
	position: relative;
	display: inline-block;
	transform: rotate(-2deg);
	transform-origin: 30% 50%;
	background-image: linear-gradient(180deg, transparent 62%, rgba(255, 209, 65, 0.45) 62%);
	background-repeat: no-repeat;
	padding-inline: 0.1em;
	transition: transform var(--g22-t-med) var(--g22-spring);
}

body.page-navchalnyi-protses .g22-page-content > .g22-page-section.g22-surface-panel:last-of-type h2.wp-block-heading:hover {
	transform: rotate(-0.5deg) translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	body.page-navchalnyi-protses .g22-page-content > .g22-page-section.g22-surface-panel:last-of-type h2.wp-block-heading {
		transform: none;
		transition: none;
	}
}

/* Client deck: media rhythm, equal cards and a stronger final form. */
body.page-navchalnyi-protses .g22-timeline {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	background: #f4f4f5;
}

@media (min-width: 901px) {
	body.page-navchalnyi-protses .g22-timeline::after {
		content: "";
		position: absolute;
		top: clamp(34px, 5vw, 64px);
		right: clamp(34px, 5vw, 64px);
		width: min(38%, 430px);
		height: 270px;
		border-radius: 22px;
		background: url("../../images/photos/g22-shoot-community.webp?v3") center / cover no-repeat;
		box-shadow: 0 22px 48px rgba(26, 26, 26, .12);
		pointer-events: none;
	}

	body.page-navchalnyi-protses .g22-timeline__head {
		max-width: 52%;
		min-height: 270px;
	}
}

body.page-navchalnyi-protses .g22-cards__grid {
	grid-auto-rows: 1fr;
	align-items: stretch;
}

body.page-navchalnyi-protses .g22-card {
	height: 100%;
	box-sizing: border-box;
}

body.page-navchalnyi-protses .g22-page-content > .g22-page-section.g22-surface-panel:last-of-type {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
	gap: clamp(30px, 5vw, 70px);
	align-items: stretch;
}

body.page-navchalnyi-protses .g22-page-content > .g22-page-section.g22-surface-panel:last-of-type::after {
	content: "";
	min-height: 330px;
	border-radius: 20px;
	background: url("../../images/photos/g22-friday-panel.webp?v1") 42% 28% / cover no-repeat;
}

body.page-navchalnyi-protses .g22-page-content > .g22-page-section:last-child .g22-form::before {
	content: "Обирайте освіту майбутнього";
	display: block;
	grid-column: 1 / -1;
	margin-bottom: 6px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--np-purple);
}

body.page-navchalnyi-protses .g22-page-content > .g22-page-section:last-child .g22-form button {
	justify-self: center;
	width: min(100%, 340px);
	min-height: 56px;
	padding-inline: 34px;
	font-size: 1.05rem;
}

@media (max-width: 900px) {
	body.page-navchalnyi-protses .g22-page-content > .g22-page-section.g22-surface-panel:last-of-type {
		grid-template-columns: 1fr;
	}

	body.page-navchalnyi-protses .g22-page-content > .g22-page-section.g22-surface-panel:last-of-type::after {
		min-height: 260px;
	}
}

/* Keep the timeline story and the documentary frame in separate columns. */
@media (min-width: 901px) {
	body.page-navchalnyi-protses .g22-timeline__head {
		box-sizing: border-box;
		width: 52%;
		max-width: none;
		min-height: 320px;
		margin: 0;
		padding-right: 24px;
		padding-left: clamp(34px, 5vw, 64px);
		text-align: left;
	}

	body.page-navchalnyi-protses .g22-timeline__eyebrow {
		justify-content: flex-start;
		margin-inline: 0;
	}

	body.page-navchalnyi-protses .g22-timeline__heading {
		max-width: 10ch;
		margin-inline: 0;
	}

	body.page-navchalnyi-protses .g22-timeline__intro {
		max-width: 34ch;
		margin-right: 0;
		margin-left: 0;
	}
}