/*
 * bg-presets.css — Background preset classes for sections, hero, and page body.
 * Applied via [data-bg-preset="..."] on the wrapper div.
 *
 * Text color system:
 *   - Each preset sets --bp-heading and --bp-body for auto contrast
 *   - [data-bp-text="light"] forces light text (for dark backgrounds)
 *   - [data-bp-text="dark"]  forces dark text (for light backgrounds)
 *   - Design Settings global override via --mvc-bp-heading / --mvc-bp-body tokens
 */

/* ── Global text override tokens (set by mvc-token-output.php) ───────────── */
/* --mvc-bp-heading and --mvc-bp-body are injected when a global override is set */

/* ── Shared text rules — applied to all presets ──────────────────────────── */
[data-bg-preset] > :is(section, div, header),
[data-bg-preset] > :is(section, div, header) * {
	/* Allow color to cascade from preset defaults below */
}

[data-bg-preset] > :is(section, div, header) h1,
[data-bg-preset] > :is(section, div, header) h2,
[data-bg-preset] > :is(section, div, header) h3,
[data-bg-preset] > :is(section, div, header) h4,
[data-bg-preset] > :is(section, div, header) h5,
[data-bg-preset] > :is(section, div, header) h6 {
	color: var(--mvc-bp-heading, var(--bp-heading)) !important;
}

[data-bg-preset] > :is(section, div, header) p,
[data-bg-preset] > :is(section, div, header) span,
[data-bg-preset] > :is(section, div, header) li,
[data-bg-preset] > :is(section, div, header) label {
	color: var(--mvc-bp-body, var(--bp-body)) !important;
}

/* Restore button token colors — buttons must not inherit preset body color */
[data-bg-preset] .mvc-btn--primary                   { color: var(--mvc-color-btn-text,  var(--color-white))   !important; }
[data-bg-preset] .mvc-btn--secondary                 { color: var(--mvc-color-btn2-text, var(--color-primary)) !important; }
[data-bg-preset] .mvc-btn--ghost                     { color: var(--color-text)                                !important; }
[data-bg-preset] .mvc-btn--accent                    { color: var(--color-gray-900)                            !important; }
[data-bg-preset] .mvc-btn--inverse                   { color: var(--color-primary)                             !important; }
[data-bg-preset] .mvc-btn--primary:hover             { color: var(--mvc-color-btn-text,        var(--color-white))   !important; }
[data-bg-preset] .mvc-btn--secondary:hover           { color: var(--mvc-color-btn2-hover-text, var(--color-white))   !important; }
[data-bg-preset] .mvc-btn--ghost:hover               { color: var(--mvc-color-btn-ghost-hover-text, #0f172a)         !important; }
[data-bg-preset] .mvc-btn--accent:hover              { color: var(--color-gray-900)                                  !important; }
[data-bg-preset] .mvc-btn--inverse:hover             { color: var(--color-primary)                                   !important; }

/* ── Section eyebrow on dark presets ─────────────────────────────────────── */
/*
 * .mvc-section-eyebrow is hard-coded to --color-accent in typography.css.
 * On dark presets, use --color-accent-light if defined (a lighter/brighter
 * tint of the accent for dark surfaces), otherwise fall back to the accent
 * itself. White is only the last resort so a gold, teal, or other
 * light-readable accent stays on-brand rather than being forced to white.
 *
 * Single source of truth — do NOT duplicate this per component.
 */
[data-bg-preset="gradient-brand"] .mvc-section-eyebrow,
[data-bg-preset="gradient-accent"] .mvc-section-eyebrow,
[data-bg-preset="gradient-sunrise"] .mvc-section-eyebrow,
[data-bg-preset="gradient-ocean"] .mvc-section-eyebrow,
[data-bg-preset="dark-mesh"] .mvc-section-eyebrow,
[data-bg-preset="solid-primary"] .mvc-section-eyebrow,
[data-bg-preset="solid-secondary"] .mvc-section-eyebrow,
[data-bp-text="light"] .mvc-section-eyebrow,
[data-bg-preset="gradient-brand"] .mvc-section-eyebrow span,
[data-bg-preset="gradient-accent"] .mvc-section-eyebrow span,
[data-bg-preset="gradient-sunrise"] .mvc-section-eyebrow span,
[data-bg-preset="gradient-ocean"] .mvc-section-eyebrow span,
[data-bg-preset="dark-mesh"] .mvc-section-eyebrow span,
[data-bg-preset="solid-primary"] .mvc-section-eyebrow span,
[data-bg-preset="solid-secondary"] .mvc-section-eyebrow span,
[data-bp-text="light"] .mvc-section-eyebrow span {
	color: var(--color-accent-light, var(--color-accent, #ffffff)) !important;
	opacity: 0.92;
}

/* Custom text color also overrides the hard-coded eyebrow accent. */
[data-bp-text="custom"] .mvc-section-eyebrow,
[data-bp-text="custom"] .mvc-section-eyebrow span {
	color: var(--section-custom-text) !important;
	opacity: 0.92;
}

/* ── Contact NAP block on dark presets ──────────────────────────────────── */
/*
 * The contact-section's NAP block (biz name, phone, email, address, hours)
 * uses heading/text/muted color tokens that collapse to dim values on dark
 * backgrounds. Force full-white biz-name and stronger contrast for address
 * and hours rows so the block stays legible.
 *
 * Single source of truth — do NOT duplicate per component.
 */
[data-bg-preset="gradient-brand"] .mvc-contact-section__biz-name,
[data-bg-preset="gradient-accent"] .mvc-contact-section__biz-name,
[data-bg-preset="gradient-sunrise"] .mvc-contact-section__biz-name,
[data-bg-preset="gradient-ocean"] .mvc-contact-section__biz-name,
[data-bg-preset="dark-mesh"] .mvc-contact-section__biz-name,
[data-bg-preset="solid-primary"] .mvc-contact-section__biz-name,
[data-bg-preset="solid-secondary"] .mvc-contact-section__biz-name,
[data-bp-text="light"] .mvc-contact-section__biz-name,
[data-bg-preset="gradient-brand"] .mvc-contact-section__hours-title,
[data-bg-preset="gradient-accent"] .mvc-contact-section__hours-title,
[data-bg-preset="gradient-sunrise"] .mvc-contact-section__hours-title,
[data-bg-preset="gradient-ocean"] .mvc-contact-section__hours-title,
[data-bg-preset="dark-mesh"] .mvc-contact-section__hours-title,
[data-bg-preset="solid-primary"] .mvc-contact-section__hours-title,
[data-bg-preset="solid-secondary"] .mvc-contact-section__hours-title,
[data-bp-text="light"] .mvc-contact-section__hours-title {
	color: #ffffff !important;
}

[data-bg-preset="gradient-brand"] .mvc-contact-section__phone,
[data-bg-preset="gradient-accent"] .mvc-contact-section__phone,
[data-bg-preset="gradient-sunrise"] .mvc-contact-section__phone,
[data-bg-preset="gradient-ocean"] .mvc-contact-section__phone,
[data-bg-preset="dark-mesh"] .mvc-contact-section__phone,
[data-bg-preset="solid-primary"] .mvc-contact-section__phone,
[data-bg-preset="solid-secondary"] .mvc-contact-section__phone,
[data-bp-text="light"] .mvc-contact-section__phone,
[data-bg-preset="gradient-brand"] .mvc-contact-section__email,
[data-bg-preset="gradient-accent"] .mvc-contact-section__email,
[data-bg-preset="gradient-sunrise"] .mvc-contact-section__email,
[data-bg-preset="gradient-ocean"] .mvc-contact-section__email,
[data-bg-preset="dark-mesh"] .mvc-contact-section__email,
[data-bg-preset="solid-primary"] .mvc-contact-section__email,
[data-bg-preset="solid-secondary"] .mvc-contact-section__email,
[data-bp-text="light"] .mvc-contact-section__email {
	color: #ffffff !important;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 3px;
}

[data-bg-preset="gradient-brand"] .mvc-contact-section__nap-label,
[data-bg-preset="gradient-accent"] .mvc-contact-section__nap-label,
[data-bg-preset="gradient-sunrise"] .mvc-contact-section__nap-label,
[data-bg-preset="gradient-ocean"] .mvc-contact-section__nap-label,
[data-bg-preset="dark-mesh"] .mvc-contact-section__nap-label,
[data-bg-preset="solid-primary"] .mvc-contact-section__nap-label,
[data-bg-preset="solid-secondary"] .mvc-contact-section__nap-label,
[data-bp-text="light"] .mvc-contact-section__nap-label {
	color: rgba(255, 255, 255, 0.7) !important;
}

[data-bg-preset="gradient-brand"] .mvc-contact-section__nap-row,
[data-bg-preset="gradient-accent"] .mvc-contact-section__nap-row,
[data-bg-preset="gradient-sunrise"] .mvc-contact-section__nap-row,
[data-bg-preset="gradient-ocean"] .mvc-contact-section__nap-row,
[data-bg-preset="dark-mesh"] .mvc-contact-section__nap-row,
[data-bg-preset="solid-primary"] .mvc-contact-section__nap-row,
[data-bg-preset="solid-secondary"] .mvc-contact-section__nap-row,
[data-bp-text="light"] .mvc-contact-section__nap-row {
	border-block-start-color: rgba(255, 255, 255, 0.15) !important;
	border-block-end-color: rgba(255, 255, 255, 0.15) !important;
}

[data-bg-preset="gradient-brand"] .mvc-contact-section__address,
[data-bg-preset="gradient-accent"] .mvc-contact-section__address,
[data-bg-preset="gradient-sunrise"] .mvc-contact-section__address,
[data-bg-preset="gradient-ocean"] .mvc-contact-section__address,
[data-bg-preset="dark-mesh"] .mvc-contact-section__address,
[data-bg-preset="solid-primary"] .mvc-contact-section__address,
[data-bg-preset="solid-secondary"] .mvc-contact-section__address,
[data-bp-text="light"] .mvc-contact-section__address,
[data-bg-preset="gradient-brand"] .mvc-contact-section__hours-row,
[data-bg-preset="gradient-accent"] .mvc-contact-section__hours-row,
[data-bg-preset="gradient-sunrise"] .mvc-contact-section__hours-row,
[data-bg-preset="gradient-ocean"] .mvc-contact-section__hours-row,
[data-bg-preset="dark-mesh"] .mvc-contact-section__hours-row,
[data-bg-preset="solid-primary"] .mvc-contact-section__hours-row,
[data-bg-preset="solid-secondary"] .mvc-contact-section__hours-row,
[data-bp-text="light"] .mvc-contact-section__hours-row {
	color: rgba(255, 255, 255, 0.92) !important;
}

[data-bg-preset="gradient-brand"] .mvc-contact-section__hours-row,
[data-bg-preset="gradient-accent"] .mvc-contact-section__hours-row,
[data-bg-preset="gradient-sunrise"] .mvc-contact-section__hours-row,
[data-bg-preset="gradient-ocean"] .mvc-contact-section__hours-row,
[data-bg-preset="dark-mesh"] .mvc-contact-section__hours-row,
[data-bg-preset="solid-primary"] .mvc-contact-section__hours-row,
[data-bg-preset="solid-secondary"] .mvc-contact-section__hours-row,
[data-bp-text="light"] .mvc-contact-section__hours-row {
	border-block-end-color: rgba(255, 255, 255, 0.18) !important;
}

/* ── Manual text overrides ───────────────────────────────────────────────── */
[data-bg-preset][data-bp-text="light"] > :is(section, div, header) h1,
[data-bg-preset][data-bp-text="light"] > :is(section, div, header) h2,
[data-bg-preset][data-bp-text="light"] > :is(section, div, header) h3,
[data-bg-preset][data-bp-text="light"] > :is(section, div, header) h4,
[data-bg-preset][data-bp-text="light"] > :is(section, div, header) h5,
[data-bg-preset][data-bp-text="light"] > :is(section, div, header) h6 { color: #ffffff !important; }

[data-bg-preset][data-bp-text="light"] > :is(section, div, header) p,
[data-bg-preset][data-bp-text="light"] > :is(section, div, header) span,
[data-bg-preset][data-bp-text="light"] > :is(section, div, header) li,
[data-bg-preset][data-bp-text="light"] > :is(section, div, header) label { color: rgba(255,255,255,0.88) !important; }

[data-bg-preset][data-bp-text="dark"] > :is(section, div, header) h1,
[data-bg-preset][data-bp-text="dark"] > :is(section, div, header) h2,
[data-bg-preset][data-bp-text="dark"] > :is(section, div, header) h3,
[data-bg-preset][data-bp-text="dark"] > :is(section, div, header) h4,
[data-bg-preset][data-bp-text="dark"] > :is(section, div, header) h5,
[data-bg-preset][data-bp-text="dark"] > :is(section, div, header) h6 { color: #111111 !important; }

[data-bg-preset][data-bp-text="dark"] > :is(section, div, header) p,
[data-bg-preset][data-bp-text="dark"] > :is(section, div, header) span,
[data-bg-preset][data-bp-text="dark"] > :is(section, div, header) li,
[data-bg-preset][data-bp-text="dark"] > :is(section, div, header) label { color: #374151 !important; }

/* Custom text color — uses --section-custom-text inline var set by the renderer
   when the editor picks "Preset Text Color → Custom" and a hex value. Falls
   back to the preset's normal --bp-heading/--bp-body if the var is missing
   (which the renderer prevents by downgrading bp_text to "auto"). */
[data-bg-preset][data-bp-text="custom"] > :is(section, div, header) h1,
[data-bg-preset][data-bp-text="custom"] > :is(section, div, header) h2,
[data-bg-preset][data-bp-text="custom"] > :is(section, div, header) h3,
[data-bg-preset][data-bp-text="custom"] > :is(section, div, header) h4,
[data-bg-preset][data-bp-text="custom"] > :is(section, div, header) h5,
[data-bg-preset][data-bp-text="custom"] > :is(section, div, header) h6 {
	color: var(--section-custom-text) !important;
}

[data-bg-preset][data-bp-text="custom"] > :is(section, div, header) p,
[data-bg-preset][data-bp-text="custom"] > :is(section, div, header) span,
[data-bg-preset][data-bp-text="custom"] > :is(section, div, header) li,
[data-bg-preset][data-bp-text="custom"] > :is(section, div, header) label {
	color: var(--section-custom-text) !important;
}

/* ── Solid — Primary Color ───────────────────────────────────────────────── */
[data-bg-preset="solid-primary"] > :is(section, div, header) {
	background: var(--mvc-color-primary, var(--color-primary)) !important;
	--bp-heading: #ffffff;
	--bp-body: rgba(255,255,255,0.88);
	--bp-text: rgba(255,255,255,0.85);
	--bp-text-muted: rgba(255,255,255,0.65);
	--bp-link: #ffffff;
	--bp-btn-bg: #ffffff;
	--bp-btn-text: var(--mvc-color-primary, var(--color-primary));
}

/* ── Solid — Secondary Color ─────────────────────────────────────────────── */
[data-bg-preset="solid-secondary"] > :is(section, div, header) {
	background: var(--mvc-color-secondary, var(--color-secondary, #0f2060)) !important;
	--bp-heading: #ffffff;
	--bp-body: rgba(255,255,255,0.88);
	--bp-text: rgba(255,255,255,0.85);
	--bp-text-muted: rgba(255,255,255,0.65);
	--bp-link: #ffffff;
	--bp-btn-bg: #ffffff;
	--bp-btn-text: var(--mvc-color-secondary, var(--color-secondary, #0f2060));
}

/* ── Solid — Custom Color ────────────────────────────────────────────────── */
[data-bg-preset="solid-custom"] > :is(section, div, header) {
	background: var(--section-solid-color, #f1f5f9) !important;
}

/* ── Brand Gradient — dark bg → light text ───────────────────────────────── */
[data-bg-preset="gradient-brand"] > :is(section, div, header) {
	background: linear-gradient(135deg,
		var(--mvc-color-primary, var(--color-primary)) 0%,
		var(--mvc-color-secondary, var(--color-secondary, #0f2060)) 100%
	) !important;
	background-color: transparent !important;
	--bp-heading: #ffffff;
	--bp-body: rgba(255,255,255,0.88);
}

/* ── Accent Gradient — dark bg → light text ─────────────────────────────── */
[data-bg-preset="gradient-accent"] > :is(section, div, header) {
	background: linear-gradient(135deg,
		var(--mvc-color-accent, var(--color-accent)) 0%,
		var(--mvc-color-primary, var(--color-primary)) 100%
	) !important;
	background-color: transparent !important;
	--bp-heading: #ffffff;
	--bp-body: rgba(255,255,255,0.88);
}

/* ── Sunrise Gradient — dark bg → light text ────────────────────────────── */
[data-bg-preset="gradient-sunrise"] > :is(section, div, header) {
	background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%) !important;
	background-color: transparent !important;
	--bp-heading: #ffffff;
	--bp-body: rgba(255,255,255,0.88);
}

/* ── Ocean Gradient — dark bg → light text ──────────────────────────────── */
[data-bg-preset="gradient-ocean"] > :is(section, div, header) {
	background: linear-gradient(135deg, #0ea5e9 0%, #0f172a 100%) !important;
	background-color: transparent !important;
	--bp-heading: #ffffff;
	--bp-body: rgba(255,255,255,0.88);
}

/* ── Chrome / Silver — light bg → dark text ─────────────────────────────── */
[data-bg-preset="metallic-chrome"] > :is(section, div, header) {
	background: linear-gradient(160deg,
		#e8e8e8 0%, #ffffff 20%, #c0c0c0 40%,
		#f5f5f5 55%, #9e9e9e 70%, #e0e0e0 85%, #ffffff 100%
	) !important;
	background-color: transparent !important;
	--bp-heading: #111111;
	--bp-body: #374151;
}

/* ── Gold Metallic — light bg → dark text ───────────────────────────────── */
[data-bg-preset="metallic-gold"] > :is(section, div, header) {
	background: linear-gradient(160deg,
		#f5d060 0%, #fef9c3 20%, #c8960c 40%,
		#fde68a 55%, #92650a 70%, #f5d060 85%, #fef9c3 100%
	) !important;
	background-color: transparent !important;
	--bp-heading: #3b2a00;
	--bp-body: #5c4000;
}

/* ── Dark Mesh — dark bg → light text ───────────────────────────────────── */
[data-bg-preset="dark-mesh"] > :is(section, div, header) {
	background:
		radial-gradient(ellipse 80% 60% at 20% 40%,
			color-mix(in srgb, var(--mvc-color-primary, #1b2b6b) 55%, transparent) 0%,
			transparent 60%),
		radial-gradient(ellipse 60% 50% at 80% 70%,
			color-mix(in srgb, var(--mvc-color-accent, #2563eb) 30%, transparent) 0%,
			transparent 60%),
		#0f172a !important;
	background-color: #0f172a !important;
	--bp-heading: #f1f5f9;
	--bp-body: rgba(226,232,240,0.9);
}

/* ── Liquid Glass — light bg → dark text ────────────────────────────────── */
[data-bg-preset="liquid-glass"] > :is(section, div, header) {
	background: linear-gradient(135deg,
		rgba(255,255,255,0.18) 0%,
		rgba(200,230,255,0.12) 40%,
		rgba(255,200,240,0.10) 70%,
		rgba(255,255,255,0.16) 100%
	) !important;
	background-color: rgba(219,234,254,0.4) !important;
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid rgba(255,255,255,0.45);
	position: relative;
	overflow: hidden;
	--bp-heading: #0f172a;
	--bp-body: #374151;
}

/* Rainbow refraction shimmer */
[data-bg-preset="liquid-glass"] > :is(section, div, header)::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg,
		transparent 20%,
		rgba(255,100,100,0.06) 30%,
		rgba(255,200,50,0.06) 40%,
		rgba(100,255,150,0.06) 50%,
		rgba(50,150,255,0.07) 60%,
		rgba(180,100,255,0.06) 70%,
		transparent 80%
	) !important;
	pointer-events: none;
	z-index: 0;
}

[data-bg-preset="liquid-glass"] > :is(section, div, header) > * {
	position: relative;
	z-index: 1;
}

/* ── Texture backgrounds ─────────────────────────────────────────────────── */
/*
 * Texture is rendered via a ::before pseudo-element so it can sit on top of
 * any preset gradient and have its own opacity without affecting content.
 * The wrapper (or body) sets --section-texture-url and --section-texture-opacity.
 */

/* Per-section texture wrapper */
[data-bg-texture] {
	position: relative;
	isolation: isolate;
}

[data-bg-texture] > :is(section, div, header)::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--section-texture-url);
	opacity: var(--section-texture-opacity, 1);
	pointer-events: none;
	z-index: 0;
}

[data-bg-texture="tile"] > :is(section, div, header)::after {
	background-repeat: repeat;
	background-size: auto;
}

[data-bg-texture="cover"] > :is(section, div, header)::after {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

[data-bg-texture="contain"] > :is(section, div, header)::after {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

[data-bg-texture] > :is(section, div, header) > * {
	position: relative;
	z-index: 1;
}

/*
 * Parallax texture — wrapper sets data-bg-texture-parallax="1" via
 * mvc_render_page_sections() when the section opts in. The texture stays
 * fixed to the viewport while the section scrolls. iOS Safari and most
 * touch browsers render background-attachment: fixed unreliably, so we
 * disable below 1024px and under prefers-reduced-motion.
 *
 * Tile mode benefits most from this effect; cover/contain modes still
 * work but the image gets cropped to the viewport rather than the
 * section, which can look unexpected.
 */
[data-bg-texture-parallax] > :is(section, div, header)::after {
	background-attachment: fixed;
}

@media (max-width: 1023px) {
	[data-bg-texture-parallax] > :is(section, div, header)::after {
		background-attachment: scroll;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-bg-texture-parallax] > :is(section, div, header)::after {
		background-attachment: scroll;
	}
}

/* Body-level texture — fixed pseudo-element starts below the header so transparent headers stay clean */
body[data-bg-texture]::before {
	content: '';
	position: fixed;
	top: var(--header-height, 72px);
	left: 0;
	right: 0;
	bottom: 0;
	background-image: var(--section-texture-url);
	opacity: var(--section-texture-opacity, 1);
	pointer-events: none;
	z-index: -1;
}

body[data-bg-texture="tile"]::before {
	background-repeat: repeat;
	background-size: auto;
}

body[data-bg-texture="cover"]::before {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

body[data-bg-texture="contain"]::before {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/* ── Section blending ────────────────────────────────────────────────────── */
/*
 * Creates a shape/fade at the bottom of a section wrapper so it flows
 * visually into the next section. Uses clip-path or a gradient overlay.
 */

[data-section-blend] > :is(section, div, header) {
	position: relative;
	overflow: visible;
}

/* Fade down — transparent gradient at bottom */
[data-section-blend="fade-down"] > :is(section, div, header)::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120px;
	background: linear-gradient(to bottom, transparent 0%, var(--color-bg, #ffffff) 100%);
	pointer-events: none;
	z-index: 2;
}

/* Wave down — SVG wave shape clipping bottom */
[data-section-blend="wave-down"] > :is(section, div, header) {
	clip-path: ellipse(55% 100% at 50% 0%);
	margin-bottom: -60px;
	padding-bottom: calc(var(--section-padding, 5rem) + 60px);
}

/* Wave up — inverted wave */
[data-section-blend="wave-up"] > :is(section, div, header) {
	clip-path: ellipse(55% 100% at 50% 100%);
	margin-bottom: -60px;
	padding-bottom: calc(var(--section-padding, 5rem) + 60px);
}

/* Angle down-right */
[data-section-blend="angle-down"] > :is(section, div, header) {
	clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
	margin-bottom: -60px;
	padding-bottom: calc(var(--section-padding, 5rem) + 60px);
}

/* Angle up-right */
[data-section-blend="angle-up"] > :is(section, div, header) {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
	margin-bottom: -60px;
	padding-bottom: calc(var(--section-padding, 5rem) + 60px);
}

/* ── Section overlap (pull-up into previous section) ─────────────────────────
 * SCOPED: applies only when the wrapped section is a feature-tiles component.
 * Why scoped: a global negative margin gets cancelled by each component's own
 * inner padding (e.g. .mvc-section padding-top = 5–8rem depending on preset),
 * so the wrapper moves up but the visible content doesn't. feature-tiles is
 * the only component currently designed to float over an adjacent section.
 *
 * To make the pull real, we also zero the inner .mvc-section vertical padding
 * on overlap. The container width is preserved by .mvc-container so the tile
 * row reads as a card floating, not a full-width band.
 *
 * z-index keeps overlapping content above the previous section's background.
 */
/* Overlap wrapper z-index — single-level :has() only (nested :has is not
   universally supported and silently invalidates the entire rule when the
   browser rejects it). */
[data-overlap]:has(> .mvc-feature-tiles) {
	position: relative;
	z-index: 5;
}



/* Zero the section's own top padding so the negative margin actually pulls
   the visible content, not just the invisible wrapper. */
[data-overlap]:has(> .mvc-feature-tiles) > .mvc-feature-tiles {
	padding-top: 0;
	padding-bottom: 0;
}

/* CRITICAL: when overlap is active, the inner section's bg-preset background
   would otherwise paint solid across the entire negative-margin region —
   covering the previous section's content instead of letting the tile cards
   float over it. Override to transparent so only the tile cards themselves
   (which have their own image/preset/color backgrounds) are visible in the
   overlap zone. The section background returns to solid below where the tiles
   end... but since the tiles fill the section width edge-to-edge, the
   transparent section background is never visible anyway. */
[data-overlap]:has(> .mvc-feature-tiles) > .mvc-feature-tiles {
	background: transparent !important;
}

[data-overlap="sm"]:has(> .mvc-feature-tiles) { margin-top: calc(-1 * var(--space-12)); }
[data-overlap="md"]:has(> .mvc-feature-tiles) { margin-top: calc(-1 * var(--space-20)); }
[data-overlap="lg"]:has(> .mvc-feature-tiles) { margin-top: calc(-1 * var(--space-28)); }

/* On narrow screens, halve the pull so cards don't crash into the hero text. */
@media (max-width: 640px) {
	[data-overlap="sm"]:has(> .mvc-feature-tiles) { margin-top: calc(-1 * var(--space-6, 1.5rem)); }
	[data-overlap="md"]:has(> .mvc-feature-tiles) { margin-top: calc(-1 * var(--space-10)); }
	[data-overlap="lg"]:has(> .mvc-feature-tiles) { margin-top: calc(-1 * var(--space-14)); }
}

/* ── Body-level preset (page background) ────────────────────────────────── */
body[data-bg-preset="gradient-brand"]   { background: linear-gradient(135deg, var(--mvc-color-primary, var(--color-primary)) 0%, var(--mvc-color-secondary, #0f2060) 100%) !important; min-height: 100vh; }
body[data-bg-preset="gradient-accent"]  { background: linear-gradient(135deg, var(--mvc-color-accent, var(--color-accent)) 0%, var(--mvc-color-primary, var(--color-primary)) 100%) !important; min-height: 100vh; }
body[data-bg-preset="gradient-sunrise"] { background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%) !important; min-height: 100vh; }
body[data-bg-preset="gradient-ocean"]   { background: linear-gradient(135deg, #0ea5e9 0%, #0f172a 100%) !important; min-height: 100vh; }
body[data-bg-preset="metallic-chrome"]  { background: linear-gradient(160deg, #e8e8e8 0%, #ffffff 20%, #c0c0c0 40%, #f5f5f5 55%, #9e9e9e 70%, #e0e0e0 85%, #ffffff 100%) !important; min-height: 100vh; }
body[data-bg-preset="metallic-gold"]    { background: linear-gradient(160deg, #f5d060 0%, #fef9c3 20%, #c8960c 40%, #fde68a 55%, #92650a 70%, #f5d060 85%, #fef9c3 100%) !important; min-height: 100vh; }
body[data-bg-preset="dark-mesh"]        { background: radial-gradient(ellipse 80% 60% at 20% 40%, color-mix(in srgb, var(--mvc-color-primary, #1b2b6b) 55%, transparent) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 70%, color-mix(in srgb, var(--mvc-color-accent, #2563eb) 30%, transparent) 0%, transparent 60%), #0f172a !important; min-height: 100vh; }
body[data-bg-preset="liquid-glass"]     {
	background: linear-gradient(160deg, #dbeafe 0%, #ede9fe 50%, #fce7f3 100%) !important;
	min-height: 100vh;
	position: relative;
}
body[data-bg-preset="liquid-glass"]::before {
	content: '';
	position: fixed;
	inset: 0;
	backdrop-filter: blur(40px) saturate(160%);
	-webkit-backdrop-filter: blur(40px) saturate(160%);
	pointer-events: none;
	z-index: 0;
}
body[data-bg-preset="liquid-glass"] > * {
	position: relative;
	z-index: 1;
}

/* ── Archive components on dark presets ──────────────────────────────────────
   The global p/span/li/label rule above doesn't cover anchors, so explicit-color
   links in archive components (internal-link hub, filter group label) stay dark
   and become unreadable on dark/gradient backgrounds. The filter pill background
   also conflicts when its surface-raised colour washes out on dark wrappers.
   These overrides match the existing per-component pattern in this file (single
   source of truth — do NOT duplicate per component). */

/* Internal-link hub anchors → use the preset's --bp-link (which is white on
   every dark preset and falls back to --bp-body if unset). */
[data-bg-preset="gradient-brand"]   .mvc-archive-links__link,
[data-bg-preset="gradient-accent"]  .mvc-archive-links__link,
[data-bg-preset="gradient-sunrise"] .mvc-archive-links__link,
[data-bg-preset="gradient-ocean"]   .mvc-archive-links__link,
[data-bg-preset="dark-mesh"]        .mvc-archive-links__link,
[data-bg-preset="solid-primary"]    .mvc-archive-links__link,
[data-bg-preset="solid-secondary"]  .mvc-archive-links__link,
[data-bp-text="light"]              .mvc-archive-links__link {
	color: var(--bp-link, var(--bp-body, #fff)) !important;
}

[data-bg-preset="gradient-brand"]   .mvc-archive-links__link:hover,
[data-bg-preset="gradient-accent"]  .mvc-archive-links__link:hover,
[data-bg-preset="gradient-sunrise"] .mvc-archive-links__link:hover,
[data-bg-preset="gradient-ocean"]   .mvc-archive-links__link:hover,
[data-bg-preset="dark-mesh"]        .mvc-archive-links__link:hover,
[data-bg-preset="solid-primary"]    .mvc-archive-links__link:hover,
[data-bg-preset="solid-secondary"]  .mvc-archive-links__link:hover,
[data-bp-text="light"]              .mvc-archive-links__link:hover,
[data-bg-preset="gradient-brand"]   .mvc-archive-links__link:focus-visible,
[data-bg-preset="gradient-accent"]  .mvc-archive-links__link:focus-visible,
[data-bg-preset="gradient-sunrise"] .mvc-archive-links__link:focus-visible,
[data-bg-preset="gradient-ocean"]   .mvc-archive-links__link:focus-visible,
[data-bg-preset="dark-mesh"]        .mvc-archive-links__link:focus-visible,
[data-bg-preset="solid-primary"]    .mvc-archive-links__link:focus-visible,
[data-bg-preset="solid-secondary"]  .mvc-archive-links__link:focus-visible,
[data-bp-text="light"]              .mvc-archive-links__link:focus-visible {
	color: #fff !important;
	opacity: 0.85;
}

/* Internal-link hub count pill — base style is a light-surface pill with muted
   text, which is invisible on dark presets. Swap to a translucent overlay. */
[data-bg-preset="gradient-brand"]   .mvc-archive-links__count,
[data-bg-preset="gradient-accent"]  .mvc-archive-links__count,
[data-bg-preset="gradient-sunrise"] .mvc-archive-links__count,
[data-bg-preset="gradient-ocean"]   .mvc-archive-links__count,
[data-bg-preset="dark-mesh"]        .mvc-archive-links__count,
[data-bg-preset="solid-primary"]    .mvc-archive-links__count,
[data-bg-preset="solid-secondary"]  .mvc-archive-links__count,
[data-bp-text="light"]              .mvc-archive-links__count {
	background-color: rgba(255, 255, 255, 0.12) !important;
	color: rgba(255, 255, 255, 0.85) !important;
}

/* Internal-link hub column heading underline — the muted --color-border is
   invisible on dark, swap to a translucent white. */
[data-bg-preset="gradient-brand"]   .mvc-archive-links__col-heading,
[data-bg-preset="gradient-accent"]  .mvc-archive-links__col-heading,
[data-bg-preset="gradient-sunrise"] .mvc-archive-links__col-heading,
[data-bg-preset="gradient-ocean"]   .mvc-archive-links__col-heading,
[data-bg-preset="dark-mesh"]        .mvc-archive-links__col-heading,
[data-bg-preset="solid-primary"]    .mvc-archive-links__col-heading,
[data-bg-preset="solid-secondary"]  .mvc-archive-links__col-heading,
[data-bp-text="light"]              .mvc-archive-links__col-heading {
	border-block-end-color: rgba(255, 255, 255, 0.2) !important;
}

/* Filter bar group label — explicitly muted in layout5.css; the global span
   rule WOULD cover this, but the explicit non-!important color in layout5.css
   has the same specificity AND comes later in the cascade (specificity tie →
   last one wins). Force it readable on dark wrappers. */
[data-bg-preset="gradient-brand"]   .mvc-archive-filter__group-label,
[data-bg-preset="gradient-accent"]  .mvc-archive-filter__group-label,
[data-bg-preset="gradient-sunrise"] .mvc-archive-filter__group-label,
[data-bg-preset="gradient-ocean"]   .mvc-archive-filter__group-label,
[data-bg-preset="dark-mesh"]        .mvc-archive-filter__group-label,
[data-bg-preset="solid-primary"]    .mvc-archive-filter__group-label,
[data-bg-preset="solid-secondary"]  .mvc-archive-filter__group-label,
[data-bp-text="light"]              .mvc-archive-filter__group-label {
	color: var(--bp-heading, #fff) !important;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	[data-bg-preset="liquid-glass"] > :is(section, div, header)::before { display: none; }
}

/* ── Card-block per-card presets ─────────────────────────────────────────────
   The standard preset rules above use `[data-bg-preset] > :is(section, div,
   header)` — a direct-child combinator — so they only paint a child element,
   not the wrapper itself. On a card item, the FIRST direct-child div is
   `.mvc-card-block__body`, so the global selector would paint just the body
   block instead of the whole card surface — wrong. We neutralise that match
   below and paint the item itself.

   Neutraliser: kill the global preset's BACKGROUND on any direct child div
   that lives inside a card item. Keep the inherited --bp-* tokens flowing,
   since those still drive heading/body contrast. */

.mvc-card-block__item[data-bg-preset] > :is(section, div, header) {
	background: transparent !important;
}

/* Suppress the liquid-glass shimmer pseudo on body div — it's meant for the
   section surface, not a child div inside a card. */
.mvc-card-block__item[data-bg-preset="liquid-glass"] > :is(section, div, header)::before {
	display: none !important;
}

.mvc-card-block__item[data-bg-preset="solid-primary"] {
	background: var(--mvc-color-primary, var(--color-primary)) !important;
	border-color: transparent !important;
	--bp-heading: #ffffff;
	--bp-body: rgba(255,255,255,0.88);
	--bp-link: #ffffff;
}

.mvc-card-block__item[data-bg-preset="solid-secondary"] {
	background: var(--mvc-color-secondary, var(--color-secondary, #0f2060)) !important;
	border-color: transparent !important;
	--bp-heading: #ffffff;
	--bp-body: rgba(255,255,255,0.88);
	--bp-link: #ffffff;
}

.mvc-card-block__item[data-bg-preset="solid-custom"] {
	background: var(--section-solid-color, #f1f5f9) !important;
	border-color: transparent !important;
}

.mvc-card-block__item[data-bg-preset="gradient-brand"] {
	background: linear-gradient(135deg,
		var(--mvc-color-primary, var(--color-primary)) 0%,
		var(--mvc-color-secondary, var(--color-secondary, #0f2060)) 100%) !important;
	border-color: transparent !important;
	--bp-heading: #ffffff;
	--bp-body: rgba(255,255,255,0.88);
	--bp-link: #ffffff;
}

.mvc-card-block__item[data-bg-preset="gradient-accent"] {
	background: linear-gradient(135deg,
		var(--mvc-color-accent, var(--color-accent)) 0%,
		var(--mvc-color-primary, var(--color-primary)) 100%) !important;
	border-color: transparent !important;
	--bp-heading: #ffffff;
	--bp-body: rgba(255,255,255,0.88);
	--bp-link: #ffffff;
}

.mvc-card-block__item[data-bg-preset="gradient-sunrise"] {
	background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%) !important;
	border-color: transparent !important;
	--bp-heading: #ffffff;
	--bp-body: rgba(255,255,255,0.88);
	--bp-link: #ffffff;
}

.mvc-card-block__item[data-bg-preset="gradient-ocean"] {
	background: linear-gradient(135deg, #0ea5e9 0%, #0f172a 100%) !important;
	border-color: transparent !important;
	--bp-heading: #ffffff;
	--bp-body: rgba(255,255,255,0.88);
	--bp-link: #ffffff;
}

.mvc-card-block__item[data-bg-preset="metallic-chrome"] {
	background: linear-gradient(160deg,
		#e8e8e8 0%, #ffffff 20%, #c0c0c0 40%,
		#f5f5f5 55%, #9e9e9e 70%, #e0e0e0 85%, #ffffff 100%) !important;
	border-color: transparent !important;
	--bp-heading: #111111;
	--bp-body: #374151;
	--bp-link: var(--mvc-color-primary, var(--color-primary));
}

.mvc-card-block__item[data-bg-preset="metallic-gold"] {
	background: linear-gradient(160deg,
		#f5d060 0%, #fef9c3 20%, #c8960c 40%,
		#fde68a 55%, #92650a 70%, #f5d060 85%, #fef9c3 100%) !important;
	border-color: transparent !important;
	--bp-heading: #3b2a00;
	--bp-body: #5c4000;
	--bp-link: #3b2a00;
}

.mvc-card-block__item[data-bg-preset="dark-mesh"] {
	background:
		radial-gradient(ellipse 80% 60% at 20% 40%,
			color-mix(in srgb, var(--mvc-color-primary, #1b2b6b) 55%, transparent) 0%,
			transparent 60%),
		radial-gradient(ellipse 60% 50% at 80% 70%,
			color-mix(in srgb, var(--mvc-color-accent, #2563eb) 30%, transparent) 0%,
			transparent 60%),
		#0f172a !important;
	background-color: #0f172a !important;
	border-color: transparent !important;
	--bp-heading: #f1f5f9;
	--bp-body: rgba(226,232,240,0.9);
	--bp-link: #ffffff;
}

.mvc-card-block__item[data-bg-preset="liquid-glass"] {
	background: linear-gradient(135deg,
		rgba(255,255,255,0.18) 0%,
		rgba(200,230,255,0.12) 40%,
		rgba(255,200,240,0.10) 70%,
		rgba(255,255,255,0.16) 100%) !important;
	background-color: rgba(219,234,254,0.4) !important;
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid rgba(255,255,255,0.45) !important;
	--bp-heading: #0f172a;
	--bp-body: #374151;
	--bp-link: var(--mvc-color-primary, var(--color-primary));
}

/* Headings + body text inside a preset card — the global rules already cover
   these because `.mvc-card-block__item > .mvc-card-block__body` is a direct
   `> div` child, BUT the global rules only force colour onto h1–h6/p/span/li/
   label, not the heading on bare items. The card heading is an h3 inside body,
   so it's covered. The card text wrapper is a div, so its inner <p> tags get
   coloured by the global rule. Explicit safety net below in case of edits. */

.mvc-card-block__item[data-bg-preset] .mvc-card-block__heading {
	color: var(--mvc-bp-heading, var(--bp-heading)) !important;
}

.mvc-card-block__item[data-bg-preset] .mvc-card-block__text,
.mvc-card-block__item[data-bg-preset] .mvc-card-block__text p,
.mvc-card-block__item[data-bg-preset] .mvc-card-block__text li {
	color: var(--mvc-bp-body, var(--bp-body)) !important;
}

/* Icon chip — base style uses primary tint that disappears on primary/branded
   backgrounds. Swap to a translucent overlay matching the text colour. */
.mvc-card-block__item[data-bg-preset] .mvc-card-block__icon {
	background: color-mix(in srgb, var(--bp-heading, #fff) 14%, transparent) !important;
	color: var(--bp-heading, #fff) !important;
}

/* Number style — same idea: the primary-coloured numeral collapses on
   primary backgrounds. Use the preset's heading colour. */
.mvc-card-block__item[data-bg-preset] .mvc-card-block__number {
	color: var(--bp-heading, #fff) !important;
	opacity: 0.55;
}

/* Inline CTA arrow link — base colour is --color-primary, invisible on
   primary/branded backgrounds. Use --bp-link, which every preset above sets
   to a contrasting value (white on dark, primary on light). */
.mvc-card-block__item[data-bg-preset] .mvc-card-block__cta {
	color: var(--bp-link, var(--bp-heading, inherit)) !important;
}

.mvc-card-block__item[data-bg-preset] .mvc-card-block__cta:hover {
	opacity: 0.85;
	text-decoration: underline;
}

/* Linked card hover — base hover border is --color-primary, invisible on
   primary backgrounds. Use a translucent overlay instead. */
.mvc-card-block__item--linked[data-bg-preset]:hover,
.mvc-card-block__item--linked[data-bg-preset]:focus-visible {
	border-color: color-mix(in srgb, var(--bp-heading, #fff) 35%, transparent) !important;
}

.mvc-card-block__item--linked[data-bg-preset]:focus-visible {
	outline-color: var(--bp-heading, #fff) !important;
}

/* Manual text overrides at card scope — mirror the section-level light/dark
   forces so editors can hand-override on a per-card basis. */
.mvc-card-block__item[data-bg-preset][data-bp-text="light"] {
	--bp-heading: #ffffff;
	--bp-body: rgba(255,255,255,0.88);
	--bp-link: #ffffff;
}

.mvc-card-block__item[data-bg-preset][data-bp-text="dark"] {
	--bp-heading: #111111;
	--bp-body: #374151;
	--bp-link: var(--mvc-color-primary, var(--color-primary));
}