/*
 * One spacing scale for the whole site, in fixed sizes (never the screen's height):
 *
 *                                desktop   phone
 *   section gap                   120px     64px   content of one section to content of the next
 *   gap inside a section           56px     32px   e.g. a section's heading block to its card grid
 *   heading to its text            16px     12px
 *   card gap                       24px     16px   between cards in a grid (.sc-cards)
 *
 * The theme's section classes (pt-10, pb-10, py-10, section, section-small, a section's mt-5 or
 * mb-5) stacked 160–200px on each side of a boundary. On a <section> each now gives HALF the
 * section gap, so any two neighbours add up to one gap, whether or not their backgrounds differ.
 * A header's top padding is left alone: it is what keeps the first content clear of the fixed menu.
 *
 * Loaded after style.min.css on every page.
 */
:root {
	--sc-section: 120px;
	--sc-section-half: 60px;
	--sc-block: 56px;
	--sc-heading: 16px;
	--sc-card: 24px;
}

@media (max-width: 767.98px) {
	:root {
		--sc-section: 64px;
		--sc-section-half: 32px;
		--sc-block: 32px;
		--sc-heading: 12px;
		--sc-card: 16px;
	}
}

/* ── Sections: half the gap each side ── */
/* A page that opens with a section rather than a header (What's On, Redeem) keeps that section's
   top padding, for the same reason a header does: it clears the fixed menu and its wave. */
:is(section.pt-10, section.py-10, section.pt-5, section.section, section.section-small, section.mt-5):not(#main > :first-child) {
	margin-top: 0 !important;
	padding-top: var(--sc-section-half) !important;
}

section.pb-10,
section.py-10,
section.mb-5,
header.pb-10,
header.pb-5 {
	margin-bottom: 0 !important;
	padding-bottom: var(--sc-section-half) !important;
}

/* ── Headings to their text ── */
h1,
h2,
h3 {
	margin-bottom: var(--sc-heading);
}

/* ── Card grids ── */
.row.sc-cards {
	--bs-gutter-x: var(--sc-card);
	--bs-gutter-y: var(--sc-card);
}

.row.sc-cards.mt-5 {
	margin-top: var(--sc-block) !important;
}

.row.sc-cards.pt-5 {
	padding-top: var(--sc-block) !important;
}

/* ── Full-screen blocks: a set height, not the screen's ── */
/* The call-to-action banner on class, event and class-group pages ("Host your next special
   occasion with us!") was one screen tall with its text centred, a stretch of colour that grew
   with the screen. */
#cta .vh-100 {
	height: auto !important;
	min-height: 520px;
	padding-top: var(--sc-section) !important;
	padding-bottom: var(--sc-section) !important;
}

@media (max-width: 767.98px) {
	#cta .vh-100 {
		min-height: 400px;
	}
}