/* Block: FAQ. Figma: Syllabus 1:794-1:831 */

.section--faq {
	--pt: var(--space-xl);
	--pb: clamp(0px, 1.56vw, 30px);
}

.faq {
	display: grid;
	grid-template-columns: 46.63% minmax(0, 1fr); /* accordion starts 636 into the 1364 box */
	align-items: start;
}

.faq__title {
	margin-top: clamp(24px, 2.55vw, 49px);
	font-size: clamp(2.5rem, 4.69vw, 5.625rem); /* 90 */
	line-height: 1.02;
	letter-spacing: -0.05em;
}

.faq__item { border-top: 1px solid var(--c-rule); }
.faq__item:last-child { border-bottom: 1px solid var(--c-rule); }

.faq__question {
	display: grid;
	grid-template-columns: clamp(40px, 3.07vw, 59px) minmax(0, 1fr) auto;
	align-items: center;
	gap: 0;
	padding-block: clamp(22px, 1.77vw, 34px);
	cursor: pointer;
	list-style: none;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__number {
	font-size: clamp(0.9375rem, 0.9375vw, 1.125rem);
	line-height: 1.33;
	letter-spacing: -0.027em;
}

.faq__text {
	font-size: clamp(1.0625rem, 1.04vw, 1.25rem); /* 20 */
	line-height: 1.3;
	letter-spacing: -0.02em;
}

/* Plus that turns into a minus */
.faq__icon {
	position: relative;
	margin-left: 16px;
	width: 15px;
	height: 15px;
}

.faq__icon::before,
.faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.35s var(--ease);
}

.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }

.faq__answer {
	max-width: calc(600px + clamp(40px, 3.07vw, 59px));
	padding: 0 0 clamp(32px, 2.76vw, 53px) clamp(40px, 3.07vw, 59px);
	font-size: clamp(0.9375rem, 0.9375vw, 1.125rem); /* 18 */
	line-height: 1.556;
	letter-spacing: -0.027em;
}

.faq__question + .faq__answer { margin-top: clamp(0px, 0.1vw, 2px); }
.faq__answer > * + * { margin-top: 1.72em; }

@media (max-width: 1024px) {
	.faq {
		grid-template-columns: 1fr;
		gap: var(--space-m);
	}
}