/*
 * THE EVENTS CALENDAR, IN THE LIBRARY'S LANGUAGE — round 10.
 *
 * Kevin: *"On 'What is a one-shot' the TEC events list shortcode renders as raw
 * white cards (blue links, red times, date tiles CLIPPING their text). Style ALL
 * TEC-emitted components (shortcode list, widgets, month view) in-theme:
 * agenda-row pattern from /events/, date tiles that fit their text, styled 'See
 * all events'."*
 *
 * WHAT THIS FILE IS AND IS NOT
 * /events/ and /event/<slug>/ are TAKEOVERS — rpg-events draws them itself and
 * ml-agenda.css / ml-event.css dress what it drew. Everything else The Events
 * Calendar emits is TEC's own v2 markup rendered inside somebody else's page:
 * the events-list widget block (three Play pages embed one), its month and list
 * views, the calendar widget, the notices. Those cannot be redrawn without
 * replacing TEC's view layer, which 1.1.0 decided against for good reasons that
 * have not changed. So they are DRESSED instead, and this is that stylesheet.
 *
 * TWO LAYERS, AND THE FIRST ONE IS THE IMPORTANT ONE
 *
 * 1. TEC v2 is built on its own design tokens — `--tec-color-*`,
 *    `--tec-font-family-*`, `--tec-border-radius-*` — declared on :root and read
 *    by every one of its components. Pointing those at the Magical Library's
 *    tokens restyles surfaces this round never opened: the month grid, the day
 *    view, the datepicker, the subscribe dropdown, a notice from a failed
 *    booking. It is the same move as ml-chrome.css's prototype aliases, in the
 *    other direction. `#334aff` is where Kevin's blue links came from, and
 *    `--tec-color-text-event-date` is the red time.
 * 2. Structure per component, because a token cannot turn a stack of flex
 *    columns into the agenda's row. That is the second half of the file.
 *
 * SCOPING. Every selector here starts at a `tribe-` class, so this file can only
 * ever reach The Events Calendar's own markup — which is what lets it be loaded
 * on any page that embeds a view, inside `.rpg-ml` or outside it. Nothing here
 * defines a literal brand colour; the tokens come from site.css.
 */

/* ---------------------------------------------------------------- LAYER 1
   TEC's tokens, pointed at ours. `.tribe-common` is the root class every v2
   view, widget and notice carries, so redeclaring there beats the :root
   defaults by specificity and cannot leak past TEC's own subtree. */
.tribe-common {
	--tec-font-family-sans-serif: var(--sans);

	--tec-color-text-primary: var(--ink);
	--tec-color-text-primary-light: var(--muted);
	--tec-color-text-secondary: var(--muted);
	--tec-color-text-disabled: #a8a294;
	--tec-color-text-event-title: var(--forest);
	--tec-color-text-events-title: var(--forest);
	/* The red time. It is a date, in mono, in the muted ink — the same line the
	   agenda's own rows print. */
	--tec-color-text-event-date: var(--muted);
	--tec-color-text-secondary-event-date: var(--muted);

	/* The blue. Brass is the site's "this is a link" colour everywhere else. */
	--tec-color-accent-primary: var(--brass);
	--tec-color-accent-primary-hover: var(--gold);
	--tec-color-accent-primary-active: var(--gold);
	--tec-color-accent-primary-background: rgba(172, 135, 72, .1);
	--tec-color-accent-secondary: var(--forest);
	--tec-color-link-primary: var(--ink);
	--tec-color-link-accent: var(--brass);
	--tec-color-link-accent-hover: var(--gold);

	--tec-color-background: var(--card);
	--tec-color-background-secondary: var(--paper-2);
	--tec-color-background-events: transparent;
	--tec-color-border-default: var(--line);
	--tec-color-border-secondary: var(--line);
	--tec-color-border-tertiary: var(--line);
	--tec-color-border-active: var(--brass);
	--tec-color-border-hover: var(--brass);

	--tec-color-button-primary: var(--forest);
	--tec-color-button-primary-hover: #22463a;
	--tec-color-button-primary-active: #22463a;
	--tec-color-button-primary-background: var(--forest);
	--tec-color-button-secondary: var(--ink);
	--tec-color-button-secondary-background: var(--paper-2);

	--tec-color-icon-primary: var(--brass);
	--tec-color-icon-secondary: var(--muted);
	--tec-color-icon-active: var(--forest);
	--tec-color-event-icon: var(--brass);
	--tec-color-event-icon-hover: var(--gold);

	--tec-border-radius-default: var(--r-sm);
	--tec-outline-color-default: var(--focus);
}

/* The two headings TEC prints as titles take the serif, the same way every
   heading in the redesign does. TEC's own `.tribe-common-h*` classes set a font
   stack per size, so this has to name them rather than ride the token. */
.tribe-common :is(.tribe-common-h4, .tribe-common-h5, .tribe-common-h6,
	.tribe-common-h7, .tribe-common-h8) {
	font-family: var(--serif);
	letter-spacing: -.01em;
}

/* ---------------------------------------------------------------- LAYER 2
   THE EVENTS-LIST WIDGET, AS AN AGENDA ROW.

   This is the component Kevin actually saw: `[tribe_events_list]` / the
   `tribe/events-list` block, embedded in the Play explainers. TEC emits
   date-tag + wrapper as two flex columns of a `tribe-common-g-row`; the agenda
   at /events/ draws date | cover | body | status as a bordered card. The markup
   is close enough to reach the same place with a grid — and rpg-events' own
   after_include filter inserts the cover, which the widget's template does not
   render, so the two rows differ in their data and not in their design. */

.tribe-common .tribe-events-widget-events-list {
	margin: 0;
}

/* "Upcoming Events" is a section label, not a heading in the page's outline —
   the eyebrow treatment the rest of the site gives that job. */
.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__header-title {
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brass-ink);
	margin: 0 0 14px;
}

/* One column. Two 552px cards side by side is what the theme's content grid
   made of a stack of rows, and it is why the titles were wrapping into two
   lines at 1440px with half the page empty beside them. */
.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__events {
	display: block;
}

.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-row {
	display: grid;
	grid-template-columns: 78px 132px 1fr;
	gap: 16px;
	align-items: center;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 0 0 12px;
	transition: transform .18s, box-shadow .18s;
	overflow: hidden;
}

/* No cover on this event: the body takes the column back rather than leaving a
   gap where a picture would have been. */
.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-row:not(:has(.rpg-tec-cov)) {
	grid-template-columns: 78px 1fr;
}

.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-row:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px rgba(60, 45, 20, .12);
}

/* THE DATE TILE, AND KEVIN'S CLIPPING.
   TEC's tile is a `tribe-common-g-col` — a flex column with a percentage basis
   and a fixed 72px width — holding a month abbreviation at whatever size the
   theme's body copy is and a day number at `.tribe-common-h2`, which is 40px.
   Nothing in that stack is told to fit: "SEP" was rendering into a 20px box
   inside a 72px tile, and Dutch's "MRT"/"AUG" are wider still. So the tile is
   `width:auto` in a 78px grid track, its text centred, and the two lines are
   sized in the agenda's own type — a 26px serif numeral over a 10px mono month
   — which is a size the box was built for. */
.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-date-tag {
	display: block;
	width: auto;
	max-width: none;
	flex: none;
	padding: 10px 6px;
	background: var(--forest);
	color: #f3ead6;
	border-radius: 10px;
	text-align: center;
}

.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-date-tag-datetime {
	display: block;
}

.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-date-tag-month {
	display: block;
	font-family: var(--mono);
	font-size: 10px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold-hi);
	white-space: nowrap;
}

.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-date-tag-daynum {
	display: block;
	font-family: var(--serif);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	color: #f3ead6;
	margin: 2px 0 0;
	white-space: nowrap;
}

/* The cover, inserted by rpg_ml_tec_widget_cover() — the agenda's `.ev .cov`
   down to the empty-state gradient, because several real events have no
   featured image and a grey box reads as a broken one. */
.tribe-common .tribe-events-widget-events-list .rpg-tec-cov {
	width: 132px;
	height: 84px;
	border-radius: 9px;
	overflow: hidden;
	background: linear-gradient(150deg, #26483a, #12231c);
}

.tribe-common .tribe-events-widget-events-list .rpg-tec-cov img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-row:hover .rpg-tec-cov img {
	transform: scale(1.06);
}

.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-wrapper {
	width: auto;
	max-width: none;
	flex: none;
	padding: 0;
	min-width: 0;
}

.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-datetime-wrapper {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--muted);
	margin: 0 0 4px;
}

.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-title {
	font-family: var(--serif);
	font-size: 20px;
	line-height: 1.15;
	font-weight: 600;
	margin: 0;
}

.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-title-link {
	color: var(--ink);
	text-decoration: none;
	background: none;
}

.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-title-link:hover,
.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-title-link:focus-visible {
	color: var(--forest);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The status line the widget has no template for, written by
   rpg_ml_tec_widget_status() from the same rpg_ml_agenda_status() the agenda
   and the single event both read — so "Sold out" cannot mean one thing on
   /events/ and another on /what-is-a-one-shot/. */
.tribe-common .tribe-events-widget-events-list .rpg-tec-status {
	display: block;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--brass-ink);
	margin-top: 6px;
}

.tribe-common .tribe-events-widget-events-list .rpg-tec-status.sold { color: var(--wine); }
.tribe-common .tribe-events-widget-events-list .rpg-tec-status.free { color: #3d7d1f; }

/* "See all events" — the last default-green CTA on the page. Gold, like every
   other primary action in the design. */
.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__view-more {
	margin-top: 4px;
}

.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__view-more-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 46px;
	padding: 13px 22px;
	border-radius: var(--r-md);
	background: linear-gradient(var(--gold-hi), #c19338);
	color: #231a07;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(150, 110, 40, .3);
	transition: transform .16s var(--ease-out), filter var(--dur);
}

.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__view-more-link:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
	color: #231a07;
	text-decoration: none;
}

/* ------------------------------------------------------------------------
   THE OTHER VIEWS.

   The month grid and the category archives are switched OFF on this install
   (Events → Settings → Display → Enable event views is `list` alone, which is
   why rpg_ml_agenda_month_url() exists at all), and the list view is taken over
   by the agenda — so nothing below renders today. It is here because a view
   being turned on is a checkbox in wp-admin, and the failure mode of NOT
   writing it is a bright blue calendar appearing on the site the day somebody
   ticks one. The tokens above do most of the work; these are the boxes that
   carry a hard-coded shape TEC's own tokens do not reach. */

.tribe-events-calendar-month__day-cell,
.tribe-events-calendar-month__multiday-event-bar,
.tribe-events-calendar-month__calendar-event {
	border-radius: var(--r-sm);
}

.tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__header-column-title-mobile,
.tribe-events-calendar-month__header-column-title-desktop {
	font-family: var(--mono);
	letter-spacing: .06em;
}

/* Same clipping guard as the widget tile, for every date block TEC draws with a
   month over a number: the month is a nowrap mono line and the number is sized
   in the serif, so a wide abbreviation lengthens the box instead of being cut
   off inside it. */
.tribe-events-calendar-list__event-date-tag-month,
.tribe-events-calendar-day__event-date-tag-month,
.tribe-events-widget-events-month__calendar-event-datetime {
	white-space: nowrap;
	overflow: visible;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tribe-events-calendar-list__event-date-tag-daynum,
.tribe-events-calendar-day__event-date-tag-daynum {
	font-family: var(--serif);
	line-height: 1;
	white-space: nowrap;
}

/* The mini calendar widget. Its day cells are a fixed-height grid with the
   number and the event dot stacked inside — the same box-sizing fault as the
   list tile, one component along. */
.tribe-events-widget-events-month__calendar-header-column-title,
.tribe-events-widget-events-month__calendar-event-tooltip-datetime {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .08em;
}

.tribe-events-widget-events-month__calendar-date,
.tribe-events-widget-events-month__calendar-date-daynum {
	font-family: var(--serif);
	line-height: 1.1;
	white-space: nowrap;
	overflow: visible;
	min-width: 0;
}

/* TEC's notices — a failed booking, an empty result — as the library's own
   parchment note rather than a grey browser box. */
.tribe-events-notices,
.tribe-events-c-messages__message {
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-left: 3px solid var(--brass);
	border-radius: var(--r-sm);
	font-family: var(--book);
	color: var(--ink);
}

/* ------------------------------------------------------------------- MOBILE */
@media (max-width: 720px) {
	/* The cover goes first and full width, the date tile and the body share the
	   row under it — the agenda's own phone layout. */
	.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-row,
	.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-row:not(:has(.rpg-tec-cov)) {
		grid-template-columns: 62px 1fr;
		gap: 12px;
		padding: 12px;
	}

	.tribe-common .tribe-events-widget-events-list .rpg-tec-cov {
		grid-column: 1 / -1;
		grid-row: 1;
		width: 100%;
		height: 128px;
	}

	.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-date-tag {
		padding: 8px 4px;
	}

	.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-date-tag-daynum {
		font-size: 22px;
	}

	.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-title {
		font-size: 17px;
	}

	.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__view-more-link {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-row,
	.tribe-common .tribe-events-widget-events-list .rpg-tec-cov img,
	.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__view-more-link {
		transition: none;
	}

	.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-row:hover,
	.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__event-row:hover .rpg-tec-cov img,
	.tribe-common .tribe-events-widget-events-list .tribe-events-widget-events-list__view-more-link:hover {
		transform: none;
	}
}