/**
 * HedgeTrade UI Components
 * ------------------------------------------------------------------
 * Переиспользуемые компоненты дизайн-системы. Только семантические
 * токены из tokens.css — ни одного сырого значения цвета/размера.
 *
 * Скоуп файла: компоненты, встречающиеся в 2+ секциях макета.
 * Секционные стили (hero, шаги, CTA-бар) живут рядом со своими
 * паттернами и подключаются на этапе 5 — не добавлять их сюда.
 *
 * Структура (порядок фиксированный):
 *   1. Utilities   — контейнер, секции, сетки
 *   2. Components  — badge, icon-tile, button, card, section-title,
 *                    arrow-link
 *   3. Media       — минимум: только структурные перестройки
 *
 * Соглашения:
 *   - Mobile First: базовые стили = мобильные, @media только вверх.
 *   - Анимируются ТОЛЬКО transform и opacity (60 FPS, composite-only).
 *     Тень hover — через opacity псевдоэлемента, не transition
 *     box-shadow (это repaint).
 *   - БЭМ с префиксом ht-: .ht-card, .ht-card__icon, .ht-card--article.
 *
 * @package HedgeTrade_Child
 * @since   1.2.0
 */

/* ==================================================================
   1. UTILITIES
   ================================================================== */

/* ------------------------------------------------------------------
   Контейнер. Используется внутри полноширинных секций.
   ------------------------------------------------------------------ */

.ht-container {
	max-width: var(--ht-container-max);
	margin-inline: auto;
	padding-inline: var(--ht-container-pad);
}

/* ------------------------------------------------------------------
   Секция. Вертикальный ритм страницы задаётся только здесь —
   компоненты внутри не имеют внешних margin (принцип: отступы
   владеет родитель, компонент себя не позиционирует).
   ------------------------------------------------------------------ */

.ht-section {
	padding-block: var(--ht-section-gap);
}

/* Модификатор: светло-голубой фон (hero, CTA-бар, чередование). */
.ht-section--tinted {
	background: var(--ht-color-section);
}

/* ------------------------------------------------------------------
   Сетки. auto-fit + minmax из токенов: колонки перестраиваются
   без media queries на всём диапазоне 320→2560.
   ------------------------------------------------------------------ */

.ht-grid {
	display: grid;
	gap: var(--ht-grid-gap);
}

.ht-grid--cards {
	grid-template-columns: var(--ht-grid-cards);
}

.ht-grid--articles {
	grid-template-columns: var(--ht-grid-articles);
}

/* Равные высоты карточек статей (1.12.10, живой сайт): блок выводится
   циклом записей, карточка сидит в обёртке-ячейке (li/div цикла).
   Ячейки сетка тянет одинаково, а карточки внутри — нет: высота шла
   по контенту, и при анонсах разной длины ряд плясал. Обёртка
   становится flex — карточка заполняет ячейку целиком; стрелка
   «Читать статью» с её margin-auto прижимается к общему низу. */
/* Равные высоты карточек статей (1.12.15).
   Схема: ul.ht-grid--articles → li → div.ht-card.
   Сетка тянет li до высоты ряда, но карточка внутри li высоту не
   наследовала и оставалась по контенту — при переносе строки в
   анонсе одна карточка выступала вниз (в один столбец эффекта нет,
   поэтому на узких экранах всё выглядело ровно).
   Теперь li — грид-ячейка на всю высоту, а карточка её заполняет. */
.ht-grid--articles > * {
	display: grid;
	block-size: 100%;
	margin: 0;
}

.ht-grid--articles > * > .ht-card {
	block-size: 100%;
}

/* ЖЁСТКАЯ изоляция геометрии карточки (1.12.9). Мягкий сброс 1.12.7
   на живом сайте перебивался стилями ядра/родителя — дыры между
   головой и текстом остались. Карточка — полностью наш компонент,
   поэтому margin её детей прибит с !important: ритм задаёт ТОЛЬКО
   flex-gap. Исключение ниже: стрелка в карточке статьи прижимается
   к низу через margin-block-start:auto — возвращаем ей auto тоже
   с !important, чтобы изоляция её не задела. */
.ht-card > *,
.ht-card__head,
.ht-card__head > * {
	margin-block: 0 !important;
}

/* Содержимое карточки прижато к верху: свободное место уходит вниз
   одним блоком, а не размазывается между элементами. */
.ht-card {
	justify-content: flex-start;
}

/* Карточка преимуществ — GRID с прижатием к началу (1.12.13).
   У грида нет механизма распределять свободное место МЕЖДУ рядами
   при align-content:start: ряды авто-высоты, промежуток — ровно gap.
   Это закрывает зазор конструктивно, чем бы он ни был вызван. */
.ht-grid--cards .ht-card {
	display: grid !important;
	align-content: start;
	justify-items: start;
	gap: var(--ht-space-3);
	block-size: 100%; /* заполняет ячейку ряда: без этого карточка держала
	                     высоту по своему тексту, и в многоколоночной
	                     раскладке одна выступала ниже соседей, тогда как
	                     в один столбец всё выглядело ровно (1.12.16) */
}

.ht-card :is(h2, h3, h4) {
	margin: 0 !important;
}

.ht-articles .ht-card .ht-arrow-link {
	margin-block-start: var(--ht-space-3) !important; /* 1.12.19: без анонса
	   прижатие к низу давало дыру под заголовком — ссылка идёт сразу
	   за ним с обычным интервалом */
}

/* Центровка Telegram-глифа (1.12.13). По координатам пути центр
   масс самолётика — (13.3, 13.05) при центре холста (12, 12):
   глиф смещён ВПРАВО-ВНИЗ. Прошлые правки двигали его вправо —
   в неверную сторону (признано в CHANGELOG). Файл темы исправлен
   через viewBox; правила ниже чинят УСТАРЕВШИЕ копии, вшитые
   паттернами в контент базы (файл они не читают), — оба поколения. */
svg[viewBox="0 0 24 24"] path[d^="M21.6 4.4"] {
	transform: translate(-1.3px, -1.05px); /* исходная копия */
}

svg[viewBox="-0.8 0.7 24 24"] path[d^="M21.6 4.4"] {
	transform: translate(-2.1px, -0.35px); /* копия после неверной правки 1.12.8 */
}

/* Акцент primary-цветом внутри текста (двухцветный H1, цифры метрик). */
.ht-accent {
	color: var(--ht-color-primary);
}

/* ==================================================================
   2. COMPONENTS
   ================================================================== */

/* ------------------------------------------------------------------
   Badge — pill-плашка («ТОРГОВЛЯ В ОБЕ СТОРОНЫ»).
   ------------------------------------------------------------------ */

.ht-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ht-space-2);
	padding: 0.375rem 0.875rem; /* 6px 14px — спека hero-промта */
	border-radius: var(--ht-radius-pill);
	background: var(--ht-color-primary-soft);
	color: var(--ht-color-primary);
	font-size: var(--ht-fs-caption);
	font-weight: var(--ht-fw-semibold);
	letter-spacing: var(--ht-ls-caps);
	line-height: var(--ht-lh-none);
	text-transform: uppercase;
}

/* ------------------------------------------------------------------
   Icon tile — голубая плитка 40px под иконку (карточки преимуществ).
   SVG внутри наследует цвет через currentColor.
   ------------------------------------------------------------------ */

.ht-icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0; /* плитка не сжимается рядом с длинным заголовком */
	inline-size: var(--ht-icon-tile);
	block-size: var(--ht-icon-tile);
	border-radius: var(--ht-radius-sm);
	background: var(--ht-color-primary-soft);
	color: var(--ht-color-primary);
}

/* Круглая вариация (секция «Как это работает»). */
.ht-icon-tile--round {
	border-radius: var(--ht-radius-pill);
	background: var(--ht-color-surface);
	border: 1px solid var(--ht-color-border);
}

/* Размеры самих SVG-иконок (ht_icon() ставит класс на <svg>). */
.ht-icon {
	inline-size: var(--ht-icon-md);
	block-size: var(--ht-icon-md);
}

.ht-icon--sm {
	inline-size: var(--ht-icon-sm);
	block-size: var(--ht-icon-sm);
}

.ht-icon--lg {
	inline-size: var(--ht-icon-lg);
	block-size: var(--ht-icon-lg);
}

/* ------------------------------------------------------------------
   Button. Два варианта макета: filled (primary) и outline.
   Селектор без элемента — применим и к <a>, и к <button>.
   ------------------------------------------------------------------ */

.ht-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ht-btn-gap);
	min-block-size: var(--ht-btn-height);
	padding-inline: var(--ht-btn-pad-x);
	border: 1px solid transparent;
	border-radius: var(--ht-btn-radius);
	font-family: inherit;
	font-size: var(--ht-btn-fs);
	font-weight: var(--ht-fw-semibold);
	line-height: var(--ht-lh-none);
	text-decoration: none;
	cursor: pointer;
	/* Только composite-свойства. Намеренно БЕЗ will-change:
	   постоянный слой GPU под каждую кнопку дороже, чем выигрыш. */
	transition: transform var(--ht-transition);
}

.ht-btn:hover {
	transform: translateY(var(--ht-lift));
}

.ht-btn:active {
	transform: translateY(0);
}

/* Видимый фокус для клавиатурной навигации — токен focus ring. */
.ht-btn:focus-visible {
	outline: var(--ht-focus-ring);
	outline-offset: var(--ht-focus-offset);
}

.ht-btn--primary {
	background: var(--ht-color-primary);
	color: var(--ht-color-on-primary);
}

.ht-btn--primary:hover {
	background: var(--ht-color-primary-hover);
}

.ht-btn--outline {
	background: var(--ht-color-surface);
	border-color: var(--ht-color-border);
	color: var(--ht-color-primary);
}

.ht-btn--outline:hover {
	border-color: var(--ht-color-primary);
}

/* Каскадная броня (1.13.3). Файлы темы грузятся раньше Blocksy,
   и его стили ссылок контентной области перекрашивали текст
   <a class="ht-btn"> при hover в синий — на синей кнопке текст
   «исчезал» (скрин заказчика). Тот же класс бага, что line-height
   H1 hero (1.12.31): порядок загрузки, а не специфичность. Цвет
   и отсутствие подчёркивания прибиты для всех состояний. */
.ht-btn,
.ht-btn:hover,
.ht-btn:focus,
.ht-btn:active {
	text-decoration: none !important;
}

.ht-btn--primary,
.ht-btn--primary:hover,
.ht-btn--primary:focus,
.ht-btn--primary:active {
	color: var(--ht-color-on-primary) !important;
}

.ht-btn--outline,
.ht-btn--outline:hover,
.ht-btn--outline:focus,
.ht-btn--outline:active {
	color: var(--ht-color-primary) !important;
}

/* ------------------------------------------------------------------
   Card — базовая карточка стиля «граница вместо тени».
   Hover: подъём + мягкая тень. Тень лежит в ::after с opacity 0 —
   transition opacity выполняется на композиторе (60 FPS), в отличие
   от transition box-shadow (repaint на каждый кадр).
   ------------------------------------------------------------------ */

.ht-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ht-space-3);
	align-items: flex-start; /* защита от наследуемого центрирования (живой сайт, 1.12.7) */
	text-align: start;
	padding: var(--ht-card-padding);
	border: 1px solid var(--ht-color-border);
	border-radius: var(--ht-radius-md);
	background: var(--ht-color-surface);
	transition: transform var(--ht-transition);
}

.ht-card::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: var(--ht-shadow-hover);
	opacity: 0;
	transition: opacity var(--ht-transition);
	pointer-events: none; /* тень не перехватывает клики по карточке */
}

.ht-card:hover {
	transform: translateY(var(--ht-lift));
}

.ht-card:hover::after {
	opacity: 1;
}

/* Голова карточки: иконка и заголовок в одной строке (макет
   преимуществ). Заголовок центрируется по плитке. */
.ht-card__head {
	display: flex;
	align-items: center;
	gap: var(--ht-space-3);
}

/* Заголовок и описание карточки. */
.ht-card__title {
	margin: 0;
	color: var(--ht-color-heading);
	font-size: var(--ht-fs-card-title);
	font-weight: var(--ht-fw-bold);
	line-height: var(--ht-lh-heading);
}

.ht-card__text {
	margin: 0;
	font-size: var(--ht-fs-small);
	line-height: var(--ht-lh-body);
}

/* Карточка статьи. Mobile First: база — вертикальный стек
   (картинка сверху), горизонтальная раскладка макета включается
   от 700px — см. секцию MEDIA. */
.ht-card--article {
	gap: var(--ht-space-4);
}

.ht-card__media {
	inline-size: 100%;
	border-radius: var(--ht-radius-sm);
	overflow: hidden;
	/* aspect-ratio убран (заказчик, 1.9.0): картинка показывается
	   целиком в натуральной пропорции; высоту без CLS резервируют
	   width/height-атрибуты, которые WP ставит сам. */
}

/* Картинка ЦЕЛИКОМ, без обрезки (заказчик, 1.9.0): contain вместо
   cover. width/height-атрибуты в разметке обязательны — резерв
   высоты против CLS. */
.ht-card__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.ht-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ht-space-2);
	min-inline-size: 0; /* разрешает перенос длинных заголовков во flex */
}

/* ------------------------------------------------------------------
   Section title — центрированный заголовок с линиями по бокам
   («Как это работает», «Свежие статьи»). Линии — псевдоэлементы
   grid-колонок: тянутся на всю свободную ширину автоматически.
   ------------------------------------------------------------------ */

.ht-section-title {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--ht-space-6);
	margin-block: 0 var(--ht-heading-gap);
	color: var(--ht-color-heading);
	font-size: var(--ht-fs-h2);
	font-weight: var(--ht-fw-bold);
	line-height: var(--ht-lh-heading);
	text-align: center;
}

.ht-section-title::before,
.ht-section-title::after {
	content: '';
	block-size: 1px;
	background: var(--ht-color-border);
}

/* ------------------------------------------------------------------
   Arrow link — «Читать статью →». Стрелка уезжает вправо на hover
   (transform, не margin — 60 FPS).
   ------------------------------------------------------------------ */

.ht-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--ht-space-2);
	/* Каскадная броня (1.13.3) — та же защита от стилей ссылок
	   Blocksy, что у .ht-btn: цвет и подчёркивание всех состояний. */
	color: var(--ht-color-primary) !important;
	font-size: var(--ht-fs-small);
	font-weight: var(--ht-fw-semibold);
	text-decoration: none !important;
}

.ht-arrow-link .ht-icon {
	inline-size: var(--ht-icon-sm);
	block-size: var(--ht-icon-sm);
	transition: transform var(--ht-transition);
}

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

.ht-arrow-link:focus-visible {
	outline: var(--ht-focus-ring);
	outline-offset: var(--ht-focus-offset);
	border-radius: var(--ht-radius-sm);
}

/* ==================================================================
   3. MEDIA — только структурные перестройки.
   Размерная адаптация уже решена clamp()-токенами и auto-fit
   сетками; здесь исключения, где меняется сама структура.
   Значения брейкпоинтов — из шапки tokens.css.
   ================================================================== */

/* ≥ 700px: карточка статьи разворачивается в горизонталь макета —
   картинка слева фиксированной долей, текст справа. */
@media (min-width: 700px) {

	.ht-card--article {
		flex-direction: row;
		align-items: flex-start;
	}

	/* Медиа-зона принимает НАТУРАЛЬНУЮ пропорцию картинки
	   (заказчик, 1.9.3): ширина колонки фиксирована, высота — от
	   изображения. Обрезание и «поля» исключены конструктивно.
	   Вертикальное центрирование убрано (1.12.18): картинка и текст
	   начинаются с одной линии — при центрировании верх изображения
	   опускался ниже первой строки и раскладка читалась криво. */
	.ht-card__media {
		flex: 0 0 var(--ht-card-article-img);
		inline-size: auto;
		align-self: start;
	}

	/* Тело карточки тоже стартует сверху, без собственного отступа
	   у первого элемента — иначе заголовок уезжает выше картинки. */
	.ht-card--article .ht-card__body {
		align-self: start;
	}

	.ht-card--article .ht-card__body > :first-child {
		margin-block-start: 0 !important;
	}
}