/* -----------------------------------------------------------------------
 * Bridge styles: classes used by the v0.1.0 templates that are not yet
 * covered by base.css / components.css / layout.css. Loaded last so it
 * can fine-tune any earlier rule.
 * -------------------------------------------------------------------- */

/* Container variants */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--margin-mobile); }
@media (min-width: 768px) { .container { padding-inline: var(--margin-desktop); } }
.container--narrow { max-width: 880px; }

/* Display heading utility */
.display {
	font-family: var(--font-display);
	font-size: var(--display-lg-size);
	line-height: var(--display-lg-line);
	letter-spacing: var(--display-lg-tracking);
	font-weight: 700;
	color: var(--on-surface);
}
@media (max-width: 767px) {
	.display { font-size: 36px; }
}
.prose { font-size: var(--body-lg-size); line-height: var(--body-lg-line); color: var(--on-surface-variant); }
.prose p { margin: 0 0 var(--md); }
.prose h2 { font-size: var(--headline-lg-size); margin: var(--xl) 0 var(--md); color: var(--on-surface); }
.prose h3 { font-size: var(--headline-md-size); margin: var(--lg) 0 var(--sm); color: var(--on-surface); }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 var(--md); }
.prose a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
html.dark .prose a { color: var(--secondary-fixed); }

/* -----------------------------------------------------------------------
 * iOS Safari card-link reset.
 *
 * `a { text-decoration: none }` in base.css is meant to keep card text
 * un-underlined, but Hummingbird's Critical CSS pipeline (when set to
 * `remove_unused`) can prune that universal anchor selector on mobile
 * viewports, which makes every card heading and paragraph wear an
 * underline on iPhones. Defensive override below pins decoration off
 * on every known card link wrapper and its descendants, with selectors
 * specific enough that the pruner never drops them.
 * -------------------------------------------------------------------- */
.bento__cell a,
.bento__cell a *,
.post-card__link,
.post-card__link *,
.listing-card__link,
.listing-card__link *,
.ad-card__link,
.ad-card__link *,
.premium-card a,
.premium-card a *,
.card-events__link,
.card-events__link *,
.card-events__see-all,
.card-events__submit,
.section__cta,
.section__cta *,
.archive__footer .btn,
.archive__footer .btn * {
	text-decoration: none;
	-webkit-text-decoration: none;
}

/* Glass panel alias and search console */
.glass-panel {
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-2xl);
	box-shadow: var(--shadow-2);
}
.search-console {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--sm);
	padding: var(--sm);
	margin-top: var(--lg);
}
.search-console__icon { display: grid; place-items: center; padding-inline: var(--sm); color: var(--secondary); }
html.dark .search-console__icon { color: var(--secondary-fixed); }
.search-console__input {
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	min-height: 56px;
	font-size: var(--body-lg-size);
	color: var(--on-surface);
	padding: 0 var(--sm);
}
.search-console__input::placeholder { color: var(--outline); }
.search-console__submit { min-height: 48px; }
.searchform { display: flex; align-items: center; gap: var(--sm); padding: var(--sm); margin: var(--lg) 0; }
.searchform__icon { display: grid; place-items: center; padding-inline: var(--sm); color: var(--secondary); }
.searchform__input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; min-height: 48px; font-size: var(--body-md-size); color: var(--on-surface); padding: 0 var(--sm); }

/* Site header chrome */
.site-header__brand { display: flex; align-items: center; gap: var(--xl); min-width: 0; }
.site-header__actions { display: flex; align-items: center; gap: var(--sm); }
.site-header__cta { display: none; }
@media (min-width: 768px) { .site-header__cta { display: inline-flex; } }
.brand { display: inline-flex; align-items: center; gap: var(--sm); min-height: 48px; max-height: 64px; }
.brand .custom-logo-link,
.site-header .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.brand .custom-logo,
.site-header .custom-logo {
	display: block;
	max-height: 44px !important;
	width: auto !important;
	height: auto !important;
	max-width: 200px;
	object-fit: contain;
}
@media (min-width: 768px) {
	.brand .custom-logo,
	.site-header .custom-logo { max-height: 52px !important; max-width: 240px; }
}
.brand__name { font-family: var(--font-display); font-size: var(--headline-md-size); font-weight: 700; letter-spacing: -0.01em; color: var(--on-surface); }
/* When a custom logo is present, hide the wordmark text fallback */
.has-custom-logo .brand__name { display: none; }

/* Logo light/dark variants
 * Specificity bumped to match .brand .custom-logo (0,2,0) and !important
 * added so any late-loading vendor CSS cannot override the swap. */
.brand .brand__logo--light,
.site-header .brand__logo--light { display: block !important; }
.brand .brand__logo--dark,
.site-header .brand__logo--dark { display: none !important; }
html.dark .brand .brand__logo--light,
html.dark .site-header .brand__logo--light { display: none !important; }
html.dark .brand .brand__logo--dark,
html.dark .site-header .brand__logo--dark { display: block !important; }
/* Mobile: nav collapses behind hamburger; desktop: shown inline */
.site-nav { position: relative; }
.nav-list { display: none; align-items: center; gap: var(--lg); list-style: none; padding: 0; margin: 0; }
@media (min-width: 768px) { .nav-list { display: flex; } }
.nav-link { color: var(--on-surface-variant); font-size: var(--body-md-size); transition: color var(--dur) var(--ease); display: block; padding: 8px 0; }
.nav-link:hover { color: var(--on-surface); }
.nav-link[aria-current="page"] { color: var(--secondary); font-weight: 600; }
html.dark .nav-link[aria-current="page"] { color: var(--secondary-fixed); }

/* Mobile menu toggle button.
 *
 * Belt-and-braces: chained selector for specificity AND `!important` so
 * the rule cannot lose to (a) any later .icon-btn declaration in source
 * order, (b) Hummingbird's Critical CSS pruning, or (c) a stale CDN-
 * combined bundle that pre-dates this fix. We almost never reach for
 * !important — this is a small, well-defined exception for an essential
 * navigation element. */
.icon-btn.site-header__menu-toggle { display: inline-grid !important; }
@media (min-width: 768px) {
	.icon-btn.site-header__menu-toggle { display: none !important; }
}

/* Mobile menu open state (toggled by JS).
   The site-nav itself sits in the flex row layout (full-width second row)
   and the .nav-list inside it expands as a vertical list when open. */
@media (max-width: 767px) {
	body.is-menu-open .nav-list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-top: 8px;
		padding: var(--sm) var(--md);
		background: var(--surface-container-lowest);
		border: 1px solid var(--outline-variant);
		border-radius: var(--r-lg);
		box-shadow: var(--shadow-2);
	}
	html.dark body.is-menu-open .nav-list { background: var(--surface-container-high); }
	body.is-menu-open .nav-link {
		padding: 12px 8px;
		border-bottom: 1px solid var(--outline-variant);
		font-size: var(--body-lg-size);
	}
	body.is-menu-open .nav-link:last-child,
	body.is-menu-open .nav-list > li:last-child .nav-link { border-bottom: 0; }
}

.icon-btn {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: var(--r-full);
	color: var(--on-surface-variant);
	transition: background var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-container-high); }
#burntwood-theme-toggle .icon-light { display: inline-block; }
#burntwood-theme-toggle .icon-dark  { display: none; }
html.dark #burntwood-theme-toggle .icon-light { display: none; }
html.dark #burntwood-theme-toggle .icon-dark  { display: inline-block; }

/* Site footer chrome */
.site-footer__brand { display: flex; flex-direction: column; gap: var(--xs); }
.site-footer__tagline { color: var(--on-surface-variant); font-size: var(--body-md-size); }
.footer-list { display: flex; flex-wrap: wrap; gap: var(--md) var(--lg); list-style: none; margin: 0; padding: 0; justify-content: center; }
.footer-list a { font-size: var(--label-md-size); font-weight: 600; letter-spacing: var(--label-md-tracking); text-transform: uppercase; color: var(--on-surface-variant); }
.footer-list a:hover { color: var(--secondary); }
html.dark .footer-list a:hover { color: var(--secondary-fixed); }
.site-footer__actions { display: flex; gap: var(--sm); }

/* Hero meta */
.hero__inner { padding-inline: var(--margin-mobile); }
.hero__subtitle { color: var(--on-surface-variant); margin-top: var(--md); }
.hero__meta { color: var(--on-surface-variant); margin-top: var(--sm); font-size: var(--body-md-size); }
.hero__meta--stat { max-width: 60ch; margin-inline: auto; line-height: 1.4; }
.hero__meta--stat strong { color: var(--secondary); font-weight: 700; }
html.dark .hero__meta--stat strong { color: var(--secondary-fixed); }
.hero__meta-source { color: var(--quiet, var(--on-surface-variant)); font-size: var(--label-md-size); opacity: 0.7; margin-left: 4px; }

/* Owner-facing nudge inside the hero — drives business owners to the
   capture modal without competing with the customer search.
   Only shown on mobile, since on desktop the sticky header already has a
   "Get listed" button and a second CTA below the search adds clutter. */
.hero__owner-cta {
	display: none;  /* hidden on desktop by default */
}
@media (max-width: 767px) {
	.hero__owner-cta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 10px 14px;
		margin-top: var(--md);
		margin-inline: auto;
		padding: 10px 10px 10px 18px;
		border-radius: var(--r-full);
		background: color-mix(in srgb, var(--secondary) 8%, transparent);
		border: 1px solid color-mix(in srgb, var(--secondary) 22%, transparent);
		font-size: 0.78rem;
		color: var(--on-surface);
		max-width: 100%;
	}
	html.dark .hero__owner-cta {
		background: color-mix(in srgb, var(--secondary-fixed) 14%, transparent);
		border-color: color-mix(in srgb, var(--secondary-fixed) 30%, transparent);
	}
	.hero__owner-cta-label {
		flex: 1 1 0;
		min-width: 0;
		font-weight: 500;
		line-height: 1.3;
		opacity: 0.9;
	}
	.hero__owner-cta-btn {
		flex: 0 0 auto;
		padding: 7px 14px;
		gap: 4px;
		font-size: 0.78rem;
	}
	.hero__owner-cta-btn .material-symbols-outlined { font-size: 15px; }
	.hero__owner-cta-btn .material-symbols-outlined:last-child { display: none; }  /* drop the arrow on mobile to save space */

	/* Very narrow phones (<360px): stack so the pill doesn't truncate. */
	@media (max-width: 359px) {
		.hero__owner-cta { border-radius: var(--r-xl); padding: 12px 14px; }
		.hero__owner-cta-label { flex: 1 1 100%; text-align: center; }
		.hero__owner-cta-btn { width: 100%; justify-content: center; }
	}
}

/* Header / footer Get-listed buttons keep their icon tight to the label. */
.site-header__cta .material-symbols-outlined { font-size: 18px; }

/* Bento grid (front page) */
.bento { padding-block: var(--md); }
@media (min-width: 768px) { .bento { padding-block: var(--lg); } }
.bento__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bento-gap);
}
@media (min-width: 768px) {
	.bento__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(220px, auto); }
}
@media (min-width: 1024px) {
	.bento__grid { grid-template-columns: repeat(6, 1fr); }
}

/* Simplified bento: Open Now (large) + Local Insights (side panel) */
.bento__grid--simple { grid-auto-rows: auto; }
@media (min-width: 768px) {
	.bento__grid--simple { grid-template-columns: 2fr 1fr; }
}

/* Open now large card */
.bento__cell--open-large {
	position: relative;
	min-height: 320px;
	overflow: hidden;
	color: #fff;
	display: block;
	border-radius: var(--r-xl);
	background: linear-gradient(135deg, var(--primary-container), var(--surface-container-high));
}
html.dark .bento__cell--open-large { background: linear-gradient(135deg, rgba(45,212,191,0.18), rgba(15,23,42,0.7)); }
.card-open-large { position: relative; }
.card-open-large__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); z-index: 0; }
.card-open-large:hover .card-open-large__bg { transform: scale(1.04); }
.card-open-large__overlay { position: absolute; inset: 0; padding: var(--lg); background: linear-gradient(to top, rgba(2,6,23,0.92) 0%, rgba(2,6,23,0.4) 60%, transparent 100%); display: flex; flex-direction: column; justify-content: end; gap: var(--xs); z-index: 1; }
.card-open-large__title { font-family: var(--font-display); font-size: var(--headline-lg-size); font-weight: 700; line-height: 1.1; margin: var(--xs) 0 0; color: #fff; }
@media (max-width: 640px) { .card-open-large__title { font-size: var(--headline-md-size); } }
.card-open-large__meta { color: rgba(255,255,255,0.8); font-size: var(--label-md-size); letter-spacing: var(--label-md-tracking); text-transform: uppercase; }
.card-open-large__excerpt { color: rgba(255,255,255,0.85); margin: var(--xs) 0 0; }

/* Generic home section header */
.home-section { padding-block: var(--md); }
@media (min-width: 768px) { .home-section { padding-block: var(--lg); } }
.home-section--soft { background: var(--surface-container-low); border-top: 1px solid var(--outline-variant); border-bottom: 1px solid var(--outline-variant); }
html.dark .home-section--soft { background: rgba(255,255,255,0.04); }
.home-section__head { display: flex; justify-content: space-between; align-items: end; gap: var(--md); margin-bottom: var(--md); flex-wrap: wrap; }
.home-section__head h2 { font-family: var(--font-display); font-size: var(--headline-md-size); margin: var(--xs) 0 0; color: var(--on-surface); }
.home-section__lead { color: var(--on-surface-variant); margin: var(--xs) 0 0; max-width: 60ch; font-size: var(--body-md-size); }
.home-section__see-all { display: inline-flex; align-items: center; gap: 4px; color: var(--secondary); font-weight: 700; font-size: var(--label-md-size); padding-bottom: 2px; border-bottom: 2px solid currentColor; }
html.dark .home-section__see-all { color: var(--secondary-fixed); }
.bento__cell { border-radius: var(--r-xl); border: 1px solid var(--outline-variant); background: var(--surface-container-lowest); overflow: hidden; transition: box-shadow var(--dur) var(--ease); }
.bento__cell:hover { box-shadow: var(--shadow-2); }
html.dark .bento__cell { background: rgba(255,255,255,0.04); }

.bento__cell--feature { grid-column: span 1; grid-row: span 1; min-height: 360px; position: relative; color: #fff; display: flex; align-items: end; }
@media (min-width: 768px) { .bento__cell--feature { grid-column: span 4; grid-row: span 2; } }
.card-feature { color: #fff; }
.card-feature__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); z-index: 0; }
.card-feature:hover .card-feature__bg { transform: scale(1.04); }
.card-feature__overlay { position: relative; z-index: 1; padding: var(--xl); width: 100%; background: linear-gradient(to top, rgba(2,6,23,0.92), rgba(2,6,23,0)); }
.card-feature__title { font-family: var(--font-display); font-size: var(--headline-lg-size); font-weight: 700; line-height: 1.1; margin-top: var(--md); color: #fff; }
.card-feature__excerpt { color: rgba(255,255,255,0.85); margin-top: var(--xs); max-width: 56ch; }
.card-feature__cta { display: inline-flex; align-items: center; gap: var(--xs); margin-top: var(--md); padding-bottom: 4px; border-bottom: 2px solid rgba(255,255,255,0.4); font-weight: 700; color: #fff; transition: border-color var(--dur) var(--ease); }
.card-feature:hover .card-feature__cta { border-color: #fff; }

.bento__cell--open { grid-column: span 1; }
@media (min-width: 768px) { .bento__cell--open { grid-column: span 2; } }
.card-open { display: flex; flex-direction: column; gap: var(--sm); padding: var(--lg); background: color-mix(in srgb, var(--secondary) 12%, transparent); border-color: color-mix(in srgb, var(--secondary) 26%, transparent); }
html.dark .card-open { background: color-mix(in srgb, var(--secondary-fixed) 14%, transparent); border-color: color-mix(in srgb, var(--secondary-fixed) 30%, transparent); }
.card-open__head { display: flex; justify-content: space-between; align-items: center; }
.card-open__title { font-family: var(--font-display); font-size: var(--headline-md-size); color: var(--on-surface); margin-top: var(--xs); }
.card-open__meta { color: var(--on-surface-variant); font-size: var(--label-md-size); text-transform: uppercase; letter-spacing: var(--label-md-tracking); font-weight: 600; }
.card-open__excerpt { color: var(--on-surface-variant); font-size: var(--body-md-size); }

.bento__cell--insights { grid-column: span 1; }
@media (min-width: 768px) { .bento__cell--insights { grid-column: span 2; } }
.card-insights { padding: var(--lg); display: flex; flex-direction: column; gap: var(--md); background: var(--surface-container-low); }
html.dark .card-insights { background: rgba(255,255,255,0.06); }
.card-insights__title { font-family: var(--font-display); font-size: var(--headline-md-size); }
.card-insights__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--md); }
.card-insights__item { display: flex; gap: var(--md); align-items: center; }
.card-insights__item img { width: 64px; height: 64px; border-radius: var(--r-md); object-fit: cover; flex-shrink: 0; }
.card-insights__icon { width: 64px; height: 64px; border-radius: var(--r-md); background: var(--surface-container-high); display: grid; place-items: center; color: var(--on-surface-variant); flex-shrink: 0; }
.card-insights__body { display: flex; flex-direction: column; gap: 2px; }
.card-insights__kicker { font-size: var(--label-md-size); font-weight: 600; letter-spacing: var(--label-md-tracking); color: var(--secondary); }
html.dark .card-insights__kicker { color: var(--secondary-fixed); }
.card-insights__heading { font-weight: 700; color: var(--on-surface); line-height: 1.2; }
.card-insights__item:hover .card-insights__heading { color: var(--secondary); }

.bento__cell--spotlight { grid-column: 1 / -1; }
.card-spotlight { display: grid; grid-template-columns: 1fr; gap: var(--lg); padding: var(--xl); background: var(--primary-container); color: #fff; border-color: rgba(255,255,255,0.08); }
html.dark .card-spotlight { background: rgba(255,255,255,0.04); }
@media (min-width: 768px) { .card-spotlight { grid-template-columns: 320px 1fr; align-items: center; } }
.card-spotlight__media img { width: 100%; height: 256px; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow-3); }
.card-spotlight__body { display: flex; flex-direction: column; gap: var(--sm); }
.card-spotlight__kicker { display: flex; align-items: center; gap: var(--xs); color: var(--secondary-fixed); font-size: var(--label-md-size); letter-spacing: var(--label-md-tracking); text-transform: uppercase; font-weight: 600; }
.card-spotlight__verified { font-variation-settings: 'FILL' 1; }
.card-spotlight__title { font-family: var(--font-display); font-size: var(--headline-lg-size); color: #fff; margin-top: var(--sm); }
.card-spotlight__excerpt { color: rgba(255,255,255,0.75); }
.card-spotlight__actions { margin-top: var(--md); display: flex; gap: var(--md); align-items: center; }

/* CTA section */
.cta-suggest {
	padding-block: var(--xl);
	background: var(--surface-container-low);
	border-top: 1px solid var(--outline-variant);
}
@media (max-width: 767px) { .cta-suggest { padding-block: var(--lg); } }
html.dark .cta-suggest { background: rgba(255,255,255,0.04); }
.cta-suggest__inner { text-align: center; }
.cta-suggest__lead { color: var(--on-surface-variant); margin: var(--md) auto var(--xl); max-width: 60ch; font-size: var(--body-lg-size); }
.cta-suggest__actions { display: flex; gap: var(--md); justify-content: center; flex-wrap: wrap; }
.btn-lg { min-height: 56px; padding: 14px 32px; font-size: var(--body-lg-size); }

/* Archive / search */
.archive { padding-block: var(--xxl); }
.archive__head { margin-bottom: var(--xl); display: flex; flex-direction: column; gap: var(--sm); }
.archive__kicker { font-size: var(--label-md-size); letter-spacing: var(--label-md-tracking); text-transform: uppercase; font-weight: 600; color: var(--secondary); }
html.dark .archive__kicker { color: var(--secondary-fixed); }
.archive__lead { color: var(--on-surface-variant); font-size: var(--body-lg-size); max-width: 60ch; }
.archive__grid { display: grid; gap: var(--lg); grid-template-columns: 1fr; }
@media (min-width: 640px) { .archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .archive__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .archive__grid { grid-template-columns: repeat(4, 1fr); } }
.archive__empty { color: var(--on-surface-variant); padding-block: var(--xl); text-align: center; }

.archive__footer { margin-top: var(--xl); padding-block: var(--lg); display: flex; justify-content: center; }
.archive__footer .btn { gap: var(--xs); }
.archive__footer--events { border-top: 1px solid var(--outline-variant); }

/* -----------------------------------------------------------------------
 * Blog category dropdown filter (home.php)
 * Native <details>/<summary> for keyboard + zero-JS support, with a
 * small enhancer in theme.js that closes on outside-click and on link
 * selection. Auto-grows as new categories are added — the menu items
 * come from get_categories() so nothing here needs editing.
 * -------------------------------------------------------------------- */
.blog-filter { margin-top: var(--lg); }
.blog-filter__details {
	position: relative;
	display: inline-block;
	max-width: 100%;
}
.blog-filter__details > summary {
	list-style: none;          /* hide native disclosure triangle */
	cursor: pointer;
}
.blog-filter__details > summary::-webkit-details-marker { display: none; }

.blog-filter__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: var(--r-full);
	border: 1px solid var(--outline-variant);
	background: var(--surface-container-lowest);
	color: var(--on-surface);
	font-size: var(--body-md-size);
	font-weight: 500;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
html.dark .blog-filter__trigger { background: rgba(255,255,255,0.04); }
@media (hover: hover) {
	.blog-filter__trigger:hover {
		border-color: color-mix(in srgb, var(--secondary) 50%, var(--outline-variant));
	}
}
.blog-filter__details[open] .blog-filter__trigger {
	border-color: var(--secondary);
	background: color-mix(in srgb, var(--secondary) 8%, var(--surface-container-lowest));
}
html.dark .blog-filter__details[open] .blog-filter__trigger {
	border-color: var(--secondary-fixed);
	background: color-mix(in srgb, var(--secondary-fixed) 14%, transparent);
}
.blog-filter__trigger-prefix {
	color: var(--on-surface-variant);
	font-weight: 400;
	font-size: var(--body-sm-size, 0.85rem);
}
.blog-filter__trigger-label {
	font-weight: 600;
}
.blog-filter__caret {
	font-size: 20px;
	color: var(--on-surface-variant);
	transition: transform var(--dur) var(--ease);
}
.blog-filter__details[open] .blog-filter__caret { transform: rotate(180deg); }

.blog-filter__menu {
	list-style: none;
	margin: 6px 0 0;
	padding: 6px;
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 220px;
	max-width: min(320px, calc(100vw - 32px));
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-2);
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 60vh;
	overflow-y: auto;
}
html.dark .blog-filter__menu { background: var(--surface-container-high); }

.blog-filter__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	border-radius: var(--r-md);
	color: var(--on-surface);
	font-size: var(--body-md-size);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover: hover) {
	.blog-filter__option:hover {
		background: color-mix(in srgb, var(--secondary) 10%, transparent);
	}
}
.blog-filter__option.is-active {
	background: var(--secondary);
	color: var(--on-secondary);
	font-weight: 600;
}
html.dark .blog-filter__option.is-active {
	background: var(--secondary-fixed);
	color: var(--on-secondary);
}
.blog-filter__option-check { font-size: 18px; }
.blog-filter__option:focus-visible {
	outline: 2px solid var(--secondary);
	outline-offset: 1px;
}

@media (max-width: 767px) {
	.blog-filter__details { display: block; }
	.blog-filter__trigger { width: 100%; justify-content: space-between; }
	.blog-filter__trigger-label { flex: 1 1 auto; min-width: 0; text-align: left; }
	.blog-filter__menu { left: 0; right: 0; min-width: 0; max-width: 100%; }
}

/* -----------------------------------------------------------------------
 * About page (template "About (rich)")
 * -------------------------------------------------------------------- */
.about-page { display: block; }

.about-hero { padding-block: var(--xxl) var(--lg); text-align: center; }
.about-hero__inner > .archive__kicker { display: inline-block; margin-bottom: var(--md); }
.about-hero__lead {
	color: var(--on-surface-variant);
	font-size: var(--body-lg-size);
	line-height: 1.5;
	margin: var(--md) auto 0;
	max-width: 56ch;
}

.about-stats { padding-block: var(--lg) var(--xl); }
.about-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--md);
}
@media (min-width: 768px) {
	.about-stats__grid { grid-template-columns: repeat(4, 1fr); gap: var(--lg); }
}
.about-stats__cell {
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	border-radius: var(--r-xl);
	padding: var(--lg);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--xs);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
html.dark .about-stats__cell { background: rgba(255,255,255,0.04); }
.about-stats__cell:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.about-stats__number {
	font-family: var(--font-display);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--secondary);
}
@media (min-width: 768px) {
	.about-stats__number { font-size: 48px; }
}
html.dark .about-stats__number { color: var(--secondary-fixed); }
.about-stats__label {
	color: var(--on-surface-variant);
	font-size: var(--body-md-size);
	line-height: 1.3;
}

.about-body { padding-block: var(--xl); }

.about-features { padding-block: var(--xxl); }
.about-features__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sm);
	margin-bottom: var(--xl);
}
.about-features__head .section__title { max-width: 32ch; }
.about-features__grid {
	display: grid;
	gap: var(--lg);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.about-features__grid { grid-template-columns: repeat(3, 1fr); }
}
.about-feature {
	display: flex;
	flex-direction: column;
	gap: var(--md);
	padding: var(--lg);
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	border-radius: var(--r-xl);
	color: var(--on-surface);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
html.dark .about-feature { background: rgba(255,255,255,0.04); }
@media (hover: hover) {
	.about-feature:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-2);
		border-color: color-mix(in srgb, var(--secondary) 50%, var(--outline-variant));
	}
}
.about-feature__icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: var(--r-lg);
	background: color-mix(in srgb, var(--secondary) 14%, transparent);
	color: var(--secondary);
}
html.dark .about-feature__icon {
	background: color-mix(in srgb, var(--secondary-fixed) 18%, transparent);
	color: var(--secondary-fixed);
}
.about-feature__icon .material-symbols-outlined { font-size: 28px; }
.about-feature__title {
	font-family: var(--font-display);
	font-size: var(--headline-md-size);
	color: var(--on-surface);
	margin: 0;
}
.about-feature__excerpt {
	color: var(--on-surface-variant);
	line-height: 1.5;
	margin: 0;
}
.about-feature__cta {
	margin-top: auto;
	color: var(--secondary);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: var(--xs);
	font-size: var(--body-md-size);
}
html.dark .about-feature__cta { color: var(--secondary-fixed); }
.about-feature__cta .material-symbols-outlined { font-size: 18px; transition: transform var(--dur) var(--ease); }
@media (hover: hover) {
	.about-feature:hover .about-feature__cta .material-symbols-outlined { transform: translateX(2px); }
}

.about-cta { padding-block: var(--xxl); text-align: center; }
.about-cta__inner > .chip { display: inline-block; margin-bottom: var(--md); }
.about-cta__title {
	font-family: var(--font-display);
	font-size: var(--headline-lg-size);
	letter-spacing: var(--headline-lg-tracking);
	color: var(--on-surface);
	margin: 0 0 var(--sm);
}
@media (max-width: 767px) {
	.about-cta__title { font-size: var(--headline-lg-size-mobile); }
}
.about-cta__lead {
	color: var(--on-surface-variant);
	font-size: var(--body-lg-size);
	margin: 0 auto var(--lg);
	max-width: 56ch;
}

/* Listing card additions */
.listing-card { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-1); transition: box-shadow var(--dur) var(--ease); }
html.dark .listing-card { background: rgba(255,255,255,0.04); }
.listing-card:hover { box-shadow: var(--shadow-2); }
.listing-card__link { display: block; }
.listing-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: var(--surface-container-high); color: var(--on-surface-variant); }
.listing-card__trust { position: absolute; top: var(--sm); right: var(--sm); }
.listing-card__badges { position: absolute; top: var(--sm); left: var(--sm); right: var(--sm); display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.chip-featured { background: var(--gold, #d88a1a); color: #2b1700; border-color: transparent; }
html.dark .chip-featured { background: var(--warning, #fbbf24); color: #2b1700; }
.listing-card__kicker { font-size: var(--label-md-size); letter-spacing: var(--label-md-tracking); text-transform: uppercase; font-weight: 600; color: var(--secondary); }
html.dark .listing-card__kicker { color: var(--secondary-fixed); }
.listing-card__actions { padding: 0 var(--md) var(--md); }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: var(--label-md-size); }

/* Trusted Neighbour badge variant */
.chip-trusted { background: var(--tertiary-container); color: var(--on-tertiary-container); border-color: transparent; }
html.dark .chip-trusted { background: rgba(252, 222, 181, 0.18); color: var(--tertiary-fixed-dim); }
.chip-secondary { background: var(--secondary); color: var(--on-secondary); border-color: transparent; }
html.dark .chip-secondary { background: var(--secondary-fixed); color: var(--on-secondary); }

/* Listing detail */
.listing-detail { display: block; margin-top: 0; grid-template-columns: none !important; }
.listing-detail__hero { background: var(--surface-container-low); }
.listing-detail__media {
	aspect-ratio: 16 / 9;
	max-height: 480px;
	max-width: var(--container-max);
	margin-inline: auto;
	overflow: hidden;
	border-radius: 0;
	background: var(--surface-container-high);
}
@media (min-width: 768px) {
	.listing-detail__media { border-radius: var(--r-2xl); margin-top: var(--lg); }
}
.listing-detail__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.listing-detail__head { padding-block: var(--xl); display: flex; flex-direction: column; gap: var(--md); }
.listing-detail__chips { display: flex; gap: var(--sm); flex-wrap: wrap; }
.listing-detail__title-row { display: flex; align-items: center; gap: var(--lg); }
.listing-detail__logo { width: 80px; height: 80px; border-radius: var(--r-lg); background: #fff; padding: 8px; box-shadow: var(--shadow-1); flex-shrink: 0; }
.listing-detail__logo img { width: 100%; height: 100%; object-fit: contain; }
.listing-detail__address { color: var(--on-surface-variant); display: inline-flex; align-items: center; gap: var(--xs); font-size: var(--body-lg-size); }
.listing-detail__actions { display: flex; gap: var(--sm); flex-wrap: wrap; margin-top: var(--md); }
.listing-detail__body { padding-block: var(--xl); display: grid; gap: var(--xl); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .listing-detail__body { grid-template-columns: minmax(0, 1fr) 360px; } }
.listing-detail__panel { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-xl); padding: var(--lg); margin-bottom: var(--md); }
html.dark .listing-detail__panel { background: rgba(255,255,255,0.04); }
.listing-detail__panel-title { font-family: var(--font-display); font-size: var(--headline-md-size); margin-bottom: var(--sm); }
.listing-detail__map { display: inline-flex; align-items: center; gap: var(--xs); color: var(--secondary); font-weight: 600; padding: var(--sm) 0; }
html.dark .listing-detail__map { color: var(--secondary-fixed); }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--xs); list-style: none; padding: 0; margin: 0; }

/* Vibe & features chips — smaller, softer pills used on cards and listing pages. */
.vibe-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: var(--sm) 0 0;
}
.vibe-chips--card {
	margin-top: var(--xs);
	max-height: 3.6em;
	overflow: hidden;
}
.vibe-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--r-full);
	background: color-mix(in srgb, var(--secondary) 9%, transparent);
	color: var(--secondary);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-transform: none;
	border: 1px solid color-mix(in srgb, var(--secondary) 18%, transparent);
	white-space: nowrap;
	transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
a.vibe-chip:hover,
a.vibe-chip:focus-visible {
	background: var(--secondary);
	color: var(--on-secondary);
	transform: translateY(-1px);
	text-decoration: none;
}
.vibe-chip--more {
	background: transparent;
	color: var(--on-surface-variant);
	border-color: var(--outline-variant);
}
html.dark .vibe-chip {
	background: color-mix(in srgb, var(--secondary-fixed) 16%, transparent);
	color: var(--secondary-fixed);
	border-color: color-mix(in srgb, var(--secondary-fixed) 30%, transparent);
}
html.dark a.vibe-chip:hover,
html.dark a.vibe-chip:focus-visible {
	background: var(--secondary-fixed);
	color: var(--on-secondary);
}

/* Suggestion block on the empty search page. */
/* Search results — split into Businesses and Information sections */
.search-section { margin-block: var(--lg); }
.search-section + .search-section { margin-top: var(--xl); }
.search-section__head {
	display: flex;
	flex-direction: column;
	gap: var(--xs);
	margin-bottom: var(--md);
	padding-bottom: var(--sm);
	border-bottom: 1px solid var(--outline-variant);
}
.search-section__title {
	font-family: var(--font-display);
	font-size: var(--headline-md-size);
	font-weight: 700;
	margin: 0;
	color: var(--on-surface);
}
.search-section--businesses .search-section__title::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--secondary);
	margin-right: 10px;
	vertical-align: middle;
	transform: translateY(-2px);
}
html.dark .search-section--businesses .search-section__title::before { background: var(--secondary-fixed); }
.search-section--information .search-section__title::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gold, #d88a1a);
	margin-right: 10px;
	vertical-align: middle;
	transform: translateY(-2px);
}
.search-section__lead {
	color: var(--on-surface-variant);
	margin: 0;
	font-size: var(--body-md-size);
}

.archive__empty-vibes {
	margin-top: var(--lg);
	padding-top: var(--md);
	border-top: 1px solid var(--outline-variant);
}
.archive__empty-title {
	font-family: var(--font-display);
	font-size: var(--headline-sm-size, 1.25rem);
	margin: 0 0 var(--xs);
	color: var(--on-surface);
}
.archive__empty-lead {
	color: var(--on-surface-variant);
	margin: 0 0 var(--sm);
}
.vibe-chips--suggest {
	margin-top: var(--xs);
	gap: 8px;
}
.vibe-chips--suggest .vibe-chip {
	padding: 6px 12px;
	font-size: 0.78rem;
}

/* Advertised Businesses rotating carousel (multi-card: 1 mobile, 2 tablet, 3 desktop) */
.ad-carousel { padding-block: var(--md); }
@media (min-width: 768px) { .ad-carousel { padding-block: var(--lg); } }
.ad-carousel__head { display: flex; justify-content: space-between; align-items: end; gap: var(--md); margin-bottom: var(--md); flex-wrap: wrap; }
.ad-carousel__title { font-family: var(--font-display); font-size: var(--headline-md-size); margin: var(--xs) 0 0; color: var(--on-surface); }
.ad-carousel__controls { display: flex; gap: var(--xs); }
.ad-carousel__arrow {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	color: var(--on-surface);
	cursor: pointer;
	transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
html.dark .ad-carousel__arrow { background: var(--surface-container-high); color: var(--on-surface); }
.ad-carousel__arrow:hover { background: var(--secondary); color: var(--on-secondary); border-color: transparent; }
html.dark .ad-carousel__arrow:hover { background: var(--secondary-fixed); color: var(--on-secondary); }

.ad-carousel__viewport { position: relative; overflow: hidden; }
.ad-carousel__track {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.ad-carousel__track::-webkit-scrollbar { display: none; }
.ad-carousel__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	min-width: 0;
}
@media (min-width: 640px) { .ad-carousel__slide { flex: 0 0 calc(50% - 8px); } }
@media (min-width: 1024px) { .ad-carousel__slide { flex: 0 0 calc(33.333% - 11px); } }

/* Individual ad card */
.ad-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-1);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
html.dark .ad-card { background: rgba(255,255,255,0.04); }
.ad-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.ad-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-container-high); overflow: hidden; }
.ad-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.ad-card:hover .ad-card__media img { transform: scale(1.04); }
.ad-card__badge {
	position: absolute; top: var(--sm); left: var(--sm);
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 10px;
	border-radius: var(--r-full);
	background: var(--gold, #d88a1a);
	color: #2b1700;
	font-size: var(--label-md-size);
	font-weight: 700;
	letter-spacing: var(--label-md-tracking);
	text-transform: uppercase;
}
.ad-card__badge .material-symbols-outlined { font-size: 14px; }
html.dark .ad-card__badge { background: var(--warning, #fbbf24); color: #2b1700; }
.ad-card__badge--trusted { background: var(--tertiary-container, #fcdeb5); color: var(--on-tertiary-container, #271901); }
html.dark .ad-card__badge--trusted { background: rgba(252,222,181,0.18); color: var(--tertiary-fixed-dim, #dec29a); }
.ad-card--trusted .ad-card__cta { color: var(--tertiary, #574425); }
html.dark .ad-card--trusted .ad-card__cta { color: var(--tertiary-fixed-dim, #dec29a); }
.ad-card__body { padding: var(--md); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ad-card__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--on-surface); margin: 0; }
.ad-card__excerpt { color: var(--on-surface-variant); font-size: var(--body-md-size); line-height: 1.4; }
.ad-card__cta {
	display: inline-flex; align-items: center; gap: 4px;
	margin-top: auto;
	padding-top: var(--xs);
	color: var(--secondary);
	font-weight: 700;
	font-size: var(--label-md-size);
	letter-spacing: 0;
}
html.dark .ad-card__cta { color: var(--secondary-fixed); }

@media (prefers-reduced-motion: reduce) {
	.ad-carousel__track { scroll-behavior: auto; }
	.ad-card__media img { transition: none; }
}

/* Stretched-link pattern: title link covers the whole card so click anywhere
   still navigates to the listing page, while the inline Call button can sit
   on top of it with a higher z-index. */
.ad-card { position: relative; }
.ad-card__title { margin: 0; }
.ad-card__link {
	color: inherit;
	text-decoration: none;
	background: transparent;
}
.ad-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
@media (hover: hover) {
	.ad-card__link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
}

.ad-card__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sm);
	margin-top: auto;
	padding-top: var(--xs);
}
.ad-card__cta {
	display: inline-flex; align-items: center; gap: 4px;
	color: var(--secondary);
	font-weight: 700;
	font-size: var(--label-md-size);
	letter-spacing: 0;
}
html.dark .ad-card__cta { color: var(--secondary-fixed); }

.ad-card__call,
.premium-card__call {
	position: relative;
	z-index: 2;
}

/* Reusable Call CTA button. Looks like a primary action — green so it reads
   as "tap to phone" instantly. */
.btn-call {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--r-full);
	background: #16a34a; /* fixed green so light/dark both recognise the affordance */
	color: #fff;
	font-weight: 700;
	font-size: var(--label-md-size);
	letter-spacing: 0;
	text-decoration: none;
	border: 1px solid transparent;
	box-shadow: 0 1px 2px rgba(0,0,0,0.08);
	transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
	white-space: nowrap;
}
.btn-call:hover,
.btn-call:focus-visible {
	background: #15803d;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(22,163,74,0.28);
	text-decoration: none;
}
.btn-call .material-symbols-outlined { font-size: 18px; }
.btn-call--sm { padding: 6px 10px; font-size: 0.78rem; }
.btn-call--sm .material-symbols-outlined { font-size: 16px; }

/* News ticker (admin-toggled marquee under the bento grid).
   BBC-style: solid coloured strip, KICKER chip on the left, scrolling
   text on the right. Pause on hover. Honour prefers-reduced-motion. */
.news-ticker {
	background: var(--secondary);
	color: var(--on-secondary);
	padding-block: 10px;
	margin-block: var(--md);
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.18);
}
html.dark .news-ticker { background: var(--secondary-fixed); color: var(--on-secondary); }

.news-ticker__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--md);
	min-height: 32px;
}

.news-ticker__kicker {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: var(--r-full);
	background: var(--on-secondary);
	color: var(--secondary);
	font-weight: 800;
	font-size: var(--label-md-size);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}
html.dark .news-ticker__kicker { background: rgba(0,0,0,0.7); color: var(--secondary-fixed); }

.news-ticker__viewport {
	flex: 1 1 auto;
	overflow: hidden;
	min-width: 0;
	max-width: 100%;
	mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.news-ticker__track {
	display: flex;
	align-items: center;
	width: max-content;
	white-space: nowrap;
	will-change: transform;
	transform: translate3d(0, 0, 0);  /* Force GPU compositing on iOS */
	animation: news-ticker-scroll var(--news-ticker-duration, 55s) linear infinite;
}
.news-ticker__viewport:hover .news-ticker__track,
.news-ticker__viewport:focus-within .news-ticker__track { animation-play-state: paused; }

/* Each row holds the items repeated enough times in PHP that the row is
   comfortably wider than any viewport. Items flow naturally inline so
   they don't get stretched apart. The track animates translateX(-50%)
   which equals exactly one row width = seamless loop. */
.news-ticker__row {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.news-ticker__item {
	font-weight: 600;
	font-size: var(--body-md-size);
	line-height: 1.2;
}
.news-ticker__item--link {
	color: var(--on-secondary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: opacity 120ms ease;
}
.news-ticker__item--link:hover,
.news-ticker__item--link:focus-visible { opacity: 0.8; color: var(--on-secondary); }
html.dark .news-ticker__item--link { color: var(--on-secondary); }

.news-ticker__sep {
	opacity: 0.7;
	font-weight: 700;
	font-size: 1.5em;
	line-height: 0.5;
	display: inline-block;
	vertical-align: middle;
	transform: translateY(-2px);
}

@keyframes news-ticker-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.news-ticker__track { animation: none; }
	.news-ticker__viewport { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
}

@media (max-width: 540px) {
	.news-ticker {
		padding-block: 8px;
		min-height: 44px;  /* visible footprint even if track fails to render */
	}
	.news-ticker__inner {
		gap: 8px;
		min-height: 28px;
	}
	.news-ticker__kicker {
		padding: 3px 8px;
		font-size: 0.65rem;
	}
	.news-ticker__viewport {
		/* Strip the mask gradient on mobile — iOS Safari + WebKit rendering
		   bug at narrow widths can render the masked area transparent. */
		mask-image: none;
		-webkit-mask-image: none;
	}
	.news-ticker__item { font-size: 0.85rem; }
	.news-ticker__sep { font-size: 1.3em; }
}

/* Email CTA — same shape and weight as Call now but in the brand secondary
   colour so the two pills sit comfortably together without competing. */
.btn-email {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--r-full);
	background: var(--secondary);
	color: var(--on-secondary);
	font-weight: 700;
	font-size: var(--label-md-size);
	letter-spacing: 0;
	text-decoration: none;
	border: 1px solid transparent;
	box-shadow: 0 1px 2px rgba(0,0,0,0.08);
	transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
	white-space: nowrap;
}
.btn-email:hover,
.btn-email:focus-visible {
	background: color-mix(in srgb, var(--secondary) 80%, black 20%);
	color: var(--on-secondary);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.18);
	text-decoration: none;
}
html.dark .btn-email { background: var(--secondary-fixed); color: var(--on-secondary); }
html.dark .btn-email:hover,
html.dark .btn-email:focus-visible { background: color-mix(in srgb, var(--secondary-fixed) 88%, white 12%); }
.btn-email .material-symbols-outlined { font-size: 18px; }
.btn-email--sm { padding: 6px 10px; font-size: 0.78rem; }
.btn-email--sm .material-symbols-outlined { font-size: 16px; }

/* WhatsApp button — official brand green, used on listing cards (full
 * label) and advertised carousel cards (icon only via --icon modifier).
 * Inline SVG comes from burntwood_social_icon('whatsapp') so we don't
 * depend on the Material Symbols font for a brand mark. */
.btn-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--r-full);
	background: #25D366;
	color: #ffffff;
	border: 1px solid #25D366;
	font-weight: 600;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) {
	.btn-whatsapp:hover,
	.btn-whatsapp:focus-visible {
		background: #1ebe5d;       /* slightly darker brand green */
		border-color: #1ebe5d;
		color: #ffffff;
		transform: translateY(-1px);
		box-shadow: var(--shadow-1);
	}
}
.btn-whatsapp svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-whatsapp:focus-visible { outline: 2px solid #1ebe5d; outline-offset: 2px; }

/* Icon-only round variant used on the advertised carousel where space
 * is tight — the visible label is replaced with a screen-reader-text
 * span and the visual width matches an icon button. */
.btn-whatsapp--icon {
	width: 36px;
	height: 36px;
	padding: 0;
	justify-content: center;
}
.btn-whatsapp--icon svg { width: 18px; height: 18px; }

/* Pair Email + Call + WhatsApp as a single inline group on the right
 * of the action row. */
.ad-card__contact {
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	z-index: 2; /* sit above the stretched-link pseudo-element */
}
@media (max-width: 480px) {
	.ad-card__actions { flex-wrap: wrap; gap: 8px; }
	.ad-card__contact { width: 100%; justify-content: stretch; }
	.ad-card__contact .btn-email,
	.ad-card__contact .btn-call { flex: 1 1 0; justify-content: center; padding: 8px 10px; }
	.ad-card__contact .btn-whatsapp--icon { flex: 0 0 auto; }
}

/* Blog post + interview support */
.post-grid { display: grid; gap: var(--lg); grid-template-columns: 1fr; padding-block: var(--xl); }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-1); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.dark .post-card { background: rgba(255,255,255,0.04); }
.post-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.post-card__link { display: block; }
.post-card__media { aspect-ratio: 16 / 10; background: var(--surface-container-high); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--on-surface-variant); }
.post-card__body { padding: var(--md); display: flex; flex-direction: column; gap: 6px; }
.post-card__kicker { font-size: var(--label-md-size); letter-spacing: var(--label-md-tracking); text-transform: uppercase; font-weight: 600; color: var(--secondary); }
html.dark .post-card__kicker { color: var(--secondary-fixed); }
.post-card__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--on-surface); margin: 0; }
.post-card__excerpt { color: var(--on-surface-variant); font-size: var(--body-md-size); line-height: 1.45; }
.post-card__meta { color: var(--on-surface-variant); font-size: var(--label-md-size); margin-top: auto; }

/* Single event */
.event-single__hero { background: var(--surface-container-low); padding-bottom: var(--xl); }
.event-single__media { aspect-ratio: 16 / 9; max-height: 480px; max-width: var(--container-max); margin-inline: auto; overflow: hidden; }
@media (min-width: 768px) { .event-single__media { border-radius: var(--r-2xl); margin-top: var(--lg); } }
.event-single__media img { width: 100%; height: 100%; object-fit: cover; }
.event-single__head { padding-block: var(--xl); display: flex; flex-direction: column; gap: var(--md); }
.event-single__facts { display: grid; grid-template-columns: 1fr; gap: var(--xs); margin: var(--md) 0 0; }
@media (min-width: 640px) { .event-single__facts { grid-template-columns: repeat(2, 1fr); } }
.event-single__facts > div { display: flex; align-items: center; gap: 8px; }
.event-single__facts dt { color: var(--secondary); margin: 0; }
html.dark .event-single__facts dt { color: var(--secondary-fixed); }
.event-single__facts dd { margin: 0; color: var(--on-surface); font-weight: 600; }
.event-single__actions { display: flex; gap: var(--md); flex-wrap: wrap; margin-top: var(--md); }
.event-single__body { padding-block: var(--xl); }

/* Single blog post */
.post-single__hero { background: var(--surface-container-low); padding-bottom: var(--xl); }
.post-single__media { aspect-ratio: 16 / 9; max-height: 480px; max-width: var(--container-max); margin-inline: auto; overflow: hidden; }
@media (min-width: 768px) { .post-single__media { border-radius: var(--r-2xl); margin-top: var(--lg); } }
.post-single__media img { width: 100%; height: 100%; object-fit: cover; }
.post-single__head { padding-block: var(--xl); display: flex; flex-direction: column; gap: var(--sm); }
.post-single__head .archive__kicker { display: inline-block; }
.post-single__meta { color: var(--on-surface-variant); font-size: var(--label-md-size); display: flex; gap: var(--xs); }
.post-single__body { padding-block: var(--xl); }
.post-single__tags { margin-top: var(--xl); padding-top: var(--lg); border-top: 1px solid var(--outline-variant); }
.post-single__tags h3 { font-family: var(--font-display); font-size: var(--headline-md-size); margin: 0 0 var(--sm); }
.post-single__nav { display: flex; justify-content: space-between; gap: var(--md); margin-top: var(--xl); padding-top: var(--lg); border-top: 1px solid var(--outline-variant); }
.post-single__nav-link { display: inline-flex; align-items: center; gap: var(--xs); color: var(--on-surface-variant); padding: var(--sm) var(--md); border-radius: var(--r-md); transition: background var(--dur) var(--ease); }
.post-single__nav-link:hover { background: var(--surface-container-high); color: var(--on-surface); }
.post-single__nav-link--next { margin-left: auto; }

/* Home page interviews bento cell */
.bento__cell--interviews { grid-column: 1 / -1; padding: var(--lg); }
.interviews-head { display: flex; justify-content: space-between; align-items: end; gap: var(--md); margin-bottom: var(--md); flex-wrap: wrap; }
.interviews-head h2 { font-family: var(--font-display); font-size: var(--headline-md-size); margin: 0; }
.interviews-grid { display: grid; gap: var(--md); grid-template-columns: 1fr; }
@media (min-width: 640px) { .interviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .interviews-grid { grid-template-columns: repeat(3, 1fr); } }

/* Site Reviews integration */
.listing-reviews {
	margin: var(--xl) 0 0;
	padding-top: var(--xl);
	border-top: 1px solid var(--outline-variant);
}
.listing-reviews__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--md);
	margin-bottom: var(--lg);
}
.listing-reviews__head h2 {
	font-family: var(--font-display);
	font-size: var(--headline-lg-size);
	margin: 0;
}
@media (max-width: 767px) {
	.listing-reviews__head h2 { font-size: var(--headline-md-size); }
}
.listing-reviews__summary { color: var(--on-surface-variant); }
.listing-reviews__form,
.listing-reviews__list {
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	border-radius: var(--r-xl);
	padding: var(--lg);
	margin-bottom: var(--md);
}
html.dark .listing-reviews__form,
html.dark .listing-reviews__list { background: rgba(255,255,255,0.04); }
.listing-reviews__form h3 {
	font-family: var(--font-display);
	font-size: var(--headline-md-size);
	margin: 0 0 var(--md);
}

/* Site Reviews shortcode HTML overrides */
.glsr-form,
.glsr-form *,
.glsr-review,
.glsr-review *,
.glsr-summary,
.glsr-summary * { font-family: var(--font-body); }
.glsr-form { display: grid; gap: var(--md); }
.glsr-form .glsr-field-label,
.glsr-form label {
	font-family: var(--font-body);
	font-size: var(--label-md-size);
	font-weight: 600;
	letter-spacing: var(--label-md-tracking);
	text-transform: uppercase;
	color: var(--on-surface-variant);
	display: block;
	margin-bottom: 4px;
}
.glsr-form input[type="text"],
.glsr-form input[type="email"],
.glsr-form input[type="url"],
.glsr-form textarea,
.glsr-form select {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	background: var(--surface-container-lowest);
	color: var(--on-surface);
	border: 1px solid var(--outline-variant);
	border-radius: var(--r-md);
	font-size: var(--body-md-size);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
html.dark .glsr-form input,
html.dark .glsr-form textarea,
html.dark .glsr-form select {
	background: rgba(0,0,0,0.2);
}
.glsr-form input:focus,
.glsr-form textarea:focus,
.glsr-form select:focus {
	outline: none;
	border-color: var(--secondary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 18%, transparent);
}
.glsr-form button[type="submit"],
.glsr-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 24px;
	border-radius: var(--r-md);
	background: var(--primary);
	color: var(--on-primary);
	border: 0;
	font-family: var(--font-body);
	font-weight: 700;
	cursor: pointer;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.glsr-form button[type="submit"]:hover,
.glsr-form input[type="submit"]:hover {
	transform: scale(0.97);
	box-shadow: var(--shadow-2);
}

/* Stars: tint to teal */
.glsr-stars,
.glsr-star,
.glsr-star-empty,
.glsr-star-full,
.glsr-star-half {
	color: var(--secondary) !important;
}
html.dark .glsr-stars,
html.dark .glsr-star,
html.dark .glsr-star-empty,
html.dark .glsr-star-full,
html.dark .glsr-star-half {
	color: var(--secondary-fixed) !important;
}

/* Summary block */
.glsr-summary {
	display: flex;
	align-items: center;
	gap: var(--md);
	flex-wrap: wrap;
}
.glsr-summary .glsr-summary-rating {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 700;
	color: var(--on-surface);
}
.glsr-summary .glsr-summary-text { color: var(--on-surface-variant); font-size: var(--label-md-size); }

/* Individual review cards (default vertical) */
.glsr-reviews { display: grid; gap: var(--md); margin: 0; padding: 0; list-style: none; }
.glsr-review {
	background: var(--surface-container-low);
	border: 1px solid var(--outline-variant);
	border-radius: var(--r-lg);
	padding: var(--lg);
}
html.dark .glsr-review { background: rgba(255,255,255,0.06); }

/* Carousel mode (overrides the grid for the scroll container) */
.listing-reviews__carousel { position: relative; padding: 0 8px; }
.listing-reviews__carousel .glsr-reviews {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: var(--md);
	padding-block: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.listing-reviews__carousel .glsr-reviews::-webkit-scrollbar { display: none; }
.listing-reviews__carousel .glsr-review {
	flex: 0 0 calc(100% - 16px);
	max-width: 100%;
	scroll-snap-align: start;
	margin: 0;
}
@media (min-width: 640px) {
	.listing-reviews__carousel .glsr-review { flex: 0 0 calc(50% - 8px); }
}
@media (min-width: 1024px) {
	.listing-reviews__carousel .glsr-review { flex: 0 0 calc(33.333% - 11px); }
}

/* Carousel arrows */
.reviews-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	color: var(--on-surface);
	cursor: pointer;
	z-index: 2;
	box-shadow: var(--shadow-2);
	transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
html.dark .reviews-arrow { background: var(--surface-container-high); color: var(--on-surface); }
.reviews-arrow:hover { background: var(--secondary); color: var(--on-secondary); border-color: transparent; }
html.dark .reviews-arrow:hover { background: var(--secondary-fixed); color: var(--on-secondary); }
.reviews-arrow--prev { left: -10px; }
.reviews-arrow--next { right: -10px; }
.reviews-arrow:disabled,
.reviews-arrow[aria-disabled="true"] {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}
@media (max-width: 640px) {
	.reviews-arrow { display: none; }
}

/* Loadmore button positioned below the carousel */
.listing-reviews__carousel .glsr-pagination { margin-top: var(--md); display: flex; justify-content: center; }
.glsr-review-rating { margin-bottom: var(--xs); }
.glsr-review-title {
	font-family: var(--font-display);
	font-size: var(--headline-md-size);
	font-weight: 700;
	margin: 0 0 var(--xs);
	color: var(--on-surface);
}
.glsr-review-content {
	color: var(--on-surface-variant);
	font-size: var(--body-md-size);
	line-height: var(--body-md-line);
	margin: var(--xs) 0;
}
.glsr-review-author,
.glsr-review-date {
	color: var(--quiet, var(--on-surface-variant));
	font-size: var(--label-md-size);
}
.glsr-review-author { font-weight: 600; }
.glsr-pagination .glsr-button-loadmore {
	margin-top: var(--md);
	min-height: 44px;
	padding: 10px 24px;
	border-radius: var(--r-md);
	background: transparent;
	color: var(--secondary);
	border: 2px solid var(--secondary);
	font-weight: 700;
	cursor: pointer;
}
html.dark .glsr-pagination .glsr-button-loadmore {
	color: var(--secondary-fixed);
	border-color: var(--secondary-fixed);
}
.glsr-pagination .glsr-button-loadmore:hover {
	background: color-mix(in srgb, var(--secondary) 8%, transparent);
}

/* Social links row (single listing) */
.listing-detail__socials {
	list-style: none;
	margin: var(--md) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm);
}
.social-link {
	position: relative;
	width: 40px;
	height: 40px;
	display: inline-grid;
	place-items: center;
	border-radius: var(--r-full);
	/* Soft brand-aligned rest state: a teal tint instead of plain grey. */
	background: color-mix(in srgb, var(--secondary) 10%, var(--surface-container-high));
	color: var(--secondary);
	border: 1px solid color-mix(in srgb, var(--secondary) 22%, transparent);
	transition:
		background 280ms var(--ease),
		color 280ms var(--ease),
		border-color 280ms var(--ease),
		box-shadow 280ms var(--ease);
	/* Resting bounce — see the keyframes + per-child delays below.
	 * 4.5s cycle with 0.18s stagger: total wave runs ~1.8s, then rests
	 * ~2.7s before the next pass. Active enough that visitors notice it,
	 * still relaxed enough to feel intentional. */
	animation: bw-social-hop 4.5s ease-in-out infinite;
}
html.dark .social-link {
	background: color-mix(in srgb, var(--secondary-fixed) 14%, transparent);
	color: var(--secondary-fixed);
	border-color: color-mix(in srgb, var(--secondary-fixed) 30%, transparent);
}
.social-link svg { width: 20px; height: 20px; display: block; transition: transform 280ms var(--ease); }
@media (hover: hover) {
	.social-link:hover {
		box-shadow: var(--shadow-2);
		animation: none;
		transform: translateY(-3px);
	}
	.social-link:hover svg { transform: scale(1.08); }
}
.social-link:focus-visible {
	outline: 2px solid var(--secondary);
	outline-offset: 2px;
}

/* Staggered hop. Mostly resting at translateY(0); a quick gentle dip up
 * around 8–18% of the cycle (≈350-800ms in a 4.5s cycle), then back to
 * rest. Per-position delays make the wave travel left-to-right. */
@keyframes bw-social-hop {
	0%, 8%, 18%, 100% { transform: translateY(0); }
	13%               { transform: translateY(-4px); }
}

.listing-detail__socials li:nth-child(1) .social-link { animation-delay: 0s;    }
.listing-detail__socials li:nth-child(2) .social-link { animation-delay: 0.18s; }
.listing-detail__socials li:nth-child(3) .social-link { animation-delay: 0.36s; }
.listing-detail__socials li:nth-child(4) .social-link { animation-delay: 0.54s; }
.listing-detail__socials li:nth-child(5) .social-link { animation-delay: 0.72s; }
.listing-detail__socials li:nth-child(6) .social-link { animation-delay: 0.90s; }
.listing-detail__socials li:nth-child(7) .social-link { animation-delay: 1.08s; }
.listing-detail__socials li:nth-child(8) .social-link { animation-delay: 1.26s; }

@media (prefers-reduced-motion: reduce) {
	.social-link { animation: none; }
}

/* Per-platform pop colour on hover. Wrapped in (hover: hover) so iOS
 * doesn't get stuck on the brand colour after a tap. */
@media (hover: hover) {
	.social-link--facebook:hover  { background: #1877f2; color: #fff; border-color: #1877f2; }
	.social-link--instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; border-color: #dc2743; }
	.social-link--twitter:hover   { background: #000;     color: #fff; border-color: #000; }
	html.dark .social-link--twitter:hover { background: #fff; color: #000; border-color: #fff; }
	.social-link--tiktok:hover    { background: #010101; color: #fff; border-color: #010101; }
	.social-link--youtube:hover   { background: #ff0000; color: #fff; border-color: #ff0000; }
	.social-link--linkedin:hover  { background: #0a66c2; color: #fff; border-color: #0a66c2; }
}

/* Opening hours */
.listing-hours { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-xl); padding: var(--md); margin-bottom: var(--md); }
html.dark .listing-hours { background: rgba(255,255,255,0.04); }

/* By-appointment-only variant — replaces the hours grid for trades,
 * coaches, mobile services, and home-based reps. */
.listing-hours--appointment {
	text-align: center;
}
.listing-hours__appointment-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	margin: 0 auto;
	border-radius: var(--r-full);
	background: color-mix(in srgb, var(--secondary) 14%, transparent);
	color: var(--secondary);
	font-weight: 700;
	font-size: var(--body-md-size);
	letter-spacing: 0.01em;
}
html.dark .listing-hours__appointment-badge {
	background: color-mix(in srgb, var(--secondary-fixed) 18%, transparent);
	color: var(--secondary-fixed);
}
.listing-hours__appointment-help {
	margin: var(--sm) 0 0;
	color: var(--on-surface-variant);
	font-size: var(--body-sm-size, 0.85rem);
	line-height: 1.4;
}
.listing-hours__title { display: flex; align-items: center; gap: var(--xs); font-family: var(--font-display); font-size: var(--headline-md-size); margin: 0 0 var(--md); }
.listing-hours__title .material-symbols-outlined { font-size: 22px; color: var(--secondary); }
html.dark .listing-hours__title .material-symbols-outlined { color: var(--secondary-fixed); }
.listing-hours__list { display: grid; gap: 4px; margin: 0; }
.listing-hours__row { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: var(--r-sm); }
.listing-hours__row dt { font-weight: 600; color: var(--on-surface-variant); margin: 0; min-width: 48px; }
.listing-hours__row dd { margin: 0; color: var(--on-surface); font-variant-numeric: tabular-nums; }
.listing-hours__row.is-today { background: var(--accent-aqua-soft); color: var(--secondary); }
html.dark .listing-hours__row.is-today { background: rgba(45,212,191,0.12); }
.listing-hours__row.is-today dt,
.listing-hours__row.is-today dd { color: var(--secondary); font-weight: 700; }
html.dark .listing-hours__row.is-today dt,
html.dark .listing-hours__row.is-today dd { color: var(--secondary-fixed); }

/* Gallery (single listing aside) */
.listing-gallery { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-xl); padding: var(--md); }
html.dark .listing-gallery { background: rgba(255,255,255,0.04); }
.listing-gallery__title { font-family: var(--font-display); font-size: var(--headline-md-size); margin: 0 0 var(--md); }
.listing-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--xs); }
.listing-gallery__item { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-md); background: var(--surface-container-high); }
.listing-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.listing-gallery__item:hover img { transform: scale(1.05); }
.listing-gallery__item--solo { aspect-ratio: 16 / 11; grid-column: 1 / -1; }
.listing-detail__tags { margin-top: var(--xl); border-top: 1px solid var(--outline-variant); padding-top: var(--lg); }
.listing-detail__tags h3 { font-family: var(--font-display); font-size: var(--headline-md-size); margin: 0 0 var(--sm); }

/* Local Insights restyled (stacked cards) */
.card-insights__list { display: grid; grid-template-columns: 1fr; gap: var(--md); }
.card-insights__item {
	display: grid;
	grid-template-columns: 88px 1fr;
	align-items: stretch;
	gap: var(--md);
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	border-radius: var(--r-lg);
	overflow: hidden;
	min-height: 88px;
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
html.dark .card-insights__item { background: rgba(255,255,255,0.04); }
.card-insights__item:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card-insights__item img { width: 88px; height: 100%; min-height: 88px; object-fit: cover; border-radius: 0; }
.card-insights__icon { width: 88px; min-height: 88px; height: auto; }
.card-insights__body { padding: var(--sm) var(--md) var(--sm) 0; align-self: center; }

/* Premium / advertised businesses */
.bento__cell--premium { grid-column: 1 / -1; padding: var(--lg); background: linear-gradient(135deg, var(--primary-container), var(--surface-container)); border: 1px solid color-mix(in srgb, var(--accent-aqua) 24%, var(--outline-variant)); }
html.dark .bento__cell--premium { background: linear-gradient(135deg, rgba(45,212,191,0.08), rgba(15,23,42,0.6)); }
.bento__cell--premium .bento__head { display: flex; justify-content: space-between; align-items: end; gap: var(--md); margin-bottom: var(--md); flex-wrap: wrap; }
.bento__cell--premium .bento__head h2 { font-family: var(--font-display); font-size: var(--headline-md-size); color: var(--on-surface); margin: 0; }
.bento__cell--premium .bento__head .chip { background: var(--accent-aqua-soft); color: var(--secondary); }
.premium-grid { display: grid; gap: var(--md); grid-template-columns: 1fr; }
@media (min-width: 640px) { .premium-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .premium-grid { grid-template-columns: repeat(4, 1fr); } }
.premium-card { display: flex; flex-direction: column; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.dark .premium-card { background: rgba(255,255,255,0.04); }
.premium-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.premium-card__media { aspect-ratio: 4 / 3; background: var(--surface-container-high); overflow: hidden; }
.premium-card__media img { width: 100%; height: 100%; object-fit: cover; }
.premium-card__body { padding: var(--md); display: flex; flex-direction: column; gap: 4px; }
.premium-card__kicker { font-size: var(--label-md-size); letter-spacing: var(--label-md-tracking); text-transform: uppercase; font-weight: 600; color: var(--secondary); }
html.dark .premium-card__kicker { color: var(--secondary-fixed); }
.premium-card__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--on-surface); }

/* Stretched-link pattern + Call CTA on Recommended grid cards. */
.premium-card { position: relative; }
.premium-card__link {
	color: var(--on-surface);
	text-decoration: none;
}
.premium-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
@media (hover: hover) {
	.premium-card__link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
}
.premium-card__actions {
	display: flex;
	margin-top: var(--xs);
}
.premium-card__call { position: relative; z-index: 2; }

/* Local Events bento card (replaces Local Insights) */
.card-events { padding: var(--lg); display: flex; flex-direction: column; gap: var(--md); background: var(--surface-container-low); }
html.dark .card-events { background: rgba(255,255,255,0.06); }
.card-events__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sm); }
.card-events__title { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: var(--headline-md-size); margin: 0; }
.card-events__icon { color: var(--secondary); font-size: 22px; }
html.dark .card-events__icon { color: var(--secondary-fixed); }
.card-events__see-all { color: var(--secondary); font-weight: 700; font-size: var(--label-md-size); }
html.dark .card-events__see-all { color: var(--secondary-fixed); }
.card-events__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--xs); }
.card-events__submit {
	margin-top: var(--md);
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--secondary);
	font-weight: 600;
	font-size: var(--label-md-size);
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: color 120ms ease, transform 120ms ease;
}
.card-events__submit:focus-visible {
	color: var(--on-surface);
	text-decoration: underline;
	text-underline-offset: 3px;
	transform: translateY(-1px);
}
@media (hover: hover) {
	.card-events__submit:hover {
		color: var(--on-surface);
		text-decoration: underline;
		text-underline-offset: 3px;
		transform: translateY(-1px);
	}
}
.card-events__submit .material-symbols-outlined { font-size: 16px; }
html.dark .card-events__submit { color: var(--secondary-fixed); }
html.dark .card-events__submit:hover,
html.dark .card-events__submit:focus-visible { color: var(--on-surface); }

/* Events archive — full grid + Submit Event header */
.archive--events { padding-block: var(--lg); }
.archive__head--events {
	display: flex;
	flex-direction: column;
	gap: var(--xs);
	margin-bottom: var(--lg);
	max-width: 100%;
	text-align: left;
}
.archive__head-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--md);
}
.archive--events .archive__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 800;
	line-height: 1.05;
	margin: 0;
	color: var(--on-surface);
}
.archive--events .archive__submit { white-space: nowrap; }
.archive--events .archive__lead {
	color: var(--on-surface-variant);
	max-width: 60ch;
	margin: 0;
	line-height: 1.5;
}
@media (max-width: 540px) {
	.archive__head-row { flex-direction: column; align-items: flex-start; }
	.archive--events .archive__submit { width: 100%; justify-content: center; }
}

.archive__grid--events {
	display: grid;
	gap: var(--md);
	grid-template-columns: 1fr;
	margin-top: var(--lg);
}
@media (min-width: 640px) { .archive__grid--events { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .archive__grid--events { grid-template-columns: repeat(3, 1fr); } }

.post-card--event .post-card__media { position: relative; aspect-ratio: 16 / 10; }
.post-card__placeholder--event {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--secondary) 35%, transparent), transparent 55%),
		radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--gold, #d88a1a) 35%, transparent), transparent 55%),
		linear-gradient(135deg, color-mix(in srgb, var(--secondary) 20%, var(--surface-container-high)) 0%, var(--surface-container-high) 80%);
	color: rgba(255,255,255,0.95);
}
html.dark .post-card__placeholder--event {
	background:
		radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--secondary-fixed) 30%, transparent), transparent 55%),
		radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--warning, #fbbf24) 25%, transparent), transparent 55%),
		linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 80%);
}
.post-card__placeholder--event .material-symbols-outlined {
	font-size: 64px;
	opacity: 0.85;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

.post-card__date-pill {
	position: absolute;
	top: var(--sm);
	left: var(--sm);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	padding: 8px 10px;
	border-radius: var(--r-md);
	background: var(--surface-container-lowest);
	color: var(--on-surface);
	box-shadow: 0 4px 14px rgba(0,0,0,0.18);
	line-height: 1;
	z-index: 2;
}
html.dark .post-card__date-pill { background: rgba(0,0,0,0.7); color: #fff; }
.post-card__date-day { font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.post-card__date-month { font-size: 0.62rem; letter-spacing: 0.08em; opacity: 0.85; margin-top: 3px; font-weight: 700; }
.card-events__link { display: grid; grid-template-columns: 56px 1fr; gap: var(--md); align-items: center; padding: var(--sm); border-radius: var(--r-md); transition: background var(--dur) var(--ease); }
.card-events__link:hover { background: var(--surface-container-high); }
html.dark .card-events__link:hover { background: rgba(255,255,255,0.08); }
.card-events__date {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 56px; height: 56px;
	border-radius: var(--r-md);
	background: var(--accent-aqua-soft); color: var(--secondary);
	font-family: var(--font-display); font-weight: 700;
	line-height: 1; text-align: center;
}
html.dark .card-events__date { background: rgba(45,212,191,0.16); color: var(--secondary-fixed); }
.card-events__date--tba { background: var(--surface-container-high); color: var(--on-surface-variant); font-size: 10px; }
.card-events__day { font-size: 22px; }
.card-events__month { font-size: 10px; letter-spacing: var(--label-md-tracking); margin-top: 2px; }
.card-events__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-events__heading { font-family: var(--font-display); font-weight: 700; color: var(--on-surface); line-height: 1.2; }
.card-events__meta { color: var(--on-surface-variant); font-size: var(--label-md-size); }
.card-events__book {
	display: inline-flex; align-items: center; gap: 4px;
	margin-top: 2px;
	color: var(--secondary);
	font-size: var(--label-md-size); font-weight: 700;
	letter-spacing: 0;
}
html.dark .card-events__book { color: var(--secondary-fixed); }
.card-events__book .material-symbols-outlined { font-size: 14px; }

/* Events */
.bento__cell--events { grid-column: 1 / -1; padding: var(--lg); }
.events-head { display: flex; justify-content: space-between; align-items: end; gap: var(--md); margin-bottom: var(--md); flex-wrap: wrap; }
.events-head h2 { font-family: var(--font-display); font-size: var(--headline-md-size); margin: 0; }
.events-grid { display: grid; gap: var(--md); grid-template-columns: 1fr; }
@media (min-width: 640px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .events-grid { grid-template-columns: repeat(3, 1fr); } }
.event-card { display: grid; grid-template-columns: 88px 1fr; gap: var(--md); padding: var(--md); background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.dark .event-card { background: rgba(255,255,255,0.04); }
.event-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.event-card__date { display: flex; align-items: center; justify-content: center; background: var(--accent-aqua-soft); color: var(--secondary); border-radius: var(--r-md); font-family: var(--font-display); font-weight: 700; text-align: center; font-size: var(--label-md-size); padding: var(--sm); }
html.dark .event-card__date { background: rgba(45,212,191,0.16); color: var(--secondary-fixed); }
.event-card__body { display: flex; flex-direction: column; gap: 4px; align-self: center; }
.event-card__title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--on-surface); line-height: 1.2; }
.event-card__excerpt { color: var(--on-surface-variant); font-size: var(--body-md-size); line-height: 1.4; }

/* Suggest page */
.suggest { padding-block: var(--xxl); }
.suggest__head { text-align: center; margin-bottom: var(--xl); display: flex; flex-direction: column; gap: var(--sm); align-items: center; }
.suggest__kicker { font-size: var(--label-md-size); letter-spacing: var(--label-md-tracking); text-transform: uppercase; font-weight: 600; color: var(--secondary); }
html.dark .suggest__kicker { color: var(--secondary-fixed); }
.suggest__lead { color: var(--on-surface-variant); font-size: var(--body-lg-size); max-width: 60ch; }
.suggest__form { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-xl); padding: var(--lg); }
html.dark .suggest__form { background: rgba(255,255,255,0.04); }
.suggest__copy { margin-top: var(--xl); }

/* Static page */
.page { padding-block: var(--xxl); }
.page__head { margin-bottom: var(--lg); }
.page__cta { margin-top: var(--xl); }

/* Capture modal */
.capture-modal { position: fixed; inset: 0; z-index: 100; display: none; }
.capture-modal[data-state="open"] { display: block; }
.capture-modal[aria-hidden="false"] { display: block; }
.capture-modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--inverse-surface) 70%, transparent); backdrop-filter: blur(8px); }
.capture-modal__panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100% - 32px)); height: 90vh; max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--surface-container-lowest); border-radius: var(--r-2xl); box-shadow: var(--shadow-3); overflow: hidden; }
html.dark .capture-modal__panel { background: var(--surface-container); }
.capture-modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--md) var(--lg); border-bottom: 1px solid var(--outline-variant); }
.capture-modal__title { font-family: var(--font-display); font-size: var(--headline-md-size); font-weight: 700; }
.capture-modal__close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-full); color: var(--on-surface-variant); transition: background var(--dur) var(--ease); }
.capture-modal__close:hover { background: var(--surface-container-high); }
.capture-modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--md); display: flex; flex-direction: column; }
.capture-modal__body > .capture-form,
.capture-modal__body > .capture-form--custom,
.capture-modal__body > .capture-form--contact,
.capture-modal__body > .capture-form--event { flex: 1 1 auto; min-height: 0; display: flex; }
.capture-modal__body iframe {
	flex: 1 1 auto;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	border: none !important;
	border-radius: 8px;
	display: block;
}
.capture-modal__foot { padding: var(--sm) var(--lg); border-top: 1px solid var(--outline-variant); }
.capture-modal__note { color: var(--on-surface-variant); font-size: var(--label-md-size); }
.capture-form iframe { width: 100%; border: none; border-radius: var(--r-lg); }
.capture-form--empty { padding: var(--lg); text-align: center; color: var(--on-surface-variant); border: 2px dashed var(--outline-variant); border-radius: var(--r-lg); }

/* Custom-embed iframes ship with style="height:100%" which collapses
   inside a flow container. Give them a reasonable base height so they
   render before form_embed.js auto-resizes them to the real size. */
.capture-form--custom { min-height: 600px; display: block; }
.capture-form--custom iframe { width: 100% !important; min-height: 600px !important; height: 100%; border: none !important; border-radius: var(--r-lg); display: block; }
.capture-form--contact.capture-form--custom { min-height: 720px; }
.capture-form--contact.capture-form--custom iframe { min-height: 720px !important; }

/* Reputation / reviews widget on the home page */
.reputation { padding-block: var(--xl); }
.reputation__embed {
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	border-radius: var(--r-xl);
	padding: var(--md);
	box-shadow: var(--shadow-1);
	overflow: hidden;
}
html.dark .reputation__embed { background: rgba(255,255,255,0.04); }
.reputation__embed .lc_reviews_widget,
.reputation__embed iframe {
	display: block;
	width: 100%;
	min-width: 100%;
	min-height: var(--reputation-min-h, 420px);
	border: none;
	border-radius: var(--r-lg);
	background: transparent;
}
@media (max-width: 540px) {
	.reputation__embed { padding: var(--sm); }
	.reputation__embed .lc_reviews_widget,
	.reputation__embed iframe {
		/* Allow ~80px extra on small screens because cards may stack */
		min-height: calc(var(--reputation-min-h, 420px) + 80px);
	}
}

/* Contact page (page-contact.php) */
.contact-page { padding-block: var(--xl); display: flex; flex-direction: column; gap: var(--lg); }
.contact-page__head { text-align: center; }
.contact-page__intro { color: var(--on-surface-variant); }
.contact-page__intro.prose p { margin: 0 0 var(--sm); }
.contact-page__form {
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	border-radius: var(--r-xl);
	padding: var(--lg);
	box-shadow: var(--shadow-1);
}
html.dark .contact-page__form { background: rgba(255,255,255,0.04); }
.contact-page__form-title {
	font-family: var(--font-display);
	font-size: var(--headline-md-size);
	margin: 0 0 var(--md);
	color: var(--on-surface);
}
.contact-page__form .capture-form--contact iframe { background: var(--surface-container-lowest); }
@media (max-width: 540px) {
	.contact-page__form { padding: var(--md); border-radius: var(--r-lg); }
}
.capture-form__hint { font-size: var(--label-md-size); margin-top: var(--sm); }

/* Body lock when modal open */
body.no-scroll { overflow: hidden; }