/* ==========================================================================
   Block: FAQ
   1920: текст слева (flex 1) + список 1042 (57.9%), gap 40
   1440: 477 (35.1%) + 674 (49.6%), по краям · 1024: 355 (36.7%) + 560 (57.9%)
   375:  колонкой, контакты в серой плашке
   ========================================================================== */

.faq {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 40px;
}

.faq__aside {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	min-width: 0;
}

.faq__intro {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.faq__title {
	max-width: none;
}

.faq__text {
	font-size: 24px;
	line-height: 1.2;
	color: var(--c-text);
}

.faq__contacts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 60px;
}

.faq__contact {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--c-black);
	transition: color var(--t-fast);
}

.faq__contact:hover {
	color: var(--c-orange);
}

.faq__contact-icon {
	width: 24px;
	height: 24px;
	color: var(--c-orange);
}

.faq__contact-icon--mail {
	--icon-w: 20px;
	--icon-h: 16px;

	-webkit-mask-image: url("../../../assets/icons/mail-24.svg");
	mask-image: url("../../../assets/icons/mail-24.svg");
}

.faq__contact-icon--phone {
	-webkit-mask-image: url("../../../assets/icons/phone-24.svg");
	mask-image: url("../../../assets/icons/phone-24.svg");
}

.faq__list {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 10px;
	width: 57.89%;
}

@media (max-width: 1919.98px) {
	.faq__aside {
		flex: 0 1 35.07%;
	}

	.faq__intro {
		gap: 20px;
	}

	.faq__text {
		font-size: 18px;
	}

	.faq__contacts {
		gap: 12px 40px;
	}

	.faq__contact {
		gap: 8px;
		font-size: 14px;
	}

	.faq__contact-icon {
		width: 20px;
		height: 20px;
	}

	.faq__contact-icon--mail {
		--icon-w: 16.6667px;
		--icon-h: 13.3333px;
	}

	.faq__contact-icon--phone {
		--icon-w: 20px;
		--icon-h: 20px;
	}

	.faq__list {
		width: 49.56%;
	}
}

@media (max-width: 1439.98px) {
	.faq__aside {
		flex-basis: 36.67%;
	}

	.faq__intro {
		gap: 12px;
	}

	.faq__text {
		font-size: 16px;
	}

	.faq__contacts {
		gap: 8px 32px;
	}

	.faq__contact {
		font-size: 12px;
	}

	.faq__contact-icon {
		width: 16px;
		height: 16px;
	}

	.faq__contact-icon--mail {
		--icon-w: 13.3333px;
		--icon-h: 10.6667px;

		-webkit-mask-image: url("../../../assets/icons/mail-16.svg");
		mask-image: url("../../../assets/icons/mail-16.svg");
	}

	.faq__contact-icon--phone {
		--icon-w: 16px;
		--icon-h: 16px;

		-webkit-mask-image: url("../../../assets/icons/phone-16.svg");
		mask-image: url("../../../assets/icons/phone-16.svg");
	}

	.faq__list {
		width: 57.85%;
	}
}

@media (max-width: 1023.98px) {
	.faq {
		flex-direction: column;
		gap: 20px;
	}

	.faq__aside {
		flex: 0 0 auto;
		gap: 20px;
	}

	.faq__text {
		font-size: 14px;
	}

	.faq__contacts {
		justify-content: space-between;
		padding: 8px 16px;
		border-radius: 4px;
		background-color: var(--c-light);
	}

	.faq__list {
		gap: 8px;
		width: 100%;
	}
}
