/* ==========================================================================
   Н-ИНФО — раскладка: контейнер, ритм секций, сетки
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--page-max);
	margin-inline: auto;
	padding-inline: var(--page-gutter);
}

.container--narrow {
	max-width: 1100px;
}

/* --- Ритм секций ---------------------------------------------------------
   Три уровня плотности вместо шести одинаковых блоков с hairline-
   разделителем: вес секции задаётся отступами и фоном, а не линией.
   ------------------------------------------------------------------------ */

.section {
	padding-block: var(--sp-10);
}

.section--tight {
	padding-block: var(--sp-8);
}

.section--loose {
	padding-block: var(--sp-16);
}

.section--sunken {
	background: var(--bg-subtle);
}

.section--brand {
	background: var(--brand-soft);
}

.section + .section--sunken,
.section--sunken + .section {
	position: relative;
}

/* --- Заголовок секции --------------------------------------------------- */

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-5);
	margin-bottom: var(--sp-6);
}

.section-head__text {
	min-width: 0;
}

.section-head__title {
	margin-top: var(--sp-2);
	font-size: var(--fs-2xl);
}

.section-head__sub {
	margin-top: var(--sp-2);
	color: var(--text-muted);
	font-size: var(--fs-base);
	max-width: 62ch;
}

.section-head__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	flex: none;
	padding: var(--sp-2) var(--sp-3);
	margin-right: calc(var(--sp-3) * -1);
	border-radius: var(--r-sm);
	color: var(--brand-text);
	font-size: var(--fs-sm);
	font-weight: 650;
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease-out),
		gap var(--dur-fast) var(--ease-out);
}

.section-head__link:hover {
	background: var(--brand-soft);
	gap: var(--sp-2);
}

/* --- Сетки -------------------------------------------------------------- */

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

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

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

.grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1180px) {
	.grid--5 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.grid--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	:root {
		--page-gutter: var(--sp-4);
	}

	.section {
		padding-block: var(--sp-8);
	}

	.section--loose {
		padding-block: var(--sp-10);
	}

	.section-head {
		align-items: flex-start;
		gap: var(--sp-3);
	}

	.section-head__title {
		font-size: var(--fs-xl);
	}

	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Горизонтальные карточки (логотип + текст + рейтинг) в две колонки на
   360px обрезают и название, и звёзды — ниже 620px они идут в один ряд.
   Недвижимость и авто это правило не задевает: у них карусель ниже. */
@media (max-width: 620px) {
	.grid--2 {
		grid-template-columns: 1fr;
	}
}

/* --- Карусель вместо display:none --------------------------------------
   Текущий шаблон на мобильных прячет карточки правилами вида
   .portal-product:nth-child(n+4){display:none}. Здесь сетка ниже 900px
   превращается в горизонтальный список со snap: доступен весь контент.

   Блок стоит последним и селектором .grid.grid--scroll намеренно: иначе
   его перебивают более поздние медиазапросы вроде .grid--4 на 760px, и
   колоночный auto-flow накладывается на явные колонки — карточки
   наезжают друг на друга.
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	.grid.grid--scroll {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(var(--scroll-item, 210px), 1fr);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: var(--sp-2);
		margin-inline: calc(var(--page-gutter) * -1);
		padding-inline: var(--page-gutter);
		overscroll-behavior-x: contain;
	}

	.grid--scroll::-webkit-scrollbar {
		display: none;
	}

	.grid--scroll > * {
		scroll-snap-align: start;
	}
}