/*
 * Homepage section 9: the FAQ (VOY-936, spec KB-515).
 *
 * Loaded on the front page by the assets/sections loader (VOY-908). Tokens
 * only, no raw hex. This file is the section's frame and header. The
 * accordion, the two-pane index and the behaviour are shared with the practice
 * hubs since VOY-975: assets/service/vy-faq.css and vy-faq.js, which the
 * front-page loader enqueues alongside this file.
 *
 * CONTENT EDGE follows the VOY-908 ruling, max(40px, (width - wide) / 2), like
 * every other homepage section. The section adds no top padding: the section
 * above sets the gap.
 */

.wp-block-group.vy-faq {
	--faq-pad: max(40px, calc((100% - var(--wp--custom--layout--wide, 1440px)) / 2));
	--faq-ease: cubic-bezier(0.2, 0, 0, 1);
	position: relative;
	margin-block-start: 0;
	padding: 0 var(--faq-pad) 88px;
	background: var(--bg-canvas);
	color: var(--fg-1);
	/* Lets the accordion animate to height: auto. Browsers without it snap. */
	interpolate-size: allow-keywords;
}

.vy-faq :is(p, h2, .wp-block-group) { margin: 0; }

/* ---- Header ---------------------------------------------------------------- */

.vy-faq .vy-faq__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px 48px;
	margin-bottom: 48px;
}
.vy-faq .vy-faq__titles { max-width: 760px; }

.vy-faq .vy-faq__eyebrow {
	margin-bottom: 18px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-3);
}
/* The planet mark: a disc and a tilted ring, as in sections 7 and 8. */
.vy-faq .vy-faq__eyebrow::before {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.55em;
	vertical-align: -0.1em;
	border-radius: 50%;
	background:
		radial-gradient(circle, var(--accent-bright) 0 32%, transparent 34%),
		radial-gradient(ellipse 50% 16% at 50% 50%, transparent 76%, var(--accent-bright) 80%, var(--accent-bright) 92%, transparent 96%);
	transform: rotate(-24deg);
}

.vy-faq .vy-faq__h2 {
	font-family: var(--font-display);
	font-size: 52px;
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--fg-1);
}

.vy-faq .vy-faq__intro {
	max-width: 420px;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.62;
	color: var(--fg-3);
}

@media (max-width: 1023px) {
	.wp-block-group.vy-faq { padding-bottom: 64px; }
	.vy-faq .vy-faq__head { margin-bottom: 32px; }
	.vy-faq .vy-faq__h2 { font-size: 32px; line-height: 1.08; }
	.vy-faq .vy-faq__intro { font-size: 15px; }
}