/*
 * Таблица сравнения сумок на хабе «Сумка в роддом» - шорткод [pf_bag_compare] (T-113b, доработка
 * по ревью, class-pf-bag-compare.php). Подключается ТОЛЬКО когда шорткод реально выводится на
 * странице (PF_Bag_Compare::maybe_enqueue_assets) - не грузится ни на странице сумки, ни где-либо
 * ещё. Только токены ACSS (var(--...)), hex/px запрещены кроме 1px/0 (AGENTS.md).
 */

.pf-bag-hub__compare-wrap {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	container-type: inline-size;
	mask-image: linear-gradient(to right, var(--black) calc(100% - var(--space-l)), transparent);
	-webkit-mask-image: linear-gradient(to right, var(--black) calc(100% - var(--space-l)), transparent);
}

/* Долистали таблицу до конца (JS в шорткоде переключает класс по scrollLeft) - затухание справа
   больше не нужно, показывать нечего. */
.pf-bag-hub__compare-wrap.is-end {
	mask-image: none;
	-webkit-mask-image: none;
}

.pf-bag-hub__compare-table {
	border-collapse: collapse;
	inline-size: 100%;
	min-inline-size: max-content;
}

/* T-114 п.5 (по замечанию человека): первая колонка была слишком широкой (9em) на мобильном -
   сужена до ~7.5em с переносом слов (overflow-wrap на самой ячейке, см. .pf-bag-hub__compare-cell
   ниже), остальные колонки - ~11em (min-inline-size у .pf-bag-hub__compare-cell ниже). */
.pf-bag-hub__compare-col--param {
	inline-size: 7.5em;
}

.pf-bag-hub__compare-caption {
	font-size: var(--text-s);
	color: var(--text-dark-muted);
	text-align: left;
	padding-block-end: var(--space-xs);
}

.pf-bag-hub__compare-cell {
	padding: var(--space-xs) var(--space-s);
	font-size: var(--text-s);
	text-align: left;
	vertical-align: top;
	border-block-end: 1px solid var(--neutral-light);
	background: var(--white);
	min-inline-size: 11em;
	max-inline-size: 22em;
	overflow-wrap: break-word;
}

.pf-bag-hub__compare-cell--head {
	font-weight: 700;
	background: var(--neutral-ultralight);
}

/* T-114 п.5: узкая первая колонка (~7.5em, перенос слов) - было 9em/10em, наравне с остальными
   (11em), из-за чего на мобильном подпись «Параметр» наезжала на заголовок сумки визуально
   (обе колонки одинаковой ширины при sticky выглядели слитно). */
.pf-bag-hub__compare-cell--param {
	font-weight: 700;
	min-inline-size: 7.5em;
	max-inline-size: 7.5em;
}

/* T-114 п.5 (по замечанию человека): sticky первой колонки - ТОЛЬКО на достаточно широком
   контейнере (>= 48em). На узком мобильном экране обёртка сама узкая (inline-size обёртки ~ inline-
   size экрана), а таблица шире контейнера (min-inline-size: max-content выше) - sticky-колонка
   в таком масштабе перекрывает и просвечивает сквозь заголовок соседней сумки при горизонтальной
   прокрутке (замечание человека - «текст просвечивает»). На широком контейнере sticky полезен
   (первая колонка «Параметр» остаётся на виду при долгой горизонтальной прокрутке многих сумок),
   на узком - выключен полностью, обычная прокрутка всей таблицы целиком. */
@container (width >= 48em) {
	.pf-bag-hub__compare-cell--sticky {
		position: sticky;
		inset-inline-start: 0;
		z-index: 1;
	}
}

/* Достаточно широкий контейнер (десктоп, 4-5 сумок) - таблица помещается на всю ширину без
   горизонтального скролла обёртки (fixed-раскладка вместо auto+max-content). Идёт ПОСЛЕ узких
   правил выше по файлу (T-114 п.5: .pf-bag-hub__compare-cell--param и .pf-bag-hub__compare-cell
   получили свои min/max-inline-size) - при равной специфичности (один класс) побеждает то, что
   позже по каскаду, поэтому сброс здесь должен идти последним, чтобы десктоп остался «как есть»
   (task «на десктопе - как сейчас»), а не унаследовал узкую 7.5em ширину параметра. */
@container (width >= 64em) {
	.pf-bag-hub__compare-table {
		table-layout: fixed;
		min-inline-size: 0;
	}
	.pf-bag-hub__compare-cell,
	.pf-bag-hub__compare-cell--param {
		min-inline-size: 0;
		max-inline-size: none;
	}
	/* col - прежняя (до T-114 п.5) ширина 9em: под table-layout:fixed ширина <col> задаёт
	   пропорциональную долю колонки, поэтому мобильное сужение до 7.5em (см. правило выше) не
	   должно менять раскладку на десктопе - «на десктопе - как сейчас» из задания. */
	.pf-bag-hub__compare-col--param {
		inline-size: 9em;
	}
}

.pf-bag-hub__compare-cell--recommended {
	background: color-mix(in oklch, var(--secondary) 12%, var(--white));
}

.pf-bag-hub__compare-foot-cell {
	padding-block-start: var(--space-s);
	border-block-end: 0;
}

.pf-bag-hub__compare-head-link {
	display: inline-flex;
	align-items: center;
	column-gap: .35em;
	color: inherit;
	text-decoration: none;
}
.pf-bag-hub__compare-head-link:hover,
.pf-bag-hub__compare-head-link:focus-visible {
	text-decoration: underline;
}
.pf-bag-hub__compare-head-link:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.pf-bag-hub__compare-heart {
	inline-size: 1em;
	block-size: 1em;
	color: var(--secondary);
	flex-shrink: 0;
}
.pf-bag-hub__compare-heart path {
	fill: none;
}

/* .pf-bag-hub__card-btn (кнопка «Собрать» в tfoot) - переиспользован существующий Bricks
   global-класс карточек хаба (tools/t113/build.py), свой стиль здесь не нужен: класс уже
   используется в дереве Bricks той же страницы, поэтому его правило уже есть в скомпилированном
   CSS страницы (post-222602.min.css). */