/* =============================================================================
   City template (page-city.html): Key West, Miami Beach, Fort Lauderdale, West Palm Beach, Delray Beach.
   Source: Claude Design City.dc.html + city-data.js (content: wherespinky-core data/cities.json).
   Loaded only on city pages (functions.php wherespinky_page_key()). Tokens only; guard: npm run guard.
   Breakpoints: the design's 900 → 900, 1080 → 1060, 560 → 640 (normalised scale).
   ============================================================================= */

/* ---- Per-city colours ------------------------------------------------------
   accent      band background (white text on ocean uses ocean-deep: 4.61:1)
   on          text on the accent (design: navy on gold, ink on coral/teal, white otherwise)
   hero-*      hero card fill, ink and dashed frame
   shadow-*    hard shadows in the accent colour (theme.json custom.shadow.<colour>-6 / -5). */
[data-city] {
	--wsp-city-accent: var(--wp--preset--color--pink);
	--wsp-city-on: var(--wp--preset--color--white);
	--wsp-city-hero-bg: var(--wp--preset--color--pink);
	--wsp-city-hero-ink: var(--wp--preset--color--white);
	--wsp-city-dash: var(--wp--custom--alpha--sand-50);
	--wsp-city-shadow-6: var(--wp--custom--shadow--pink-6);
	--wsp-city-shadow-5: var(--wp--custom--shadow--pink-lg);
}
[data-city="miami-beach"] {
	--wsp-city-shadow-6: var(--wp--custom--shadow--ocean-6);
	--wsp-city-shadow-5: var(--wp--custom--shadow--ocean-5);
	--wsp-city-accent: var(--wp--preset--color--ocean-deep);
	--wsp-city-hero-bg: var(--wp--preset--color--ocean-deep);
}
[data-city="fort-lauderdale"] {
	--wsp-city-shadow-6: var(--wp--custom--shadow--teal-6);
	--wsp-city-shadow-5: var(--wp--custom--shadow--teal-5);
	--wsp-city-accent: var(--wp--preset--color--teal);
	--wsp-city-on: var(--wp--preset--color--ink);
	--wsp-city-hero-bg: var(--wp--preset--color--teal);
	--wsp-city-hero-ink: var(--wp--preset--color--ink);
	--wsp-city-dash: var(--wp--custom--alpha--ink-35);
}
[data-city="west-palm-beach"] {
	--wsp-city-shadow-6: var(--wp--custom--shadow--gold-6);
	--wsp-city-shadow-5: var(--wp--custom--shadow--gold-5);
	--wsp-city-accent: var(--wp--preset--color--gold);
	--wsp-city-on: var(--wp--preset--color--navy);
	--wsp-city-hero-bg: var(--wp--preset--color--gold);
	--wsp-city-hero-ink: var(--wp--preset--color--navy);
	--wsp-city-dash: var(--wp--custom--alpha--navy-35);
}
[data-city="delray-beach"] {
	--wsp-city-shadow-6: var(--wp--custom--shadow--coral-6);
	--wsp-city-shadow-5: var(--wp--custom--shadow--coral-5);
	--wsp-city-accent: var(--wp--preset--color--coral);
	--wsp-city-on: var(--wp--preset--color--ink);
	--wsp-city-hero-bg: var(--wp--preset--color--coral);
	--wsp-city-hero-ink: var(--wp--preset--color--ink);
	--wsp-city-dash: var(--wp--custom--alpha--ink-35);
}

/* Feature-card fills (city-data features[].color) and the ink each one takes. */
[data-tone="pink"] { background-color: var(--c-pink); color: var(--c-white); }
[data-tone="ocean"] { background-color: var(--wp--preset--color--ocean-deep); color: var(--c-white); }
[data-tone="teal"] { background-color: var(--c-teal); color: var(--c-ink); }
[data-tone="gold"] { background-color: var(--wp--preset--color--gold); color: var(--c-navy); }
[data-tone="coral"] { background-color: var(--wp--preset--color--coral); color: var(--c-ink); }

.wsp-city-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--wsp-pos, center); display: block; }

/* ---- Hero ------------------------------------------------------------------ */
.wsp-sec.wsp-city-hero { background-color: var(--c-white); overflow: hidden; padding: var(--s-20) var(--s-8) calc(var(--s-24) + var(--s-3)); }
.wsp-city-hero-inner {
	max-width: var(--wp--custom--maxw--wide); margin: 0 auto;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-16); align-items: center;
}
/* Side by side from desktop (900): the card left, the collage right. */
@media (min-width: 900px) { .wsp-city-hero-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wsp-city-hero-card {
	position: relative; background-color: var(--wsp-city-hero-bg); color: var(--wsp-city-hero-ink);
	border: 3px solid var(--c-navy); box-shadow: var(--sh-xl);
	padding: calc(var(--s-12) + var(--s-1)) var(--s-12) calc(var(--s-10) + var(--s-1));
}
.wsp-city-hero-dash { position: absolute; inset: var(--s-2); border: 1px dashed var(--wsp-city-dash); pointer-events: none; }
.wsp-stamp-card.wsp-city-flagship { top: calc(-1 * (var(--s-5) + var(--s-1) / 2)); right: var(--s-10); padding: var(--s-2) var(--s-4); }
.wsp-city-hero-body { position: relative; }
.wsp-city-greeting {
	font-family: var(--f-label); font-size: var(--fs-body); letter-spacing: var(--wp--custom--ls--greeting);
	margin-bottom: calc(var(--s-2) + var(--s-1) / 2);
}
.wsp-city-title {
	font-family: var(--f-display); font-weight: 700; font-size: var(--wp--preset--font-size--display-card); line-height: 0.98;
	letter-spacing: var(--wp--custom--ls--hero); color: inherit; margin: 0 0 calc(var(--s-5) + var(--s-1) / 2); text-wrap: balance;
}
.wsp-city-desc { font-size: var(--fs-body); line-height: var(--wp--custom--lh--body); max-width: 520px; margin: 0 0 var(--s-8); text-wrap: pretty; } /* design: opacity .92; dropped for contrast (white on pink 3.99 → 4.54:1) */
.wsp-city-stats {
	display: flex; flex-wrap: wrap; gap: var(--s-10); margin: calc(var(--s-8) + var(--s-1)) 0 0; padding-top: var(--s-6);
	border-top: 2px dashed var(--wsp-city-dash);
}
.wsp-city-stat { display: flex; flex-direction: column-reverse; }
.wsp-city-stat-v { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); line-height: 1; }
.wsp-city-stat-l { font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button); margin-top: calc(var(--s-1) + var(--s-1) / 2); }

.wsp-city-collage { position: relative; min-height: 560px; }
.wsp-city-collage-tile { position: absolute; overflow: hidden; background-color: var(--c-sand); border: 3px solid var(--c-navy); }
.wsp-city-collage-tile.is-1 { top: 0; right: 0; width: 56%; aspect-ratio: 4 / 3; transform: rotate(3deg); box-shadow: var(--wsp-city-shadow-6); }
.wsp-city-collage-tile.is-2 { top: 30%; left: 2%; width: 40%; aspect-ratio: 4 / 5; transform: rotate(-4deg); box-shadow: var(--wsp-city-shadow-6); z-index: var(--wp--custom--z--raised); }
.wsp-city-collage-tile.is-3 { bottom: 0; right: 6%; width: 48%; aspect-ratio: 4 / 3; transform: rotate(-2deg); box-shadow: var(--wp--custom--shadow--navy-6); }

@media (max-width: 899px) {
	.wsp-city-collage { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
	.wsp-city-collage-tile.is-1, .wsp-city-collage-tile.is-2, .wsp-city-collage-tile.is-3 { position: relative; inset: auto; width: auto; transform: none; }
	.wsp-city-collage-tile.is-3 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
/* Phones (Cara, 20 Oct, prompt 19): the top two photos the same size side by side (square, so neither is the smaller),
   the third full width under them. Each photo crops on its own phone focal point (cities.json hero_pos → --wsp-hero-pos
   on the tile; read only here, so the tablet and desktop crops are unchanged). Frames and shadows stay. The collage
   sits one standard phone section gap (pad-y-mobile) above the first feature card, as one gap at desktop does:
   the hero's bottom padding is that gap and Highlights has no top padding (it was 112 + 56 = 168 px). */
@media (max-width: 640px) {
	.wsp-sec.wsp-city-hero { padding: var(--s-20) var(--wp--custom--section--pad-x-mobile) var(--wp--custom--section--pad-y-mobile); }
	.wsp-sec.wsp-city-highlights { padding-top: 0; }
	.wsp-city-collage-tile.is-1, .wsp-city-collage-tile.is-2 { aspect-ratio: 1 / 1; }
	.wsp-city-collage-tile .wsp-city-cover { object-position: var(--wsp-hero-pos, center); }
}

/* ---- Highlights ------------------------------------------------------------ */
@media (min-width: 900px) { .wsp-sec.wsp-city-highlights { padding-top: 0; } }
.wsp-city-features { display: flex; flex-direction: column; gap: var(--wp--custom--gap--grid); }
.wsp-city-feature { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--custom--gap--grid); }
@media (min-width: 900px) { .wsp-city-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wsp-city-feature.is-flipped .wsp-city-feature-card { order: 2; }
.wsp-city-feature.is-flipped .wsp-city-feature-photo { order: 1; }
.wsp-city-feature-card {
	border: 3px solid var(--c-navy); box-shadow: var(--wp--custom--shadow--card);
	padding: calc(var(--s-10) + var(--s-1)) var(--s-10); min-height: 300px;
	display: flex; flex-direction: column; justify-content: center;
}
.wsp-city-feature-num { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-3xl); line-height: 1; margin-bottom: calc(var(--s-3) + var(--s-1) / 2); }
.wsp-city-feature-title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); line-height: var(--wp--custom--lh--tight); color: inherit; margin: 0 0 var(--s-3); }
.wsp-city-feature-text { font-size: var(--fs-md); line-height: var(--wp--custom--lh--body); max-width: var(--wp--custom--maxw--prose); margin: 0; text-wrap: pretty; }
.wsp-city-feature-photo {
	position: relative; overflow: hidden; min-height: 300px; background-color: var(--c-sand);
	border: 3px solid var(--c-navy); box-shadow: var(--wp--custom--shadow--card);
}
@media (max-width: 899px) {
	.wsp-city-feature.is-flipped .wsp-city-feature-card, .wsp-city-feature.is-flipped .wsp-city-feature-photo { order: 0; }
}
@media (max-width: 640px) {
	.wsp-city-feature-card { padding: var(--s-8) var(--s-6); min-height: 240px; }
	.wsp-city-feature-photo { min-height: 240px; }
}

/* ---- Accent bands (Ready to Experience, Reviews) --------------------------- */
.wsp-city-band { background-color: var(--wsp-city-accent); color: var(--wsp-city-on); }
.wsp-city-details-inner { max-width: var(--wp--custom--maxw--content); margin: 0 auto; text-align: center; }
.wsp-city-band-title {
	font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h2-compact); line-height: 1.1;
	letter-spacing: var(--wp--custom--ls--title); color: inherit; margin: 0 0 var(--s-3); text-wrap: balance;
}
.wsp-city-band-text { font-size: var(--fs-body); line-height: var(--wp--custom--lh--body); margin: 0 0 var(--s-10); }
.wsp-city-facts {
	margin: 0; background-color: var(--c-cream); border: 3px solid var(--c-navy); box-shadow: var(--sh-xl);
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.wsp-city-fact {
	padding: calc(var(--s-6) + var(--s-1) / 2) var(--s-4); display: flex; flex-direction: column; justify-content: center; gap: var(--s-2);
	border-right: 1px dashed var(--wp--custom--alpha--navy-35); border-bottom: 1px dashed var(--wp--custom--alpha--navy-12);
}
.wsp-city-fact:nth-child(6n) { border-right: 0; }
.wsp-city-fact:nth-last-child(-n+6) { border-bottom: 0; }
.wsp-city-fact-l { font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--label); color: var(--c-pink-text); }
.wsp-city-fact-v { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lede); line-height: 1.25; color: var(--c-navy); text-wrap: balance; }
/* Six facts: 2 × 3 on a phone, 3 × 2 up to 1239, one row of six from wide (1240). */
@media (max-width: 1239px) {
	.wsp-city-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wsp-city-fact:nth-child(6n) { border-right: 1px dashed var(--wp--custom--alpha--navy-35); }
	.wsp-city-fact:nth-child(3n) { border-right: 0; }
	.wsp-city-fact:nth-last-child(-n+6) { border-bottom: 1px dashed var(--wp--custom--alpha--navy-12); }
	.wsp-city-fact:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (max-width: 640px) {
	.wsp-city-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wsp-city-fact:nth-child(3n) { border-right: 1px dashed var(--wp--custom--alpha--navy-35); }
	.wsp-city-fact:nth-child(2n) { border-right: 0; }
	.wsp-city-fact:nth-last-child(-n+3) { border-bottom: 1px dashed var(--wp--custom--alpha--navy-12); }
	.wsp-city-fact:nth-last-child(-n+2) { border-bottom: 0; }
}
.wsp-city-addon {
	margin-top: var(--wp--custom--gap--grid); background-color: var(--c-cream); border: 3px solid var(--c-navy); box-shadow: var(--wp--preset--shadow--hover);
	padding: calc(var(--s-4) + var(--s-1) / 2) calc(var(--s-5) + var(--s-1) / 2);
	display: flex; align-items: center; gap: calc(var(--s-4) + var(--s-1) / 2); text-align: left;
}
.wsp-city-addon-icon {
	width: 48px; height: 48px; flex-shrink: 0; background-color: var(--wsp-city-accent); color: var(--wsp-city-on); border: 2px solid var(--c-navy);
	display: flex; align-items: center; justify-content: center; font-size: var(--fs-h3);
}
.wsp-city-addon-l { font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--label); color: var(--c-pink-text); margin-bottom: var(--s-1); }
.wsp-city-addon-v { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-body); color: var(--c-navy); line-height: 1.35; }
.wsp-cta-row.wsp-city-details-cta { margin-top: calc(var(--s-10) + var(--s-1)); }

/* ---- The Route ------------------------------------------------------------- */
.wsp-city-route-inner { max-width: var(--wp--custom--maxw--content); margin: 0 auto; }
/* Route lists: one column on phones and tablets, two from desktop (900). */
.wsp-city-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); align-items: start; }
@media (min-width: 900px) { .wsp-city-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wsp-city-list { background-color: var(--c-white); border: 3px solid var(--c-navy); box-shadow: var(--wp--custom--shadow--card); padding: var(--s-8) var(--s-8) var(--s-4); }
.wsp-city-list-eyebrow { font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--label); color: var(--c-pink-text); }
.wsp-city-list-title {
	font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); line-height: var(--wp--custom--lh--tight); color: var(--c-navy);
	margin: var(--s-1) 0 var(--s-4); padding-bottom: var(--s-4); border-bottom: 2px dashed var(--wp--custom--alpha--navy-30);
}
.wsp-city-stops { list-style: none; margin: 0; padding: 0; }
.wsp-city-stop {
	display: flex; align-items: center; gap: calc(var(--s-3) + var(--s-1) / 2); padding: calc(var(--s-2) + var(--s-1) * 0.75) 0;
	border-bottom: 1px dashed var(--wp--custom--alpha--navy-25);
}
.wsp-city-stop-n {
	width: 28px; height: 28px; flex-shrink: 0; background-color: var(--c-pink); color: var(--c-white); border: 2px solid var(--c-navy);
	display: flex; align-items: center; justify-content: center; font-family: var(--f-label); font-size: var(--fs-sm);
}
.wsp-city-stop-t { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-md); color: var(--c-navy); line-height: 1.3; }
/* One long list (Delray Beach): the card spans the row and its stops flow into two balanced columns. */
.wsp-city-list.is-two-col { grid-column: 1 / -1; }
.wsp-city-list.is-two-col .wsp-city-stops { column-count: 2; column-gap: var(--s-12); }
.wsp-city-list.is-two-col .wsp-city-stop { break-inside: avoid; }
@media (max-width: 640px) { .wsp-city-list.is-two-col .wsp-city-stops { column-count: 1; } }
.wsp-city-route-note { text-align: center; font-style: italic; font-size: var(--fs-button); color: var(--c-muted); margin: calc(var(--s-8) + var(--s-1)) 0 0; }

/* ---- Gallery (two marquee rows; city.js) ---------------------------------- */
.wsp-city-gallery { background-color: var(--c-white); padding: var(--s-24) 0; overflow: hidden; }
/* The pause button sits centred under the heading (Cara's G9; audit V2: it no longer covers the title on a phone).
   Heading margin (s-5) + button (44 px) = the section head's usual s-16, so the photos start where they always did.
   The slot is kept while the button is hidden (reduced motion: nothing moves, so no button), and the button fades in
   when the marquee starts: no layout shift, nothing pops. */
.wsp-city-gallery-head { padding: 0 var(--s-8); }
.wsp-city-gallery-head .wsp-section-head { margin-bottom: var(--s-5); }
.wsp-arrow.wsp-city-gallery-toggle {
	display: block; margin: 0 auto; background-color: var(--c-cream); color: var(--c-navy);
	font-family: var(--f-body); font-size: var(--fs-sm);
	transition: opacity var(--m-base) var(--e-enter), visibility var(--m-base) var(--e-enter), transform var(--m-fast) var(--e-std), box-shadow var(--m-fast) var(--e-std);
}
.wsp-arrow.wsp-city-gallery-toggle:hover { transform: var(--lift); box-shadow: var(--sh-lg); }
.wsp-city-gallery-toggle[hidden] { display: block; visibility: hidden; opacity: 0; }
.wsp-city-gallery-view { display: flex; flex-direction: column; gap: var(--s-6); }
.wsp-city-gallery-row { overflow-x: auto; }
.wsp-city-gallery-track { display: flex; gap: var(--s-6); width: max-content; padding: var(--s-1) var(--s-6) var(--s-2); }
.wsp-city-gallery-tile {
	position: relative; overflow: hidden; width: 300px; height: 220px; flex-shrink: 0;
	background-color: var(--c-sand); border: 3px solid var(--c-navy); box-shadow: var(--sh-lg);
}
.wsp-city-gallery-row.is-bottom .wsp-city-gallery-tile { box-shadow: var(--wsp-city-shadow-5); }
.wsp-city-gallery.is-moving .wsp-city-gallery-view {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, var(--c-navy) 6%, var(--c-navy) 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, var(--c-navy) 6%, var(--c-navy) 94%, transparent 100%);
}
.wsp-city-gallery.is-moving .wsp-city-gallery-row { overflow: hidden; }
.wsp-city-gallery.is-moving .wsp-city-gallery-track { padding-left: 0; padding-right: var(--s-6); animation: wsp-marquee var(--wsp-marquee-duration) var(--e-linear) infinite; }
.wsp-city-gallery.is-moving .wsp-city-gallery-row.is-bottom .wsp-city-gallery-track { animation-direction: reverse; }
.wsp-city-gallery.is-paused .wsp-city-gallery-track, .wsp-city-gallery.is-held .wsp-city-gallery-track { animation-play-state: paused; }

/* ---- Reviews --------------------------------------------------------------- */
.wsp-city-reviews-grid {
	max-width: var(--wp--custom--maxw--content); margin: 0 auto;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-16); align-items: center;
}
@media (min-width: 900px) { .wsp-city-reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wsp-city-reviews-eyebrow {
	display: inline-block; font-family: var(--f-label); font-size: var(--fs-button); letter-spacing: var(--wp--custom--ls--label);
	border-bottom: 2px solid currentColor; padding-bottom: var(--s-1); margin-bottom: var(--s-4);
}
.wsp-city-reviews-title {
	font-family: var(--f-display); font-weight: 700; font-size: var(--wp--preset--font-size--display-band); line-height: 0.98;
	letter-spacing: var(--wp--custom--ls--hero); color: inherit; margin: 0 0 var(--s-5);
}
.wsp-city-reviews-text { font-size: var(--fs-body); line-height: var(--wp--custom--lh--body); max-width: 480px; margin: 0; text-wrap: pretty; }
.wsp-city-reviews .wsp-carousel-controls { margin-top: var(--wp--custom--gap--grid); }
.wsp-carousel-controls.is-city .wsp-arrow { background-color: var(--c-cream); }
.wsp-carousel-controls.is-city .wsp-arrow:hover { transform: var(--lift); box-shadow: var(--sh-lg); }
.wsp-carousel-controls.is-city .wsp-dot span { background-color: var(--c-cream); }
.wsp-carousel-controls.is-city .wsp-dot[aria-current="true"] span { background-color: var(--c-navy); }

/* ---- Sticky book bar (below desktop) --------------------------------------
   Hidden until the hero's Book a Hunt has scrolled away (site.js adds .is-shown); slides up on enter
   easing, back down on exit easing. The page gets bottom room so the bar never covers the footer. */
.wsp-city-sticky { display: none; }
@media (max-width: 899px) {
	body { padding-bottom: calc(var(--s-16) + var(--s-3)); }
	.wsp-city-sticky {
		--wsp-focus: var(--wp--custom--focus--on-dark);
		display: block; position: fixed; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: var(--wp--custom--z--header);
		background-color: var(--c-pink); color: var(--c-white); text-align: center; text-transform: uppercase;
		font-family: var(--f-label); font-size: var(--fs-md); letter-spacing: var(--wp--custom--ls--button);
		padding: var(--s-4) calc(var(--s-4) + var(--s-1) / 2); border: 3px solid var(--c-navy); box-shadow: var(--sh-md);
		opacity: 0; visibility: hidden; transform: translateY(calc(100% + var(--s-4)));
		transition: transform var(--m-base) var(--e-exit), opacity var(--m-base) var(--e-exit), visibility var(--m-base) var(--e-exit);
	}
	.wsp-city-sticky.is-shown {
		opacity: 1; visibility: visible; transform: none;
		transition: transform var(--m-slow) var(--e-enter), opacity var(--m-base) var(--e-enter), visibility var(--m-base) var(--e-enter);
	}
	.wsp-city-sticky:hover { color: var(--c-white); }
}

/* Without a reviews band (every city but Key West, slice 3 C1) the white gallery meets the white FAQ: one dashed rule. */
.wsp-city-gallery.has-dashed-rule { border-bottom: 3px dashed var(--c-navy); }