/* components/service-grid/service-grid.css */

.mvc-service-grid__header {
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
	margin-block-end: var(--space-16);
}

.mvc-service-grid__headline {
	font-size: var(--text-4xl);
	margin-block-end: var(--space-4);
}

.mvc-service-grid__subtext {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	margin: 0;
}

/* ── Category filter bar ────────────────────────────────────────────────── */
.mvc-archive-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-block-end: var(--space-8);
}

.mvc-archive-filters__item {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: var(--space-2) var(--space-4);
	background-color: var(--color-surface-raised);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	text-decoration: none;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border);
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.mvc-archive-filters__item:hover,
.mvc-archive-filters__item--active {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	border-color: var(--color-primary);
}

/* ── Grid ───────────────────────────────────────────────────────────────── */
.mvc-service-grid__grid {
	margin-block-start: var(--space-6);
}

.mvc-post-grid--2col {
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.mvc-post-grid--2col { grid-template-columns: repeat(2, 1fr); }
}

.mvc-post-grid--4col {
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.mvc-post-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.mvc-post-grid--4col { grid-template-columns: repeat(4, 1fr); }
}

/* ── Style overrides ────────────────────────────────────────────────────── */

/* Image overlay cards — STRUCTURE ONLY
   Full-bleed image fills the card; body anchors at the bottom over a tunable
   overlay (--sg-overlay-* vars). Card surface paint comes from the selected
   preset; the editor controls overlay darkness so text-on-image stays
   readable regardless of preset. */
.mvc-service-grid--style-image-overlay-cards .mvc-post-card {
	position: relative;
	overflow: hidden;
	min-height: 340px;
	border-radius: var(--mvc-radius, 0.75rem);
	transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}
.mvc-service-grid--style-image-overlay-cards .mvc-post-card:hover {
	transform: translateY(-4px);
}
.mvc-service-grid--style-image-overlay-cards .mvc-post-card__thumb-link {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
}
.mvc-service-grid--style-image-overlay-cards .mvc-post-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-slow) ease;
}
.mvc-service-grid--style-image-overlay-cards .mvc-post-card:hover .mvc-post-card__thumb {
	transform: scale(1.04);
}
/* Editor-tunable overlay sits between image and body content. */
.mvc-service-grid--style-image-overlay-cards .mvc-post-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--sg-overlay-color);
	opacity: var(--sg-overlay-opacity);
	pointer-events: none;
	transition: opacity var(--duration-normal) ease;
}
/* Body sits above the overlay. Transparent BEM children so the overlay shows
   through; text colors flow from the preset's --card-* tokens. */
.mvc-service-grid--style-image-overlay-cards .mvc-post-card__body,
.mvc-service-grid--style-image-overlay-cards [class*="mvc-post-card__"] {
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
}
.mvc-service-grid--style-image-overlay-cards .mvc-post-card__body {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding: 1.5rem;
}
/* Image-overlay style: hide the description, keep title + CTA only */
.mvc-service-grid--style-image-overlay-cards .mvc-post-card__excerpt {
	display: none !important;
}

/* Clean cards — white background, no border, gentle shadow */
.mvc-service-grid--style-clean-cards {
	--mvc-card-border: none;
}
.mvc-service-grid--style-clean-cards .mvc-post-card {
	border: none !important;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
	border-radius: var(--mvc-radius, 0.75rem);
}
.mvc-service-grid--style-clean-cards .mvc-post-card:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,0.13) !important;
}
.mvc-service-grid--style-clean-cards .mvc-service-grid__grid {
	gap: var(--space-8, 2rem);
}

/* Default cards — no box, no border.
   Gated to grids WITHOUT a card preset; when a preset is selected,
   card-presets block at the end of this file owns borders and bg. */
.mvc-service-grid:not([class*="--style-"]):not([data-card-preset]) .mvc-post-card,
.mvc-service-grid--style-image-overlay-cards .mvc-post-card {
	border: none !important;
}

/* Icon list — horizontal rows, thumbnail hidden, icon + text side by side */
.mvc-service-grid--style-icon-list .mvc-service-grid__grid {
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
.mvc-service-grid--style-icon-list .mvc-post-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-5);
	padding: var(--space-5);
	overflow: visible;
}
.mvc-service-grid--style-icon-list .mvc-post-card__thumb-link {
	display: none;
}
.mvc-service-grid--style-icon-list .mvc-post-card__icon-wrap {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mvc-service-grid--style-icon-list .mvc-post-card__body {
	padding: 0;
	flex: 1;
}
@media (min-width: 768px) {
	.mvc-service-grid--style-icon-list .mvc-service-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Featured + grid — first card spans full width, rest in 3-col grid */
.mvc-service-grid--style-featured-plus-grid .mvc-service-grid__grid {
	grid-template-columns: 1fr 1fr 1fr;
}
.mvc-service-grid--style-featured-plus-grid .mvc-post-card:first-child {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: row;
	gap: var(--space-8);
	align-items: center;
}
.mvc-service-grid--style-featured-plus-grid .mvc-post-card:first-child .mvc-post-card__thumb-link {
	flex: 0 0 45%;
}
@media (max-width: 767px) {
	.mvc-service-grid--style-featured-plus-grid .mvc-service-grid__grid {
		grid-template-columns: 1fr;
	}
	.mvc-service-grid--style-featured-plus-grid .mvc-post-card:first-child {
		flex-direction: column;
	}
}

/* Accordion panels — side-by-side full-height panels that expand on hover */
.mvc-service-grid--style-accordion-panels .mvc-service-grid__grid {
	display: flex !important;
	flex-direction: row;
	gap: 0;
	min-height: 520px;
	overflow: hidden;
	border-radius: var(--mvc-radius, 0.75rem);
}

.mvc-service-grid--style-accordion-panels .mvc-post-card {
	position: relative !important;
	flex: 1;
	overflow: hidden;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: flex var(--duration-slow, 500ms) cubic-bezier(0.4, 0, 0.2, 1);
	transform: none !important;
}

.mvc-service-grid--style-accordion-panels .mvc-post-card:hover {
	flex: 4;
	transform: none !important;
	box-shadow: none !important;
}

/* Background image fills the card */
.mvc-service-grid--style-accordion-panels .mvc-post-card__thumb-link {
	position: absolute !important;
	inset: 0;
	display: block;
	z-index: 0;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

.mvc-service-grid--style-accordion-panels .mvc-post-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-slow, 500ms) ease;
}

.mvc-service-grid--style-accordion-panels .mvc-post-card:hover .mvc-post-card__thumb {
	transform: scale(1.05);
}

/* Editor-tunable overlay sits between image and body content. */
.mvc-service-grid--style-accordion-panels .mvc-post-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--sg-overlay-color) !important;
	opacity: var(--sg-overlay-opacity);
	transition: opacity var(--duration-slow, 500ms) ease;
	pointer-events: none;
}

/* Body — flex column, anchored bottom-left so the vertical title sits
   at the bottom of the collapsed strip and reads upward. On hover it
   relaxes back to a normal horizontal block. */
.mvc-service-grid--style-accordion-panels .mvc-post-card__body {
	position: absolute !important;
	inset: 0 !important;
	z-index: 2;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	align-items: flex-start !important;
	padding: 1.5rem !important;
	margin: 0 !important;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	transition: justify-content var(--duration-slow, 500ms) ease;
}

.mvc-service-grid--style-accordion-panels .mvc-post-card:hover .mvc-post-card__body {
	justify-content: center !important;
}

/* Title — rotated upward, flush left, anchored to bottom of the panel
   while collapsed. On hover it rotates back to horizontal.
   Color flows from the preset's --card-heading. */
.mvc-service-grid--style-accordion-panels .mvc-post-card__title {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 0 0.5rem 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	white-space: nowrap !important;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	transform-origin: left bottom;
	transition: writing-mode 0ms linear var(--duration-slow, 500ms),
				transform var(--duration-slow, 500ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.mvc-service-grid--style-accordion-panels .mvc-post-card:hover .mvc-post-card__title {
	writing-mode: horizontal-tb;
	transform: none;
	white-space: normal !important;
	transition: writing-mode 0ms linear 0ms,
				transform var(--duration-slow, 500ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.mvc-service-grid--style-accordion-panels .mvc-post-card__title a {
	text-decoration: none !important;
}

/* Excerpt — color flows from the preset's --card-body */
.mvc-service-grid--style-accordion-panels .mvc-post-card__excerpt {
	font-size: 0.875rem !important;
	opacity: 0;
	transition: opacity 250ms ease;
	margin: 0 0 0.75rem 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* CTA — color flows from the preset's --card-cta */
.mvc-service-grid--style-accordion-panels .mvc-post-card__more {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.25rem !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	opacity: 0;
	transition: opacity 250ms ease 50ms;
	margin: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

.mvc-service-grid--style-accordion-panels .mvc-post-card:hover .mvc-post-card__excerpt,
.mvc-service-grid--style-accordion-panels .mvc-post-card:hover .mvc-post-card__more {
	opacity: 1 !important;
}

/* Thin divider between panels */
.mvc-service-grid--style-accordion-panels .mvc-post-card + .mvc-post-card {
	border-left: 1px solid rgba(255,255,255,0.12) !important;
}

/* Mobile: stack vertically */
@media (max-width: 767px) {
	.mvc-service-grid--style-accordion-panels .mvc-service-grid__grid {
		flex-direction: column !important;
		min-height: unset;
	}
	.mvc-service-grid--style-accordion-panels .mvc-post-card {
		flex: none !important;
		min-height: 240px;
	}
	.mvc-service-grid--style-accordion-panels .mvc-post-card__body {
		justify-content: center !important;
	}
	.mvc-service-grid--style-accordion-panels .mvc-post-card__title {
		writing-mode: horizontal-tb;
		transform: none;
		white-space: normal !important;
	}
	.mvc-service-grid--style-accordion-panels .mvc-post-card__excerpt,
	.mvc-service-grid--style-accordion-panels .mvc-post-card__more {
		opacity: 1 !important;
		transform: none !important;
	}
	.mvc-service-grid--style-accordion-panels .mvc-post-card + .mvc-post-card {
		border-left: none !important;
		border-top: 1px solid rgba(255,255,255,0.12) !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   BOXED TILE — STRUCTURE ONLY (poster-style card)
   Image on top, solid bar across bottom with centered uppercase title.
   Whole card is the click target. No description, no CTA arrow, no category
   badges. Mirrors the location-grid boxed-tile so the editor gets the same
   look on both grids.

   REQUIRES every card in the grid to have a featured image — cards without
   one will render with an empty image region above the bar (broken-looking
   by design; the editor is responsible for picking the right layout).

   PAINT: bar bg pulls from --card-bg, title color from --card-heading
   OVERLAY: editor-tunable, sits over the image region
   ───────────────────────────────────────────────────────────────────────── */
.mvc-service-grid--style-boxed-tile .mvc-post-card {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden;
	padding: 0 !important;
	border-radius: var(--mvc-radius, 0.5rem) !important;
	transition:
		transform var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default);
}
.mvc-service-grid--style-boxed-tile .mvc-post-card:hover,
.mvc-service-grid--style-boxed-tile .mvc-post-card:focus-within {
	transform: translateY(-3px);
}
.mvc-service-grid--style-boxed-tile .mvc-post-card__thumb-link {
	position: relative;
	z-index: 1;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.mvc-service-grid--style-boxed-tile .mvc-post-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-default);
}
.mvc-service-grid--style-boxed-tile .mvc-post-card:hover .mvc-post-card__thumb {
	transform: scale(1.04);
}
/* Editor-tunable overlay sits on top of the image region only. */
.mvc-service-grid--style-boxed-tile .mvc-post-card__thumb-link::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--sg-overlay-color);
	opacity: var(--sg-overlay-opacity);
	pointer-events: none;
	transition: opacity var(--duration-normal) ease;
}
/* Hide non-title elements in the body */
.mvc-service-grid--style-boxed-tile .mvc-post-card__cats,
.mvc-service-grid--style-boxed-tile .mvc-post-card__excerpt,
.mvc-service-grid--style-boxed-tile .mvc-post-card__more,
.mvc-service-grid--style-boxed-tile .mvc-post-card__icon-wrap {
	display: none !important;
}
/* Body becomes the title bar; bg flows from the preset's --card-bg.
   Note the bar sits as a child of the .mvc-post-card, so the shared base
   rule already paints --card-bg on the card itself; we just need the bar
   to inherit that visual via display: flex without painting over it. */
.mvc-service-grid--style-boxed-tile .mvc-post-card__body {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-height: 88px;
	padding: var(--space-5) var(--space-4) !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	text-align: center;
}
.mvc-service-grid--style-boxed-tile .mvc-post-card__title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: var(--text-base) !important;
	font-weight: var(--font-weight-bold, 700) !important;
	line-height: 1.2 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: none !important;
	border: none !important;
}
.mvc-service-grid--style-boxed-tile .mvc-post-card__title-link {
	text-decoration: none !important;
}
/* Stretched click target — entire card becomes clickable via the title link */
.mvc-service-grid--style-boxed-tile .mvc-post-card__title-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* ─────────────────────────────────────────────────────────────────────────
   HORIZONTAL SCROLL LAYOUT — sibling to the grid layout
   Renders cards in a single horizontal-scrolling row with scroll-snap,
   peek-on-edge, and prev/next arrows (JS-enhanced). Mirrors Maimon Group
   "Concierge Services" section — 7+ cards, see the next two while reading
   the current one. All selectors scoped per [[feedback_variant_css_scoping]].
   ───────────────────────────────────────────────────────────────────────── */

.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__scroller-wrap {
	position: relative;
	margin-block-start: var(--space-6);
	margin-inline: calc(var(--space-6) * -1);
}

@media (min-width: 1024px) {
	.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__scroller-wrap {
		margin-inline: 0;
	}
}

.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__scroller {
	display: flex;
	gap: var(--space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: var(--space-6);
	padding-block: var(--space-2) var(--space-6);
	padding-inline: var(--space-6);
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}

.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__scroller::-webkit-scrollbar {
	display: none;
}

.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__scroller:focus-visible {
	outline: 2px solid var(--color-focus-ring, var(--color-primary));
	outline-offset: 2px;
	border-radius: var(--mvc-radius, 0.5rem);
}

/* Each card becomes a snap stop. Card-card spacing comes from gap above.
   Use flex-basis so we get ~1.2 cards on mobile (peek), 2.3 on tablet,
   3.3 on desktop — exact tail-peek depends on viewport, by design. */
.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__scroller > .mvc-post-card {
	flex: 0 0 82%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	min-width: 0;
}

@media (min-width: 640px) {
	.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__scroller > .mvc-post-card {
		flex-basis: 44%;
	}
}

@media (min-width: 1024px) {
	.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__scroller > .mvc-post-card {
		flex-basis: 30%;
	}
}

@media (min-width: 1280px) {
	.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__scroller > .mvc-post-card {
		flex-basis: 24%;
	}
}

/* Icon size is set via width/height attributes on the <svg>/<img> in
   service-card.php (40x40 default) — CSS must override those attributes
   directly since they have higher specificity than an unset CSS property. */
.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-post-card__icon {
	width: 20px;
	height: 20px;
}

/* Featured-image thumbnail — .mvc-post-card__thumb-link/__thumb have no base
   sizing anywhere (unlike .mvc-post-card__image in utilities.css, which this
   markup doesn't use), so the image rendered at its full intrinsic size.
   object-fit: cover would crop-to-fill and still look "full size" — use
   contain + padding so the artwork itself visibly scales down within the box. */
.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-post-card__thumb-link {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	aspect-ratio: 16 / 6;
	padding: var(--space-4) var(--space-2) var(--space-1);
	overflow: hidden;
}

.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-post-card__thumb {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Prev/next arrows — overlap the scroller edges, hidden until JS reveals.
   Position absolute so they sit over the peek edge of the first/last card. */
.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-12);
	height: var(--space-12);
	padding: 0;
	background-color: var(--color-surface, #fff);
	color: var(--color-text, currentColor);
	border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	font-size: var(--text-lg);
	line-height: 1;
	transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__nav:hover {
	background-color: var(--color-primary);
	color: var(--color-text-inverse, #fff);
	border-color: var(--color-primary);
}

.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__nav:focus-visible {
	outline: 2px solid var(--color-focus-ring, var(--color-primary));
	outline-offset: 2px;
}

.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__nav--prev {
	left: var(--space-2);
}

.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__nav--next {
	right: var(--space-2);
}

@media (min-width: 1024px) {
	.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__nav--prev {
		left: calc(var(--space-6) * -1);
	}
	.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__nav--next {
		right: calc(var(--space-6) * -1);
	}
}

.mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__nav[disabled] {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

/* Dark section variant — flip arrow colors */
.mvc-section--dark .mvc-service-grid[data-layout="horizontal-scroll"] .mvc-service-grid__nav,
.mvc-service-grid--dark[data-layout="horizontal-scroll"] .mvc-service-grid__nav {
	background-color: rgba(255, 255, 255, 0.96);
	color: var(--color-text, #111);
	border-color: rgba(255, 255, 255, 0.18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD PRESETS  (PAINT layer)
   Bundled bg + heading + body + border recipes. Selected via the section's
   data-card-preset="..." attribute, emitted by service-grid.php from the
   sg_card_preset ACF field. Presets reference dashboard-driven tokens
   (--color-primary/-surface) so they automatically adapt per client.

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

   PRESET MAP:
     light          — white card, dark text, subtle border (default)
     light-tinted   — primary-subtle bg, dark text (8% brand tint)
     dark           — primary bg, white text, no border
     dark-gradient  — primary → primary-dark gradient, white text
     brand-gradient — primary → accent gradient, white text

   ── DESIGN MODEL: three independent layers ──
   PAINT (this block, --card-*) → STRUCTURE (style-override blocks above)
   → OVERLAY (--sg-overlay-* on image-using overrides only).
   Presets always paint. Style overrides only rearrange structure — they
   never set colors. Overlay sits on top of any image so the editor can
   tune image darkness without it fighting preset text colors.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared base — applies to every preset, every layout ────────────────
   !important is REQUIRED on bg, border, and color rules to override two
   things: (1) the "default cards — no border" stripper above, and
   (2) bg-presets.css [data-bg-preset] heading/body rules which apply
   color !important to every h1-h6/p inside a section's bg preset wrapper.
   Without !important, picking a card preset inside a section that has a
   bg preset (which is most sections) silently does nothing. See
   [[project_bg_presets_important]]. */
.mvc-service-grid[data-card-preset] .mvc-post-card {
	background: var(--card-bg, var(--color-surface)) !important;
	border: 1px solid var(--card-border, transparent) !important;
	border-radius: var(--mvc-radius, 0.75rem);
	box-shadow: var(--card-shadow, 0 2px 12px rgba(0, 0, 0, 0.06));
	overflow: hidden;
	transition:
		transform var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default);
}

.mvc-service-grid[data-card-preset] .mvc-post-card:hover,
.mvc-service-grid[data-card-preset] .mvc-post-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--card-shadow-hover, 0 10px 28px rgba(0, 0, 0, 0.16));
}

.mvc-service-grid[data-card-preset] .mvc-post-card__title,
.mvc-service-grid[data-card-preset] .mvc-post-card__title a {
	color: var(--card-heading) !important;
}

.mvc-service-grid[data-card-preset] .mvc-post-card__excerpt {
	color: var(--card-body) !important;
}

.mvc-service-grid[data-card-preset] .mvc-post-card__more {
	color: var(--card-cta, var(--card-heading)) !important;
}

/* ── Light — white card, dark heading, muted body, subtle border ──────── */
/* Hardcoded #ffffff (NOT --color-surface): the editor may set dashboard
   Surface to the same value as Primary (i.e. dark). "Light" must mean
   "always a light card" regardless of what surface is set to. Dark heading
   and dark border are also hardcoded so they always have contrast on white. */
.mvc-service-grid[data-card-preset="light"] {
	--card-bg:           #ffffff;
	--card-border:       rgba(0, 0, 0, 0.10);
	--card-heading:      #111111;
	--card-body:         #4b5563;
	--card-cta:          var(--color-primary);
	--card-shadow:       0 2px 12px rgba(0, 0, 0, 0.08);
	--card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.14);
}

/* ── Light Tinted — soft warm off-white, dark text ────────────────────── */
/* Hardcoded warm tint (NOT --color-primary-subtle): when primary is dark,
   color-mix(... 8%, white) is barely visible. A flat soft-gray gives
   readable contrast against the heading regardless of brand color. */
.mvc-service-grid[data-card-preset="light-tinted"] {
	--card-bg:           #f5f3ef;
	--card-border:       transparent;
	--card-heading:      #111111;
	--card-body:         #4b5563;
	--card-cta:          var(--color-primary);
	--card-shadow:       0 2px 12px rgba(0, 0, 0, 0.06);
	--card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.12);
}

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

/* ── Dark Gradient — brand → deeper-brand, white text ─────────────────── */
.mvc-service-grid[data-card-preset="dark-gradient"] .mvc-post-card {
	background:
		linear-gradient(180deg,
			var(--color-primary) 0%,
			var(--color-primary-dark) 100%) !important;
	border-color: transparent !important;
}
.mvc-service-grid[data-card-preset="dark-gradient"] {
	--card-heading:      #ffffff;
	--card-body:         rgba(255, 255, 255, 0.78);
	--card-cta:          var(--color-accent-light);
	--card-shadow:       0 4px 16px rgba(0, 0, 0, 0.20);
	--card-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.30);
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   IMAGE OVERLAY (per-section, editor-tunable)
   When a structural style override puts text over a photographic image
   (image-overlay-cards, accordion-panels) or has the image as the dominant
   visual region (boxed-tile), the overlay sits on top of the image — color
   + opacity are set inline by service-grid.php from ACF fields
   sg_overlay_color / sg_overlay_opacity.

   The overlay is purely a visual mood control; it doesn't force text color.
   The editor tunes overlay darkness to suit whichever preset they picked.
   Defaults: #000 at 40% (matches the previous hardcoded scrim).
   ═══════════════════════════════════════════════════════════════════════════ */
.mvc-service-grid {
	--sg-overlay-color: #000000;
	--sg-overlay-opacity: 0.40;
}

/* ── Image top padding ──────────────────────────────────────────────────── */
.mvc-service-grid--img-pad-sm .mvc-post-card__thumb-link { padding-block-start: var(--space-4); }
.mvc-service-grid--img-pad-md .mvc-post-card__thumb-link { padding-block-start: var(--space-8); }
.mvc-service-grid--img-pad-lg .mvc-post-card__thumb-link { padding-block-start: var(--space-12); }