/**
 * [monster_events] — the listing that replaces the Eventbrite feed plugin.
 *
 * Measured off the feed it replaces so the swap is invisible to visitors:
 * same type scale, same button shapes. Everything is scoped under .mpr-ev-list
 * and uses its own class names, so removing the old plugin cannot take this
 * styling with it.
 *
 * NOT the same greys, and that was the bug. The feed this copied drew on a
 * white card, so its secondary text was a mid slate grey. This list is dropped
 * into Divi pages whose background this stylesheet does not control and cannot
 * know, and the site's are dark, where that grey measures 4.43:1 and reads as
 * smudge. public.css says exactly this in its own contrast note and refuses to
 * use it for anything readable; this file used it for the date, the location,
 * the blurb and the empty state, which is most of the words on the page.
 *
 * So the muted colour is derived from whatever colour the page is already
 * setting rather than picked in advance. On a dark page it softens light text,
 * on a light page it softens dark text, and it cannot be invisible on either
 * because it is always the reader's own colour turned down. The plain
 * `color: inherit` above it is the fallback for a browser without color-mix:
 * full-strength body text, legible everywhere and merely less quiet.
 *
 * The rule worth keeping: never set a text colour without also controlling the
 * background it sits on. A component that can be dropped anywhere does not
 * control its background, so it must not name a colour.
 */

.mpr-ev-list {
	display: flex;
	flex-direction: column;
	gap: 46px;
	max-width: 100%;
}

/* ─── Item ─────────────────────────────────────────────────────────────── */

.mpr-ev-item {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding: 0 0 0 60px;
}

.mpr-ev-content {
	flex: 1 1 auto;
	min-width: 0;
}

/* ─── Top row: date block + title ──────────────────────────────────────── */

.mpr-ev-top {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.mpr-ev-datebox {
	flex: 0 0 auto;
	width: 34px;
	text-align: center;
	line-height: 1.1;
	color: #ed2124;
}

.mpr-ev-dow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
}

.mpr-ev-day {
	display: block;
	font-size: 22px;
	font-weight: 700;
}

.mpr-ev-titlecol {
	min-width: 0;
}

.mpr-ev-datetime {
	display: block;
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 400;
	color: inherit;
	color: color-mix( in srgb, currentColor 72%, transparent );
	text-transform: uppercase;
}

.mpr-ev-title {
	margin: 0;

	/*
	 * The body face, said out loud.
	 *
	 * This set no font-family, so the card title inherited h3 from the theme
	 * -- which is PAGKAKI, the display face. The house rule is that PAGKAKI is
	 * for h1 only, and there is a reason beyond the rule: it is a decorative
	 * poster face, and at 20px on a phone a show title set in it is the
	 * hardest-working text on the page rendered in the least readable form.
	 *
	 * A component dropped into a page it does not control must not inherit
	 * type any more than it inherits colour -- same principle as the note at
	 * the top of this file.
	 */
	font-family: var( --mpr-font-body, "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif );
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	color: inherit;
}

/* The name carries the weight; what it is sits back. */
.mpr-ev-title-lead { font-weight: 700; }

.mpr-ev-title-rest {
	font-weight: 300;
	color: inherit;
	color: color-mix( in srgb, currentColor 82%, transparent );
}

.mpr-ev-title a {
	color: inherit;
	text-decoration: none;
}

.mpr-ev-title a:hover,
.mpr-ev-title a:focus-visible {
	text-decoration: underline;
}

/* ─── Bottom row: location, blurb, buttons ─────────────────────────────── */

.mpr-ev-bottom {
	margin-top: 8px;
	padding-left: 54px; /* aligns under the title, clear of the date block */
}

.mpr-ev-location {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 400;
	color: inherit;
	color: color-mix( in srgb, currentColor 72%, transparent );
}

.mpr-ev-pin {
	display: inline-flex;
	flex: 0 0 auto;
}

.mpr-ev-desc {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: inherit;
	color: color-mix( in srgb, currentColor 72%, transparent );
}

/*
 * The price pill's styling went with the price pill. A rule for markup that is
 * no longer rendered is the same species as every other bug in this codebase:
 * a declaration with nothing behind it. It just happens to be a harmless one.
 */

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

.mpr-ev-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/*
 * ─── The buttons ──────────────────────────────────────────────────────────
 *
 * Measured on the live homepage before this change: 33px tall, 12px type.
 * The tap-target minimum is 44px, and these are the single control standing
 * between a visitor and a ticket -- the one element on the page that most
 * needs to be easy to hit with a thumb, and it was the smallest.
 *
 * The radius went with it. The house rule is sharp corners; 5px was neither
 * sharp nor round enough to read as a decision.
 */
.mpr-ev-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 22px;

	/*
	 * The hero's button shape, so the page has one button and not three.
	 *
	 * Taken from the fullwidth header's own module settings rather than
	 * invented here: Poppins 600 at 16px, uppercase, a 2px solid border and
	 * square corners. The primary is filled and the secondary is the same
	 * button with the fill taken away -- which is exactly how the hero pair
	 * distinguishes Buy tickets from Explore experiences.
	 */
	border: 2px solid transparent;
	border-radius: var( --mpr-radius, 0 );
	font-family: var( --mpr-font-body, "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif );
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.mpr-ev-btn:focus-visible {
	outline: 2px solid #ed2124;
	outline-offset: 2px;
}

/*
 * #ed2124 with white measures 4.3:1, and AA asks for 4.5:1 on text this size.
 * It fails by a hair in both directions -- red on white is the same pair. So
 * the brand red stays everywhere it carries no text, and the buttons use a
 * darker mix of it that clears the bar at 6.0:1.
 */
.mpr-ev-btn-buy {
	background: #c81a1d;
	border-color: #c81a1d;
	color: #fff;
}

.mpr-ev-btn-buy:hover {
	background: #a81417;
	border-color: #a81417;
	color: #fff;
}

.mpr-ev-btn-details {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.mpr-ev-btn-details:hover {
	background: color-mix( in srgb, currentColor 14%, transparent );
	color: inherit;
}

/* ─── Image ────────────────────────────────────────────────────────────── */

.mpr-ev-image {
	flex: 0 0 320px;
	max-width: 320px;
}

.mpr-ev-image-inner {
	display: block;
	border-radius: var( --mpr-radius, 0 );
	overflow: hidden;
}

.mpr-ev-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ─── Empty state ──────────────────────────────────────────────────────── */

.mpr-ev-empty {
	color: inherit;
	color: color-mix( in srgb, currentColor 72%, transparent );
	font-size: 14px;
}

/* ─── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 980px) {
	.mpr-ev-item {
		padding-left: 0;
		gap: 24px;
	}

	.mpr-ev-image {
		flex-basis: 220px;
		max-width: 220px;
	}
}

/*
 * ── On a phone ────────────────────────────────────────────────────────────
 *
 * The desktop card reads left to right: a date block, then the title beside
 * it, then the copy indented to line up underneath. None of that survives a
 * 390px screen. Stacked, the date block became a 34px column on the far left
 * with everything ragged around it -- and it was saying the same thing as the
 * full date line directly beneath it.
 *
 * So on a phone the card becomes one centred column: flyer, date, title,
 * where, what, price, then the two buttons side by side. One axis, one
 * alignment, nothing indented under anything.
 */
@media (max-width: 720px) {
	.mpr-ev-list {
		gap: 38px;
	}

	.mpr-ev-item {
		flex-direction: column-reverse; /* image above the copy on phones */
		gap: 16px;
		text-align: center;

		/*
		 * Stretch, or the centring is a lie.
		 *
		 * The card is a flex row with align-items: flex-start, which on the
		 * cross axis means each child is only as wide as its content. Turned
		 * vertical for phones, that left the copy column 303px wide inside a
		 * 460px card, flush left -- so everything centred itself neatly within
		 * a column that was itself off to one side. Measured, because on
		 * screen it merely looks slightly wrong rather than obviously so.
		 */
		align-items: stretch;
	}

	.mpr-ev-image,
	.mpr-ev-image-inner {
		flex-basis: auto;
		max-width: none;
		width: 100%;
	}

	.mpr-ev-bottom {
		padding-left: 0;
	}

	/* The title stops sharing a row with the date block. */
	.mpr-ev-top {
		display: block;
	}

	/*
	 * And the date block goes entirely. "SAT 19" above "September 19, 2026 @
	 * 11:00 AM" is one fact printed twice, and it was the thing pulling the
	 * whole card off-centre.
	 */
	.mpr-ev-datebox {
		display: none;
	}

	.mpr-ev-datetime {
		margin-bottom: 4px;
	}

	/* The pin and its address are a flex row; centre the row, not the text. */
	.mpr-ev-location {
		justify-content: center;
	}

	/* A centred paragraph is only readable if it is also narrow. */
	.mpr-ev-desc {
		max-width: 44ch;
		margin-left: auto;
		margin-right: auto;
	}

	.mpr-ev-buttons {
		justify-content: center;
		flex-wrap: wrap;
		gap: 10px;
	}

	/* Two buttons, equal weight, neither stretched across the screen. */
	.mpr-ev-buttons .mpr-ev-btn {
		flex: 0 1 auto;
		min-width: 9.5em;
	}
}

/* ─── Winning against the host theme ─────────────────────────────────────
   When this list is dropped inside a Divi TEXT module, Divi emits its link
   colour and link font size with !important, which painted the "Buy tickets"
   label red on a red button — invisible — and blew the type up to 18px.
   Specificity alone cannot beat !important, so the button's own colours are
   marked important too. Scoped to .mpr-ev-btn only, so everything else in the
   listing stays freely themeable from the builder.

   Using the Monster Upcoming Events MODULE instead avoids the conflict
   entirely; this block is what keeps the shortcode honest inside a text
   module. */

/* Divi's global link colour lands as `.et_pb_text_0.et_pb_text a` — two
   classes and an element, marked !important, and emitted after this file.
   That ties with a two-class selector and wins on order, so these carry a
   third class to take the tie outright. */

/*
 * THESE VALUES MUST MATCH THE ONES ABOVE.
 *
 * This block is the one that actually paints. The declarations near the top of
 * the file describe the button; these are what a browser renders, because they
 * are marked important to beat Divi. Changing the colour or the size up there
 * and not down here does nothing at all, silently -- which is exactly what
 * happened on the first pass of the contrast fix: the base rule went to
 * #c81a1d, the live button stayed #ed2124, and only a measurement caught it.
 *
 * tests/run.php asserts the two agree.
 */
.mpr-ev-list .mpr-ev-buttons a.mpr-ev-btn,
.mpr-ev-list .mpr-ev-buttons a.mpr-ev-btn:hover,
.mpr-ev-list .mpr-ev-buttons a.mpr-ev-btn:focus {
	font-size: 16px !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
}

.mpr-ev-list .mpr-ev-buttons a.mpr-ev-btn-buy,
.mpr-ev-list .mpr-ev-buttons a.mpr-ev-btn-buy:focus {
	color: #fff !important;
	background: #c81a1d !important;
	border-color: #c81a1d !important;
}

.mpr-ev-list .mpr-ev-buttons a.mpr-ev-btn-buy:hover {
	color: #fff !important;
	background: #a81417 !important;
}

.mpr-ev-list .mpr-ev-buttons a.mpr-ev-btn-details,
.mpr-ev-list .mpr-ev-buttons a.mpr-ev-btn-details:focus {
	color: inherit !important;
	background: transparent !important;
	border-color: currentColor !important;
}

.mpr-ev-list .mpr-ev-buttons a.mpr-ev-btn-details:hover {
	color: inherit !important;
	background: color-mix( in srgb, currentColor 14%, transparent ) !important;
}

.mpr-ev-list .mpr-ev-titlecol .mpr-ev-title a {
	color: inherit !important;
}