/*
 * Cities row and city landing page. Loaded only by the two templates that use it
 * (inc/cities.php, sn_cities_enqueue). Every other section on a city page is an
 * existing component and keeps its own styles.
 */

/* ---- Cities map: homepage, and "other cities" on each city page (BugHerd 781) ---- */
#sn-cities {
	--c-panel: #0d100f;
	--c-line: rgba(255, 255, 255, .1);
	--c-muted: #a3a8a5;
	--c-green: #63df9e;
	--c-display: "Neue Haas Grotesk Display Pro:55 Roman", "GroteskNeue", sans-serif;
	padding: 48px 0 64px;
}
#sn-cities .sn-cities__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 56px; border-radius: 10px; background: var(--c-panel); color: #fff; overflow: hidden; }
#sn-cities .sn-cities__title { margin: 0; font-family: var(--c-display); font-weight: 400; font-size: clamp(32px, 3.6vw, 50px); line-height: .92; text-transform: uppercase; color: #fff; }
#sn-cities .sn-cities__intro { max-width: 420px; margin: 18px 0 28px; font-size: 16px; line-height: 1.6; color: var(--c-muted); }
#sn-cities .sn-cities__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--c-line); }
#sn-cities .sn-cities__list li { margin: 0; padding: 0; }
#sn-cities .sn-cities__list li::before { content: none; }
#sn-cities .sn-cities__link { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 16px; padding: 14px 4px; border-top: 1px solid var(--c-line); color: #fff; text-decoration: none; transition: padding .2s ease; }
#sn-cities .sn-cities__name { font-family: var(--c-display); font-size: 22px; line-height: 1.15; }
#sn-cities .sn-cities__meta, #sn-cities .sn-map__card-meta { font-size: 13px; line-height: 1.3; color: var(--c-muted); white-space: nowrap; }
#sn-cities .sn-cities__meta--live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--c-green); vertical-align: 1px; }
#sn-cities .sn-cities__arrow { opacity: .3; transition: opacity .2s ease, transform .2s ease; }
#sn-cities .sn-cities__link.is-active, #sn-cities .sn-cities__link:hover { padding-left: 12px; }
#sn-cities .sn-cities__link.is-active .sn-cities__arrow, #sn-cities .sn-cities__link:hover .sn-cities__arrow { opacity: 1; color: var(--c-green); transform: translateX(2px); }
#sn-cities .sn-cities__link:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; border-radius: 6px; }

#sn-cities .sn-map { position: relative; width: 100%; max-width: 660px; margin-left: auto; aspect-ratio: 741 / 672; }
#sn-cities .sn-map__outline { position: absolute; inset: 0; width: 100%; height: 100%; }
#sn-cities .sn-map__outline path { fill: #1a201e; stroke: rgba(255, 255, 255, .16); stroke-width: 1; stroke-linejoin: round; }
#sn-cities .sn-map__pin { position: absolute; z-index: 2; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; background: none; cursor: pointer; }
#sn-cities .sn-map__dot { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; opacity: .75; transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease; }
#sn-cities .sn-map__pin--live .sn-map__dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--c-green); opacity: 1; }
#sn-cities .sn-map__pin--live .sn-map__dot::after { content: ""; position: absolute; inset: -6px; border: 1px solid var(--c-green); border-radius: 50%; animation: sn-city-pulse 2.4s ease-out infinite; }
#sn-cities .sn-map__pin:hover .sn-map__dot, #sn-cities .sn-map__pin.is-active .sn-map__dot { transform: scale(1.45); opacity: 1; box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); }
@keyframes sn-city-pulse { from { transform: scale(.6); opacity: .8; } to { transform: scale(2.2); opacity: 0; } }

#sn-cities .sn-map__card { position: absolute; left: 31%; top: 20%; z-index: 3; display: block; width: min(250px, 40%); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(18, 22, 20, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); color: #fff; text-decoration: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
#sn-cities .sn-map__card.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .25s ease, transform .25s ease; }
#sn-cities .sn-map__link { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#sn-cities .sn-map__link line { stroke: var(--c-green); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity .25s ease; }
#sn-cities .sn-map__link.is-drawn line { opacity: .7; }
#sn-cities .sn-map__card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #222; }
#sn-cities .sn-map__card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
#sn-cities .sn-map__card-body { display: grid; gap: 4px; padding: 14px 16px 16px; }
#sn-cities .sn-map__card-name { font-family: var(--c-display); font-size: 22px; line-height: 1.1; }
#sn-cities .sn-map__card-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; color: var(--c-green); }

@media (max-width: 1024px) {
	#sn-cities .sn-cities__panel { grid-template-columns: 1fr; }
	#sn-cities .sn-map { margin: 0 auto; }
}
@media (max-width: 900px) {
	#sn-cities { padding: 32px 0 40px; }
	#sn-cities .sn-cities__panel { gap: 28px; padding: 32px 20px; border-radius: 10px; }
	#sn-cities .sn-map { max-width: none; margin-bottom: 112px; }
	#sn-cities .sn-map__card { top: auto; left: 0; bottom: -12px; display: grid; grid-template-columns: 96px minmax(0, 1fr); width: 100%; transform: translateY(100%); }
	#sn-cities .sn-map__card.is-active { transform: translateY(100%); }
	#sn-cities .sn-map__link { display: none; }
	#sn-cities .sn-map__card-img { aspect-ratio: auto; height: 100%; min-height: 96px; }
	#sn-cities .sn-map__card-body { padding: 12px 14px; }
	#sn-cities .sn-map__card-name { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
	#sn-cities .sn-map__pin--live .sn-map__dot::after { animation: none; opacity: .5; }
	#sn-cities .sn-map__card, #sn-cities .sn-cities__link, #sn-cities .sn-cities__arrow, #sn-cities .sn-map__dot { transition: none; }
}

/* ---- City page: shared type for the new sections (BugHerd 775-780, refs byq.supply) ---- */
.sn-city {
	--sn-display: "Neue Haas Grotesk Display Pro:55 Roman", "GroteskNeue", sans-serif;
	--sn-ink: #0b0b0b;
	--sn-muted: #5d6060;
	--sn-line: #e4e4e2;
	--sn-tile: #f3f3f1;
	--sn-green: #63df9e;
}
.sn-city .sn-h2 { margin: 0; font-family: var(--sn-display); font-weight: 400; font-size: clamp(32px, 3.6vw, 50px); line-height: .92; text-transform: uppercase; color: var(--sn-ink); }
.sn-city .sn-city-head { max-width: 820px; margin-bottom: 48px; }
.sn-city .we-build-card h4 { line-height: 1.1; }   /* BugHerd 778: 30px type sat on a 24px line */

/* ---- Overview: heading left, lead and body right ---- */
.sn-city-intro { padding: 72px 0 64px; }
.sn-city-intro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; }
.sn-city-intro__head { grid-column: 1 / span 5; }
.sn-city-intro__body { grid-column: 7 / span 6; }
.sn-city-intro__body p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--sn-muted); }
.sn-city-intro__body p:first-child { margin-bottom: 24px; font-family: var(--sn-display); font-size: 24px; line-height: 1.35; color: var(--sn-ink); }
.sn-city-intro__lead { margin: 32px 0 0; font-family: var(--sn-display); font-size: 24px; line-height: 1.35; color: var(--sn-ink); }   /* lead under the heading (Sam, 21 Oct) */
.sn-city-intro__body { padding-top: 6px; }

/* ---- At a glance: who you reach beside the figure tiles ---- */
.sn-city-glance { padding: 24px 0 104px; }
.sn-city-glance__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: start; }
.sn-city-glance__text { grid-column: 8 / span 5; }
.sn-city-glance__text p { max-width: 460px; margin: 22px 0 0; font-size: 17px; line-height: 1.7; color: var(--sn-muted); }
.sn-city-glance__text .sn-city-glance__checked { font-size: 13px; color: #8a8a8a; }
.sn-city-glance__tiles { grid-column: 1 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.sn-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 230px; padding: 28px; border-radius: 10px; background: var(--sn-tile); color: var(--sn-ink); }
.sn-tile dt { font-size: 15px; line-height: 1.4; font-weight: 500; }
.sn-tile dt::first-letter { text-transform: uppercase; }
.sn-tile dd { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.sn-tile__num { font-family: var(--sn-display); font-size: clamp(44px, 4.6vw, 68px); line-height: .95; letter-spacing: -.02em; }
.sn-tile__src { font-size: 12px; line-height: 1.4; color: #7a7a7a; }
.sn-tile__src a { color: inherit; }
.sn-tile--dark { background: var(--sn-ink); color: #fff; }
.sn-tile--dark .sn-tile__num { color: var(--sn-green); }
.sn-tile--dark .sn-tile__src { color: #a9a9a9; }

/* ---- Precincts: image-top cards with the detail, then the smaller ones ---- */
.sn-city-precincts { padding: 104px 0; }

/* ---- Precincts: the site's listing card (featured-spaces-carousel__*), four across ---- */
.sn-precincts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; }
.sn-precinct { display: flex; flex-direction: column; min-width: 0; }
.sn-precinct__link { color: inherit; text-decoration: none; }
.sn-precinct .featured-spaces-carousel__media { height: auto; aspect-ratio: 4 / 3; }
.sn-precinct .featured-spaces-carousel__media img { display: block; }
.sn-precinct__lead { margin: 12px 0 8px; font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--sn-ink); }
.sn-precinct__detail { margin: 0; font-size: 14px; line-height: 1.6; color: var(--sn-muted); }
.sn-city .sn-precinct .featured-spaces-carousel__subtitle { font-family: var(--sn-display); font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: 0; }   /* BugHerd 799 */
.sn-precinct__cta { align-self: flex-start; margin-top: 14px; font-size: 14px; line-height: 1.4; color: #000; text-decoration: underline; text-underline-offset: 3px; }
.sn-precinct__featured { margin-top: 28px; }   /* BugHerd 800 */
.sn-precinct__label { margin: 0 0 10px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--sn-ink); }
.sn-precinct__near .featured-spaces-carousel__tag { text-decoration: none; }
@media (max-width: 1100px) { .sn-precincts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sn-precincts { grid-template-columns: 1fr; gap: 40px; } }

/* ---- When to run: calendar tiles on a soft panel ---- */
.sn-city-calendar { padding: 0 0 104px; }
.sn-calendar { padding: 64px 56px; border-radius: 10px; background: var(--sn-tile); }
.sn-calendar__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sn-calendar__tile { display: flex; flex-direction: column; min-height: 210px; margin: 0; padding: 26px 24px 28px; border-radius: 10px; background: #fff; }
.sn-calendar__tile::before { content: none; }
.sn-calendar__when { margin-bottom: auto; padding-bottom: 36px; font-family: var(--sn-display); font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--sn-ink); }
.sn-city .sn-calendar__event { margin: 0 0 6px; font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--sn-ink); }
.sn-calendar__tile p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sn-muted); }
.sn-calendar__note { margin: 28px 0 0; font-size: 15px; line-height: 1.6; color: var(--sn-muted); }

@media (max-width: 900px) {
	.sn-city-intro { padding: 48px 0 40px; }
	.sn-city-intro__grid,
	.sn-city-glance__grid { grid-template-columns: 1fr; gap: 24px; }
	.sn-city-intro__head, .sn-city-intro__body, .sn-city-glance__text, .sn-city-glance__tiles { grid-column: 1 / -1; }
	.sn-city-glance { padding: 8px 0 64px; }
	.sn-city-precincts { padding: 64px 0; }
	.sn-city .sn-city-head { margin-bottom: 32px; }
	.sn-calendar { padding: 36px 20px; border-radius: 10px; }
	.sn-city-calendar { padding-bottom: 64px; }
}
@media (max-width: 600px) {
	.sn-tile { min-height: 180px; padding: 20px; gap: 24px; }
	.sn-tile__num { font-size: 34px; white-space: nowrap; }
	.sn-city-intro__body p:first-child,
	.sn-city-intro__lead { font-size: 20px; }
}

/* ---- City page: listings carousel on a grey panel, "See all" inside it (BugHerd 797) ---- */
.sn-city .sn-city-spaces { padding-bottom: 64px; }
.sn-city .sn-city-spaces > .container > .wrapper { padding: 56px 56px 48px; border-radius: 10px; background: var(--sn-tile); }
.sn-city .sn-city-spaces .featured-spaces-carousel__tag { background: #fff; }
.sn-city-more { display: flex; justify-content: flex-end; margin-top: 32px; }
@media (max-width: 900px) { .sn-city .sn-city-spaces > .container > .wrapper { padding: 32px 20px; } }
.sn-city-more a { font-size: 16px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---- City page: sourcing panel, for cities with too few listings ---- */
.sn-city-source { padding: 24px 0 56px; }
.sn-city-source .sn-source { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; padding: 40px; border-radius: 10px; background: var(--sn-tile); }
.sn-city-source h2 { margin: 0 0 14px; }
.sn-city-source p { max-width: 440px; margin: 0 0 22px; font-size: 16px; line-height: 1.6; }
.sn-city-source ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: sn-step; }
.sn-city-source li { counter-increment: sn-step; padding: 20px; border-radius: 10px; background: #fff; font-size: 15px; line-height: 1.5; }
.sn-city-source li::before { content: counter(sn-step); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 14px; border-radius: 50%; background: #111; color: #fff; font-size: 15px; font-weight: 600; }
.sn-city-source li strong { display: block; margin-bottom: 4px; font-size: 17px; }
.sn-city-source .sn-source__spaces { grid-column: 1 / -1; }

@media (max-width: 900px) {
	.sn-city-source .sn-source { grid-template-columns: 1fr; gap: 24px; padding: 28px 20px; }
	.sn-city-source ol { grid-template-columns: 1fr; }
}