/* ============================================================================
   Things-to-Do verticals (Arts & Culture, Shopping, Health & Beauty, Services,
   Parking). Each page is one self-contained pattern (patterns/vertical-*.php)
   that reuses the Dining vertical's classes (.hmd-hero-vertical, .hmd-ribbon,
   .hmd-spotlight, .hmd-itin-*) from dining.css. This partial only adds what
   dining.css / app.css don't already cover: per-vertical hero accents, the
   Vibemap grid section, and the closing ink CTA band.
   Tokens/aliases come from app.css; nothing hard-coded that has a preset.
   ========================================================================== */

/* ── Per-vertical hero accent (wedge + accent word + stat rail) ────────────*/
/* Each modifier sets three custom props; the rules below consume them so the
   hero color scheme swaps with a single class. Stat-rail ink flips to white
   on the darker wedges (arts/parking) to stay legible over the color block. */
.hmd-hero-vertical--arts     { --hmd-wedge: var(--purple);  --hmd-accent: var(--purple);  --hmd-stat: #fff; }
.hmd-hero-vertical--shopping { --hmd-wedge: var(--yellow);  --hmd-accent: var(--magenta); --hmd-stat: var(--ink); }
.hmd-hero-vertical--health   { --hmd-wedge: var(--teal);    --hmd-accent: var(--teal);    --hmd-stat: var(--ink); }
.hmd-hero-vertical--services { --hmd-wedge: var(--coral);   --hmd-accent: var(--coral);   --hmd-stat: var(--ink); }
.hmd-hero-vertical--parking  { --hmd-wedge: var(--magenta); --hmd-accent: var(--magenta); --hmd-stat: #fff; }

/* Wedge color — specificity bumped past dining.css's .hmd-hero-vertical::before. */
.hmd-hero-vertical[class*="hmd-hero-vertical--"]::before {
	background: var(--hmd-wedge, var(--yellow));
}
/* Accent word ("SoHo." / "SERVICES.") + breadcrumb current-page. */
[class*="hmd-hero-vertical--"] .hmd-hero-vertical__title .accent,
[class*="hmd-hero-vertical--"] .hmd-hero-vertical__crumbs span {
	color: var(--hmd-accent, var(--magenta));
}
/* Big stat number + label sit directly on the wedge — keep them legible. */
[class*="hmd-hero-vertical--"] .hmd-hero-vertical__stat,
[class*="hmd-hero-vertical--"] .hmd-hero-vertical__stat-label {
	color: var(--hmd-stat, var(--ink));
}

/* ── Vibemap places grid section ──────────────────────────────────────────*/
/* Section chrome (bg, header, eyebrow) is shared; give the plugin grid a bit of
   breathing room below the section header. */
.hmd-vert-grid .wp-block-vibemap-native-events {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── "Getting around" transit block (parking) ─────────────────────────────*/
/* Reuses the dark .hmd-itineraries / .hmd-itin-* skin; these are reference
   facts, not numbered steps, so drop the list markers. */
.hmd-getting-around .hmd-itin-card__stops {
	list-style: none;
	padding-left: 0;
}
.hmd-getting-around .hmd-itineraries__title .accent { color: var(--yellow); }

/* ── Closing CTA band (ink) ───────────────────────────────────────────────*/
.hmd-vert-cta__inner { gap: clamp(1.5rem, 4vw, 3rem); }
.hmd-vert-cta__copy { max-width: 34rem; }
.hmd-vert-cta__title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(1.75rem, 4vw, 3rem);
	letter-spacing: -0.03em;
	line-height: 0.98;
	margin: 0.5rem 0 0;
	color: #fff;
}
.hmd-vert-cta__title .accent { color: var(--yellow); }
.hmd-vert-cta__btns { flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 782px) {
	.hmd-vert-cta__inner { flex-direction: column; align-items: flex-start; }
}