/**
 * Advantages — тезисы карточками (главная «Why AJ1», тезисы Find a Dealer).
 *
 * ТЗ V4, п. 2.2: карточек стало три — сетка на три колонки.
 *
 * Значения из макета Figma: desktop узел 10300:2197 (1440×531),
 * mobile узел 10300:4472. Таблица — _workflow/tasks/step-home-advantages.md §3.
 *
 * @package AJ1MOTO.COM
 */

.advantages {
	padding-top: var(--space-60);
	padding-bottom: var(--space-60);
	background: var(--color-light);
}

.advantages__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}

/* ===== Заголовок ===== */

.advantages__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.advantages__head-intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.advantages__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	letter-spacing: calc(3 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent);
}

.advantages__title {
	font-family: var(--font-display);
	font-size: var(--fs-52);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	color: var(--color-dark);
}

.advantages__lead {
	width: calc(326 / var(--vw-base) * 100vw);
	max-width: calc(360 / var(--vw-base) * 100vw);
	font-size: var(--fs-16);
	color: var(--color-grey-31);
}

/* ===== Карточки ===== */

.advantages__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-20);
}

/* Четыре карточки в ряд (About, Our Values — ТЗ V4, п. 6.4): шаблон передаёт columns = 4. */
.advantages.-cols-4 .advantages__cards {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Пять в ряд (Distributors, Why AJ1 — ТЗ V4, п. 7.1): колонка ~253px, внутренние поля уже. */
.advantages.-cols-5 .advantages__cards {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--space-16);
}

.advantages.-cols-5 .advantages__card {
	padding: var(--space-23) var(--space-22) var(--space-25);
}

.advantages.-cols-5 .advantages__card-title {
	font-size: var(--fs-24);
}

.advantages__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-15);
	min-height: calc(230 / var(--vw-base) * 100vw);
	padding: var(--space-25) var(--space-27) var(--space-27);
	border-radius: var(--radius-14);
	background: var(--color-white);
}

.advantages__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(48 / var(--vw-base) * 100vw);
	aspect-ratio: 1;
	border: calc(1 / var(--vw-base) * 100vw) solid var(--color-accent-30);
	border-radius: var(--radius-10);
	color: var(--color-accent);
	background: var(--color-accent-10);
}

.advantages__card-glyph {
	width: calc(24 / var(--vw-base) * 100vw);
	aspect-ratio: 1;
}

.advantages__card-title {
	font-family: var(--font-display);
	font-size: var(--fs-26);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	color: var(--color-dark);
}

.advantages__card-text {
	font-size: var(--fs-14);
	color: var(--color-grey-31);
}

/* Список в тексте карточки (Rider Project, 21.10): маркеры акцентом. */
.advantages__card-text ul {
	padding-left: var(--space-20);
	list-style: disc;
}

.advantages__card-text li + li {
	margin-top: var(--space-8);
}

.advantages__card-text li::marker {
	color: var(--color-accent);
}

/*
 * Пакет правок №2, п. 2.2: красная моно-подпись над заголовком и ссылка
 * под текстом. В пакете стилей для них нет — оформление по приёмам сайта:
 * подпись — как надзаголовки секций (mono, акцент), ссылка — как
 * «Follow AJ1 →» блока Latest (condensed, акцент, hover → тёмный).
 */
.advantages__card-cap {
	margin-bottom: calc(-7 / var(--vw-base) * 100vw);
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	line-height: var(--lh-130);
	letter-spacing: calc(1.5 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent);
}

.advantages__card-more {
	margin-top: auto;
	font-family: var(--font-condensed);
	font-size: var(--fs-16);
	font-weight: 600;
	letter-spacing: calc(1 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent);
	transition: color var(--transition-base);
}

.advantages__card-more:hover {
	color: var(--color-dark);
}

/* Точки слайдера — только на мобильном (компонент .slider-dots в base.css). */
.advantages__dots {
	display: none;
}

@media (max-width: 767px) {
	.advantages {
		padding-top: var(--space-40);
		padding-bottom: var(--space-40);
	}

	.advantages__inner {
		gap: var(--space-30);
	}

	.advantages__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-15);
	}

	.advantages__head-intro {
		gap: var(--space-15);
	}

	.advantages__eyebrow {
		font-size: var(--fs-10);
		letter-spacing: calc(2 / var(--vw-base) * 100vw);
	}

	.advantages__title {
		font-size: var(--fs-30);
	}

	.advantages__lead {
		width: 100%;
		max-width: none;
		font-size: var(--fs-15);
	}

	.advantages__cards,
	.advantages.-cols-4 .advantages__cards,
	.advantages.-cols-5 .advantages__cards {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-20);
	}

	.advantages__card,
	.advantages.-cols-5 .advantages__card {
		min-height: calc(224 / var(--vw-base) * 100vw);
		padding: var(--space-23);
		border-radius: var(--radius-12);
	}

	.advantages__card-title {
		font-size: var(--fs-24);
	}

	.advantages__card-text {
		font-size: var(--fs-15);
	}

	/*
	 * Слайдер Why AJ1 (главная, пакет правок №2, п. 2.2): нативная прокрутка
	 * со scroll-snap, карточка — 86% экрана, виден край следующей. Лента
	 * выходит за поля контейнера до краёв экрана.
	 */
	.advantages.-slider .advantages__cards {
		display: flex;
		gap: var(--space-12);
		margin-left: calc(-1 * var(--container-gutter));
		margin-right: calc(-1 * var(--container-gutter));
		padding: 0 var(--container-gutter) var(--space-4);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--container-gutter);
		scrollbar-width: none;
	}

	.advantages.-slider .advantages__cards::-webkit-scrollbar {
		display: none;
	}

	.advantages.-slider .advantages__card {
		flex: 0 0 86vw;
		scroll-snap-align: start;
	}

	.advantages__dots {
		display: flex;
		margin-top: calc(-16 / var(--vw-base) * 100vw);
	}
}