/* Component: FAQ — Figma "FAQ" / "Q" */

.spc-faq {
	padding-bottom: 128px;
}

.spc-faq__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 64px;
	align-items: start;
}

.spc-faq__heading {
	max-width: 426px;
}

.spc-faq__columns {
	grid-column: span 2;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	align-items: start;
}

.spc-faq__column {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.spc-faq__item {
	padding: 8px;
	border-radius: var(--spc-radius);
	background: var(--sp-white);
	box-shadow: inset 0 0 0 0 var(--sp-gold);
	transition: box-shadow var(--spc-duration) var(--spc-ease);
}

.spc-faq__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	list-style: none;
	cursor: pointer;
}

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

.spc-faq__question .spc-lead {
	flex: 1 1 auto;
	align-self: center;
	padding: 12px 16px;
	color: var(--sp-black);
}

.spc-faq__chevron {
	transition: transform var(--spc-duration) var(--spc-ease);
}

.spc-faq__item[open] .spc-faq__chevron {
	transform: rotate(180deg);
}

/* Figma "Q" Type=Hover. Opened questions keep the default look. */
.spc-faq__item:not([open]):hover,
.spc-faq__item:not([open]):has(.spc-faq__question:focus-visible) {
	box-shadow: inset 0 0 0 2px var(--sp-gold);
}

.spc-faq__item:not([open]):hover .spc-faq__toggle,
.spc-faq__question:focus-visible .spc-faq__toggle {
	border-color: var(--sp-gold);
	box-shadow: inset 0 0 0 1px var(--sp-gold);
	color: var(--sp-gold);
}

.spc-faq__question:focus-visible {
	outline: none;
}

/* Height is animated by script.js; this wrapper clips while it runs. */
.spc-faq__panel {
	overflow: hidden;
	transition: height var(--spc-duration) var(--spc-ease);
}

.spc-faq__item--static .spc-faq__question {
	margin: 0;
	cursor: default;
}

/* Figma "Q" Opened: 8px between the question and the answer. */
.spc-faq__answer p + p {
	margin-top: 12px;
}

.spc-faq__answer {
	margin-top: -4px;
	padding: 0 72px 12px 16px;
}

@media (prefers-reduced-motion: reduce) {
	.spc-faq__panel {
		transition: none;
	}
}

/* 1024: questions in one column next to the heading. */
@media (max-width: 1239px) {
	.spc-faq {
		padding-bottom: 64px;
	}

	.spc-faq__columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 768: narrow heading column. */
@media (max-width: 1023px) {
	.spc-faq__inner {
		grid-template-columns: 192px minmax(0, 1fr);
	}

	.spc-faq__columns {
		grid-column: auto;
	}
}

/* 360: heading above the questions. */
@media (max-width: 767px) {
	.spc-faq__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.spc-faq__answer {
		padding-right: 16px;
	}
}