/*
 * Головна сторінка.
 *
 * Банер — блок «Слайдер головної» (blocks/hero-slider) зі своїми стилями. Тут лише
 * його місце в шаблоні: на всю ширину вікна й під шапкою-капсулою, щоб колір слайда
 * заходив під неї, як у затвердженому макеті (варіант A, 26.09.2026).
 */

/*
 * Структура головної — main > section.kit-block > .kit-container (28.09.2026):
 * секції на всю ширину, колонку тримає контейнер усередині кожної.
 * Усе, що не є секцією-блоком (абзац, заголовок, старі блоки й шорткоди), стає
 * в колонку тут — так само, як у .kit-container.
 */
.kit-main--home { padding-bottom: 0; }

.kit-main--home > :not(.kit-block) {
	box-sizing: border-box;
	max-width: calc(var(--wp--custom--container--max) + 2 * var(--wp--custom--container--gutter));
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--gutter);
}

.kit-main--home > p { max-width: calc(var(--kit-measure) + 2 * var(--wp--custom--container--gutter)); }

/* Остання секція — впритул до футера: відступ до нього дає сам футер. */
.kit-main--home > :last-child { margin-bottom: 0; }

/* Слайдер першим — під шапкою-капсулою, колір слайда заходить під неї (варіант A, 26.09.2026). */
.kit-main--home:has(> .hero-slider:first-child) { padding-top: 0; }
.kit-main--home > .hero-slider:first-child { margin-top: calc(-1 * var(--wp--custom--header--height)); }

/* ---------- Секції ---------- */

.kit-section__more {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

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

/* ---------- Форма підписки ---------- */

/*
 * На чинному сайті форми підписки немає ніде, хоча ТЗ вимагає і форму, і збереження
 * статусу згоди. Робимо її помітною секцією, а не рядком у підвалі.
 *
 * Варіант P2 (27.09.2026): м'яка бежева плашка, текст і форма по центру,
 * над краєм плашки визирає кіт із логотипа.
 */
.kit-subscribe {
	position: relative;
	isolation: isolate;
	margin-top: var(--wp--preset--spacing--60);
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem) clamp(2rem, 5vw, 3.5rem);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--kit-brand-soft);
	color: var(--kit-ink);
	text-align: center;
}

/* Місце над плашкою для кота: інакше він налазить на попередній блок. */
.kit-subscribe--cat { margin-top: calc(var(--wp--preset--spacing--60) + 4.5rem); }

/*
 * Кіт — логотип як маска: колір задає CSS. Він лежить під «кришкою» плашки (::before),
 * тож видно лише те, що над її краєм, — книжка з логотипа ховається.
 * Темно-коричневий, а не чорний: чорних ліній на сайті не робимо.
 */
.kit-subscribe__cat {
	position: absolute;
	z-index: -2;
	top: 0;
	left: 50%;
	width: clamp(140px, 16vw, 190px);
	aspect-ratio: var(--kit-subscribe-cat-ratio, 3 / 1);
	transform: translate(-50%, -66%);
	background: var(--kit-brand-active);
	-webkit-mask: var(--kit-subscribe-cat) center / contain no-repeat;
	mask: var(--kit-subscribe-cat) center / contain no-repeat;
}

.kit-subscribe::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: inherit;
}

.kit-subscribe__inner {
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--30);
	max-width: 36rem;
	margin-inline: auto;
}

.kit-subscribe__title {
	margin: 0 0 0.3em;
	font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.7rem);
	font-weight: 400;
	line-height: 1.1;
	text-wrap: balance;
}

.kit-subscribe__text { margin: 0 auto; color: var(--kit-text-muted); max-width: 44ch; line-height: 1.6; }

.kit-subscribe__form { width: 100%; max-width: 32rem; text-align: left; }


/* ---------- Блок купівлі на лендингу книжки ---------- */

.kit-buy {
	margin: var(--wp--preset--spacing--60) 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--cream);
	scroll-margin-top: calc(var(--wp--custom--header--height) + 1rem);
}

.kit-buy__inner {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	max-width: 56rem;
	margin-inline: auto;
}

@media (min-width: 700px) {
	.kit-buy__inner { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--wp--preset--spacing--40); }
}

.kit-buy__cover img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

.kit-buy__title { margin: 0 0 0.2em; font-size: var(--wp--preset--font-size--xxl); }
.kit-buy__name { margin: 0 0 0.5em; color: var(--wp--preset--color--muted); }

.kit-buy__price {
	display: flex; align-items: baseline; gap: 0.6em;
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 600;
}

.kit-buy__price del { font-size: var(--wp--preset--font-size--lg); font-weight: 400; color: var(--wp--preset--color--subtle); }
.kit-buy__price ins { text-decoration: none; }

.kit-buy__note { max-width: 44ch; margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); }

.kit-buy__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }

/* ---------- Лендинг книжки ---------- */

/*
 * Спільна «кістка» всіх лендингів чинного сайту: Hero → Анотація → Теми → Блок замовлення.
 * Дублювання секцій під mobile, як на Wix, не робимо — секції адаптивні.
 */
.kit-landing-hero {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	margin-bottom: var(--wp--preset--spacing--50);
}

@media (min-width: 900px) {
	.kit-landing-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 var(--wp--preset--spacing--50);
		align-content: center;   /* текстова колонка центрується відносно обкладинки */
	}

	.kit-landing-hero > figure { grid-row: 1 / -1; grid-column: 1; margin: 0; align-self: stretch; }
	.kit-landing-hero > :not(figure) { grid-column: 2; }
	.kit-landing-hero > h1 { margin-bottom: 0.4em; }
	.kit-landing-hero > .kit-landing-lead { margin-bottom: var(--wp--preset--spacing--30); }
}

/* Вміст лендингу тримає ширину рядка, як і решта текстових сторінок. */
.kit-landing-hero > figure img { align-self: stretch; height: 100%; }

.kit-landing-hero > figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kit-landing-hero h1 { margin: 0; font-size: var(--wp--preset--font-size--xxxl); }
.kit-landing-lead { max-width: 42ch; font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--muted); }