/**
 * Monster Roster — public single event page.
 *
 * Monster Presents!™ design system. Everything is scoped under .mpr-event,
 * so nothing here can leak into the rest of the site or fight Divi.
 *
 * That claim was false for a while and is true again. The City Trials block
 * moved out to Monster MITM and took its markup with it, but forty-five
 * unscoped .mpr-trial-* / .mpr-contestant-* / .mpr-season-* / .mitm-map-*
 * rules stayed behind here. Nothing in this plugin rendered them — but MITM's
 * blocks matched them exactly, so any page carrying one had two stylesheets
 * styling the same elements and load order deciding. They are gone; MITM owns
 * those blocks.
 *
 * Fonts are not loaded here — Divi already enqueues Poppins and PAGKAKI on
 * monster-presents.com, and loading them twice would duplicate requests. The
 * stacks fall back cleanly anywhere they are absent.
 */

.mpr-event {
	/* ── Brand tokens ─────────────────────────────────────────────────── */
	--mp-black:    #000000;
	--mp-dark:     #101010;
	--mp-crimson:  #780000;
	--mp-red:      #ED2124;
	--mp-red-alt:  #E02B20;
	--mp-white:    #ffffff;
	--mp-offwhite: #ddd8d1;
	--mp-muted:    #6f7287;

	--mp-display: 'PAGKAKI', 'PAGKAKI Regular', 'Poppins', system-ui, sans-serif;
	--mp-body:    'Poppins', system-ui, -apple-system, sans-serif;

	--mpr-radius: 0;              /* sharp corners, brand rule */
	--mpr-border: rgba( 255, 255, 255, 0.14 );
	--mpr-gap:    24px;

	background: var( --mp-black );
	color: var( --mp-white );
	font-family: var( --mp-body );
	font-size: 16px;
	line-height: 1.65;
}

/*
 * Contrast note: --mp-muted (#6f7287) measures 4.43:1 on black, just under the
 * 4.5:1 AA floor for body text, so it is not used for anything readable here.
 * Secondary text uses --mp-offwhite (15:1).
 */

.mpr-event a { color: var( --mp-offwhite ); }
.mpr-event a:hover { color: var( --mp-red ); }

.mpr-event h1,
.mpr-event h2,
.mpr-event .mpr-event-heading {
	font-family: var( --mp-display );
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var( --mp-white );
	margin: 0 0 16px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.mpr-event-hero {
	position: relative;
	padding: 0 0 40px;
}

.mpr-event-hero-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --mpr-radius );
}

/*
 * ── The page was narrower than the site it lives in ──────────────────────────
 *
 * Measured on a 2213px screen: the event page capped everything at 900px while
 * the rest of monster-presents.com lays out on Divi rows of 1080px, and its
 * hero rows go to 1920. So the one page a ticket buyer lands on read as a
 * column down the middle of a black field, with the schedule, the cast and the
 * venue card all squeezed into it.
 *
 * 1080px is the site's own content width. Taking that number rather than
 * inventing one means this page stops being the odd one out, and it moves with
 * the theme if the theme ever changes.
 *
 * Prose is the exception, below: a 1080px line of body text is a worse read
 * than a 900px one, and the fix for a narrow page is not a long line.
 */
:root,
.mpr-event {
	--mpr-event-width: 1080px;
	--mpr-event-measure: 68ch;
}

.mpr-event-hero-body {
	max-width: var( --mpr-event-width );
	margin: 0 auto;
	padding: 40px 24px 0;
	text-align: center;
}

.mpr-event-title {
	font-size: clamp( 32px, 6vw, 72px );
	line-height: 1.05;
	margin-bottom: 12px;
}

/*
 * The one sentence that says what the night is.
 *
 * Sits between the title and the date deliberately: the date and venue are
 * facts somebody checks after they have decided they care, and the sentence
 * that makes them care has to come first.
 */
.mpr-event-blurb {
	font-family: var( --mp-body );
	font-size: clamp( 17px, 2.2vw, 21px );
	line-height: 1.45;
	color: var( --mp-offwhite );
	max-width: 46ch;
	margin: 0 0 18px;
}

.mpr-event-date {
	font-family: var( --mp-body );
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var( --mp-red );
	margin: 0 0 6px;
}

.mpr-event-venue {
	font-size: 16px;
	color: var( --mp-offwhite );
	margin: 0 0 28px;
}
.mpr-event-address {
	display: block;
	font-size: 14px;
}

.mpr-event-cancelled {
	display: inline-block;
	padding: 8px 18px;
	margin: 0 0 18px;
	background: var( --mp-crimson );
	color: var( --mp-white );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0;
	font-size: 14px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.mpr-event-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 8px;
}

.mpr-event .mpr-btn {
	display: inline-block;
	padding: 14px 32px;
	border: 1px solid transparent;
	border-radius: var( --mpr-radius );
	font-family: var( --mp-body );
	/*
	 * 19px, not 16px, on purpose: white on #ED2124 measures 4.34:1, under the
	 * 4.5:1 AA floor for normal text. At 19px/600 it counts as large text
	 * (3:1 floor) and passes, with the brand red untouched.
	 */
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mpr-event .mpr-btn-primary {
	background: var( --mp-red );
	border-color: var( --mp-red );
	color: var( --mp-white );
}
.mpr-event .mpr-btn-primary:hover,
.mpr-event .mpr-btn-primary:focus-visible {
	background: var( --mp-red-alt );
	border-color: var( --mp-red-alt );
	color: var( --mp-white );
}

.mpr-event .mpr-btn-ghost {
	background: transparent;
	border-color: var( --mp-white );
	color: var( --mp-white );
}
.mpr-event .mpr-btn-ghost:hover,
.mpr-event .mpr-btn-ghost:focus-visible {
	background: var( --mp-white );
	color: var( --mp-black );
}

/*
 * The Facebook button was styled by nothing at all.
 *
 * This file defines .mpr-btn-primary, -ghost, -soldout and -block inside
 * .mpr-event, and the template also asks for -secondary (Join on Facebook).
 * With no rule to match, that anchor kept the base .mpr-btn box -- a
 * transparent border and whatever colour it inherited -- so it rendered as
 * padded floating text next to a solid red button. Both variants the template
 * uses are declared here now.
 */
.mpr-event .mpr-btn-secondary {
	background: transparent;
	border-color: var( --mp-white );
	color: var( --mp-white );
}
.mpr-event .mpr-btn-secondary:hover,
.mpr-event .mpr-btn-secondary:focus-visible {
	background: var( --mp-white );
	color: var( --mp-black );
}

/* Quiet: the third thing on the page, and it should read as the third thing.
   Underlined rather than boxed so it never competes with "Get tickets". */
.mpr-event .mpr-btn-quiet {
	background: transparent;
	border-color: transparent;
	color: var( --mp-offwhite, #ddd8d1 );
	font-size: 15px;
	padding: 10px 4px;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.mpr-event .mpr-btn-quiet:hover,
.mpr-event .mpr-btn-quiet:focus-visible {
	color: var( --mp-white );
}

.mpr-event-save {
	margin: 0 0 8px;
	text-align: center;
}

.mpr-event .mpr-btn-soldout {
	background: transparent;
	border-color: #4a4a4a;
	color: #8a8a8a;
	cursor: default;
}

.mpr-event .mpr-btn-block {
	display: block;
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
	text-align: center;
}

.mpr-event :focus-visible {
	outline: 2px solid var( --mp-red );
	outline-offset: 3px;
}

.mpr-event-price {
	font-size: 18px;
	font-weight: 600;
	color: var( --mp-offwhite );
}

/* What a free, venue-budget or benefit show says where the ticket button
   would be. Sized like the price it stands in for, because that is what a
   visitor is looking at that spot to find out. */
.mpr-event-entry {
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
	color: var( --mp-white );
	border: 1px solid var( --mp-red );
	border-radius: var( --mpr-radius, 0 );
	padding: 10px 22px;
}

.mpr-event-remaining {
	font-size: 14px;
	color: var( --mp-offwhite );
	margin: 0;
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.mpr-event-section {
	max-width: var( --mpr-event-width );
	margin: 0 auto;
	padding: 40px 24px;
	border-top: 1px solid var( --mpr-border );
}

.mpr-event-heading {
	font-size: clamp( 20px, 3vw, 28px );
}

/*
 * The one thing that does NOT get the extra width.
 *
 * Body text set across 1080px is a line somebody's eye loses on the way back,
 * which is the failure the wider page was meant to fix, arriving from the
 * other direction. The measure stays; everything structural around it grows.
 */
.mpr-event-copy {
	color: var( --mp-offwhite );
	max-width: var( --mpr-event-measure );
}
.mpr-event-copy p { margin: 0 0 1em; }
.mpr-event-copy strong { color: var( --mp-white ); }

/* ── Schedule ────────────────────────────────────────────────────────────── */

.mpr-schedule-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: var( --mpr-gap );
	margin: 0;
}

.mpr-schedule-item {
	background: var( --mp-dark );
	border-left: 3px solid var( --mp-red );
	padding: 16px 20px;
}

.mpr-schedule-item dt {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var( --mp-offwhite );
	margin: 0 0 4px;
}

.mpr-schedule-item dd {
	margin: 0;
	font-family: var( --mp-display );
	font-size: 24px;
	letter-spacing: 0;
	color: var( --mp-white );
}

.mpr-next-day {
	display: inline-block;
	margin-left: 6px;
	font-family: var( --mp-body );
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var( --mp-red );
	vertical-align: middle;
}

/* ── Cast ────────────────────────────────────────────────────────────────── */

.mpr-cast-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: var( --mpr-gap );
}

.mpr-cast-member { margin: 0; }

.mpr-cast-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.mpr-cast-portrait {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var( --mp-dark );
	border: 1px solid var( --mpr-border );
	border-radius: 50%;   /* portrait crop — the one intentional radius */
	position: relative;
}

.mpr-cast-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale( 1 ) contrast( 1.05 );
	transition: filter 0.2s ease;
}

a.mpr-cast-link:hover .mpr-cast-portrait img,
a.mpr-cast-link:focus-visible .mpr-cast-portrait img {
	filter: none;
}

.mpr-cast-initial {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --mp-display );
	font-size: 40px;
	color: var( --mp-red );
}

.mpr-cast-name {
	font-family: var( --mp-display );
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var( --mp-white );
	line-height: 1.2;
}

a.mpr-cast-link:hover .mpr-cast-name { color: var( --mp-red ); }

/* Group acts list their members under the act name. Smaller and muted: the act
   is what is billed, the members are who turns up. */
.mpr-cast-members {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.35;
	opacity: .72;
}


.mpr-cast-pronouns {
	font-size: 13px;
	color: var( --mp-offwhite );
}

/* ── Venue ─────────────────────────────────────────────────────────────────
 *
 * The same card the show screen in Monster HQ draws, in the public palette.
 *
 * Where was a name, an address and a button on a black field -- accurate, and
 * it told a first-time visitor nothing about the room. A picture does most of
 * the work: people know a room by sight long before they know it by street.
 * A venue with no picture gets its initial rather than a hole, which is the
 * same trick the backend card uses and never looks broken.
 *
 * Sharp corners, hairline rule, no fill: the card reads as a card without
 * becoming a grey box on a black page.
 */

.mpr-venue-card {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	border: 1px solid var( --mpr-line, rgba(255,255,255,.18) );
	padding: 20px;
}

.mpr-venue-shot {
	flex: 0 0 auto;
	width: 120px;
	height: 120px;
	overflow: hidden;
	background: rgba( 255, 255, 255, .06 );
}

.mpr-venue-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mpr-venue-shot.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --mp-display );
	font-size: 44px;
	line-height: 1;
	color: rgba( 255, 255, 255, .3 );
}

.mpr-venue-body { min-width: 0; flex: 1 1 auto; }

.mpr-venue-name {
	font-family: var( --mp-display );
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 0;
	margin: 0 0 4px;
}
.mpr-venue-address {
	color: var( --mp-offwhite );
	margin: 0 0 14px;
}

/*
 * The reveal line. Marked with the accent rather than styled as body copy: it
 * is a promise about the show, not a detail about the room, and read as plain
 * paragraph text under a lone venue name it looks like the page is unfinished.
 */
.mpr-venue-secret {
	color: var( --mp-offwhite );
	margin: 0 0 14px;
	padding-left: 10px;
	border-left: 3px solid var( --mp-red );
}

.mpr-venue-facts {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	color: var( --mp-offwhite );
}

/* A rule down the left rather than a bullet: the list is three facts about a
   room, not three steps in an argument. */
.mpr-venue-fact {
	padding-left: 12px;
	border-left: 2px solid var( --mpr-line, rgba(255,255,255,.18) );
}

.mpr-venue-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.mpr-event-closing { text-align: center; }

/* ── Tablet (980px) ──────────────────────────────────────────────────────── */

@media ( max-width: 980px ) {
	.mpr-event-hero-body { padding-top: 32px; }
	.mpr-event-section   { padding: 32px 20px; }
}

/* ── Phone (767px) ───────────────────────────────────────────────────────── */

@media ( max-width: 767px ) {
	/* The picture stops being a thumbnail beside the text and becomes the top
	   of the card, which is the only shape that reads at this width. */
	.mpr-venue-card { flex-direction: column; gap: 16px; padding: 16px; }
	.mpr-venue-shot { width: 100%; height: 180px; }
	.mpr-venue-links .mpr-btn { flex: 1 1 auto; text-align: center; }

	.mpr-event-title    { letter-spacing: 0; }
	.mpr-event-heading  { letter-spacing: 0; }
	.mpr-event-hero-body { padding: 24px 16px 0; }
	.mpr-event-section   { padding: 28px 16px; }

	/* Full-width taps, comfortably over the 44px minimum. */
	.mpr-event-cta { flex-direction: column; align-items: stretch; }
	.mpr-event .mpr-btn {
		width: 100%;
		text-align: center;
		min-height: 48px;
		padding: 14px 20px;
	}
	.mpr-event-price { text-align: center; }

	.mpr-cast-grid { grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) ); }
	.mpr-schedule-item dd { font-size: 20px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.mpr-event * { transition: none !important; animation: none !important; }
}

/* ── Good to know ────────────────────────────────────────────────────────── */

.mpr-highlights {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 14px 28px;
}

.mpr-highlight {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var( --mp-offwhite );
	font-size: 16px;
}

.mpr-highlight .mpr-icon {
	flex: 0 0 auto;
	color: var( --mp-red );
}

.mpr-faqs { margin-top: 32px; }

.mpr-faqs-heading {
	font-family: var( --mp-display );
	font-size: 18px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var( --mp-white );
	margin: 0 0 12px;
}

.mpr-faq {
	border-top: 1px solid var( --mpr-border );
	padding: 14px 0;
}
.mpr-faq:last-child { border-bottom: 1px solid var( --mpr-border ); }

.mpr-faq summary {
	cursor: pointer;
	font-weight: 600;
	color: var( --mp-white );
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	min-height: 24px;
}
.mpr-faq summary::-webkit-details-marker { display: none; }
.mpr-faq summary::after {
	content: '+';
	color: var( --mp-red );
	font-size: 20px;
	line-height: 1;
	flex: 0 0 auto;
}
.mpr-faq[open] summary::after { content: '–'; }
.mpr-faq summary:hover { color: var( --mp-red ); }

.mpr-faq-answer {
	padding-top: 10px;
	color: var( --mp-offwhite );
}
.mpr-faq-answer p:last-child { margin-bottom: 0; }

@media ( max-width: 767px ) {
	.mpr-highlights { grid-template-columns: 1fr; gap: 12px; }
	.mpr-faq summary { min-height: 44px; align-items: center; }
}

/* ── Event navigation ────────────────────────────────────────────────────── */

.mpr-event-nav {
	border-top: 1px solid var( --mpr-border );
	padding: 32px 24px 48px;
}

.mpr-event-nav-inner {
	max-width: var( --mpr-event-width );
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
}

.mpr-nav-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
	padding: 14px 18px;
	background: var( --mp-dark );
	border: 1px solid var( --mpr-border );
	transition: border-color 0.15s ease, background-color 0.15s ease;
	min-height: 44px;
}
.mpr-nav-link:hover,
.mpr-nav-link:focus-visible { border-color: var( --mp-red ); }

.mpr-nav-next { text-align: right; }
.mpr-nav-empty { background: none; border: 0; min-height: 0; padding: 0; }

.mpr-nav-dir {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var( --mp-red );
}

.mpr-nav-title {
	font-family: var( --mp-display );
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var( --mp-white );
	line-height: 1.25;
}

.mpr-nav-date {
	font-size: 13px;
	color: var( --mp-offwhite );
}

.mpr-nav-all {
	font-family: var( --mp-body );
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var( --mp-offwhite );
	text-decoration: none;
	white-space: nowrap;
	padding: 12px 14px;
	border-bottom: 1px solid transparent;
}
.mpr-nav-all:hover { color: var( --mp-red ); border-bottom-color: var( --mp-red ); }

@media ( max-width: 767px ) {
	.mpr-event-nav { padding: 24px 16px 40px; }
	.mpr-event-nav-inner { grid-template-columns: 1fr; }
	.mpr-nav-next { text-align: left; }
	.mpr-nav-empty { display: none; }
	.mpr-nav-all { text-align: center; order: 3; }
}


/*
 * ── The tip jar ──────────────────────────────────────────────────────────────
 *
 * A QR code is read by a camera pointed at a phone screen from a few feet away
 * in a dark room, so it is given real size and a white card under it. A code
 * inverted to suit a dark page, or shrunk to fit a layout, is a code that does
 * not scan -- and nobody tells you, they just give up.
 */
.mpr-tips {
	margin: 40px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid var( --mpr-line, rgba( 255, 255, 255, .14 ) );
}

.mpr-tips-title { margin: 0 0 6px; }
.mpr-tips-intro { margin: 0 0 20px; max-width: 52ch; }

.mpr-tips-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

.mpr-tip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.mpr-tip .mpr-qr {
	display: block;
	/* The quiet zone is drawn into the SVG, so the white ends where the code's
	   own margin ends and no extra padding is needed here. */
	background: #ffffff;
}

.mpr-tip-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	/* 44px of target: this is tapped on a phone, one-handed, in the dark. */
	min-height: 44px;
	justify-content: center;
	text-decoration: none;
}

.mpr-tip-where { font-weight: 700; }
.mpr-tip-handle { font-size: var( --mpr-t-small, .88rem ); opacity: .75; word-break: break-all; }

@media ( max-width: 420px ) {
	/* Two codes side by side at phone width shrinks both below scanning size,
	   so they stack and each keeps its full 132px. */
	.mpr-tips-grid { flex-direction: column; align-items: flex-start; }
	.mpr-tip { align-items: flex-start; }
	.mpr-tip-link { align-items: flex-start; }
}