/**
 * Per-screen layout.
 *
 * Primitives live in neo-evt-app.css. This is only what a screen adds.
 *
 * The scanner block is the one to read carefully. It is not styled for a browser window; it
 * is styled for a phone held at arm's length, at night, by someone who is talking.
 */

/* ================================================================ 1. catalog */

/* ---- the hero ----
 *
 * The same banner the catalogue (neoyug-program-landing `.nyc-hero`) opens on, so the two
 * pages read as one place behind a shared toggle: a full-bleed gradient slab with a
 * soft-light sheen, a centred eyebrow / title / subtitle, and the Programs / Sadhanas /
 * Events pill rail. Search and the category filters are NOT in here - they sit on cream
 * in `.nem-toolbar` below, matching how the catalogue keeps its filters off the banner.
 *
 * The bleed uses `width: 100vw` plus `margin-inline: calc(50% - 50vw)`, the same technique
 * the catalogue's `.nyc` root uses. `100vw` forces viewport width even when the theme drops
 * the shortcode into a narrower, inset container; the negative margins re-centre it. (Margins
 * alone are measured against the parent, so in a narrow container they never reach the edge.)
 * `.neo-evt-mount` scopes every rule so the theme's own site-header CSS can't touch it - the
 * slab is a plain div for the same reason, so no `header {}` rule sets a background or a tall
 * min-height on it. `overflow-x: clip` on the mount (app.css) hides the one-scrollbar overrun.
 */
.neo-evt-mount .nem-lhero {
  position: relative;
  overflow: hidden;
  text-align: center;
  width: 100vw;
  max-width: 100vw;
  min-height: 0;
  box-sizing: border-box;
  margin: calc(-1 * var(--nem-wrap-pad-y)) calc(50% - 50vw) 0;
  padding: clamp(64px, 8vw, 108px) 28px clamp(72px, 8vw, 96px) !important;
  background: linear-gradient(168deg, #261A48 0%, #3a1c5e 26%, #7d1fb4 50%, #c93f6e 72%, #E96F46 92%);
  color: #fff;
}

/* Soft-light sheen, identical to the catalogue banner. */
.nem-lhero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.08) 100%);
  mix-blend-mode: soft-light;
}

.neo-evt-mount .nem-lhero .nem-hero-in { position: relative; z-index: 1; max-width: 760px; margin: 0 auto !important; }

.neo-evt-mount .nem-eyebrow {
  font: 700 12px/1.4 var(--nem-body) !important;
  font-family: inherit !important; /* global font; size/weight above stay protected */
  text-transform: uppercase;
  letter-spacing: .26em;
  color: #FFD4C6;
  margin: 0 0 16px !important;
}

.neo-evt-mount .nem-lhero .nem-h1 {
  font: 700 clamp(44px, 7vw, 78px)/1 var(--nem-display) !important;
  font-family: inherit !important; /* global font; size/weight above stay protected */
  color: #fff;
  letter-spacing: .5px;
  margin: 0 0 22px !important;
}

.neo-evt-mount .nem-hero-sub {
  font: 300 clamp(15px, 2.2vw, 18px)/1.5 var(--nem-body) !important;
  font-family: inherit !important; /* global font; size/weight above stay protected */
  color: rgba(255, 255, 255, .88);
  max-width: 600px;
  margin: 8px auto 34px !important;
}

/* ---- the segmented rail (shared with the catalogue `.nyc-seg`) ---- */
.neo-evt-mount .nem-seg {
  display: inline-flex;
  background: #fff;
  border: 2px solid var(--nem-purple);
  border-radius: 40px;
  padding: 6px;
  box-shadow: 0 14px 40px -16px rgba(141, 34, 195, .7);
}

.neo-evt-mount .nem-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  /* Uppercase + tracking to match the catalog's Programs / Sadhanas pills (which the
     theme uppercases as <button>s). Set explicitly here rather than left to the theme,
     because the events pills are <span>/<a> and would otherwise render sentence-case —
     that mismatch is why Events read differently from Programs / Sadhanas. The catalog
     `.nyc-seg-btn` carries the identical two lines so both plugins render the same. */
  font: 600 16px/1 var(--nem-body);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--nem-purple);
  background: transparent;
  padding: 12px 30px;
  border-radius: 40px;
  transition: .25s;
  white-space: nowrap;
  text-decoration: none;
}

/* Active state = the current page (Events). Solid purple, like the catalogue's `.nyc-on`. */
.neo-evt-mount .nem-seg-btn.nem-on { background: var(--nem-purple); color: #fff; }

/* Programs / Sadhanas are links to another page: resting outline, a lift on hover. */
.neo-evt-mount .nem-seg-link { color: var(--nem-purple); }
.neo-evt-mount .nem-seg-link:hover { background: rgba(141, 34, 195, .08); }

/* ---- the toolbar (search + category filters) ----
 * Sits on the page background, no band of its own - the catalogue keeps its
 * filters on the page the same way. (Was a cream band; removed at Kunal's ask.)
 */
.neo-evt-mount .nem-toolbar {
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  margin: 0 calc(50% - 50vw) 40px;
  padding: 24px var(--nem-wrap-pad-x) 4px;
  background: transparent;
}

.nem-toolbar-in {
  max-width: calc(var(--nem-wrap-max) - 2 * var(--nem-wrap-pad-x));
  margin: 0 auto;
}

/* Search on its own line, at full width. Pills underneath it. */
.nem-filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  margin: 0;
}

@media (max-width: 680px) {
  .neo-evt-mount .nem-lhero { padding-top: 92px !important; padding-bottom: 96px !important; }
  /* Keep Programs / Sadhanas / Events on one line each and share the width evenly. */
  .neo-evt-mount .nem-seg { max-width: 100%; width: 100%; }
  .neo-evt-mount .nem-seg-btn { flex: 1 1 0; padding: 12px 8px; font-size: 14px; }
}

/*
 * The pill is the wrapper, not the input.
 *
 * `.nem-search` carried the border and the 24px radius and lost every one of them to the
 * theme's `input[type="search"]`, which is a type selector plus an attribute selector and
 * outranks a bare class. The result on giftshop.neoyug.com is a square, full-width, 60px
 * tall box. Move the chrome onto a div the theme has never heard of, and strip the input
 * back to nothing so there is no property left to fight over.
 */
.nem-searchbox {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 18px;
  border: 1px solid var(--nem-line);
  border-radius: var(--nem-radius-pill);
  background: #fff;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.nem-searchbox:focus-within {
  border-color: var(--nem-purple);
  box-shadow: 0 0 0 3px rgba(141, 34, 195, 0.12);
}

.nem-search-icon { color: var(--nem-muted); font-size: 16px; line-height: 1; }

.neo-evt-mount .nem-search {
  flex: 1;
  width: 100%;
  min-width: 0;
  font: 400 14px/1.4 var(--nem-body);
  color: var(--nem-ink);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  height: auto;
  -webkit-appearance: none;
  appearance: none;
}

.neo-evt-mount .nem-search:focus { border: none; box-shadow: none; outline: none; }
.neo-evt-mount .nem-search::-webkit-search-cancel-button { -webkit-appearance: none; }

/*
 * The catalog's pills are the smallest set on the site: eleven categories plus All plus the
 * past toggle is thirteen pills, and at the primitive's 12px they take two rows on a laptop.
 * Overriding the tokens rather than the rule keeps one definition of what a chip is.
 */
.nem-filter-chips,
.nem-filters {
  --nem-chip-size: 11px;
  --nem-chip-pad-y: 5px;
  --nem-chip-pad-x: 11px;
}

.nem-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- the card ----

 * Structurally identical to `.nyc-card` in neoyug-program-landing's catalog.css: a 4:5 media
 * block with a scrim and a badge, then a body carrying a two-line title, two meta lines and a
 * bottom-pinned purple price pill. Same 14px radius, same 1.5px border, same lift curve, same
 * 1.05 poster scale on hover.
 *
 * Copied, not imported. `catalog.css` is not enqueued on /events, and the two plugins version
 * independently: a shared stylesheet means neither can change a card without the other.
 */

/* Four up, stepping down to three on tablets and two on phones. */
.nem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 20px;
  margin-bottom: 14px;
}

@media (max-width: 1024px) { .nem-grid { grid-template-columns: repeat(3, 1fr); } }
/*
 * Phones: one big card per row. The 4:5 poster then fills the screen width, so roughly one
 * event fills the viewport and the rest are a scroll away — what Kunal asked for. (Was two
 * across, which made each card small.)
 */
@media (max-width: 680px)  { .nem-grid { grid-template-columns: 1fr; gap: 18px; } }

.neo-evt-mount .nem-event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1.5px solid rgba(38, 26, 72, 0.12);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--nem-dpurple);
  isolation: isolate;
  box-shadow: 0 4px 18px rgba(20, 12, 40, 0.06);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s;
}

.neo-evt-mount .nem-event-card:hover,
.neo-evt-mount .nem-event-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px -16px rgba(20, 12, 40, 0.36);
  outline: none;
}

.neo-evt-mount .nem-event-card:focus-visible {
  box-shadow: 0 0 0 3px #A93FDD, 0 16px 30px -16px rgba(20, 12, 40, 0.36);
}

.nem-card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }

/*
 * The poster is a background on a `<span>`, not an `<img>`. That is how the catalog does it,
 * and it is why the 1.05 hover scale can run without the image escaping its rounded corner or
 * the browser reflowing anything. `.nem-card-media` clips it.
 */
.nem-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

.nem-event-card:hover .nem-card-bg { transform: scale(1.05); }

.nem-card-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: linear-gradient(to bottom, rgba(8, 5, 18, 0.34) 0%, rgba(8, 5, 18, 0) 42%);
}

.nem-card-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 11px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}

/* ---- the badge ---- */

.nem-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 10.5px var(--nem-body);
  letter-spacing: 0.4px;
  color: #2a1402;
  background: #F2B23B;
  padding: 5px 9px;
  border-radius: 8px;
  white-space: nowrap;
}

.nem-badge-feat { background: var(--nem-purple); color: #fff; }
.nem-badge-free { background: #fff; color: var(--nem-purple); }
.nem-badge-hot { background: var(--nem-orange); color: #fff; }
.nem-badge-rec { background: rgba(0, 0, 0, 0.34); backdrop-filter: blur(10px); color: #fff; font-weight: 500; font-size: 10px; }

/* ---- the body ---- */

.nem-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 11px 13px 13px;
  background: var(--nem-panel);
}

/*
 * The break inside the title is a real <br>, placed by `twoLineTitle()` at the word gap that
 * balances the two lines. The clamp is a floor for the case where one word is wider than the
 * column; it is not what produces the two lines. `height` is fixed so a one-line title and a
 * two-line title leave the price pill on the same baseline.
 */
.nem-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 600 14.5px/1.3 var(--nem-body);
  height: calc(2 * 1.3em);
  color: var(--nem-dpurple);
}

/*
 * When, then where. Both rows are height-locked at 1.5em with `overflow: hidden`, which is
 * the trick that makes every catalog card exactly the same height, applied twice. A missing
 * venue still occupies its row - the JS prints "Venue to be announced" rather than returning
 * null - so a row of cards never goes ragged at the pill.
 */
.nem-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--nem-dpurple);
}

.nem-card-when,
.nem-card-venue {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 1.5em;
  overflow: hidden;
  white-space: nowrap;
}

.nem-card-when { font-weight: 600; opacity: 0.82; }
.nem-card-venue { opacity: 0.6; }
.nem-card-venue.tba { font-style: italic; opacity: 0.45; }

.nem-card-clock,
.nem-card-pin { width: 12px; height: 12px; flex-shrink: 0; }

.nem-card-when .t,
.nem-card-venue .t { overflow: hidden; text-overflow: ellipsis; }

/* ---- the price pill ---- */

.nem-card-foot { margin-top: auto; padding-top: 11px; display: flex; align-items: center; justify-content: flex-start; }

.nem-buy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--nem-purple);
  color: #fff;
  border-radius: 999px;
  padding: 8px 13px;
  box-shadow: 0 8px 18px -10px rgba(141, 34, 195, 0.9);
  transition: background 0.25s;
}

.nem-buy-price { font: 600 13px/1 var(--nem-body); color: #fff; white-space: nowrap; }
.nem-buy-go { flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: #fff; }

.nem-event-card:hover .nem-buy,
.nem-event-card:focus-visible .nem-buy { background: #A93FDD; }

/*
 * Sold out is a state, not a removal. The poster desaturates and the pill goes quiet, but the
 * card still links: someone told about the VIP tier by a friend needs to see that it existed.
 */
.nem-event-card.sold-out .nem-card-bg { filter: grayscale(0.85); }
.neo-evt-mount .nem-event-card.sold-out .nem-buy { background: #efeae1; box-shadow: none; }
.nem-event-card.sold-out .nem-buy-price,
.nem-event-card.sold-out .nem-buy-go { color: var(--nem-muted); }

@media (prefers-reduced-motion: reduce) {
  .nem-event-card:hover { transform: none; }
  .nem-event-card:hover .nem-card-bg { transform: none; }
}

.nem-pagination { display: flex; justify-content: space-between; align-items: center; margin: 32px 0; flex-wrap: wrap; gap: 12px; }

/* ================================================================ 2. detail */

/* Vertical padding lives on `.nem-wrap`. Only the mobile book bar needs more. */

/* ---- the hero band ----

 * A purple band carrying the chip, the title, the one-liner and two pills.
 *
 * It stopped at the wrap's edge, which left a band the width of the text with white either
 * side of it - the "huge gutter" report. It now bleeds to the viewport with
 * `margin-inline: calc(50% - 50vw)`, which is measured against the wrap's content box and so
 * cancels the wrap's gutter *and* whatever container the theme wrapped the mount in. `100vw`
 * would overflow by the scrollbar's width; `overflow-x: clip` on the mount handles the
 * sub-pixel case. See app.css.
 *
 * The gradient is the first three stops of `landing.css`'s six-stop sunset. The full six ramp
 * across ~700px; a 260px band lands every one of them at once, and the closing peach dies into
 * the page with no edge at all. `#3f2154` against white is a line.
 */
.nem-hero-band {
  margin: calc(-1 * var(--nem-wrap-pad-y)) calc(50% - 50vw) 40px;
  padding: calc(56px + var(--nem-header-offset)) var(--nem-wrap-pad-x) 44px;
  background: linear-gradient(178deg, #2a1846 0%, #331c4b 45%, #3f2154 100%);
  color: #fff;
  text-align: center;
}

.nem-hero-band-inner { max-width: 760px; margin: 0 auto; }

.neo-evt-mount .nem-hero-band .nem-h1 { color: #fff; margin: 12px 0 0; }

.nem-hero-chip {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: 600 10px var(--nem-body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.neo-evt-mount .nem-hero-band .nem-lede {
  color: #F0E1DA;
  max-width: 56ch;
  margin: 12px auto 0;
}

/* ---- the pills ----

 * `.nypl-stat`, renamed. Each pill sets `white-space: nowrap` on itself: a pill that wraps
 * its own text reads as two facts, and the venue is the one long enough to try.
 */
.nem-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}

.nem-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border-radius: 999px;
  background: #fff;
  color: var(--nem-ink);
  font: 500 13px var(--nem-body);
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(40, 15, 30, 0.16);
}

.nem-stat .nem-icon { color: var(--nem-orange); }

/* ---- the media ----

 * Back in the left column, above `About this event`, top-aligned with the ticket card. 18px
 * to match the landing page's `--radius`; the card is the only white in the row.
 */
.nem-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: var(--nem-skeleton);
  margin: 0;
}

/*
 * `.nem-hero` declared a 16:9 box and then said nothing about what goes inside it. Three
 * bugs came out of that one omission, and they are all the same bug:
 *
 *   - The poster image took the theme's `img { max-width: 100%; height: auto }`, so it was a
 *     block of unknown height and the play button, being a plain `<button>` in normal flow,
 *     landed *underneath* it - bottom-left, wearing the theme's pink button styling. It was
 *     never positioned; it was never asked to be.
 *   - `playerNode()` swaps that image for an `<iframe>` on click. An iframe with no CSS is
 *     300x150px. That is the "plays in a tiny section" report, exactly: 300x150 in a box
 *     1180px wide.
 *   - A `<video>` element with no CSS is 300x150 too.
 *
 * Everything in the hero is absolutely positioned to fill it. Scoped to the mount so the
 * 0,2,1 beats the theme's `img`.
 */
.neo-evt-mount .nem-hero > img,
.neo-evt-mount .nem-hero > iframe,
.neo-evt-mount .nem-hero > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  border: 0;
  margin: 0;
}

.neo-evt-mount .nem-hero > img { object-fit: cover; }

/* A self-hosted file is letterboxed rather than cropped: the organizer framed it, not us. */
.nem-hero-video { background: #000; }
.neo-evt-mount .nem-hero-video > video { object-fit: contain; }

/*
 * The play button is the whole poster, and the glyph is what you see.
 *
 * A 76px target centred in a 16:9 box, over a scrim dark enough that a white triangle reads
 * against a sunset. The button itself is transparent and borderless; the theme has a dozen
 * rules for `button` and none of them can reach a property this rule does not set.
 */
.neo-evt-mount .nem-hero-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(20, 8, 30, 0.10) 0%, rgba(20, 8, 30, 0.34) 100%);
  box-shadow: none;
  cursor: pointer;
  transition: background 0.16s ease;
}

.neo-evt-mount .nem-hero-play:hover { background: rgba(20, 8, 30, 0.34); }
.neo-evt-mount .nem-hero-play:focus-visible { outline: 3px solid var(--nem-orange); outline-offset: -3px; }

.nem-hero-play-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  padding-left: 5px; /* optical: a triangle's mass sits left of its bounding box */
  border-radius: 50%;
  background: var(--nem-purple);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.16s ease;
}

.neo-evt-mount .nem-hero-play:hover .nem-hero-play-glyph { transform: scale(1.06); }

@media (max-width: 640px) {
  .nem-hero-play-glyph { width: 58px; height: 58px; font-size: 20px; }
}

/* No image yet: a flat 16:9 block, so adding one later does not reflow the page. */
.nem-hero-empty { background: linear-gradient(135deg, #efeae1, #e3ddd2); }

/* The video sits under the image, full width, above the columns. */
.nem-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--nem-radius);
  overflow: hidden;
  background: #000;
  margin: 0 0 32px;
}

.nem-video-frame iframe,
.nem-video-frame video { width: 100%; height: 100%; border: 0; display: block; }

/*
 * Two columns, both starting at the top of the row.
 *
 * The header used to span both, so the ticket card began below the date. `align-items: start`
 * on a grid is what top-aligns them; the header now lives inside the left column, which is
 * where the wireframe puts it.
 */
.nem-detail-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 40px;
  align-items: start;
}

/*
 * Vertical rhythm by flex gap, not by margins.
 *
 * Margins are a negotiation with the theme and the plugin keeps losing it: `.entry-content
 * section`, `.elementor-widget-container > section`, `.site-main > * + *` and a dozen other
 * 0,1,1 selectors all outrank a `.nem-` class, and every theme ships a different set. The
 * gap on a flex container cannot be overridden from outside, and zeroing the children's own
 * margins removes the only surface the theme can reach.
 *
 * This is what closes the "too much space between sections" report for good, rather than
 * out-specifying one theme rule at a time.
 */
.nem-detail-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.neo-evt-mount .nem-detail-main > * {
  margin: 0;
  padding: 0;
}



.neo-evt-mount .nem-lede { font: 400 16px/1.6 var(--nem-body); color: var(--nem-muted); max-width: 60ch; margin: 0; }

/*
 * One rhythm, stated once. 40px between blocks, 16px between a heading and its body.
 * Both numbers used to be whatever the theme's `section` and `h2` margins happened to be,
 * which on this site was roughly 4rem above and 8px below.
 */
/* The flex gap on .nem-detail-main owns the spacing now. */
.neo-evt-mount .nem-block { margin: 0; }

.nem-prose { font: 400 15px/1.75 var(--nem-body); }
.neo-evt-mount .nem-prose p { margin: 0 0 14px; }
.neo-evt-mount .nem-prose > :first-child { margin-top: 0; }
.neo-evt-mount .nem-prose > :last-child { margin-bottom: 0; }
.nem-prose img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---- details: duration, restrictions ---- */

.nem-facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 24px; margin: 0; }
.nem-fact { display: contents; }

.neo-evt-mount .nem-facts dt {
  font: 600 13px var(--nem-body);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--nem-muted);
  margin: 0;
  padding-top: 2px;
}

.neo-evt-mount .nem-facts dd { margin: 0; font: 400 15px/1.6 var(--nem-body); color: var(--nem-ink); }

/* Organizer-typed free text. Their line breaks are meaningful and were being collapsed. */
/*
 * `restrictions` (the "Good to know" row) is authored HTML now, sanitized to a
 * basic allow-list. It gets the same well-behaved rich-text spacing as .nem-prose:
 * no white-space:pre-line (which would turn every source newline between tags into
 * a blank line and jam list items together), just tidy block margins.
 */
.neo-evt-mount .nem-restrictions > :first-child { margin-top: 0; }
.neo-evt-mount .nem-restrictions > :last-child { margin-bottom: 0; }
.neo-evt-mount .nem-restrictions p { margin: 0 0 10px; }
.neo-evt-mount .nem-restrictions ul,
.neo-evt-mount .nem-restrictions ol { margin: 0 0 10px; padding-left: 20px; }
.neo-evt-mount .nem-restrictions li { margin: 0 0 4px; }
.neo-evt-mount .nem-restrictions p:empty { display: none; }

@media (max-width: 640px) {
  .nem-facts { grid-template-columns: 104px minmax(0, 1fr); gap: 8px 14px; }
  .nem-fact + .nem-fact { margin-top: 16px; }
}

/* ---- venue ---- */

.nem-venue { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }

.nem-venue-map {
  aspect-ratio: 1;
  border-radius: var(--nem-radius);
  overflow: hidden;
  border: 1px solid var(--nem-line-2);
  background: var(--nem-skeleton);
}

.nem-venue-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.nem-venue-address { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; font-size: 14px; }
.nem-venue-address address { font-style: normal; line-height: 1.6; }
.nem-venue-pin { display: flex; align-items: center; height: 1.6em; }
.nem-directions { grid-column: 2; margin-top: 8px; font: 600 13px var(--nem-body); color: var(--nem-purple); text-decoration: none; }
.nem-directions:hover { color: var(--nem-orange); }

/* ---- the ticket card ---- */

/*
 * `.nem-tickets` was declared twice in this file: here, and again under `account` as a
 * `display: grid` card grid. The account rule sits later, so on the *detail* page the
 * ticket card became a grid and stopped being sticky. The account screen now uses
 * `.nem-ticket-grid`.
 */
.neo-evt-mount .nem-tickets { position: sticky; top: 24px; padding: 0; align-self: start; }
.nem-tickets-head { padding: 22px 20px 6px; }
.neo-evt-mount .nem-tickets-head .nem-h2 { margin: 0; font-size: 22px; }

.nem-tier { padding: 18px 20px; border-top: 1px solid var(--nem-line-2); display: flex; flex-direction: column; gap: 10px; }
.nem-tier:first-child { border-top: none; }

.nem-tier-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nem-tier-name { font: 600 15px var(--nem-display); color: var(--nem-dpurple); }
.nem-tier-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

/*
 * An unavailable tier is dimmed, never hidden. Removing it makes the page look like it has
 * fewer options than it does, and a customer told about the VIP tier by a friend needs to see
 * that it exists and is gone.
 */
.nem-tier.unavailable { background: #faf9f6; }
.nem-tier.unavailable .nem-tier-name { color: var(--nem-muted); }
.nem-tier-state { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

.nem-stepper-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }

.nem-tickets-foot {
  padding: 18px 20px 20px;
  border-top: 1px solid var(--nem-line);
  background: #faf9f6;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/*
 * The book bar is mobile only. On desktop, Book now lives inside the ticket card, per 2a.
 * It shipped as a full-width sticky bar on every viewport, detached from the tickets it was
 * buying.
 */
.nem-bookbar { display: none; }

/* The bar reuses `.nem-wrap` for its max-width, not for its 70px of page padding. */
.nem-bookbar .nem-wrap { padding: 0 20px; }

@media (max-width: 900px) {
  .nem-detail-cols { grid-template-columns: 1fr; }
  /* 0,2,0 to match the sticky rule above, which is now scoped to the mount. */
  .neo-evt-mount .nem-tickets { position: static; }
  .nem-venue { grid-template-columns: 1fr; }
  .nem-venue-map { aspect-ratio: 16 / 10; }

  .nem-detail { padding-bottom: 96px; }

  .nem-hero-band { margin-bottom: 32px; padding: calc(44px + var(--nem-header-offset)) var(--nem-wrap-pad-x) 36px; }

  .nem-bookbar {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--nem-line);
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
  }
}

@media (max-width: 640px) {
  /*
   * The wrap's padding is 20px here, so the band's bleed matches it.
   *
   * One line of pills, always. Two pills at 13px are wider than a 390px phone, and wrapping
   * them stacks 96px of chrome above the video. The row scrolls sideways instead, with no
   * visible bar: the date is the fact that has to be there on load, and the venue is one
   * swipe away rather than one scroll down.
   */
  .nem-hero-band { margin-bottom: 28px; padding: calc(34px + var(--nem-header-offset)) var(--nem-wrap-pad-x) 30px; }
  .neo-evt-mount .nem-hero-band .nem-h1 { font-size: 26px; }

  .nem-hero-stats {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: -20px;
    padding-inline: 20px;
  }

  .nem-hero-stats::-webkit-scrollbar { display: none; }

  .nem-stat { padding: 8px 14px; font-size: 12px; }

  .nem-hero { border-radius: 14px; }
}

/* ---- related ---- */

.neo-evt-mount .nem-related { margin: 56px 0 0; padding-top: 32px; border-top: 1px solid var(--nem-line-2); }
.neo-evt-mount .nem-related .nem-h2 { margin: 0 0 20px; }
.nem-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.nem-rail-card { color: inherit; text-decoration: none; transition: transform 0.16s ease, box-shadow 0.16s ease; }
.nem-rail-card:hover { transform: translateY(-3px); box-shadow: var(--nem-shadow); }
/*
 * The related rail on the detail page still renders an <img> inside `.nem-card-media`, not a
 * background span. `.nem-card-media img` was defined by the old catalog block that this file
 * no longer has, so it is restated here rather than left to the theme's `height: auto`.
 */
.nem-rail-card .nem-card-media { aspect-ratio: 4 / 5; }
.neo-evt-mount .nem-rail-card .nem-card-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.nem-rail-card .nem-card-media-empty { width: 100%; height: 100%; background: linear-gradient(135deg, #efeae1, #e3ddd2); }
.nem-rail-card .nem-card-body { padding: 14px 16px 16px; background: var(--nem-panel); }
.nem-rail-card .nem-card-date { font: 600 11px var(--nem-body); letter-spacing: 0.5px; text-transform: uppercase; color: var(--nem-purple); margin-bottom: 6px; }

/* ================================================================ 3. account

 * Removed in 1.8.0 with the customer portal. Tickets live on Enrolled Programs, rendered by
 * [neo_evt_my_tickets] and styled by NeoYug Lesson Layouts. `.nem-tabs`, `.nem-ticket-grid`,
 * `.nem-ticket-qr` and the rest had no markup left to style.
 */

/* ================================================================ 4. scanner */

/*
 * The scanner is the screen.
 *
 * `View::render_page()` wraps every screen in the theme's header and footer. On the catalog
 * that is correct. On a phone at a door it means a fixed site header, a nav bar and a chat
 * bubble sitting on top of the viewfinder, and a shell that was written as `min-height: 100vh`
 * rendering as a tall box inside the theme's content column.
 *
 * `position: fixed` on the shell and `overflow: hidden` on the document, both hung off the
 * `.neo-evt-scanning` class that neo-evt-scanner.js puts on <html>. The class means the
 * takeover happens only on the scanner screen, never when the shortcode lands on a page that
 * wants its chrome.
 */
html.neo-evt-scanning,
html.neo-evt-scanning body {
  overflow: hidden;
  overscroll-behavior: none;
}

.nem-scan-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--nem-dpurple);
  color: #fff;
  padding: 12px;
}

html.neo-evt-scanning .nem-scan-shell {
  position: fixed;
  inset: 0;
  z-index: 9998;
  /* The colour runs under the header; only the status row clears it. */
  padding-top: calc(12px + var(--nem-header-offset));
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
}

/*
 * The door picker's titles were white on white.
 *
 * `.nem-door` is a <button> carrying `.nem-card`, which paints it white. Neither sets a text
 * colour, so the title inherited the theme's `button { color: #fff }` - correct for a purple
 * theme button, invisible on a white card. The dates survived only because `.nem-dim` names a
 * colour. Same failure as the filter pills: a bare class losing to a type selector.
 */
.neo-evt-mount .nem-door {
  color: var(--nem-ink);
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--nem-body);
  font-size: 15px;
  line-height: 1.4;
}

.neo-evt-mount .nem-door .nem-strong { color: var(--nem-dpurple); font-size: 16px; }
.neo-evt-mount .nem-door .nem-dim { color: var(--nem-muted); }

/* The picker is a full screen too, and it needs the same clearance. */
html.neo-evt-scanning .nem-scan-shell .nem-h1 { color: #fff; }

.nem-scan-status {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 12px var(--nem-body);
  padding: 6px 4px 12px;
  min-width: 0;
}

.nem-scan-status .nem-dim { color: rgba(255, 255, 255, 0.6); }

.nem-viewfinder {
  position: relative;
  flex: 1;
  border-radius: var(--nem-radius);
  overflow: hidden;
  background: #000;
}

/* The one <video> this screen owns. It is moved between renders, never rebuilt. */
.neo-evt-mount .nem-viewfinder video {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  background: #000;
}

/*
 * The tap iOS asks for. It is the whole viewfinder, because a 44px button in the middle of a
 * black rectangle is a target somebody misses while holding a clipboard.
 */
.neo-evt-mount .nem-scan-start {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  cursor: pointer;
}

.nem-scan-start-ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  position: relative;
}

.nem-scan-start-ring::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
}

.nem-scan-start-text { font: 600 15px var(--nem-body); text-transform: none; letter-spacing: normal; }

.nem-reticle {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 62vw;
  max-width: 280px;
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 18px;
}

.nem-viewfinder-msg { position: absolute; inset: auto 0 24px; text-align: center; font: 500 13px var(--nem-body); }

/*
 * Controls sit at the bottom, under the thumb, always. A control at the top of a phone is a
 * control that requires two hands, and the other hand is holding a clipboard.
 */
.nem-scan-controls {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  padding-bottom: env(safe-area-inset-bottom, 8px);
}

.nem-scan-controls .nem-btn { flex: 1; padding: 16px 8px; font-size: 13px; }
.nem-scan-controls .nem-btn.ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.25); }

.nem-door-list { display: grid; gap: 12px; }
.nem-door { padding: 20px; text-align: left; cursor: pointer; border: none; }
.nem-door-sub { margin: 4px 0 20px; font: 400 13px var(--nem-body); color: rgba(255, 255, 255, 0.6); }
.nem-door-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.nem-door .nem-strong { font: 600 17px var(--nem-display); color: var(--nem-dpurple); }
.nem-door .nem-dim { color: var(--nem-muted); }
.nem-door .nem-dim + .nem-dim { margin-top: 2px; }

/* The one door somebody is standing at. Green, because every other cue on this screen is purple. */
.nem-door-live {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(63, 143, 95, 0.14);
  color: var(--nem-admit);
  font: 600 10px var(--nem-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*
 * What this door is. Under the status bar, above the viewfinder, two facts and no chrome.
 * It is the answer to "am I in the right building" for somebody who was handed this phone
 * ninety seconds ago.
 */
.nem-scan-event {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 0 4px 10px;
  font: 400 12px var(--nem-body);
  color: rgba(255, 255, 255, 0.62);
}

.nem-scan-event-when { font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.nem-scan-event-where::before { content: '\00b7'; margin-right: 10px; opacity: 0.5; }

@media (max-width: 420px) {
  .nem-scan-event-where::before { content: none; }
  .nem-scan-event-where { flex-basis: 100%; }
}

/* Nothing on today. The way out is the only thing on the screen. */
.nem-door-empty { text-align: center; padding: 48px 20px; display: grid; gap: 16px; justify-items: center; }
.nem-door-empty .nem-dim { color: rgba(255, 255, 255, 0.65); margin: 0; }

/* Below the list, never above it: the open door is what the thumb should reach first. */
.nem-door-more { margin-top: 20px; justify-self: center; }
.nem-scan-shell .nem-door-more { align-self: center; }

/*
 * The door you are on, and the way off it.
 *
 * The viewfinder never named the event. Somebody handed a phone at the top of a shift could
 * not tell, from the screen, which door they were admitting people to - and after the
 * "Change door" button came out of the control row there was no way back either. One element
 * answers both, at the top of the screen where a thumb does not go.
 */
.neo-evt-mount .nem-scan-door {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 46%;
  padding: 6px 12px 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: 500 12px var(--nem-body);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.neo-evt-mount .nem-scan-door:hover { background: rgba(255, 255, 255, 0.14); }
.nem-scan-door-caret { font-size: 16px; line-height: 1; opacity: 0.7; }
.nem-scan-door-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/*
 * The find field, under the live viewfinder.
 *
 * `.nem-manual` was a screen that replaced the camera. This replaces nothing: the camera keeps
 * running above it, so a person who finds their QR code halfway through typing their name just
 * holds it up.
 */
.nem-find { margin-top: 10px; }

.nem-find-row { display: flex; gap: 8px; align-items: center; }

.neo-evt-mount .nem-find-input {
  flex: 1;
  min-width: 0;
  font: 400 15px var(--nem-body);
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--nem-radius);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
}

.neo-evt-mount .nem-find-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.neo-evt-mount .nem-find-input:focus { outline: none; border-color: #fff; background: rgba(255, 255, 255, 0.14); }

.nem-find-results { display: grid; gap: 6px; margin-top: 8px; }

/* Each hit is a 48px target. A door is not a place for a 32px row. */
.neo-evt-mount .nem-find-hit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--nem-radius);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.neo-evt-mount .nem-find-hit:hover { background: rgba(255, 255, 255, 0.14); }
.nem-find-hit-name { font: 600 15px var(--nem-body); }
.nem-find-hit-meta { font: 500 12px var(--nem-body); color: rgba(255, 255, 255, 0.6); white-space: nowrap; }

/* Somebody already inside is shown, never hidden, and cannot be admitted twice by a tap. */
.neo-evt-mount .nem-find-hit.in { opacity: 0.55; }
.nem-find-hit.in .nem-find-hit-meta { color: var(--nem-warn); }

.nem-find .nem-inline-error { color: #ffb4ac; }

/* "94 of 120 admitted". The only number an organizer asks for during a shift. */
.nem-scan-tally { margin-left: auto; font: 500 12px var(--nem-body); white-space: nowrap; }
.nem-scan-tally strong { font-weight: 700; }
.nem-scan-tally .nem-dim { color: rgba(255, 255, 255, 0.6); }

/*
 * The result screen. Colour before words: at three metres, in sun, a green field and a red
 * field are distinguishable when 48px type is not. The word is there for the 8% of men who
 * cannot tell those two colours apart, which is why "Admit" and "Do not admit" are also the
 * largest thing on the screen and say what to do rather than what happened.
 */
.nem-result {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: #fff;
  cursor: pointer;
}

.nem-result.admit { background: var(--nem-admit); }
.nem-result.warn { background: var(--nem-warn); }
.nem-result.refuse { background: var(--nem-refuse); }

.nem-result-title { font: 700 clamp(40px, 13vw, 72px)/1 var(--nem-display); letter-spacing: -1px; }
.nem-result-name { font: 600 clamp(20px, 6vw, 30px) var(--nem-body); margin-top: 18px; }
.nem-result-type { font: 500 15px var(--nem-body); opacity: 0.85; margin-top: 4px; }
.nem-result-msg { font: 500 15px var(--nem-body); margin-top: 16px; max-width: 30ch; opacity: 0.9; }
.nem-result-num { font: 600 13px var(--nem-body); margin-top: 20px; opacity: 0.7; letter-spacing: 1px; }
.nem-result-tap { position: absolute; bottom: 40px; font: 500 12px var(--nem-body); opacity: 0.65; }

/*
 * Undo.
 *
 * On the green screen only, and large: the hand holding this phone is also holding a
 * clipboard, and the two seconds after a mistaken admission are the only two seconds in
 * which it can be corrected without opening a laptop. The admit screen therefore stays up
 * for four seconds rather than two.
 *
 * It sits inside a tap-to-dismiss surface, so the click handler stops propagation. The
 * outline style is deliberate: it must not compete with the word "Admit" for the first
 * glance, which is what somebody at arm's length is reading.
 */
.neo-evt-mount .nem-result-undo {
  margin-top: 26px;
  min-height: 52px;
  padding: 14px 34px;
  font: 600 15px var(--nem-body);
  text-transform: none;
  letter-spacing: normal;
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--nem-radius-pill);
  cursor: pointer;
}

.neo-evt-mount .nem-result-undo:hover { background: rgba(0, 0, 0, 0.28); }
.neo-evt-mount .nem-result-undo:disabled { opacity: 0.6; cursor: default; }

/* ================================================================ 5. admin */

/* `.nem-wrap` carries the padding. This element is `nem-wrap nem-admin`. */
.nem-admin-nav { display: flex; gap: 8px; }
.nem-admin-nav .nem-chip { text-decoration: none; }

.nem-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.nem-tile { padding: 18px 20px; }
.nem-tile-label { font: 600 11px var(--nem-body); letter-spacing: 0.5px; text-transform: uppercase; color: var(--nem-muted); }
.nem-tile-value { font: 700 32px var(--nem-display); color: var(--nem-dpurple); line-height: 1.1; margin-top: 4px; }

.nem-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--nem-line-2); border-radius: var(--nem-radius); overflow: hidden; }
.nem-table th { text-align: left; font: 600 11px var(--nem-body); letter-spacing: 0.5px; text-transform: uppercase; color: var(--nem-muted); padding: 12px 14px; border-bottom: 1px solid var(--nem-line-2); }
.nem-table td { padding: 12px 14px; border-bottom: 1px solid var(--nem-line-2); font-size: 13px; vertical-align: middle; }
.nem-table tbody tr:last-child td { border-bottom: none; }
.nem-table td .nem-btn { margin-right: 6px; }

.nem-form { max-width: 720px; }
.nem-form-step { padding: 22px 24px; margin-bottom: 18px; }

.nem-feed { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.nem-feed li { padding: 14px 18px; }

/* The key is shown once. It is the only thing on the screen. */
.nem-modal { position: fixed; inset: 0; background: rgba(38, 26, 72, 0.7); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 9999; }
.nem-modal-body { max-width: 460px; padding: 28px; text-align: center; }
.nem-key { display: block; font: 600 15px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; background: #faf9f6; border: 1px solid var(--nem-line); border-radius: 8px; padding: 14px; margin: 16px 0; }

/* ================================================================ auth */

.nem-auth { max-width: 380px; margin: 48px auto; }
.nem-auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 12.5px; }
.nem-auth-links a { color: var(--nem-purple); text-decoration: none; }
.nem-auth-links a:hover { color: var(--nem-orange); }

/* ============================================================================
 * DETAIL HERO (#3) — 4:5 poster beside the title, on NeoYug deep purple.
 *
 * Replaces the old full-bleed band + separate 16:9 media box + video. The band and media
 * rules above are left in place but are no longer emitted by neo-evt-detail.js.
 * ==========================================================================*/
.nem-detail-hero {
  position: relative;
  overflow: hidden;
  margin: calc(-1 * var(--nem-wrap-pad-y)) calc(50% - 50vw) 40px;
  padding: calc(48px + var(--nem-header-offset)) var(--nem-wrap-pad-x) 48px;
  background: var(--nem-dpurple);
  color: #fff;
}

/* Optional texture image. AppearanceService/admin can set --nem-hero-texture to url(...);
 * with it unset the hero is flat deep purple, which is the approved default. */
.nem-detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--nem-hero-texture, none) center / cover no-repeat;
  opacity: var(--nem-hero-texture-opacity, 0.22);
  mix-blend-mode: overlay;
}

.nem-detail-hero-in {
  position: relative;
  z-index: 1;
  max-width: var(--nem-wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}

.nem-detail-hero--noposter .nem-detail-hero-in { grid-template-columns: minmax(0, 1fr); }

.nem-hero-poster {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--nem-skeleton);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.neo-evt-mount .nem-detail-hero .nem-hero-poster > img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  margin: 0;
}

.nem-hero-info { min-width: 0; }

.neo-evt-mount .nem-detail-hero .nem-hero-eyebrow {
  color: #cbb6ec;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.neo-evt-mount .nem-detail-hero .nem-h1 {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  margin: 0 0 14px;
}

.neo-evt-mount .nem-detail-hero .nem-hero-when { font-size: 15px; margin: 0 0 4px; opacity: 0.96; }
.neo-evt-mount .nem-detail-hero .nem-hero-where { font-size: 13.5px; margin: 0 0 16px; opacity: 0.8; }
.neo-evt-mount .nem-detail-hero .nem-lede { color: #efe6fb; max-width: 60ch; margin: 0 0 18px; }

.nem-hero-cat {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 12px;
  margin: 0 0 20px;
}

.nem-hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.neo-evt-mount .nem-detail-hero .nem-hero-book { background: #fff; color: var(--nem-dpurple); }
.neo-evt-mount .nem-detail-hero .nem-hero-book:hover { background: #f0e8fb; }
.nem-hero-price { font-size: 15px; font-weight: 600; color: #fff; }

/* ============================================================================
 * SHARE — a secondary, outlined button in the hero CTA row. On native-share
 * devices it opens the OS sheet; on desktop it opens the popover menu below.
 * ==========================================================================*/
.nem-share { position: relative; display: inline-flex; }

.neo-evt-mount .nem-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 13px var(--nem-body);
  padding: 10px 18px;
  border-radius: var(--nem-radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  text-transform: none;
  letter-spacing: normal;
}

.neo-evt-mount .nem-share-btn .nem-icon { width: 16px; height: 16px; color: currentColor; }
.neo-evt-mount .nem-share-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; transform: translateY(-1px); }
.neo-evt-mount .nem-share-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* The popover is mounted on <body> (the hero clips overflow), so it is positioned
 * fixed by JS and lives outside .neo-evt-mount — hence it is NOT scoped to the mount. */
.nem-share-menu {
  position: fixed;
  z-index: 1000;
  min-width: 220px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--nem-line-2, #e3ddd2);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(38, 26, 72, 0.24);
  animation: nem-share-in 0.14s ease-out;
}

@keyframes nem-share-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.nem-share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin: 0;
  border: 0 !important;
  background: transparent;
  border-radius: 10px;
  font: 600 14px Poppins, system-ui, -apple-system, sans-serif;
  color: #261A48;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  /* Defensive: the menu lives on <body>, so theme button/link rules can reach it. */
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  min-height: 0 !important;
  height: auto !important;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

.nem-share-row:hover { background: #f4eefb; }
.nem-share-row:focus-visible { outline: 2px solid #8D22C3; outline-offset: -2px; }

.nem-share-ico { width: 22px; height: 22px; flex: 0 0 auto; display: block; }

/* Brand colour lives on the mark, so the menu reads like a share sheet. */
.nem-share-row[data-net="whatsapp"] .nem-share-ico { color: #25D366; }
.nem-share-row[data-net="facebook"] .nem-share-ico { color: #1877F2; }
.nem-share-row[data-net="x"] .nem-share-ico { color: #000; }
.nem-share-row[data-net="linkedin"] .nem-share-ico { color: #0A66C2; }
.nem-share-row[data-net="telegram"] .nem-share-ico { color: #229ED9; }
.nem-share-row[data-net="email"] .nem-share-ico { color: #6b6478; }
.nem-share-row[data-net="copy"] .nem-share-ico { color: #8D22C3; }

.nem-share-sep { height: 1px; margin: 6px 8px; background: var(--nem-line-2, #e3ddd2); }

.nem-share-copy.is-copied { background: #eaf7ee; color: #1c7a3e; }
.nem-share-copy.is-copied .nem-share-ico { color: #1c7a3e; }

@media (max-width: 480px) {
  .nem-share-menu { min-width: 200px; }
}

@media (max-width: 820px) {
  .nem-detail-hero-in { grid-template-columns: 1fr; gap: 22px; }
  .nem-hero-poster { max-width: 280px; margin-left: auto; margin-right: auto; }
}

/* ============================================================================
 * STICKY BOOK BAR (#3) — ported from the landing pages. Slides up when the hero
 * "Book now" scrolls out of view. Replaces the old mobile-only book bar.
 * ==========================================================================*/
.nem-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  transform: translateY(120%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
  border-top: 1px solid var(--nem-line-2);
  box-shadow: 0 -10px 34px rgba(38, 26, 72, 0.14);
}

.nem-sticky.show { transform: translateY(0); }

.nem-sticky-in {
  max-width: var(--nem-wrap-max);
  margin: 0 auto;
  padding: 12px 26px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.nem-sticky-thumb {
  flex: none;
  width: 52px;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: var(--nem-skeleton);
}

.neo-evt-mount .nem-sticky-thumb > img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  margin: 0;
}

.nem-sticky-meta { flex: 1; min-width: 0; }

.nem-sticky-title {
  color: var(--nem-dpurple);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nem-sticky-sub { color: var(--nem-muted); font-weight: 600; font-size: 13px; margin-top: 2px; }
.nem-sticky-cta { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.nem-sticky-note { color: var(--nem-muted); font-weight: 600; font-size: 12.5px; }

@media (max-width: 680px) {
  .nem-sticky-thumb, .nem-sticky-meta { display: none; }
  .nem-sticky-in { padding: 12px 16px; gap: 6px; }
  .nem-sticky-cta { width: 100%; }
  .neo-evt-mount .nem-sticky-cta .nem-btn { width: 100%; }
}

/* ============================================================================
 * GALLERY (#4) + lightbox
 * ==========================================================================*/
.nem-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 640px) { .nem-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

.neo-evt-mount .nem-gallery-cell {
  padding: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  background: var(--nem-skeleton);
  aspect-ratio: 4 / 3;
  display: block;
}

.neo-evt-mount .nem-gallery-cell > img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.neo-evt-mount .nem-gallery-cell:hover > img { transform: scale(1.05); }
.neo-evt-mount .nem-gallery-cell:focus-visible { outline: 3px solid var(--nem-purple); outline-offset: 2px; }

.nem-lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 6, 22, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.nem-lb.open { display: flex; }

.nem-lb-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 1100px;
  width: 100%;
  max-height: 100%;
}

/*
 * The stage is a ROW: [prev] [image] [next], laid out by flex.
 *
 * The arrows used to be position:absolute against a stage that was width:100% of an
 * 1100px panel, so they pinned to the panel's edges rather than the picture's. A photo is
 * contained inside max-height:70vh, so it is almost always narrower than that -- the
 * arrows ended up floating in the scrim halfway out to the page behind, unattached to
 * anything. Making the stage shrink-wrap does not fix it either: a flex item's fit-content
 * width comes from the image's NATURAL width, not its height-constrained rendered width,
 * so a portrait photo would re-detach them.
 *
 * As flex siblings they sit beside the picture at every aspect ratio, with no absolute
 * positioning and no arithmetic to get wrong.
 */
.nem-lb-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 0;
}

.nem-lb-img {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  max-height: 70vh;
  border-radius: 10px;
  display: block;
  object-fit: contain;
}

/*
 * Both controls carry a full reset. They are <button>s, and the theme's button rules reach
 * anything on the page -- the same reason the share menu needed hardening in 1.20.
 */
.neo-evt-mount .nem-lb-nav,
.neo-evt-mount .nem-lb-close {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  /* Deep purple, not a 14%-white wash: a pale translucent disc over a bright photo has
   * nothing to separate it from the picture. */
  background: rgba(38, 26, 72, 0.72);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.neo-evt-mount .nem-lb-nav:hover,
.neo-evt-mount .nem-lb-close:hover {
  background: rgba(38, 26, 72, 0.95);
  border-color: rgba(255, 255, 255, 0.65);
}

.neo-evt-mount .nem-lb-nav:focus-visible,
.neo-evt-mount .nem-lb-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/*
 * .nem-icon's own default is `color: var(--nem-purple)`, and a theme rule forces svg
 * colour with !important on this site (the 1.26 host chevron). Purple on a purple disc is
 * invisible, so pin the stroke white the same way that fix did.
 */
.neo-evt-mount .nem-lb-nav .nem-icon,
.neo-evt-mount .nem-lb-close .nem-icon {
  width: 22px;
  height: 22px;
  color: #fff !important;
}

.neo-evt-mount .nem-lb-nav .nem-icon path,
.neo-evt-mount .nem-lb-close .nem-icon path {
  stroke: #fff !important;
  stroke-width: 2;
}

/* One chevron glyph, drawn pointing down, turned to face each way. */
.neo-evt-mount .nem-lb-nav.prev .nem-icon { transform: rotate(90deg); }
.neo-evt-mount .nem-lb-nav.next .nem-icon { transform: rotate(-90deg); }

/* Pinned to the viewport, so it does not wander with the picture's shape. */
.neo-evt-mount .nem-lb-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
}

.nem-lb-counter { color: #fff; font-size: 13px; opacity: 0.8; }
.nem-lb-strip { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding-bottom: 4px; }

.neo-evt-mount .nem-lb-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  background: none;
  padding: 0;
  cursor: pointer;
}

.nem-lb-thumb.on { border-color: #fff; }
.neo-evt-mount .nem-lb-thumb > img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }

/*
 * On a phone the picture already fills the width, so a 46px arrow either side would take
 * a quarter of it. Lay them back over the image instead -- the one case where absolute
 * positioning is right, because here the image really is as wide as the stage.
 */
@media (max-width: 640px) {
  .nem-lb { padding: 12px; }
  .nem-lb-stage { gap: 0; }

  .neo-evt-mount .nem-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
  }

  .neo-evt-mount .nem-lb-nav.prev { left: 6px; }
  .neo-evt-mount .nem-lb-nav.next { right: 6px; }
  .neo-evt-mount .nem-lb-nav .nem-icon { width: 18px; height: 18px; }
  .neo-evt-mount .nem-lb-close { top: 10px; right: 10px; width: 38px; height: 38px; }
}

/* ============================================================================
 * HOSTS (#5) — one "Hosts" heading; featured large, the rest in a compact row.
 * ==========================================================================*/
.nem-hosts-featured { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 640px) { .nem-hosts-featured { grid-template-columns: 1fr; } }

.nem-hhost { background: #fff; border: 1px solid var(--nem-line-2); border-radius: 14px; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.nem-hhost.open { box-shadow: 0 10px 30px -18px rgba(38, 26, 72, .4); border-color: #d8cfe6; }
.nem-hhost-head { display: flex; gap: 14px; align-items: center; padding: 14px; }
.neo-evt-mount .nem-hhost.has-bio .nem-hhost-head { cursor: pointer; }
.nem-hhost-meta { flex: 1; min-width: 0; }
.nem-hhost-av, .nem-shost-av { border-radius: 50%; overflow: hidden; background: var(--nem-skeleton); flex: none; display: block; }
.nem-hhost-av { width: 64px; height: 64px; }
.neo-evt-mount .nem-hhost-av > img, .neo-evt-mount .nem-shost-av > img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.nem-hhost-name { font: 700 15px var(--nem-display); color: var(--nem-dpurple); margin: 0; }
.nem-hhost-role { font: 400 12px var(--nem-body); color: var(--nem-muted); margin: 2px 0 0; }

.nem-hosts-row { display: flex; flex-wrap: wrap; gap: 14px; }
.nem-shost { width: 92px; text-align: center; border: 1px solid transparent; border-radius: 12px; padding: 6px 4px; transition: background .2s, border-color .2s; }
.neo-evt-mount .nem-shost.has-bio { cursor: pointer; }
.neo-evt-mount .nem-shost.has-bio:hover { background: #fff; }
.nem-shost.on { background: #fff; border-color: #d8cfe6; }
.nem-shost-av { width: 56px; height: 56px; margin: 0 auto 6px; }
.nem-shost-name { font: 600 12px var(--nem-body); color: var(--nem-dpurple); margin: 0; line-height: 1.2; }
.nem-shost-role { font: 400 11px var(--nem-body); color: var(--nem-muted); margin: 1px 0 0; }

/* Per-host Instagram link + bio dropdown (added with the "more about the host" feature). */
.neo-evt-mount .nem-name-row { display: flex; align-items: center; gap: 8px; }
.neo-evt-mount .nem-ig { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--nem-line-2); color: var(--nem-purple); background: #fff; text-decoration: none; }
.neo-evt-mount .nem-ig svg { width: 15px; height: 15px; display: block; }
/* Fixed on hover per Kunal's ask — pin every state to the resting look so the theme can't
   restyle the link on hover/focus. */
.neo-evt-mount .nem-ig:hover, .neo-evt-mount .nem-ig:focus { color: var(--nem-purple); background: #fff; border-color: var(--nem-line-2); text-decoration: none; }

.neo-evt-mount .nem-chev { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--nem-line-2); background: #fff; color: var(--nem-purple); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-appearance: none; appearance: none; padding: 0; transition: background .25s, color .25s, border-color .25s; }
.neo-evt-mount .nem-chev svg { width: 16px; height: 16px; transition: transform .25s; }
.neo-evt-mount .nem-hhost.open .nem-chev { background: var(--nem-purple); color: #fff; border-color: var(--nem-purple); }
.neo-evt-mount .nem-hhost.open .nem-chev svg { transform: rotate(180deg); }
/*
 * Open-state chevron must be white on the purple circle, on desktop and phone.
 * The icon stroke is `currentColor` (a presentation attribute, lowest priority), so a
 * theme/Elementor rule that forces the SVG colour to the brand purple with !important
 * leaves the closed chevron looking fine (purple-on-white) but paints the open one
 * purple-on-purple. Pin both the colour and the path stroke to white with !important so
 * the open chevron is deterministic regardless of what the surrounding theme does.
 */
.neo-evt-mount .nem-hhost.open .nem-chev,
.neo-evt-mount .nem-hhost.open .nem-chev svg { color: #fff !important; }
.neo-evt-mount .nem-hhost.open .nem-chev svg path { stroke: #fff !important; }

.neo-evt-mount .nem-hhost-bio { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.neo-evt-mount .nem-hhost-bio-in { padding: 14px 15px 15px; border-top: 1px solid var(--nem-line-2); font: 400 14px/1.7 var(--nem-body); color: #4a4658; }
.neo-evt-mount .nem-hhost-bio-in p { margin: 0; }

.neo-evt-mount .nem-shost-ig { display: inline-flex; align-items: center; justify-content: center; color: var(--nem-purple); margin-top: 3px; }
.neo-evt-mount .nem-shost-ig svg { width: 13px; height: 13px; }

.neo-evt-mount .nem-shost-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.neo-evt-mount .nem-shost-panel-in { margin-top: 14px; background: #fff; border: 1px solid var(--nem-line-2); border-radius: 14px; padding: 16px 18px; }
.neo-evt-mount .nem-shost-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.neo-evt-mount .nem-shost-panel-head .nem-hhost-av { width: 44px; height: 44px; }
.neo-evt-mount .nem-shost-panel-name { font: 700 15px var(--nem-display); color: var(--nem-dpurple); margin: 0; }
.neo-evt-mount .nem-shost-panel-role { font: 400 12px var(--nem-body); color: var(--nem-muted); margin: 2px 0 0; }
.neo-evt-mount .nem-shost-panel-bio { font: 400 14px/1.7 var(--nem-body); color: #4a4658; margin: 0; }

/* ============================================================================
 * TERMS (#6) — collapsible sections.
 * ==========================================================================*/
.nem-terms .nem-acc { border: 1px solid var(--nem-line-2); border-radius: 12px; overflow: hidden; background: #fff; }
.nem-acc-item + .nem-acc-item { border-top: 1px solid var(--nem-line-2); }

.neo-evt-mount .nem-acc-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: 600 14px var(--nem-body);
  color: var(--nem-dpurple);
}

.nem-acc-chev { color: var(--nem-purple); transition: transform 0.2s ease; font-size: 18px; line-height: 1; }
.nem-acc-row.open .nem-acc-chev { transform: rotate(90deg); }
.nem-acc-content { padding: 0 18px 16px; }
.nem-acc-body { font: 400 14px/1.7 var(--nem-body); color: var(--nem-ink); }
/*
 * The accordion body is HTML (basic allow-list). It previously carried
 * white-space:pre-line, so every newline in the pasted source rendered as an extra
 * blank line ON TOP of the block margins - that's the big gap between a heading and
 * its list, and between numbered items. Same clean rich-text spacing as .nem-prose.
 */
.neo-evt-mount .nem-acc-body > :first-child { margin-top: 0; }
.neo-evt-mount .nem-acc-body > :last-child { margin-bottom: 0; }
.neo-evt-mount .nem-acc-body p { margin: 0 0 10px; }
.neo-evt-mount .nem-acc-body h3,
.neo-evt-mount .nem-acc-body h4 { margin: 16px 0 8px; font-weight: 600; }
.neo-evt-mount .nem-acc-body ul,
.neo-evt-mount .nem-acc-body ol { margin: 0 0 10px; padding-left: 20px; }
.neo-evt-mount .nem-acc-body li { margin: 0 0 4px; }
.neo-evt-mount .nem-acc-body p:empty { display: none; }