/* components/location-grid/location-grid.css */

.mvc-location-grid .mvc-service-grid__header {
	margin-block-end: var(--space-16);
}

/* Map panel spacing when shown with grid.
   Radius + depth come from the embedded map-multipin's modifier classes via
   the --mvc-map-radius / --mvc-map-depth custom properties. We avoid setting
   them here so the editor's lg_map_radius / lg_map_depth selections (which
   are forwarded to map-multipin) actually apply. */
.mvc-location-grid .mvc-map-multipin {
	margin-block-end: var(--space-8);
}

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

/* ─────────────────────────────────────────────────────────────────────────
   PILL STYLES — two variants
   ───────────────────────────────────────────────────────────────────────── */

/* Shared base for both pill styles. Targets the section so the rules apply
   regardless of which variant is selected. Uses higher specificity than the
   design-behaviors.css [class*="mvc-"][class*="-card"] wildcards. */
.mvc-location-grid--style-pill-links .mvc-post-grid,
.mvc-location-grid--style-pill-with-image .mvc-post-grid {
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--space-3);
	grid-template-columns: none !important;
}

.mvc-location-grid--style-pill-links .mvc-post-card,
.mvc-location-grid--style-pill-links .mvc-location-card,
.mvc-location-grid--style-pill-with-image .mvc-post-card,
.mvc-location-grid--style-pill-with-image .mvc-location-card {
	display: inline-flex !important;
	padding: 0 !important;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	overflow: visible !important;
	min-height: 0 !important;
	margin: 0 !important;
}

.mvc-location-grid--style-pill-links .mvc-post-card__body,
.mvc-location-grid--style-pill-with-image .mvc-post-card__body {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: var(--space-2) !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* Hide non-title elements in BOTH variants */
.mvc-location-grid--style-pill-links .mvc-post-card__cats,
.mvc-location-grid--style-pill-links .mvc-location-card__geo,
.mvc-location-grid--style-pill-links .mvc-post-card__excerpt,
.mvc-location-grid--style-pill-links .mvc-post-card__more,
.mvc-location-grid--style-pill-links .mvc-quick-answer,
.mvc-location-grid--style-pill-with-image .mvc-post-card__cats,
.mvc-location-grid--style-pill-with-image .mvc-location-card__geo,
.mvc-location-grid--style-pill-with-image .mvc-post-card__excerpt,
.mvc-location-grid--style-pill-with-image .mvc-post-card__more,
.mvc-location-grid--style-pill-with-image .mvc-quick-answer {
	display: none !important;
}

/* Title becomes the clickable pill body. The <h2>/<h3> wrapper is reset to
   inline so it sits flush inside the pill. The actual pill is the inner <a>. */
.mvc-location-grid--style-pill-links .mvc-post-card__title,
.mvc-location-grid--style-pill-with-image .mvc-post-card__title {
	display: inline-flex !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: var(--text-sm) !important;
	font-weight: var(--font-weight-medium) !important;
	line-height: 1.2 !important;
	background: none !important;
	border: none !important;
}

.mvc-location-grid--style-pill-links .mvc-post-card__title-link,
.mvc-location-grid--style-pill-with-image .mvc-post-card__title-link {
	display: inline-flex !important;
	align-items: center !important;
	padding: var(--space-2) var(--space-5) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-full) !important;
	background-color: var(--color-surface) !important;
	color: var(--color-text) !important;
	text-decoration: none !important;
	transition:
		background-color var(--duration-normal) var(--ease-default),
		color var(--duration-normal) var(--ease-default),
		border-color var(--duration-normal) var(--ease-default);
}

.mvc-location-grid--style-pill-links .mvc-post-card__title-link:hover,
.mvc-location-grid--style-pill-links .mvc-post-card__title-link:focus-visible,
.mvc-location-grid--style-pill-with-image .mvc-post-card__title-link:hover,
.mvc-location-grid--style-pill-with-image .mvc-post-card__title-link:focus-visible {
	background-color: var(--color-primary) !important;
	color: #fff !important;
	border-color: var(--color-primary) !important;
}

/* ── Pill Links — title only (hide thumbnail) ─────────────────────────── */
.mvc-location-grid--style-pill-links .mvc-post-card__thumb-link,
.mvc-location-grid--style-pill-links .mvc-post-card__thumb {
	display: none !important;
}

/* ── Pill with Image — show thumbnail next to title ───────────────────── */
.mvc-location-grid--style-pill-with-image .mvc-post-card {
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-full) !important;
	padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1) !important;
	background-color: var(--color-surface) !important;
	transition:
		background-color var(--duration-normal) var(--ease-default),
		border-color var(--duration-normal) var(--ease-default);
}
.mvc-location-grid--style-pill-with-image .mvc-post-card:hover,
.mvc-location-grid--style-pill-with-image .mvc-post-card:focus-within {
	border-color: var(--color-primary) !important;
	background-color: var(--color-primary-subtle) !important;
}
.mvc-location-grid--style-pill-with-image .mvc-post-card__thumb-link {
	display: inline-flex !important;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full) !important;
	overflow: hidden !important;
}
.mvc-location-grid--style-pill-with-image .mvc-post-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* When thumbnail is shown, the title pill loses its standalone border —
   the whole card is the pill */
.mvc-location-grid--style-pill-with-image .mvc-post-card__title-link {
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	color: var(--color-text) !important;
}
.mvc-location-grid--style-pill-with-image .mvc-post-card__title-link:hover,
.mvc-location-grid--style-pill-with-image .mvc-post-card__title-link:focus-visible {
	background: none !important;
	color: var(--color-primary-dark) !important;
	border: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   LOCATION CARDS — standard card with cropped image (kept from original)
   ───────────────────────────────────────────────────────────────────────── */
.mvc-location-grid--style-location-cards .mvc-post-card__thumb-link {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.mvc-location-grid--style-location-cards .mvc-post-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────────────────
   TWO COLUMN — two variants: full cards and titles only
   ───────────────────────────────────────────────────────────────────────── */

/* Two Column — Full Cards: existing behavior, 2 columns of normal cards */
.mvc-location-grid--style-two-column-cards .mvc-post-grid {
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--space-6) !important;
}
@media (max-width: 639px) {
	.mvc-location-grid--style-two-column-cards .mvc-post-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Two Column — Titles Only: dense list of post titles in two columns
   No thumbnail, no description, no CTA — just title with arrow on hover */
.mvc-location-grid--style-two-column-titles .mvc-post-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 0 var(--space-8) !important;
}
.mvc-location-grid--style-two-column-titles .mvc-post-card,
.mvc-location-grid--style-two-column-titles .mvc-location-card {
	padding: 0 !important;
	background: none !important;
	border: none !important;
	border-block-end: 1px solid var(--color-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	min-height: 0 !important;
}
.mvc-location-grid--style-two-column-titles .mvc-post-card__thumb-link,
.mvc-location-grid--style-two-column-titles .mvc-post-card__cats,
.mvc-location-grid--style-two-column-titles .mvc-location-card__geo,
.mvc-location-grid--style-two-column-titles .mvc-post-card__excerpt,
.mvc-location-grid--style-two-column-titles .mvc-post-card__more,
.mvc-location-grid--style-two-column-titles .mvc-quick-answer {
	display: none !important;
}
.mvc-location-grid--style-two-column-titles .mvc-post-card__body {
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}
.mvc-location-grid--style-two-column-titles .mvc-post-card__title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: var(--text-base, 1rem) !important;
	font-weight: var(--font-weight-medium) !important;
}
.mvc-location-grid--style-two-column-titles .mvc-post-card__title-link {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--space-3) !important;
	padding: var(--space-3) 0 !important;
	color: var(--color-text) !important;
	text-decoration: none !important;
	transition: color var(--duration-normal) var(--ease-default);
}
.mvc-location-grid--style-two-column-titles .mvc-post-card__title-link::after {
	content: '→';
	opacity: 0;
	transform: translateX(-4px);
	transition:
		opacity var(--duration-normal) var(--ease-default),
		transform var(--duration-normal) var(--ease-default);
	color: var(--color-primary);
}
.mvc-location-grid--style-two-column-titles .mvc-post-card__title-link:hover,
.mvc-location-grid--style-two-column-titles .mvc-post-card__title-link:focus-visible {
	color: var(--color-primary-dark) !important;
}
.mvc-location-grid--style-two-column-titles .mvc-post-card__title-link:hover::after,
.mvc-location-grid--style-two-column-titles .mvc-post-card__title-link:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}
@media (max-width: 639px) {
	.mvc-location-grid--style-two-column-titles .mvc-post-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   SIDE-BY-SIDE map + grid layout (lg_map_position = left | right)
   Triggered by PHP wrapping the grid + map in .mvc-location-grid__split with
   a directional modifier. Single-column card stacking is set by PHP via
   mvc-post-grid--1col on the inner grid (already in layout5.css).

   All rules use !important because the section may also have a
   style-override class (e.g. --style-pill-links) whose rules cascade later
   and can collapse grid items unintentionally.
   ───────────────────────────────────────────────────────────────────────── */
.mvc-location-grid .mvc-location-grid__split {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--space-6) !important;
	align-items: stretch !important;
	width: 100% !important;
}

.mvc-location-grid .mvc-location-grid__split--map-right .mvc-location-grid__split-map {
	order: 2 !important;
}
.mvc-location-grid .mvc-location-grid__split--map-right .mvc-location-grid__split-list {
	order: 1 !important;
}

.mvc-location-grid .mvc-location-grid__split-map {
	position: sticky;
	top: var(--space-6);
	height: 600px !important;
	min-height: 600px !important;
	width: 100% !important;
	display: block !important;
	border-radius: var(--mvc-map-radius, var(--radius-lg));
	overflow: hidden;
	background-color: var(--color-surface-raised);
	box-shadow: var(--mvc-map-depth, var(--shadow-md));
}

/* Radius modifiers on the split-map wrapper (forwarded from lg_map_radius).
   Needed because the wrapper clips the embedded map with overflow:hidden, so
   the embedded map's own radius is invisible and the wrapper must carry it. */
.mvc-location-grid__split-map--radius-none { --mvc-map-radius: 0; }
.mvc-location-grid__split-map--radius-sm   { --mvc-map-radius: var(--radius-sm); }
.mvc-location-grid__split-map--radius-md   { --mvc-map-radius: var(--radius-md); }
.mvc-location-grid__split-map--radius-lg   { --mvc-map-radius: var(--radius-lg); }
.mvc-location-grid__split-map--radius-xl   { --mvc-map-radius: var(--radius-xl); }

/* Depth modifiers — same reason. */
.mvc-location-grid__split-map--depth-none    { --mvc-map-depth: none; }
.mvc-location-grid__split-map--depth-soft    { --mvc-map-depth: var(--shadow-md); }
.mvc-location-grid__split-map--depth-strong  { --mvc-map-depth: var(--shadow-lg); }
.mvc-location-grid__split-map--depth-layered {
	--mvc-map-depth:
		0 2px 4px rgb(0 0 0 / 0.06),
		0 12px 24px -8px rgb(0 0 0 / 0.18),
		0 24px 48px -16px rgb(0 0 0 / 0.12);
}
/* The map-multipin component renders as a full <section class="mvc-section
   mvc-section--sm mvc-map-multipin"> with its own padding, its own container
   with horizontal padding, and a canvas with a FIXED 560px height. To get it
   to fill the 600px split column we have to override all three: section
   padding to 0, container padding to 0, canvas height to 100%. */
.mvc-location-grid .mvc-location-grid__split-map > section,
.mvc-location-grid .mvc-location-grid__split-map .mvc-map-multipin {
	height: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	display: block !important;
}
.mvc-location-grid .mvc-location-grid__split-map .mvc-container {
	max-width: none !important;
	padding-inline: 0 !important;
	padding: 0 !important;
	height: 100% !important;
	width: 100% !important;
}
.mvc-location-grid .mvc-location-grid__split-map .mvc-map-multipin__wrap {
	height: 100% !important;
	width: 100% !important;
	display: block !important;
}
/* Override the fixed canvas heights (--sm 300px / --md 420px / --lg 560px /
   --full 70vh) — inside the split column the canvas should fill 100% of the
   column height, not its own intrinsic height.

   IMPORTANT: percentage heights only resolve when every ancestor has an
   explicit height. Rather than relying on inheritance through 4 nested
   elements (section → __wrap → __canvas), set the canvas to a fixed 600px
   directly. This matches the split-map column height exactly. Leaflet then
   measures a definite pixel value and tiles render correctly. */
.mvc-location-grid .mvc-location-grid__split-map .mvc-map-multipin__canvas,
.mvc-location-grid .mvc-location-grid__split-map .mvc-map-single__canvas--sm,
.mvc-location-grid .mvc-location-grid__split-map .mvc-map-single__canvas--md,
.mvc-location-grid .mvc-location-grid__split-map .mvc-map-single__canvas--lg,
.mvc-location-grid .mvc-location-grid__split-map .mvc-map-single__canvas--full {
	height: 600px !important;
	min-height: 600px !important;
	width: 100% !important;
	display: block !important;
}

@media (max-width: 1023px) {
	.mvc-location-grid .mvc-location-grid__split-map .mvc-map-multipin__canvas,
	.mvc-location-grid .mvc-location-grid__split-map .mvc-map-single__canvas--sm,
	.mvc-location-grid .mvc-location-grid__split-map .mvc-map-single__canvas--md,
	.mvc-location-grid .mvc-location-grid__split-map .mvc-map-single__canvas--lg,
	.mvc-location-grid .mvc-location-grid__split-map .mvc-map-single__canvas--full {
		height: 360px !important;
		min-height: 360px !important;
	}
}

.mvc-location-grid__split-list {
	max-height: 600px;
	overflow-y: auto;
	padding-inline-end: var(--space-2);
}
.mvc-location-grid__split-list .mvc-post-grid {
	gap: var(--space-3);
}

@media (max-width: 1023px) {
	.mvc-location-grid__split,
	.mvc-location-grid__split--map-right {
		grid-template-columns: 1fr;
	}
	.mvc-location-grid__split--map-right .mvc-location-grid__split-map,
	.mvc-location-grid__split--map-right .mvc-location-grid__split-list {
		order: initial;
	}
	.mvc-location-grid__split-map {
		position: static;
		height: 360px !important;
		min-height: 360px !important;
	}
	.mvc-location-grid__split-list {
		max-height: none;
		overflow: visible;
	}
}

/* ── Service-grid-aligned styles ───────────────────────────────────────── */
/* These four styles mirror components/service-grid CSS so editors get the
   same visual vocabulary across both section types.

   COLOR MODEL: structure-only. Text colors flow from the active card preset's
   --card-* tokens (see CARD PRESETS block at the bottom of this file).
   Overlay color/opacity are editor-tunable per section via --lg-overlay-*. */

/* Image overlay cards — STRUCTURE ONLY
   Full-bleed image fills the card; body anchors at the bottom over a tunable
   overlay (--lg-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-location-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-location-grid--style-image-overlay-cards .mvc-post-card:hover {
	transform: translateY(-4px);
}
.mvc-location-grid--style-image-overlay-cards .mvc-post-card__thumb-link {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
}
.mvc-location-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-location-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-location-grid--style-image-overlay-cards .mvc-post-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--lg-overlay-color);
	opacity: var(--lg-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-location-grid--style-image-overlay-cards .mvc-post-card__body,
.mvc-location-grid--style-image-overlay-cards [class*="mvc-post-card__"] {
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
}
.mvc-location-grid--style-image-overlay-cards .mvc-post-card__body {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding: 1.5rem;
}
/* Region badge stays visible over image — tint from preset --card-heading
   so it reads against the chosen overlay color. */
.mvc-location-grid--style-image-overlay-cards .mvc-post-card__cats a,
.mvc-location-grid--style-image-overlay-cards .mvc-post-card__cats span {
	background-color: color-mix(in srgb, var(--card-heading) 18%, transparent) !important;
	border: 1px solid color-mix(in srgb, var(--card-heading) 35%, transparent) !important;
	color: var(--card-heading) !important;
}

/* Clean cards — white bg, no border, gentle shadow */
.mvc-location-grid--style-clean-cards {
	--mvc-card-border: none;
}
.mvc-location-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);
	overflow: hidden;
}
.mvc-location-grid--style-clean-cards .mvc-post-card:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13) !important;
}
.mvc-location-grid--style-clean-cards .mvc-post-grid {
	gap: var(--space-8, 2rem);
}
.mvc-location-grid--style-clean-cards .mvc-post-card__thumb-link {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.mvc-location-grid--style-clean-cards .mvc-post-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Featured + grid — first location spans full width, rest in 3-col grid */
.mvc-location-grid--style-featured-plus-grid .mvc-post-grid {
	grid-template-columns: 1fr 1fr 1fr;
}
.mvc-location-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-location-grid--style-featured-plus-grid .mvc-post-card:first-child .mvc-post-card__thumb-link {
	flex: 0 0 45%;
}
.mvc-location-grid--style-featured-plus-grid .mvc-post-card:first-child .mvc-post-card__body {
	flex: 1;
}
.mvc-location-grid--style-featured-plus-grid .mvc-post-card:first-child .mvc-post-card__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
}
@media (max-width: 767px) {
	.mvc-location-grid--style-featured-plus-grid .mvc-post-grid {
		grid-template-columns: 1fr;
	}
	.mvc-location-grid--style-featured-plus-grid .mvc-post-card:first-child {
		flex-direction: column;
	}
	.mvc-location-grid--style-featured-plus-grid .mvc-post-card:first-child .mvc-post-card__thumb-link {
		flex: none;
		width: 100%;
	}
}

/* Accordion panels — STRUCTURE ONLY
   Side-by-side full-height panels that expand on hover. Text colors flow
   from the preset's --card-* tokens; overlay sits over the image to keep
   text readable. */
.mvc-location-grid--style-accordion-panels .mvc-post-grid {
	display: flex !important;
	flex-direction: row;
	gap: 0;
	min-height: 520px;
	overflow: hidden;
	border-radius: var(--mvc-radius, 0.75rem);
}
.mvc-location-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-location-grid--style-accordion-panels .mvc-post-card:hover {
	flex: 4;
	transform: none !important;
	box-shadow: none !important;
}
.mvc-location-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-location-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-location-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-location-grid--style-accordion-panels .mvc-post-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--lg-overlay-color) !important;
	opacity: var(--lg-overlay-opacity);
	transition: opacity var(--duration-slow, 500ms) ease;
	pointer-events: none;
}
/* Body — flex column, vertically centered. Text colors flow from preset. */
.mvc-location-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: center !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;
}
.mvc-location-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: normal !important;
}
.mvc-location-grid--style-accordion-panels .mvc-post-card__title a {
	text-decoration: none !important;
}
.mvc-location-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;
}
.mvc-location-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-location-grid--style-accordion-panels .mvc-post-card:hover .mvc-post-card__excerpt,
.mvc-location-grid--style-accordion-panels .mvc-post-card:hover .mvc-post-card__more {
	opacity: 1 !important;
}
.mvc-location-grid--style-accordion-panels .mvc-post-card + .mvc-post-card {
	border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}
@media (max-width: 767px) {
	.mvc-location-grid--style-accordion-panels .mvc-post-grid {
		flex-direction: column !important;
		min-height: unset;
	}
	.mvc-location-grid--style-accordion-panels .mvc-post-card {
		flex: none !important;
		min-height: 240px;
	}
	.mvc-location-grid--style-accordion-panels .mvc-post-card__excerpt,
	.mvc-location-grid--style-accordion-panels .mvc-post-card__more {
		opacity: 1 !important;
		transform: none !important;
	}
	.mvc-location-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;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   LOCATION CARDS — MINIMAL
   Same as location-cards, but hides the quick-answer blockquote that sits
   directly under the city name. Region badge + short description + CTA stay.
   ───────────────────────────────────────────────────────────────────────── */
.mvc-location-grid--style-location-cards-minimal .mvc-post-card__thumb-link {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.mvc-location-grid--style-location-cards-minimal .mvc-post-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mvc-location-grid--style-location-cards-minimal .mvc-quick-answer {
	display: none !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 quick answer, no CTA
   arrow, no region badge. Mirrors the service-grid boxed-tile.

   PAINT: bar bg pulls from --card-bg, title color from --card-heading
   OVERLAY: editor-tunable, sits over the image region
   ───────────────────────────────────────────────────────────────────────── */
.mvc-location-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-location-grid--style-boxed-tile .mvc-post-card:hover,
.mvc-location-grid--style-boxed-tile .mvc-post-card:focus-within {
	transform: translateY(-3px);
}
.mvc-location-grid--style-boxed-tile .mvc-post-card__thumb-link {
	position: relative;
	z-index: 1;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.mvc-location-grid--style-boxed-tile .mvc-post-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-default);
}
.mvc-location-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-location-grid--style-boxed-tile .mvc-post-card__thumb-link::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--lg-overlay-color);
	opacity: var(--lg-overlay-opacity);
	pointer-events: none;
	transition: opacity var(--duration-normal) ease;
}
/* Hide everything but the title in the body */
.mvc-location-grid--style-boxed-tile .mvc-post-card__cats,
.mvc-location-grid--style-boxed-tile .mvc-location-card__geo,
.mvc-location-grid--style-boxed-tile .mvc-post-card__excerpt,
.mvc-location-grid--style-boxed-tile .mvc-post-card__more,
.mvc-location-grid--style-boxed-tile .mvc-quick-answer {
	display: none !important;
}
/* Body becomes the title bar; bg flows from the preset's --card-bg via the
   shared base rule that paints the card. */
.mvc-location-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-location-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-location-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-location-grid--style-boxed-tile .mvc-post-card__title-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
}

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

   Mirrors components/service-grid CARD PRESETS so editors get the same
   color vocabulary across both section types. See that file's docblock for
   the design model.

   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   — soft warm off-white, dark text
     dark           — primary bg, white text, no border
     dark-gradient  — primary → primary-dark gradient, white text
     brand-gradient — primary → accent gradient, white text
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared base — applies to every preset, every layout ────────────────
   !important is REQUIRED on bg, border, and color rules to override
   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-location-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-location-grid[data-card-preset] .mvc-post-card:hover,
.mvc-location-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-location-grid[data-card-preset] .mvc-post-card__title,
.mvc-location-grid[data-card-preset] .mvc-post-card__title a {
	color: var(--card-heading) !important;
}

.mvc-location-grid[data-card-preset] .mvc-post-card__excerpt,
.mvc-location-grid[data-card-preset] .mvc-location-card__geo,
.mvc-location-grid[data-card-preset] .mvc-quick-answer {
	color: var(--card-body) !important;
}

.mvc-location-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. */
.mvc-location-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 ────────────────────── */
.mvc-location-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-location-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-location-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-location-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-location-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-location-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 location-grid.php from ACF fields
   lg_overlay_color / lg_overlay_opacity.

   Defaults: #000 at 40% (matches the previous hardcoded scrim).
   ═══════════════════════════════════════════════════════════════════════════ */
.mvc-location-grid {
	--lg-overlay-color: #000000;
	--lg-overlay-opacity: 0.40;
}

/* ─────────────────────────────────────────────────────────────────────────
   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 the
   service-grid horizontal-scroll layout. All selectors scoped per
   [[feedback_variant_css_scoping]].
   ───────────────────────────────────────────────────────────────────────── */

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

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

.mvc-location-grid[data-layout="horizontal-scroll"] .mvc-location-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-location-grid[data-layout="horizontal-scroll"] .mvc-location-grid__scroller::-webkit-scrollbar {
	display: none;
}

.mvc-location-grid[data-layout="horizontal-scroll"] .mvc-location-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. Use flex-basis so we get ~1.2 cards on
   mobile (peek), 2.3 on tablet, 3.3 on desktop. */
.mvc-location-grid[data-layout="horizontal-scroll"] .mvc-location-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-location-grid[data-layout="horizontal-scroll"] .mvc-location-grid__scroller > .mvc-post-card {
		flex-basis: 44%;
	}
}

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

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

/* Prev/next arrows — overlap the scroller edges, hidden until JS reveals. */
.mvc-location-grid[data-layout="horizontal-scroll"] .mvc-location-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-location-grid[data-layout="horizontal-scroll"] .mvc-location-grid__nav:hover {
	background-color: var(--color-primary);
	color: var(--color-text-inverse, #fff);
	border-color: var(--color-primary);
}

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

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

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

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

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

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

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