/**
 * [reb_event_list] — date-led event list.
 *
 * HOW TO RESTYLE THIS
 * ===================
 * Almost everything you are likely to change is a custom property declared on
 * .reb-event-list below. Override them in your theme rather than rewriting
 * rules — you keep the layout and only change the appearance:
 *
 *   .reb-event-list {
 *       --reb-el-accent: #d40000;
 *       --reb-el-radius: 0;
 *       --reb-el-date-width: 5rem;
 *   }
 *
 * Nothing here uses !important, and selectors are kept to a single class
 * wherever possible, so a theme rule of equal specificity declared later wins.
 *
 * MARKUP MAP
 * ==========
 *   ul.reb-event-list                       List root.
 *     .reb-event-list--group-product          Modifier: one row per product.
 *     .reb-event-list--group-date             Modifier: one row per date.
 *
 *   li.reb-event-list__item                 One event row.
 *     --race / --academy / --championship     Booking mode.
 *     --upcoming / --past                     Whether the event has finished.
 *     --fully-booked / --last-spots / --finished
 *                                             Present only when a badge shows.
 *     --team                                  The course is a team race.
 *     [data-product]  Product ID.
 *     [data-date]     Y-m-d start date. Absent when the event has no date.
 *     [data-available] Seats remaining — usable for CSS counters or JS.
 *
 *     a.reb-event-list__link                Whole-row link.
 *
 *       time.reb-event-list__date           Date block (left column).
 *         --range                             Present when it spans days.
 *         .reb-event-list__date-part          One side of the date.
 *           .reb-event-list__date-start
 *           .reb-event-list__date-end
 *         .reb-event-list__day                Large day number.
 *         .reb-event-list__month              Small month label.
 *         .reb-event-list__date-sep           En dash between range halves.
 *         .reb-event-list__year               Year line under the whole block.
 *                                             Absent with show_year="no".
 *
 *       .reb-event-list__body               Middle column.
 *         .reb-event-list__title              Product title.
 *           .reb-event-list__team             Inline "Team race" badge after
 *                                             the title, team races only.
 *         .reb-event-list__subtitle           Session title, when set.
 *         .reb-event-list__meta               Wrapper for the items below.
 *           .reb-event-list__time
 *           .reb-event-list__location
 *           .reb-event-list__dates-count      "3 dates" (product mode only).
 *
 *       .reb-event-list__badges             Right column.
 *         .reb-event-list__badge
 *           --fully-booked / --last-spots / --finished
 *
 * COMMON TWEAKS
 * =============
 * Hide the repeated month on a same-month range:
 *   .reb-event-list__date--range .reb-event-list__date-start .reb-event-list__month { display: none; }
 *
 * Stack rows into a grid instead of a list:
 *   .reb-event-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
 *
 * Hide finished events that past="show" put on the page:
 *   .reb-event-list__item--past { display: none; }
 *
 * Hide the year line without touching the shortcode:
 *   .reb-event-list__year { display: none; }
 *
 * Hide the inline "Team race" badge (or use show_team="no"):
 *   .reb-event-list__team { display: none; }
 *
 * NARROW SCREENS
 * ==============
 * Below 768px each row becomes two lines: the date with the badge at the far
 * right, then the title, subtitle and meta underneath, flush left, with
 * --reb-el-stack-gap between the lines. The breakpoint is fixed (custom
 * properties cannot drive a media query); to switch earlier or later, repeat
 * the rules in that block under your own @media.
 */

/* -----------------------------------------------------------------------------
 * Root and custom properties
 * -------------------------------------------------------------------------- */

.reb-event-list {
	/* Palette */
	--reb-el-text: inherit;
	--reb-el-muted: #8e8e8e;
	--reb-el-accent: #111;
	--reb-el-border: #e3e3e3;
	--reb-el-hover-bg: rgba( 0, 0, 0, 0.03 );

	/* Badges */
	--reb-el-badge-full-bg: #f4f4f4;
	--reb-el-badge-full-text: #6b6b6b;
	--reb-el-badge-last-bg: #fff4e5;
	--reb-el-badge-last-text: #a05a00;
	--reb-el-badge-finished-bg: #ececec;
	--reb-el-badge-finished-text: #555;
	/* currentColor, not the accent: the badge sits inside the title and must
	   stay readable wherever the theme puts the title — the site renders the
	   list on a #111 panel with white titles, where an accent of #111 vanished. */
	--reb-el-team-bg: transparent;
	--reb-el-team-text: currentColor;
	--reb-el-team-border: currentColor;

	/* Finished events */
	--reb-el-past-opacity: 0.55;

	/* Metrics */
	--reb-el-gap: 1.5rem;
	--reb-el-stack-gap: 0.5rem; /* Between the date row and the body on narrow screens. */
	--reb-el-row-padding: 0.85rem 0;
	--reb-el-date-width: 6rem;
	--reb-el-day-size: 1.5rem;
	--reb-el-month-size: 0.75rem;
	--reb-el-year-size: 0.75rem;
	--reb-el-title-size: 1.25rem;
	--reb-el-meta-size: 0.85rem;
	--reb-el-radius: 6px;

	margin: 0;
	padding: 0;
	list-style: none;
	color: var( --reb-el-text );
}

/* -----------------------------------------------------------------------------
 * Row
 * -------------------------------------------------------------------------- */

.reb-event-list__item {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var( --reb-el-border );
}

.reb-event-list__item:last-child {
	border-bottom: 0;
}

.reb-event-list__link {
	display: flex;
	align-items: center;
	gap: var( --reb-el-gap );
	padding: var( --reb-el-row-padding );
	color: inherit;
	text-decoration: none;
	border-radius: var( --reb-el-radius );
}

.reb-event-list__link:hover,
.reb-event-list__link:focus-visible {
	background: var( --reb-el-hover-bg );
	color: inherit;
	text-decoration: none;
}

/* -----------------------------------------------------------------------------
 * Date block
 * -------------------------------------------------------------------------- */

.reb-event-list__date {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap; /* So the year line can take a row of its own. */
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-width: var( --reb-el-date-width );
	text-align: center;
	line-height: 1.1;
}

.reb-event-list__date-part {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.reb-event-list__day {
	font-size: var( --reb-el-day-size );
	font-weight: 700;
	color: var( --reb-el-accent );
}

.reb-event-list__month {
	font-size: var( --reb-el-month-size );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --reb-el-muted );
}

.reb-event-list__date-sep {
	color: var( --reb-el-muted );
}

/* The year sits on its own line under day and month, centred, whether the
   block is a single date or a range. */
.reb-event-list__year {
	flex: 0 0 100%;
	font-size: var( --reb-el-year-size );
	color: var( --reb-el-muted );
	white-space: nowrap;
}

/* -----------------------------------------------------------------------------
 * Body
 * -------------------------------------------------------------------------- */

.reb-event-list__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0; /* Lets long titles ellipsis instead of stretching the row. */
}

.reb-event-list__title {
	font-size: var( --reb-el-title-size );
	font-weight: 600;
}

/* Inline pill after the title of a team race. Sized in em so it follows
   --reb-el-title-size; outlined rather than filled so it does not compete
   with the availability badges on the right. It inherits the title's colour
   (see the custom properties above), so a theme that recolours the title
   recolours the pill with it. */
.reb-event-list__team {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.1em 0.6em;
	border: 1px solid var( --reb-el-team-border );
	border-radius: 999px;
	background: var( --reb-el-team-bg );
	color: var( --reb-el-team-text );
	font-size: 0.6em;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.reb-event-list__subtitle,
.reb-event-list__meta {
	font-size: var( --reb-el-meta-size );
	color: var( --reb-el-muted );
}

.reb-event-list__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Separator between meta items. Generated rather than in the markup so hiding
   one item with display:none cannot leave a dangling bullet behind. */
.reb-event-list__meta > * + *::before {
	content: "·";
	margin-right: 0.5rem;
}

/* -----------------------------------------------------------------------------
 * Badges
 * -------------------------------------------------------------------------- */

.reb-event-list__badges {
	display: flex;
	flex: 0 0 auto;
	gap: 0.35rem;
}

.reb-event-list__badge {
	display: inline-block;
	padding: 0.8em 1.6em;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.reb-event-list__badge--fully-booked {
	background: var( --reb-el-badge-full-bg );
	color: var( --reb-el-badge-full-text );
}

.reb-event-list__badge--last-spots {
	background: var( --reb-el-badge-last-bg );
	color: var( --reb-el-badge-last-text );
}

/* A finished event shows "Finished" in place of an availability badge. The row
   is also dimmed (below), so the badge is kept neutral rather than shouting. */
.reb-event-list__badge--finished {
	background: var( --reb-el-badge-finished-bg );
	color: var( --reb-el-badge-finished-text );
}

/* -----------------------------------------------------------------------------
 * Finished events
 *
 * Only rendered at all when the shortcode is given past="show". Each carries
 * the "Finished" badge above as well as this dimming.
 * -------------------------------------------------------------------------- */

.reb-event-list__item--past {
	opacity: var( --reb-el-past-opacity );
}

/* -----------------------------------------------------------------------------
 * Narrow screens — two rows, everything flush left except the badge
 *
 * Below 768px (Elementor's mobile breakpoint, which is where the site's own
 * layout switches) the three columns become:
 *
 *   | date              badge |
 *   | title + team pill        |
 *   | subtitle, meta           |
 *
 * The badge is pushed to the right end of the first row with an auto margin
 * and moved ahead of the body with `order` — DOM order stays date, body,
 * badge, so screen readers still hear the title before the availability. The
 * date keeps its day-over-month shape so a theme's box behind each date part
 * still fits; only the block's centring goes. A container query would measure
 * the list rather than the viewport, but the date block has a fixed width and
 * the body is the only flexible column, so viewport width predicts the
 * available space well enough.
 * -------------------------------------------------------------------------- */

@media ( max-width: 767px ) {

	.reb-event-list__link {
		flex-wrap: wrap;
		gap: var( --reb-el-stack-gap );
		text-align: left;
	}

	.reb-event-list__date {
		order: 1;
		justify-content: flex-start;
		min-width: 0;
		text-align: left;
	}

	.reb-event-list__badges {
		order: 2;
		margin-left: auto;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.reb-event-list__body {
		order: 3;
		flex-basis: 100%;
	}
}

/* -----------------------------------------------------------------------------
 * Motion and contrast preferences
 * -------------------------------------------------------------------------- */

@media ( prefers-contrast: more ) {

	.reb-event-list {
		--reb-el-muted: #4a4a4a;
		--reb-el-border: #8a8a8a;
		--reb-el-past-opacity: 0.8;
	}
}