/* FAQ */

/*:root {
	--bg: #0c0c0d;
	--card: #131316;
	--text: #e8e8ea;
	--muted: #b3b3b7;
	--accent: #6dd5fa;
	--ring: rgba(109,213,250,.35);
	--radius: 10px;
	--shadow: 0 10px 30px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #fafafa;
		--card: #ffffff;
		--text: #121317;
		--muted: #5b5f66;
		--accent: #0ea5e9;
		--ring: rgba(14,165,233,.22);
		--shadow: 0 5px 10px rgba(2,6,23,.05);
	}
}*/

:root {
	--bg: #fafafa;
	--card: #ffffff;
	--text: #121317;
	--muted: #5b5f66;
	--accent: #0ea5e9;
	--ring: rgba(14,165,233,.22);
	--shadow: 0 5px 10px rgba(2,6,23,.05);
}

.faq__header {
	text-align: center;
	margin-bottom: clamp(18px, 2.8vw, 28px);
}

.faq__title {
	font-size: clamp(26px, 2.6vw, 40px);
	line-height: 1.1;
	margin: 0 0 8px;
	letter-spacing: -0.02em;
}

.faq__subtitle {
	margin: 0;
	color: var(--muted);
	font-size: clamp(14px, 1.6vw, 16px);
}

.faq__list {
	display: grid;
	gap: 14px;
	margin-top: clamp(10px, 2vw, 16px);
}

.faq-item {
	background: var(--card);
	border: 1px solid color-mix(in oklab, var(--text) 8%, transparent);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: clip;
	transition: all .5s ease;
}

.faq-item__heading {
	margin: 0;
}

.faq-item__trigger {
	all: unset;
	display: flex;
	max-width: calc(100% - 44px);
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	outline: 0 !important;
}

.faq-item__trigger:focus-visible {
	outline: 3px solid var(--ring);
	outline-offset: 4px;
	border-radius: calc(var(--radius) - 4px);
}

.faq-item__q {
	font-size: clamp(16px, 2vw, 18px);
	font-weight: 650;
	line-height: 1.3;
}

.faq-item__icon {
	flex: 0 0 auto;
	transition: transform .25s ease;
	opacity: .9;
}

.faq-item__panel {
	padding: 0 22px 18px;
	color: var(--muted);
	font-size: 15.5px;
	line-height: 1.65;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s ease;
}

.faq-item__panel > * {
	overflow: hidden;
    /* внутренний контейнер для плавного открытия */;
}

.faq-item__panel[data-open="true"] {
	grid-template-rows: 1fr;
}

.faq-item[aria-live="polite"] .faq-item__icon {
	transform: rotate(45deg);
 /* плюс -> крест */;
}

section.faq {
    padding: 40px 0;
}

.faq-item__panel p {
    margin: 0;
}

article.faq-item[aria-live="polite"] {
    border-color: #ffc869;
}

.faq-item * {
    transition: all .5s ease;
}

article.faq-item[aria-live="polite"] span.faq-item__q {
    color: #ffc869;
}
  
/* Удобные расстояния на больших экранах */
@media (min-width: 960px) {
	.faq__list {
		gap: 16px;
	}

	.faq-item__trigger {
		padding: 20px 24px;
		max-width: calc(100% - 48px);
	}

	.faq-item__panel {
		padding: 0 24px 20px;
	}
}
  
  /* Небольшая поддержка “reduce motion” */
@media (prefers-reduced-motion: reduce) {
	.faq-item__panel {
		transition: none;
	}

	.faq-item__icon {
		transition: none;
	}
}