/**
 * Maple Directory — Frontend Styles
 *
 * @package MapleDirectory
 */

/* ─────────────────────────────────────────────────────────────────────
 * Brand dark-red surface — single source of truth (1.5.6+)
 *
 * Every dark-red section band on the single-listing template (the
 * camp-details band, the trust-strip band, the final-CTA band) carries
 * the `.maple-dir-dark-red` class instead of a hard-coded inline
 * background. To recolour every one of those bands at once, drop this
 * snippet into Appearance → Customize → Additional CSS and change the
 * two values:
 *
 *     .maple-dir-dark-red {
 *         background-color: #ae1b23;  ← your colour
 *         color: #ffffff;             ← text colour for that background
 *     }
 *
 * Because the class lives in this stylesheet (not as an inline style on
 * each block), the Customizer override wins on the cascade with no
 * `!important` needed.
 * ───────────────────────────────────────────────────────────────────── */
.maple-dir-dark-red {
	background-color: var(--mapledir-brand, #ae1b23);
	color: var(--mapledir-brand-contrast, #ffffff);
}

/* Visually hidden — mirrors WordPress core screen-reader-text for themes that don't ship it. */
.mapledir-search-bar .screen-reader-text,
.mapledir-advanced-search .screen-reader-text,
#mapledir-live-region.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* === Variables === */
:root {
	--mapledir-primary: #2563eb;
	--mapledir-primary-hover: #1d4ed8;
	--mapledir-success: #16a34a;
	--mapledir-danger: #dc2626;
	--mapledir-warning: #f59e0b;
	--mapledir-star-color: #f5a623;
	--mapledir-border: #e5e7eb;
	--mapledir-bg: #f9fafb;
	--mapledir-text: #111827;
	--mapledir-text-muted: #6b7280;
	--mapledir-radius: 8px;
	--mapledir-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
	--mapledir-shadow-lg: 0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.05);

	/* Brand theme tokens. Every brand surface in this stylesheet reads
	 * these (with a literal fallback that reproduces the shipped red, so
	 * an unset theme is pixel-identical). The Theme setting (Settings →
	 * Maple Directory → Theme) overrides them at runtime via an inline
	 * :root{} block, recolouring every surface from one source. */
	--mapledir-brand: #ae1b23;          /* bands, buttons, pill text/border, accents */
	--mapledir-brand-dark: #7F0F20;     /* gradient end, hover, section/FAQ headings */
	--mapledir-brand-contrast: #ffffff; /* text + icons that sit on a brand surface */
}

/* === Listing Grid === */
.mapledir-listing-grid {
	display: grid;
	gap: 24px;
	margin: 24px 0;
}

.mapledir-listing-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.mapledir-listing-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.mapledir-listing-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
	.mapledir-listing-grid[data-columns="2"],
	.mapledir-listing-grid[data-columns="3"],
	.mapledir-listing-grid[data-columns="4"] {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.mapledir-listing-grid[data-columns="3"],
	.mapledir-listing-grid[data-columns="4"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* === Listing Card — 1.4.12 overlay design =================================
 *
 * Square tile. Featured image (or beige fallback for cards with no
 * uploaded image) fills the top two thirds. A 60%-opacity black caption
 * band covers the bottom third and carries the white bold listing
 * title. Visible drop shadow under the card so it floats off a light
 * page background.
 *
 * Pre-1.4.12 the dark overlay covered the entire card and the title
 * was absolutely-positioned at the bottom corner. Shrunk to a bottom
 * band so the image (or beige) has room to breathe and the card reads
 * as image-first rather than title-first.
 *
 * Pre-1.4.11 the card had a content row below the image (title + rating
 * + excerpt). Replaced with a single visual surface — title-only — to
 * keep the grid scannable and tile-like.
 */
.mapledir-listing-card {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--mapledir-radius);
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.15 );
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* The `--has-image` / `--no-image` modifiers are kept as semantic
 * state markers (and are asserted by the render tests), but the card
 * background colour now lives on the `.maple-dir-grid-card` recolour
 * handle below — one background for both states. */

.mapledir-listing-card:hover,
.mapledir-listing-card:focus-within {
	transform: translateY( -2px );
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.18 );
}

.mapledir-listing-card__link {
	position: absolute;
	inset: 0;
	display: block;
	color: #ffffff;
	text-decoration: none;
}

.mapledir-listing-card__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Bottom-third caption band. flex-align centres the title vertically
 * inside the band. The band's tint (60% black so the photo bleeds
 * through) lives on the `.maple-dir-grid-card-caption` recolour handle
 * below. */
.mapledir-listing-card__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 33.333%;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: 0 1.25rem;
}

/* `color: #ffffff` here is the shared default — it also styles the
 * dashboard "my listings" cards, which reuse this class. Grid cards
 * additionally carry `.maple-dir-grid-card-title` (below), which wins
 * the cascade and is the Customizer recolour handle. */
.mapledir-listing-card__title {
	margin: 0;
	color: #ffffff;
	font-size: 1.25rem;       /* h3-ish, intentionally slightly smaller */
	font-weight: 700;
	line-height: 1.3;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.4 );
}

/* ─────────────────────────────────────────────────────────────────────
 * Listing-grid cards — recolour handles (1.5.6+)
 *
 * The cards in the listings grid — the /listings/ page AND the
 * /search-listings/ results (both render through the same code) — have
 * three recolourable surfaces, each with its own handle class you can
 * target from Appearance → Customize → Additional CSS:
 *
 *     .maple-dir-grid-card {                         ← the card itself
 *         background: #F4EFDE;                        ←   card background
 *     }
 *     .maple-dir-grid-card-caption {                 ← the caption band
 *         background: rgba( 0, 0, 0, 0.6 );           ←   tint over the photo
 *     }
 *     .maple-dir-grid-card-title {                   ← the card title
 *         color: #ffffff;                             ←   title text colour
 *     }
 *
 * `.maple-dir-grid-card` is the card background — it shows through on
 * cards with no photo, and sits behind the photo (visible at transparent
 * edges / during load) on cards that have one. Structural styles (square
 * tile, rounded corners, shadow, hover lift, the caption band's size +
 * position) stay on the `.mapledir-listing-card*` BEM classes, so a
 * colour override never disturbs layout.
 *
 * The Verified pill on these cards is the shared hero pill — recolour it
 * via `.maple-dir-hero-verified*` (see the hero section above).
 * ───────────────────────────────────────────────────────────────────── */
.maple-dir-grid-card {
	background: #F4EFDE;
}

.maple-dir-grid-card-caption {
	background: rgba( 0, 0, 0, 0.6 );
}

.maple-dir-grid-card-title {
	color: #ffffff;
}

/* === Badges === */
.mapledir-badges {
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	gap: 4px;
	z-index: 1;
}

.mapledir-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ─────────────────────────────────────────────────────────────────────
 * Listing-card status badges — recolour handles (1.5.6+)
 *
 * The "New" and "Featured" badges in the top-left corner of a
 * listing-grid card each have their own handle class you can target
 * from Appearance → Customize → Additional CSS:
 *
 *     .maple-dir-grid-card-badge-new {               ← the "New" badge
 *         background: #16a34a;                        ←   badge background
 *         color: #ffffff;                             ←   badge text
 *     }
 *     .maple-dir-grid-card-badge-featured {          ← the "Featured" badge
 *         background: #f59e0b;                        ←   badge background
 *         color: #000000;                             ←   badge text
 *     }
 *
 * The badge pill shape (padding, radius, uppercase, letter-spacing)
 * stays on the `.mapledir-badge` BEM class, so a colour override never
 * disturbs the badge's shape. These were `var(--mapledir-success)` /
 * `var(--mapledir-warning)` before 1.5.6 — pinned to literals here so
 * the Customizer snippet shows a concrete colour to change.
 * ───────────────────────────────────────────────────────────────────── */
.maple-dir-grid-card-badge-new {
	background: #16a34a;
	color: #ffffff;
}

.maple-dir-grid-card-badge-featured {
	background: #f59e0b;
	color: #000000;
}

/* === Stars === */
.mapledir-stars {
	display: inline-flex;
	gap: 1px;
}

.mapledir-star {
	color: var(--mapledir-star-color);
	font-size: 1em;
}

.mapledir-star--empty {
	opacity: 0.3;
}

.mapledir-star--half {
	position: relative;
}

.mapledir-rating-value {
	font-weight: 600;
	font-size: 0.9em;
}

.mapledir-rating-stars--small .mapledir-star { font-size: 0.8em; }
.mapledir-rating-stars--large .mapledir-star { font-size: 1.4em; }

/* === Search Bar === */
.mapledir-search-bar {
	/* Structural — card shape + spacing. Background + border live on the
	 * `.maple-dir-search-form` recolour handle (see below). */
	border-radius: var(--mapledir-radius);
	padding: 16px;
	box-shadow: var(--mapledir-shadow);
	margin: 24px 0;
}

/* 1.4.9: search-bar split into two stacked rows. Row 1 holds the
 * keyword input (full-width, larger so the placeholder isn't lost in
 * whitespace). Row 2 holds the province dropdown + city text + category
 * dropdown + submit button in a single flex line. Mobile collapses
 * row 2 into a column. */
.mapledir-search-bar__row {
	display: flex;
	gap: 12px;
	align-items: stretch;
}
.mapledir-search-bar__row--keyword {
	margin-bottom: 12px;
}
/* 1.6.2: row 2 (`--filters`) holds only province / city / category; the
 * verified-only checkbox + Search button moved to their own row 3
 * (`--actions`) so the dropdowns get the full width and "Province
 * (optional)" stops clipping in narrow containers (e.g. the landing
 * hero). */
.mapledir-search-bar__row--filters {
	flex-wrap: wrap;
}
.mapledir-search-bar__row--actions {
	flex-wrap: wrap;
	align-items: center;
	margin-top: 12px;
}
/* Verified-only sits left; the Search button is pushed to the right. */
.mapledir-search-bar__row--actions .mapledir-search-bar__verified-only {
	margin-right: auto;
}

.mapledir-search-bar__keyword {
	flex: 1;
}
.mapledir-search-bar__province,
.mapledir-search-bar__city,
.mapledir-search-bar__category {
	flex: 1;
	min-width: 180px;
}

/* 1.5.4: "Verified only" checkbox. `flex-shrink: 0` keeps the label
 * from being squeezed away when it shares a row with other controls. */
.mapledir-search-bar__verified-only {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 0 4px;
	flex-shrink: 0;
}
.mapledir-search-bar__verified-only label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 0.95em;
}
/* 1.6.5: custom-drawn checkbox — a rounded square with the white check
 * inset so the checkmark gets real breathing room inside the green box
 * (the native `accent-color` checkbox renders the tick edge-to-edge).
 * `background-size` is what creates the padding around the checkmark. */
.mapledir-search-bar__verified-only input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	margin: 0;
	cursor: pointer;
	flex-shrink: 0;
	border: 1px solid var(--mapledir-border);
	border-radius: 5px;
	background: #fff;
}
.mapledir-search-bar__verified-only input[type="checkbox"]:checked {
	background-color: var(--mapledir-verified-tick, #2D7A2C);
	border-color: var(--mapledir-verified-tick, #2D7A2C);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 64%;
}
.mapledir-search-bar__verified-only input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--mapledir-verified-tick, #2D7A2C);
	outline-offset: 2px;
}

.mapledir-search-bar input[type="search"],
.mapledir-search-bar input[type="text"],
.mapledir-search-bar select {
	/* Structural — sizing only. Background + border live on the
	 * `.maple-dir-search-field` recolour handle (see below). */
	width: 100%;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 0.95em;
	line-height: 1.4;
	box-sizing: border-box;
}

/* Keyword input gets a ~25% bump in padding + font so the placeholder
 * has presence on a full-width row instead of looking lost. */
.mapledir-search-bar__row--keyword input[type="search"] {
	padding: 14px 18px;
	font-size: 1.2em;
}

.mapledir-search-bar input:focus,
.mapledir-search-bar select:focus {
	outline: none;
	border-color: var(--mapledir-primary);
	box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}

@media (max-width: 768px) {
	.mapledir-search-bar__row--filters,
	.mapledir-search-bar__row--actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* === Buttons === */
.mapledir-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border: none;
	border-radius: 6px;
	font-size: 0.95em;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease;
	line-height: 1.4;
	white-space: nowrap;
}

.mapledir-button--primary {
	background: var(--mapledir-primary);
	color: #fff;
}

.mapledir-button--primary:hover {
	background: var(--mapledir-primary-hover);
}

.mapledir-button--secondary {
	background: var(--mapledir-bg);
	color: var(--mapledir-text);
	border: 1px solid var(--mapledir-border);
}

.mapledir-button--secondary:hover {
	background: #e5e7eb;
}

/* ─────────────────────────────────────────────────────────────────────
 * Search form — recolour handles (1.5.6+)
 *
 * The "Search Listings" form has four recolourable surfaces, each with
 * its own handle class you can target from
 * Appearance → Customize → Additional CSS:
 *
 *     .maple-dir-search-form {                       ← the form card
 *         background: #fff;                           ←   card background
 *         border: 1px solid var(--mapledir-border);   ←   card border
 *     }
 *     .maple-dir-search-field {                      ← every input + dropdown
 *         background: var(--mapledir-bg);             ←   field background
 *         border: 1px solid var(--mapledir-border);   ←   field border
 *     }
 *     .maple-dir-search-verified {                   ← the "verified only" control
 *         color: inherit;                             ←   label text colour
 *         accent-color: #2D7A2C;                      ←   checkbox tick colour
 *     }
 *     .maple-dir-search-button {                     ← the Search button
 *         background-color: #ae1b23;                  ←   button background
 *         color: #ffffff;                             ←   button label colour
 *         border-color: #ae1b23;                      ←   button border
 *     }
 *
 * `.maple-dir-search-field` is shared by the keyword input, the Province
 * and Category dropdowns, and the City input, so one rule restyles every
 * field consistently. `.maple-dir-search-verified` sets `accent-color`
 * on the wrapper — it's an inherited property, so the checkbox tick
 * picks it up. Structural styles (card shape, field sizing, button
 * shape) stay on the `.mapledir-search-bar*` / `.mapledir-button`
 * classes, so a colour override never disturbs layout.
 *
 * `.maple-dir-search-button` is defined here — AFTER
 * `.mapledir-button--primary` — so its brand-red palette wins the
 * cascade over that class's default blue without needing `!important`.
 * ───────────────────────────────────────────────────────────────────── */
.maple-dir-search-form {
	background: #fff;
	border: 1px solid var(--mapledir-border);
	/* The form is a self-contained white card — pin dark text so labels
	 * (e.g. the "verified only" checkbox label) stay readable even when
	 * the bar is dropped inside a dark / cover context like the landing
	 * hero, which would otherwise cascade white text into the card. */
	color: #1a1a1a;
}

.maple-dir-search-field {
	background: var(--mapledir-bg);
	border: 1px solid var(--mapledir-border);
}

.maple-dir-search-verified {
	color: inherit;
	--mapledir-verified-tick: #2D7A2C;
}

.maple-dir-search-button,
.maple-dir-search-button:hover,
.maple-dir-search-button:focus,
.maple-dir-search-button:active {
	background-color: var(--mapledir-brand, #ae1b23);
	color: var(--mapledir-brand-contrast, #ffffff);
	border-color: var(--mapledir-brand, #ae1b23);
}

/* === Map === */
.mapledir-map {
	border-radius: var(--mapledir-radius);
	overflow: hidden;
	border: 1px solid var(--mapledir-border);
	margin: 24px 0;
}

/* === Verified Badge ============================================== *
 * Three sizes for three contexts:
 *   small   → card overlay in listing-cards-slider / listing-grid
 *   medium  → inline next to body copy (rare)
 *   large   → standalone block under the hero
 *
 * Colour is the camp palette's `pine-bright` (#2D7A2C). White-on-green
 * checkmark is the AA pairing inside the circle; the label text inherits
 * the surrounding block's colour (white on pine bg, charcoal on cream).
 */
.mapledir-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	line-height: 1.2;
	color: inherit;
}
.mapledir-verified-badge__inner {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.mapledir-verified-badge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.mapledir-verified-badge__icon svg {
	display: block;
	width: 1.25em;
	height: 1.25em;
}
.mapledir-verified-badge__label {
	font-weight: 600;
	letter-spacing: 0.02em;
}
.mapledir-verified-badge__placeholder {
	color: #888;
	font-style: italic;
	font-size: 0.875em;
}

.mapledir-verified-badge--small  { font-size: 0.875rem; }
.mapledir-verified-badge--medium { font-size: 1rem; }
.mapledir-verified-badge--large {
	font-size: 1.25rem;
	padding: 0.75rem 1.5rem;
	background: rgba( 45, 122, 44, 0.12 );
	border: 2px solid #2D7A2C;
	border-radius: 999px;
}
.mapledir-verified-badge--large .mapledir-verified-badge__icon svg {
	width: 1.5em;
	height: 1.5em;
}

/* 1.5.2: Top-right Verified pill on listing cards. Shared between
 * `render_listing_grid` (Search Listings) and the listing-cards-slider
 * (Similar Camps) via `MapleDir_Blocks::render_card_verified_pill()`.
 * Visual goal: same chunky white-pill / green-border / green-check look
 * as the hero pill, scaled down to card density.
 *
 * Anchors top-right of the card. `.mapledir-listing-card` (grid) and
 * `.maple-dir-listing-cards-slider__card` (slider) both establish
 * `position: relative` already; this rule keys off the pill class so
 * it works in either context without per-host overrides.
 */
.mapledir-card-verified-pill {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.7rem 0.3rem 0.4rem;
	background: #ffffff;
	border: 2px solid #2D7A2C;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #1a1a1a;
	letter-spacing: 0.02em;
	line-height: 1;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.18 );
	pointer-events: none;
}
.mapledir-card-verified-pill__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.mapledir-card-verified-pill__icon svg {
	display: block;
	width: 1.1em;
	height: 1.1em;
}
.mapledir-card-verified-pill__label {
	white-space: nowrap;
}

/* 1.5.2: the per-host classes `.maple-dir-listing-cards-slider__verified`
 * and `.mapledir-listing-grid__verified` used to render a small green-
 * circle-only badge in this region. Both were superseded by the shared
 * `.mapledir-card-verified-pill` rule defined further up. We keep the
 * image-container relative-positioning anchor below for the slider — the
 * pill positions absolute against it. */
.maple-dir-listing-cards-slider__image {
	position: relative;
}

/* Coord-less fallback on single listings: render the city name as a
 * readable card where the map would otherwise be a blank null-island
 * world view. Picks up surrounding text colour via `color: inherit`
 * so it themes naturally on pine, cream, or any other section bg.
 *
 * **Class is `mapledir-map-fallback` — NOT `mapledir-map--fallback`.**
 * The single-dash form deliberately avoids the `.mapledir-map` selector
 * the frontend Leaflet JS hooks (which would otherwise crash trying to
 * init a map on this id-less static card). */
.mapledir-map-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 220px;
	padding: 2rem 1rem;
	font-size: 1.5rem;
	font-weight: 600;
	color: inherit;
	background: rgba( 255, 255, 255, 0.05 );
	border: 2px dashed currentColor;
	border-radius: var( --mapledir-radius );
	text-align: center;
}
.mapledir-map-fallback .mapledir-map__pin {
	font-size: 1.75rem;
	line-height: 1;
}

/* === Listing Types Grid === */
.mapledir-listing-types-grid {
	display: grid;
	gap: 16px;
	margin: 24px 0;
}

.mapledir-listing-types-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.mapledir-listing-types-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.mapledir-listing-types-grid[data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
.mapledir-listing-types-grid[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }

.mapledir-listing-types-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--mapledir-border);
	border-radius: var(--mapledir-radius);
	text-decoration: none;
	color: var(--mapledir-text);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mapledir-listing-types-card:hover {
	box-shadow: var(--mapledir-shadow-lg);
	transform: translateY(-2px);
}

.mapledir-listing-types-card__icon {
	font-size: 2em;
	color: var(--mapledir-primary);
}

.mapledir-listing-types-card__image {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 50%;
}

.mapledir-listing-types-card__name {
	font-weight: 600;
	text-align: center;
}

.mapledir-listing-types-card__count {
	font-size: 0.85em;
	color: var(--mapledir-text-muted);
}

@media (max-width: 768px) {
	.mapledir-listing-types-grid[data-columns="3"],
	.mapledir-listing-types-grid[data-columns="4"],
	.mapledir-listing-types-grid[data-columns="5"],
	.mapledir-listing-types-grid[data-columns="6"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* === Business Hours === */
.mapledir-business-hours {
	margin: 16px 0;
}

.mapledir-business-hours__status {
	padding: 6px 12px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.9em;
	margin-bottom: 12px;
	display: inline-block;
}

.mapledir-business-hours__status[data-open="true"] {
	background: #dcfce7;
	color: var(--mapledir-success);
}

.mapledir-business-hours__status[data-open="false"] {
	background: #fef2f2;
	color: var(--mapledir-danger);
}

.mapledir-business-hours__table {
	width: 100%;
	border-collapse: collapse;
}

.mapledir-business-hours__table td {
	padding: 6px 0;
	border-bottom: 1px solid var(--mapledir-border);
	font-size: 0.9em;
}

.mapledir-business-hours__day {
	font-weight: 500;
}

.mapledir-business-hours__closed {
	color: var(--mapledir-text-muted);
	font-style: italic;
}

/* === Reviews === */
.mapledir-reviews {
	margin: 24px 0;
}

.mapledir-reviews__summary {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	padding: 16px;
	background: var(--mapledir-bg);
	border-radius: var(--mapledir-radius);
}

.mapledir-reviews__average {
	font-size: 2em;
	font-weight: 700;
	line-height: 1;
}

.mapledir-reviews__count {
	color: var(--mapledir-text-muted);
	font-size: 0.9em;
}

.mapledir-review {
	padding: 16px 0;
	border-bottom: 1px solid var(--mapledir-border);
}

.mapledir-review:last-child {
	border-bottom: none;
}

.mapledir-review__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.mapledir-review__avatar {
	border-radius: 50%;
}

.mapledir-review__meta {
	flex: 1;
}

.mapledir-review__author {
	display: block;
}

.mapledir-review__date {
	font-size: 0.85em;
	color: var(--mapledir-text-muted);
}

.mapledir-review__title {
	margin: 8px 0 4px;
	font-size: 1em;
}

.mapledir-review__content {
	color: var(--mapledir-text-muted);
	font-size: 0.95em;
	line-height: 1.6;
}

.mapledir-review__content p {
	margin: 0;
}

/* === Multi-Ratings Breakdown === */
.mapledir-reviews__multi-ratings {
	margin: 16px 0 20px;
}

.mapledir-reviews__rating-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.mapledir-reviews__rating-label {
	flex: 0 0 140px;
	font-size: 0.9em;
	font-weight: 500;
}

.mapledir-reviews__rating-bar {
	flex: 1;
	height: 8px;
	background: var(--mapledir-border);
	border-radius: 4px;
	overflow: hidden;
}

.mapledir-reviews__rating-bar-fill {
	height: 100%;
	background: var(--mapledir-star-color);
	border-radius: 4px;
	transition: width 0.3s ease;
}

.mapledir-reviews__rating-value {
	flex: 0 0 30px;
	font-size: 0.85em;
	font-weight: 600;
	text-align: right;
}

/* === Review Sorting === */
.mapledir-reviews__sorting {
	margin: 12px 0;
	font-size: 0.9em;
}

.mapledir-reviews__sorting select {
	padding: 4px 8px;
	border: 1px solid var(--mapledir-border);
	border-radius: 4px;
	font-size: 0.9em;
}

/* === Review Images === */
.mapledir-review__images {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: 8px 0;
}

.mapledir-review__image img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--mapledir-border);
}

/* === Review Votes === */
.mapledir-review__votes {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.mapledir-review__vote {
	background: none;
	border: 1px solid var(--mapledir-border);
	border-radius: 4px;
	padding: 2px 10px;
	font-size: 0.85em;
	cursor: pointer;
	color: var(--mapledir-text-muted);
	transition: background 0.15s;
}

.mapledir-review__vote:hover {
	background: var(--mapledir-bg);
}

/* === Location Switcher === */
.mapledir-location-switcher select {
	padding: 8px 12px;
	border: 1px solid var(--mapledir-border);
	border-radius: 6px;
	font-size: 0.9em;
	background: #fff;
}

/* === Pagination === */
.mapledir-pagination {
	margin: 32px 0;
	text-align: center;
}

.mapledir-pagination ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: inline-flex;
	gap: 4px;
}

.mapledir-pagination li {
	display: inline-block;
}

.mapledir-pagination a,
.mapledir-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 1px solid var(--mapledir-border);
	border-radius: 6px;
	font-size: 0.9em;
	text-decoration: none;
	color: var(--mapledir-text);
}

.mapledir-pagination a:hover {
	background: var(--mapledir-bg);
}

.mapledir-pagination .current {
	background: var(--mapledir-primary);
	border-color: var(--mapledir-primary);
	color: #fff;
}

/* === Notices === */
.mapledir-notice {
	padding: 16px;
	border-radius: var(--mapledir-radius);
	border: 1px solid var(--mapledir-border);
	background: var(--mapledir-bg);
	margin: 16px 0;
}

.mapledir-notice a {
	color: var(--mapledir-primary);
}

/* === Ad zone === */
.mapledir-ad-zone {
	margin: 16px 0;
	text-align: center;
}
.mapledir-ad-zone .mapledir-ad {
	display: inline-block;
	line-height: 0;
}
.mapledir-ad-zone .mapledir-ad img {
	max-width: 100%;
	height: auto;
	border: 0;
}
.mapledir-ad-zone--empty {
	text-align: left;
}

/* === No Results === */
.mapledir-no-results {
	text-align: center;
	padding: 40px 20px;
	color: var(--mapledir-text-muted);
	font-size: 1.1em;
}

/* === Add Listing Form === */
.mapledir-add-listing-form {
	max-width: 800px;
	margin: 24px auto;
}

/* === Dashboard === */
.mapledir-dashboard {
	margin: 24px 0;
}

.mapledir-dashboard__tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--mapledir-border);
	margin-bottom: 24px;
	overflow-x: auto;
}

.mapledir-dashboard__tab {
	padding: 10px 20px;
	text-decoration: none;
	color: var(--mapledir-text-muted);
	font-weight: 500;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	white-space: nowrap;
	transition: color 0.15s, border-color 0.15s;
}

.mapledir-dashboard__tab:hover {
	color: var(--mapledir-text);
}

.mapledir-dashboard__tab.is-active {
	color: var(--mapledir-primary);
	border-bottom-color: var(--mapledir-primary);
}

/* === User Listings === */
.mapledir-user-listings__header {
	margin-bottom: 16px;
}

.mapledir-user-listing-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--mapledir-border);
}

.mapledir-user-listing-row:last-child {
	border-bottom: none;
}

.mapledir-user-listing-row__thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 6px;
	overflow: hidden;
}

.mapledir-user-listing-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mapledir-user-listing-row__info {
	flex: 1;
	min-width: 0;
}

.mapledir-user-listing-row__title {
	margin: 0 0 4px;
	font-size: 1em;
}

.mapledir-user-listing-row__title a {
	color: var(--mapledir-text);
	text-decoration: none;
}

.mapledir-user-listing-row__title a:hover {
	color: var(--mapledir-primary);
}

.mapledir-user-listing-row__meta {
	display: flex;
	gap: 12px;
	font-size: 0.85em;
	color: var(--mapledir-text-muted);
}

.mapledir-user-listing-row__status {
	padding: 1px 8px;
	border-radius: 3px;
	font-size: 0.85em;
	font-weight: 500;
	border: 1px solid currentColor;
}

.mapledir-user-listing-row__status--publish { background: #dcfce7; color: #15803d; }
.mapledir-user-listing-row__status--publish::before { content: "\2713"; margin-right: 4px; }
.mapledir-user-listing-row__status--pending { background: #fef3c7; color: #b45309; }
.mapledir-user-listing-row__status--pending::before { content: "\29D6"; margin-right: 4px; }
.mapledir-user-listing-row__status--draft { background: #f3f4f6; color: #4b5563; }
.mapledir-user-listing-row__status--draft::before { content: "\270E"; margin-right: 4px; }

.mapledir-user-listing-row__actions {
	flex-shrink: 0;
}

/* === User Reviews === */
.mapledir-user-review-row {
	padding: 12px 0;
	border-bottom: 1px solid var(--mapledir-border);
}

.mapledir-user-review-row:last-child {
	border-bottom: none;
}

.mapledir-user-review-row__header h4 {
	margin: 0 0 4px;
	font-size: 1em;
}

.mapledir-user-review-row__meta {
	display: flex;
	gap: 12px;
	font-size: 0.85em;
	color: var(--mapledir-text-muted);
	margin-bottom: 6px;
}

.mapledir-user-review-row__rating {
	color: var(--mapledir-star-color);
}

.mapledir-user-review-row__content {
	color: var(--mapledir-text-muted);
	font-size: 0.9em;
}

/* === User Claims === */
.mapledir-user-claims__table {
	width: 100%;
	border-collapse: collapse;
}

.mapledir-user-claims__table th,
.mapledir-user-claims__table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--mapledir-border);
	text-align: left;
}

.mapledir-user-claims__table th {
	font-weight: 600;
	font-size: 0.85em;
	color: var(--mapledir-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.mapledir-claim-status {
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 0.85em;
	font-weight: 500;
}

.mapledir-claim-status--pending { background: #fef3c7; color: #d97706; }
.mapledir-claim-status--approved { background: #dcfce7; color: #16a34a; }
.mapledir-claim-status--rejected { background: #fef2f2; color: #dc2626; }

/* === User Account === */
.mapledir-user-account {
	max-width: 600px;
}

.mapledir-user-account__profile {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 24px;
}

.mapledir-user-account__avatar img {
	border-radius: 50%;
}

.mapledir-user-account__name {
	margin: 0 0 4px;
	font-size: 1.3em;
}

.mapledir-user-account__email {
	color: var(--mapledir-text-muted);
	margin: 0 0 2px;
}

.mapledir-user-account__member-since {
	color: var(--mapledir-text-muted);
	font-size: 0.85em;
	margin: 0;
}

.mapledir-user-account__stats {
	display: flex;
	gap: 24px;
	padding: 20px;
	background: var(--mapledir-bg);
	border-radius: var(--mapledir-radius);
	margin-bottom: 24px;
}

.mapledir-user-account__stat {
	text-align: center;
	flex: 1;
}

.mapledir-user-account__stat-value {
	display: block;
	font-size: 1.8em;
	font-weight: 700;
	color: var(--mapledir-primary);
	line-height: 1.2;
}

.mapledir-user-account__stat-label {
	font-size: 0.85em;
	color: var(--mapledir-text-muted);
}

.mapledir-user-account__links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* === Claim Button === */
.mapledir-claim-pending {
	display: inline-block;
	padding: 8px 16px;
	background: #fef3c7;
	color: #d97706;
	border-radius: var(--mapledir-radius);
	font-size: 0.9em;
}

/* === Sponsored Listings === */
.mapledir-sponsored {
	margin: 24px 0;
	border: 2px solid var(--mapledir-sponsor-color, #e5e7eb);
	border-radius: var(--mapledir-radius);
	overflow: hidden;
}

.mapledir-sponsored__label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	background: var(--mapledir-sponsor-color);
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mapledir-sponsored__tier-badge {
	font-weight: 700;
	color: var(--mapledir-sponsor-accent);
}

.mapledir-sponsored__sponsor-text {
	color: var(--mapledir-sponsor-accent);
	opacity: 0.7;
}

.mapledir-sponsored__listings {
	padding: 16px;
}

/* Card layout */
.mapledir-sponsored--card .mapledir-sponsored__listings {
	display: grid;
	gap: 16px;
}

.mapledir-sponsored--card .mapledir-sponsored__item {
	display: flex;
	gap: 16px;
	padding: 12px;
	background: var(--mapledir-bg);
	border-radius: 6px;
}

.mapledir-sponsored--card .mapledir-sponsored__image {
	flex-shrink: 0;
	width: 160px;
}

.mapledir-sponsored--card .mapledir-sponsored__thumb {
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 6px;
}

/* Inline layout */
.mapledir-sponsored--inline .mapledir-sponsored__listings {
	display: flex;
	gap: 16px;
	overflow-x: auto;
}

.mapledir-sponsored--inline .mapledir-sponsored__item {
	flex: 0 0 250px;
	text-align: center;
}

.mapledir-sponsored--inline .mapledir-sponsored__thumb {
	width: 100%;
	height: 140px;
	object-fit: cover;
	border-radius: 6px;
}

/* Banner layout */
.mapledir-sponsored--banner .mapledir-sponsored__listings {
	display: flex;
	gap: 20px;
	align-items: center;
}

.mapledir-sponsored--banner .mapledir-sponsored__image {
	flex-shrink: 0;
	width: 200px;
}

.mapledir-sponsored--banner .mapledir-sponsored__thumb {
	width: 100%;
	border-radius: 6px;
}

/* Content */
.mapledir-sponsored__title {
	margin: 0 0 4px;
	font-size: 1.05em;
}

.mapledir-sponsored__title a {
	color: var(--mapledir-text);
	text-decoration: none;
}

.mapledir-sponsored__title a:hover {
	color: var(--mapledir-primary);
}

.mapledir-sponsored__rating {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 6px;
	font-size: 0.9em;
}

.mapledir-sponsored__tagline {
	color: var(--mapledir-text-muted);
	font-size: 0.9em;
	margin: 0 0 8px;
	line-height: 1.4;
}

.mapledir-sponsored__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 0.85em;
	margin-bottom: 8px;
}

.mapledir-sponsored__contact a {
	color: var(--mapledir-text-muted);
	text-decoration: none;
}

.mapledir-sponsored__contact a:hover {
	color: var(--mapledir-primary);
}

.mapledir-sponsored__cta {
	font-size: 0.9em;
	font-weight: 500;
	color: var(--mapledir-primary);
	text-decoration: none;
}

.mapledir-sponsored__cta:hover {
	text-decoration: underline;
}

/* Tier-specific border highlights */
.mapledir-sponsored--platinum { border-color: #e5e4e2; }
.mapledir-sponsored--gold { border-color: #ffd700; }
.mapledir-sponsored--silver { border-color: #c0c0c0; }
.mapledir-sponsored--bronze { border-color: #cd7f32; }

@media (max-width: 768px) {
	.mapledir-sponsored--card .mapledir-sponsored__item {
		flex-direction: column;
	}

	.mapledir-sponsored--card .mapledir-sponsored__image {
		width: 100%;
	}

	.mapledir-sponsored--banner .mapledir-sponsored__listings {
		flex-direction: column;
	}
}

/* === Embed Badge === */
.mapledir-embed-badge {
	margin: 24px 0;
}

.mapledir-embed-badge__preview {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--mapledir-border);
	border-radius: var(--mapledir-radius);
	margin-bottom: 16px;
}

.mapledir-embed-badge__preview--dark {
	background: #1f2937;
	color: #f9fafb;
	border-color: #374151;
}

.mapledir-embed-badge__preview--light {
	background: #fff;
}

.mapledir-embed-badge__stars {
	display: flex;
	align-items: center;
	gap: 4px;
}

.mapledir-embed-badge__rating {
	font-weight: 700;
	font-size: 1.1em;
}

.mapledir-embed-badge__info {
	font-size: 0.9em;
	line-height: 1.4;
}

.mapledir-embed-badge__info strong {
	display: block;
}

.mapledir-embed-badge__info small {
	color: var(--mapledir-text-muted);
}

.mapledir-embed-badge__code {
	margin-bottom: 16px;
}

.mapledir-embed-badge__code label {
	display: block;
	font-weight: 500;
	margin-bottom: 6px;
	font-size: 0.9em;
}

.mapledir-embed-badge__snippet {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--mapledir-border);
	border-radius: 6px;
	font-family: monospace;
	font-size: 0.85em;
	background: var(--mapledir-bg);
	resize: none;
	margin-bottom: 6px;
}

.mapledir-embed-badge__qr label {
	display: block;
	font-weight: 500;
	margin-bottom: 6px;
	font-size: 0.9em;
}

.mapledir-qr-image {
	border: 1px solid var(--mapledir-border);
	border-radius: var(--mapledir-radius);
	padding: 8px;
	background: #fff;
}

/* === Compare === */
.mapledir-compare {
	margin: 24px 0;
	overflow-x: auto;
}

.mapledir-compare__share {
	margin-bottom: 12px;
}

.mapledir-compare__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 600px;
}

.mapledir-compare__table th,
.mapledir-compare__table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--mapledir-border);
	text-align: left;
	vertical-align: top;
}

.mapledir-compare__header {
	text-align: center;
	min-width: 150px;
}

.mapledir-compare__thumb {
	width: 120px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--mapledir-radius);
	margin-bottom: 6px;
}

.mapledir-compare__title {
	display: block;
	font-weight: 600;
	font-size: 0.95em;
	color: var(--mapledir-text);
	text-decoration: none;
}

.mapledir-compare__title:hover {
	color: var(--mapledir-primary);
}

.mapledir-compare__label {
	font-weight: 600;
	font-size: 0.9em;
	color: var(--mapledir-text-muted);
	white-space: nowrap;
	width: 140px;
}

.mapledir-compare__na {
	color: var(--mapledir-text-muted);
}

.mapledir-compare-btn.is-comparing {
	background: var(--mapledir-primary);
	color: #fff;
	border-color: var(--mapledir-primary);
}

/* === Claim Form === */
.mapledir-claim-form__field {
	margin-bottom: 16px;
}

.mapledir-claim-form__field label {
	display: block;
	font-weight: 500;
	margin-bottom: 4px;
}

.mapledir-claim-form__field input,
.mapledir-claim-form__field textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--mapledir-border);
	border-radius: 6px;
	font-size: 0.95em;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.mapledir-user-listing-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.mapledir-user-account__profile {
		flex-direction: column;
		text-align: center;
	}

	.mapledir-user-account__stats {
		flex-direction: column;
		gap: 12px;
	}

	.mapledir-dashboard__tabs {
		gap: 0;
	}

	.mapledir-dashboard__tab {
		padding: 8px 12px;
		font-size: 0.9em;
	}
}

/* ── Booking Widget (embedded external scheduler) ──────────────────────── */

.mapledir-booking-widget {
	width: 100%;
	min-height: 120px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.mapledir-booking-widget__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2rem 1rem;
	text-align: center;
	background: linear-gradient( to bottom, #fafafa, #f0f0f0 );
}

.mapledir-booking-widget__label {
	font-size: 1rem;
	color: #1e1e1e;
	margin: 0;
}

.mapledir-booking-widget__load-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: #fff;
	background: #1e1e1e;
	border: 0;
	border-radius: 9999px;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.mapledir-booking-widget__load-btn:hover,
.mapledir-booking-widget__load-btn:focus-visible {
	background: #333;
}

.mapledir-booking-widget__privacy-note {
	font-size: 0.75rem;
	color: #757575;
	margin: 0;
	max-width: 48ch;
	line-height: 1.4;
}

.mapledir-booking-widget__privacy-note a {
	color: #555;
	text-decoration: underline;
}

.mapledir-booking-widget__frame {
	display: block;
	width: 100%;
	border: 0;
}

/* ── Claim Modal ───────────────────────────────────────────────────────── */

.mapledir-claim-modal {
	border: none;
	border-radius: 12px;
	padding: 0;
	max-width: 480px;
	width: 90vw;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.mapledir-claim-modal::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.mapledir-claim-modal__content {
	padding: 24px;
}

.mapledir-claim-modal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.mapledir-claim-modal__title {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0;
}

.mapledir-claim-modal__close {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 4px 8px;
	line-height: 1;
	color: #666;
}

.mapledir-claim-modal__close:hover {
	color: #333;
}

.mapledir-claim-modal__field {
	margin-bottom: 16px;
}

.mapledir-claim-modal__field label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 4px;
}

.mapledir-claim-modal__field input,
.mapledir-claim-modal__field textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 0.875rem;
	font-family: inherit;
	box-sizing: border-box;
}

.mapledir-claim-modal__field input:focus,
.mapledir-claim-modal__field textarea:focus {
	outline: 2px solid #0073aa;
	outline-offset: -1px;
	border-color: #0073aa;
}

.mapledir-claim-modal__actions {
	margin-top: 20px;
}

.mapledir-claim-modal__submit {
	width: 100%;
	padding: 10px 20px;
	background: #0073aa;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
}

.mapledir-claim-modal__submit:hover {
	background: #005a87;
}

.mapledir-claim-modal__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.mapledir-claim-modal__status {
	margin-top: 12px;
	font-size: 0.875rem;
	text-align: center;
	min-height: 1.25em;
}

.mapledir-claim-modal__status--success {
	color: #46b450;
}

.mapledir-claim-modal__status--error {
	color: #dc3232;
}

/* ── Save Search Form ──────────────────────────────────────────────────── */

.mapledir-save-search-form {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.mapledir-save-search-form input[type="text"] {
	flex: 1;
	min-width: 200px;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 0.875rem;
}

.mapledir-save-search-form button {
	padding: 8px 16px;
	border-radius: 6px;
	border: 1px solid #0073aa;
	background: #0073aa;
	color: #fff;
	cursor: pointer;
	font-size: 0.875rem;
}

.mapledir-save-search-form button:hover {
	background: #005a87;
}

.mapledir-save-search__status {
	width: 100%;
	font-size: 0.8125rem;
	min-height: 1.25em;
}

.mapledir-save-search__status--success {
	color: #46b450;
}

.mapledir-save-search__status--error {
	color: #dc3232;
}

/* ── Save to List Dropdown ─────────────────────────────────────────────── */

.mapledir-save-to-list {
	position: relative;
	display: inline-block;
}

.mapledir-save-to-list__toggle {
	background: none;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 6px 12px;
	cursor: pointer;
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	gap: 4px;
}

.mapledir-save-to-list__toggle:hover {
	border-color: #999;
}

.mapledir-save-to-list__menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	min-width: 200px;
	padding: 8px;
	margin-top: 4px;
}

.mapledir-save-to-list__menu.is-open {
	display: block;
}

.mapledir-save-to-list__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.875rem;
}

.mapledir-save-to-list__item:hover {
	background: #f5f5f5;
}

.mapledir-save-to-list__create {
	border-top: 1px solid #eee;
	margin-top: 8px;
	padding-top: 8px;
	display: flex;
	gap: 4px;
}

.mapledir-save-to-list__create-input {
	flex: 1;
	padding: 4px 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 0.8125rem;
}

.mapledir-save-to-list__create-btn {
	padding: 4px 8px;
	background: #0073aa;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.8125rem;
}

/* ── Accessibility ─────────────────────────────────────────────────────── */

/* Focus-visible outlines for all interactive elements. */
.mapledir-button:focus-visible,
.mapledir-listing-card a:focus-visible,
.mapledir-listing-card__title a:focus-visible,
.mapledir-listing-types-card:focus-visible,
.mapledir-listing-types-card a:focus-visible,
.mapledir-compare-btn:focus-visible,
.mapledir-save-to-list__toggle:focus-visible,
.mapledir-save-search-form button:focus-visible,
.mapledir-search-bar__submit:focus-visible,
.mapledir-sponsored__cta:focus-visible,
.mapledir-dashboard__tab:focus-visible,
.mapledir-review-sort__option:focus-visible,
.mapledir-booking-widget__load-btn:focus-visible,
.mapledir-claim-modal__close:focus-visible,
.mapledir-claim-modal__submit:focus-visible,
.mapledir-pagination a:focus-visible,
[data-action]:focus-visible {
	outline: 2px solid var(--mapledir-primary, #2563eb);
	outline-offset: 2px;
}

/* Ensure focus is visible on inputs/textareas. */
.mapledir-search-bar input:focus-visible,
.mapledir-claim-modal__field input:focus-visible,
.mapledir-claim-modal__field textarea:focus-visible,
.mapledir-save-search-form input:focus-visible {
	outline: 2px solid var(--mapledir-primary, #2563eb);
	outline-offset: -1px;
}

/* Reduced motion preferences. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── Maple DIR Listing block (media-text-style layout) ──────────────────── */

.wp-block-maple-dir-listing {
	display: grid;
	gap: 1.5rem;
	align-items: start;
	grid-template-columns: var( --maple-dir-media-width, 50% ) 1fr;
	border-radius: inherit;
	overflow: hidden;
}

.wp-block-maple-dir-listing.has-media-on-the-right {
	grid-template-columns: 1fr var( --maple-dir-media-width, 50% );
}

.wp-block-maple-dir-listing.has-media-on-the-right .wp-block-maple-dir-listing__media {
	grid-column: 2;
	grid-row: 1;
}

.wp-block-maple-dir-listing.has-media-on-the-right .wp-block-maple-dir-listing__content {
	grid-column: 1;
	grid-row: 1;
}

.wp-block-maple-dir-listing__media {
	margin: 0;
	border-radius: inherit;
}

.wp-block-maple-dir-listing__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: inherit;
}

.wp-block-maple-dir-listing__placeholder {
	aspect-ratio: 3 / 2;
	background: #f0f0f1;
	border: 1px dashed #c3c4c7;
	border-radius: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	color: #646970;
	font-size: 0.875rem;
	text-align: center;
}

/* Listing Fields block — standalone <dl> rendered by maple-dir/listing-fields.
   Inner dl is emitted directly via get_block_wrapper_attributes so author-
   applied typography / color / spacing inherits naturally. */
.maple-dir-listing-fields {
	margin: 0;
}

.maple-dir-listing-fields dt {
	font-weight: 600;
	margin-top: 0.75rem;
}

.maple-dir-listing-fields dt:first-child {
	margin-top: 0;
}

.maple-dir-listing-fields dd {
	margin: 0 0 0.25rem;
}

.maple-dir-listing-fields__empty {
	color: #787c82;
}

@media ( max-width: 600px ) {
	.wp-block-maple-dir-listing.is-stacked-on-mobile,
	.wp-block-maple-dir-listing.is-stacked-on-mobile.has-media-on-the-right {
		grid-template-columns: 1fr;
	}

	.wp-block-maple-dir-listing.is-stacked-on-mobile .wp-block-maple-dir-listing__media,
	.wp-block-maple-dir-listing.is-stacked-on-mobile .wp-block-maple-dir-listing__content {
		grid-column: 1;
	}
}

/* ── Maple DIR Listing Slider — magazine layout ─────────────────────────── */

.maple-dir-listing-slider { position: relative; }

.maple-dir-listing-slider__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 600px;
}

.maple-dir-listing-slider__featured {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 2rem;
	overflow: hidden;
}

.maple-dir-listing-slider__featured-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.maple-dir-listing-slider__featured-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( to bottom, transparent 20%, rgba( 0, 0, 0, 0.7 ) 100% );
}

.maple-dir-listing-slider__featured-content {
	position: relative;
	z-index: 2;
}

.maple-dir-listing-slider__heading {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba( 255, 255, 255, 0.8 );
	margin-bottom: 1.25rem;
}

.maple-dir-listing-slider__badge {
	display: inline-block;
	padding: 0.125rem 0.625rem;
	background: rgba( 255, 255, 255, 0.15 );
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 0.25rem;
	margin-bottom: 0.75rem;
}

.maple-dir-listing-slider__featured-title {
	font-size: clamp( 1.25rem, 2.5vw, 2rem );
	font-weight: 700;
	color: #fff;
	line-height: 1.25;
	margin: 0 0 0.75rem;
}

.maple-dir-listing-slider__featured-title a {
	color: inherit;
	text-decoration: none;
}

.maple-dir-listing-slider__featured-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.maple-dir-listing-slider__meta {
	font-size: 0.875rem;
	color: rgba( 255, 255, 255, 0.9 );
	margin-bottom: 1.5rem;
}

.maple-dir-listing-slider__cta {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	border-radius: 0.5rem;
	transition: border-color 150ms ease-out, background 150ms ease-out;
}

.maple-dir-listing-slider__cta:hover {
	border-color: #fff;
	background: rgba( 255, 255, 255, 0.08 );
}

.maple-dir-listing-slider__stars {
	display: inline-flex;
	gap: 1px;
	font-size: 1rem;
	line-height: 1;
}

.maple-dir-listing-slider__stars .is-full,
.maple-dir-listing-slider__stars .is-half {
	color: #f5a623;
}

.maple-dir-listing-slider__stars .is-empty {
	color: rgba( 255, 255, 255, 0.4 );
}

.maple-dir-listing-slider__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	padding: 1rem;
	background: #f6f6f6;
}

.maple-dir-listing-slider__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 0.75rem;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 250ms ease-out, transform 250ms ease-out;
}

.maple-dir-listing-slider__card:hover {
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.1 );
	transform: translateY( -2px );
}

.maple-dir-listing-slider__card-image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.maple-dir-listing-slider__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease-out;
}

.maple-dir-listing-slider__card:hover .maple-dir-listing-slider__card-image img {
	transform: scale( 1.05 );
}

.maple-dir-listing-slider__card-body {
	padding: 1rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.maple-dir-listing-slider__card-badge {
	display: inline-block;
	align-self: flex-start;
	padding: 0.125rem 0.5rem;
	background: #f6f6f6;
	color: #555;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 0.25rem;
}

.maple-dir-listing-slider__card-title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	color: #111;
}

.maple-dir-listing-slider__card-meta {
	margin-top: auto;
	font-size: 0.875rem;
}

.maple-dir-listing-slider__card-meta .maple-dir-listing-slider__stars .is-empty {
	color: #cfd2d4;
}

@media ( max-width: 782px ) {
	.maple-dir-listing-slider__layout { grid-template-columns: 1fr; }
	.maple-dir-listing-slider__featured { min-height: 400px; }
	.maple-dir-listing-slider__grid { grid-template-columns: 1fr; }
}

@media ( prefers-reduced-motion: reduce ) {
	.maple-dir-listing-slider__card,
	.maple-dir-listing-slider__card-image img,
	.maple-dir-listing-slider__cta { transition: none; }
}

/* ── Maple DIR Listing Hero — four style presets ─────────────────────────── */

.maple-dir-listing-hero { position: relative; border-radius: inherit; }

.maple-dir-listing-hero__media { margin: 0; }

.maple-dir-listing-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.maple-dir-listing-hero__placeholder {
	aspect-ratio: 16 / 9;
	border-radius: inherit;
}

/* ─────────────────────────────────────────────────────────────────────
 * Hero background recolour handles — single source of truth (1.5.6+)
 *
 * The single-listing hero has two background surfaces, each with its
 * own class so you can recolour either from Appearance → Customize →
 * Additional CSS:
 *
 *     .maple-dir-hero-overlay {                                  ← the dark scrim over the hero photo
 *         background: linear-gradient(
 *             to bottom,
 *             rgba( 0, 0, 0, 0.1 ) 0%,
 *             rgba( 0, 0, 0, 0.7 ) 100%
 *         );
 *     }
 *     .maple-dir-hero-placeholder { background: #e2e4e7; }       ← the fallback fill when a listing has no photo
 *
 * `.maple-dir-hero-overlay` is the layer that sits between the photo
 * and the title text — darken it for more text contrast, lighten it
 * to let more of the photo through, or swap the gradient for a flat
 * brand tint. Structural styles (positioning, sizing) stay on the BEM
 * classes so a colour override never disturbs layout.
 * ───────────────────────────────────────────────────────────────────── */
.maple-dir-hero-overlay {
	background: linear-gradient( to bottom, rgba( 0, 0, 0, 0.1 ) 0%, rgba( 0, 0, 0, 0.7 ) 100% );
}

.maple-dir-hero-placeholder {
	background: #e2e4e7;
}

.maple-dir-listing-hero__content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.maple-dir-listing-hero__badge {
	display: inline-block;
	align-self: flex-start;
	padding: 0.25rem 0.75rem;
	background: rgba( 0, 0, 0, 0.08 );
	color: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 0.25rem;
}

.maple-dir-listing-hero__title {
	font-size: clamp( 1.75rem, 4vw, 3.25rem );
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}

.maple-dir-listing-hero__title a {
	color: inherit;
	text-decoration: none;
}

.maple-dir-listing-hero__title a:hover { text-decoration: underline; text-underline-offset: 4px; }

.maple-dir-listing-hero__subtitle {
	font-size: 1.125rem;
	line-height: 1.5;
	margin: 0;
	opacity: 0.85;
}

.maple-dir-listing-hero__stars {
	display: inline-flex;
	gap: 1px;
	font-size: 1.25rem;
	line-height: 1;
}

.maple-dir-listing-hero__stars .is-full,
.maple-dir-listing-hero__stars .is-half { color: #f5a623; }

.maple-dir-listing-hero__stars .is-empty { color: rgba( 0, 0, 0, 0.2 ); }

.maple-dir-listing-hero__cta {
	align-self: flex-start;
	display: inline-block;
	padding: 0.875rem 1.75rem;
	background: currentColor;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0.5rem;
	margin-top: 0.5rem;
	transition: opacity 150ms ease-out, transform 150ms ease-out;
}

.maple-dir-listing-hero__cta > * { color: #fff; }

.maple-dir-listing-hero__cta:hover { opacity: 0.9; transform: translateY( -1px ); }

/* 1.4.19 hero pills (Verified + Learn more) — chunky white pills with
 * coloured borders, drop shadow, and inline icon. Matches the original
 * `mapledir-verified-badge--large` look from when the Verified pill
 * rendered outside the hero (1.4.7 era), now applied uniformly to both
 * pills inside the hero. 1.4.15's compact solid-green pill was too
 * "boring generic" — this restores the chunkier button feel.
 *
 * Sized 1.5rem-icon + 1.125rem-label + 0.75rem×1.5rem padding so the
 * pills read at a glance on the dark hero overlay. Drop shadow gives
 * them physical separation from the hero image behind them. */
.maple-dir-listing-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1rem;
}

.maple-dir-listing-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.18 );
	transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.maple-dir-listing-hero__pill:hover,
.maple-dir-listing-hero__pill:focus-visible {
	transform: translateY( -1px );
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.22 );
}

.maple-dir-listing-hero__pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	flex-shrink: 0;
}
.maple-dir-listing-hero__pill-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ─────────────────────────────────────────────────────────────────────
 * Verified hero pill — recolour handles (1.5.6+)
 *
 * The Verified pill in the listing hero has five colour surfaces,
 * spread across three handle classes you can target from
 * Appearance → Customize → Additional CSS:
 *
 *     .maple-dir-hero-verified {                     ← the pill itself
 *         background-color: #ffffff;                 ←   pill background
 *         color: #1a1a1a;                            ←   label text colour
 *         border: 2px solid #2D7A2C;                 ←   pill border
 *     }
 *     .maple-dir-hero-verified-icon-bg {              ← the icon's circle
 *         fill: #2D7A2C;                             ←   icon background
 *     }
 *     .maple-dir-hero-verified-icon-fg {              ← the icon's check
 *         stroke: #FFFFFF;                           ←   icon colour
 *     }
 *
 * The icon is an inline SVG: the circle behind the checkmark takes
 * `fill` (its "background"), the checkmark itself takes `stroke` (its
 * "colour"). Structural styles (the chunky pill shape, padding,
 * shadow, hover lift) stay on the `.maple-dir-listing-hero__pill` BEM
 * classes, so a colour override never disturbs the pill's layout or
 * motion. Matches the standalone `mapledir-verified-badge--large`
 * style.
 * ───────────────────────────────────────────────────────────────────── */
.maple-dir-hero-verified {
	background-color: #ffffff;
	color: #1a1a1a;
	border: 2px solid #2D7A2C;
}

.maple-dir-hero-verified-icon-bg {
	fill: #2D7A2C;
}

.maple-dir-hero-verified-icon-fg {
	stroke: #FFFFFF;
}

/* ─────────────────────────────────────────────────────────────────────
 * "Learn more" hero pill — recolour handles (1.5.6+)
 *
 * The Learn more pill in the listing hero has five colour surfaces,
 * spread across three handle classes you can target from
 * Appearance → Customize → Additional CSS:
 *
 *     .maple-dir-hero-learn-more {                  ← the pill itself
 *         background-color: #ffffff;                ←   pill background
 *         color: #ae1b23;                           ←   label text colour
 *         border: 2px solid #ae1b23;                ←   pill border
 *     }
 *     .maple-dir-hero-learn-more-icon-bg {           ← the icon's circle
 *         fill: #ae1b23;                            ←   icon background
 *     }
 *     .maple-dir-hero-learn-more-icon-fg {           ← the icon's arrow
 *         stroke: #FFFFFF;                          ←   icon colour
 *     }
 *
 * The icon is an inline SVG: the circle behind the arrow takes `fill`
 * (its "background"), the arrow itself takes `stroke` (its "colour").
 * Structural styles (the chunky pill shape, padding, shadow, hover
 * lift) stay on the `.maple-dir-listing-hero__pill` BEM classes, so a
 * colour override never disturbs the pill's layout or motion.
 * ───────────────────────────────────────────────────────────────────── */
.maple-dir-hero-learn-more {
	background-color: #ffffff;
	color: var(--mapledir-brand, #ae1b23);
	border: 2px solid var(--mapledir-brand, #ae1b23);
}

.maple-dir-hero-learn-more-icon-bg {
	fill: var(--mapledir-brand, #ae1b23);
}

.maple-dir-hero-learn-more-icon-fg {
	stroke: #FFFFFF;
}

/* ─────────────────────────────────────────────────────────────────────
 * Contact-action hero pills (1.8.4+)
 *
 * The Register / Visit website / Phone / Email pills are rendered by
 * the shared `maple-site-kit/action-pills` block (MSK 1.6.13+).
 * `MapleDir_Action_Pills_Adapter` hooks the MSK filter and injects the
 * four directory pills from `_mapledir_*` postmeta. The pill visual
 * treatment + recolour handles live in MSK's `assets/css/blocks.css`
 * under `.msk-action-pill*`.
 *
 * The block emits a `<div class="msk-action-pills">` wrapper as a
 * sibling of the hero's Verified + Learn more pills. We flatten that
 * wrapper here so all six pills flow in a single flex row with one
 * consistent gap. `display: contents` skips the wrapper's box but
 * keeps its children in the parent's layout. Reduced-motion users
 * aren't affected — this is layout-only, no animation.
 * ───────────────────────────────────────────────────────────────────── */
.maple-dir-listing-hero__pills .msk-action-pills {
	display: contents;
}

/* Height-match the MSK action pills to the directory's own Verified +
 * Learn more pills. MSK's base `.msk-action-pill` is sized for a more
 * compact row (0.25rem vertical padding, inherited font-size, 1.75rem
 * icon ≈ 2.25rem tall), which sits noticeably shorter than the chunky
 * 0.75rem-padded / 1.125rem-font / 1.5em-icon directory pills (≈3.19rem)
 * once they share one flex row. Re-state the directory pill's vertical
 * metrics here — scoped to inside the hero pill row only — so all six
 * pills line up at the same height. We bump only the vertical padding,
 * font-size, and icon box (which drive height); MSK's left-flush icon
 * padding and recolour handles are left untouched. */
.maple-dir-listing-hero__pills .msk-action-pill {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	font-size: 1.125rem;
}
.maple-dir-listing-hero__pills .msk-action-pill__icon {
	width: 1.5em;
	height: 1.5em;
}

/* Smooth-scroll on Learn-more anchor click. Reduced-motion users
 * already get the `scroll-behavior: auto !important` override from
 * the `prefers-reduced-motion` block earlier in this file. */
html {
	scroll-behavior: smooth;
}

/* Cover preset */

.maple-dir-listing-hero.is-style-cover {
	min-height: var( --maple-dir-hero-min-height, 480px );
	display: flex;
	align-items: flex-end;
	padding: 2.5rem;
	overflow: hidden;
	color: #fff;
}

.maple-dir-listing-hero.is-style-cover .maple-dir-listing-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.maple-dir-listing-hero.is-style-cover .maple-dir-listing-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* The scrim `background` lives on the `.maple-dir-hero-overlay`
	 * handle class (defined above) so it can be recoloured from
	 * Customizer CSS without fighting this rule's specificity. */
}

.maple-dir-listing-hero.is-style-cover .maple-dir-listing-hero__content {
	position: relative;
	z-index: 2;
	max-width: 720px;
}

.maple-dir-listing-hero.is-style-cover .maple-dir-listing-hero__badge {
	background: rgba( 255, 255, 255, 0.18 );
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	color: #fff;
}

.maple-dir-listing-hero.is-style-cover .maple-dir-listing-hero__stars .is-empty {
	color: rgba( 255, 255, 255, 0.4 );
}

.maple-dir-listing-hero.is-style-cover .maple-dir-listing-hero__cta {
	background: #fff;
	color: #111;
}

/* Split presets */

.maple-dir-listing-hero.is-style-split-left,
.maple-dir-listing-hero.is-style-split-right {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: center;
}

.maple-dir-listing-hero.is-style-split-right .maple-dir-listing-hero__media {
	order: 2;
}

.maple-dir-listing-hero.is-style-split-left .maple-dir-listing-hero__media,
.maple-dir-listing-hero.is-style-split-right .maple-dir-listing-hero__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: inherit;
}

/* Card preset */

.maple-dir-listing-hero.is-style-card {
	display: flex;
	flex-direction: column;
	background: var( --wp--preset--color--background, #fff );
	border-radius: inherit;
	overflow: hidden;
}

.maple-dir-listing-hero.is-style-card .maple-dir-listing-hero__media {
	aspect-ratio: 21 / 9;
	overflow: hidden;
}

.maple-dir-listing-hero.is-style-card .maple-dir-listing-hero__content {
	padding: 2rem;
}

@media ( max-width: 782px ) {
	.maple-dir-listing-hero.is-style-split-left,
	.maple-dir-listing-hero.is-style-split-right { grid-template-columns: 1fr; gap: 1.25rem; }
	.maple-dir-listing-hero.is-style-split-right .maple-dir-listing-hero__media { order: 0; }
	.maple-dir-listing-hero.is-style-cover { padding: 1.5rem; }
}

@media ( prefers-reduced-motion: reduce ) {
	.maple-dir-listing-hero__cta { transition: none; }
}

/* ── Maple DIR Listing Cards Slider — scroll-snap carousel ─────────────── */

.maple-dir-listing-cards-slider {
	position: relative;
	border-radius: inherit;
}

.maple-dir-listing-cards-slider__header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	padding: 0 2.5rem;
}

.maple-dir-listing-cards-slider__heading {
	font-size: clamp( 1.5rem, 2.5vw, 2rem );
	font-weight: 700;
	margin: 0;
}

.maple-dir-listing-cards-slider__subheading {
	margin: 0;
	opacity: 0.8;
}

.maple-dir-listing-cards-slider__viewport { position: relative; }

.maple-dir-listing-cards-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc( ( 100% - ( ( var( --mdls-per-view, 3 ) - 1 ) * 1rem ) ) / var( --mdls-per-view, 3 ) );
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-padding: 0 2.5rem;
	padding: 0.25rem 2.5rem;
}

.maple-dir-listing-cards-slider__track::-webkit-scrollbar { display: none; }

.maple-dir-listing-cards-slider__card {
	/* Structural — card shape, shadow, hover lift. Background + text
	 * colour live on the `.maple-dir-slider-card` recolour handle below. */
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	border-radius: 0.75rem;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
	transition: box-shadow 250ms ease-out, transform 250ms ease-out;
}

.maple-dir-listing-cards-slider__card:hover {
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.12 );
	transform: translateY( -2px );
}

.maple-dir-listing-cards-slider__image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #e2e4e7;
}

.maple-dir-listing-cards-slider__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.maple-dir-listing-cards-slider__badge {
	/* Structural — position + shape. Background + text colour live on
	 * the `.maple-dir-slider-card-badge` recolour handle below. */
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.2rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 0.25rem;
}

.maple-dir-listing-cards-slider__body {
	padding: 0.875rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.maple-dir-listing-cards-slider__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	color: inherit;
}

.maple-dir-listing-cards-slider__stars {
	display: inline-flex;
	gap: 1px;
	font-size: 0.875rem;
	line-height: 1;
}

.maple-dir-listing-cards-slider__stars .is-full,
.maple-dir-listing-cards-slider__stars .is-half { color: #f5a623; }

.maple-dir-listing-cards-slider__stars .is-empty { color: #cfd2d4; }

.maple-dir-listing-cards-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	background: #fff;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.1 );
	transition: background 150ms ease-out;
}

.maple-dir-listing-cards-slider__arrow:hover  { background: #f6f6f6; }
.maple-dir-listing-cards-slider__arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.maple-dir-listing-cards-slider__arrow--prev { left: 0.5rem; }
.maple-dir-listing-cards-slider__arrow--next { right: 0.5rem; }

.maple-dir-listing-cards-slider__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

.maple-dir-listing-cards-slider__dot {
	/* 24×24 tap target (a11y) with a 10px visual dot via ::before. */
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	position: relative;
}

.maple-dir-listing-cards-slider__dot::before {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.2 );
	transition: background 150ms ease-out, transform 150ms ease-out;
}

.maple-dir-listing-cards-slider__dot.is-active::before {
	background: currentColor;
	transform: scale( 1.3 );
}

@media ( max-width: 600px ) {
	.maple-dir-listing-cards-slider__track { grid-auto-columns: 85%; }
	.maple-dir-listing-cards-slider__header,
	.maple-dir-listing-cards-slider__track { padding-left: 1rem; padding-right: 1rem; }
	.maple-dir-listing-cards-slider__arrow { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.maple-dir-listing-cards-slider__card,
	.maple-dir-listing-cards-slider__dot::before,
	.maple-dir-listing-cards-slider__arrow { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Listings carousel cards — recolour handles (1.5.6+)
 *
 * Each card in the listings carousel (the "Similar camps" slider on a
 * single-listing page, and any other listing-cards-slider placement)
 * has two recolourable surfaces, each with its own handle class you can
 * target from Appearance → Customize → Additional CSS:
 *
 *     .maple-dir-slider-card {                       ← the card itself
 *         background: #fff;                           ←   card background
 *         color: #1a1a1a;                             ←   card title text
 *     }
 *     .maple-dir-slider-card-badge {                 ← the listing-type badge
 *         background: rgba( 255, 255, 255, 0.92 );    ←   badge background
 *         color: #111;                                ←   badge text
 *     }
 *
 * `.maple-dir-slider-card` sets the card's text colour too — the card
 * title cascades from it via `color: inherit`. Structural styles (card
 * shape, shadow, hover lift, badge position) stay on the
 * `.maple-dir-listing-cards-slider__*` BEM classes, so a colour
 * override never disturbs layout.
 * ───────────────────────────────────────────────────────────────────── */
.maple-dir-slider-card {
	background: #fff;
	color: #1a1a1a;
}

.maple-dir-slider-card-badge {
	background: rgba( 255, 255, 255, 0.92 );
	color: #111;
}

/* ── Directory Stats ─────────────────────────────────────────────────── */
.maple-dir-directory-stats {
	width: 100%;
}

.maple-dir-directory-stats__row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( var( --mdds-columns, 4 ), minmax( 0, 1fr ) );
	gap: 1rem;
	text-align: center;
}

.maple-dir-directory-stats__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.25rem 0.5rem;
}

.maple-dir-directory-stats__value {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
}

.maple-dir-directory-stats__label {
	font-size: 0.875rem;
	opacity: 0.8;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

@media ( max-width: 600px ) {
	.maple-dir-directory-stats__row {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
	.maple-dir-directory-stats__value {
		font-size: 1.75rem;
	}
}

/* ── Directory Intro ─────────────────────────────────────────────────── */
.maple-dir-directory-intro__heading {
	margin: 0 0 0.75rem;
}

.maple-dir-directory-intro__category {
	font-size: 1.0625rem;
	line-height: 1.6;
}

.maple-dir-directory-intro__listing {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
}

.maple-dir-directory-intro__notes-heading {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

/* ── Listing About — 1.4.14 ───────────────────────────────────────────
 * Wide-aligned single-column About section. Text is centred so a short
 * marketing intro reads as visually balanced inside the wide column
 * instead of running into a long ragged line. Premium-tier listings
 * (which render full post_content via the_content filters) keep their
 * native text alignment via the inner --premium content scope.
 */
.maple-dir-listing-about {
	text-align: center;
}

/* 1.4.20: block-emitted heading "About <Camp name>". Replaces the
 * standalone "About" heading the camp template used to emit above the
 * block — keeps the heading visually anchored to its content even when
 * other surfaces (free / premium tiers) re-arrange what sits below. */
.maple-dir-listing-about__title {
	margin: 0 0 0.75rem;
	padding: 0 0 0.5rem;
	color: var(--mapledir-brand-dark, #7F0F20);
	font-weight: 700;
}

.maple-dir-listing-about__generic,
.maple-dir-listing-about__description {
	margin: 0 auto;
	max-width: 60ch;       /* readable single-line max even at alignwide */
	font-size: 1.0625rem;
	line-height: 1.55;
}

.maple-dir-listing-about__description {
	margin-top: 0.75rem;
}

/* Premium-tier authored content (paragraphs, images, embeds, etc.)
 * inherits the centred wrapper by default but operators may want to
 * left-align rich content. Reset to left so a premium operator
 * pasting a long article doesn't get awkward centred line breaks. */
.maple-dir-listing-about--premium .maple-dir-listing-about__content {
	text-align: left;
}

/* ── Directory Feature Cards ─────────────────────────────────────────── */
.maple-dir-directory-feature-cards__heading {
	margin: 0 0 1.25rem;
	text-align: center;
}

.maple-dir-directory-feature-cards__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 1.5rem;
}

/* ─────────────────────────────────────────────────────────────────────
 * Feature-card surface — single source of truth (1.5.6+)
 *
 * Every "What to expect" card on the single-listing template carries
 * the `.maple-dir-feature-card` class. It owns the card's background
 * AND text colour; the icon inherits that text colour via
 * `currentColor`, so this one rule controls background + text + icons
 * together. To recolour every card at once, drop this into
 * Appearance → Customize → Additional CSS:
 *
 *     .maple-dir-feature-card {
 *         background-color: #F4EFDE;  ← card background
 *         color: #1a1a1a;             ← title, body, AND icon colour
 *     }
 *
 * Want the icon a DIFFERENT colour from the text? Add one more rule:
 *
 *     .maple-dir-feature-card .maple-dir-directory-feature-cards__icon {
 *         color: #ae1b23;
 *     }
 *
 * Structural styles (padding, radius, centring) stay on the BEM
 * `__card` class below so a colour override never disturbs layout.
 * ───────────────────────────────────────────────────────────────────── */
.maple-dir-feature-card {
	background-color: #F4EFDE;
	color: #1a1a1a;
}

.maple-dir-directory-feature-cards__card {
	padding: 1.5rem 1.25rem;
	border-radius: 0.75rem;
	text-align: center;
}

.maple-dir-directory-feature-cards__icon {
	display: block;
	font-size: 2rem;
	width: 2rem;
	height: 2rem;
	margin: 0 auto 1.25rem;
	color: currentColor;
	opacity: 0.85;
}

.maple-dir-directory-feature-cards__title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

.maple-dir-directory-feature-cards__body {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	opacity: 0.85;
}

/* ── Directory FAQs ──────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────
 * FAQ recolour handles — single source of truth (1.5.6+)
 *
 * Four colour surfaces on the single-listing FAQ section, each with its
 * own class so you can recolour any of them from Appearance →
 * Customize → Additional CSS:
 *
 *     .maple-dir-faq-section { background-color: #F4EFDE; }   ← the full-width band behind the FAQ
 *     .maple-dir-faq-heading { color: #7F0F20; }              ← the "Frequently asked questions" heading
 *     .maple-dir-faq-item    {                                 ← each accordion row
 *         background-color: rgba( 0, 0, 0, 0.03 );             ←   ...its background
 *         color: #1a1a1a;                                      ←   ...its question + answer text
 *     }
 *
 * `.maple-dir-faq-item`'s `color` cascades to both the question
 * (summary) and the answer, so that one line covers "FAQ item text".
 * Structural styles (padding, radius, layout) stay on the BEM classes
 * below, so a colour override never disturbs layout.
 *
 * The default item background is a 3%-black tint — it sits a touch
 * darker than whatever `.maple-dir-faq-section` is, so recolouring the
 * section keeps the items legible automatically. Swap it for a solid
 * colour if you'd rather pin it.
 * ───────────────────────────────────────────────────────────────────── */
.maple-dir-faq-section {
	background-color: #F4EFDE;
}

.maple-dir-faq-heading {
	color: var(--mapledir-brand-dark, #7F0F20);
}

.maple-dir-faq-item {
	background-color: rgba( 0, 0, 0, 0.03 );
	color: #1a1a1a;
}

.maple-dir-directory-faqs__heading {
	margin: 0 0 1.25rem;
}

.maple-dir-directory-faqs__list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.maple-dir-directory-faqs__item {
	padding: 1rem 1.125rem;
	border-radius: 0.5rem;
}

.maple-dir-directory-faqs__question {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.maple-dir-directory-faqs__question::after {
	content: "+";
	font-size: 1.25rem;
	line-height: 1;
	transition: transform 200ms ease-out;
}

.maple-dir-directory-faqs__item[open] .maple-dir-directory-faqs__question::after {
	transform: rotate( 45deg );
}

.maple-dir-directory-faqs__question::-webkit-details-marker {
	display: none;
}

.maple-dir-directory-faqs__answer {
	margin-top: 0.75rem;
	line-height: 1.55;
}

/* ── Directory Trust Strip ───────────────────────────────────────────── */
.maple-dir-directory-trust-strip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 1rem;
	text-align: center;
}

.maple-dir-directory-trust-strip__strapline {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
}

.maple-dir-directory-trust-strip__badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.maple-dir-directory-trust-strip__badge {
	/* Structural only — every trust pill is this chunky rounded shape.
	 * Colour lives on the recolour handle classes below
	 * (`.maple-dir-trust-pill`, `.maple-dir-trust-pill-unverified`) and,
	 * for the Verified pill, on the shared `.maple-dir-hero-verified`
	 * handles (see the hero section above).
	 *
	 * 1.4.14: bumped 50% larger so the per-listing trust signals read at
	 * a glance from across the page (the camp template's red trust band
	 * is the section parents use to gauge "should I trust this listing"
	 * before they read the body copy). Padding and font-size both grow
	 * by 1.5x from the pre-1.4.14 sizes. */
	padding: 0.6rem 1.35rem;
	border-radius: 999px;
	font-size: 1.21875rem;       /* 0.8125rem * 1.5 */
	font-weight: 600;
	letter-spacing: 0.02em;
}

.maple-dir-directory-trust-strip__badge::before {
	content: "✓ ";
	margin-right: 0.15rem;
}

/* ─────────────────────────────────────────────────────────────────────
 * Trust-strip pills — recolour handles (1.5.6+)
 *
 * The trust band under a listing has three kinds of pill. Two of them
 * carry their own handle class you can target from
 * Appearance → Customize → Additional CSS:
 *
 *     .maple-dir-trust-pill {                       ← the default ✓ pills
 *         background: ...;                          ←   pill background
 *         color: ...;                               ←   pill text colour
 *         border: ...;                              ←   pill border
 *     }
 *     .maple-dir-trust-pill-unverified { ... }       ← the "Unverified" pill
 *
 * The third — the Verified pill — deliberately has NO handle here: it
 * reuses the hero's `.maple-dir-hero-verified` / `-icon-bg` / `-icon-fg`
 * handles, so the Verified signal is identical on the hero and on this
 * band, and a single Customizer override restyles both.
 *
 * The default pill tints itself from `currentColor` (the band's text
 * colour), so it sits nicely on whatever the surrounding band colour is
 * without per-template overrides. Set `background` explicitly if you'd
 * rather pin a solid colour instead of the auto-tint.
 * ───────────────────────────────────────────────────────────────────── */
.maple-dir-trust-pill {
	background: color-mix( in srgb, currentColor 18%, transparent );
	border: 1px solid color-mix( in srgb, currentColor 35%, transparent );
	color: inherit;
}

/* Unverified pill — neutral grey, no checkmark prefix. Renders against
 * the same dark/red trust band as the default pills but explicitly NOT
 * a positive signal: no current-colour tint, no leading ✓. */
.maple-dir-trust-pill-unverified {
	background: rgba( 200, 200, 200, 0.22 );
	border: 1px solid rgba( 200, 200, 200, 0.40 );
	color: #e0e0e0;
}

.maple-dir-directory-trust-strip__badge--unverified::before {
	content: none;
}

/* Verified pill — colour comes entirely from the shared
 * `.maple-dir-hero-verified` handles (white pill / dark text / green
 * border / green-circle SVG check), so it's pixel-identical to the hero
 * Verified pill. This rule only carries the inline-flex layout the SVG
 * icon needs; the `::before` checkmark is suppressed so we don't double
 * up with the SVG. */
.maple-dir-directory-trust-strip__badge--verified {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.maple-dir-directory-trust-strip__badge--verified::before {
	content: none;
}

.maple-dir-directory-trust-strip__badge-icon {
	display: inline-flex;
	width: 1.1rem;
	height: 1.1rem;
}
.maple-dir-directory-trust-strip__badge-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ─────────────────────────────────────────────────────────────────────
 * Claim Listing CTA (1.6.0)
 *
 * The "Claim this listing" CTA the claims module renders inside the
 * trust strip on unverified listings. The form itself is a Maple Forms
 * form (`.maple-form__*` classes) — Maple Directory owns only the
 * `.maple-dir-claim-cta` wrapper + the scoped colour treatment below.
 * It sits on the dark-red trust band, so the controls go white-on-red.
 *
 * The colour rules are intentionally scoped a single class deep
 * (`.maple-dir-claim-cta .maple-form__…`) so a Customizer override
 * wins the cascade cleanly — see CSS.md.
 * ───────────────────────────────────────────────────────────────────── */
.maple-dir-claim-cta {
	width: 100%;
	max-width: 820px;
	margin: 1.25rem auto 0;
	/* Trust strip wraps everything in `text-align: center` + a flex column
	   with `align-items: center`. Reset both inside the CTA so the form is
	   a normal left-aligned column — otherwise labels (which Maple Forms
	   ships as `display: inline`) flow next to the inputs and each row
	   centers individually, producing the staggered look in the screenshot. */
	text-align: left;
}

.maple-dir-claim-cta__header {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;                /* CTA heading text */
	text-align: left;
}

/* 1.8.2: every rule below needs `!important` because Maple Forms emits a
   per-form inline `<style>` block scoped to `.maple-form[data-form-id="N"]`
   (specificity 0,2,0 for labels; 0,3,0 for `maple-form__field--has-error
   .maple-form__input`). That inline block ships AFTER our frontend.css in
   the cascade, so equal-specificity rules lose. `!important` is the
   smallest hammer that wins reliably here. The rules stay tightly scoped
   to `.maple-dir-claim-cta` so they can't leak into other Maple Forms
   contexts on the same page. */

/* White, bold field labels — stacked above each input so the form reads
   as a clean column. `display: block` overrides Maple Forms' inline
   labels; without it, the trust strip's center-align flows label and
   input on the same row at staggered widths. */
.maple-dir-claim-cta .maple-form__label {
	display: block !important;
	margin-bottom: 0.35rem !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}
.maple-dir-claim-cta .maple-form__required {
	color: #ffffff !important;
}

/* Field wrappers stack vertically with consistent gaps so all rows
   align to the same left edge. */
.maple-dir-claim-cta .maple-form__field {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 0.85rem !important;
}

/* Inputs fill the row — overrides the size-small / size-medium / size-large
   caps Maple Forms applies via `.maple-form__field--size-* .maple-form__input
   { max-width: ... }`. */
.maple-dir-claim-cta .maple-form__input,
.maple-dir-claim-cta .maple-form__input--textarea,
.maple-dir-claim-cta .maple-form__input--select {
	width: 100% !important;
	max-width: 100% !important;
	background: #ffffff !important;
	color: #1a1a1a !important;
	border: 1px solid #ffffff !important;
	box-sizing: border-box;
}

/* Tel field is special — Maple Forms wraps it in `.maple-form__tel`
   (display:flex) with the country prefix as a sibling. Ensure the wrap
   fills the row + the prefix's pale-grey/dark-border treatment doesn't
   clash with the white inputs on the red field. */
.maple-dir-claim-cta .maple-form__tel {
	width: 100% !important;
	max-width: 100% !important;
}
.maple-dir-claim-cta .maple-form__tel-prefix {
	background: rgba(255, 255, 255, 0.92) !important;
	color: #1a1a1a !important;
	border: 1px solid #ffffff !important;
	border-right: none !important;
}

/* White submit button with brand-red label. `border: 2px solid #ffffff`
   keeps the button visually anchored on the red field even if a theme
   strips background-color rendering. `:hover`/`:focus` keep the same
   palette but shift opacity rather than swapping a different shade — the
   palette is binary on this CTA. */
.maple-dir-claim-cta .maple-form__button,
.maple-dir-claim-cta .maple-form__button:hover,
.maple-dir-claim-cta .maple-form__button:focus {
	background: #ffffff !important;
	color: var(--mapledir-brand, #ae1b23) !important;
	border: 2px solid #ffffff !important;
	font-weight: 700 !important;
}
.maple-dir-claim-cta .maple-form__button:hover {
	background: #f5f5f5 !important;
}

/* === Findcamps camp template — section overrides ============== *
 * Per-camp-template tweaks. Scoped to the templates that opt in
 * via className so the rules don't leak to other layouts.
 */

/* Hero card on the white-bg hero section: rounded image + soft
 * drop shadow. `overflow:hidden` clips the inner listing-hero's
 * full-bleed image to the rounded radius. */
.findcamps-hero-card {
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow:
		0 20px 50px -12px rgba( 0, 0, 0, 0.22 ),
		0 8px 18px -6px rgba( 0, 0, 0, 0.12 );
}

/* 1.4.15: hero card promoted to alignfull so it fills most of the
 * viewport. WP's standard alignfull rule applies negative margins to
 * break out of the parent's content size; we re-override here so the
 * card has a visible gutter from the viewport edges (rounded corners
 * + drop shadow stay readable) and caps at 1800px on ultra-wide
 * displays. The `!important` overrides theme `:where()` defaults that
 * use the same selector specificity. */
.findcamps-hero-card.alignfull {
	margin-left: auto !important;
	margin-right: auto !important;
	width: calc( 100% - 2 * clamp( 8px, 2vw, 32px ) );
	max-width: 1800px;
}

/* Scope the responsive cover-height to the camp template's hero card
 * so other listing-hero placements (slider previews, dashboard cards)
 * keep their own default 480px floor. The clamp targets:
 *   - 1920×1080 → 60vh = 648px (fits below ~100px header + outer padding, leaves room for the trust band to peek)
 *   - 1366×768  → 60vh = 461px (comfortable hero, doesn't dominate the fold)
 *   - Mobile portrait → 60vh keeps the hero substantial but not screen-eating, 420px floor.
 *
 * 1.4.15 originally used 70vh; the result felt slightly too tall on HD
 * with empty space between hero content and the bottom edge.
 */
.findcamps-hero-card .maple-dir-listing-hero.is-style-cover {
	min-height: clamp( 420px, 60vh, 800px );
}

/* Bottom CTA section ("Register for this camp" / "Looking for something
 * else?"). 1.4.14 refactor: replaced the single flex-wrap row with a
 * proper wp-block-columns layout (66.66% heading / 33.34% button) so
 * the button stops getting overlapped by a wrapping heading on mobile.
 *
 * Selector specificity (.findcamps-cta-section + descendant) is enough
 * to beat TT5's `:root :where(.wp-block-button__link)` defaults without
 * needing !important.
 */
.findcamps-cta-section__cols {
	gap: var( --wp--preset--spacing--40, 30px );
}

.findcamps-cta-section__col {
	display: flex;
	align-items: center;
}

/* Desktop: heading right-aligned in its 66.66% column; button left-
 * aligned in its 33.34% column. Both meet at the column divider so the
 * heading + button read as a tight pair instead of hanging at opposite
 * edges of the alignfull section. */
.findcamps-cta-section__col--heading {
	justify-content: flex-end;
	text-align: right;
}
.findcamps-cta-section__col--button {
	justify-content: flex-start;
}

.findcamps-cta-section .findcamps-cta-section__heading {
	line-height: 1.2;
}

.findcamps-cta-section .wp-block-button {
	margin: 0;
}

/* Structural only — pill shape, padding, flat (no shadow/lift)
 * treatment. Colour lives on the `.maple-dir-cta-button` recolour
 * handle below. Selector specificity (.findcamps-cta-section +
 * descendant) beats TT5's `:root :where(.wp-block-button__link)`
 * defaults without needing !important. */
.findcamps-cta-section .wp-block-button__link {
	border-radius: 999px;
	padding: 0.85rem 2.25rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: none;
	transform: none;
	transition: none;
	white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────
 * Bottom CTA band — recolour handles (1.5.6+)
 *
 * The bottom call-to-action band has two recolourable surfaces, each
 * with its own handle class you can target from
 * Appearance → Customize → Additional CSS:
 *
 *     .maple-dir-cta-text {                         ← the CTA heading
 *         color: #ffffff;                           ←   heading text colour
 *     }
 *     .maple-dir-cta-button {                       ← the CTA button
 *         background-color: #ffffff;                ←   button background
 *         color: #ae1b23;                           ←   button label colour
 *         border: 0;                                ←   button border
 *     }
 *
 * The band itself recolours via `.maple-dir-dark-red` (see the top of
 * this file). `.maple-dir-cta-text` pins the heading colour explicitly
 * so it can be retuned independently of the band. The button's
 * structural styles (pill shape, padding, flat treatment) stay on the
 * `.findcamps-cta-section .wp-block-button__link` selector above, so a
 * colour override never disturbs the button's shape or layout.
 * ───────────────────────────────────────────────────────────────────── */
.maple-dir-cta-text {
	color: #ffffff;
}

.maple-dir-cta-button,
.maple-dir-cta-button:hover,
.maple-dir-cta-button:focus,
.maple-dir-cta-button:active {
	background-color: #ffffff;
	background-image: none;
	color: var(--mapledir-brand, #ae1b23);
	border: 0;
}

/* Mobile (<=781px): WP core already restacks `.wp-block-columns` to
 * full-width children. We add centred text + centred button on top
 * of that so the heading and button are both pinned to the middle
 * of the section instead of clinging to the column-divider edges
 * they used on desktop. */
@media ( max-width: 781px ) {
	.findcamps-cta-section__col--heading {
		justify-content: center;
		text-align: center;
	}
	.findcamps-cta-section__col--button {
		justify-content: center;
	}
}

/* 1.4.8 premium-only inline Register Now button — sits below the key
 * facts (listing-fields) in column 1 of the red middle band. Same
 * inverted-button motif as the bottom CTA (white background, brand-red
 * text, pill shape) so the visual language stays consistent across
 * surfaces. Centred via auto-margin on the wrapper because column 1's
 * flow layout doesn't align inline content for us. */
.findcamps-inline-register-btn {
	display: block;
	margin: 1.25rem auto 0;
	text-align: center;
}
.findcamps-inline-register-btn__link,
.findcamps-inline-register-btn__link:hover,
.findcamps-inline-register-btn__link:focus,
.findcamps-inline-register-btn__link:active {
	display: inline-block;
	background-color: #FFFFFF;
	background-image: none;
	color: var(--mapledir-brand, #ae1b23);
	border: 0;
	border-radius: 999px;
	padding: 0.85rem 2.25rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: none;
	transform: none;
	transition: none;
}

/* ──────────────────────────────────────────────────────────────────────
 * Featured Verified (maple-dir/featured-verified)
 * 1.7.2 — brand-red landing section with 1+2+3+carousel layout.
 *
 * Pinned slots (rows 1-3) draw from listings whose admin-set
 * _mapledir_featured_priority matches the slot; the carousel below
 * pulls the remaining verified listings sorted by oldest
 * first-verified date (longevity reward).
 * ────────────────────────────────────────────────────────────────── */

.mapledir-featured-verified {
	background: var(--mapledir-brand, #ae1b23);
	color: var(--mapledir-brand-contrast, #ffffff);
	padding: clamp(2rem, 5vw, 4rem) 0;
}

.mapledir-featured-verified__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 4vw, 2rem);
}

.mapledir-featured-verified__heading {
	color: #ffffff;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	margin: 0 0 0.5rem;
	text-align: center;
}

.mapledir-featured-verified__rule {
	border: 0;
	border-top: 2px solid #ffffff;
	max-width: 120px;
	margin: 0.5rem auto 1.5rem;
	opacity: 0.9;
}

.mapledir-featured-verified__subheading {
	color: #ffffff;
	/* Full opacity (was 0.9) — translucent white on the brand-red bg can
	   dip under the 4.5:1 contrast minimum. */
	font-size: 1.1rem;
	text-align: center;
	margin: 0 0 2rem;
}

/* Carousel header — separates the tenure-sorted carousel from the pinned
   grid above it. Level-2 spacer (preset spacing 40) is the margin-top on
   the heading; the rule mirrors the section __rule. */
.mapledir-featured-verified__carousel-heading {
	color: #ffffff;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 700;
	text-align: center;
	margin: var(--wp--preset--spacing--40, 1rem) 0 0.5rem;
}

.mapledir-featured-verified__carousel-rule {
	border: 0;
	border-top: 2px solid #ffffff;
	max-width: 120px;
	margin: 0.5rem auto 1.5rem;
	opacity: 0.9;
}

/* Row scaffolding — uniform gap, centered, responsive grid. */
.mapledir-featured-verified__row {
	display: grid;
	gap: 1.5rem;
	margin: 0 0 2rem;
}

.mapledir-featured-verified__row--hero {
	/* Full-width single card — matches the total width of the two-/three-up
	   rows below it. (Was capped at 720px + centered, which made the hero
	   narrower than the rows beneath and gave the section a pyramid look.) */
	grid-template-columns: 1fr;
}

.mapledir-featured-verified__row--two {
	grid-template-columns: repeat(2, 1fr);
}

.mapledir-featured-verified__row--three {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 720px) {
	.mapledir-featured-verified__row--two,
	.mapledir-featured-verified__row--three {
		grid-template-columns: 1fr;
	}
}

/* Card — white background; the brand-red comes from the section bg. */
.mapledir-featured-verified__card,
.mapledir-featured-verified__slider-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	color: #1a1a1a;
	text-decoration: none;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mapledir-featured-verified__card:hover,
.mapledir-featured-verified__slider-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.mapledir-featured-verified__card--empty {
	background: transparent;
	box-shadow: none;
	border: 2px dashed rgba(255,255,255,0.4);
	min-height: 200px;
}

.mapledir-featured-verified__card-image,
.mapledir-featured-verified__slider-card-image {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f0e7e0; /* beige fallback when no img */
}

.mapledir-featured-verified__row--hero .mapledir-featured-verified__card-image {
	aspect-ratio: 21 / 9; /* hero is wider */
}

.mapledir-featured-verified__card-image img,
.mapledir-featured-verified__slider-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mapledir-featured-verified__card-body,
.mapledir-featured-verified__slider-card-body {
	padding: 1rem 1.25rem 1.25rem;
}

.mapledir-featured-verified__card-title,
.mapledir-featured-verified__slider-card-title {
	color: #1a1a1a;
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 0.25rem;
	line-height: 1.3;
}

.mapledir-featured-verified__row--hero .mapledir-featured-verified__card-title {
	font-size: 1.5rem;
}

.mapledir-featured-verified__stars {
	display: inline-block;
	color: #f5b800;
	font-size: 0.95rem;
	letter-spacing: 0.05em;
}
.mapledir-featured-verified__stars .is-empty { color: #ddd; }

/* "Verified since YYYY" badge — small understated pill underneath the
   title/rating that surfaces the longevity sort to visitors. */
.mapledir-featured-verified__since {
	display: inline-block;
	margin-top: 0.4rem;
	padding: 0.15rem 0.65rem;
	background: rgba(174, 27, 35, 0.08); /* tinted brand red */
	color: #6f0f15;
	font-size: 0.8rem;
	font-weight: 500;
	border-radius: 999px;
	letter-spacing: 0.02em;
}

/* Carousel — scroll-snap, arrows, dots. Block-scoped class names so
   the standalone listing-cards-slider's view.js doesn't double-bind. */
.mapledir-featured-verified__carousel {
	margin-top: 1rem;
}

.mapledir-featured-verified__slider-viewport {
	position: relative;
}

.mapledir-featured-verified__slider-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--mdfv-per-view, 3) - 1) * 1rem) / var(--mdfv-per-view, 3));
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 0.25rem 0;
}
.mapledir-featured-verified__slider-track::-webkit-scrollbar { display: none; }
.mapledir-featured-verified__slider-track > .mapledir-featured-verified__slider-card {
	scroll-snap-align: start;
}

@media (max-width: 720px) {
	.mapledir-featured-verified__slider-track {
		grid-auto-columns: 80%;
	}
}

.mapledir-featured-verified__slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: #ffffff;
	color: var(--mapledir-brand, #ae1b23);
	font-size: 1.5rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.mapledir-featured-verified__slider-arrow--prev { left: -8px; }
.mapledir-featured-verified__slider-arrow--next { right: -8px; }
.mapledir-featured-verified__slider-arrow:hover { background: #f5f5f5; }

.mapledir-featured-verified__slider-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
}
.mapledir-featured-verified__slider-dot {
	/* 24×24 tap target (a11y: min touch-target size) with a 10px visual
	   dot drawn via ::before so the hit area is large without a big dot. */
	width: 24px;
	height: 24px;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
	position: relative;
}
.mapledir-featured-verified__slider-dot::before {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: rgba(255,255,255,0.4);
}
.mapledir-featured-verified__slider-dot.is-active::before { background: #ffffff; }