/* Аккордеон FAQ: главная (секция faq) и /vopros/. Токены в base.css */

.faq__list {
	display: grid;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.faq-item {
	background: var(--color-white);
	border: var(--border-strong);
	border-radius: var(--radius-md);
	box-shadow: 0.3rem 0.3rem 0 var(--color-ink);
	transition: box-shadow var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out), background-color var(--dur-base);
}

.faq-item:nth-child(odd) { rotate: -0.3deg; }
.faq-item:nth-child(even) { rotate: 0.3deg; }

@media (hover: hover) {
	.faq-item:hover {
		box-shadow: 0.15rem 0.15rem 0 var(--color-ink);
		translate: 0.15rem 0.15rem;
	}
}

.faq-item:has([aria-expanded='true']) {
	background: var(--color-pink);
	rotate: 0deg;
}

.faq-item__head {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.faq-item__q {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	width: 100%;
	min-height: 64px;
	padding: 0.85rem 1.1rem;
	background: none;
	border: 0;
	border-radius: inherit;
	color: inherit;
	font-family: var(--font-display);
	font-size: clamp(1.0625rem, 2vw, 1.375rem);
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}

.faq-item__num {
	flex-shrink: 0;
	color: var(--color-red-deep);
	font-size: 0.875em;
}

.faq-item__text {
	flex: 1;
	text-wrap: balance;
}

/* Плюс превращается в минус: вертикальная чёрточка схлопывается */
.faq-item__icon {
	position: relative;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	background: var(--color-red-btn);
	border: var(--border-strong);
	border-radius: 50%;
	transition: background-color var(--dur-base), rotate var(--dur-base) var(--ease-out);
}

.faq-item__icon::before,
.faq-item__icon::after {
	content: '';
	position: absolute;
	inset: 50% auto auto 50%;
	width: 1rem;
	height: 3px;
	background: var(--color-white);
	border-radius: 2px;
	translate: -50% -50%;
	transition: scale var(--dur-base) var(--ease-out);
}

.faq-item__icon::after {
	rotate: 90deg;
}

.faq-item__q[aria-expanded='true'] .faq-item__icon {
	background: var(--color-green);
	rotate: 180deg;
}

.faq-item__q[aria-expanded='true'] .faq-item__icon::after {
	scale: 1 0;
}

/* Высота раскрывается через grid-template-rows: без скачков; закрытый ответ скрыт visibility, Tab в него не попадает. Без JS всё раскрыто */
.faq-item__panel {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.35s var(--ease-out);
}

.faq-item__inner {
	min-height: 0;
	overflow: hidden;
	padding-inline: 1.1rem;
}

.js .faq-item__head:has([aria-expanded='false']) + .faq-item__panel {
	grid-template-rows: 0fr;
}

.js .faq-item__head:has([aria-expanded='false']) + .faq-item__panel .faq-item__inner {
	visibility: hidden;
	transition: visibility 0s 0.35s;
}

.faq-item__inner > :last-child {
	margin-bottom: 1.1rem;
}

.faq-item__inner p {
	max-width: 46rem;
	margin: 0 0 0.6rem;
}

.faq-item__list {
	display: grid;
	gap: 0.35rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.faq-item__list li {
	width: fit-content;
	padding: 0.2rem 0.75rem;
	background: var(--color-white);
	border: 1.5px solid var(--color-ink);
	border-radius: var(--radius-pill);
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.faq-item,
	.faq-item__icon,
	.faq-item__icon::before,
	.faq-item__icon::after,
	.faq-item__panel,
	.faq-item__inner {
		transition: none;
	}
}