/* FAQ. Макет d_srv_12_faq / m_srv_13_230-1849_faq / открытый пункт d_comp_faq_variant. */

.faq__body {
	display: grid;
	gap: 15px;
	margin-top: 30px;
}
.faq__cols {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.faq__col { display: contents; }
.faq__item {
	order: var(--i, 0);
	background: var(--c-white);
	border-radius: 8px;
}
.faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 50px;
	padding: 15px;
	text-align: left;
	border-radius: inherit;
	transition: color 0.2s var(--ease);
}
.faq__trigger:hover .faq__q { color: var(--c-orange-dark); }
.faq__q {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.32;
	color: #2a2a2a;
}
.faq__icon {
	position: relative;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	transition: width 0.3s var(--ease), height 0.3s var(--ease), flex-basis 0.3s var(--ease), background-color 0.3s var(--ease);
}
.faq__icon::before,
.faq__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: var(--c-orange);
	border-radius: 1px;
	transform: translate(-50%, -50%);
	transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.faq__icon::before { width: 13px; height: 1.25px; }
.faq__icon::after { width: 1.25px; height: 13px; }
.faq__item.is-open .faq__icon {
	flex-basis: 40px;
	width: 40px;
	height: 40px;
	background: var(--c-orange);
}
.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after {
	background: var(--c-white);
	transform: translate(-50%, -50%) rotate(45deg);
}
.faq__a {
	padding: 0 15px 16px;
	font-size: 14px;
	line-height: 1.4;
}
.faq__more { justify-self: start; }
/* .button на ≥768 задаёт min-height: 48px позже .button--text — ссылка макета 24/21px */
.faq__more.button { min-height: 0; }
@media (min-width: 1200px) {
	.faq__more--mobile { display: none; }
	.faq__body { gap: 30px; margin-top: 40px; }
	.faq__cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 20px;
		align-items: start;
	}
	.faq__col {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}
	.faq__item { order: 0; }
	.faq__trigger { min-height: 60px; padding: 10px 20px; }
	.faq__q { font-weight: 500; }
	.faq__a { padding: 0 20px 18px; font-size: 16px; }
}

/* Пункты 8–13 видны на десктопе, на телефоне прячутся до «Показать все». */
@media (min-width: 1200px) {
	.faq__item--desk.is-extra:not(.is-shown) { display: block; }
}

/* Ответ — на ступень мельче вопроса не делаем: тот же размер, мягче цвет */
.faq__a { font-size: 12px; line-height: 1.45; color: rgba(48, 48, 48, 0.8); }
@media (min-width: 1200px) { .faq__a { font-size: 14px; } }