:root {
	--accent: #e84a5a; /* warm coral-red — friendly, not stop-sign */
	--ink: #1a1a1a;
	--muted: #6b7280;
	--bg: #ffffff;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ink);
	background: var(--bg);
	line-height: 1.5;
}

.site-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 1rem 2rem;
	border-bottom: 1px solid #eee;
}
.site-nav { grid-column: 2; justify-self: center; position: relative; }
.nav-toggle { display: none; } /* desktop: links shown inline, no hamburger */
.nav-links { display: flex; align-items: center; }

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.4rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--ink);
}
.brand span { color: var(--accent); }
.brand-logo { width: 28px; height: 28px; display: block; }

.nav-links a {
	margin: 0 0.75rem;
	text-decoration: none;
	color: var(--muted);
}
.nav-links a:hover { color: var(--accent); }
.nav-links a.nav-active { color: var(--ink); font-weight: 600; }

/* Location picker chip (col 3, right). Native <details> disclosure — no JS. */
.loc-picker { grid-column: 3; justify-self: end; position: relative; }
.loc-picker summary {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	font-size: 0.9rem;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}
.loc-picker summary::-webkit-details-marker { display: none; }
.loc-picker summary:hover { border-color: var(--accent); }
.loc-pin { width: 15px; height: 15px; color: var(--accent); }
.loc-caret { width: 14px; height: 14px; color: var(--muted); transition: transform 0.15s ease; }
.loc-picker[open] .loc-caret { transform: rotate(180deg); }

/* Mobile: collapse the nav links into a hamburger menu placed to the right of the
   location chip (instead of stacking the links under the logo). */
@media (max-width: 720px) {
	.site-header {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.9rem 1.1rem;
	}
	.site-header .loc-picker { margin-left: auto; } /* push the HEADER chip + hamburger right (not the empty-state picker) */
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.4rem;
		border: 1px solid #e5e7eb;
		border-radius: 10px;
		color: var(--ink);
		cursor: pointer;
	}
	.nav-toggle:hover { border-color: var(--accent); }
	/* the links become a dropdown panel anchored under the hamburger */
	.nav-links {
		display: none;
		position: absolute;
		right: 0;
		top: calc(100% + 0.5rem);
		flex-direction: column;
		align-items: stretch;
		min-width: 160px;
		background: #fff;
		border: 1px solid #e5e7eb;
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
		padding: 0.4rem;
		z-index: 50;
	}
	.nav-toggle-cb:checked ~ .nav-links { display: flex; }
	.nav-links a { margin: 0; padding: 0.55rem 0.75rem; border-radius: 8px; color: var(--ink); }
	.nav-links a:hover { background: #f5f5f5; color: var(--ink); }
}

.loc-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 0.4rem);
	width: 240px;
	max-height: 360px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
	padding: 0.35rem;
	z-index: 20;
}
.loc-opt {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.7rem;
	border-radius: 7px;
	font-size: 0.9rem;
	color: var(--ink);
	text-decoration: none;
}
.loc-opt span { font-size: 0.78rem; color: var(--muted); }
.loc-opt:hover { background: #f4f4f5; }
.loc-opt.loc-active { color: var(--accent); font-weight: 600; }
.loc-menu__sep { height: 1px; background: #eee; margin: 0.35rem 0.3rem; }

.loc-search {
	width: 100%;
	box-sizing: border-box;
	padding: 0.5rem 0.7rem;
	margin-bottom: 0.35rem;
	border: 1px solid #e5e7eb;
	border-radius: 7px;
	font-size: 0.9rem;
	outline: none;
}
.loc-search:focus { border-color: var(--accent); }
.loc-cities { display: flex; flex-direction: column; }
.loc-results { display: flex; flex-direction: column; }
/* Live search-result row: a button styled like a quick-pick, name over a muted
   "Region, Country" subtitle so same-name cities are easy to tell apart. */
.loc-result {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	font: inherit;
	cursor: pointer;
}
.loc-result span { font-size: 0.9rem; color: var(--ink); }
.loc-result .loc-sub { font-size: 0.78rem; color: var(--muted); }
.loc-empty { margin: 0.5rem 0.7rem; font-size: 0.85rem; color: var(--muted); }

main { max-width: 960px; margin: 0 auto; padding: 2rem; }

/* Fluid hero size: 2.25rem on tablet/desktop, scaling down on narrow phones so
   "<Dance> events nearby" (and the studios heading) fits on one line instead of
   wrapping. clamp floors it at 1.55rem on the tiniest screens. */
.hero h1 { font-size: clamp(1.55rem, 7vw, 2.25rem); margin-bottom: 0.5rem; }
.hero p { color: var(--muted); font-size: 1.1rem; }

.placeholder {
	margin-top: 2rem;
	padding: 2rem;
	border: 1px dashed #ddd;
	border-radius: 8px;
	text-align: center;
	color: var(--muted);
}
/* Empty-state with an inline location picker (no events/studios near here → let
   the viewer change city right where they're looking). */
.empty-loc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}
.empty-loc p { margin: 0; }
.empty-loc__hint { font-size: 0.85rem; }
/* The inline picker isn't in the header grid; drop the grid placement and let its
   dropdown open centered under the chip. */
.empty-loc .loc-picker { grid-column: auto; justify-self: auto; }
.empty-loc .loc-menu { right: auto; left: 50%; transform: translateX(-50%); }

/* "Other dances nearby" — surfaced beneath an empty result so a dead-end becomes
   discovery (the selected dance has nothing here, but others do). Visually
   secondary to the empty box above it: muted heading, compact cards. */
.other-dances { margin-top: 2.5rem; }
.other-dances__heading {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--muted);
	text-align: center;
	margin: 0 0 1.25rem;
}
.other-dance-group { margin-bottom: 1.5rem; }
.other-dance-group__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
}
.other-dance-group__name {
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.other-dance-group__all { font-size: 0.82rem; color: var(--accent); white-space: nowrap; }
.other-dance-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.other-dance-card a {
	display: grid;
	gap: 0.15rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid #eee;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.other-dance-card a:hover { border-color: var(--accent); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05); }
.other-dance-card__when { font-size: 0.8rem; color: var(--muted); }
.other-dance-card__title { font-weight: 600; }
.other-dance-card__where { font-size: 0.82rem; color: var(--muted); }

/* Dance filter pills. The home dance is always-on and non-clickable; the other
   two toggle extra dances into the result set. */
.dance-filter {
	display: flex;
	gap: 0.6rem;
	margin: 1.75rem 0 0;
	/* One row, always — never break the pills onto a second row (the iPhone-width
	   case). If a very narrow screen still can't fit them, scroll horizontally
	   instead of wrapping. Pills keep their exact size (flex: 0 0 auto below). */
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none; /* Firefox: hide the scrollbar */
}
.dance-filter::-webkit-scrollbar { display: none; } /* WebKit: hide the scrollbar */
.dance-pill {
	display: inline-flex;
	flex: 0 0 auto; /* keep each pill's natural size; never shrink to fit the row */
	align-items: center;
	padding: 0.4rem 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--muted);
	background: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.dance-pill:hover { border-color: var(--accent); color: var(--accent); }
.dance-pill--active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.dance-pill--active:hover { color: #fff; }
/* No events/studios for this dance in the current region: muted, non-clickable,
   shows a "No <dance> events yet" tooltip on hover (title attr). */
.dance-pill--disabled {
	color: #c4c4c4;
	background: #fafafa;
	border-color: #efefef;
	border-style: dashed;
	cursor: not-allowed;
}
.dance-pill--disabled:hover { border-color: #efefef; color: #c4c4c4; }
/* Four pills at full desktop size are ~40px too wide for a ~390px iPhone, so the
   4th would peek/scroll past the edge. On phones only, scale the pills down a
   touch — tighter gap + padding + a hair smaller text — so all four fit fully on
   one row. Tablet/desktop (above this breakpoint) keep the full size. */
@media (max-width: 400px) {
	.dance-filter { gap: 0.3rem; }
	.dance-pill { padding: 0.4rem 0.72rem; font-size: 0.85rem; }
}

/* Studios / classes directory */
.studio-list {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}
.studio-card {
	border: 1px solid #eee;
	border-radius: 10px;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.studio-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	border-color: var(--accent);
}
/* The whole compact card is the link to the detail page. */
.studio-card__link {
	display: block;
	padding: 1.25rem 1.5rem;
	text-decoration: none;
	color: inherit;
}
.studio-name { margin: 0; font-size: 1.25rem; }
.studio-where { margin: 0.15rem 0 0; color: var(--muted); font-weight: 500; }
.studio-summary { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.9rem; }
.studio-desc { margin: 0.6rem 0 1rem; color: var(--muted); }

.class-detail__heading {
	margin: 1.5rem 0 0.25rem;
	font-size: 1rem;
	font-weight: 600;
}

.class-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.class-table td {
	padding: 0.55rem 0.5rem;
	border-top: 1px solid #f1f1f2;
	vertical-align: top;
}
.class-table tr:first-child td { border-top: none; }

.class-day { white-space: nowrap; font-weight: 600; width: 1%; }
.class-day span { display: block; font-weight: 400; color: var(--muted); font-size: 0.82rem; }
.class-name { font-weight: 500; color: var(--ink); }
.class-level {
	display: inline-block;
	margin-left: 0.35rem;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, #fff);
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
	vertical-align: middle;
}
.class-instructor { color: var(--muted); }
.class-price { text-align: right; white-space: nowrap; color: var(--ink); font-weight: 500; }

.studio-card__footer { margin-top: 1rem; }

/* Event list */
.event-list {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

/* Date divider between local-day runs in the list (the near sort groups by day,
   so this makes a day rollover obvious instead of looking like the distance
   ordering broke). */
.event-day-sep {
	list-style: none;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--ink);
	padding-bottom: 0.4rem;
	border-bottom: 1px solid #eee;
	margin-top: 0.75rem;
}
.event-day-sep:first-child { margin-top: 0; }

.event-card {
	position: relative; /* positioning context for the stretched title link */
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
	transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.event-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	border-color: var(--accent);
	cursor: pointer;
}

/* Stretched link: the title anchor's ::after overlays the whole card so any
   non-interactive area navigates to the detail page (no JS). The host/source
   footer is raised above it via z-index so those links stay clickable. */
.event-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	z-index: 1;
}

.event-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

/* Hosts shout-out (platform icon + handle), bottom-left of the card footer.
   Rows are left-aligned so icons stay in a fixed column regardless of handle
   length. */
.event-hosts {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	flex: 1;
	min-width: 0;
}
/* Hosts wrap into a pill grid (matching the detail page) instead of one per
   line, so a long host list uses the card's width before colliding with the
   Sources column. */
.event-hosts__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.event-hosts__label { color: #9ca3af; }
.event-hosts__label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #9ca3af;
}
.host-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--muted);
	font-size: 0.85rem;
	text-decoration: none;
	transition: color 0.12s ease;
}
.host-link:hover { color: var(--accent); }
.host-link svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }

/* Card footer: hosts on the left, sources on the right. align-items:flex-end so
   a multi-row hosts column keeps the sources row aligned to the bottom. */
.event-card__footer {
	position: relative; /* sits above the stretched title link */
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid #f1f1f2;
}

/* Source links (Instagram, ticketing, etc.) — still used on the /classes
   cards and the detail page's original-post embed aside. The events list card
   no longer shows a Sources row; details live on the event page. */
.event-sources {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.event-sources__label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #9ca3af;
}
.source-link {
	display: inline-flex;
	color: var(--muted);
	transition: color 0.12s ease;
}
.source-link:hover { color: var(--accent); }
.source-link svg { width: 18px; height: 18px; display: block; }

.event-type {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 12%, #fff);
	color: var(--accent);
}
.event-type--festival,
.event-type--congress { background: #fdeee8; color: #c2612f; }
.event-type--workshop { background: #eef1fd; color: #4a5bd0; }

.event-when { font-size: 0.85rem; color: var(--muted); }

/* Recurrence cadence pill ("Every Friday") next to the rolled-forward date, so a
   weekly social reads as recurring rather than a one-off on that date. */
.event-recurs {
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 10%, #fff);
	color: var(--accent);
	white-space: nowrap;
}

/* Status badge — a cancelled/postponed event stays listed in place, clearly
   marked, so someone who saw it understands it's off (rather than it vanishing). */
.event-status {
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
}
.event-status--cancelled { background: #fde8e8; color: #c0341d; }
.event-status--postponed { background: #fdf3e0; color: #b5780f; }

.event-title { margin: 0.25rem 0; font-size: 1.2rem; }
.event-title a { color: var(--ink); text-decoration: none; }
.event-title a:hover { color: var(--accent); }

.event-where { margin: 0.1rem 0; color: var(--ink); font-weight: 500; }

.event-lineup {
	margin: 0.3rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	font-size: 0.85rem;
	color: var(--muted);
}
.event-host { font-weight: 500; }
.event-djs::before { content: "🎧 "; }

.event-desc { margin: 0.5rem 0; color: var(--muted); }

.event-meta {
	display: flex;
	gap: 1rem;
	font-size: 0.85rem;
	color: var(--muted);
	margin-top: 0.5rem;
}
.event-price { font-weight: 600; color: var(--ink); }

.event-tags { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag {
	font-size: 0.72rem;
	color: var(--muted);
	background: #f4f4f5;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
}
.tag--free {
	color: #15803d;
	background: #dcfce7;
	font-weight: 600;
}
.event-badges { margin: 0.25rem 0 0.5rem; }

/* Event detail page */
.event-detail__back { margin: 0 0 1rem; }
.event-detail__back a { color: var(--muted); text-decoration: none; }
.event-detail__back a:hover { color: var(--accent); }

.event-detail__title { font-size: 2rem; margin: 0.5rem 0 0.25rem; }
.event-detail__where { color: var(--ink); font-weight: 500; margin: 0.25rem 0 1rem; }
.event-detail__desc { font-size: 1.05rem; color: #333; margin: 1rem 0; }

.event-detail__facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4rem 1.5rem;
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid #eee;
	border-radius: 10px;
}
.event-detail__facts dt { font-weight: 600; color: var(--muted); }
.event-detail__facts dd { margin: 0; }

/* Dance pills in the facts list — capitalized for display (stored values stay
   lowercase as query keys). Neutral grey, not dance-colored. */
.dance-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dance-tag {
	text-transform: capitalize;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--ink);
	background: #f1f1f3;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
}

/* Reserve button — shown only when a non-Instagram reservation/booking source
   exists; the IG post itself is embedded, not a reservation link. Sleek black. */
.reserve-btn {
	display: inline-block;
	margin-top: 1.5rem;
	padding: 0.65rem 1.5rem;
	background: #111;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
	transition: background 0.15s ease, transform 0.05s ease;
}
.reserve-btn:hover { background: #000; }

/* Source link under each post embed — visible escape hatch when the embed
   itself fails to render (removed/private posts). */
.embed-source-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.35rem 0 1rem;
	font-size: 0.85rem;
	color: #555;
	text-decoration: none;
}
.embed-source-link:hover { color: #000; text-decoration: underline; }
.embed-source-link svg { width: 16px; height: 16px; }
.reserve-btn:active { transform: translateY(1px); }

.event-detail__sources { margin-top: 1.5rem; }
.event-detail__sources-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}
.source-link--labeled {
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: 0.9rem;
	text-transform: capitalize;
	text-decoration: none;
}
.source-link--labeled:hover { border-color: var(--accent); }

/* Hosts on the detail page */
.event-detail__hosts { margin: 1.25rem 0; }
.event-detail__hosts-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}
.host-link--labeled {
	padding: 0.4rem 0.75rem;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: 0.9rem;
}
.host-link--labeled:hover { border-color: var(--accent); }
.host-link--labeled svg { width: 18px; height: 18px; }
/* A host with no profile link: plain text, not a clickable-looking chip. */
.host-link--plain, .host-link--plain:hover { border-color: transparent; padding-left: 0; padding-right: 0; color: var(--muted); cursor: default; }

/* Pagination */
.pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 2rem 0 0;
}
.pager__btn {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
}
.pager__btn:hover { border-color: var(--accent); color: var(--accent); }
.pager__btn--off { color: #c4c7cc; cursor: default; }
.pager__btn--off:hover { border-color: #e5e7eb; color: #c4c7cc; }
.pager__status { font-size: 0.9rem; color: var(--muted); }

.site-footer {
	border-top: 1px solid #eee;
	padding: 1.5rem 2rem;
	color: var(--muted);
	font-size: 0.9rem;
}
.site-footer a { color: var(--ink); text-decoration: none; font-weight: 500; }
.site-footer a:hover { color: var(--accent); }
.site-footer__tagline { font-size: 0.85rem; opacity: 0.8; margin-top: 0.15rem; }

/* Event detail: two columns (details left, original-post embed right) when an
   embed is present and there's room; stacks on narrow screens. */
.event-detail__cols { display: block; }
.event-detail__main { min-width: 0; }
.event-detail__embeds { margin-top: 1.5rem; }
.event-detail__embeds .event-sources__label { display: block; margin-bottom: 0.75rem; }
/* Instagram's embed.js replaces the blockquote with an iframe sized to the real
   content — so NO fixed height (that's what caused clipping). We only constrain
   width; embed.js handles the rest. !important overrides embed.js's inline
   min/max-width so it fits our column. */
.event-embed {
	width: 100% !important;
	max-width: 400px !important;
	min-width: 0 !important;
	margin: 0 auto !important;
}

/* We can't style inside Instagram's cross-origin iframe, so to drop the bottom
   strip (the like/comment/share actions + the "N likes" count + the comment
   input) we crop the whole embed: the wrapper has overflow:hidden and the
   embedded iframe gets a negative bottom margin, which shrinks the wrapper's
   height and clips that bottom section. We hide likes deliberately — we don't
   want event popularity to bias which events people choose. Ends cleanly at
   "View more on Instagram". ~115px ≈ actions + likes + comment rows. */
.event-embed-clip {
	overflow: hidden;
	max-width: 400px;
	margin: 0 auto 1rem;
}
.event-embed-clip .instagram-media,
.event-embed-clip iframe {
	margin-bottom: -108px !important;
}

/* Facebook embeds use the JS SDK (.fb-post), which auto-sizes its iframe to the
   post content — so unlike Instagram we DON'T crop it (the -108px margin above was
   squashing the FB iframe into a thin strip). Exempt the FB wrapper from the crop
   and just width-constrain it to the column. */
.event-embed-clip--fb { overflow: visible; max-width: 400px; }
.event-embed-clip--fb iframe { margin-bottom: 0 !important; }
.event-embed-clip--fb .fb-post,
.event-embed-clip--fb .fb-post span,
.event-embed-clip--fb .fb-post iframe { width: 100% !important; max-width: 400px !important; }

/* Widen the page and go side-by-side only when an embed exists and the viewport
   is wide enough for both columns. */
@media (min-width: 920px) {
	main:has(.event-detail--has-embed) { max-width: 1040px; }
	.event-detail--has-embed .event-detail__cols {
		display: grid;
		grid-template-columns: 1fr 400px;
		gap: 3rem;
		align-items: start;
	}
	.event-detail--has-embed .event-detail__embeds { margin-top: 0; }
}

/* Contact page (centered) */
.contact { max-width: 640px; margin: 3rem auto; padding: 0 2rem; color: var(--ink); text-align: center; }
.contact h1 { font-size: 2.25rem; margin-bottom: 1rem; }
.contact p { font-size: 1.05rem; line-height: 1.6; }
.contact__email { position: relative; display: inline-block; margin-top: 1rem; font-size: 1.6rem; font-weight: 700; }
.contact__email a { color: var(--accent); text-decoration: none; cursor: pointer; }
.contact__email a:hover { text-decoration: underline; }
/* "Copied!" popover (desktop click-to-copy) — floats above the email, fades in/out */
.copied-toast {
	position: absolute; left: 50%; top: -2.4rem; transform: translateX(-50%) translateY(6px);
	background: #16a34a; color: #fff; font-size: 0.8rem; font-weight: 600;
	padding: 0.25rem 0.65rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.15);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.copied-toast::after {
	content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
	border: 4px solid transparent; border-top-color: #16a34a;
}
.copied-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Gear — curated affiliate picks (Fuego shoes, etc). Card grid; copy hardcoded. */
.gear { max-width: 840px; margin: 2.5rem auto; padding: 0 2rem; }
.gear h1 { margin-bottom: 0.5rem; }
.gear__intro { color: var(--muted); font-size: 1.05rem; line-height: 1.6; margin: 0 0 2rem; }
.gear__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25rem;
}
/* A lone card shouldn't stretch full-width or sit stuck on the left: fix its width
   and center it. With a single product the whole section reads as a centered
   "featured pick" (heading/intro/card/disclosure all centered) so the card isn't
   marooned next to a left-aligned heading; the card's own text stays left for
   readability. */
.gear__grid--single {
	grid-template-columns: minmax(280px, 400px);
	justify-content: center;
}
.gear--single { text-align: center; }
.gear--single .gear-card { text-align: left; }
.gear-card {
	border: 1px solid var(--border, #e5e7eb);
	border-radius: 12px;
	padding: 1.5rem;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.gear-card__name { margin: 0 0 0.5rem; font-size: 1.3rem; }
.gear-card__desc { margin: 0 0 0.85rem; color: var(--muted); line-height: 1.55; }
.gear-card__code { margin: 0; font-size: 0.95rem; }
.gear-card__code strong {
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, #fff);
	padding: 0.1rem 0.4rem; border-radius: 6px; letter-spacing: 0.02em;
}
.gear-card .reserve-btn { margin-top: 1rem; }
.gear__disclosure { margin: 2rem 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }

/* listing disclaimer under the dance pills */
.source-note {
	margin: 2px 0 18px;
	font-size: 0.82rem;
	color: var(--muted, #8a8a8a);
}