/**
 * HedgeTrade Sections — CSS секций главной страницы.
 * ------------------------------------------------------------------
 * Пара к паттернам из /patterns: hero, trust-bar, steps, cta.
 * Компоненты общего назначения (.ht-card, .ht-btn…) — в ht-ui.css,
 * здесь только раскладки, специфичные для конкретных секций.
 *
 * Mobile First: база — одноколоночный мобильный поток,
 * @media (min-width: …) включают десктопные раскладки макета.
 *
 * @package HedgeTrade_Child
 * @since   1.5.0
 */

/* ==================================================================
   HERO
   ================================================================== */

/* Секция hero: паддинги 48→88px и градиент по спеке промта
   (80–100px на десктопе, почти белый → светло-синий слева направо).
   position:relative + overflow — контейнер для фонового слоя визуала. */
.ht-section--hero {
	position: relative;
	overflow: hidden;
	/* Верхний отступ от шапки уменьшен в 4 раза (заказчик, 1.8.5);
	   нижний — тоже /4 (заказчик, 1.13.1): полный --ht-hero-pad
	   оставлял под метриками широкую голубую полосу и отрывал
	   секцию карточек от hero. Паддинги стали симметричными. */
	padding-block-start: calc(var(--ht-hero-pad) / 4);
	padding-block-end: calc(var(--ht-hero-pad) / 4);
	background: var(--ht-gradient-hero);
}

.ht-hero {
	display: grid;
	gap: var(--ht-space-8);
	align-items: center;
}

.ht-hero__content {
	display: grid;
	gap: var(--ht-space-4); /* плотный ритм авторского рендера */
	justify-items: start;
}

/* H1 hero: межстрочный интервал прибит в НАШЕМ css (1.12.31).
   До этого line-height жил только в theme.json (elements.h1 →
   --ht-lh-tight): WP печатает его глобальным селектором `h1`
   с нулевой классовой специфичностью, а наши файлы грузятся
   раньше Blocksy — обновление родительской темы или пересборка
   критического CSS перебивали правило, и строки заголовка
   разъезжались до ~1.6 (скрин заказчика). Классовая
   специфичность делает правило каскадонезависимым. Margin
   обнулён: ритм колонки задаёт только grid-gap. */
.ht-hero__content h1 {
	margin: 0;
	line-height: var(--ht-lh-tight);
}

.ht-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ht-space-3);
	inline-size: 100%;
}

/* Mobile First: кнопки на всю ширину (спека), с 700px — по контенту. */
.ht-hero__actions .ht-btn {
	flex: 1 1 100%;
}

@media (min-width: 700px) {

	.ht-hero__actions .ht-btn {
		flex: 0 0 auto;
	}
}

/* Лёгкое появление визуала (спека: «плавное появление при скролле»).
   Hero выше фолда — скролл-обсервер бессмыслен и потребовал бы JS;
   CSS-анимация на загрузке даёт тот же эффект при нуле JS.
   H1 не анимируем: он кандидат в LCP, задержка отрисовки бьёт по метрике. */
/* Только transform (аудит-2, 1.9.1): старт с opacity:0 откладывал
   отрисовку крупнейшего элемента и бил по LCP (~+620мс). Движение
   появления сохранено, paint — немедленный. */
@keyframes ht-hero-in {

	from {
		transform: translateY(14px);
	}
}

.ht-hero__visual {
	animation: ht-hero-in 500ms var(--ht-ease) 120ms both;
}

@media (prefers-reduced-motion: reduce) {

	.ht-hero__visual {
		animation: none;
	}
}

.ht-hero__visual img {
	inline-size: 100%;
	block-size: auto; /* height из атрибутов + auto = пропорции без CLS */
}

/* Лид под заголовком: ограничение ширины даёт перенос
   на две строки, как в макете. */
.ht-hero__lead {
	font-size: var(--ht-fs-lead);
	line-height: 1.6; /* спека hero-промта */
	max-inline-size: 32em;
}

/* ≥1000px: визуал — фоновый слой на ВСЮ ширину секции: размытое
   продолжение графика уходит под текст (референс заказчика,
   1.7.8). Контент поднят над слоем через z-index. Мобильная база
   не тронута: там картинка остаётся в потоке под текстом. */
@media (min-width: 1000px) {

	/* Посадка 1.8.4 — финальное требование заказчика: график
	   начинается ПОСЛЕ текста на любом разрешении. Гарантия —
	   структурная, а не расчётная: визуал в собственной грид-колонке
	   и физически не может оказаться под текстом. Никаких
	   absolute-слоёв: они и были источником сюрпризов на
	   промежуточных ширинах. Картинка целиком, натуральные
	   пропорции 2:1, вертикально по центру колонки. */
	.ht-hero {
		display: grid;
		grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
		gap: clamp(3rem, 1rem + 2.5vw, 4rem); /* межколоночный 48–64, спека */
		align-items: center;
	}

}

/* ==================================================================
   TRUST BAR — полоса метрик. Живёт ВНУТРИ hero-секции (низ голубой
   зоны, как в макете), поэтому несёт собственный верхний отступ.
   Разделители — border у элемента, а не отдельный div.
   ================================================================== */

.ht-trust {
	display: grid;
	gap: var(--ht-grid-gap);
	margin-block-start: var(--ht-space-10);
}

.ht-trust__item {
	display: flex;
	align-items: center;
	gap: var(--ht-space-3);
	min-inline-size: 0; /* флекс-детям разрешено ужиматься — текст переносится, а не режется */
	color: var(--ht-color-heading);
	font-size: var(--ht-fs-body);
	font-weight: var(--ht-fw-bold);
	line-height: var(--ht-lh-heading);
}

.ht-trust__item .ht-icon {
	color: var(--ht-color-primary);
	flex-shrink: 0;
}

.ht-trust__item small {
	display: block;
	color: var(--ht-color-text);
	font-size: var(--ht-fs-small);
	font-weight: var(--ht-fw-regular);
}

/* Внутри карточки метрики в ряд — с 700px. */
@media (min-width: 700px) {

	.ht-trust .ht-card {
		flex-direction: row;
		align-items: stretch; /* разделители во всю высоту контента */
		justify-content: space-between;
		gap: var(--ht-space-4);
	}

	.ht-trust__item {
		flex: 1;
		padding-block: var(--ht-space-1);
	}

	.ht-trust__item + .ht-trust__item {
		padding-inline-start: var(--ht-space-4);
		border-inline-start: 1px solid var(--ht-color-border);
	}
}

/* Бок о бок карточкам метрик хватает места только с 1000px:
   на планшете текст обрезался краем карточки (живой сайт, 1.12.6). */
@media (min-width: 1000px) {

	.ht-trust {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==================================================================
   STEPS — «Как это работает». Стрелки между шагами убраны по
   решению заказчика (2026-07-04) — сетка стала простой 5×1.
   ================================================================== */

.ht-steps {
	display: grid;
	gap: var(--ht-grid-gap);
	/* Воздух под заголовком и под группой одинаковый (1.12.22):
	   снизу отступа не было вовсе, и пустота до следующей секции
	   читалась как провал — блок «висел» без нижней опоры. */
	margin-block: var(--ht-space-6);
}

/* Нижний отступ секции шагов гасим: свой ритм задаёт .ht-steps,
   иначе отступы складываются и внизу образуется двойная пустота. */
#how-it-works {
	padding-block-end: 0;
}

.ht-step {
	display: grid;
	grid-auto-rows: max-content; /* 1.12.21: строки по содержимому — иначе
	   grid растягивал иконку, заголовок и описание по всей высоте колонки,
	   и между ними зияли пустые полосы */
	align-content: start; /* 1.12.29: группа прижата к верху колонки —
	   пара к align-items:start контейнера, иконки шагов на одной линии */
	gap: var(--ht-space-2); /* плотнее: иконка и подпись читаются одной группой (1.12.17) */
	justify-items: center; /* иконка и текст по центру колонки (1.12.14) */
	text-align: center;
}

/* Собственные отступы блоков редактора внутри шага обнуляем —
   они складывались с gap и растаскивали иконку, заголовок и
   описание по всей высоте колонки (1.12.17). */
.ht-step > * {
	margin-block: 0 !important;
}

/* ≥1000px: 5 равных шагов в строке. */
@media (min-width: 1000px) {

	.ht-steps {
		grid-template-columns: repeat(5, 1fr);
		/* 1.12.29: колонки выравниваем ПО ВЕРХУ. Прежний center (1.12.21)
		   центрировал каждую колонку по высоте самой высокой — колонки
		   с коротким описанием (1 строка) «всплывали» к середине, и иконки
		   пяти шагов оказывались на разных уровнях (баг, скрин заказчика).
		   При start иконки всех шагов стоят на одной линии. */
		align-items: start;
	}
}

/* ==================================================================
   CTA-БАР — «Присоединяйся к Telegram-каналу».
   ================================================================== */

.ht-cta {
	display: grid;
	gap: var(--ht-space-6);
	align-items: center;
	padding: var(--ht-card-padding);
	border-radius: var(--ht-radius-md);
	background: var(--ht-color-section);
}

/* Изоляция от flow-отступов Gutenberg (1.13.3): разметка группы
   получает от WP margin-block-start на каждого следующего ребёнка,
   и в grid-ячейке с align-items:center бокс центрируется ВМЕСТЕ
   с margin — кнопка и перки проседали ниже уровня лида (скрин
   заказчика). Ритм задаёт только grid gap. Тот же приём, что
   в изоляции .ht-card (ht-ui.css). */
.ht-cta > * {
	margin-block: 0 !important;
}

.ht-cta__lead {
	display: flex;
	align-items: center;
	gap: var(--ht-space-4);
}

/* Та же изоляция уровнем глубже (1.13.4): лид — тоже группа
   Gutenberg, её текстовый блок получал flow-отступ сверху и во
   flex-строке проседал вниз — плитка Telegram относительно него
   «всплывала» выше кнопки (скрин заказчика). */
.ht-cta__lead > * {
	margin-block: 0 !important;
}

/* Плитка Telegram — синий квадрат с белым самолётом.
   Иконка внутри крупной плитки тоже крупнее (пропорция макета). */
.ht-cta__lead .ht-icon-tile {
	inline-size: var(--ht-icon-lg);
	block-size: var(--ht-icon-lg);
	background: var(--ht-color-primary);
	color: var(--ht-color-on-primary);
}

.ht-cta__lead .ht-icon-tile .ht-icon {
	inline-size: var(--ht-icon-tile); /* 40px внутри 56px плитки */
	block-size: var(--ht-icon-tile);
}

.ht-cta__perks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ht-space-4) var(--ht-space-6);
}

.ht-cta__perk {
	display: flex;
	align-items: center;
	gap: var(--ht-space-2);
	color: var(--ht-color-text);
	font-size: var(--ht-fs-caption);
	line-height: 1.3;
}

.ht-cta__perk .ht-icon {
	color: var(--ht-color-primary);
}

/* ≥1200px: лид | кнопка | перки в одну строку. */
@media (min-width: 1200px) {

	.ht-cta {
		grid-template-columns: auto auto 1fr;
	}

	.ht-cta__perks {
		justify-content: flex-end;
		flex-wrap: nowrap;
	}
}

/* ==================================================================
   ARTICLES — «Свежие статьи» (пара к patterns/articles.php).
   Query Loop рендерит ul.wp-block-post-template > li: сбрасываем
   списочные стили и растягиваем карточку на высоту ряда, чтобы
   карточки в строке были одной высоты при разной длине текста.
   ================================================================== */

.ht-articles .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ht-articles .wp-block-post-template > li {
	display: grid; /* карточка тянется на всю высоту ячейки строки */
}

/* figure у featured image несёт браузерный margin — сброс.
   Ссылка внутри — блочная на всю высоту, иначе object-fit
   картинки не заполнит вытянутую (stretch) медиа-зону. */
.ht-articles .ht-card__media {
	margin: 0;
}

.ht-articles .ht-card__media a {
	display: block;
}

/* Ссылки заголовков карточек: цвет заголовка, primary на hover. */
.ht-articles .ht-card__title a {
	color: inherit;
	text-decoration: none;
}

.ht-articles .ht-card__title a:hover {
	color: var(--ht-color-primary);
}

/* «Читать статью» прижат к низу тела карточки. */
.ht-articles .ht-arrow-link {
	margin-block-start: auto;
}

/* ------------------------------------------------------------------
   Модификатор arrow-link без инлайн-SVG: для core-блоков
   (read-more), в которые нельзя вставить <svg>. Стрелка — mask
   с data-URI, красится через background: currentColor, ездит
   трансформом (те же 60 FPS, что и SVG-вариант).
   ------------------------------------------------------------------ */

.ht-arrow-link--css::after {
	content: '';
	inline-size: var(--ht-icon-sm);
	block-size: var(--ht-icon-sm);
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--ht-transition);
}

.ht-arrow-link--css:hover::after {
	transform: translateX(var(--ht-slide));
}


/* ==================================================================
   СТРАНИЦА (page.php) — 1.12.5
   Никаких ограничений ширины и отступов: секции-паттерны держат
   свою геометрию сами. Файл page.php введён, потому что без него
   страницы попадали в разметку статьи (.ht-article__content, мера
   45rem) — hero зажимался в колонку, снизу цеплялись автор и шеринг.
   ================================================================== */

.ht-page {
	inline-size: 100%;
	max-inline-size: none;
	margin: 0;
	padding: 0;
}

/* Страховка: если тема-родитель всё же обернёт контент своим
   контейнером, снимаем ограничения и с него — только на страницах. */
.page .ht-page > .entry-content,
.page .ht-page > .wp-block-post-content {
	max-inline-size: none;
}


/* ==================================================================
   ПРАВКИ ЖИВОГО САЙТА — 1.12.6
   ================================================================== */

/* Преимущества: явные колонки вместо auto-fit (единственный
   потребитель --ht-grid-cards — эта секция). На сверхшироких
   auto-fit укладывал 6 карточек в один ряд с неровной последней —
   фиксируем макет: 1 колонка → 2×3 → 3×2. */
.ht-grid--cards {
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {

	.ht-grid--cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {

	.ht-grid--cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* «Как это работает» — только на компьютере (решение заказчика,
   1.12.6): до 1000px секция скрыта целиком; селектор — стабильный
   якорь секции. Вместе с ней прячем hero-кнопку «Смотреть обзор»:
   её ссылка #how-it-works вела бы в скрытую секцию (мёртвый клик). */
@media (max-width: 999px) {

	#how-it-works {
		display: none;
	}

	.ht-hero__actions .ht-btn--outline {
		display: none;
	}
}