/* ===========================================================
   EK ABOUT — страница «О нас».
   Префикс ek-about-, скоупируется под .ek-page.
   Все @media — В КОНЦЕ файла, после десктопных правил (каскад).

   Файл ТОНКИЙ намеренно: герой, карточки, шаги, галочки и тёмный CTA
   приходят из ek-about.css → ek-info.css (зависимость объявлена в
   functions.php). Здесь живёт только то, чего в семействе .ek-info-*
   нет: колонка текста, выноска и правка списочной семантики.
   =========================================================== */

/* ───── Колонка текста ─────
   У инфо-страниц сплошного текста почти нет — там таблицы и карточки.
   Здесь наоборот: шесть секций из абзацев. Ширина ограничена по числу
   символов, а не по пикселям: строка длиннее ~72 знаков читается заметно
   хуже, и на 1280 абзац растянулся бы на всю ширину контейнера. */
.ek-page .ek-about-prose {
	max-width: 72ch;
}
.ek-page .ek-about-prose p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ek-text-muted);
	margin: 0 0 16px;
}
.ek-page .ek-about-prose p:last-child {
	margin-bottom: 0;
}

/* ───── Выноска ─────
   В оригинале это был блок с синей рамкой слева и голубой заливкой
   (#2563eb / #eff6ff) — чужая палитра из вставленного документа.
   Переведено на токены темы: акцент — основной цвет текста, фон — белый,
   чтобы выноска читалась и на светлой секции, и на серой (.is-dim).
   Заливкой не выделяем: градиентов и «распродажных» подложек в теме нет. */
.ek-page .ek-about-callout {
	margin: 24px 0;
	padding: 16px 20px;
	background: var(--ek-bg);
	border-left: 2px solid var(--ek-text);
	border-radius: 0 var(--ek-radius-md) var(--ek-radius-md) 0;
	font-size: 17px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--ek-text);
}

/* ───── Пять пунктов «Почему нам доверяют» ─────
   .ek-info-check тянет цвет галочки из --ek-sage. Токен объявлен на
   .ek-info-page-body, то есть здесь он ЕСТЬ — обёртка несёт этот класс.
   Но зелёный в теме зарезервирован под индикатор наличия и «бесплатно»
   (DESIGN.md:24, 73), третьего смысла ему не даём: галочка тёмная. */
.ek-page .ek-about-checks {
	margin-top: 24px;
	margin-bottom: 24px;
}
.ek-page .ek-about-checks .ek-info-check svg {
	color: var(--ek-text);
}

/* ───── Четыре этапа ─────
   .ek-info-steps в инфо-страницах — <div>. Здесь это настоящий <ol>:
   в оригинале был нумерованный список, и номера обязаны пережить перенос.
   Маркеры браузера гасим — номер печатает .ek-info-step-num. */
.ek-page .ek-about-steps {
	list-style: none;
	margin: 24px 0;
	padding: 0;
}

/* ───── Герой ─────
   Второй абзац в герое — не типовой случай: у инфо-страниц подзаголовок
   всегда один (ek-info.css:42-48 задаёт margin: 0). Разводим вертикально,
   ширину оставляем ту же.

   🔴 ДВЕ ФОРМЫ СЕЛЕКТОРА — НЕ ИЗБЫТОЧНОСТЬ. Класс ek-about-page висит на том
   же узле, что и ek-page, и одновременно этот узел вложен в другой .ek-page
   из шапки (header-ek.php:21). Сегодня сработала бы и форма с пробелом — но
   ровно из-за этой вложенности, то есть случайно. Уберут лишнюю обёртку в
   шапке — и отступы молча исчезнут. Пишем обе, как это уже сделано для
   .ek-info-page-body в ek-info.css:13-14. */
.ek-page .ek-about-page .ek-info-hero-sub + .ek-info-hero-sub,
.ek-page.ek-about-page .ek-info-hero-sub + .ek-info-hero-sub {
	margin-top: 16px;
}

/* ───── Финальный блок ─────
   Два абзаца вместо одного — в .ek-info-cta-text у <p> своего нижнего
   отступа нет, иначе они слиплись бы. */
.ek-page .ek-about-page .ek-info-cta-text p + p,
.ek-page.ek-about-page .ek-info-cta-text p + p {
	margin-top: 12px;
}

/* ═══════════════ Адаптив ═══════════════ */

@media (max-width: 1024px) {
	.ek-page .ek-about-prose p { font-size: 16px; }
	.ek-page .ek-about-callout { font-size: 16px; }
}

@media (max-width: 640px) {
	.ek-page .ek-about-prose { max-width: none; }
	.ek-page .ek-about-prose p { font-size: 15px; }
	.ek-page .ek-about-callout {
		margin: 20px 0;
		padding: 14px 16px;
		font-size: 15px;
	}
	.ek-page .ek-about-checks { margin-top: 20px; margin-bottom: 20px; }
	.ek-page .ek-about-steps { margin: 20px 0; }
}