/**
 * Next Level Card Show Manager — event detail page.
 * Author: Jaypee M. | Maglacas Digital
 *
 * Unlike public.css, this page owns its own look: the sections are full-bleed bands that run
 * near-black from the hero down to the closing CTA, which only works if the colours are
 * stated rather than inherited. Everything is scoped under .nlcs-event so it cannot leak
 * into the theme.
 *
 * Two colours do two jobs and must not be swapped. Red is the brand — eyebrows, date pills,
 * the closing band. Blue is "buy": every ticket button on the site is blue, and a red one
 * here would read as one more piece of branding rather than the thing to press.
 */

.nlcs-event {
	/* The wash the homepage lays over its hero art. #b00a09 at 72%. */
	--nlcs-brand-wash: #b00a09b8;

	/*
	 * One red for the whole page, read off the Breakdance global setting
	 * (--bde-brand-primary-color). The banner, the closing band, the eyebrows and the date
	 * pills are all the same site — carrying a second, near-identical red for the small
	 * accents only guaranteed that a pill would sit a few degrees off the band behind it.
	 */
	--nlcs-red: #e9241f;
	--nlcs-red-dark: #c31a16;

	/*
	 * The site's button colours, read off the Breakdance global button settings: primary is
	 * palette colour 1, secondary is a plain white plate with the site's --bde-background-color
	 * as its text. Both hover states are invented — Breakdance leaves them identical to the
	 * resting state, and a button that does not answer the pointer reads as a dead one.
	 */
	--nlcs-blue: #2737b9;
	--nlcs-blue-dark: #1e2b91;

	--nlcs-ink: #1a1a1f;
	--nlcs-night: #0b0b0e;
	--nlcs-yellow: #ffd400;
	--nlcs-line: rgba(0, 0, 0, .12);

	font-size: 16px;
	line-height: 1.5;

	/*
	 * The 100vw bands below are measured against the viewport INCLUDING the scrollbar, so on
	 * any desktop with a classic scrollbar they are ~15px wider than the space available and
	 * the whole page gains a horizontal scrollbar. Clipping here absorbs that. `clip` rather
	 * than `hidden`: hidden would make this a scroll container and silently break any
	 * position:sticky the theme puts in the page.
	 */
	overflow-x: clip;
}

/*
 * Padding and borders are counted inside every width here. Most themes set this globally, but
 * a page that falls apart when a theme does not is not one we can ship: without it the block
 * button in the ticket card is 100% + 56px of padding + 4px of border, and hangs 60px out of
 * its own card.
 */
.nlcs-event *,
.nlcs-event *::before,
.nlcs-event *::after {
	box-sizing: border-box;
}

/*
 * Full-bleed even inside a theme that wraps the template in a padded container: the bands
 * are the design, and a hero with a white gutter down each side is not the same page.
 */
.nlcs-event > section {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.nlcs-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}

.nlcs-event .nlcs-eyebrow {
	margin: 0 0 12px;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--nlcs-red);
}

.nlcs-event .nlcs-link {
	font-weight: 800;
	color: var(--nlcs-red);
	text-decoration: none;
	white-space: nowrap;
}

/* The colour is restated on hover, not just the underline: the theme's `a:hover` is more
   specific than the rule above and would otherwise recolour it. */
.nlcs-event .nlcs-link:hover {
	color: var(--nlcs-red);
	text-decoration: underline;
}

/* ---------- Buttons ---------- */

/*
 * The standard button — the same one [nlcs_next_event] and [nlcs_ticket_link] draw in
 * public.css. Pill, 0.8125rem at weight 800, uppercase on .06em of tracking, an arrow on the
 * primary that steps out under the pointer, and the phone number a shade lighter than the
 * words in front of it on the call fallback.
 *
 * This page used to carry Breakdance's own button instead — 0.6rem radius, 0.9rem at 600, no
 * arrow — so the "Get Tickets" in the homepage hero and the one on the show it links to were
 * visibly two different buttons. Whichever of the three a visitor presses first, the next one
 * they meet should be the same object.
 *
 * inline-flex rather than inline-block: the label is centred by the box rather than by
 * leading, so the block variant below stays centred for free.
 */
.nlcs-event .nlcs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Primary — the buy button, everywhere it appears. Blue for the reason [nlcs_ticket_link] is
   blue: it is the same button, and here the colour is the only thing left saying "buy". */
.nlcs-event .nlcs-btn--blue {
	background: var(--nlcs-blue);
	border-color: var(--nlcs-blue);
	color: #fff;
}

.nlcs-event .nlcs-btn--blue:hover,
.nlcs-event .nlcs-btn--blue:focus-visible {
	background: var(--nlcs-blue-dark);
	border-color: var(--nlcs-blue-dark);
	color: #fff;
}

/* Secondary — the white plate that sits beside it. */
.nlcs-event .nlcs-btn--white {
	background: #fff;
	border-color: #fff;
	color: var(--nlcs-ink);
}

.nlcs-event .nlcs-btn--white:hover,
.nlcs-event .nlcs-btn--white:focus-visible {
	background: #e7e7ec;
	border-color: #e7e7ec;
	color: var(--nlcs-ink);
}

/* Red, not the button's own colour: these sit on the near-black bands as often as on the white
   ticket card, and blue at 2px on #0b0b0e is a ring nobody tabbing through can find. */
.nlcs-event .nlcs-btn:focus-visible {
	outline: 2px solid var(--nlcs-red);
	outline-offset: 2px;
}

.nlcs-event .nlcs-btn--block {
	display: flex;
	width: 100%;
}

/* The arrow leads the eye out to the checkout, so it moves and the words do not. */
.nlcs-event .nlcs-btn__arrow {
	transition: transform .18s ease;
}

.nlcs-event .nlcs-btn:hover .nlcs-btn__arrow,
.nlcs-event .nlcs-btn:focus-visible .nlcs-btn__arrow {
	transform: translateX(3px);
}

/* A touch lighter than the words in front of it, so "Call Us" reads first and the digits read
   as the thing to dial. */
.nlcs-event .nlcs-btn__num {
	font-weight: 700;
	opacity: .92;
}

/* ---------- Draft preview bar ---------- */

/*
 * Yellow, not brand red: red is a brand colour all over this page, and a red bar reads as
 * part of the design rather than a warning that none of this is public yet.
 */
.nlcs-preview-bar {
	padding: 12px 0;
	background: var(--nlcs-yellow);
	color: var(--nlcs-ink);
	font-size: .85rem;
}

.nlcs-preview-bar .nlcs-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
}

.nlcs-preview-bar strong {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.nlcs-event .nlcs-preview-bar a,
.nlcs-event .nlcs-preview-bar a:hover {
	margin-left: auto;
	color: inherit;
	font-weight: 800;
	white-space: nowrap;
}

/* ---------- Red bands ----------
 *
 * The banner at the top and the closing CTA at the bottom are the same surface, so they are
 * built once here rather than twice. Both are the homepage's hero, not an approximation of
 * it: the Breakdance section on the front page paints brand red, lays the backdrop art over
 * it contained and tiled across, and washes the result with a flat #b00a09b8. Those are the
 * values below, so all three banners are one colour and stay one colour if the art is
 * swapped in Settings.
 */

/*
 * The diagonal streaks are the fallback for a site with no backdrop image set: they show
 * through wherever the art does not reach, and are all there is on a fresh install.
 *
 * `isolation` keeps the z-indexes below sealed inside each band: they order background
 * layers against the content, and they have no business competing with a sticky header or
 * anything else the theme stacks around us.
 */
.nlcs-ehero,
.nlcs-ecta {
	position: relative;
	isolation: isolate;
	background-color: var(--nlcs-red);
	background-image:
		repeating-linear-gradient(112deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 74px),
		repeating-linear-gradient(112deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 128px);
	color: #fff;
	overflow: hidden;
}

/*
 * The backdrop art from Settings, at full strength and on the homepage's own sizing:
 * `contain` + `repeat-x` scales the artwork to the band's height and tiles it sideways,
 * which is what keeps the geometry at a consistent size instead of blowing one corner of a
 * 728px-wide graphic up across a 2560px screen.
 *
 * It is a standalone class rather than a child of either block: the same layer, in two
 * places, doing exactly one job.
 */
.nlcs-band-art {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: contain;
	background-repeat: repeat-x;
	background-position: center center;
}

/*
 * The show's own featured image, when it has one. Banner only — the closing CTA is a call to
 * action rather than a picture of the show. A flyer or a photo, so it stays a tint over the
 * art rather than replacing it: the type has to stay readable over whatever somebody
 * uploads, and a show flyer is rarely a good background at full strength.
 */
.nlcs-ehero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	opacity: .2;
	mix-blend-mode: luminosity;
}

/*
 * The wash. Flat rather than a gradient, because that is what the homepage uses and a
 * gradient here would darken one end of the band and give the pair away.
 *
 * One layer, whatever combination of images is behind it — two stacked washes, one per
 * image, would black out the banner on a show that has both.
 */
.nlcs-ehero::after,
.nlcs-ecta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--nlcs-brand-wash);
	pointer-events: none;
}

/* Above the wash. Without this the content is painted under it and goes muddy. */
.nlcs-ehero__inner,
.nlcs-ecta > .nlcs-wrap {
	position: relative;
	z-index: 2;
}

/*
 * The top padding clears the site header rather than merely following it. At 40px the crumbs
 * sat tight under the nav bar and read as part of it; the extra room lets the hero start on
 * its own line.
 */
.nlcs-ehero__inner {
	padding-top: 72px;
	padding-bottom: 68px;
}

.nlcs-crumbs {
	margin-bottom: 30px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.nlcs-event .nlcs-crumbs a {
	color: inherit;
	text-decoration: none;
}

.nlcs-event .nlcs-crumbs a:hover {
	color: #fff;
}

.nlcs-crumbs span {
	margin-left: 8px;
}

.nlcs-crumbs span + span {
	color: #fff;
}

.nlcs-ehero__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px;
	align-items: start;
}

.nlcs-ehero .nlcs-eyebrow {
	color: var(--nlcs-yellow);
}

.nlcs-event .nlcs-ehero__title {
	margin: 0 0 12px;
	font-size: clamp(2.2rem, 5.4vw, 3.6rem);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -.02em;
	color: #fff;
}

.nlcs-ehero__venue {
	margin: 0 0 34px;
	font-size: 1rem;
	color: rgba(255, 255, 255, .78);
}

.nlcs-event .nlcs-ehero__venue a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.nlcs-event .nlcs-ehero__venue a:hover {
	color: #fff;
	border-color: #fff;
}

.nlcs-ehero__desc {
	max-width: 58ch;
	margin: 0 0 30px;
	color: rgba(255, 255, 255, .8);
}

.nlcs-ehero__desc > :first-child {
	margin-top: 0;
}

.nlcs-ehero__desc > :last-child {
	margin-bottom: 0;
}

/*
 * Three columns, not a wrapping row.
 *
 * Flex-wrap put as many facts on a line as happened to fit, so the second row started under
 * whichever fact ran long — Hours is now a full "Sat 9 AM – 5 PM · Sun 9 AM – 4 PM" and it
 * dragged everything after it out of line. Fixed tracks mean Date/Hours/Admission sit over
 * Kids/Parking/Contact whatever any one of them says.
 */
.nlcs-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px 32px;
	margin: 0 0 30px;
}

.nlcs-facts__item dt {
	margin-bottom: 6px;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.nlcs-facts__item dd {
	margin: 0;
	font-size: .95rem;
	font-weight: 800;
	line-height: 1.4;
	color: #fff;
	/*
	 * A value long enough to wrap splits evenly rather than dropping a lone "PM" onto a
	 * second line. Unsupported browsers just wrap as before — nothing depends on it.
	 */
	text-wrap: balance;
}

.nlcs-event .nlcs-facts__item dd a {
	color: inherit;
	text-decoration: none;
}

.nlcs-event .nlcs-facts__item dd a:hover {
	color: #fff;
	text-decoration: underline;
}

/* 1rem, the gap the homepage puts between the same two buttons. */
.nlcs-ehero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ---------- Ticket card ---------- */

.nlcs-ticket {
	padding: 26px;
	border-radius: 10px;
	background: #fff;
	color: var(--nlcs-ink);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.nlcs-ticket__eyebrow {
	margin: 0 0 10px;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--nlcs-red);
}

/*
 * "Sat & Sun" after the pass name, in the card's grey rather than the brand red — it qualifies
 * the heading, so it has to read second. The separator is drawn here rather than typed into the
 * string so a single-day show, which has no days to name, cannot print a dangling middot.
 */
.nlcs-ticket__days {
	color: rgba(0, 0, 0, .45);
}

.nlcs-ticket__days::before {
	content: "·";
	margin: 0 6px 0 4px;
}

.nlcs-ticket__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--nlcs-line);
}

.nlcs-ticket__price strong {
	font-size: 3rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
}

/*
 * Two ways in, priced differently — so each tier is its own plate rather than a row in a
 * list. A flat divided list made the $10 and the $20 read as one confusing price block;
 * separating them lets someone compare two options at a glance, which is the actual job.
 *
 * Named "adm", NOT "tier": .nlcs-tier in public.css is the vendor table-package card, and
 * public.css loads on this page too. Reusing that name inherited its column direction and
 * stacked the price under the label.
 */
/*
 * Two plates side by side, not stacked. The pair exists to be compared — general against
 * early access — and a column puts the second price under the first, which reads as a list
 * of things to buy rather than a choice between two.
 *
 * Equal tracks, so the plates stay the same width whatever their labels say.
 */
.nlcs-ticket__tiers {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	/* 20px, not the 12 this had while the "both days" line sat underneath: the plates need the
	   air that line was incidentally providing, or they close up against the Date row. */
	margin: 0 0 20px;
	padding: 0;
}

/*
 * Stacked inside the plate, because beside it there is no room: the card is 340px wide, so
 * half of it minus padding is ~140px and a name, its hours and a $20 cannot share that line.
 * Centred rather than left-aligned — two centred prices at the same height are one glance to
 * compare, where two left-aligned ones are two.
 */
.nlcs-adm {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	padding: 12px;
	border: 1px solid var(--nlcs-line);
	border-radius: 8px;
	background: rgba(0, 0, 0, .02);
	text-align: center;
}

/*
 * The upgrade carries the brand red. It is the more expensive option, so it has to look
 * like the better one rather than merely the lower row.
 */
.nlcs-adm--early {
	border-color: rgba(233, 36, 31, .38);
	background: #fff;
}

/* Name over hours, so a two-day hours string wraps under itself instead of into the price. */
.nlcs-adm__label {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	text-align: center;
}

.nlcs-adm__name {
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.2;
	color: rgba(0, 0, 0, .5);
}

.nlcs-adm--early .nlcs-adm__name {
	color: var(--nlcs-red);
}

.nlcs-adm__hours {
	font-size: .72rem;
	line-height: 1.3;
	color: rgba(0, 0, 0, .62);
}

/*
 * Pinned to the bottom of the plate. Both plates are the same height — grid stretches them —
 * so an hours line that wraps in one and not the other would otherwise leave the two prices
 * at different heights, which is the one thing this pair has to make easy to compare.
 */
.nlcs-adm__price {
	flex: none;
	margin-top: auto;
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
}

.nlcs-ticket__rows {
	margin: 0 0 16px;
}

.nlcs-ticket__rows > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.nlcs-ticket__rows > div:last-child {
	border-bottom: 0;
}

.nlcs-ticket__rows dt {
	font-size: .85rem;
	color: rgba(0, 0, 0, .55);
}

.nlcs-ticket__rows dd {
	margin: 0;
	font-size: .85rem;
	font-weight: 800;
	text-align: right;
}

.nlcs-ticket__note {
	margin: 12px 0 0;
	font-size: .72rem;
	text-align: center;
	color: rgba(0, 0, 0, .5);
}

/* ---------- Bands ---------- */

/*
 * One unbroken dark field from the floor down to the closing CTA. The sections are told
 * apart by their eyebrows and their spacing, not by alternating backgrounds — the white
 * cards are the only light in it, which is what makes them read as the content.
 */
.nlcs-esec {
	padding: 90px 0;
	background: var(--nlcs-night);
	color: #fff;
}

/* Consecutive bands are one field, so only the first pays for the top padding. */
.nlcs-esec + .nlcs-esec {
	padding-top: 0;
}

.nlcs-esec--accent .nlcs-eyebrow {
	color: var(--nlcs-yellow);
}

.nlcs-event .nlcs-esec__title {
	margin: 0 0 12px;
	font-size: clamp(1.7rem, 3.6vw, 2.4rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: #fff;
}

.nlcs-esec__intro {
	max-width: 46ch;
	margin: 0 0 36px;
	color: rgba(255, 255, 255, .65);
}

.nlcs-esec__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}

.nlcs-esec__head .nlcs-esec__title {
	margin-bottom: 0;
}

/* ---------- Filter pills ---------- */

.nlcs-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

.nlcs-pill {
	padding: 9px 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: #fff;
	color: var(--nlcs-ink);
	font: inherit;
	font-size: .8rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.nlcs-pill:hover {
	background: #e6e8ee;
}

.nlcs-pill.is-active {
	background: var(--nlcs-red);
	border-color: var(--nlcs-red);
	color: #fff;
}

/* ---------- The floor ---------- */

.nlcs-floor {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
}

/*
 * The card stacks: the identity row, then the button when the vendor has a sheet to open.
 * Cards in the same grid row stretch to the tallest, so a card with a button and one without
 * still square off — the button pinning itself to the bottom is what keeps the row honest.
 */
.nlcs-floor__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px;
	border-radius: 10px;
	background: #fff;
	color: var(--nlcs-ink);
	transition: transform .18s ease;
}

.nlcs-floor__row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.nlcs-floor__card:hover {
	transform: translateY(-2px);
}

.nlcs-floor__card[hidden] {
	display: none;
}

.nlcs-floor__logo {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	background: #eceef3;
	overflow: hidden;
}

.nlcs-floor__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nlcs-floor__body {
	flex: 1;
	min-width: 0;
}

.nlcs-event .nlcs-floor__name {
	margin: 0;
	font-size: .95rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--nlcs-ink);
}

.nlcs-floor__specialty {
	margin: 3px 0 0;
	font-size: .78rem;
	color: rgba(0, 0, 0, .55);
}

.nlcs-floor__table {
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 4px;
	background: var(--nlcs-yellow);
	color: var(--nlcs-ink);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/*
 * Pushed to the bottom of the card so the buttons line up across the row whatever the
 * specialty lines do above them.
 */
.nlcs-event .nlcs-floor__more {
	margin-top: auto;
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--nlcs-line);
	border-radius: 7px;
	background: transparent;
	color: var(--nlcs-ink);
	font: inherit;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nlcs-event .nlcs-floor__more:hover,
.nlcs-event .nlcs-floor__more:focus-visible {
	border-color: var(--nlcs-red);
	background: var(--nlcs-red);
	color: #fff;
}

.nlcs-floor__empty {
	margin: 24px 0 0;
	text-align: center;
	color: rgba(255, 255, 255, .6);
}

/* ---------- Vendor detail dialog ----------
 * The dialog is the full-viewport container, not the sheet — everything visible is the panel
 * inside it. That is what lets a click on the dialog itself mean "backdrop" in event.js, and
 * it keeps the panel free to scroll on its own without the UA's default centring fighting it.
 */

.nlcs-event .nlcs-vmodal {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 20px;
	border: 0;
	background: transparent;
	overflow: hidden;
	/* A dialog inherits nothing from .nlcs-event once it is in the top layer. */
	color: var(--nlcs-ink);
	font-size: 16px;
	line-height: 1.5;
}

/* `display` is what a closed dialog is hidden with, so the open state has to restate it. */
.nlcs-event .nlcs-vmodal[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.nlcs-event .nlcs-vmodal::backdrop {
	background: rgba(6, 6, 9, .72);
}

.nlcs-event .nlcs-vmodal__panel {
	position: relative;
	width: 100%;
	max-width: 540px;
	max-height: 100%;
	padding: 28px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
	overflow-y: auto;
	overscroll-behavior: contain;
	text-align: left;
}

.nlcs-event .nlcs-vmodal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #eceef3;
	color: var(--nlcs-ink);
	cursor: pointer;
	transition: background-color .15s ease;
}

.nlcs-event .nlcs-vmodal__close:hover {
	background: #dfe2ea;
}

.nlcs-event .nlcs-vmodal__close .nlcs-icon {
	width: 17px;
	height: 17px;
}

.nlcs-vsheet__head {
	display: flex;
	align-items: center;
	gap: 16px;
	/* Clear of the close button, which is absolutely positioned over this corner. */
	padding-right: 34px;
}

.nlcs-vsheet__logo {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	background: #eceef3;
	overflow: hidden;
}

.nlcs-vsheet__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nlcs-vsheet__id {
	min-width: 0;
}

/*
 * Two classes each, on purpose. Breakdance paints every heading with --bde-headings-color —
 * white on this site — at `.breakdance h2`, and a single class would lose to it and leave the
 * vendor's name invisible on the white panel. Same trap public.css documents for the tier cards.
 */
.nlcs-vmodal .nlcs-vsheet__name {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--nlcs-ink);
}

.nlcs-vsheet__specialty {
	margin: 4px 0 0;
	font-size: .88rem;
	color: rgba(0, 0, 0, .6);
}

.nlcs-vsheet__table {
	display: inline-block;
	margin: 8px 0 0;
	padding: 3px 9px;
	border-radius: 4px;
	background: var(--nlcs-yellow);
	color: var(--nlcs-ink);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.nlcs-vsheet__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 18px 0 0;
}

.nlcs-vsheet__cats span {
	padding: 4px 10px;
	border-radius: 999px;
	background: #eceef3;
	font-size: .72rem;
	font-weight: 700;
	color: rgba(0, 0, 0, .68);
}

.nlcs-vsheet__about,
.nlcs-vsheet__contact {
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--nlcs-line);
}

.nlcs-vmodal .nlcs-vsheet__about h3,
.nlcs-vmodal .nlcs-vsheet__contact h3 {
	margin: 0 0 8px;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nlcs-red);
}

.nlcs-vsheet__about p {
	margin: 0 0 10px;
	font-size: .92rem;
	color: rgba(0, 0, 0, .78);
}

.nlcs-vsheet__about p:last-child {
	margin-bottom: 0;
}

.nlcs-vmodal .nlcs-vsheet__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nlcs-vmodal .nlcs-vsheet__links li {
	margin: 0;
}

/*
 * Two classes on the colour rules, and it is not cosmetic. Breakdance paints every link with
 * `.breakdance a { color: var(--bde-links-color) }` — white on this site — which is one class
 * plus one element, an exact tie with a bare `.nlcs-vsheet__links a`, and it loads after this
 * file so it wins the tie. That put white labels and white currentColor icons on a white
 * panel: three pills with nothing in them. The hover rule needs the same treatment, because
 * `.breakdance a:hover` ties with `.nlcs-vsheet__links a:hover` too.
 */
.nlcs-vmodal .nlcs-vsheet__links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid var(--nlcs-line);
	border-radius: 999px;
	background: #f4f5f8;
	color: var(--nlcs-ink);
	font-size: .82rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nlcs-vmodal .nlcs-vsheet__links a:hover,
.nlcs-vmodal .nlcs-vsheet__links a:focus-visible {
	border-color: var(--nlcs-blue);
	background: var(--nlcs-blue);
	color: #fff;
}

.nlcs-vsheet__links .nlcs-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/*
 * The bio is the vendor's own copy and may carry links. Same white-on-white risk, so it is
 * headed off here rather than left to whichever vendor first pastes one in.
 */
.nlcs-vmodal .nlcs-vsheet__about a {
	color: var(--nlcs-blue);
	text-decoration: underline;
}

.nlcs-vmodal .nlcs-vsheet__about a:hover {
	color: var(--nlcs-blue-dark);
}

/*
 * Giveaway cards come from public.css, which assumes a light page. On this band their
 * borders vanish, so the separation comes from the card itself instead.
 *
 * The colour is not cosmetic: those cards set a white background but inherit their text
 * colour, so on this band they rendered white-on-white — the prize titles and descriptions
 * were invisible, and only the red closing time gave the card away.
 */
.nlcs-event .nlcs-giveaway {
	border-color: transparent;
	color: var(--nlcs-ink);
}

/*
 * The prize title is an <h3>, and Breakdance paints every heading with --bde-headings-color
 * — white on this site — at `.breakdance h3`, one class plus one element. public.css writes
 * `.nlcs-giveaway__title`, one class, which loses: the titles were rendering white on a
 * white card, and at the theme's 1.44rem rather than their own size. Both are restated here
 * rather than in public.css, which is shared with pages this one knows nothing about.
 */
.nlcs-event .nlcs-giveaway__title {
	color: var(--nlcs-ink);
	font-size: 1.15rem;
}

.nlcs-event .nlcs-giveaway__desc,
.nlcs-event .nlcs-giveaway__winner {
	color: var(--nlcs-ink);
}

/* public.css still carries the page's old red here. */
.nlcs-event .nlcs-giveaway__closes {
	color: var(--nlcs-red);
}

.nlcs-event .nlcs-giveaway__closes.is-closed {
	color: #6b7280;
}

/*
 * Three fixed tracks, the same as the shows below and for the same reason: public.css lays
 * these out with auto-fit, which collapses the tracks it cannot fill, so a show with two
 * giveaways got two half-page cards and a show with one got a single card the width of the
 * screen. Overridden here rather than in public.css, which is shared with pages this page
 * knows nothing about.
 */
.nlcs-event .nlcs-giveaways {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Without the entry footer the body is the last thing in the card, so it closes it out. */
.nlcs-event .nlcs-giveaway__body {
	padding-bottom: 20px;
}

/* ---------- More shows ---------- */

/*
 * Three fixed tracks, not auto-fit.
 *
 * auto-fit collapses the tracks it cannot fill, so a site with only one other show on the
 * calendar got a single card stretched across the full 1140px — a 4:3 venue photo blown up
 * and cropped to a 16:9 letterbox, which reads as a broken section rather than a short list.
 * Fixed tracks mean one card is the same size as three, and the row simply ends early.
 */
.nlcs-more {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.nlcs-more__card {
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	background: #fff;
	color: var(--nlcs-ink);
	overflow: hidden;
	transition: transform .18s ease;
}

.nlcs-more__card:hover {
	transform: translateY(-3px);
}

/* The same three Safari-proofing rules as .nlcs-giveaway__media in public.css — see the note
   there for why the image is pinned to four edges rather than sized `height: 100%`. */
.nlcs-more__media {
	position: relative;
	display: block;
	flex: none;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #e4e6eb;
}

.nlcs-more__media img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 9/16 = 56.25%. */
@supports not (aspect-ratio: 16 / 9) {
	.nlcs-more__media {
		height: 0;
		padding-bottom: 56.25%;
	}
}

.nlcs-more__date {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--nlcs-red);
	color: #fff;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.nlcs-more__body {
	flex: 1;
	padding: 18px;
}

.nlcs-more__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}

.nlcs-more__cats span {
	padding: 3px 10px;
	border-radius: 999px;
	background: #eef0f4;
	font-size: .66rem;
	font-weight: 700;
	color: rgba(0, 0, 0, .6);
}

.nlcs-event .nlcs-more__name {
	margin: 0 0 5px;
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--nlcs-ink);
}

.nlcs-event .nlcs-more__name a {
	color: inherit;
	text-decoration: none;
}

.nlcs-event .nlcs-more__name a:hover {
	color: var(--nlcs-red);
}

.nlcs-more__venue {
	margin: 0;
	font-size: .8rem;
	color: rgba(0, 0, 0, .55);
}

.nlcs-more__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-top: 1px solid var(--nlcs-line);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.nlcs-more__foot > span {
	color: rgba(0, 0, 0, .6);
}

/* One line per admission tier, matching the event cards. */
.nlcs-more__tier {
	display: block;
}

.nlcs-more__tier + .nlcs-more__tier {
	margin-top: 4px;
}

/* ---------- Closing CTA ---------- */

/* The colour, the art and the wash all come from the shared red-band rules above. */
.nlcs-ecta {
	padding: 92px 0;
	text-align: center;
}

.nlcs-event .nlcs-ecta__title {
	margin: 0 0 14px;
	font-size: clamp(1.8rem, 4.6vw, 3rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: #fff;
}

.nlcs-ecta__intro {
	max-width: 46ch;
	margin: 0 auto 30px;
	color: rgba(255, 255, 255, .9);
}

.nlcs-ecta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

/* ---------- Responsive ---------- */

/*
 * A long unbroken string — a venue name, a pasted URL in the description — cannot be wrapped
 * by the browser and will push a card wider than the screen. At 320px there is no room to
 * absorb that, so breaking mid-word is the lesser evil.
 */
.nlcs-event h1,
.nlcs-event h2,
.nlcs-event h3,
.nlcs-event p,
.nlcs-event dd {
	overflow-wrap: break-word;
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	/*
	 * The ticket card drops under the hero rather than squeezing. It starts at 1024, not 960:
	 * at 1024 (iPad landscape) the hero column is still readable but the card beside it is
	 * already down to its 340px floor, so the pair only survives by refusing to shrink —
	 * which is exactly when it starts overflowing instead of reflowing.
	 */
	.nlcs-ehero__cols {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/*
	 * Stacked, the card is a summary rather than a sidebar, so it stops short of full width —
	 * a $10 price stretched across a whole iPad reads as a banner, not a ticket.
	 */
	.nlcs-ticket {
		max-width: 420px;
	}

	.nlcs-esec,
	.nlcs-ecta {
		padding: 64px 0;
	}

	.nlcs-esec + .nlcs-esec {
		padding-top: 0;
	}

	.nlcs-ehero__inner {
		padding-top: 56px;
		padding-bottom: 48px;
	}

	/* Two across: a third track here is narrower than "Santa Fe Station · Las Vegas, NV". */
	.nlcs-more,
	.nlcs-event .nlcs-giveaways {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
	.nlcs-wrap {
		padding: 0 18px;
	}

	.nlcs-ehero__inner {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.nlcs-crumbs {
		margin-bottom: 22px;
	}

	/* Two across: a third track on a phone is narrower than "Nov 21–22, 2026". */
	.nlcs-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 24px;
	}

	.nlcs-ticket {
		max-width: none;
		padding: 22px;
	}

	.nlcs-ticket__price strong {
		font-size: 2.4rem;
	}

	.nlcs-esec__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	/* Full-width buttons: tapping one is far easier than aiming at a pill. */
	.nlcs-ehero__actions .nlcs-btn,
	.nlcs-ecta__actions .nlcs-btn {
		flex: 1 1 100%;
	}

	.nlcs-esec,
	.nlcs-ecta {
		padding: 52px 0;
	}

	.nlcs-esec + .nlcs-esec {
		padding-top: 0;
	}

	.nlcs-more,
	.nlcs-event .nlcs-giveaways {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The price and the link stop sharing a line once neither has room for it. */
	.nlcs-more__foot {
		flex-wrap: wrap;
	}

	/*
	 * The sheet goes to the edges of a phone and stops centring — a 90%-height panel floating
	 * in the middle wastes the room a long bio needs.
	 */
	.nlcs-event .nlcs-vmodal {
		padding: 0;
	}

	.nlcs-event .nlcs-vmodal__panel {
		max-width: none;
		height: 100%;
		padding: 24px 20px 32px;
		border-radius: 0;
	}

	.nlcs-vsheet__head {
		gap: 14px;
	}

	.nlcs-vsheet__logo {
		width: 60px;
		height: 60px;
	}
}

/* ---------- Touch ---------- */

/*
 * Keyed to the pointer, not the width: a 1024px tablet is touch-driven and needs the same
 * target sizes as a phone, while a 640px desktop window does not.
 */
@media (pointer: coarse) {
	/*
	 * The button is ~37px tall at the site's own padding, which is under the 44px a fingertip
	 * actually hits. It grows by min-height rather than padding so the label stays where it
	 * is and the shape is unchanged — the button still matches, it is just easier to press.
	 */
	.nlcs-event .nlcs-btn {
		min-height: 44px;
	}

	/*
	 * 44px is the size a fingertip actually hits. The pills were 37px and "Enter Now" was 21 —
	 * the size that makes you tap twice. inline-flex so the box can grow to 44 while the label
	 * stays centred in it, without a stack of magic padding numbers.
	 *
	 * The giveaway CTA is not in this list any more — the entry footer is off by default, so
	 * there is nothing there to press.
	 */
	.nlcs-pill,
	.nlcs-crumbs a,
	.nlcs-more__foot a,
	.nlcs-esec__head a,
	.nlcs-preview-bar a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/*
	 * The phone number sits in a row of facts, so growing it to 44px pushed it out of line
	 * with the five values beside it. This grows the HIT AREA and nothing else: the box stays
	 * the size of the text, and the tappable region overhangs it.
	 */
	.nlcs-facts__item dd a {
		position: relative;
	}

	.nlcs-facts__item dd a::after {
		content: "";
		position: absolute;
		inset: -12px -10px;
	}

	.nlcs-pill {
		padding-block: 10px;
	}

	/* Same 44px rule: "View Details" and the links in the sheet are the two new things to press. */
	.nlcs-event .nlcs-floor__more,
	.nlcs-event .nlcs-vmodal__close {
		min-height: 44px;
	}

	.nlcs-event .nlcs-vmodal__close {
		width: 44px;
	}

	.nlcs-vsheet__links a {
		min-height: 44px;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.nlcs-event .nlcs-btn,
	.nlcs-event .nlcs-btn__arrow,
	.nlcs-floor__card,
	.nlcs-more__card {
		transition: none;
	}

	.nlcs-event .nlcs-btn:hover .nlcs-btn__arrow,
	.nlcs-event .nlcs-btn:focus-visible .nlcs-btn__arrow,
	.nlcs-floor__card:hover,
	.nlcs-more__card:hover {
		transform: none;
	}
}