/**
 * Maiwand FC — global stylesheet (loaded on every page, after Bootstrap)
 *
 * 1. Design tokens
 * 2. Base & typography
 * 3. Layout containers & section spacing
 * 4. Section heading (crest rule, eyebrow, heading, description, side link)
 * 5. Buttons & text links
 * 6. Badges, pills & tags
 * 7. Shared bits (image empty state, crest, icons, rich text)
 * 8. Behaviours (nav drawer, scroll reveal, snackbar)
 * 9. Responsive
 *
 * Desktop-first: the base rules are the 1920px design. Type and spacing scale
 * fluidly through the tokens below (exact design value at 1920px, scaling with
 * the viewport underneath), so breakpoints only change layout. Every media
 * query is max-width.
 */

/* ============================ DESIGN TOKENS ============================ */
:root {
	/* Colours — sampled from the Figma variables */
	--primary-color: #d9101a;          /* club red (Crimson) */
	--primary-dark: #a80b13;           /* Totem Pole */
	--primary-tint: rgba(217, 16, 26, 0.1);
	--accent-color: #6ed60f;           /* club green (Lima) */
	--accent-dark: #2e7d0c;            /* Bilbao */
	--accent-tint: rgba(110, 214, 15, 0.18);
	--heading-color: #17181a;          /* Woodsmoke */
	--text-color: #5e6469;             /* Shuttle Gray */
	--text-color-light: #c9cdd1;       /* Iron */
	--muted-color: #9aa0a5;            /* Gray Chateau */
	--muted-dark: #8a9096;             /* Oslo Gray */
	--subtle-text: #d6dadd;
	--crumb-divider: #bbbbbb;
	--border-color: #dcdedf;
	--border-strong: #c9cdd1;
	--border-dark: #2a2c2e;            /* Shark */
	--border-darker: #3a3d40;
	--background-color: #ffffff;
	--light-bg: #f2f3f4;
	--light-bg-alt: #e7e9ea;           /* Porcelain */
	--off-white: #f7f7f7;
	--dark-bg: #000000;
	--dark-panel: #141516;
	--dark-surface: #2a2c2e;
	--dark-text: #ffffff;
	--white: #ffffff;
	--black: #000000;
	--image-placeholder-bg: #e7e9ea;
	--overlay-light: rgba(255, 255, 255, 0.93);
	--quote-meta: #b9bec2;             /* Silver Sand — attribution on dark cards */
	--video-scrim: linear-gradient(0deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.06) 100%);
	--primary-wash: #fff5f5;           /* Maiwand FC row in league tables */
	--form-draw: #d0d3d5;              /* "D" chip in form guides */
	--pill-text-dark: #e4e6e8;         /* pill text on the black next-match card */
	--overlay-dark: rgba(0, 0, 0, 0.8);        /* video duration chip */
	--overlay-black: rgba(0, 0, 0, 0.94);      /* photo lightbox backdrop */
	--glass-light: rgba(242, 243, 244, 0.19);  /* sponsor strip logo panel */
	--muted-on-dark: #bfc4c8;          /* body copy on black panels (Register "Need a hand?") */
	--control-border: #767676;         /* checkbox outline (Boulder) */
	--overlay-dark: rgba(0, 0, 0, 0.66);  /* Contact hero card over the photo */
	--icon-disc-dark: #1c1d1f;         /* icon discs on the Contact hero card */

	/* The club tricolour (black / red / green) used by crest rules, seams and card tops */
	--flag-stripes: linear-gradient(180deg, var(--black) 0%, var(--black) 40%, var(--primary-color) 40%, var(--primary-color) 73.333%, var(--accent-color) 73.333%, var(--accent-color) 100%);
	--flag-columns: linear-gradient(90deg, var(--black) 0%, var(--black) 40%, var(--primary-color) 40%, var(--primary-color) 73.333%, var(--accent-color) 73.333%, var(--accent-color) 100%);
	--flag-thirds: linear-gradient(90deg, var(--black) 0%, var(--black) 33.333%, var(--primary-color) 33.333%, var(--primary-color) 66.666%, var(--accent-color) 66.666%, var(--accent-color) 100%);
	--flag-thirds-muted: linear-gradient(90deg, var(--crumb-divider) 0%, var(--crumb-divider) 33.4%, var(--primary-color) 33.4%, var(--primary-color) 66.7%, var(--accent-color) 66.7%, var(--accent-color) 100%); /* grey / red / green (rules bar) */

	/* Typography */
	--font-primary: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-black: 900;
	--body-line-height: 1.55;
	--heading-line-height: 1.02;
	--heading-letter-spacing: -0.022em;
	--button-letter-spacing: 0.002em;

	/* Fluid type: exact design px at 1920px wide, scaling below, floored for small screens */
	--fs-12: clamp(0.75rem, 0.625vw, 0.75rem);
	--fs-14: clamp(0.8125rem, 0.7292vw, 0.875rem);
	--fs-15: clamp(0.8125rem, 0.7813vw, 0.9375rem);
	--fs-16: clamp(0.8125rem, 0.8333vw, 1rem);
	--fs-17: clamp(0.8125rem, 0.8854vw, 1.0625rem);
	--fs-18: clamp(0.8125rem, 0.9375vw, 1.125rem);
	--fs-20: clamp(0.875rem, 1.0417vw, 1.25rem);
	--fs-22: clamp(1rem, 1.1458vw, 1.375rem);
	--fs-24: clamp(1.0625rem, 1.25vw, 1.5rem);
	--fs-26: clamp(1.1875rem, 1.3542vw, 1.625rem);
	--fs-28: clamp(1.25rem, 1.4583vw, 1.75rem);
	--fs-30: clamp(1.625rem, 1.5625vw, 1.875rem);
	--fs-32: clamp(1.625rem, 1.6667vw, 2rem);
	--fs-36: clamp(1.625rem, 1.875vw, 2.25rem);
	--fs-40: clamp(1.625rem, 2.0833vw, 2.5rem);
	--fs-44: clamp(1.625rem, 2.2917vw, 2.75rem);
	--fs-48: clamp(1.625rem, 2.5vw, 3rem);
	--fs-56: clamp(1.625rem, 2.9167vw, 3.5rem);
	--fs-64: clamp(1.8125rem, 3.3333vw, 4rem);
	--fs-72: clamp(2rem, 3.75vw, 4.5rem);
	--fs-80: clamp(2.25rem, 4.1667vw, 5rem);
	--fs-96: clamp(2.6875rem, 5vw, 6rem);
	--fs-110: clamp(3.125rem, 5.7292vw, 6.875rem);

	/* Design-specific sizes that sit between steps */
	--fs-body: var(--fs-24);
	--fs-lead: clamp(1.125rem, 1.526vw, 1.83rem);     /* 29.3px hero intro */
	--fs-intro: clamp(1.0625rem, 1.318vw, 1.58rem);   /* 25.3px section intro */
	--fs-card-title: clamp(1.125rem, 1.526vw, 1.83rem); /* 29.3px card / team names */
	--fs-h4: clamp(1.1875rem, 1.39vw, 1.67rem);       /* 26.7px footer headings */
	--fs-stat: clamp(1.75rem, 2.36vw, 2.83rem);       /* 45.3px stats & date tiles */
	--fs-h2: var(--fs-64);
	--fs-h1: clamp(2.75rem, 5.557vw, 6.67rem);        /* 106.7px inner hero */
	--fs-h1-home: clamp(3rem, 6.109vw, 7.33rem);      /* 117.3px home hero */
	--fs-25: clamp(1rem, 1.302vw, 1.5625rem);         /* 25px timeline titles */
	--fs-value-title: clamp(1.25rem, 1.807vw, 2.17rem); /* 34.7px value / initiative titles */
	--fs-statement: clamp(1.375rem, 1.943vw, 2.33rem);  /* 37.3px mission & vision statements */
	--fs-stat-xl: clamp(2.25rem, 4.026vw, 4.83rem);   /* 77.3px impact figures */
	--fs-form-title: clamp(1.625rem, 2.641vw, 3.17rem); /* 50.7px form headings */
	--fs-tile: clamp(1.375rem, 1.734vw, 2.08rem);     /* 33.3px choice tiles */
	--fs-card-heading: clamp(1.125rem, 1.599vw, 1.92rem); /* 30.7px rule / info card titles */
	--fs-panel-title: clamp(1.5rem, 2.224vw, 2.67rem);  /* 42.7px dark panel / form card titles */
	--fs-feature-title: clamp(1.75rem, 2.776vw, 3.33rem); /* 53.3px feature card headings */
	--fs-price: clamp(1.875rem, 3.057vw, 3.67rem);      /* 58.7px package prices */
	--fs-sponsor-name: clamp(2rem, 3.193vw, 3.83rem);   /* 61.3px principal sponsor name */
	--fs-fact: clamp(2rem, 3.474vw, 4.17rem);           /* 66.7px youth camp facts */

	/* Spacing: one fluid unit = 1px at 1920px wide */
	--u: clamp(0.62px, 100vw / 1920, 1px);
	--space-2: calc(2 * var(--u));
	--space-4: calc(4 * var(--u));
	--space-6: calc(6 * var(--u));
	--space-8: calc(8 * var(--u));
	--space-10: calc(10 * var(--u));
	--space-12: calc(12 * var(--u));
	--space-14: calc(14 * var(--u));
	--space-16: calc(16 * var(--u));
	--space-18: calc(18 * var(--u));
	--space-20: calc(20 * var(--u));
	--space-24: calc(24 * var(--u));
	--space-26: calc(26 * var(--u));
	--space-28: calc(28 * var(--u));
	--space-30: calc(30 * var(--u));
	--space-32: calc(32 * var(--u));
	--space-36: calc(36 * var(--u));
	--space-40: calc(40 * var(--u));
	--space-48: calc(48 * var(--u));
	--space-56: calc(56 * var(--u));
	--space-60: calc(60 * var(--u));
	--space-64: calc(64 * var(--u));
	--space-72: calc(72 * var(--u));
	--space-80: calc(80 * var(--u));
	--space-96: calc(96 * var(--u));
	--space-110: calc(110 * var(--u));
	--space-120: calc(120 * var(--u));
	--space-140: calc(140 * var(--u));
	--section-spacing: var(--space-120);
	--card-spacing: var(--space-24);
	--gap-xs: var(--space-4);
	--gap-sm: var(--space-10);
	--gap-md: var(--space-18);
	--gap-lg: var(--space-28);
	--gap-xl: var(--space-40);

	/* Containers: 1480px content / 1700px wide panels at 1920px */
	--container-max: 1480px;
	--container-fluid: 77.083vw;
	--container-wide-max: 1700px;
	--container-wide-fluid: 88.542vw;
	--container-gutter: 24px;

	/* Radii */
	--radius-xs: 2px;
	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--radius-xl: 10px;
	--radius-pill: 999px;
	--radius-full: 50%;

	/* Shadows & borders */
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 12px 30px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.18);
	--shadow-float: 0 10px 15px rgba(0, 0, 0, 0.35); /* video play button */
	--shadow-raised: 0 18px 44px rgba(0, 0, 0, 0.1); /* highlighted package card */
	--header-shadow: 0 1px 0 #dbddde;
	--stroke-thin: 1px;
	--stroke: 2px;
	--stroke-bold: 3px;

	/* Motion */
	--transition-fast: 0.15s ease;
	--transition-base: 0.25s ease;
	--transition-slow: 0.4s ease;
}

/* ============================ BASE & TYPOGRAPHY ============================ */
body {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--body-line-height);
	color: var(--text-color);
	background: var(--background-color);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	color: var(--heading-color);
	line-height: var(--heading-line-height);
	margin: 0;
}

p {
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast);
}

img {
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: var(--stroke) solid var(--primary-color);
	outline-offset: var(--stroke);
}

/* ============================ LAYOUT CONTAINERS ============================ */
/* Paired with Bootstrap's .container — widens it to the design's 1480px column. */
.site-container {
	width: 100%;
	max-width: min(var(--container-max), var(--container-fluid));
	padding-inline: 0;
}

.site-container--wide {
	max-width: min(var(--container-wide-max), var(--container-wide-fluid));
}

.section-pad {
	padding-block: var(--section-spacing);
}

.section-bg-light {
	background: var(--light-bg);
}

.section-bg-alt {
	background: var(--light-bg-alt);
}

.section-bg-dark {
	background: var(--dark-bg);
}

/* ============================ SECTION HEADING ============================ */
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-40);
	margin-bottom: var(--space-56);
}

.section-head__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	max-width: calc(882 * var(--u));
}

.section-head__aside {
	display: flex;
	align-items: center;
	gap: var(--space-24);
}

.crest-rule {
	display: block;
	width: calc(96 * var(--u));
	height: calc(14 * var(--u));
	min-width: 48px;
	min-height: 7px;
	background: var(--flag-stripes);
}

.section-eyebrow {
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	line-height: 1.55;
	color: var(--primary-color);
}

.section-heading {
	font-size: var(--fs-h2);
	font-weight: var(--font-weight-black);
	letter-spacing: -0.022em;
	line-height: 1.02;
	color: var(--heading-color);
	text-transform: capitalize;
	padding-top: var(--space-8);
}

.section-heading--hero {
	font-size: var(--fs-h1);
	letter-spacing: -0.035em;
	line-height: 0.94;
	padding-top: 0;
}

.section-heading--sm {
	font-size: var(--fs-56);
}

.section-dark .section-heading {
	color: var(--dark-text);
}

.section-description {
	font-size: var(--fs-intro);
	font-weight: var(--font-weight-light);
	line-height: 1.5;
	color: var(--text-color);
}

.section-dark .section-description {
	color: var(--text-color-light);
}

.section-description p + p {
	margin-top: var(--space-16);
}

.section-count {
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	color: var(--heading-color);
	padding-block: var(--space-24);
}

.section-count span {
	font-weight: var(--font-weight-regular);
	color: var(--text-color);
}

/* ============================ BUTTONS & TEXT LINKS ============================ */
/* Paired with Bootstrap's .btn — the club button shape, never a .btn override. */
.mfc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
	min-height: calc(84 * var(--u));
	padding: var(--space-20) var(--space-36);
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	line-height: 1.55;
	letter-spacing: var(--button-letter-spacing);
	text-transform: capitalize;
	white-space: nowrap;
	border: var(--stroke-bold) solid transparent;
	border-radius: var(--radius-md);
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.mfc-btn svg {
	width: 1em;
	height: 1em;
}

.mfc-btn--red {
	background: var(--primary-color);
	color: var(--white);
}

.mfc-btn--red:hover,
.mfc-btn--red:focus-visible {
	background: var(--primary-dark);
	color: var(--white);
}

.mfc-btn--black {
	background: var(--black);
	color: var(--white);
}

.mfc-btn--black:hover,
.mfc-btn--black:focus-visible {
	background: var(--heading-color);
	color: var(--white);
}

.mfc-btn--outline {
	background: transparent;
	border-color: var(--black);
	color: var(--black);
}

.mfc-btn--outline:hover,
.mfc-btn--outline:focus-visible {
	background: var(--black);
	color: var(--white);
}

.mfc-btn--white {
	background: var(--white);
	color: var(--black);
}

.mfc-btn--white:hover,
.mfc-btn--white:focus-visible {
	background: var(--light-bg-alt);
	color: var(--black);
}

.mfc-btn--outline-light {
	background: transparent;
	border-color: var(--white);
	color: var(--white);
}

.mfc-btn--outline-light:hover,
.mfc-btn--outline-light:focus-visible {
	background: var(--white);
	color: var(--black);
}

.mfc-btn--sm {
	min-height: 0;
	padding: var(--space-16) var(--space-28);
	font-size: var(--fs-20);
	border-radius: var(--radius-xs);
}

.btn-group-mfc {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-18);
}

/* Underlined text link (“Questions? Talk to us”, “View all news”) */
.has-underline {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding-bottom: var(--space-6);
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	line-height: 1.55;
	color: var(--black);
	white-space: nowrap;
}

.has-underline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--stroke-bold);
	background: var(--primary-color);
	transition: background-color var(--transition-base);
}

.has-underline--brand::after {
	background: var(--primary-color);
}

.has-underline--dark::after {
	background: var(--heading-color);
}

.has-underline--light {
	color: var(--white);
}

.has-underline--light::after {
	background: var(--white);
}

.has-underline--accent::after {
	background: var(--accent-color);
}

.has-underline:hover {
	color: var(--primary-color);
}

.has-underline--light:hover {
	color: var(--accent-color);
}

.text-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	color: var(--heading-color);
}

.text-arrow-link svg {
	width: calc(20 * var(--u));
	height: calc(20 * var(--u));
	min-width: 14px;
	min-height: 14px;
	transition: transform var(--transition-base);
}

.text-arrow-link:hover svg {
	transform: translateX(var(--space-4));
}

/* ============================ BADGES, PILLS & TAGS ============================ */
.mfc-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-6) var(--space-14);
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	line-height: 1.55;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}

.mfc-badge--red {
	background: var(--primary-color);
	color: var(--white);
}

.mfc-badge--green {
	background: var(--accent-color);
	color: var(--black);
}

.mfc-badge--black {
	background: var(--black);
	color: var(--white);
}

.mfc-badge--outline {
	background: var(--white);
	color: var(--black);
	box-shadow: inset 0 0 0 var(--stroke) var(--black);
}

.mfc-badge--won {
	background: var(--accent-tint);
	color: var(--accent-dark);
}

.mfc-badge--lost {
	background: var(--primary-tint);
	color: var(--primary-color);
}

.mfc-badge--muted {
	background: var(--light-bg);
	color: var(--text-color);
}

.mfc-pill {
	display: inline-flex;
	align-items: center;
	padding: var(--space-6) var(--space-16);
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	line-height: 1.55;
	border-radius: var(--radius-pill);
	white-space: nowrap;
}

.mfc-pill--black {
	background: var(--black);
	color: var(--white);
}

.mfc-pill--light {
	background: var(--light-bg);
	color: var(--heading-color);
}

.mfc-pill--outline-dark {
	border: var(--stroke-thin) solid var(--border-darker);
	color: var(--subtle-text);
}

/* Accent helpers driven by AccentChoices (grade, category, card tops) */
.accent-red { --accent-current: var(--primary-color); }
.accent-black { --accent-current: var(--black); }
.accent-green { --accent-current: var(--accent-color); }
.accent-grey { --accent-current: var(--border-strong); }

/* ============================ SHARED BITS ============================ */
/* Empty image field: same-size neutral block, no content. */
.image-empty {
	display: block;
	width: 100%;
	min-height: 100%;
	background: var(--image-placeholder-bg);
}

.object-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Opponent initials disc ("MC", "BB") */
.club-initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: calc(54 * var(--u));
	height: calc(54 * var(--u));
	min-width: 34px;
	min-height: 34px;
	border-radius: var(--radius-full);
	background: var(--light-bg);
	color: var(--text-color);
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	overflow: hidden;
}

.club-initials img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.club-crest {
	display: inline-flex;
	flex: none;
	width: calc(54 * var(--u));
	height: calc(54 * var(--u));
	min-width: 34px;
	min-height: 34px;
}

.club-crest img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mfc-icon {
	display: inline-flex;
	flex: none;
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	min-width: 16px;
	min-height: 16px;
}

.mfc-icon svg,
.mfc-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.rich-text > * + * {
	margin-top: var(--space-16);
}

.rich-text a {
	color: var(--primary-color);
	text-decoration: underline;
}

/* Tricolour strip along the top of cards and panels */
.flag-top {
	position: relative;
}

.flag-top::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: calc(11 * var(--u));
	min-height: 6px;
	background: var(--flag-thirds);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ============================ BEHAVIOURS ============================ */
/* A sticky header publishes --nav-height (global.js) for anchor offsets. */
html {
	scroll-padding-top: var(--nav-height, 0px);
}

/* Scroll-reveal ([data-animate]) — hidden state carries no transition. */
.aos-ready [data-animate] {
	opacity: 0;
	transform: translateY(24px);
}

.aos-ready [data-animate="fade-left"] { transform: translateX(-24px); }
.aos-ready [data-animate="fade-right"] { transform: translateX(24px); }
.aos-ready [data-animate="zoom"] { transform: scale(0.94); }
.aos-ready [data-animate="fade"] { transform: none; }

.aos-ready [data-animate].is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Reveal-on-demand lists ("Show 3 more fixtures") — see global.js / page JS */
[data-reveal-item][hidden] {
	display: none !important; /* beats any display set by a grid/flex child rule */
}

.snackbar {
	position: fixed;
	inset-inline: 0;
	bottom: 1.5rem;
	z-index: 1090;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	pointer-events: none;
}

.snackbar__item {
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-lg);
	color: var(--white);
	background: var(--heading-color);
	box-shadow: var(--shadow-md);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--transition-base), transform var(--transition-base);
}

.snackbar__item--error { background: var(--primary-dark); }
.snackbar__item.is-visible { opacity: 1; transform: none; }

details[data-accordion] > summary { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important; /* user asked for no motion — beats every component */
		animation-duration: 0.01ms !important;
	}
}

/* ============================ RESPONSIVE ============================ */

/* --- LG --- */
@media (max-width: 1200px) {
	:root {
		--container-fluid: calc(100vw - 2 * var(--container-gutter) - 32px);
		--container-wide-fluid: calc(100vw - 2 * var(--container-gutter));
	}
}

/* --- MD / Tablet --- */
@media (max-width: 992px) {
	:root {
		--section-spacing: 64px;
		--container-fluid: calc(100vw - 2 * var(--container-gutter));
	}

	.section-head {
		margin-bottom: 32px;
	}
}

/* --- SM / Mobile --- */
@media (max-width: 768px) {
	:root {
		--container-gutter: 16px;
		--section-spacing: 52px;
	}

	.section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.mfc-btn {
		min-height: 52px;
		padding: 12px 22px;
		white-space: normal;
		text-align: center;
	}
}

/* --- XS / Small Mobile --- */
@media (max-width: 575px) {
	.btn-group-mfc {
		flex-direction: column;
		align-items: stretch;
	}

	.btn-group-mfc .mfc-btn {
		width: 100%;
	}
}