/*
 * ПОСАДОЧНАЯ, БЛОК 6 — РЕЗУЛЬТАТЫ.
 * Макет: output/design/landing-v2/all-screens/07-results.png.
 * Зависит от landing/tokens.css и landing/base.css.
 *
 * КОМПОЗИЦИЯ — РАЗВОРОТ НА ОДНОМ ПОЛЕ. Узкая половина слева держит номер
 * раздела, тезис и действие; широкая справа отдана цифрам. Обе лежат на
 * общем графите: в макете ни бордовой, ни светлой панели здесь нет.
 *
 * ЕДИНСТВЕННАЯ ЗАЛИВКА — КОЛОНКА «ЦЕНА ЗАЯВКИ». Ради этого числа таблица и
 * существует, поэтому только оно получает бордовую подложку и алый набор.
 * Раньше эту работу делала светлая панель во всю половину экрана — и цифра
 * тонула среди четырёх соседних колонок того же веса.
 *
 * УЗКИЙ ЭКРАН — КАРТОЧКИ, А НЕ ПРОКРУТКА ВБОК. Макет:
 * output/design/landing-v2/mobile/advertising-results-mobile.png.
 * Таблица в 40rem на телефоне всё равно не сравнивала строки: в окне
 * помещались ниша и одна колонка, и цену заявки — ради которой блок и
 * существует — нужно было ещё найти, пролистав вбок. В карточке каждый
 * показатель стоит на ОДНОМ и том же месте во всех проектах (цена всегда
 * внизу справа, на бордовой подложке), поэтому сравнение идёт взглядом
 * сверху вниз по ленте. Разметка остаётся таблицей: карточками её делает
 * только CSS, а семантику держат явные роли (см. lp-results.php).
 */

.lp .lp-results__split {
	--lp-split-cols: minmax(0, 31%) minmax(0, 1fr);
}

/* ---------------------------------------------------------------------- */
/* Левая половина                                                         */
/* ---------------------------------------------------------------------- */

.lp .lp-results__side {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--lp-space-lg);
}

.lp .lp-results__draft {
	--lp-draft-line-y: 17%;
	--lp-draft-line-w: min(60%, 20rem);
	--lp-draft-cross-x: 62%;
	--lp-draft-cross-y: 8%;
}

/*
 * Номер раздела в рамке. Слово «SECTION» и число стоят одной строкой, но
 * рамка обводит только число — в макете обведено именно оно.
 */
.lp .lp-results__section {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: var(--lp-space-md);
	font-size: var(--lp-text-micro);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-crimson);
}

.lp .lp-results__section-num {
	display: grid;
	min-width: 3.75rem;
	padding: 0.5rem 0.85rem;
	place-items: center;
	border: 1px solid var(--lp-crimson);
	font-family: var(--lp-font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.5rem);
	font-weight: var(--lp-display-weight);
	line-height: 1;
	letter-spacing: 0.02em;
}

.lp .lp-results__title,
.lp .lp-results__text,
.lp .lp-results__note,
.lp .lp-results__cta {
	position: relative;
	z-index: 1;
}

.lp .lp-results__title {
	max-width: none;
	font-size: clamp(2rem, 1.35rem + 2.1vw, 3.3rem);
	line-height: 0.94;
	text-wrap: initial; /* переносы задаёт редактор в ACF */
}

.lp .lp-results__title-line {
	display: block;
}

/*
 * margin: 0 обязателен. У <hr> браузерные поля auto, а в колонке-флексе
 * авто-поле по поперечной оси центрирует элемент: черта уезжала на середину
 * колонки, хотя в обоих макетах она стоит под первой буквой заголовка.
 */
.lp .lp-results__rule {
	width: 4rem;
	margin: 0;
	background-color: var(--lp-crimson);
}

.lp .lp-results__text {
	max-width: 22em;
}

.lp .lp-results__note {
	max-width: 24em;
	color: var(--lp-ink-muted);
}

.lp .lp-results__cta {
	margin-top: var(--lp-space-md);
}

/* ---------------------------------------------------------------------- */
/* Правая половина: таблица                                               */
/* ---------------------------------------------------------------------- */

.lp .lp-results__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--lp-space-lg);
}

/*
 * Область прокрутки. tabindex в разметке даёт клавиатуре доступ к таблице,
 * когда она шире экрана; без него прокрутить её можно было бы только мышью.
 */
.lp .lp-results__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

/* Подпись в ячейке нужна только карточке на телефоне — см. ниже. */
.lp .lp-results__cell-label {
	display: none;
}

.lp .lp-results__table {
	width: 100%;
	min-width: 40rem;
	border-collapse: collapse;
	text-align: left;
}

.lp .lp-results__th {
	padding: 0 var(--lp-space-md) var(--lp-space-md);
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--lp-ink-muted);
	border-bottom: 1px solid var(--lp-line-strong);
}

.lp .lp-results__th--num {
	text-align: right;
}

.lp .lp-results__th:first-child {
	padding-left: 0;
}

/*
 * Заголовок главной колонки набран алым и стоит по центру своей заливки:
 * он подписывает не строку, а весь выделенный столбец.
 */
.lp .lp-results__th--key {
	padding-inline: var(--lp-space-lg);
	text-align: center;
	color: var(--lp-crimson);
}

.lp .lp-results__niche,
.lp .lp-results__cell {
	padding: var(--lp-space-md);
	border-bottom: 1px solid var(--lp-line);
	vertical-align: middle;
}

.lp .lp-results__row:last-child .lp-results__niche,
.lp .lp-results__row:last-child .lp-results__cell {
	border-bottom: none;
}

.lp .lp-results__niche {
	padding-left: 0;
	font-size: var(--lp-text-body);
	font-weight: var(--lp-weight-regular);
	color: var(--lp-ink);
}

.lp .lp-results__cell {
	text-align: right;
}

/*
 * ГЛАВНАЯ КОЛОНКА. Заливка замешана из токенов — бордовая панель,
 * растворённая в поле; новой краски в палитре не появляется. Число на ней
 * набрано алым: 5.05:1 на графите и не хуже на этой подложке.
 */
.lp .lp-results__th--key,
.lp .lp-results__cell--key {
	background: color-mix(in srgb, var(--lp-burgundy-panel) 34%, var(--lp-field));
}

.lp .lp-results__cell--key {
	padding-inline: var(--lp-space-lg);
	text-align: center;
}

/*
 * Цифры моноширинные и табличные: только так разряды встают друг под другом
 * и колонку можно сравнивать взглядом, а не читать по одной строке.
 */
.lp .lp-results__num {
	font-family: var(--lp-font-num);
	font-size: var(--lp-text-body);
	font-variant-numeric: tabular-nums;
	color: var(--lp-ink);
	white-space: nowrap;
}

.lp .lp-results__num--key {
	font-family: var(--lp-font-display);
	font-size: clamp(1.4rem, 1rem + 1.2vw, 2.15rem);
	font-weight: var(--lp-display-weight);
	letter-spacing: 0.01em;
	color: var(--lp-crimson);
}

/* Единица измерения мельче числа: сравнивают числа, а не рубли. */
.lp .lp-results__unit {
	margin-left: 0.35em;
	font-family: var(--lp-font-num);
	font-size: var(--lp-text-label);
	color: var(--lp-ink-muted);
}

/* Знак рубля рядом с главной цифрой держит её цвет и кегль. */
.lp .lp-results__cell--key .lp-results__unit {
	font-family: var(--lp-font-display);
	font-size: clamp(1.1rem, 0.85rem + 0.8vw, 1.6rem);
	color: var(--lp-crimson);
}

/* --- Подсветка строки под курсором ------------------------------------- */

/*
 * Строку таблицы легко потерять взглядом: пять колонок, и глаз, дойдя до
 * последней, уже не уверен, из какой ниши эта цифра. Подсветка держит строку
 * целиком, поэтому ставится на ЯЧЕЙКИ, а не на <tr>: у ряда таблицы своего
 * фона по сути нет, и заливка ячейки главной колонки перекрыла бы его.
 *
 * Реакция есть и на КЛАВИАТУРНЫЙ проход: таблица обёрнута в прокручиваемую
 * область с tabindex, по ней ходят с клавиатуры, и подсветка только под
 * мышью оставила бы таких читателей без ориентира.
 *
 * Меняется цвет, а не размер: строка таблицы, подпрыгивающая под курсором,
 * сдвинула бы соседние и заставила глаз заново искать колонку.
 */
.lp .lp-results__niche,
.lp .lp-results__cell {
	transition: background-color var(--lp-duration-fast) var(--lp-ease-out);
}

.lp .lp-results__row:hover .lp-results__niche,
.lp .lp-results__row:hover .lp-results__cell,
.lp .lp-results__row:focus-within .lp-results__niche,
.lp .lp-results__row:focus-within .lp-results__cell {
	background-color: color-mix(in srgb, var(--lp-ink) 6%, transparent);
}

/*
 * У главной колонки своя бордовая заливка — её подсветка не заменяет,
 * а усиливает: иначе выделенный столбец на активной строке пропадал бы.
 */
.lp .lp-results__row:hover .lp-results__cell--key,
.lp .lp-results__row:focus-within .lp-results__cell--key {
	background-color: color-mix(in srgb, var(--lp-burgundy-panel) 52%, var(--lp-field));
}

/* ---------------------------------------------------------------------- */
/* Сноска                                                                 */
/* ---------------------------------------------------------------------- */

.lp .lp-results__footnote {
	max-width: 48em;
	color: var(--lp-ink-muted);
}

/* ---------------------------------------------------------------------- */
/* Телефон: строки таблицы становятся карточками проектов                 */
/* ---------------------------------------------------------------------- */

/*
 * Карточка: название ниши сверху, под ним сетка 2×2 —
 *   конверсия | бюджет
 *   заявки    | цена заявки
 * Порядок ячеек в строке таблицы ровно такой, поэтому сетка складывается
 * сама, без перестановок. Слева и между колонками — тонкие вертикали: они
 * держат четыре числа одной группой, а бордовая подложка цены остаётся
 * единственным ярким местом карточки, как и на десктопе.
 */
@media (max-width: 47.99em) {

	/*
	 * Половины разворота на телефоне идут одна за другой, и полный отступ
	 * секции у каждой давал бы между кнопкой и таблицей пустую полосу
	 * в полэкрана. Здесь это один блок — с отступом как между абзацами.
	 */
	.lp .lp-results__side {
		gap: 1rem;
		padding-bottom: 1.75rem;
	}

	.lp .lp-results__panel {
		gap: 1.25rem;
		padding-top: 0;
	}

	/*
	 * Строка раздела с чертёжной линией и перекрестием — та же фактура, что
	 * .lp-draft рисует на широком экране (base.css), только привязанная к
	 * самой строке: на телефоне общий слой выключен.
	 */
	.lp .lp-results__section {
		align-self: stretch;
		margin-bottom: 0.4rem;
		padding-bottom: 0.75rem;
	}

	.lp .lp-results__section::after {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 85%;
		height: 1px;
		pointer-events: none;
		content: '';
		background:
			repeating-linear-gradient(
				to right,
				var(--lp-crimson) 0 0.35rem,
				transparent 0.35rem 0.7rem
			) 2.4rem 0 / 2.1rem 1px no-repeat,
			linear-gradient(var(--lp-line-strong), var(--lp-line-strong)) 0 0 / 100% 1px no-repeat;
	}

	.lp .lp-results__section::before {
		position: absolute;
		top: -0.45rem;
		right: 0.35rem;
		width: 1.3rem;
		height: 1.3rem;
		pointer-events: none;
		content: '';
		background:
			linear-gradient(var(--lp-line-strong), var(--lp-line-strong)) center / 1px 100% no-repeat,
			linear-gradient(var(--lp-line-strong), var(--lp-line-strong)) center / 100% 1px no-repeat;
	}

	.lp .lp-results__cta {
		margin-top: 0.25rem;
	}

	.lp .lp-results__table,
	.lp .lp-results__table thead,
	.lp .lp-results__table tbody {
		display: block;
		min-width: 0;
	}

	.lp .lp-results__table thead tr {
		display: flex;
	}

	/*
	 * Из шапки таблицы на экране остаётся только «Ниша проекта» — как
	 * подпись всей ленты, с линией до края. Заголовки колонок уходят
	 * с экрана, но НЕ из разметки: по ним читалка объявляет числа в
	 * карточках, а глазам подписи дают сами ячейки.
	 */
	.lp .lp-results__th:not(.lp-results__th--niche) {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.lp .lp-results__th--niche {
		display: flex;
		flex: 1;
		align-items: center;
		gap: 0.85rem;
		padding: 0;
		border-bottom: 0;
		color: var(--lp-ink);
	}

	.lp .lp-results__th--niche::after {
		flex: 1;
		height: 1px;
		content: '';
		background-color: var(--lp-line-strong);
	}

	.lp .lp-results__row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 1.1rem 0;
		border-bottom: 1px solid var(--lp-line-strong);
	}

	.lp .lp-results__row:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.lp .lp-results__niche {
		grid-column: 1 / -1;
		padding: 0 0 0.7rem;
		border-bottom: 0;
		font-size: 1.0625rem;
		font-weight: var(--lp-weight-medium);
		line-height: 1.3;
	}

	.lp .lp-results__cell,
	.lp .lp-results__cell--key {
		padding: 0.5rem 0.9rem;
		border-bottom: 0;
		border-left: 1px solid var(--lp-line-strong);
		line-height: 1.25;
		text-align: left;
	}

	.lp .lp-results__cell-label {
		display: block;
		margin-bottom: 0.25rem;
		font-size: var(--lp-text-micro);
		font-weight: var(--lp-weight-medium);
		letter-spacing: var(--lp-tracking-label);
		text-transform: uppercase;
		color: var(--lp-ink-muted);
	}

	.lp .lp-results__num {
		font-size: 1.0625rem;
	}

	.lp .lp-results__cell--key .lp-results__cell-label {
		color: var(--lp-crimson);
	}

	.lp .lp-results__num--key {
		font-size: 1.85rem;
		line-height: 1;
	}

	.lp .lp-results__cell--key .lp-results__unit {
		font-size: 1.3rem;
	}
}