/* components/feature-strip/feature-strip.css */

.mvc-feature-strip {
	padding-block: var(--space-12);
}

.mvc-feature-strip--alt     { background-color: var(--color-bg-alt); }
.mvc-feature-strip--dark    {
	background: var(--mvc-gradient-hero-dark,
		linear-gradient(160deg, #060c1e 0%, var(--mvc-color-primary, var(--color-primary)) 55%, #0c1a52 100%));
}
.mvc-feature-strip--primary {
	background: var(--mvc-gradient-primary,
		linear-gradient(135deg, var(--mvc-color-primary, var(--color-primary)) 0%, var(--color-primary-dark, #111d4a) 100%));
}

.mvc-feature-strip__header {
	margin-bottom: var(--space-8);
}

.mvc-feature-strip--align-left .mvc-feature-strip__header {
	text-align: left;
	margin-inline: 0;
}

/* ── Edge-to-edge (full-bleed) container ─────────────────────────────────
   When fs_width = 'full' the PHP swaps .mvc-container for .__bleed, which
   stretches to the viewport edge but keeps a small gutter so items don't
   touch the screen edge on desktop. */
.mvc-feature-strip__bleed {
	width: 100%;
	max-width: none;
	padding-inline: clamp(var(--space-4), 4vw, var(--space-12));
	margin-inline: 0;
}

/* ── Side-by-side header (left / right) ─────────────────────────────────── */
.mvc-feature-strip--header-left .mvc-feature-strip__layout,
.mvc-feature-strip--header-right .mvc-feature-strip__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: var(--space-10);
	align-items: start;
}
.mvc-feature-strip--header-right .mvc-feature-strip__layout {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.mvc-feature-strip--header-left .mvc-feature-strip__header,
.mvc-feature-strip--header-right .mvc-feature-strip__header {
	margin-bottom: 0;                          /* layout grid handles spacing */
	text-align: left;
	margin-inline: 0;
	position: sticky;
	top: var(--space-8);                       /* stays in view while scrolling tall items */
}
.mvc-feature-strip--header-right .mvc-feature-strip__header {
	order: 2;                                  /* header sits in 2nd column */
}
@media (max-width: 1023px) {
	.mvc-feature-strip--header-left .mvc-feature-strip__layout,
	.mvc-feature-strip--header-right .mvc-feature-strip__layout {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
	.mvc-feature-strip--header-left .mvc-feature-strip__header,
	.mvc-feature-strip--header-right .mvc-feature-strip__header {
		position: static;
		margin-bottom: var(--space-2);
	}
	.mvc-feature-strip--header-right .mvc-feature-strip__header {
		order: 0;                              /* on mobile, header always on top */
	}
}

/* ── Grid of items ──────────────────────────────────────────────────────── */
.mvc-feature-strip__items {
	display: grid;
	gap: var(--space-6) var(--space-8);
	align-items: stretch;          /* equal-height by default — cards in a row match */
	justify-items: stretch;
	list-style: none;
	padding: 0;
	margin: 0;
}

.mvc-feature-strip__items--1col { grid-template-columns: 1fr; }
.mvc-feature-strip__items--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mvc-feature-strip__items--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mvc-feature-strip__items--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mvc-feature-strip__items--5col { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1023px) {
	.mvc-feature-strip__items--4col,
	.mvc-feature-strip__items--5col {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.mvc-feature-strip__items--3col,
	.mvc-feature-strip__items--4col,
	.mvc-feature-strip__items--5col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 479px) {
	.mvc-feature-strip__items {
		grid-template-columns: 1fr;
	}
}

/* ── Item base ──────────────────────────────────────────────────────────── */
.mvc-feature-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-2);
	max-width: 100%;
	height: 100%;                  /* fill grid cell for equal-height rows */
}

.mvc-feature-strip--align-left .mvc-feature-strip__item {
	align-items: flex-start;
	text-align: left;
}

.mvc-feature-strip__link {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	text-align: inherit;
	gap: var(--space-2);
	color: inherit;
	text-decoration: none;
	height: 100%;                  /* link wrapper fills the item so click target = full card */
	transition: transform var(--transition-fast), color var(--transition-fast);
}
.mvc-feature-strip__link:hover {
	transform: translateY(-2px);
	color: var(--mvc-color-accent, var(--color-accent));
}

.mvc-feature-strip__icon {
	color: var(--mvc-feature-icon-color, var(--mvc-color-accent, var(--color-accent)));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/*
 * Image sizing — uniform across cards.
 * Base height is 64px (works for the dark/light strip variants); the boxed
 * variants (icon-cards / bordered-cards / numbered-steps) override to a
 * larger square so AI-rendered "icon-style" images fill the visual slot.
 * width:100% + object-fit:contain prevents wide images from breaking the
 * grid while keeping every card's image area visually identical.
 */
.mvc-feature-strip__image {
	height: 64px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	flex-shrink: 0;
}

.mvc-feature-strip__step {
	display: none;                 /* shown only in numbered-steps variant */
}

.mvc-feature-strip__title {
	font-size: var(--text-base);
	font-family: var(--mvc-font-accent, var(--mvc-font-body));
	font-weight: var(--font-semibold);
	color: var(--color-card-heading, var(--color-heading, #0f172a));
	margin: 0;
	overflow-wrap: anywhere;
}

.mvc-feature-strip__sublabel {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
	overflow-wrap: anywhere;
}

.mvc-feature-strip--dark .mvc-feature-strip__title,
.mvc-feature-strip--primary .mvc-feature-strip__title { color: var(--color-text-inverse); }
.mvc-feature-strip--dark .mvc-feature-strip__sublabel,
.mvc-feature-strip--primary .mvc-feature-strip__sublabel { color: rgba(255,255,255,0.75); }

/* ── Section header on dark / primary backgrounds ────────────────────────────
   The strip's header (title + subtitle) is rendered by mvc_get_section_header()
   and defaults to dark text (--color-heading / --color-text-muted). On the dark
   and primary background variants those stay unreadable, so force them light.
   The eyebrow keeps its accent color to match the sitewide pattern. */
.mvc-feature-strip--dark .mvc-feature-strip__header .mvc-section-title,
.mvc-feature-strip--primary .mvc-feature-strip__header .mvc-section-title {
	color: var(--color-text-inverse);
}
.mvc-feature-strip--dark .mvc-feature-strip__header .mvc-section-subtitle,
.mvc-feature-strip--primary .mvc-feature-strip__header .mvc-section-subtitle {
	color: rgba(255, 255, 255, 0.78);
}

/* ── Style: Icon Cards (default — equal-height boxed) ───────────────────── */
.mvc-feature-strip--style-icon-cards .mvc-feature-strip__item {
	padding: var(--space-6) var(--space-4);
	border-radius: var(--radius-lg, 12px);
	background: var(--color-surface, var(--color-bg-alt, #f8f8f8));
	box-shadow:
		0 1px 2px rgba(0,0,0,0.04),
		0 4px 14px rgba(0,0,0,0.06);
}
.mvc-feature-strip--style-icon-cards.mvc-feature-strip--alt .mvc-feature-strip__item {
	background: var(--color-bg);
}
.mvc-feature-strip--style-icon-cards.mvc-feature-strip--dark .mvc-feature-strip__item,
.mvc-feature-strip--style-icon-cards.mvc-feature-strip--primary .mvc-feature-strip__item {
	background: rgba(255,255,255,0.06);
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.10),
		0 6px 18px rgba(0,0,0,0.30);
}
.mvc-feature-strip--style-icon-cards .mvc-feature-strip__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md, 10px);
	background: color-mix(in srgb, var(--mvc-color-accent, var(--color-accent)) 12%, transparent);
	padding: var(--space-3);
	margin-bottom: var(--space-1);
}
/* Larger image slot inside cards so AI-rendered icon-images fill the slot. */
.mvc-feature-strip--style-icon-cards .mvc-feature-strip__image {
	height: auto;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 220px;
	border-radius: var(--radius-md, 10px);
	object-fit: cover;
	margin-bottom: var(--space-1);
}
/* Push the sublabel to the bottom so two-line vs one-line titles still align */
.mvc-feature-strip--style-icon-cards .mvc-feature-strip__sublabel {
	margin-top: auto;
}

/* ── Style: Icon + Stat (matches trust-strip icon-stats look) ───────────── */
.mvc-feature-strip--style-icon-stats .mvc-feature-strip__items {
	gap: var(--space-10);
}
.mvc-feature-strip--style-icon-stats .mvc-feature-strip__item {
	padding: var(--space-4) var(--space-6);
	position: relative;
}
.mvc-feature-strip--style-icon-stats .mvc-feature-strip__item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: calc(var(--space-8) * -0.5);
	top: 20%;
	height: 60%;
	width: 1px;
	background: rgba(127,127,127,0.20);
}
.mvc-feature-strip--style-icon-stats.mvc-feature-strip--dark .mvc-feature-strip__item:not(:last-child)::after,
.mvc-feature-strip--style-icon-stats.mvc-feature-strip--primary .mvc-feature-strip__item:not(:last-child)::after {
	background: rgba(255,255,255,0.15);
}
.mvc-feature-strip--style-icon-stats .mvc-feature-strip__icon {
	width: 44px;
	height: 44px;
	filter:
		drop-shadow(0 0 8px rgba(255,255,255,0.20))
		drop-shadow(0 4px 12px rgba(0,0,0,0.20));
}
.mvc-feature-strip--style-icon-stats .mvc-feature-strip__title {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	letter-spacing: -0.01em;
}

/* ── Style: Numbered Steps (boxed, equal height, big numeral) ───────────── */
.mvc-feature-strip--style-numbered-steps .mvc-feature-strip__item {
	padding: var(--space-6) var(--space-4);
	border-radius: var(--radius-lg, 12px);
	background: var(--color-bg);
	box-shadow:
		0 1px 2px rgba(0,0,0,0.04),
		0 4px 14px rgba(0,0,0,0.06);
	position: relative;
	overflow: hidden;
}
.mvc-feature-strip--style-numbered-steps.mvc-feature-strip--dark .mvc-feature-strip__item,
.mvc-feature-strip--style-numbered-steps.mvc-feature-strip--primary .mvc-feature-strip__item {
	background: rgba(255,255,255,0.06);
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.10),
		0 6px 18px rgba(0,0,0,0.30);
}
.mvc-feature-strip--style-numbered-steps .mvc-feature-strip__step {
	display: block;
	font-family: var(--mvc-font-accent, var(--mvc-font-body));
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: var(--font-bold);
	line-height: 1;
	color: var(--mvc-color-accent, var(--color-accent));
	opacity: 0.85;
	margin-bottom: var(--space-2);
}
/* Icon + image still render below the number when both step + icon/image present */
.mvc-feature-strip--style-numbered-steps .mvc-feature-strip__icon {
	width: 40px;
	height: 40px;
	margin-bottom: var(--space-1);
}
.mvc-feature-strip--style-numbered-steps .mvc-feature-strip__image {
	height: auto;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 180px;
	border-radius: var(--radius-md, 10px);
	object-fit: cover;
	margin-bottom: var(--space-1);
}
.mvc-feature-strip--style-numbered-steps .mvc-feature-strip__title {
	font-size: var(--text-lg);
}
.mvc-feature-strip--style-numbered-steps .mvc-feature-strip__sublabel {
	margin-top: auto;
}

/* ── Style: Bordered Cards (outlined, flat, equal height) ───────────────── */
.mvc-feature-strip--style-bordered-cards .mvc-feature-strip__item {
	padding: var(--space-6) var(--space-4);
	border-radius: var(--radius-lg, 12px);
	background: transparent;
	border: 1px solid var(--color-border, rgba(0,0,0,0.10));
	transition: border-color var(--transition-fast), background var(--transition-fast);
	height: auto;                  /* allow card to grow when hover-desc expands */
}
.mvc-feature-strip--style-bordered-cards .mvc-feature-strip__item:hover {
	border-color: var(--mvc-color-accent, var(--color-accent));
	background: color-mix(in srgb, var(--mvc-color-accent, var(--color-accent)) 4%, transparent);
}
.mvc-feature-strip--style-bordered-cards.mvc-feature-strip--dark .mvc-feature-strip__item,
.mvc-feature-strip--style-bordered-cards.mvc-feature-strip--primary .mvc-feature-strip__item {
	border-color: rgba(255,255,255,0.15);
}
.mvc-feature-strip--style-bordered-cards.mvc-feature-strip--dark .mvc-feature-strip__item:hover,
.mvc-feature-strip--style-bordered-cards.mvc-feature-strip--primary .mvc-feature-strip__item:hover {
	border-color: rgba(255,255,255,0.40);
	background: rgba(255,255,255,0.04);
}
.mvc-feature-strip--style-bordered-cards .mvc-feature-strip__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mvc-color-accent, var(--color-accent)) 12%, transparent);
	padding: var(--space-3);
	margin-bottom: var(--space-1);
}
.mvc-feature-strip--style-bordered-cards .mvc-feature-strip__image {
	height: auto;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 200px;
	border-radius: var(--radius-md, 10px);
	object-fit: cover;
	margin-bottom: var(--space-1);
}
.mvc-feature-strip--style-bordered-cards .mvc-feature-strip__sublabel {
	margin-top: auto;
}

/* ── Style: Logo bar ─────────────────────────────────────────────────────── */
.mvc-feature-strip--style-logo-bar .mvc-feature-strip__items {
	align-items: center;
}
.mvc-feature-strip--style-logo-bar .mvc-feature-strip__item {
	padding: 0;
	background: transparent;
	box-shadow: none;
	height: auto;
}
.mvc-feature-strip--style-logo-bar .mvc-feature-strip__image {
	height: 56px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter var(--transition-fast), opacity var(--transition-fast);
}
.mvc-feature-strip--style-logo-bar .mvc-feature-strip__link:hover .mvc-feature-strip__image,
.mvc-feature-strip--style-logo-bar .mvc-feature-strip__item:hover .mvc-feature-strip__image {
	filter: grayscale(0);
	opacity: 1;
}
.mvc-feature-strip--style-logo-bar.mvc-feature-strip--dark .mvc-feature-strip__image,
.mvc-feature-strip--style-logo-bar.mvc-feature-strip--primary .mvc-feature-strip__image {
	filter: grayscale(1) brightness(2);
}
.mvc-feature-strip--style-logo-bar .mvc-feature-strip__title,
.mvc-feature-strip--style-logo-bar .mvc-feature-strip__sublabel {
	display: none;
}

/* ── Style: Inline Badges (single row, scroll on overflow) ──────────────── */
.mvc-feature-strip--style-badges-inline .mvc-feature-strip__items {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-8);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.mvc-feature-strip--style-badges-inline .mvc-feature-strip__items::-webkit-scrollbar {
	display: none;
}
.mvc-feature-strip--style-badges-inline .mvc-feature-strip__item {
	flex-direction: row;
	align-items: center;
	flex-shrink: 0;
	gap: var(--space-3);
	text-align: left;
	height: auto;
}
.mvc-feature-strip--style-badges-inline .mvc-feature-strip__icon {
	width: 40px;
	height: 40px;
}
.mvc-feature-strip--style-badges-inline .mvc-feature-strip__image {
	height: 40px;
	width: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD PRESETS  (PAINT layer)
   Bundled bg + heading + text + icon recipes for card-shaped feature-strip
   styles (icon-cards, numbered-steps, bordered-cards). Selected via the
   section's data-card-preset="..." attribute, emitted by feature-strip.php
   from the fs_card_preset ACF field (only when style is card-shaped).

   Per [[feedback_variant_css_scoping]], every selector here carries the
   data-card-preset ancestor — no bare .mvc-feature-strip__item rules.

   PRESET MAP:
     light          — white card, dark text, subtle border
     light-tinted   — soft warm tint, dark text
     dark           — primary bg, white text, no border
     dark-glass     — translucent glass card (for dark sections)
     brand-gradient — primary → accent gradient, white text

   !important is REQUIRED to override (1) the existing fs_bg variants for dark/
   primary section bgs that already paint cards, and (2) bg-presets.css text
   color rules. See [[project_bg_presets_important]].
   ═══════════════════════════════════════════════════════════════════════════ */

.mvc-feature-strip[data-card-preset] .mvc-feature-strip__item {
	background: var(--fs-card-bg, var(--color-surface)) !important;
	border: 1px solid var(--fs-card-border, transparent) !important;
	box-shadow: var(--fs-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.06)) !important;
}

.mvc-feature-strip[data-card-preset] .mvc-feature-strip__item:hover {
	border-color: var(--fs-card-border-hover, var(--fs-card-border, transparent)) !important;
}

.mvc-feature-strip[data-card-preset] .mvc-feature-strip__title {
	color: var(--fs-card-heading) !important;
}

.mvc-feature-strip[data-card-preset] .mvc-feature-strip__sublabel,
.mvc-feature-strip[data-card-preset] .mvc-feature-strip__desc {
	color: var(--fs-card-body) !important;
}

.mvc-feature-strip[data-card-preset] .mvc-feature-strip__icon {
	color: var(--fs-card-icon-color, var(--fs-card-heading)) !important;
	background: var(--fs-card-icon-bg, color-mix(in srgb, var(--fs-card-heading) 12%, transparent)) !important;
}

.mvc-feature-strip[data-card-preset] .mvc-feature-strip__step {
	color: var(--fs-card-cta, var(--fs-card-heading)) !important;
}

/* ── Light — white card, dark text, subtle border ─────────────────────── */
.mvc-feature-strip[data-card-preset="light"] {
	--fs-card-bg:           #ffffff;
	--fs-card-border:       rgba(0, 0, 0, 0.10);
	--fs-card-border-hover: var(--color-primary);
	--fs-card-heading:      #111111;
	--fs-card-body:         #4b5563;
	--fs-card-cta:          var(--color-primary);
	--fs-card-icon-bg:      color-mix(in srgb, var(--color-primary) 12%, transparent);
	--fs-card-icon-color:   var(--color-primary);
	--fs-card-shadow:       0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* ── Light Tinted — soft warm off-white, dark text ────────────────────── */
.mvc-feature-strip[data-card-preset="light-tinted"] {
	--fs-card-bg:           #f5f3ef;
	--fs-card-border:       transparent;
	--fs-card-border-hover: var(--color-primary);
	--fs-card-heading:      #111111;
	--fs-card-body:         #4b5563;
	--fs-card-cta:          var(--color-primary);
	--fs-card-icon-bg:      color-mix(in srgb, var(--color-primary) 14%, transparent);
	--fs-card-icon-color:   var(--color-primary);
	--fs-card-shadow:       0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.05);
}

/* ── Dark — solid brand color, white text ─────────────────────────────── */
.mvc-feature-strip[data-card-preset="dark"] {
	--fs-card-bg:           var(--color-primary);
	--fs-card-border:       transparent;
	--fs-card-border-hover: rgba(255, 255, 255, 0.30);
	--fs-card-heading:      #ffffff;
	--fs-card-body:         rgba(255, 255, 255, 0.78);
	--fs-card-cta:          var(--color-accent-light, #ffffff);
	--fs-card-icon-bg:      rgba(255, 255, 255, 0.14);
	--fs-card-icon-color:   #ffffff;
	--fs-card-shadow:       0 4px 16px rgba(0, 0, 0, 0.18);
}

/* ── Dark Glass — translucent card (for dark/gradient sections) ───────── */
.mvc-feature-strip[data-card-preset="dark-glass"] .mvc-feature-strip__item {
	background: rgba(255, 255, 255, 0.06) !important;
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
}
.mvc-feature-strip[data-card-preset="dark-glass"] .mvc-feature-strip__item:hover {
	background: rgba(255, 255, 255, 0.10) !important;
}
.mvc-feature-strip[data-card-preset="dark-glass"] {
	--fs-card-border:       rgba(255, 255, 255, 0.10);
	--fs-card-border-hover: rgba(255, 255, 255, 0.30);
	--fs-card-heading:      #ffffff;
	--fs-card-body:         rgba(255, 255, 255, 0.78);
	--fs-card-cta:          var(--color-accent-light, #ffffff);
	--fs-card-icon-bg:      rgba(255, 255, 255, 0.14);
	--fs-card-icon-color:   #ffffff;
	--fs-card-shadow:       0 0 0 1px rgba(255, 255, 255, 0.10), 0 6px 18px rgba(0, 0, 0, 0.30);
}

/* ── Hover Description ───────────────────────────────────────────────────
   Hidden by default; slides in when the card (or its link) is hovered.
   Works on any card-shaped style (icon-cards, bordered-cards, numbered-steps).
   Non-card styles (icon-stats, logo-bar, badges-inline) are not affected since
   those items have no fixed height or card surface to reveal against. */
.mvc-feature-strip__desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
	overflow-wrap: anywhere;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition:
		max-height 0.35s ease,
		opacity    0.25s ease,
		margin-top 0.25s ease;
}

.mvc-feature-strip__item:hover .mvc-feature-strip__desc {
	max-height: 12rem;
	opacity: 1;
	margin-top: var(--space-2);
}

/* Inherit card-preset text color on dark/gradient presets */
.mvc-feature-strip[data-card-preset="dark"] .mvc-feature-strip__desc,
.mvc-feature-strip[data-card-preset="dark-glass"] .mvc-feature-strip__desc,
.mvc-feature-strip[data-card-preset="brand-gradient"] .mvc-feature-strip__desc {
	color: rgba(255, 255, 255, 0.72);
}

/* Dark / primary section bgs (no preset) */
.mvc-feature-strip--dark .mvc-feature-strip__desc,
.mvc-feature-strip--primary .mvc-feature-strip__desc {
	color: rgba(255, 255, 255, 0.72);
}

/* ── Brand Gradient — primary → accent, white text ────────────────────── */
.mvc-feature-strip[data-card-preset="brand-gradient"] .mvc-feature-strip__item {
	background:
		linear-gradient(135deg,
			var(--color-primary) 0%,
			var(--color-accent) 100%) !important;
	border-color: transparent !important;
}
.mvc-feature-strip[data-card-preset="brand-gradient"] {
	--fs-card-heading:      #ffffff;
	--fs-card-body:         rgba(255, 255, 255, 0.86);
	--fs-card-cta:          #ffffff;
	--fs-card-icon-bg:      rgba(255, 255, 255, 0.18);
	--fs-card-icon-color:   #ffffff;
	--fs-card-shadow:       0 4px 16px rgba(0, 0, 0, 0.20);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPLIT LAYOUT  (fs_split_layout = 'split')
   Each card becomes a 2-column row: media side | text side.
   Column ratio is controlled via --fs-split-cols (set inline by PHP from
   item_col_split). Default is 1fr 1fr (50/50).
   Media side and text side each accept an independent background color
   (item_media_bg / item_text_bg) emitted as inline style="background:…".
   ═══════════════════════════════════════════════════════════════════════════ */

.mvc-feature-strip--split .mvc-feature-strip__items {
	gap: var(--space-4);
}

/* In split mode, all column helpers collapse to 1col so every item spans
   the full row width — the internal split grid takes over. */
.mvc-feature-strip--split .mvc-feature-strip__items[class*="col"] {
	grid-template-columns: 1fr;
}

.mvc-feature-strip--split .mvc-feature-strip__item--split {
	display: grid;
	grid-template-columns: var(--fs-split-cols, 1fr 1fr);
	align-items: stretch;
	text-align: left;
	gap: 0;
	border-radius: var(--radius-lg, 12px);
	overflow: hidden;
	background: var(--color-surface, var(--color-bg-alt));
	box-shadow:
		0 1px 2px rgba(0,0,0,0.04),
		0 4px 14px rgba(0,0,0,0.06);
	height: auto;
}

/* Media-right: swap column order */
.mvc-feature-strip--split .mvc-feature-strip__item--media-right {
	direction: rtl;
}
.mvc-feature-strip--split .mvc-feature-strip__item--media-right > * {
	direction: ltr;
}

/* Media column */
.mvc-feature-strip--split .mvc-feature-strip__media-col {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-6);
	background: var(--color-bg-alt);
	flex-shrink: 0;
}

.mvc-feature-strip--split .mvc-feature-strip__media-col .mvc-feature-strip__image {
	width: 100%;
	height: 100%;
	min-height: 160px;
	object-fit: cover;
	border-radius: 0;
	max-width: none;
	aspect-ratio: auto;
}

.mvc-feature-strip--split .mvc-feature-strip__media-col .mvc-feature-strip__icon {
	width: 64px;
	height: 64px;
}

.mvc-feature-strip--split .mvc-feature-strip__media-col .mvc-feature-strip__step {
	display: block;
	font-family: var(--mvc-font-accent, var(--mvc-font-body));
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: var(--font-bold);
	line-height: 1;
	color: var(--mvc-color-accent, var(--color-accent));
	opacity: 0.85;
}

/* Text column */
.mvc-feature-strip--split .mvc-feature-strip__text-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-6) var(--space-8);
}

/* Step number hidden inside text col in split mode — only shown in media col */
.mvc-feature-strip--split .mvc-feature-strip__text-col .mvc-feature-strip__step {
	display: none;
}

/* Desc visible by default in split (no hover trick — layout has space) */
.mvc-feature-strip--split .mvc-feature-strip__text-col .mvc-feature-strip__desc {
	max-height: none;
	opacity: 1;
	margin-top: 0;
	overflow: visible;
}

/* Link wrapper in split: fill the card row */
.mvc-feature-strip--split .mvc-feature-strip__item--split > .mvc-feature-strip__link {
	display: contents; /* let media-col / text-col participate in the grid */
}

/* Dark / primary bg adaptations */
.mvc-feature-strip--split.mvc-feature-strip--dark  .mvc-feature-strip__item--split,
.mvc-feature-strip--split.mvc-feature-strip--primary .mvc-feature-strip__item--split {
	background: rgba(255,255,255,0.06);
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.10),
		0 6px 18px rgba(0,0,0,0.30);
}

.mvc-feature-strip--split.mvc-feature-strip--dark  .mvc-feature-strip__media-col,
.mvc-feature-strip--split.mvc-feature-strip--primary .mvc-feature-strip__media-col {
	background: rgba(255,255,255,0.08);
}

/* ── Style: Icon Cards Flip (small icon, hover reveals desc, hides icon+sublabel) ── */
.mvc-feature-strip--style-icon-cards-flip .mvc-feature-strip__item {
	padding: var(--space-6) var(--space-4);
	border-radius: var(--radius-lg, 12px);
	background: var(--color-surface, var(--color-bg-alt, #f8f8f8));
	box-shadow:
		0 1px 2px rgba(0,0,0,0.04),
		0 4px 14px rgba(0,0,0,0.06);
	transition:
		box-shadow var(--transition-fast),
		background var(--transition-fast);
	overflow: hidden;
}
.mvc-feature-strip--style-icon-cards-flip.mvc-feature-strip--alt .mvc-feature-strip__item {
	background: var(--color-bg);
}
.mvc-feature-strip--style-icon-cards-flip.mvc-feature-strip--dark .mvc-feature-strip__item,
.mvc-feature-strip--style-icon-cards-flip.mvc-feature-strip--primary .mvc-feature-strip__item {
	background: rgba(255,255,255,0.06);
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.10),
		0 6px 18px rgba(0,0,0,0.30);
}

/* Icon — half the size of icon-cards (28px vs 56px) */
.mvc-feature-strip--style-icon-cards-flip .mvc-feature-strip__icon {
	width: 28px;
	height: 28px;
	border-radius: var(--radius-md, 10px);
	background: color-mix(in srgb, var(--mvc-color-accent, var(--color-accent)) 12%, transparent);
	padding: var(--space-1);
	margin-bottom: var(--space-1);
	transition:
		opacity    0.25s ease,
		max-height 0.25s ease,
		transform  0.25s ease;
}

.mvc-feature-strip--style-icon-cards-flip .mvc-feature-strip__sublabel {
	margin-top: auto;
	transition:
		opacity    0.20s ease,
		max-height 0.20s ease;
}

/* On hover: icon + sublabel fade out, long desc slides in */
.mvc-feature-strip--style-icon-cards-flip .mvc-feature-strip__item:hover .mvc-feature-strip__icon,
.mvc-feature-strip--style-icon-cards-flip .mvc-feature-strip__link:hover .mvc-feature-strip__icon {
	opacity: 0;
	max-height: 0;
	padding: 0;
	margin: 0;
	transform: scale(0.8);
}

.mvc-feature-strip--style-icon-cards-flip .mvc-feature-strip__item:hover .mvc-feature-strip__sublabel,
.mvc-feature-strip--style-icon-cards-flip .mvc-feature-strip__link:hover .mvc-feature-strip__sublabel {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	margin: 0;
}

/* Desc: hidden by default, slides in on hover (same mechanism as global __desc) */
.mvc-feature-strip--style-icon-cards-flip .mvc-feature-strip__desc {
	font-size: var(--text-xs, 0.75rem);
	line-height: 1.5;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		max-height 0.35s ease,
		opacity    0.25s ease,
		margin-top 0.25s ease;
}

.mvc-feature-strip--style-icon-cards-flip .mvc-feature-strip__item:hover .mvc-feature-strip__desc,
.mvc-feature-strip--style-icon-cards-flip .mvc-feature-strip__link:hover .mvc-feature-strip__desc {
	max-height: 12rem;
	opacity: 1;
	margin-top: var(--space-2);
}

/* Image slot — half the size of icon-cards (110px vs 220px) */
.mvc-feature-strip--style-icon-cards-flip .mvc-feature-strip__image {
	height: auto;
	width: 110px;
	aspect-ratio: 1 / 1;
	max-width: 110px;
	border-radius: var(--radius-md, 10px);
	object-fit: cover;
	margin-bottom: var(--space-1);
	flex-shrink: 0;
	transition:
		opacity    0.25s ease,
		max-height 0.25s ease,
		transform  0.25s ease;
}
.mvc-feature-strip--style-icon-cards-flip .mvc-feature-strip__item:hover .mvc-feature-strip__image,
.mvc-feature-strip--style-icon-cards-flip .mvc-feature-strip__link:hover .mvc-feature-strip__image {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	margin: 0;
}

/* Responsive: stack media above text on narrow screens */
@media (max-width: 767px) {
	.mvc-feature-strip--split .mvc-feature-strip__item--split {
		grid-template-columns: 1fr !important; /* override inline col ratio */
		direction: ltr;
	}

	.mvc-feature-strip--split .mvc-feature-strip__media-col .mvc-feature-strip__image {
		min-height: 200px;
	}
}