/* ==========================================================================
   THE NEXUS — Single Event Template
   Restyles Eventin's global single-event page (post type `etn`) to match
   the homepage/About design system. Every rule is scoped to `.single-etn`
   (WordPress's own body class for this post type) so nothing here leaks
   onto any other page. Reads tokens from tokens.css (loaded site-wide by
   the nexus-design-tokens mu-plugin) — no hardcoded colors/type/spacing.
   ========================================================================== */

/* ---------- base ---------- */
/* !important on the base background is deliberate: confirmed live (via
   getComputedStyle + full CSSOM cascade inspection) that something on this
   page resets `body`'s background-color to transparent after this rule
   applies despite this selector's higher specificity than Astra's own
   `body{background:#fff}` — likely a dynamically injected style from the
   React ticket widget's CSS-in-JS runtime, not something traceable to a
   static stylesheet rule. Without this, the browser's default white canvas
   shows through as a stray white band wherever page content doesn't fully
   cover the viewport (confirmed live: a white gap above the footer). This
   is the one foundational rule on the page it's worth being unconditional
   about; every other override in this file wins on specificity/order alone. */
html:has(body.single-etn) {
	overflow-x: hidden;
	background: var(--color-bg) !important;
}
body.single-etn {
	background: var(--color-bg) !important;
	color: var(--color-text-secondary);
	font-family: var(--font-body);
}
body.single-etn * {
	box-sizing: border-box;
}
body.single-etn img {
	max-width: 100%;
}
/* Astra wraps page content in a boxed .ast-container — neutralize it here so
   the full-bleed hero and this template's own .nx-container rhythm aren't
   fighting a second, narrower wrapper. Every other page keeps Astra's boxed
   layout untouched (same technique nexus-homepage.css uses). */
body.single-etn .ast-container {
	max-width: none;
	padding-inline: 0;
	margin-inline: 0;
	width: 100%;
}
body.single-etn :focus-visible {
	outline: 2px solid var(--color-gold-500);
	outline-offset: 3px;
	box-shadow: var(--glow-focus);
	border-radius: var(--radius-xs);
}

.single-etn .nx-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-margin);
}
.single-etn .nx-eyebrow {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: var(--text-h6-overline);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gold-500);
	text-decoration: none;
	margin: 0 0 var(--space-4);
}
.single-etn .nx-h2 {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-h2);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--color-text-primary);
}
.single-etn .nx-section-head {
	margin-bottom: var(--space-9);
}
.single-etn .nx-icon svg {
	width: var(--icon-md);
	height: var(--icon-md);
	display: block;
}

/* ---------- buttons (same spec as the homepage system) ---------- */
.single-etn .nx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-body-s);
	letter-spacing: 0.01em;
	padding: var(--space-4) var(--space-7);
	border-radius: var(--radius-sm);
	text-decoration: none;
	cursor: pointer;
	min-height: 44px;
	transition: background-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard),
		transform var(--duration-instant) var(--ease-standard);
}
.single-etn .nx-btn:active { transform: scale(0.98); }
.single-etn .nx-btn--primary { background: var(--color-gold-500); color: var(--color-void); box-shadow: var(--glow-gold-md); }
.single-etn .nx-btn--primary:hover { background: var(--color-gold-300); color: var(--color-void); }
.single-etn .nx-btn--primary:active { background: var(--color-gold-700); }
.single-etn .nx-btn--ghost { background: transparent; color: var(--color-text-primary); border: var(--stroke-default) solid var(--color-border-default); }
.single-etn .nx-btn--ghost:hover { border-color: var(--color-gold-500); color: var(--color-gold-300); }
.single-etn .nx-btn--sm { padding: var(--space-3) var(--space-5); font-size: var(--text-caption); min-height: 40px; }

/* ============================================================
   HERO
   ============================================================ */
.nx-event-hero {
	position: relative;
	min-height: 78vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--color-void);
	padding-block: var(--space-14) var(--space-13);
}
.nx-event-hero__media { position: absolute; inset: 0; z-index: 0; }
.nx-event-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.nx-event-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.78) 42%, var(--color-bg) 100%);
}
/* Banner photography routinely has the event title, venue, and sponsor
   logos already printed into the image (confirmed live: Rook & Roll's
   banner reads "MALAD SOCIAL 400064" baked in), which then collides with
   this same content block's own HTML title/date/venue — worst on mobile,
   where object-fit: cover crops tighter and the baked text lands closer to
   center. There's no text-free crop to swap in, so this darkens the scrim
   specifically over the content zone on narrow viewports rather than
   relying on the desktop-tuned gradient above to carry both sizes. */
@media (max-width: 767px) {
	.nx-event-hero__scrim {
		background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.94) 32%, var(--color-bg) 100%);
	}
}
/* Events without a featured image (confirmed live: several demo events have
   none) otherwise leave `min-height: 78vh` as a near-empty black void above
   the title — `align-items: flex-end` was designed around a photo anchoring
   the bottom third, and with no photo there's nothing to anchor. Drop to a
   content-driven height, top-align instead, and use the token system's own
   `--gradient-aurora` (§02 "rare full-bleed background glow behind a section
   headline" — this is exactly that case) so it reads as a deliberate moody
   backdrop rather than a missing image. */
.nx-event-hero--no-media {
	min-height: 0;
	align-items: flex-start;
	background: var(--gradient-aurora), var(--color-void);
	padding-block: calc(112px + var(--space-11)) var(--space-13);
}
@media (max-width: 767px) {
	.nx-event-hero--no-media { padding-block: calc(112px + var(--space-9)) var(--space-11); }
}
.nx-event-hero__content { position: relative; z-index: 2; width: 100%; }
.nx-event-hero__eyebrow { border-bottom: none; }
.nx-event-hero__title {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--text-display-l);
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--color-text-primary);
	margin: var(--space-4) 0 var(--space-7);
	max-width: 18ch;
	text-wrap: balance;
	/* Guarantees legibility against a banner photo's own baked-in text
	   regardless of scrim strength — see .nx-event-hero__scrim above. */
	text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.nx-event-hero__title .line { overflow: hidden; display: block; }
.nx-event-hero__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-7);
	padding: 0;
	margin: 0 0 var(--space-8);
}
.nx-event-hero__meta-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--text-body-s);
	color: var(--color-text-secondary);
}
.nx-event-hero__meta-item .nx-icon { color: var(--color-gold-500); }
.nx-event-hero__meta-item--price { color: var(--color-gold-500); font-weight: 600; letter-spacing: 0.02em; }

/* Anchor offset for the hero CTA's #nx-event-tickets jump target — same
   128px clearance as the sticky ticket card's own `top` above, so the
   fixed 112px `.nx-header` never covers the landing point either way. */
.nx-anchor-offset { display: block; position: relative; top: calc(var(--space-13) * -1); visibility: hidden; }

/* ---------- hide the plugin's default inline title/image (now in hero) --- */
.single-etn .etn-event-title-wrap,
.single-etn .etn-single-event-media {
	display: none;
}

/* ============================================================
   LAYOUT — container / two-column row
   ============================================================ */
.single-etn .etn-event-single-wrap {
	background: var(--color-bg);
	padding-block: var(--space-13) var(--space-14);
}
/* Eventin's own stylesheet (build/css/event-manager-public-styles.css) sets
   `.theme-astra .etn-sidebar .etn-widget{background:#fff}` and
   `.theme-astra .etn-event-single-wrap .etn-event-single-content-wrap{background:#fff}`
   — a white "card" look baked in for its default light theme, at 3-class
   specificity (0,3,0). `.etn-widget` is the base class every still-active
   default sidebar block uses (add-to-calendar here; schedule/FAQ/recurring-
   ticket further down), and `.etn-event-single-content-wrap` wraps the
   title/image/content column — both need neutralizing at matching or higher
   specificity (a plain `.single-etn .etn-widget` two-class override loses to
   their three-class one) or every one of those sections shows as a white
   box against this page's dark background. */
.single-etn .etn-widget,
.single-etn .etn-event-single-wrap .etn-event-single-content-wrap {
	background: transparent;
	box-shadow: none;
	padding: 0;
	border: none;
	margin-bottom: 0;
}
.single-etn .etn-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-margin);
}
/* ---------- single stacked column (was a two-column row + sidebar) ----------
   The page now reads Time & Location → About the event → Tickets → Map as
   one linear column, so the old 1320px-wide .etn-container is too wide for
   comfortable reading/interaction here. 720px matches the width other
   single-column article-plus-card layouts settle on, and keeps the ticket
   card and meta card from stretching edge-to-edge on large screens. */
.single-etn .etn-single-column {
	max-width: 720px;
	margin-inline: auto;
}
.single-etn .nx-event-section { margin-bottom: var(--space-11); }
.single-etn .nx-event-section:last-child { margin-bottom: 0; }

/* ============================================================
   EVENT DESCRIPTION — the_content()
   ============================================================ */
.single-etn .etn-event-content-body {
	font-family: var(--font-body);
	font-size: var(--text-body-l);
	line-height: 1.6;
	color: var(--color-text-secondary);
	max-width: 68ch;
}
.single-etn .etn-event-content-body h1,
.single-etn .etn-event-content-body h2,
.single-etn .etn-event-content-body h3,
.single-etn .etn-event-content-body h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-text-primary);
	line-height: 1.2;
	margin: var(--space-9) 0 var(--space-5);
}
.single-etn .etn-event-content-body h2 { font-size: var(--text-h2); }
.single-etn .etn-event-content-body h3 { font-size: var(--text-h3); }
.single-etn .etn-event-content-body h4 { font-size: var(--text-h4); }
.single-etn .etn-event-content-body p { margin: 0 0 var(--space-5); }
.single-etn .etn-event-content-body ul,
.single-etn .etn-event-content-body ol {
	margin: 0 0 var(--space-5);
	padding-left: var(--space-6);
}
.single-etn .etn-event-content-body li { margin-bottom: var(--space-2); }
.single-etn .etn-event-content-body a { color: var(--color-gold-500); text-decoration: underline; text-underline-offset: 2px; }
.single-etn .etn-event-content-body a:hover { color: var(--color-gold-300); }
.single-etn .etn-event-content-body blockquote {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--text-h4);
	line-height: 1.4;
	color: var(--color-text-primary);
	border-left: var(--stroke-bold) solid var(--color-gold-500);
	padding-left: var(--space-6);
	margin: var(--space-8) 0;
}
.single-etn .etn-event-content-body img {
	border-radius: var(--radius-md);
	margin-block: var(--space-7);
}
.single-etn .etn-event-content-body iframe,
.single-etn .etn-event-content-body video {
	max-width: 100%;
	border-radius: var(--radius-md);
	margin-block: var(--space-7);
}

/* ---------- tags ---------- */
.single-etn .nx-event-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-8);
}
.single-etn .nx-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-xs);
	border: var(--stroke-hairline) solid var(--color-border-default);
	color: var(--color-text-secondary);
	font-size: var(--text-caption);
	text-decoration: none;
	transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.single-etn .nx-chip .nx-icon svg { width: var(--icon-sm); height: var(--icon-sm); }
.single-etn .nx-chip:hover { border-color: var(--color-gold-500); color: var(--color-gold-300); }

/* ============================================================
   SIDEBAR — schedule meta card
   ============================================================ */
.single-etn .nx-event-meta-card {
	background: var(--color-surface-2);
	border: var(--stroke-hairline) solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	margin-bottom: var(--space-6);
}
.single-etn .nx-event-meta-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.single-etn .nx-event-meta-card__row { display: flex; gap: var(--space-3); align-items: flex-start; }
.single-etn .nx-event-meta-card__row .nx-icon { color: var(--color-gold-500); flex-shrink: 0; margin-top: 2px; }
.single-etn .nx-event-meta-card__label { display: block; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 2px; }
.single-etn .nx-event-meta-card__value { display: block; font-size: var(--text-body); color: var(--color-text-primary); }
.single-etn .nx-event-meta-card__tz { color: var(--color-text-muted); font-size: var(--text-caption); }

/* ============================================================
   TICKET CARD — restyle only, React root untouched
   ============================================================ */
/* No longer `position: sticky` / `order: -1` — those existed to pin the
   ticket card above a taller sibling column in the old two-column sidebar,
   which no longer exists now the page is a single stacked column. Sticky
   positioning inside a short, standalone section has no meaningful sibling
   content to stay pinned against, so it's dropped along with the flex
   ordering that used to move this ahead of the meta card. */
.single-etn .etn-single-event-ticket-wrap {
	background: var(--color-surface-2);
	border: var(--stroke-hairline) solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-7);
	box-shadow: var(--shadow-3);
}

/* ============================================================
   MAP — only renders when an event has _etn_map_embed_url set
   (see nexus-events/includes/map-metabox.php)
   ============================================================ */
.single-etn .nx-event-map__frame {
	border-radius: var(--radius-md);
	overflow: hidden;
	border: var(--stroke-hairline) solid var(--color-border-subtle);
}
.single-etn .nx-event-map__frame iframe {
	display: block;
	width: 100%;
}
@media (max-width: 767px) {
	.single-etn .nx-event-map__frame iframe { height: 300px; }
}

/* Eventin injects a SEPARATE inline stylesheet (handle `etn-lazy-skeleton`,
   added via wp_add_inline_style() from Helper::enable_lazy_ticket_loader())
   just for this skeleton placeholder — `.etn-ticket-placeholder{padding:20px;
   border:1px solid #eef0f4;border-radius:10px;background:#fff}` — separate
   from etn-public-css entirely, so it isn't covered by the dependency fix
   above. Once the React purchase bundle mounts on first interaction it
   replaces this element's contents itself, so this only needs to look right
   for the brief pre-interaction skeleton state. */
.single-etn .etn-ticket-placeholder {
	background: transparent;
	border: none;
	padding: 0;
	border-radius: 0;
}
/* `etn-lazy-skeleton`'s own inline rule is `.etn-ticket-placeholder
   .etn-purchase-ticket-title{color:#334155}` — two classes, same
   specificity as a plain `.single-etn .etn-purchase-ticket-title` would
   have, and it prints after this stylesheet, so it was winning the tie
   (confirmed live: title rendered slate-blue, not the intended off-white).
   Nesting under `.etn-ticket-placeholder` too matches their exact selector
   depth plus `.single-etn`, clearing it on specificity instead of order. */
.single-etn .etn-ticket-placeholder .etn-purchase-ticket-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-h4);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-4);
}
.single-etn .etn-ticket-price-hint {
	font-family: var(--font-mono);
	color: var(--color-gold-500);
	font-size: var(--text-body);
	margin-bottom: var(--space-5);
}
/* surface-3 (#1A1A1E) vs border-subtle (8% white) was too close in value —
   on a static screenshot (no shimmer motion to catch the eye) the skeleton
   read as an empty blank card, not loading placeholder bars. border-default
   (14% white) at the shimmer's brightest stop gives it real contrast against
   the surface-2 card behind it. */
.single-etn .etn-skel {
	background: linear-gradient(90deg, var(--color-surface-3) 25%, var(--color-border-default) 50%, var(--color-surface-3) 75%);
	background-size: 200% 100%;
	animation: nx-skel-shimmer 1.4s ease-in-out infinite;
	border-radius: var(--radius-sm);
}
.single-etn .etn-skel-row { height: 44px; margin-bottom: var(--space-3); }
.single-etn .etn-skel-btn { height: 48px; margin-top: var(--space-5); }
@keyframes nx-skel-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.single-etn .etn-skel { animation: none; }
}

/* ---------- the MOUNTED React ticket widget (after first interaction) ----------
   module-purchase.js renders an Ant Design (antd) component tree here, built
   for a white card on a light page: text colors come through mostly as
   *inline* `style="color:..."` attributes (antd's CSS-in-JS output), which
   beat any selector-based CSS regardless of specificity — only `!important`
   in an external stylesheet can still win against those. Confirmed live by
   inspecting the mounted DOM: `.etn-purchase-ticket-title` inline
   `color:#334155`, the two `.etn-purchase-ticket-total-*-span` labels/values
   inline `color:rgb(92,106,120)`/`rgb(11,36,63)`, and the submit button's
   disabled state inline `background-color:rgb(217,217,217)` — all
   near-invisible or jarring against this page's dark surface-2 card, which
   is what made the whole widget read as "blank" before this block existed.
   Eventin's own stable BEM-ish classes (`.etn-ticket-price-label` etc., not
   antd's auto-generated `css-xxxxx` hashes) are the safe long-term selectors
   here — they're part of this plugin's public theming surface, not an
   implementation detail likely to change silently on update. */
.single-etn .etn-purchase-ticket-selector.ant-card {
	background: transparent;
	border: none;
	box-shadow: none;
}
.single-etn .etn-purchase-ticket-selector .ant-card-body { padding: 0; }
.single-etn .etn-purchase-ticket-root .etn-purchase-ticket-title {
	color: var(--color-text-primary) !important;
}
.single-etn .etn-ticket-title {
	color: var(--color-gold-300) !important;
	font-family: var(--font-heading);
	font-weight: 600;
}
.single-etn .etn-ticket-price-label,
.single-etn .etn-ticket-quantity-label,
.single-etn .etn-ticket-subtotal-label {
	color: var(--color-text-muted) !important;
	font-size: var(--text-caption);
}
.single-etn .etn-ticket-price,
.single-etn .etn-ticket-subtotal {
	color: var(--color-text-primary) !important;
	font-family: var(--font-mono);
}
/* `.etn-ticket-container` (the row wrapping ticket name + price/qty/subtotal)
   and `.etn-ticket-quantity` (the ant-space-compact stepper group) both ship
   their own light card backgrounds (#f4f5f8 / #fff) independent of
   `.etn-purchase-ticket-selector` above — confirmed live, both still showed
   as pale boxes after that override alone. */
.single-etn .etn-ticket-container.ant-row { background: transparent !important; }
.single-etn .etn-ticket-quantity.ant-space-compact { background: transparent !important; }
.single-etn .etn-ticket-quantity-input.ant-input-number {
	background: var(--color-surface-1);
	border-color: var(--color-border-default);
}
.single-etn .etn-ticket-quantity-input .ant-input-number-input {
	color: var(--color-text-primary) !important;
	background: transparent;
}
.single-etn .etn-ticket-selection-btn.ant-btn {
	color: var(--color-text-primary) !important;
}
.single-etn .etn-ticket-selection-btn.ant-btn:disabled {
	color: var(--color-text-disabled) !important;
}
/* Eventin ships its own CSS-in-JS rule scoped to `.ant-btn-icon` (one level
   deeper than the button itself) that hardcodes the +/- icon to a near-black
   navy for a light card — `.etn-ticket-selection-btn.ant-btn` above never
   reaches it because that rule targets the icon span directly, at higher
   specificity, breaking the inherited color from the button. Confirmed live:
   computed icon color was rgb(10,16,24), same tone as this page's dark
   background, so the stepper buttons rendered invisible. */
.single-etn .etn-ticket-selection-btn .ant-btn-icon {
	color: var(--color-text-primary) !important;
}
.single-etn .etn-ticket-selection-btn.ant-btn:disabled .ant-btn-icon {
	color: var(--color-text-disabled) !important;
}
.single-etn .etn-purchase-ticket-total-text-span,
.single-etn .etn-purchase-ticket-total-label-text-span {
	color: var(--color-text-secondary) !important;
}
.single-etn .etn-purchase-ticket-total-amount-text-span {
	color: var(--color-gold-500) !important;
	font-family: var(--font-mono);
}
.single-etn .etn-purchase-ticket-submit-btn.ant-btn {
	background: var(--color-gold-500) !important;
	color: var(--color-void) !important;
	border: none !important;
	font-family: var(--font-heading);
	font-weight: 600;
}
.single-etn .etn-purchase-ticket-submit-btn.ant-btn:hover:not(:disabled) {
	background: var(--color-gold-300) !important;
}
.single-etn .etn-purchase-ticket-submit-btn.ant-btn:disabled {
	background: var(--color-border-subtle) !important;
	color: var(--color-text-disabled) !important;
}

/* ============================================================
   ORGANIZER — host cards
   ============================================================ */
.single-etn .nx-widget { margin-top: var(--space-6); }
.single-etn .nx-widget-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-h5);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-2);
}
.single-etn .nx-organizer-card {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	border-top: var(--stroke-hairline) solid var(--color-border-subtle);
}
.single-etn .nx-organizer-card:first-of-type { border-top: none; }
.single-etn .nx-organizer-card__avatar {
	width: 56px; height: 56px;
	border-radius: var(--radius-full);
	object-fit: cover;
	flex-shrink: 0;
}
.single-etn .nx-organizer-card__avatar--initials {
	display: flex; align-items: center; justify-content: center;
	background: var(--color-surface-3);
	color: var(--color-gold-500);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-h5);
}
.single-etn .nx-organizer-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.single-etn .nx-organizer-card__name { color: var(--color-text-primary); font-weight: 600; text-decoration: none; }
.single-etn .nx-organizer-card__name:hover { color: var(--color-gold-300); }
.single-etn .nx-organizer-card__email { font-size: var(--text-caption); color: var(--color-text-muted); text-decoration: none; }
.single-etn .nx-organizer-card__email:hover { color: var(--color-text-secondary); }

/* ============================================================
   ADD TO CALENDAR
   ============================================================ */
.single-etn .etn-widget.etn-add-calender-url { margin-top: var(--space-6); }
.single-etn .etn-add-to-calender-title .etn-widget-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-h5);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-4);
}
.single-etn .etn-calender-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	margin: 0; padding: 0;
}
.single-etn .etn-calender-list li { margin: 0; }
.single-etn .etn-add-to-calender {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	border: var(--stroke-hairline) solid var(--color-border-default);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--color-text-secondary);
	transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
}
.single-etn .etn-add-to-calender:hover { border-color: var(--color-gold-500); color: var(--color-text-primary); }
.single-etn .etn-add-to-calender:active { transform: scale(0.98); }
.single-etn .calender-icon svg { width: var(--icon-md); height: var(--icon-md); color: var(--color-gold-500); }
.single-etn .calender-name { font-family: var(--font-heading); font-size: var(--text-body-s); font-weight: 500; }

/* ============================================================
   SCHEDULE / FAQ / RECURRING ACCORDION — light reskin
   ============================================================ */
.single-etn .etn-widget-title,
.single-etn .etn-recurring-event-wrapper h3 {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-text-primary);
}
.single-etn .etn-schedule-widget,
.single-etn .etn-faq-widget,
.single-etn .etn-recurring-event-wrapper {
	margin-top: var(--space-9);
}
/* The actual schedule block Eventin renders is `.schedule-tab-wrapper`
   (tag list + tab panels) — not `.etn-schedule-widget`, that class never
   appears in the live markup. Same white-card treatment as
   `.etn-event-single-content-wrap` (§ Layout above), same 3-class
   specificity match against `.theme-astra .etn-event-single-wrap
   .schedule-tab-wrapper{background:#fff}`. `.etn-tag-wrapper` is its
   sibling selector in that same Eventin rule (a legacy/alternate tag
   block, not the one this plugin's own `.nx-event-tags` replaces) —
   included so it can't reintroduce the same white box if it ever renders. */
.single-etn .etn-event-single-wrap .schedule-tab-wrapper,
.single-etn .etn-event-single-wrap .etn-tag-wrapper {
	background: transparent;
	box-shadow: none;
	padding: 0;
	margin-top: var(--space-9);
	margin-bottom: 0;
}
.single-etn .schedule-tab-wrapper .etn-nav { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-6); padding: 0; }
.single-etn .schedule-tab-wrapper .etn-tab-a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-sm);
	border: var(--stroke-hairline) solid var(--color-border-default);
	text-decoration: none;
	color: var(--color-text-secondary);
}
.single-etn .schedule-tab-wrapper .etn-tab-a.etn-active { border-color: var(--color-gold-500); color: var(--color-text-primary); }
.single-etn .schedule-tab-wrapper .etn-date { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-gold-500); text-transform: uppercase; letter-spacing: 0.04em; }
.single-etn .schedule-tab-wrapper .etn-day { font-family: var(--font-heading); font-weight: 500; font-size: var(--text-body-s); }
/* Eventin's stock active-tab indicator is a small blue (#5d78ff) CSS-arrow
   triangle (`.etn-nav li a:after`) — recolor to gold rather than leave the
   one stray brand-blue pixel on an otherwise all-gold accent page. */
.single-etn .schedule-tab-wrapper .etn-nav li a:after { border-color: var(--color-gold-500) transparent transparent; }
.single-etn .schedule-tab-wrapper .etn-nav li a.etn-active { border-bottom-color: var(--color-gold-500); }

/* ============================================================
   RELATED EVENTS — Nexus Event Card (design-system §4.3)
   ============================================================ */
/* No margin-top here — `.etn-event-single-wrap` (§ Layout above) already
   ends in `padding-block-end: var(--space-14)` (160px); stacking this
   section's own margin-top on top of that padding (they don't collapse,
   one being padding not margin) left ~288px of dead black space before
   "Related Events" — confirmed live, read as an empty gap, not a
   deliberate pause. */
.nx-related-events {
	position: relative;
	background: var(--color-surface-1);
	padding-block: var(--space-13);
}
.nx-related-events__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
@media (min-width: 640px) {
	.nx-related-events__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.nx-related-events__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-7); }
}
.nx-related-card {
	display: block;
	text-decoration: none;
	background: var(--color-surface-2);
	border: var(--stroke-hairline) solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-1);
	transition: transform var(--duration-base) var(--ease-out-expo), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.nx-related-card:hover,
.nx-related-card:focus-visible {
	transform: translateY(-4px);
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-2);
}
.nx-related-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--color-surface-3); overflow: hidden; }
.nx-related-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-base) var(--ease-out-expo); }
.nx-related-card:hover .nx-related-card__media img { transform: scale(1.05); }
.nx-related-card__category {
	position: absolute; top: var(--space-3); left: var(--space-3);
	background: rgba(5,5,6,0.72);
	backdrop-filter: blur(var(--blur-xs));
	color: var(--color-gold-300);
	font-family: var(--font-heading);
	font-size: var(--text-h6-overline);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-xs);
}
.nx-related-card__body { padding: var(--space-6); }
.nx-related-card__meta {
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	color: var(--color-ion-500);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 var(--space-2);
}
.nx-related-card__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-h4);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-4);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.nx-related-card__cta {
	display: inline-flex;
	align-items: center;
	font-size: var(--text-body-s);
	font-weight: 600;
	color: var(--color-gold-500);
	transition: color var(--duration-fast) var(--ease-standard);
}
.nx-related-card:hover .nx-related-card__cta { color: var(--color-gold-300); }

/* ============================================================
   EVENTS ARCHIVE PAGE — filter bar, live grid, empty states
   Global (not scoped to .single-etn) — this section paints the Events page
   (body.nx-page, gated in nexus-homepage.php's nexus_home_is_nx_page()),
   a different template from the single-event page above. `.nx-related-card`
   (§ Related Events, above) is reused as-is for the base card shell — same
   card, same "Nexus Event Card" spec (design-system §4.3) — with only the
   additions below layered on for the extra fields this page's cards carry
   (excerpt, date/time/venue rows, price, availability) that the single
   event's related-card list doesn't need.
   ============================================================ */
.nx-event-grid-section { position: relative; z-index: 2; background: var(--color-bg); padding-block: var(--space-13); }
.nx-event-grid__filters { margin-bottom: var(--space-9); }

.nx-event-grid__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
}
@media (min-width: 640px) {
	.nx-event-grid__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.nx-event-grid__list { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}

/* Equal specificity to `.nx-related-card { display: block }` above resolves
   on source order alone — this rule must stay after it (it already is, by
   file position) so a card's `hidden` attribute (toggled by
   initEventGrid() in nexus-events.js) actually removes it from layout
   instead of losing that tie and staying visible. */
.nx-event-grid__list [hidden] { display: none; }

.nx-event-card__excerpt {
	font-size: var(--text-body-s);
	line-height: 1.55;
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-3);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.nx-event-card__meta-list {
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.nx-event-card__meta-list li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	color: var(--color-text-muted);
}
.nx-event-card__meta-list .nx-icon { color: var(--color-gold-500); flex-shrink: 0; }
.nx-event-card__meta-list .nx-icon svg { width: var(--icon-sm); height: var(--icon-sm); }
.nx-event-card__meta-list li span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nx-event-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--space-4);
	border-top: var(--stroke-hairline) solid var(--color-border-subtle);
}
.nx-event-card__price {
	font-family: var(--font-mono);
	font-size: var(--text-body-s);
	font-weight: 600;
	color: var(--color-gold-500);
}

.nx-event-card__availability {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-h6-overline);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-xs);
	backdrop-filter: blur(var(--blur-xs));
}
.nx-event-card__availability--limited { background: rgba(224,165,38,0.16); color: var(--color-warning); border: var(--stroke-hairline) solid var(--color-warning); }
.nx-event-card__availability--sold-out { background: rgba(229,72,77,0.16); color: var(--color-danger); border: var(--stroke-hairline) solid var(--color-danger); }

.nx-event-grid__filter-empty { margin-top: var(--space-3); }

.nx-event-grid__load-more { display: flex; justify-content: center; margin-top: var(--space-10); }

/* ---------- sitewide empty state (no upcoming events anywhere) ---------- */
.nx-events-empty {
	position: relative;
	background: var(--gradient-aurora), var(--color-bg);
	padding-block: var(--space-14);
	text-align: center;
}
.nx-events-empty__inner { max-width: 560px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.nx-events-empty__body {
	font-size: var(--text-body-l);
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: var(--space-5) 0 var(--space-8);
}

@media (max-width: 767px) {
	.nx-event-grid__list { gap: var(--space-6); }
	.nx-event-card__meta-list li span { white-space: normal; }
}

/* ============================================================
   MOTION — reveal defaults (see assets/js/nexus-events.js)
   ============================================================ */
[data-nx-reveal],
[data-nx-stagger-item] {
	will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
	[data-nx-reveal],
	[data-nx-stagger-item] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ============================================================
   RESPONSIVE — hero + meta row on small screens
   ============================================================ */
@media (max-width: 767px) {
	.nx-event-hero { min-height: 60vh; padding-block: var(--space-12) var(--space-10); }
	.nx-event-hero__title { font-size: var(--text-h1); max-width: none; }
	.nx-event-hero__meta { gap: var(--space-3) var(--space-5); }
	.single-etn .etn-single-event-ticket-wrap { padding: var(--space-6); }
	.single-etn .etn-calender-list { grid-template-columns: 1fr; }
}