/**
 * Component: FAQ banner (parts/components/banner-faq.php).
 *
 * Figma banner/faq 1598:47705, REF/11-banner-faq.md.
 *   desktop 1440x253: primary band, text 44px from the top, header/XL and
 *     body/XS white 8px apart, then 24px to an outlined button/M 672 wide.
 *     The 220px message-question glyph sits 172px right of centre, 40px above
 *     the band, at 50% in dark purple.
 *   mobile 390x210: 32px / 24px padding, header/L, 20px to a full-width
 *     button; glyph 180px, 242px from the left, 32px above.
 * The band runs edge to edge: it is not inside the container.
 */

.banner-faq {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--color-text-white);
	background-color: var(--color-primary);
}

.banner-faq__glyph {
	position: absolute;
	top: -2rem; /* 32 */
	left: calc(50% + 2.9375rem); /* 242 of 390: 47 right of centre */
	z-index: -1;
	width: 11.25rem; /* 180 */
	height: 11.25rem;
	color: var(--color-dark-purple);
	opacity: 0.5;
}

.banner-faq__glyph svg {
	width: 100%;
	height: 100%;
}

.banner-faq__inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem; /* 20 */
	max-width: 42rem; /* 672 */
	padding: 2rem 1.5rem; /* 32 24 */
	margin-inline: auto;
}

.banner-faq__text {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.banner-faq__title {
	font: var(--type-header-l);
	color: inherit;
}

.banner-faq__subtitle {
	font: var(--type-body-xs);
}

/* Outlined on purple: white, with the dark label (subtitle/XL). */
.banner-faq__button {
	width: 100%;
	color: var(--color-text-dark);
}

@media (min-width: 64rem) {
	.banner-faq__glyph {
		top: -2.5rem; /* 40 */
		left: calc(50% + 10.75rem); /* 892 of 1440 */
		width: 13.75rem; /* 220 */
		height: 13.75rem;
	}

	/* Not centred in the frame: the text and button start at 356 of 1440,
	 * 364px left of centre, so the 672px block sits 28px left of middle. */
	.banner-faq__inner {
		gap: 1.5rem;
		box-sizing: content-box;
		padding: 2.75rem 0; /* 44 */
		margin-left: calc(50% - 22.75rem);
	}

	.banner-faq__title {
		font: var(--type-header-xl);
	}
}