/**
 * Ride Panels — Find Your Ride панелями (главная, пакет правок №2, п. 2.3).
 *
 * Значения — из ТЗ пакета и прототипа `find-your-ride-панели.html`:
 * контейнер 560, скругление 14, промежуток 12; раскрытая панель — 2,6 доли.
 * Ширина 0,65 с, фото 0,9 с, текст выезжает на 14 с задержкой 0,18 с,
 * кривая cubic-bezier(.22, .8, .2, 1). Шапка секции — как у find-ride.
 *
 * До 1023 px панели столбиком (ТЗ). Планшетной базы в проекте нет, поэтому
 * на 768–1023 высоты и кегли панелей — фиксированные значения ТЗ (решение
 * пользователя 2026-10-06), на ≤767 — резина от базы 375.
 *
 * @package AJ1MOTO.COM
 */

.ride-panels {
	--panels-ease: cubic-bezier(0.22, 0.8, 0.2, 1);

	padding-top: var(--space-60);
	padding-bottom: var(--space-60);
	background: var(--color-white);
}

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

/* ===== Заголовок (как find-ride) ===== */

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

.ride-panels__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);
}

.ride-panels__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);
}

/* ===== Панели ===== */

.ride-panels__list {
	display: flex;
	gap: var(--space-12);
	height: calc(560 / var(--vw-base) * 100vw);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ride-panels__panel {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	border-radius: var(--radius-14);
	background: var(--color-dark);
	overflow: hidden;
	isolation: isolate;
	transition: flex-grow 0.65s var(--panels-ease);
}

.ride-panels__panel.-active {
	flex-grow: 2.6;
}

/* Свёрнутая: обесцвечено на 35%, яркость 55%, увеличено на 12%. */
.ride-panels__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.35) brightness(0.55);
	transform: scale(1.12);
	transition: transform 0.9s var(--panels-ease), filter 0.9s var(--panels-ease);
}

.ride-panels__panel.-active .ride-panels__image {
	filter: grayscale(0) brightness(0.95);
	transform: scale(1);
}

/* Тёмный градиент сверху и снизу: у раскрытой — плотнее внизу, под текстом. */
.ride-panels__shade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, var(--color-dark-55) 0%, var(--color-dark-00) 45%, var(--color-dark-35) 100%);
}

.ride-panels__panel.-active .ride-panels__shade {
	background: linear-gradient(180deg, var(--color-dark-35) 0%, var(--color-dark-00) 30%, var(--color-dark-00) 50%, var(--color-dark-85) 100%);
}

/* Вся панель — кнопка раскрытия; текст и ссылка лежат над ней (z-index 3). */
.ride-panels__hit {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	text-align: left;
	color: inherit;
	background: transparent;
	cursor: pointer;
}

.ride-panels__hit:focus-visible {
	border-radius: var(--radius-14);
	outline: calc(3 / var(--vw-base) * 100vw) solid var(--color-accent);
	outline-offset: calc(-3 / var(--vw-base) * 100vw);
}

.ride-panels__panel-title {
	position: absolute;
	top: calc(26 / var(--vw-base) * 100vw);
	right: var(--space-20);
	left: var(--space-28);
	font-family: var(--font-display);
	font-size: var(--fs-28);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	letter-spacing: calc(-0.4 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-white);
	transition: font-size 0.5s var(--panels-ease);
}

.ride-panels__panel.-active .ride-panels__panel-title {
	font-size: var(--fs-46);
}

.ride-panels__body {
	position: absolute;
	right: var(--space-28);
	bottom: calc(34 / var(--vw-base) * 100vw);
	left: var(--space-28);
	z-index: 3;
	max-width: calc(460 / var(--vw-base) * 100vw);
	opacity: 0;
	pointer-events: none;
	transform: translateY(var(--space-14));
	transition: opacity 0.45s var(--panels-ease) 0.05s, transform 0.55s var(--panels-ease) 0.05s;
}

.ride-panels__panel.-active .ride-panels__body {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	transition-delay: 0.18s;
}

.ride-panels__text {
	margin-bottom: var(--space-22);
	font-size: var(--fs-16);
	line-height: var(--lh-155);
	color: var(--color-white-88);
}

/* ===== До 1023: столбиком (ТЗ). 768–1023 — фиксированные значения ТЗ. ===== */

@media (max-width: 1023px) {
	.ride-panels__list {
		flex-direction: column;
		gap: 10px;
		height: auto;
	}

	.ride-panels__panel {
		flex: 0 0 auto;
		height: 82px;
		transition: height 0.5s var(--panels-ease);
	}

	.ride-panels__panel.-active {
		height: 400px;
	}

	.ride-panels__panel-title {
		top: 24px;
		left: 20px;
		font-size: 26px;
	}

	.ride-panels__panel.-active .ride-panels__panel-title {
		font-size: 40px;
	}

	.ride-panels__body {
		right: 20px;
		bottom: 24px;
		left: 20px;
		max-width: 460px;
	}

	.ride-panels__text {
		margin-bottom: 22px;
		font-size: 16px;
	}
}

/* ===== ≤767: та же раскладка, резина от базы 375 ===== */

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

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

	.ride-panels__head {
		gap: var(--space-15);
	}

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

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

	.ride-panels__list {
		gap: var(--space-10);
	}

	.ride-panels__panel {
		height: calc(82 / var(--vw-base) * 100vw);
	}

	.ride-panels__panel.-active {
		height: calc(400 / var(--vw-base) * 100vw);
	}

	.ride-panels__panel-title {
		top: var(--space-24);
		left: var(--space-20);
		font-size: var(--fs-26);
	}

	.ride-panels__panel.-active .ride-panels__panel-title {
		font-size: calc(40 / var(--vw-base) * 100vw);
	}

	.ride-panels__body {
		right: var(--space-20);
		bottom: var(--space-24);
		left: var(--space-20);
		max-width: none;
	}

	.ride-panels__text {
		margin-bottom: var(--space-16);
		font-size: var(--fs-15);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ride-panels__panel,
	.ride-panels__image,
	.ride-panels__panel-title,
	.ride-panels__body {
		transition: none;
	}
}