/**
 * Find Your Ride — карточки назначений на главной (ТЗ V4, п. 2.3).
 *
 * Макета в Figma нет: блок собран из приёмов текущего сайта — заголовок как
 * у advantages (mono-надзаголовок акцентом, H2 display 52/30), карточка как
 * карточка каталога (светлая медиа-зона grey-95, скругление 14, рамка grey-90,
 * hover — рамка акцентом). Колонки равные по числу карточек (2–4): карточка
 * категории без моделей скрывается, и ряд должен оставаться заполненным.
 *
 * @package AJ1MOTO.COM
 */

.find-ride {
	padding-top: var(--space-60);
	padding-bottom: var(--space-60);
	background: var(--color-white);
}

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

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

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

.find-ride__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);
}

.find-ride__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);
}

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

.find-ride__cards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--space-20);
}

/* Категории AJ1 Guides: до семи карточек — 3 в ряд с переносом. */
.find-ride.-cols-3 .find-ride__cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-flow: row;
}

.find-ride__item {
	display: flex;
}

.find-ride__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: calc(1 / var(--vw-base) * 100vw) solid var(--color-grey-90);
	border-radius: var(--radius-14);
	color: var(--color-dark);
	background: var(--color-white);
	overflow: hidden;
	transition: border-color var(--transition-base);
}

.find-ride__card:hover {
	border-color: var(--color-accent);
	color: var(--color-dark);
}

.find-ride__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--color-grey-95);
	overflow: hidden;
}

.find-ride__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.find-ride__card:hover .find-ride__image {
	transform: scale(1.04);
}

.find-ride__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-10);
	flex-grow: 1;
	padding: var(--space-25) var(--space-27) var(--space-27);
}

.find-ride__card-title {
	font-family: var(--font-display);
	font-size: var(--fs-30);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
}

.find-ride__caption {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	line-height: var(--lh-150);
	letter-spacing: calc(1 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-grey-45);
}

.find-ride__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	margin-top: auto;
	padding-top: var(--space-10);
	font-family: var(--font-condensed);
	font-size: var(--fs-17);
	font-weight: 600;
	letter-spacing: calc(1 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent);
}

/* Глиф U+2192 отсутствует в latin-сабсете — стрелку рисует системный шрифт. */
.find-ride__arrow {
	font-size: var(--fs-17);
}

/* Кнопка под карточками (Distributors «Explore Our Motorcycles»). */
.find-ride__foot {
	display: flex;
	justify-content: center;
}

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

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

	.find-ride__head {
		gap: var(--space-15);
	}

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

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

	.find-ride__cards,
	.find-ride.-cols-3 .find-ride__cards {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-flow: row;
		gap: var(--space-15);
	}

	.find-ride__card {
		border-radius: var(--radius-12);
	}

	.find-ride__body {
		padding: var(--space-20) var(--space-23) var(--space-23);
	}

	.find-ride__card-title {
		font-size: var(--fs-28);
	}

	.find-ride__caption {
		font-size: var(--fs-11);
	}

	.find-ride__more {
		font-size: var(--fs-18);
	}
}