/* ============================================================
   The FAQ page (template-faqs.php): "FAQs" design, desktop only
   (docs/notes/nav-and-pages.md 7). The hero is the shared inner-page
   hero (page-hero.css); the tabs and accordion are the shared FAQ block
   in its light colours (faq.css, .faq-tabs--light); the closing panel
   is the shared navy CTA panel (cta-panel.css); the band after it is
   the shared CTA band (cta-band.css).

   - Questions section: White, the shared section padding on top (112 /
     80; the file has 105 from the hero to the H2's caps). H2 Koulen in
     Primary Navy (main.css h2), its caps 57px above the tabs as on the
     course page.
   - The closing panel (Doc 03's "Still have a question?", not designed:
     the CW v2 / List v2 panel) sits 64px under the last question's
     divider on desktops, 48 on phones, as wide as the accordion's
     dividers; then the section's bottom padding before the band (the
     file has 124px of White under its placeholder note).
   ============================================================ */

.faq-page__questions {
	padding-bottom: 0;
}

/* 48px under the heading's line box on phones, 44 at 1440: its caps 56 /
   57px above the tabs, as on the course page. */
.faq-page__title {
	margin-bottom: clamp(44px, 49.55px - 0.3854vw, 48px);
}

/* Phones (not designed): eight topics in the course page's pills would
   push the first question far down. Lower pills (36px tall, 12px apart)
   pack two to a row where they fit; the designed pills from 768px. The
   labels are the body size everywhere (faq.css). */
.faq-page .faq-tabs {
	--faqs-tab-h: 36px;
	--faqs-tab-gap: 12px;
}

@media (min-width: 768px) {
	.faq-page .faq-tabs {
		--faqs-tab-h: 42px;
		--faqs-tab-gap: 18px 30px;
	}
}

.faq-page__closing {
	padding-top: clamp(48px, 41.8px + 1.5414vw, 64px);
	padding-bottom: var(--section-pad-y);
	background-color: var(--color-surface);
}