/* ==========================================================================
   wp.css — связка дизайн-системы с Blocksy.

   Подключается ПОСЛЕ kit.css. Здесь только WordPress-специфика: маппинг
   палитры и шрифтов темы на токены кита, ширина контейнера, нейтрализация
   правил Blocksy, которые мешают компонентам. Сами компоненты не трогаем.

   Правило: если что-то можно решить в ките — решаем в ките и пересобираем
   kit.css (tools/build-wp-css.mjs). Этот файл — только про интеграцию.
   ========================================================================== */

/* 1. Палитра Blocksy → токены кита ----------------------------------------
   Так все встроенные элементы темы (кнопки, формы, пагинация, мобильное
   меню, поиск) автоматически получают цвета кита. */
:root {
	--theme-palette-color-1: var(--ck-blue);
	--theme-palette-color-2: var(--ck-ink);
	--theme-palette-color-3: var(--ck-muted);
	--theme-palette-color-4: var(--ck-ink);
	--theme-palette-color-5: var(--ck-line);
	--theme-palette-color-6: var(--ck-surface);
	--theme-palette-color-7: var(--ck-surface);
	--theme-palette-color-8: var(--ck-white);

	--theme-text-color: var(--ck-color-text);
	--theme-link-initial-color: var(--ck-color-link);
	--theme-link-hover-color: var(--ck-blue);

	/* Ширина контейнера Blocksy = 1200 из кита */
	--theme-container-edge-spacing: var(--ck-container);
}

/* 2. Типографика ----------------------------------------------------------
   Body — Manrope, заголовки — Unbounded. Кегли и межстрочные живут в ките;
   здесь только семейства, чтобы контент без классов тоже выглядел «нашим». */
body {
	font-family: var(--ck-font-body);
	color: var(--ck-color-text);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--ck-font-display);
	letter-spacing: var(--ck-ls-display);
	text-wrap: balance;
}

/* 3. Полноширинные секции -------------------------------------------------
   Контент страниц живёт в Gutenberg-раскладке `is-layout-constrained`:
   она ограничивает ширину прямых детей. Секции кита должны выходить на всю
   ширину, а `.ck-container` внутри них уже сам держит 1200 px. */
.entry-content.is-layout-constrained > .alignfull,
.entry-content > .alignfull {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

/* `.ck-container` внутри секции работает штатно — ничего не гасим. */

/* 4. Отступы Gutenberg внутри секций --------------------------------------
   Секции кита сами задают вертикальный ритм; «content spacing» ядра
   добавляет лишние 24 px между блоками. */
.entry-content > .ck-section > *,
.entry-content .ck-section > .ck-container > * {
	--theme-content-spacing: 0;
	margin-block-start: 0;
}

/* 5. Ссылки в контенте ----------------------------------------------------
   Blocksy красит `.entry-content a` своими правилами; возвращаем китовый
   цвет. Специфичность держим минимальной (`:where`), иначе это правило
   перебьёт цвета компонентов кита — заголовки карточек, ссылки-кнопки. */
.entry-content :where(a:not(.ck-btn):not(.ck-card):not(.ck-tag)) {
	color: var(--ck-color-link);
	text-decoration: none;
	transition: color var(--ck-dur-fast) var(--ck-ease);
}

.entry-content :where(a:not(.ck-btn):not(.ck-card):not(.ck-tag)):hover {
	color: var(--ck-blue);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* 6. Кнопки Blocksy получают вид китовой --------------------------------- */
.ct-button,
.wp-block-button__link {
	font-family: var(--ck-font-body);
	font-weight: var(--ck-weight-semibold);
	border-radius: var(--ck-radius-pill);
}

/* 7. Фокус: не даём теме рисовать свой outline поверх китового ----------- */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: var(--ck-focus-ring-width) solid var(--ck-color-focus);
	outline-offset: var(--ck-focus-ring-offset);
}

/* 9. Шапка = синяя «плашка» кита -----------------------------------------
   Blocksy рисует шапку своим Header Builder'ом. Перекрашиваем строку,
   приводим высоту к 84 px из макета и возвращаем белые ссылки без капса. */
[data-header*='type-1'] .ct-header [data-row*='middle'] {
	--height: 84px;
	background-color: var(--ck-blue);
	--theme-border-top: none;
	--theme-border-bottom: none;
	--theme-box-shadow: none;
}

[data-header*='type-1'] .ct-header [data-id='menu'] > ul > li > a {
	--theme-link-initial-color: rgba(255, 255, 255, 0.82);
	--theme-link-hover-color: var(--ck-white);
	--theme-font-family: var(--ck-font-body);
	--theme-font-weight: 500;
	--theme-font-size: 15px;
	--theme-text-transform: none;
	letter-spacing: 0;
}

[data-header*='type-1'] .ct-header [data-id='menu'] > ul > li > a:hover,
[data-header*='type-1'] .ct-header [data-id='menu'] > ul > li.current-menu-item > a {
	--theme-link-initial-color: var(--ck-white);
}

/* Логотип: Unbounded, белый; лайм-точка остаётся в favicon */
[data-header*='type-1'] .ct-header .site-title,
[data-header*='type-1'] .ct-header .site-title a {
	--theme-link-initial-color: var(--ck-white);
	font-family: var(--ck-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Иконки поиска/меню в шапке — белые */
[data-header*='type-1'] .ct-header .ct-icon {
	fill: var(--ck-white);
}

/* Липкая шапка: тень как у .ck-header.is-scrolled */
.ct-sticky-container {
	box-shadow: 0 8px 24px rgba(12, 18, 40, 0.18);
}

/* 10. Мелочи Blocksy, которые спорят с китом ------------------------------ */
/* Заголовок страницы (hero) не нужен: у каждой страницы свой h1 в контенте */
.hero-section {
	display: none;
}

/* Отступы контента: секции кита задают ритм сами */
.entry-content > * + * {
	--theme-content-spacing: 0;
	margin-block-start: 0;
}
/* 12. Пустые <p> от wpautop ----------------------------------------------
   Классический контент прогоняется через wpautop: он вставляет пустые
   параграфы между секциями, и они дают лишние вертикальные отступы. */
.entry-content > p:empty,
.entry-content > br {
	display: none;
}

/* 13. Логотип в шапке ----------------------------------------------------
   Blocksy красит название сайта в palette-4 (тёмный). На синей плашке
   нужен белый — задаём цветом, а не переменной. */
.ct-header .site-title,
.ct-header .site-title a,
.ct-header .site-title a:hover {
	color: var(--ck-white);
	text-decoration: none;
}

/* 14. Вертикальные отступы контейнера контента ----------------------------
   Blocksy даёт `.ct-container-full` 60px сверху и снизу. На страницах с
   секциями кита это лишняя белая полоса под шапкой и над подвалом —
   ритм задают сами секции. Архивы (блог) не трогаем: там своя сетка. */
body.page .ct-container-full,
body.page .ct-container {
	padding-block: 0;
}
.ck-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 16. Контейнер Blocksy = контейнер кита ---------------------------------
   Без этого на узких экранах `.ct-container` = 100% и логотип упирается
   в край: боковые отступы у Blocksy задаются через `--theme-container-edge-spacing`,
   а мы его переопределили на фиксированные 1200 px. */
.ct-container {
	width: min(100% - var(--ck-gutter) * 2, var(--ck-container));
	margin-inline: auto;
}

/* 17. Штатный подвал скрыт ------------------------------------------------
   Вместо него выводится подвал кита из functions.php (chus_render_footer):
   у Blocksy в подвале только строка копирайта, виджетов нет. */
.ct-footer {
	display: none;
}


/* ==========================================================================
   18. Блоки ядра в терминах кита.
   Стили из inc/block-styles.php дают только имя класса (.is-style-ck-*),
   внешний вид — здесь. Так пользователь меняет стиль в редакторе, а не CSS.
   ========================================================================== */

/* --- Кнопки ------------------------------------------------------------- */
.wp-block-button.is-style-ck-lime .wp-block-button__link,
.wp-block-button.is-style-ck-lime-lg .wp-block-button__link,
.wp-block-button.is-style-ck-blue .wp-block-button__link,
.wp-block-button.is-style-ck-white .wp-block-button__link,
.wp-block-button.is-style-ck-ghost .wp-block-button__link {
	font-family: var(--ck-font-display);
	font-size: 1.125rem;
	font-weight: var(--ck-weight-semibold);
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--ck-radius-xl);
	padding: 1.15rem 2.5rem;
	transition:
		background-color var(--ck-dur-fast) var(--ck-ease),
		border-color var(--ck-dur-fast) var(--ck-ease),
		color var(--ck-dur-fast) var(--ck-ease);
}

.wp-block-button.is-style-ck-lime .wp-block-button__link {
	background-color: var(--ck-lime);
	color: var(--ck-ink);
}

.wp-block-button.is-style-ck-lime .wp-block-button__link:hover {
	background-color: var(--ck-lime-hover);
	color: var(--ck-ink);
}

.wp-block-button.is-style-ck-lime-lg .wp-block-button__link {
	background-color: var(--ck-lime);
	color: var(--ck-ink);
	font-size: 1.375rem;
	padding: 1.4rem 3rem;
}

.wp-block-button.is-style-ck-lime-lg .wp-block-button__link:hover {
	background-color: var(--ck-lime-hover);
	color: var(--ck-ink);
}

.wp-block-button.is-style-ck-blue .wp-block-button__link {
	background-color: var(--ck-blue);
	color: var(--ck-white);
}

.wp-block-button.is-style-ck-blue .wp-block-button__link:hover {
	background-color: var(--ck-blue-hover);
	color: var(--ck-white);
}

.wp-block-button.is-style-ck-white .wp-block-button__link {
	background-color: var(--ck-white);
	color: var(--ck-ink);
}

.wp-block-button.is-style-ck-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--ck-white);
	border: 1px solid currentColor;
}

.wp-block-button.is-style-ck-ghost .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--ck-white);
}

/* На белом фоне контурная кнопка должна быть тёмной */
.ck-on-blue .wp-block-button.is-style-ck-ghost .wp-block-button__link,
.ck-section:not(.ck-on-blue) .wp-block-button.is-style-ck-ghost .wp-block-button__link {
	color: var(--ck-ink);
}
.ck-on-blue .wp-block-button.is-style-ck-ghost .wp-block-button__link {
	color: var(--ck-white);
}

/* Ряд кнопок: как .ck-hero__actions / .ck-cta__actions */
.wp-block-buttons.ck-hero__actions,
.wp-block-buttons.ck-cta__actions {
	gap: var(--ck-space-3);
	flex-wrap: wrap;
}

/* --- Аккордеон из нативного «Детали» ------------------------------------ */
.wp-block-details.is-style-ck-accordion {
	border: var(--ck-border-width) solid var(--ck-line);
	border-radius: var(--ck-radius-md);
	background-color: var(--ck-surface);
	overflow: hidden;
}

.wp-block-details.is-style-ck-accordion + .wp-block-details.is-style-ck-accordion {
	margin-block-start: var(--ck-space-3);
}

.wp-block-details.is-style-ck-accordion > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ck-space-4);
	padding: var(--ck-space-5) var(--ck-space-6);
	font-weight: var(--ck-weight-semibold);
	font-size: 1.0625rem;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

.wp-block-details.is-style-ck-accordion > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-ck-accordion > summary::after {
	content: '+';
	flex: none;
	font-family: var(--ck-font-display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ck-blue);
}

.wp-block-details.is-style-ck-accordion[open] > summary::after {
	content: '−';
}

.wp-block-details.is-style-ck-accordion > *:not(summary) {
	padding-inline: var(--ck-space-6);
}

.wp-block-details.is-style-ck-accordion > *:last-child {
	padding-bottom: var(--ck-space-5);
}

.wp-block-details.is-style-ck-accordion > p {
	margin-block: 0 var(--ck-space-3);
}

/* --- Шаги на группах (.ck-steps--static) -------------------------------- */
.ck-steps--static {
	display: grid;
	gap: var(--ck-space-5);
	margin: 0;
	padding: 0;
}

.ck-steps--static > .ck-step {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: var(--ck-space-4);
	align-items: start;
}

.ck-steps--static p {
	margin: 0;
}

.ck-steps--static .ck-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--ck-lime);
	color: var(--ck-ink);
	font-weight: var(--ck-weight-bold);
	font-size: 1rem;
	line-height: 1;
}

/* Плоскости-обёртки: марджины задаёт ритм кита, а не ядро.
   Одинаково работает в редакторе и на сайте. */
.ck-hero__lead,
.ck-cta__lead,
.ck-cta__title,
.ck-section__head > h2,
.ck-section__head > p,
.ck-card > h3,
.ck-product-card__body > p {
	margin-block: 0;
}

/* --- Мелкие классы, которые встречаются в паттернах --------------------- */
/* Плитки карточек: пастельные модификаторы вместо инлайнового style,
   иначе редактор считает блок повреждённым. */
.ck-product-card__media--mint {
	background-color: var(--ck-pastel-mint);
}

.ck-product-card__media--peach {
	background-color: var(--ck-pastel-peach);
}

.ck-product-card__media--leaf {
	background-color: var(--ck-pastel-leaf);
}

.ck-product-card__media--lavender {
	background-color: var(--ck-pastel-lavender);
}

.wp-block-group.ck-card {
	display: grid;
	gap: var(--ck-space-4);
	align-content: start;
	padding: var(--ck-space-8);
}

.wp-block-group.ck-card > .ck-prose {
	margin-block-start: 0;
}

/* CTA: обёртка кита задаёт сетку и отступы внутри плашки */
.wp-block-group.ck-cta {
	display: grid;
	gap: var(--ck-space-4);
	justify-items: start;
	text-align: left;
}

.wp-block-group.ck-cta > .ck-cta__title,
.wp-block-group.ck-cta > .ck-cta__lead {
	margin: 0;
	text-align: left;
}

.wp-block-group .ck-price {
	margin: 0;
	font-family: var(--ck-font-display);
	font-weight: var(--ck-weight-bold);
	font-size: 1.25rem;
	color: var(--ck-blue);
}

.wp-block-group .ck-link-more {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: var(--ck-weight-semibold);
	color: var(--ck-blue);
}

.wp-block-group.ck-product-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ck-space-4);
	margin-block-start: auto;
	padding-block-start: var(--ck-space-4);
}


/* ==========================================================================
   19. Секции внутренних страниц (набраны блоками).
   Каждая — группа кита с CSS ниже. Работает одинаково в редакторе и на сайте,
   потому что wp.css подключён в оба контекста.
   ========================================================================== */

/* --- Строка цифр -------------------------------------------------------- */
.wp-block-group.ck-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ck-space-8);
	margin-block-start: var(--ck-space-6);
}

.ck-stats .ck-stat__value,
.ck-stats .ck-stat__label {
	margin: 0;
}

.ck-stats .ck-stat__label {
	color: var(--ck-color-muted);
}

@media (max-width: 640px) {
	.wp-block-group.ck-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ck-space-5);
	}
}

/* --- Шаги: ритм и вертикальное выравнивание ----------------------------- */
.ck-steps--static {
	margin: 0 0 var(--ck-space-6);
}

.ck-steps--static > .ck-step {
	align-items: center;
}

.ck-steps--static .ck-step__text {
	margin: 0;
	font-size: var(--ck-fs-body);
	line-height: 1.6;
	color: var(--ck-color-text);
}

/* Лаймовая карточка: заливки достаточно, рамка только пачкает */
.wp-block-group.ck-card.ck-on-lime {
	border-color: transparent;
}

/* --- Карточка кейса ----------------------------------------------------- */
.wp-block-group.ck-case-card {
	display: grid;
	gap: var(--ck-space-4);
	align-content: start;
}

.ck-case-card .ck-case-card__media {
	display: block;
	aspect-ratio: 16 / 11;
	border-radius: var(--ck-radius-lg);
	background-color: var(--ck-surface);
}

.ck-case-card .ck-case-card__body {
	display: grid;
	gap: var(--ck-space-2);
}

.ck-case-card .ck-case-card__title {
	margin: 0;
	font-size: var(--ck-fs-h4);
	line-height: 1.25;
}

.ck-case-card .ck-case-card__meta,
.ck-case-card .ck-case-card__body p {
	margin: 0;
	font-size: var(--ck-fs-sm);
	color: var(--ck-muted);
}

/* --- Таймлайн (путь, хронология) ---------------------------------------- */
.wp-block-group.ck-timeline {
	display: grid;
	gap: var(--ck-space-6);
}

.wp-block-group.ck-timeline__item {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: var(--ck-space-6);
	padding-block-start: var(--ck-space-5);
	border-top: 1px solid var(--ck-line);
}

.ck-timeline__year {
	margin: 0;
	font-family: var(--ck-font-display);
	font-weight: var(--ck-weight-bold);
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--ck-blue);
}

.wp-block-group.ck-timeline__body {
	display: grid;
	gap: var(--ck-space-2);
}

.ck-timeline__body h3,
.ck-timeline__body p {
	margin: 0;
}

@media (max-width: 640px) {
	.wp-block-group.ck-timeline__item {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ck-space-2);
	}
}

/* --- Карточка контакта -------------------------------------------------- */
.wp-block-group.ck-contact-card .ck-contact-card__label,
.wp-block-group.ck-contact-card .ck-contact-card__note {
	margin: 0;
	font-size: var(--ck-fs-sm);
	color: var(--ck-muted);
}

.wp-block-group.ck-contact-card .ck-contact-card__value {
	margin: 0;
	font-size: 1.125rem;
	font-weight: var(--ck-weight-semibold);
}

/* --- Фото в блоке «обо мне» -------------------------------------------- */
.ck-about .ck-about__photo {
	aspect-ratio: 4 / 5;
	border-radius: var(--ck-radius-xl);
	background-color: var(--ck-pastel-peach);
}

/* ==========================================================================
   20. Блог: карточки записей Blocksy в терминах кита.
   Страница записей собирается темой, поэтому оформляем её CSS-ом, а не блоками.
   ========================================================================== */
.blog .ct-container-full,
.archive .ct-container-full {
	padding-block: 0;
}

.entry-card {
	display: grid;
	gap: var(--ck-space-4);
	align-content: start;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.entry-card .ct-media-container {
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var(--ck-radius-lg);
	background-color: var(--ck-surface);
}

.entry-card .entry-meta {
	font-size: var(--ck-fs-sm);
	color: var(--ck-muted);
}

.entry-card .entry-title {
	margin: 0;
	font-family: var(--ck-font-display);
	font-size: var(--ck-fs-h4);
	line-height: 1.25;
	letter-spacing: 0;
}

.entry-card .entry-title a {
	color: var(--ck-ink);
	text-decoration: none;
}

.entry-card .entry-title a:hover {
	color: var(--ck-blue);
}

.entry-card .ct-media-container:empty,
.entry-card .ct-media-container:not(:has(img)) {
	display: none;
}

.entry-card .entry-excerpt {
	margin: 0;
	font-size: var(--ck-fs-body-sm);
	line-height: 1.55;
	color: var(--ck-muted);
}

.entry-card > *:empty {
	display: none;
}

.blog .entries,
.archive .entries {
	gap: var(--ck-space-8);
}

/* ==========================================================================
   21. Статья блога: шапка и проза в терминах кита.
   Разметку даёт Blocksy, оформление повторяет .ck-article-head и .ck-prose.
   ========================================================================== */
.single-post .ct-container-full {
	padding-block: 0;
}

/* Пустой .entry-header Blocksy не нужен — шапку статьи собирает functions.php */
.single-post .entry-header {
	display: none;
}

/* Шапка статьи по китовому образцу */
.single-post .ck-article-head {
	width: min(100% - var(--ck-gutter) * 2, 74ch);
	margin-inline: auto;
	padding-block: var(--ck-space-12) var(--ck-space-6);
}

.single-post .ck-article-head__meta {
	color: var(--ck-muted);
}

.single-post .ck-article-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ck-space-3);
	font-size: var(--ck-fs-sm);
}

.single-post .ck-article-head__meta .ck-badge {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.single-post .ck-article-head__author {
	display: flex;
	align-items: center;
	gap: var(--ck-space-3);
	font-size: var(--ck-fs-sm);
	color: var(--ck-color-text);
}

.single-post .ck-article-head__author img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

/* Похожие статьи: формируются автоматически в functions.php.
   Ширину задаём свою: Blocksy ограничивает .entry-content записи (750px),
   а блок должен выходить на контейнер кита. */
.single-post .ck-related {
	width: min(100% - var(--ck-gutter) * 2, var(--ck-container));
	max-width: none;
	margin-block-start: var(--ck-space-16);
	margin-inline: auto;
	padding-block-start: var(--ck-space-10);
	border-top: var(--ck-border-width) solid var(--ck-line);
}

.single-post .ck-related > h2 {
	margin: 0 0 var(--ck-space-6);
}

/* Если похожих две — карточки заполняют строку, а не оставляют дырку */
.single-post .ck-related .ck-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Заголовок карточки-ссылки наследует цвет текста, а не цвет ссылки */
.ck-post-card .ck-post-card__title {
	color: var(--ck-ink);
	transition: color var(--ck-dur-fast) var(--ck-ease);
}

.ck-post-card:hover .ck-post-card__title {
	color: var(--ck-blue);
}

.ck-post-card .ck-post-card__excerpt,
.ck-post-card .ck-post-card__meta {
	margin: 0;
}

/* --- Карточка «похожей статьи» (своя разметка, без конфликтов) ---------- */
.ck-related__card {
	display: grid;
	gap: var(--ck-space-3);
	align-content: start;
	color: inherit;
	text-decoration: none;
}

.ck-related__media {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--ck-radius-lg);
	background-color: var(--ck-surface);
	transition: transform var(--ck-dur-slow) var(--ck-ease);
}

.ck-related__card:hover .ck-related__media {
	transform: translateY(-2px);
}

.ck-related__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ck-space-3);
	font-size: var(--ck-fs-sm);
	color: var(--ck-muted);
}

.ck-related__title {
	font-family: var(--ck-font-display);
	font-size: var(--ck-fs-h4);
	font-weight: var(--ck-weight-semibold);
	line-height: 1.25;
	color: var(--ck-ink);
	transition: color var(--ck-dur-fast) var(--ck-ease);
}

.ck-related__card:hover .ck-related__title {
	color: var(--ck-blue);
}

.ck-related__excerpt {
	font-size: var(--ck-fs-body-sm);
	line-height: 1.55;
	color: var(--ck-muted);
}

.ck-related__more {
	font-size: var(--ck-fs-sm);
	font-weight: var(--ck-weight-semibold);
	color: var(--ck-blue);
}

/* --- Цитата-выноска и таблица (стили ядра) ------------------------------ */
.wp-block-quote.is-style-ck-quote {
	margin: var(--ck-space-8) 0;
	padding: var(--ck-space-6) 0 var(--ck-space-6) var(--ck-space-6);
	border: 0;
	border-left: 3px solid var(--ck-lime);
	background: transparent;
	font-family: var(--ck-font-display);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	line-height: 1.32;
}

.wp-block-quote.is-style-ck-quote p {
	margin: 0;
}

.wp-block-quote.is-style-ck-quote cite {
	display: block;
	margin-top: var(--ck-space-4);
	font-family: var(--ck-font-body);
	font-size: var(--ck-fs-sm);
	font-style: normal;
	font-weight: 400;
	color: var(--ck-muted);
}

.wp-block-table.is-style-ck-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

.wp-block-table.is-style-ck-table th,
.wp-block-table.is-style-ck-table td {
	padding: var(--ck-space-4) var(--ck-space-5);
	border: 0;
	border-bottom: var(--ck-border-width) solid var(--ck-line);
	text-align: left;
	vertical-align: top;
}

.wp-block-table.is-style-ck-table thead th {
	background-color: var(--ck-surface);
	font-weight: var(--ck-weight-semibold);
	color: var(--ck-ink);
}

.single-post .entry-content {
	padding-inline: var(--ck-gutter);
	padding-block: 0 var(--ck-space-16);
}

.single-post .entry-content > .ck-prose {
	max-width: 74ch;
	margin-inline: auto;
}

/* Обложка записи (если задана) */
.single-post .entry-content img.wp-post-image,
.single-post .entry-header img.wp-post-image {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: var(--ck-radius-lg);
	margin-block: 0 var(--ck-space-8);
}

/* Цитата и врезка внутри статьи */
.single-post .entry-content > .ck-prose blockquote {
	margin: var(--ck-space-6) 0;
	padding: var(--ck-space-5) var(--ck-space-6);
	border-left: 3px solid var(--ck-lime);
	border-radius: var(--ck-radius-sm);
	background-color: var(--ck-surface);
	font-size: var(--ck-fs-body-lg, 1.125rem);
}


/* ==========================================================================
   22. Ширина статьи и комментарии — по киту.
   Body статьи = контейнер сайта (1200), а не 750 от Blocksy.
   Форма комментариев = поля .ck-input и лаймовая кнопка кита.
   ========================================================================== */

.single-post .ck-article-head,
.single-post .entry-content > .ck-prose {
	width: min(100% - var(--ck-gutter) * 2, var(--ck-container));
	max-width: none;
	margin-inline: auto;
}

/* --- Форма комментариев ------------------------------------------------- */
/* Blocksy держит комментарии в узком контейнере (750px) — возвращаем к ширине сайта */
.single-post .ct-container-narrow,
.single-post .ct-comments {
	width: min(100%, var(--ck-container));
	max-width: none;
	margin-inline: auto;
}

.comment-respond {
	width: 100%;
	margin-inline: auto;
	padding-block: var(--ck-space-10) var(--ck-space-12);
}

.comment-respond .comment-reply-title,
.comments-title {
	margin: 0 0 var(--ck-space-5);
	font-family: var(--ck-font-display);
	font-size: var(--ck-fs-h3);
	line-height: 1.15;
	letter-spacing: 0;
}

.comment-respond .comment-notes {
	margin: 0 0 var(--ck-space-6);
	font-size: var(--ck-fs-sm);
	color: var(--ck-muted);
}

#commentform {
	display: grid;
	gap: var(--ck-space-5);
}

#commentform p {
	margin: 0;
}

#commentform label {
	display: block;
	margin-bottom: var(--ck-space-2);
	font-size: var(--ck-fs-sm);
	font-weight: var(--ck-weight-semibold);
	color: var(--ck-color-text);
}

#commentform input[type='text'],
#commentform input[type='email'],
#commentform input[type='url'],
#commentform textarea {
	width: 100%;
	min-height: 48px;
	padding: var(--ck-space-3) var(--ck-space-4);
	border: var(--ck-border-width) solid var(--ck-line);
	border-radius: var(--ck-radius-md);
	background-color: var(--ck-white);
	color: var(--ck-color-text);
	font-family: var(--ck-font-body);
	font-size: 1rem;
	line-height: 1.3;
	transition:
		border-color var(--ck-dur-fast) var(--ck-ease),
		box-shadow var(--ck-dur-fast) var(--ck-ease);
}

#commentform textarea {
	min-height: 160px;
	resize: vertical;
}

#commentform input[type='text']:focus,
#commentform input[type='email']:focus,
#commentform input[type='url']:focus,
#commentform textarea:focus {
	border-color: var(--ck-blue);
	outline: var(--ck-focus-ring-width) solid var(--ck-color-focus);
	outline-offset: var(--ck-focus-ring-offset);
}

#commentform .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--ck-space-3);
}

#commentform .comment-form-cookies-consent label {
	margin: 0;
	font-size: var(--ck-fs-sm);
	font-weight: var(--ck-weight-regular, 400);
	color: var(--ck-muted);
}

#commentform .form-submit {
	margin: 0;
}

#commentform .submit,
#commentform input[type='submit'] {
	min-height: 60px;
	padding: 1rem 2.5rem;
	border: 0;
	border-radius: var(--ck-radius-xl);
	background-color: var(--ck-lime);
	color: var(--ck-ink);
	font-family: var(--ck-font-display);
	font-size: 1.125rem;
	font-weight: var(--ck-weight-semibold);
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--ck-dur-fast) var(--ck-ease);
}

#commentform .submit:hover,

/* ==========================================================================
   23. Архив блога + галерея кейса — по шаблону кита.
   Кит уже содержит .ck-testimonial, .ck-form, .ck-case-hero, .ck-team —
   здесь только то, чего в ките нет (карточки архива, плитки галереи).
   ========================================================================== */

/* --- Карточка статьи в архиве: обложка, мета в строку, заголовок, лид, ссылка */
.ct-posts .entry-card,
.blog .entry-card {
	display: grid;
	grid-template-columns: 1fr auto;
	align-content: start;
	gap: var(--ck-space-3) var(--ck-space-4);
	padding: 0;
	border: 0;
	background: none;
}

.ct-posts .entry-card::before,
.blog .entry-card::before {
	content: '';
	grid-row: 1;
	grid-column: 1 / -1;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--ck-space-3);
	border-radius: var(--ck-radius-lg);
	background: var(--ck-pastel-mint);
}

.ct-posts .entry-card:nth-child(3n + 2)::before,
.blog .entry-card:nth-child(3n + 2)::before {
	background: var(--ck-pastel-cream);
}

.ct-posts .entry-card:nth-child(3n + 3)::before,
.blog .entry-card:nth-child(3n + 3)::before {
	background: var(--ck-pastel-leaf);
}

.ct-posts .entry-card .entry-meta,
.blog .entry-card .entry-meta {
	grid-row: 2;
	margin: 0;
	padding: 0;
	font-family: var(--ck-font-body);
	font-size: var(--ck-fs-xs);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ck-muted);
	list-style: none;
}

.ct-posts .entry-card .entry-meta:nth-of-type(1),
.blog .entry-card .entry-meta:nth-of-type(1) {
	grid-column: 1;
	justify-self: start;
}

.ct-posts .entry-card .entry-meta:nth-last-of-type(1),
.blog .entry-card .entry-meta:nth-last-of-type(1) {
	grid-column: 2;
	justify-self: end;
}

.ct-posts .entry-card .entry-meta a,
.blog .entry-card .entry-meta a {
	color: var(--ck-muted);
	text-decoration: none;
}

.ct-posts .entry-card .entry-title,
.blog .entry-card .entry-title {
	grid-row: 3;
	grid-column: 1 / -1;
	margin: 0;
	font-family: var(--ck-font-display);
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: 0;
}

.ct-posts .entry-card .entry-title a,
.blog .entry-card .entry-title a {
	color: var(--ck-ink);
	text-decoration: none;
}

.ct-posts .entry-card .entry-excerpt,
.blog .entry-card .entry-excerpt {
	grid-row: 4;
	grid-column: 1 / -1;
	font-size: var(--ck-fs-sm);
	line-height: 1.5;
	color: var(--ck-muted);
}

.ct-posts .entry-card .entry-excerpt p,
.blog .entry-card .entry-excerpt p {
	margin: 0;
}

/* «Читать →» под карточкой (ссылка добавляется скриптом темы) */
.ck-blog-more {
	grid-row: 5;
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	gap: var(--ck-space-2);
	margin-top: var(--ck-space-2);
	font-family: var(--ck-font-body);
	font-size: var(--ck-fs-sm);
	font-weight: var(--ck-weight-semibold);
	color: var(--ck-blue);
	text-decoration: none;
}

.ck-blog-more:hover {
	color: var(--ck-ink);
}

/* --- Мозаика кейса: плитки с фото -------------------------------------- */
.ck-gallery--masonry {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 180px;
	grid-auto-flow: dense;
	gap: var(--ck-space-4);
}

.ck-gallery--masonry .ck-gallery__tile {
	position: relative;
	overflow: hidden;
	min-height: 0;
	margin: 0;
	border-radius: var(--ck-radius-lg);
	background-color: var(--ck-surface);
}

.ck-gallery__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ck-gallery__tile--wide {
	grid-column: span 2;
}

.ck-gallery__tile--tall {
	grid-row: span 2;
}

/* Отступ между текстом и галереей / галереей и подписью */
.ck-prose + .ck-gallery,
.ck-gallery + .ck-muted,
.ck-gallery + p {
	margin-top: var(--ck-space-8) !important;
}

.ck-muted + .ck-gallery {
	margin-top: var(--ck-space-6) !important;
}
/* «Читать →» и кликабельная карточка целиком */
.ct-posts .entry-card,
.blog .entry-card {
	position: relative;
}

.ct-posts .entry-card::after,
.blog .entry-card::after {
	content: 'Читать →';
	grid-row: 5;
	grid-column: 1 / -1;
	margin-top: var(--ck-space-2);
	font-family: var(--ck-font-body);
	font-size: var(--ck-fs-sm);
	font-weight: var(--ck-weight-semibold);
	color: var(--ck-blue);
}

.ct-posts .entry-card .entry-title a::after,
.blog .entry-card .entry-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* ==========================================================================
   24. Архив блога — финальные размеры карточки (перекрывает §23).
   Blocksy печатает .entry-card с padding 30px и своей сеткой, поэтому
   селекторы усилены по специфичности.
   ========================================================================== */

article.entry-card.card-content {
	display: grid !important;
	grid-template-columns: auto 1fr;
	align-content: start;
	gap: 10px 12px;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	position: relative;
}

article.entry-card.card-content::before {
	content: '';
	grid-row: 1;
	grid-column: 1 / -1;
	aspect-ratio: 5 / 3;
	margin-bottom: 4px;
	border-radius: var(--ck-radius-lg);
	background: var(--ck-pastel-mint);
}

.entries > article.entry-card:nth-child(3n + 2)::before {
	background: var(--ck-pastel-cream);
}

.entries > article.entry-card:nth-child(3n + 3)::before {
	background: var(--ck-pastel-leaf);
}

article.entry-card.card-content > .entry-meta {
	grid-row: 2;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--ck-font-body);
	font-size: var(--ck-fs-xs);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ck-muted);
}

article.entry-card.card-content > .entry-meta:nth-of-type(1) {
	grid-column: 1;
}

article.entry-card.card-content > .entry-meta:nth-of-type(2) {
	grid-column: 2;
	justify-self: start;
}

article.entry-card.card-content > .entry-meta a {
	color: var(--ck-muted);
	text-decoration: none;
}

article.entry-card.card-content > .entry-title {
	grid-row: 3;
	grid-column: 1 / -1;
	margin: 0;
	font-family: var(--ck-font-display);
	font-size: 1.15rem;
	line-height: 1.25;
	letter-spacing: 0;
}

article.entry-card.card-content > .entry-title a {
	color: var(--ck-ink);
	text-decoration: none;
}

article.entry-card.card-content > .entry-excerpt {
	grid-row: 4;
	grid-column: 1 / -1;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: var(--ck-fs-sm);
	line-height: 1.5;
	color: var(--ck-muted);
}

article.entry-card.card-content > .entry-excerpt p {
	margin: 0;
}

article.entry-card.card-content::after {
	content: 'Читать →';
	grid-row: 5;
	grid-column: 1 / -1;
	margin-top: 2px;
	font-family: var(--ck-font-body);
	font-size: var(--ck-fs-sm);
	font-weight: var(--ck-weight-semibold);
	color: var(--ck-blue);
}

article.entry-card.card-content > .entry-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* --- Форма заявки: honeypot и сообщение об ошибке ----------------------- */
.ck-field--hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ck-form__error {
	margin: 0;
	padding: var(--ck-space-3) var(--ck-space-4);
	border-radius: var(--ck-radius-md);
	background-color: #fdecec;
	color: #a1151c;
	font-size: var(--ck-fs-sm);
}