/**
 * FAQ — аккордеон; сейчас — раскрывающиеся блоки страницы модели (model-blocks.php).
 *
 * Секция FAQ страницы «Shipping & Payment» удалена в задаче 10 ТЗ V4, стили
 * и js/faq.js остались компонентом аккордеона.
 *
 * Значения из макета Figma: desktop узел 10300:2874, mobile узел 10300:5361.
 * Таблица значений — в _workflow/tasks/step-shipping-faq.md.
 *
 * Плавность аккордеона — анимация grid-template-rows (0fr → 1fr): высоту
 * считает браузер, max-height не используется (решение пользователя).
 *
 * @package AJ1MOTO.COM
 */

.faq {
	padding-top: var(--space-60);
	padding-bottom: var(--space-60);
	background: var(--color-grey-93);
}

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

/* ===== Заголовочный блок ===== */

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

.faq__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	line-height: var(--lh-115); /* макет: бокс 15 при fs13 */
	letter-spacing: calc(3 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent);
}

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

/* ===== Список ===== */

.faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
}

.faq__item {
	padding: var(--space-25) var(--space-27);
	border-radius: var(--radius-14);
	background: var(--color-white);
}

/* ===== Вопрос (кнопка) ===== */

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-20);
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
	background: none;
	cursor: pointer;
}

.faq__question-text {
	font-family: var(--font-display);
	font-size: var(--fs-26);
	font-weight: var(--fw-display);
	line-height: var(--lh-119); /* макет: бокс 31 при fs26 */
	letter-spacing: var(--ls-display);
	color: var(--color-dark);
	transition: color var(--transition-base);
}

.faq__question:hover .faq__question-text,
.faq__question:focus-visible .faq__question-text {
	color: var(--color-accent);
}

.faq__icon {
	width: var(--space-25);
	aspect-ratio: 1;
	flex-shrink: 0;
	color: var(--color-accent);
}

/*
 * Плюс → минус: вертикальная черта сжимается. Селекторами внутрь <use>
 * не попасть (shadow DOM), поэтому transform живёт в самом <symbol>
 * и управляется переменной --icon-plus-v — переменные наследуются внутрь.
 */
.faq__item.-open .faq__icon {
	--icon-plus-v: 0;
}

/* ===== Ответ ===== */

/*
 * Схлопывание строкой грида: 0fr → 1fr анимируется, высоту вычисляет
 * браузер — работает при любой длине ответа.
 */
.faq__answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows var(--transition-base);
}

.faq__item.-open .faq__answer-wrap {
	grid-template-rows: 1fr;
}

/* Пункт выше нажатого схлопывается без анимации — js/faq.js держит заголовок под пальцем. */
.faq__item.-instant,
.faq__item.-instant * {
	transition: none;
}

/*
 * Обрезающий слой: при 0fr его высота равна нулю. Интервал вопрос→ответ —
 * padding вложенного элемента, иначе он не схлопнулся бы вместе с областью.
 */
.faq__answer {
	min-height: 0;
	overflow: hidden;
}

.faq__answer-inner {
	padding-top: var(--space-20);
	font-size: var(--fs-14);
	line-height: var(--lh-157); /* макет: бокс 22 на строку при fs14 */
	color: var(--color-grey-31);
}

@media (prefers-reduced-motion: reduce) {
	.faq__answer-wrap,
	.faq__question-text {
		transition: none;
	}
}

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

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

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

	.faq__eyebrow {
		font-size: var(--fs-10);
		line-height: var(--lh-130); /* макет: бокс 13 при fs10 (узел 10300:5363) */
		letter-spacing: calc(2 / var(--vw-base) * 100vw);
	}

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

	.faq__item {
		padding: var(--space-18);
		border-radius: var(--radius-12);
	}

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

	.faq__question-text {
		font-size: var(--fs-24);
		line-height: var(--lh-120); /* макет: бокс 29 при fs24 (узел 10300:5369) */
	}

	/* Решение пользователя: единый размер 22 (в макете у раскрытой карточки 25). */
	.faq__icon {
		width: var(--space-22);
	}
}