/* ============================================================
   FAQ
   ============================================================ */
.faq {
	padding: 100px 0;
}

.faq__inner {
	padding: 0 62px;
	display: flex;
	flex-direction: column;
	gap: 50px;
	align-items: center;
}

.faq__title {
	font-size: var(--h2-size);
	line-height: var(--h2-line-height);
	font-weight: var(--h2-weight);
	color: #1f2937;
	text-align: center;
}

/* List */
.faq__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

/* Item */
.faq__item {
	background: var(--fon);
	border-radius: 10px;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.05);
	overflow: hidden;
}

/* Question button */
.faq__question {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 28px 24px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-base);
	font-size: 24px;
	line-height: 130%;
	font-weight: 500;
	color: #1f2937;
	transition: color 0.2s;
}

.faq__question:hover {
	color: var(--main);
}

.faq__question[aria-expanded="true"] {
	color: var(--main);
}

/* Иконка +/× */
.faq__icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.faq__icon svg {
	transition: transform 0.3s ease;
}

.faq__icon-line {
	transition: transform 0.3s ease, opacity 0.3s ease;
	transform-origin: center;
}

/* При открытии — вертикальная линия исчезает (крест → минус) */
.faq__question[aria-expanded="true"] .faq__icon-line--v {
	transform: rotate(90deg);
	opacity: 0;
}

.faq__question[aria-expanded="true"] .faq__icon-line--h path,
.faq__question[aria-expanded="true"] .faq__icon {
	color: var(--main);
}

.faq__question[aria-expanded="true"] .faq__icon-line {
	stroke: var(--main);
}

/* Answer */
.faq__answer {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.35s ease;
}

.faq__answer:not([hidden]) {
	max-height: 600px;
}

.faq__answer[hidden] {
	display: block !important; /* переопределяем hidden чтобы анимация работала */
	max-height: 0;
}

.faq__answer-inner {
	padding: 0 24px 28px;
	font-size: 24px;
	line-height: 130%;
	font-weight: 500;
	color: #1f2937;
}

.faq__answer-inner p { margin-bottom: 12px; }
.faq__answer-inner p:last-child { margin-bottom: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	.faq__inner { padding: 0; }
	.faq__question { font-size: 20px; padding: 20px 16px; }
	.faq__answer-inner { padding: 0 16px 20px; font-size: 18px; }
}

@media (max-width: 600px) {
	.faq { padding: 60px 0; }
	.faq__title { font-size: 32px; }
	.faq__question { font-size: 18px; }
}