/**
 * Event Calendar — public styles.
 *
 * Two rules govern this file:
 *
 * 1. Everything is scoped under `.event-calendar`. Class names like
 *    `.event-card` are common enough that a custom theme may already define
 *    them; the wrapper means the plugin can never restyle a theme's markup,
 *    and a theme can never accidentally restyle the plugin's.
 *
 * 2. Everything visual is a design token. Themes, the shortcode and the
 *    Elementor widget all restyle by setting the same custom properties, so
 *    there is one place to change and no !important arms race.
 *
 * Colours inherit from the theme wherever possible — `currentColor` mixes and
 * `inherit` mean the plugin adopts the surrounding typography and palette
 * rather than fighting it.
 */

.event-calendar {
	/* Colour */
	--event-cal-accent: #5b3df5;
	--event-cal-accent-text: #ffffff;
	--event-cal-muted: color-mix(in srgb, currentColor 62%, transparent);
	--event-cal-surface: #ffffff;
	--event-cal-canvas: color-mix(in srgb, currentColor 5%, transparent);
	--event-cal-border: color-mix(in srgb, currentColor 14%, transparent);

	/* Shape and rhythm */
	--event-cal-radius: 14px;
	--event-cal-radius-sm: 8px;
	--event-cal-gap: 1.5rem;
	--event-cal-pad: 1.5rem;
	--event-cal-columns: 3;
	--event-cal-image-ratio: 16 / 10;
	--event-cal-list-ratio: 4 / 3;
	--event-cal-shadow: 0 1px 2px rgba(16, 12, 40, 0.04), 0 8px 24px -12px rgba(16, 12, 40, 0.18);
	--event-cal-shadow-hover: 0 2px 4px rgba(16, 12, 40, 0.06), 0 18px 40px -16px rgba(16, 12, 40, 0.28);

	/* Inherit the theme's type and colour rather than imposing our own. */
	color: inherit;
	font-family: inherit;
}

/* Older browsers without color-mix get explicit fallbacks. */
@supports not (color: color-mix(in srgb, black 50%, white)) {
	.event-calendar {
		--event-cal-muted: rgba(28, 25, 45, 0.62);
		--event-cal-canvas: rgba(28, 25, 45, 0.05);
		--event-cal-border: rgba(28, 25, 45, 0.14);
	}
}

/*
 * Dark themes. A plugin cannot read the theme's background colour, so the
 * surface becomes a tint of the inherited text colour instead of solid white
 * — that reads correctly on any background, light or dark.
 */
@media (prefers-color-scheme: dark) {
	.event-calendar {
		--event-cal-surface: color-mix(in srgb, currentColor 6%, transparent);
		--event-cal-border: color-mix(in srgb, currentColor 22%, transparent);
		--event-cal-muted: color-mix(in srgb, currentColor 68%, transparent);
		--event-cal-shadow: none;
		--event-cal-shadow-hover: none;
	}
}

/*
 * Many themes implement a dark mode with a class or attribute rather than the
 * media query — a visitor-facing toggle cannot use `prefers-color-scheme`.
 * These are the conventions in common use. If a theme uses something else, the
 * same five tokens are all it needs to set.
 */
[data-theme="dark"] .event-calendar,
[data-color-scheme="dark"] .event-calendar,
[data-color-mode="dark"] .event-calendar,
.dark .event-calendar,
.dark-mode .event-calendar,
.is-dark-theme .event-calendar {
	--event-cal-surface: color-mix(in srgb, currentColor 6%, transparent);
	--event-cal-border: color-mix(in srgb, currentColor 22%, transparent);
	--event-cal-muted: color-mix(in srgb, currentColor 68%, transparent);
	--event-cal-shadow: none;
	--event-cal-shadow-hover: none;
}

/* An explicit light setting must win back over a dark media query. */
[data-theme="light"] .event-calendar,
[data-color-scheme="light"] .event-calendar,
[data-color-mode="light"] .event-calendar {
	--event-cal-surface: #ffffff;
	--event-cal-border: color-mix(in srgb, currentColor 14%, transparent);
	--event-cal-muted: color-mix(in srgb, currentColor 62%, transparent);
}

.event-calendar *,
.event-calendar *::before,
.event-calendar *::after {
	box-sizing: border-box;
}

/*
 * Themes style bare `button` and `a` elements heavily — dark fills, uppercase
 * tracking, drop shadows, min-widths. The plugin's own controls opt out of all
 * of it and then style themselves, so a carousel arrow looks like a carousel
 * arrow on every theme rather than inheriting a submit button's appearance.
 * Scoped inside `.event-calendar`, so the theme's own buttons are untouched.
 */
.event-calendar .event-list__header .event-carousel__nav .event-carousel__button,
.event-calendar .event-toolbar .event-toolbar__scope,
.event-calendar .event-toolbar .event-toolbar__layout {
	background-image: none;
	box-shadow: none;
	font: inherit;
	letter-spacing: normal;
	min-height: 0;
	min-width: 0;
	text-shadow: none;
	text-transform: none;
}

/* ------------------------------------------------------------------ *
 * Section header
 * ------------------------------------------------------------------ */

.event-calendar .event-list__header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	margin-bottom: var(--event-cal-gap);
}

.event-calendar .event-list__title {
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
	letter-spacing: -0.02em;
	margin: 0;
}

.event-calendar .event-list__actions {
	align-items: center;
	display: flex;
	gap: 0.75rem;
}

.event-calendar .event-list__more {
	color: var(--event-cal-accent);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.event-calendar .event-list__more:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Listing shells
 * ------------------------------------------------------------------ */

.event-calendar .event-list__items {
	display: grid;
	gap: var(--event-cal-gap);
}

.event-calendar .event-list--cards .event-list__items,
.event-list--cards .event-list__items {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

/* Once there is room, honour the requested column count exactly. */
@media (min-width: 60rem) {
	.event-list--cards .event-list__items {
		grid-template-columns: repeat(var(--event-cal-columns), minmax(0, 1fr));
	}
}

.event-list--list .event-list__items,
.event-list--compact .event-list__items {
	grid-template-columns: 1fr;
}

.event-list--compact .event-list__items {
	gap: 0;
}

.event-calendar .event-list__empty {
	background: var(--event-cal-canvas);
	border-radius: var(--event-cal-radius);
	color: var(--event-cal-muted);
	margin: 0;
	padding: var(--event-cal-pad);
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * Card — shared
 * ------------------------------------------------------------------ */

.event-calendar .event-card {
	background: var(--event-cal-surface);
	border: 1px solid var(--event-cal-border);
	border-radius: var(--event-cal-radius);
	box-shadow: var(--event-cal-shadow);
	display: flex;
	margin: 0;
	overflow: hidden;
	position: relative;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.event-calendar .event-card:hover,
.event-calendar .event-card:focus-within {
	box-shadow: var(--event-cal-shadow-hover);
	transform: translateY(-2px);
}

/*
 * The aspect ratio lives on the media box, not the image. That gives the box
 * a definite height for the image's percentage sizing to resolve against —
 * put the ratio on the image instead and the percentage falls back to the
 * photo's intrinsic proportions, so every card crops to a different height.
 */
.event-calendar .event-card__media {
	aspect-ratio: var(--event-cal-image-ratio);
	display: block;
	flex-shrink: 0;
	line-height: 0;
	overflow: hidden;
	position: relative;
}

/*
 * Taken out of flow and pinned to fill the media box.
 *
 * The two !important declarations are deliberate and deliberately narrow.
 * Every theme ships `img { height: auto; max-width: 100% }` — correct for a
 * content image, wrong for one that has to fill a fixed-ratio frame, and it
 * leaves the photo short of the card edge. Raising specificity alone did not
 * hold here (verified against Twenty Twenty-One), so these two properties are
 * forced. Scoped inside `.event-calendar`, this cannot reach any of the
 * theme's own markup, and the tokens above remain the way to restyle
 * everything else.
 */
.event-calendar .event-card .event-card__media img {
	aspect-ratio: auto;
	display: block;
	height: 100% !important;
	inset: 0;
	object-fit: cover;
	position: absolute;
	transition: transform 0.4s ease;
	width: 100% !important;
}

.event-calendar .event-card:hover .event-card__media img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.event-calendar .event-card,
	.event-calendar .event-card__media img,
	.event-calendar .event-card__link::after {
		transition: none;
	}

	.event-calendar .event-card:hover,
	.event-calendar .event-card:focus-within,
	.event-calendar .event-card:hover .event-card__media img {
		transform: none;
	}
}

.event-calendar .event-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
	padding: var(--event-cal-pad);
}

.event-calendar .event-card__head {
	align-items: flex-start;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.event-calendar .event-card__headings {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.event-calendar .event-card__title {
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.4rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 0;
}

.event-calendar .event-card__title a {
	color: inherit;
	text-decoration: none;
}

/*
 * The whole card is clickable, but only the title is a real link, so keyboard
 * users and screen readers get exactly one predictable target per card.
 */
.event-calendar .event-card__title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.event-calendar .event-card__title a:hover,
.event-calendar .event-card__title a:focus-visible {
	color: var(--event-cal-accent);
}

.event-calendar .event-card__location {
	color: var(--event-cal-muted);
	font-size: 0.9rem;
	margin: 0;
}

.event-calendar .event-card__when {
	color: var(--event-cal-accent);
	font-size: 0.9rem;
	font-weight: 700;
	margin: 0;
}

.event-calendar .event-card__summary {
	color: var(--event-cal-muted);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
}

.event-calendar .event-card__facts {
	color: var(--event-cal-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85rem;
	gap: 0.35rem 1.1rem;
	list-style: none;
	margin: auto 0 0;
	padding: 0.9rem 0 0;
}

.event-list--list .event-card__facts,
.event-list--cards .event-card__facts {
	border-top: 1px solid var(--event-cal-border);
}

.event-calendar .event-card__fact {
	align-items: center;
	display: flex;
	gap: 1.1rem;
	margin: 0;
}

.event-calendar .event-card__fact + .event-card__fact::before {
	background: currentColor;
	border-radius: 50%;
	content: "";
	height: 3px;
	margin-left: -0.7rem;
	opacity: 0.5;
	width: 3px;
}

.event-calendar .event-card__more {
	margin: auto 0 0;
	padding-top: 0.35rem;
}

.event-calendar .event-card__link {
	align-items: center;
	color: var(--event-cal-accent);
	display: inline-flex;
	font-size: 0.9rem;
	font-weight: 600;
	gap: 0.3rem;
	text-decoration: none;
}

.event-calendar .event-card__link::after {
	content: "\2192";
	transition: transform 0.2s ease;
}

.event-calendar .event-card:hover .event-card__link::after {
	transform: translateX(3px);
}

/* Date badge ------------------------------------------------------- */

.event-calendar .event-card__badge {
	align-items: center;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	line-height: 1;
	margin: 0;
	text-align: center;
}

.event-calendar .event-card__badge-month {
	color: var(--event-cal-muted);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.event-calendar .event-card__badge-day {
	font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.9rem);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.event-calendar .event-card__badge--overlay {
	background: var(--event-cal-surface);
	border-radius: var(--event-cal-radius-sm);
	box-shadow: var(--event-cal-shadow);
	gap: 0.1rem;
	inset-inline-start: 0.85rem;
	padding: 0.45rem 0.65rem;
	position: absolute;
	top: 0.85rem;
}

.event-calendar .event-card__badge--overlay .event-card__badge-day {
	font-size: 1.45rem;
	font-weight: 600;
}

/* Status flag ------------------------------------------------------ */

.event-calendar .event-card__status {
	align-self: flex-start;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 0.25rem;
	padding: 0.2em 0.7em;
	text-transform: uppercase;
}

.event-calendar .event-card__status--cancelled {
	background: #fdecec;
	color: #8a1f1f;
}

.event-calendar .event-card__status--postponed,
.event-calendar .event-card__status--full,
.event-calendar .event-card__status--waitlist,
.event-calendar .event-card__status--closed {
	background: #fdf3e2;
	color: #7a4c00;
}

.event-calendar .event-card__status--in-progress {
	background: #e6f6ec;
	color: #0a5c2a;
}

.event-calendar .event-card__status--past {
	background: var(--event-cal-canvas);
	color: var(--event-cal-muted);
}

.event-calendar .event-card.event-state-past,
.event-calendar .event-card.event-state-cancelled {
	opacity: 0.88;
}

/* ------------------------------------------------------------------ *
 * Preset: cards
 * ------------------------------------------------------------------ */

/*
 * The slideshow is listed alongside the cards preset rather than repeating it.
 *
 * These rules are scoped to `.event-list--cards`, the wrapper a listing puts
 * around its cards. The slideshow has its own wrapper, so without this a slide
 * fell back to the default row layout — image on the left, text crushed into
 * whatever was left.
 */
.event-list--cards .event-card {
	flex-direction: column;
}

.event-list--cards .event-card__media {
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * Preset: list
 * ------------------------------------------------------------------ */

.event-list--list .event-card {
	flex-direction: column;
}

@media (min-width: 46rem) {
	.event-list--list .event-card {
		flex-direction: row;
	}

	/* A row wants a squarer crop than a grid card. */
	.event-list--list .event-card__media {
		align-self: stretch;
		aspect-ratio: var(--event-cal-list-ratio);
		width: clamp(12rem, 30%, 20rem);
	}

	.event-list--list .event-card__body {
		padding: calc(var(--event-cal-pad) * 1.15);
	}
}

.event-list--list .event-card__badge {
	align-items: baseline;
	flex-direction: row;
	gap: 0.45rem;
}

/* ------------------------------------------------------------------ *
 * Preset: compact
 * ------------------------------------------------------------------ */

.event-list--compact .event-card {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--event-cal-border);
	border-radius: 0;
	box-shadow: none;
	flex-direction: row;
}

.event-list--compact .event-card:hover,
.event-list--compact .event-card:focus-within {
	box-shadow: none;
	transform: none;
}

.event-list--compact .event-card__body {
	align-items: center;
	flex-direction: row;
	gap: 1rem;
	justify-content: space-between;
	padding: 0.85rem 0.25rem;
}

.event-list--compact .event-card__head {
	align-items: center;
	flex: 1;
	flex-direction: row-reverse;
	gap: 0.9rem;
	justify-content: flex-end;
}

.event-list--compact .event-card__badge {
	background: var(--event-cal-canvas);
	border-radius: var(--event-cal-radius-sm);
	min-width: 3.1rem;
	padding: 0.4rem 0.3rem;
}

.event-list--compact .event-card__badge-day {
	font-size: 1.25rem;
	font-weight: 600;
}

.event-list--compact .event-card__title {
	font-size: 1rem;
}

/* ------------------------------------------------------------------ *
 * Preset: carousel
 *
 * Scroll-snap rather than a slider library: it works with no JavaScript,
 * supports touch, trackpad and keyboard natively, and cannot break a theme.
 * The arrow buttons are progressive enhancement on top.
 * ------------------------------------------------------------------ */

.event-list--carousel .event-list__items {
	display: flex;
	gap: var(--event-cal-gap);
	grid-template-columns: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-bottom: 0.75rem;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

/*
 * Smoothing is applied per-scroll by the script rather than declared here.
 * As a CSS property it also captures anchor jumps and any other programmatic
 * scroll of this container, which made arrow clicks unreliable.
 */

.event-list--carousel .event-list__items:focus-visible {
	outline: 2px solid var(--event-cal-accent);
	outline-offset: 4px;
}

.event-list--carousel .event-card {
	flex: 0 0 clamp(15rem, 78vw, 21rem);
	flex-direction: column;
	scroll-snap-align: start;
}

.event-list--carousel .event-card__media {
	width: 100%;
}

.event-calendar .event-carousel__nav {
	display: flex;
	gap: 0.35rem;
}

.event-calendar .event-carousel__nav[hidden] {
	display: none;
}

.event-calendar .event-list__header .event-carousel__nav .event-carousel__button {
	align-items: center;
	background: var(--event-cal-surface);
	border: 1px solid var(--event-cal-border);
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font-size: 1rem;
	height: 2.25rem;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background 0.15s ease, border-color 0.15s ease;
	width: 2.25rem;
}

.event-calendar .event-list__header .event-carousel__nav .event-carousel__button:hover:not([disabled]) {
	background: var(--event-cal-canvas);
	border-color: var(--event-cal-accent);
	color: var(--event-cal-accent);
}

.event-calendar .event-list__header .event-carousel__nav .event-carousel__button[disabled] {
	cursor: default;
	opacity: 0.4;
}

/* ------------------------------------------------------------------ *
 * Month calendar
 * ------------------------------------------------------------------ */

.event-calendar .event-month__header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.event-calendar .event-month__title {
	font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
	letter-spacing: -0.02em;
	margin: 0;
}

.event-calendar .event-month__nav {
	align-items: center;
	display: flex;
	gap: 0.35rem;
}

.event-calendar .event-month__nav .event-month__step,
.event-calendar .event-month__nav .event-month__today {
	align-items: center;
	background: var(--event-cal-surface);
	border: 1px solid var(--event-cal-border);
	border-radius: 999px;
	color: inherit;
	display: inline-flex;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	justify-content: center;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.event-calendar .event-month__nav .event-month__step {
	height: 2.25rem;
	width: 2.25rem;
}

.event-calendar .event-month__nav .event-month__today {
	padding: 0.35em 1em;
}

.event-calendar .event-month__nav .event-month__step:hover,
.event-calendar .event-month__nav .event-month__today:hover {
	border-color: var(--event-cal-accent);
	color: var(--event-cal-accent);
}

.event-calendar .event-month__grid {
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	width: 100%;
}

.event-calendar .event-month__weekday {
	color: var(--event-cal-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0 0 0.5rem;
	text-align: center;
	text-transform: uppercase;
}

.event-calendar .event-month__day {
	background: var(--event-cal-surface);
	border: 1px solid var(--event-cal-border);
	/* Acts as a minimum on a table cell: a day with several events grows. */
	height: 9.5rem;
	padding: 0.4rem;
	vertical-align: top;
	/* With table-layout: fixed the column widths come from here. Do not add
	   max-width: it overrides this and collapses every column. */
	width: 14.28%;
}

/* Collapse the shared borders into single hairlines. */
.event-calendar .event-month__week .event-month__day + .event-month__day {
	border-left: 0;
}

.event-calendar .event-month__week + .event-month__week .event-month__day {
	border-top: 0;
}

.event-calendar .event-month__week:first-child .event-month__day:first-child {
	border-top-left-radius: var(--event-cal-radius);
}

.event-calendar .event-month__week:first-child .event-month__day:last-child {
	border-top-right-radius: var(--event-cal-radius);
}

.event-calendar .event-month__week:last-child .event-month__day:first-child {
	border-bottom-left-radius: var(--event-cal-radius);
}

.event-calendar .event-month__week:last-child .event-month__day:last-child {
	border-bottom-right-radius: var(--event-cal-radius);
}

.event-calendar .event-month__day--outside {
	background: var(--event-cal-canvas);
}

.event-calendar .event-month__day--outside .event-month__date-number {
	opacity: 0.45;
}

.event-calendar .event-month__date {
	display: block;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	margin-bottom: 0.25rem;
	text-align: right;
}

.event-calendar .event-month__day--today .event-month__date-number {
	background: var(--event-cal-accent);
	border-radius: 999px;
	color: var(--event-cal-accent-text);
	display: inline-block;
	line-height: 1.5rem;
	min-width: 1.5rem;
	text-align: center;
}

.event-calendar .event-month__events {
	display: grid;
	gap: 0.2rem;
	/*
	 * An `auto` grid column is sized to its items' max-content, so a long
	 * event title made this column wider than the day cell and spilled into
	 * the next date. `minmax(0, 1fr)` is what stops a grid item from forcing
	 * its track wider than the space available.
	 */
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.event-calendar .event-month__events li {
	margin: 0;
}

.event-calendar .event-month__event {
	background: color-mix(in srgb, var(--event-cal-accent) 12%, transparent);
	border-left: 3px solid var(--event-cal-accent);
	border-radius: 4px;
	color: inherit;
	display: block;
	font-size: 0.75rem;
	line-height: 1.35;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	padding: 0.2rem 0.35rem;
	text-decoration: none;
	/* Wrap rather than truncate: a clipped title in a month grid tells the
	   visitor an event exists but not which one. */
	overflow-wrap: anywhere;
	white-space: normal;
	word-break: break-word;
}

/*
 * A thumbnail above the title, when the event has one.
 *
 * Stacked rather than side by side: a month cell is around 150px wide, and an
 * inline thumbnail large enough to make out leaves the title too narrow to
 * read — which is the one thing the cell has to get across.
 */
.event-calendar .event-month__event {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.event-calendar .event-month__event-thumb {
	border-radius: 4px;
	display: block;
	flex: 0 0 auto;
	height: 3.25rem;
	overflow: hidden;
	width: 100%;
}

.event-calendar .event-month__event-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.event-calendar .event-month__event-body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Long titles wrap, but not without limit — two lines keeps every row in the
   month the same height. */
.event-calendar .event-month__event-title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	line-clamp: 2;
	overflow: hidden;
}

@supports not (color: color-mix(in srgb, black 50%, white)) {
	.event-calendar .event-month__event {
		background: rgba(28, 25, 45, 0.06);
	}
}

.event-calendar .event-month__event:hover,
.event-calendar .event-month__event:focus-visible {
	background: var(--event-cal-accent);
	color: var(--event-cal-accent-text);
}

.event-calendar .event-month__event-time {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	margin-right: 0.25em;
	opacity: 0.85;
}

.event-calendar .event-month__event--cancelled .event-month__event-title {
	text-decoration: line-through;
}

.event-calendar .event-month__event--cancelled,
.event-calendar .event-month__event--past {
	background: var(--event-cal-canvas);
	border-left-color: var(--event-cal-border);
}

/*
 * Narrow screens: a seven-column grid cannot hold readable event titles, so
 * the table becomes a list of only those days that have something on.
 */
@media (max-width: 46rem) {
	.event-calendar .event-month__grid,
	.event-calendar .event-month__grid tbody,
	.event-calendar .event-month__week,
	.event-calendar .event-month__day {
		display: block;
		width: auto;
	}

	.event-calendar .event-month__grid thead {
		display: none;
	}

	.event-calendar .event-month__day--empty {
		display: none;
	}

	.event-calendar .event-month__day {
		border-radius: var(--event-cal-radius-sm) !important;
		height: auto;
		margin-bottom: 0.5rem;
		padding: 0.75rem;
	}

	.event-calendar .event-month__week .event-month__day + .event-month__day,
	.event-calendar .event-month__week + .event-month__week .event-month__day {
		border-left: 1px solid var(--event-cal-border);
		border-top: 1px solid var(--event-cal-border);
	}

	.event-calendar .event-month__date {
		text-align: left;
	}

	.event-calendar .event-month__event {
		font-size: 0.85rem;
		white-space: normal;
	}
}

/* ------------------------------------------------------------------ *
 * Toolbar
 * ------------------------------------------------------------------ */

.event-calendar .event-toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	margin-bottom: var(--event-cal-gap);
}

/* Scopes and layout toggle travel together, so they never split across rows. */
.event-calendar .event-toolbar__controls {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 0.75rem;
}

.event-calendar .event-toolbar__scopes {
	background: var(--event-cal-canvas);
	border-radius: 999px;
	display: flex;
	gap: 0.15rem;
	padding: 0.25rem;
}

.event-calendar .event-toolbar__scope {
	border-radius: 999px;
	color: var(--event-cal-muted);
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4;
	padding: 0.4em 1.1em;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.event-calendar .event-toolbar__scope:hover {
	color: inherit;
}

.event-calendar .event-toolbar__scope.is-current {
	background: var(--event-cal-accent);
	color: var(--event-cal-accent-text);
}

.event-calendar .event-toolbar__layouts {
	display: flex;
	gap: 0.25rem;
}

.event-calendar .event-toolbar__layout {
	align-items: center;
	border-radius: var(--event-cal-radius-sm);
	color: var(--event-cal-muted);
	display: inline-flex;
	justify-content: center;
	padding: 0.45rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.event-calendar .event-toolbar__layout svg {
	fill: currentColor;
}

.event-calendar .event-toolbar__layout:hover {
	background: var(--event-cal-canvas);
	color: inherit;
}

.event-calendar .event-toolbar__layout.is-current {
	color: var(--event-cal-accent);
}

/* Search and category filter.
 *
 * Deliberately deep selectors: themes style bare `input`, `select` and
 * `button` with high-specificity rules of their own (Twenty Twenty-One's
 * `button:not(:hover):not(:active):not(.has-background)` scores 0,3,1), and a
 * two-class selector loses to them. Four classes wins in every theme tested
 * without resorting to !important.
 */
.event-calendar .event-toolbar .event-toolbar__filter {
	align-items: center;
	display: flex;
	flex: 1 1 22rem;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	min-width: 0;
}

/*
 * Every size here is set explicitly, including `width`.
 *
 * Themes routinely set `width: 100%` on all form controls — Blocksy does it
 * through `select, textarea, input:is([type=text], …)`. A flex item with
 * `flex-basis: auto` then takes that 100% as its main size and claims the
 * whole row, which turns this bar into three stacked full-width rows. Giving
 * each control a real basis and an explicit width stops that, and the selector
 * depth below is what makes it stick.
 */
.event-calendar .event-toolbar .event-toolbar__filter .event-toolbar__search,
.event-calendar .event-toolbar .event-toolbar__filter .event-toolbar__category {
	background: var(--event-cal-surface);
	border: 1px solid var(--event-cal-border);
	border-radius: var(--event-cal-radius-sm);
	box-shadow: none;
	box-sizing: border-box;
	color: inherit;
	font: inherit;
	font-size: 0.95rem;
	height: auto;
	line-height: 1.4;
	margin: 0;
	max-width: 100%;
	min-height: 0;
	padding: 0.55em 0.85em;
}

.event-calendar .event-toolbar .event-toolbar__filter .event-toolbar__search {
	flex: 1 1 9rem;
	min-width: 0;
	width: auto;
}

.event-calendar .event-toolbar .event-toolbar__filter .event-toolbar__category {
	flex: 0 1 11rem;
	width: auto;
}

.event-calendar .event-toolbar .event-toolbar__filter .event-toolbar__search:focus,
.event-calendar .event-toolbar .event-toolbar__filter .event-toolbar__category:focus {
	border-color: var(--event-cal-accent);
	outline: 2px solid var(--event-cal-accent);
	outline-offset: 1px;
}

.event-calendar .event-toolbar .event-toolbar__filter .event-toolbar__submit {
	background: var(--event-cal-accent);
	border: 1px solid var(--event-cal-accent);
	border-radius: var(--event-cal-radius-sm);
	box-sizing: border-box;
	color: var(--event-cal-accent-text);
	cursor: pointer;
	flex: 0 0 auto;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	height: auto;
	line-height: 1.4;
	margin: 0;
	min-height: 0;
	padding: 0.55em 1.2em;
	text-transform: none;
	white-space: nowrap;
	width: auto;
}

.event-calendar .event-toolbar .event-toolbar__filter .event-toolbar__submit:hover,
.event-calendar .event-toolbar .event-toolbar__filter .event-toolbar__submit:focus {
	filter: brightness(0.92);
}

.event-calendar .event-toolbar .event-toolbar__filter .event-toolbar__clear {
	color: var(--event-cal-muted);
	flex: 0 0 auto;
	font-size: 0.9rem;
	text-decoration: underline;
	white-space: nowrap;
}


/* Category chips on a card. */
.event-calendar .event-card__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 0.5rem;
}

.event-calendar .event-card__terms .event-card__term {
	background: var(--event-cal-canvas);
	border-radius: 999px;
	color: var(--event-cal-muted);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	padding: 0.25em 0.7em;
	text-decoration: none;
	text-transform: uppercase;
}

.event-calendar .event-card__terms a.event-card__term:hover,
.event-calendar .event-card__terms a.event-card__term:focus {
	background: var(--event-cal-accent);
	color: var(--event-cal-accent-text);
}

.event-calendar .event-archive__description {
	color: var(--event-cal-muted);
	max-width: 46rem;
}

.event-calendar .event-archive__crumb {
	font-size: 0.9rem;
	margin: 0.5rem 0 0;
}

/* ------------------------------------------------------------------ *
 * Archive
 * ------------------------------------------------------------------ */

.event-calendar.event-archive,
.event-calendar.event-single {
	margin-inline: auto;
	max-width: 72rem;
	padding: clamp(1.5rem, 4vw, 3.5rem) 1.25rem;
}

.event-calendar .event-archive__header {
	margin-bottom: var(--event-cal-gap);
}

.event-calendar .event-archive__title {
	font-size: clamp(1.8rem, 1.3rem + 2vw, 2.75rem);
	letter-spacing: -0.02em;
	margin: 0 0 0.25rem;
}

.event-calendar .event-archive__count {
	color: var(--event-cal-muted);
	margin: 0;
}

.event-calendar .event-archive__pagination {
	margin-top: calc(var(--event-cal-gap) * 1.5);
}

.event-calendar .page-numbers {
	border-radius: var(--event-cal-radius-sm);
	padding: 0.35em 0.7em;
	text-decoration: none;
}

.event-calendar .page-numbers.current {
	background: var(--event-cal-accent);
	color: var(--event-cal-accent-text);
}

/* ------------------------------------------------------------------ *
 * Single event
 * ------------------------------------------------------------------ */

.event-calendar .event-single__header {
	margin-bottom: var(--event-cal-gap);
}

.event-calendar .event-single__title {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 0.5rem;
}

.event-calendar .event-single__when {
	color: var(--event-cal-accent);
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0;
}

.event-calendar .event-single__timezone,
.event-calendar .event-details__timezone {
	color: var(--event-cal-muted);
	font-weight: 400;
	margin-left: 0.35em;
}

.event-calendar .event-single__media {
	margin: 0 0 var(--event-cal-gap);
}

.event-calendar .event-single__media img {
	border-radius: var(--event-cal-radius);
	display: block;
	height: auto;
	/*
	 * A tall portrait featured image would otherwise fill the viewport and
	 * push the date, the details and the register button below the fold — on
	 * the one page where those are the whole point.
	 */
	max-height: 26rem;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
}

.event-calendar .event-single__layout {
	display: grid;
	gap: var(--event-cal-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
	.event-calendar .event-single__layout {
		align-items: start;
		grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
	}

	.event-calendar .event-single__aside {
		position: sticky;
		top: 2rem;
	}
}

.event-calendar .event-single__nav {
	margin-top: calc(var(--event-cal-gap) * 1.5);
}

.event-calendar .event-single__back {
	color: var(--event-cal-muted);
	text-decoration: none;
}

.event-calendar .event-single__back:hover {
	color: var(--event-cal-accent);
}

/* Detail panel ----------------------------------------------------- */

.event-calendar.event-details,
.event-calendar .event-details {
	background: var(--event-cal-surface);
	border: 1px solid var(--event-cal-border);
	border-radius: var(--event-cal-radius);
	box-shadow: var(--event-cal-shadow);
	padding: var(--event-cal-pad);
}

.event-calendar .event-details__list {
	display: grid;
	gap: 1rem;
	margin: 0;
}

.event-calendar .event-details__row {
	display: grid;
	gap: 0.2rem;
}

.event-calendar .event-details__label {
	color: var(--event-cal-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.event-calendar .event-details__value {
	margin: 0;
}

/* Status notices --------------------------------------------------- */

.event-calendar .event-notice {
	border-inline-start: 4px solid var(--event-cal-border);
	border-radius: var(--event-cal-radius-sm);
	font-weight: 600;
	margin: 0 0 1rem;
	padding: 0.75em 0.9em;
}

.event-calendar .event-notice--cancelled,
.event-calendar .event-notice--postponed {
	background: #fdecec;
	border-inline-start-color: #b32d2e;
	color: #7a1c1c;
}

.event-calendar .event-notice--full,
.event-calendar .event-notice--closed,
.event-calendar .event-notice--undated {
	background: #fdf3e2;
	border-inline-start-color: #c47b00;
	color: #6d4400;
}

.event-calendar .event-notice--in-progress {
	background: #e6f6ec;
	border-inline-start-color: #0a7a33;
	color: #0a5c2a;
}

.event-calendar .event-notice--past {
	background: var(--event-cal-canvas);
	color: var(--event-cal-muted);
}

/* ------------------------------------------------------------------ *
 * Action panels: register, add to calendar, share, interest
 * ------------------------------------------------------------------ */

.event-calendar .event-panel {
	border-top: 1px solid var(--event-cal-border);
	margin-top: 1.25rem;
	padding-top: 1.25rem;
}

.event-calendar .event-panel__title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

/* Buttons opt out of theme button styling before styling themselves.
 *
 * `.event-calendar .event-button` is listed as well as the panel-scoped
 * selectors: a button outside a panel — the slideshow's is — otherwise picked
 * up no styling at all and rendered as a bare inline link.
 */
.event-calendar .event-button,
.event-calendar .event-panel .event-button,
.event-calendar .event-registration .event-button {
	align-items: center;
	background: transparent;
	background-image: none;
	border: 1px solid var(--event-cal-border);
	border-radius: var(--event-cal-radius-sm);
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	gap: 0.4rem;
	justify-content: center;
	letter-spacing: normal;
	line-height: 1.4;
	min-height: 0;
	min-width: 0;
	padding: 0.55em 1.1em;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.event-calendar .event-button:hover:not(:disabled),
.event-calendar .event-panel .event-button:hover:not(:disabled),
.event-calendar .event-registration .event-button:hover:not(:disabled) {
	border-color: var(--event-cal-accent);
	color: var(--event-cal-accent);
}

.event-calendar .event-button--primary,
.event-calendar .event-panel .event-button--primary,
.event-calendar .event-registration .event-button--primary {
	background: var(--event-cal-accent);
	border-color: var(--event-cal-accent);
	color: var(--event-cal-accent-text);
	width: 100%;
}

.event-calendar .event-button--primary:hover:not(:disabled),
.event-calendar .event-panel .event-button--primary:hover:not(:disabled),
.event-calendar .event-registration .event-button--primary:hover:not(:disabled) {
	color: var(--event-cal-accent-text);
	filter: brightness(1.08);
}

.event-calendar .event-button:disabled {
	cursor: progress;
	opacity: 0.6;
}

/* Registration ------------------------------------------------------ */

.event-calendar .event-registration__form {
	display: grid;
	gap: 0.85rem;
}

.event-calendar .event-registration__field {
	display: grid;
	gap: 0.3rem;
	margin: 0;
}

.event-calendar .event-registration__field label {
	font-size: 0.85rem;
	font-weight: 600;
}

.event-calendar .event-registration__field input {
	background: var(--event-cal-surface);
	border: 1px solid var(--event-cal-border);
	border-radius: var(--event-cal-radius-sm);
	color: inherit;
	font: inherit;
	font-size: 0.95rem;
	padding: 0.55em 0.7em;
	width: 100%;
}

.event-calendar .event-registration__field input:focus-visible {
	border-color: var(--event-cal-accent);
	outline: 2px solid var(--event-cal-accent);
	outline-offset: 1px;
}

/* Off-screen rather than display:none — a bot reading the DOM still
   finds it, a screen reader skips it, and nobody can tab into it. */
.event-calendar .event-registration__decoy {
	height: 1px;
	left: -9999px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.event-calendar .event-registration__actions {
	margin: 0;
}

.event-calendar .event-registration__scarcity {
	color: var(--event-cal-accent);
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0;
}

.event-calendar .event-registration__closed {
	color: var(--event-cal-muted);
	margin: 0;
}

.event-calendar .event-registration__message {
	font-size: 0.9rem;
	margin: 0;
}

.event-calendar .event-registration__message:empty {
	display: none;
}

.event-calendar .event-registration__message.is-error {
	color: #a3231f;
}

.event-calendar .event-registration__message.is-success {
	color: #0a5c2a;
	font-weight: 600;
}

@media (prefers-color-scheme: dark) {
	.event-calendar .event-registration__message.is-error {
		color: #ff9b93;
	}

	.event-calendar .event-registration__message.is-success {
		color: #79d99b;
	}
}

.event-calendar .event-registration__ics {
	color: inherit;
}

/* Add to calendar --------------------------------------------------- */

.event-calendar .event-addcal__summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 0.9rem;
	font-weight: 600;
	gap: 0.45rem;
	list-style: none;
	padding: 0.2rem 0;
}

.event-calendar .event-addcal__summary::-webkit-details-marker {
	display: none;
}

.event-calendar .event-addcal__summary:hover {
	color: var(--event-cal-accent);
}

.event-calendar .event-addcal__icon svg {
	display: block;
	fill: currentColor;
}

.event-calendar .event-addcal__list {
	display: grid;
	gap: 0.15rem;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.event-calendar .event-addcal__link {
	border-radius: var(--event-cal-radius-sm);
	color: inherit;
	display: block;
	font-size: 0.9rem;
	padding: 0.35em 0.5em;
	text-decoration: none;
}

.event-calendar .event-addcal__link:hover {
	background: var(--event-cal-canvas);
	color: var(--event-cal-accent);
}

/* Share -------------------------------------------------------------- */

.event-calendar .event-share__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.event-calendar .event-share__actions:empty {
	display: none;
}

.event-calendar .event-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.event-calendar .event-share__list li {
	margin: 0;
}

.event-calendar .event-share__link {
	color: var(--event-cal-muted);
	font-size: 0.85rem;
	text-decoration: none;
}

/* Icon buttons: a 40px target, which is the minimum that is comfortable to
   hit on a phone. */
.event-calendar .event-share__list .event-share__link--icon {
	align-items: center;
	background: var(--event-cal-canvas);
	border-radius: 50%;
	display: inline-flex;
	height: 2.5rem;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
	width: 2.5rem;
}

.event-calendar .event-share__list .event-share__link--icon:hover,
.event-calendar .event-share__list .event-share__link--icon:focus-visible {
	background: var(--event-cal-accent);
	color: var(--event-cal-accent-text);
}

.event-calendar .event-share__icon {
	display: block;
	flex: 0 0 auto;
}

.event-calendar .event-share__link:hover {
	color: var(--event-cal-accent);
	text-decoration: underline;
}

.event-calendar .event-share__status,
.event-calendar .event-interest__status {
	color: var(--event-cal-muted);
	font-size: 0.85rem;
	margin: 0.5rem 0 0;
}

.event-calendar .event-share__status:empty,
.event-calendar .event-interest__status:empty {
	display: none;
}

/* Interest ----------------------------------------------------------- */

.event-calendar .event-interest__button.is-active {
	background: color-mix(in srgb, var(--event-cal-accent) 12%, transparent);
	border-color: var(--event-cal-accent);
	color: var(--event-cal-accent);
}

@supports not (color: color-mix(in srgb, black 50%, white)) {
	.event-calendar .event-interest__button.is-active {
		background: var(--event-cal-canvas);
	}
}

.event-calendar .event-interest__icon svg {
	display: block;
	fill: currentColor;
}

.event-calendar .event-interest__button.is-active .event-interest__icon svg {
	fill: var(--event-cal-accent);
}

.event-calendar .event-interest__count {
	background: var(--event-cal-canvas);
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
	font-size: 0.8rem;
	min-width: 1.6em;
	padding: 0.05em 0.5em;
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * Utilities
 * ------------------------------------------------------------------ */

.event-calendar .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Custom registration fields ---------------------------------------- */

.event-calendar .event-registration__field--choices {
	border: 0;
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
}

.event-calendar .event-registration__field--choices legend {
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.2rem;
	padding: 0;
}

.event-calendar .event-registration__choice {
	align-items: flex-start;
	display: flex;
	font-size: 0.9rem;
	gap: 0.45rem;
	line-height: 1.4;
}

.event-calendar .event-registration__choice input {
	margin-top: 0.15rem;
}

.event-calendar .event-registration__help {
	color: var(--event-cal-muted);
	font-size: 0.8rem;
}

.event-calendar .event-registration__required {
	color: #b32d2e;
}

.event-calendar .event-registration__field select,
.event-calendar .event-registration__field textarea {
	background: var(--event-cal-surface);
	border: 1px solid var(--event-cal-border);
	border-radius: var(--event-cal-radius-sm);
	color: inherit;
	font: inherit;
	font-size: 0.95rem;
	padding: 0.55em 0.7em;
	width: 100%;
}

.event-calendar .event-details__terms {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.event-calendar .event-details__terms .event-details__term {
	background: var(--event-cal-canvas);
	border-radius: 999px;
	color: inherit;
	font-size: 0.85rem;
	line-height: 1.4;
	padding: 0.2em 0.7em;
	text-decoration: none;
}

.event-calendar .event-details__terms a.event-details__term:hover,
.event-calendar .event-details__terms a.event-details__term:focus {
	background: var(--event-cal-accent);
	color: var(--event-cal-accent-text);
}

/* ------------------------------------------------------------------ *
 * Attendee self-service
 * ------------------------------------------------------------------ */

.event-calendar .event-manage__notice {
	border-left: 4px solid var(--event-cal-accent);
	border-radius: var(--event-cal-radius-sm);
	background: var(--event-cal-canvas);
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
}

.event-calendar .event-manage__notice--error {
	border-left-color: #b32d2e;
}

.event-calendar .event-manage__who,
.event-calendar .event-manage__status {
	margin: 0 0 1rem;
}

.event-calendar .event-manage__cancel {
	border-top: 1px solid var(--event-cal-border);
	margin-top: 1.5rem;
	padding-top: 1.25rem;
}

.event-calendar .event-manage__cancel-text {
	color: var(--event-cal-muted);
	font-size: 0.9rem;
	margin: 0 0 0.75rem;
}

.event-calendar .event-manage .event-button--quiet {
	background: transparent;
	border: 1px solid var(--event-cal-border);
	color: var(--event-cal-muted);
}

.event-calendar .event-manage .event-button--quiet:hover,
.event-calendar .event-manage .event-button--quiet:focus {
	border-color: #b32d2e;
	color: #b32d2e;
}

/* ------------------------------------------------------------------ *
 * Other events
 * ------------------------------------------------------------------ */

.event-calendar .event-related__list {
	display: grid;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.event-calendar .event-related__item {
	margin: 0;
}

.event-calendar .event-related__link {
	align-items: center;
	border-radius: var(--event-cal-radius-sm);
	color: inherit;
	display: flex;
	gap: 0.6rem;
	margin-inline: -0.4rem;
	padding: 0.5rem 0.4rem;
	text-decoration: none;
	transition: background 0.15s ease;
}

.event-calendar .event-related__link:hover,
.event-calendar .event-related__link:focus-visible {
	background: var(--event-cal-canvas);
}

.event-calendar .event-related__thumb {
	border-radius: 6px;
	flex: 0 0 auto;
	height: 2.6rem;
	overflow: hidden;
	width: 2.6rem;
}

.event-calendar .event-related__thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.event-calendar .event-related__body {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}

.event-calendar .event-related__title {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.event-calendar .event-related__when {
	color: var(--event-cal-muted);
	font-size: 0.8rem;
	line-height: 1.35;
}

.event-calendar .event-related__note {
	color: var(--event-cal-muted);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Embedded third-party forms
 *
 * An event can embed a form from Contact Form 7, Fluent Forms, WPForms,
 * Gravity Forms, Forminator, Ninja Forms or Formidable. Each ships its own
 * stylesheet and its own class names, and left alone the result is a form that
 * looks nothing like the page around it.
 *
 * These rules target the elements rather than any plugin's classes, so a form
 * builder this plugin has never heard of is styled too. Scoped to the
 * registration panel, so nothing else on the site is touched.
 *
 * The selectors are deliberately deep. Form plugins style their own fields
 * with selectors like `.wpforms-container input[type=text]` (0,2,1) and
 * `.frm_forms .frm_form_field input` (0,3,1); three or four classes plus the
 * element beats those without resorting to !important, which would leave a
 * site owner no way to override anything.
 * ------------------------------------------------------------------ */

.event-calendar .event-registration--embedded .event-registration__embed input[type="text"],
.event-calendar .event-registration--embedded .event-registration__embed input[type="email"],
.event-calendar .event-registration--embedded .event-registration__embed input[type="tel"],
.event-calendar .event-registration--embedded .event-registration__embed input[type="url"],
.event-calendar .event-registration--embedded .event-registration__embed input[type="number"],
.event-calendar .event-registration--embedded .event-registration__embed input[type="date"],
.event-calendar .event-registration--embedded .event-registration__embed input[type="time"],
.event-calendar .event-registration--embedded .event-registration__embed input[type="search"],
.event-calendar .event-registration--embedded .event-registration__embed input[type="password"],
.event-calendar .event-registration--embedded .event-registration__embed select,
.event-calendar .event-registration--embedded .event-registration__embed textarea {
	background: var(--event-cal-surface);
	border: 1px solid var(--event-cal-border);
	border-radius: var(--event-cal-radius-sm);
	box-shadow: none;
	box-sizing: border-box;
	color: inherit;
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
	max-width: 100%;
	padding: 0.7em 0.85em;
	width: 100%;
}

.event-calendar .event-registration--embedded .event-registration__embed textarea {
	min-height: 6rem;
	resize: vertical;
}

.event-calendar .event-registration--embedded .event-registration__embed input:focus,
.event-calendar .event-registration--embedded .event-registration__embed select:focus,
.event-calendar .event-registration--embedded .event-registration__embed textarea:focus {
	border-color: var(--event-cal-accent);
	outline: 2px solid var(--event-cal-accent);
	outline-offset: 1px;
}

.event-calendar .event-registration--embedded .event-registration__embed label {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 0.35rem;
}

/* A label wrapping its own control — how most builders render radios and
   checkboxes — must not stack, or every option gets its own line break. */
.event-calendar .event-registration--embedded .event-registration__embed label input[type="checkbox"],
.event-calendar .event-registration--embedded .event-registration__embed label input[type="radio"] {
	margin-right: 0.4rem;
	width: auto;
}

.event-calendar .event-registration--embedded .event-registration__embed p {
	margin: 0 0 1rem;
}

.event-calendar .event-registration--embedded .event-registration__embed input[type="submit"],
.event-calendar .event-registration--embedded .event-registration__embed button[type="submit"],
.event-calendar .event-registration--embedded .event-registration__embed button:not([type]) {
	background: var(--event-cal-accent);
	border: 1px solid var(--event-cal-accent);
	border-radius: var(--event-cal-radius-sm);
	box-shadow: none;
	color: var(--event-cal-accent-text);
	cursor: pointer;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	padding: 0.75em 1.4em;
	text-transform: none;
	width: 100%;
}

.event-calendar .event-registration--embedded .event-registration__embed input[type="submit"]:hover,
.event-calendar .event-registration--embedded .event-registration__embed button[type="submit"]:hover {
	filter: brightness(1.08);
}

/* Whatever the plugin calls its spinner, keep it beside the button. */
.event-calendar .event-registration--embedded .event-registration__embed .wpcf7-spinner,
.event-calendar .event-registration--embedded .event-registration__embed .ff-el-is-error,
.event-calendar .event-registration--embedded .event-registration__embed .wpforms-error {
	display: inline-block;
	vertical-align: middle;
}

/* Validation and response messages, in the plugin's own notice styling. */
.event-calendar .event-registration--embedded .event-registration__embed .wpcf7-response-output,
.event-calendar .event-registration--embedded .event-registration__embed .ff-message-success,
.event-calendar .event-registration--embedded .event-registration__embed .wpforms-confirmation-container {
	border: 1px solid var(--event-cal-border);
	border-left: 4px solid var(--event-cal-accent);
	border-radius: var(--event-cal-radius-sm);
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
}

/* ------------------------------------------------------------------ *
 * Sidebar detail panel
 * ------------------------------------------------------------------ */

/* The date, given the prominence it deserves at the top of the column. */
.event-calendar .event-details__hero {
	align-items: center;
	border-bottom: 1px solid var(--event-cal-border);
	display: flex;
	gap: 0.9rem;
	margin-bottom: 1.1rem;
	padding-bottom: 1.1rem;
}

.event-calendar .event-details__badge {
	background: var(--event-cal-accent);
	border-radius: var(--event-cal-radius-sm);
	color: var(--event-cal-accent-text);
	display: grid;
	flex: 0 0 auto;
	justify-items: center;
	line-height: 1.05;
	margin: 0;
	padding: 0.5rem 0.55rem;
	min-width: 3.4rem;
}

.event-calendar .event-details__badge-month {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	opacity: 0.9;
	text-transform: uppercase;
}

.event-calendar .event-details__badge-day {
	font-size: 1.7rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.event-calendar .event-details__hero-text {
	min-width: 0;
}

.event-calendar .event-details__hero-when {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

/* The time sits under the date, in a lighter tone so the date leads. */
.event-calendar .event-details__hero-time {
	color: var(--event-cal-muted);
	font-size: 0.88rem;
	font-weight: 500;
	line-height: 1.35;
	margin: 0.2rem 0 0;
}

.event-calendar .event-details__timezone {
	color: var(--event-cal-muted);
	font-size: 0.78rem;
	opacity: 0.85;
}

/* Rows: an icon and a quiet label above the value it describes. */
.event-calendar .event-details__list {
	display: grid;
	gap: 0.9rem;
	margin: 0;
}

.event-calendar .event-details__row {
	display: grid;
	gap: 0.15rem;
}

.event-calendar .event-details__label {
	align-items: center;
	color: var(--event-cal-muted);
	display: flex;
	font-size: 0.68rem;
	font-weight: 700;
	gap: 0.35rem;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.event-calendar .event-details__icon {
	flex: 0 0 auto;
	opacity: 0.75;
}

.event-calendar .event-details__value {
	font-size: 0.95rem;
	line-height: 1.45;
	margin: 0;
}

/* How full the event is, at a glance. */
.event-calendar .event-details__meter {
	background: var(--event-cal-canvas);
	border-radius: 999px;
	display: block;
	height: 0.35rem;
	margin-top: 0.45rem;
	overflow: hidden;
	width: 100%;
}

.event-calendar .event-details__meter-fill {
	background: var(--event-cal-accent);
	border-radius: inherit;
	display: block;
	height: 100%;
	transition: width 0.3s ease;
}

.event-calendar .event-details__meter.is-full .event-details__meter-fill {
	background: #b32d2e;
}

@media (prefers-reduced-motion: reduce) {
	.event-calendar .event-details__meter-fill {
		transition: none;
	}
}

.event-calendar .event-single__caption {
	color: var(--event-cal-muted);
	font-size: 0.85rem;
	margin-top: 0.5rem;
}

/* ------------------------------------------------------------------ *
 * Featured events slideshow
 *
 * A track of the same cards used everywhere else, in portrait, several at a
 * time. Deliberately not its own card design: a second visual language is a
 * second thing to keep in step with this one.
 * ------------------------------------------------------------------ */

.event-calendar.event-slider {
	/* Settable per slideshow, so a site can put its own colour behind the
	   text rather than living with near-black. */
	--event-slider-overlay: #08061a;
	--event-slider-text: #ffffff;
	/*
	 * Portrait. The text sits over the image rather than beneath it, so the
	 * tile is exactly as tall as the picture — 3/4 costs nothing extra here,
	 * where beneath the image it produced a 789px card.
	 */
	--event-cal-image-ratio: 3 / 4;
	--event-slider-per-view: 3;
	--event-slider-gap: var(--event-cal-gap);
	position: relative;
}

.event-calendar .event-slider__head {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: var(--event-cal-gap);
}

/* No heading — the site puts its own above this — so the controls stay to the
   right rather than sliding across. */
.event-calendar .event-slider__head:not(:has(.event-slider__title)) {
	justify-content: flex-end;
}

.event-calendar .event-slider__title {
	font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
	letter-spacing: -0.02em;
	margin: 0;
}

.event-calendar .event-slider__viewport {
	display: grid;
	gap: var(--event-slider-gap);
	/*
	 * Each card takes an equal share of the track, minus the gaps between
	 * them. Driven by a custom property so one rule serves every setting and
	 * the responsive overrides below can still win.
	 */
	grid-auto-columns: calc(
		(100% - (var(--event-slider-per-view) - 1) * var(--event-slider-gap)) / var(--event-slider-per-view)
	);
	grid-auto-flow: column;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-bottom: 0.25rem;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.event-calendar .event-slider__viewport::-webkit-scrollbar {
	display: none;
}

.event-calendar .event-slider__slide {
	display: flex;
	min-width: 0;
	scroll-snap-align: start;
}

/* The tile is the image; the text sits over its lower part. */
.event-calendar .event-slider__tile {
	aspect-ratio: var(--event-cal-image-ratio);
	background: var(--event-cal-canvas);
	border-radius: var(--event-cal-radius);
	display: flex;
	flex-direction: column;
	isolation: isolate;
	justify-content: flex-end;
	margin: 0;
	overflow: hidden;
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
}

.event-calendar .event-slider__tile:hover,
.event-calendar .event-slider__tile:focus-within {
	box-shadow: var(--event-cal-shadow-hover);
	transform: translateY(-2px);
}

.event-calendar .event-slider__image {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
	z-index: -2;
}

/*
 * The scrim.
 *
 * The text band measures 28% of the tile height, so the gradient holds 0.88
 * opacity to 30% — past where the text ends. Over a pure white photograph
 * that composites to 5.07:1 against white text, which clears AA; the 0.55 it
 * used to hold there gave 2.05:1, and these photographs are bright enough for
 * that to matter.
 */
.event-calendar .event-slider__tile::after {
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--event-slider-overlay) 94%, transparent) 0%,
		color-mix(in srgb, var(--event-slider-overlay) 88%, transparent) 30%,
		color-mix(in srgb, var(--event-slider-overlay) 55%, transparent) 52%,
		color-mix(in srgb, var(--event-slider-overlay) 12%, transparent) 76%,
		color-mix(in srgb, var(--event-slider-overlay) 0%, transparent) 100%
	);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

@supports not (color: color-mix(in srgb, black 50%, white)) {
	.event-calendar .event-slider__tile::after {
		background: linear-gradient(
			to top,
			rgba(8, 6, 18, 0.94) 0%,
			rgba(8, 6, 18, 0.88) 30%,
			rgba(8, 6, 18, 0.55) 52%,
			rgba(8, 6, 18, 0.12) 76%,
			rgba(8, 6, 18, 0) 100%
		);
	}
}

/* No picture: a flat panel rather than a gradient over nothing. */
.event-calendar .event-slider__tile--plain::after {
	background: var(--event-slider-overlay);
	opacity: 0.94;
}

/*
 * Deliberately not positioned.
 *
 * The heading's stretched link resolves `inset: 0` against its nearest
 * positioned ancestor. With `position: relative` here, that was this text
 * block — so only the words were clickable, not the tile. The scrim sits at
 * z-index -1, so this content already paints above it without needing to be
 * positioned at all.
 */
.event-calendar .event-slider__body {
	color: var(--event-slider-text);
	padding: 1.1rem 1.15rem 1.2rem;
}

.event-calendar .event-slider__term {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	margin: 0 0 0.35rem;
	opacity: 0.85;
	text-transform: uppercase;
}

.event-calendar .event-slider__when {
	font-size: 0.82rem;
	font-weight: 700;
	margin: 0 0 0.2rem;
	opacity: 0.95;
}

.event-calendar .event-slider__heading {
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0;
}

.event-calendar .event-slider__heading,
.event-calendar .event-slider__heading a,
.event-calendar .event-slider__heading a:hover,
.event-calendar .event-slider__heading a:focus {
	color: var(--event-slider-text);
	text-decoration: none;
}

/* Stretched so the whole tile is the click target. */
.event-calendar .event-slider__heading a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.event-calendar .event-slider__where {
	font-size: 0.82rem;
	margin: 0.3rem 0 0;
	opacity: 0.88;
}

/* Status or price, top-left over the image. */
.event-calendar .event-slider__flag {
	background: rgba(255, 255, 255, 0.94);
	border-radius: 999px;
	color: #1c192d;
	font-size: 0.7rem;
	font-weight: 700;
	left: 0.8rem;
	letter-spacing: 0.04em;
	margin: 0;
	padding: 0.3em 0.75em;
	position: absolute;
	text-transform: uppercase;
	top: 0.8rem;
	z-index: 1;
}

.event-calendar .event-slider__flag--cancelled {
	background: #b32d2e;
	color: #fff;
}

.event-calendar .event-slider__flag--price {
	background: var(--event-cal-accent);
	color: var(--event-cal-accent-text);
}

.event-calendar .event-slider__controls {
	display: flex;
	flex: 0 0 auto;
	gap: 0.4rem;
}

.event-calendar.event-slider .event-slider__arrow {
	align-items: center;
	background: var(--event-cal-surface);
	border: 1px solid var(--event-cal-border);
	border-radius: 50%;
	box-shadow: var(--event-cal-shadow);
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	/* 44px: the smallest target that is comfortable on a touch screen. */
	height: 2.75rem;
	justify-content: center;
	padding: 0;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
	width: 2.75rem;
}

.event-calendar.event-slider .event-slider__arrow:hover:not(:disabled),
.event-calendar.event-slider .event-slider__arrow:focus-visible {
	background: var(--event-cal-accent);
	border-color: var(--event-cal-accent);
	color: var(--event-cal-accent-text);
}

.event-calendar.event-slider .event-slider__arrow:focus-visible {
	outline: 2px solid var(--event-cal-accent);
	outline-offset: 2px;
}

.event-calendar .event-slider__viewport:focus-visible {
	outline: 2px solid var(--event-cal-accent);
	outline-offset: 3px;
}

.event-calendar .event-slider__dots {
	display: flex;
	gap: 0.4rem;
	justify-content: center;
	margin-top: 1rem;
}

.event-calendar.event-slider .event-slider__dot {
	background: var(--event-cal-border);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	height: 0.45rem;
	padding: 0;
	transition: width 0.2s ease, background 0.2s ease;
	width: 0.45rem;
}

.event-calendar.event-slider .event-slider__dot[aria-current="true"] {
	background: var(--event-cal-accent);
	width: 1.5rem;
}

.event-calendar.event-slider .event-slider__dot:focus-visible {
	outline: 2px solid var(--event-cal-accent);
	outline-offset: 3px;
}

/* Never more cards than will read at the width available, whatever the
   setting says. */
@media (max-width: 60rem) {
	.event-calendar.event-slider {
		--event-slider-per-view: 2;
	}
}

@media (max-width: 38rem) {
	.event-calendar.event-slider {
		--event-slider-per-view: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.event-calendar .event-slider__viewport {
		scroll-behavior: auto;
	}

	.event-calendar.event-slider .event-slider__dot {
		transition: none;
	}
}

/* Compact month grid, for the archive sidebar ------------------------ */

.event-calendar .event-month--compact .event-month__title {
	font-size: 1rem;
}

.event-calendar .event-month--compact .event-month__day {
	height: auto;
	padding: 0.2rem;
	position: relative;
	text-align: center;
}

.event-calendar .event-month--compact .event-month__date {
	font-size: 0.78rem;
	margin-bottom: 0;
	text-align: center;
}

.event-calendar .event-month--compact .event-month__weekday {
	font-size: 0.6rem;
}

/* The whole cell is the target, so a 12px dot is not the hit area. */
.event-calendar .event-month--compact .event-month__mark {
	border-radius: inherit;
	display: block;
	inset: 0;
	position: absolute;
}

.event-calendar .event-month--compact .event-month__mark::after {
	background: var(--event-cal-accent);
	border-radius: 50%;
	bottom: 0.28rem;
	content: "";
	height: 0.3rem;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 0.3rem;
}

.event-calendar .event-month--compact .event-month__mark:hover::after,
.event-calendar .event-month--compact .event-month__mark:focus-visible::after {
	height: 0.45rem;
	width: 0.45rem;
}

.event-calendar .event-month--compact .event-month__day:has(.event-month__mark) {
	font-weight: 700;
}

/* Archive with a calendar beside it ---------------------------------- */

.event-calendar .event-archive__layout {
	display: grid;
	gap: var(--event-cal-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
	.event-calendar .event-archive__layout {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) 18rem;
	}

	.event-calendar .event-archive__side {
		position: sticky;
		top: 2rem;
	}
}

/* The same time, elsewhere ------------------------------------------- */

.event-calendar .event-details__zones {
	border-left: 2px solid var(--event-cal-border);
	display: grid;
	gap: 0.1rem;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0 0 0 0.6rem;
}

.event-calendar .event-details__zone {
	color: var(--event-cal-muted);
	font-size: 0.82rem;
	line-height: 1.4;
	margin: 0;
}

.event-calendar .event-details__zone-label {
	font-weight: 700;
	opacity: 0.8;
}

/* Tickets ------------------------------------------------------------ */

.event-calendar .event-tickets__price {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.75rem;
}

.event-calendar .event-tickets__actions {
	margin: 0 0 0.6rem;
}

.event-calendar .event-panel .event-tickets__actions .event-button--primary {
	display: block;
	text-align: center;
	width: 100%;
}

.event-calendar .event-tickets__host,
.event-calendar .event-tickets__closed {
	color: var(--event-cal-muted);
	font-size: 0.85rem;
	margin: 0;
}

/* Pay after registering ----------------------------------------------- */

/*
 * Sits below the registration form on events that take a payment
 * separately. Before registering it explains a charge is coming; after,
 * `.is-due` promotes it to the next action.
 */
.event-calendar .event-registration__payment {
	border: 1px solid var(--event-cal-border);
	border-radius: var(--event-cal-radius);
	margin: 1rem 0 0;
	padding: 0.9rem 1rem;
}

.event-calendar .event-registration__payment.is-due {
	background: var(--event-cal-surface);
	border-color: var(--event-cal-accent);
	border-left: 3px solid var(--event-cal-accent);
}

.event-calendar .event-registration__payment-note {
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0 0 0.7rem;
}

.event-calendar .event-registration__payment-action {
	margin: 0 0 0.6rem;
}

/*
 * Outlined until they have a place. Two filled buttons stacked reads as two
 * competing primary actions, and the order matters here: register, then pay.
 */
.event-calendar .event-panel .event-registration__payment-action .event-button--pay {
	background: transparent;
	border: 1px solid var(--event-cal-accent);
	border-radius: var(--event-cal-radius);
	color: var(--event-cal-accent);
	display: block;
	font-weight: 600;
	padding: 0.65rem 1rem;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

/* Once the place is held, paying is the action, so it takes the weight. */
.event-calendar .event-registration__payment.is-due .event-button--pay,
.event-calendar .event-panel .event-registration__payment.is-due .event-button--pay {
	background: var(--event-cal-accent);
	color: var(--event-cal-accent-text);
}

.event-calendar .event-panel .event-registration__payment-action .event-button--pay:hover,
.event-calendar .event-panel .event-registration__payment-action .event-button--pay:focus-visible {
	filter: brightness(0.93);
	text-decoration: none;
}

.event-calendar .event-registration__payment-host {
	color: var(--event-cal-muted);
	font-size: 0.85rem;
	margin: 0;
}