/*
 * Events Calendar block. FullCalendar ships its own structural CSS (injected by
 * the bundle); here we only re-skin it to the theme.json tokens and style the
 * upcoming-events list. All colors reference the --color-* tokens in base.css — no hardcoded hex.
 */

.cap-events .fc {
	--fc-border-color: var(--color-border);
	--fc-page-bg-color: var(--color-surface);
	--fc-neutral-bg-color: var(--color-bg);
	--fc-today-bg-color: color-mix(in srgb, var(--color-link) 8%, var(--color-surface));
	--fc-event-bg-color: color-mix(in srgb, var(--color-link) 8%, var(--color-surface));
	--fc-event-border-color: var(--color-link);
	--fc-event-text-color: var(--color-link);
	--fc-button-bg-color: var(--color-surface);
	--fc-button-border-color: var(--color-border);
	--fc-button-text-color: var(--color-link);
	--fc-button-hover-bg-color: var(--color-bg);
	--fc-button-hover-border-color: var(--color-border);
	--fc-button-active-bg-color: var(--color-link);
	--fc-button-active-border-color: var(--color-link);
	--fc-list-event-hover-bg-color: var(--color-bg);
}

.cap-events__heading {
	margin-bottom: var(--space-3);
}

/* FullCalendar chrome → theme type + tokens */
.cap-events .fc {
	font-family: var(--font-body);
}
.cap-events .fc .fc-toolbar-title {
	font-family: var(--font-body);
	font-size: var(--fs-lg);
	letter-spacing: 0.01em;
}
.cap-events .fc .fc-button {
	font-family: var(--font-body);
	font-weight: 600;
	text-transform: none;
	box-shadow: none;
}
.cap-events .fc a {
	text-decoration: none;
	color: inherit;
}

/* Toolbar: outline buttons in link blue; the current view is filled. */
.cap-events .fc .fc-button-primary {
	background: var(--color-surface);
	border-color: var(--color-border);
	color: var(--color-link);
}
.cap-events .fc .fc-button-primary:hover {
	background: var(--color-bg);
	border-color: var(--color-border);
	color: var(--color-link);
}
.cap-events .fc .fc-button-primary:not(:disabled).fc-button-active,
.cap-events .fc .fc-button-primary:not(:disabled):active {
	background: var(--color-link);
	border-color: var(--color-link);
	color: var(--color-surface);
}
.cap-events .fc .fc-button-primary:disabled {
	background: var(--color-surface);
	border-color: var(--color-border);
	color: var(--color-muted);
	opacity: 0.6;
}
.cap-events .fc .fc-button-primary:focus-visible {
	outline: 3px solid var(--color-link);
	outline-offset: 2px;
	box-shadow: none;
}

/* Month title in the section-label brown, like the live site's date heading. */
.cap-events .fc .fc-toolbar-title {
	color: var(--color-accent);
	font-weight: 400;
}

/* Weekday headings: small and quiet. */
.cap-events .fc .fc-col-header-cell-cushion {
	color: var(--color-muted);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: var(--space-2) var(--space-1);
}

/* Day numbers in grey; today and its number get the link blue. */
.cap-events .fc .fc-daygrid-day-number {
	color: var(--color-muted);
	font-weight: 500;
}
.cap-events .fc .fc-day-other .fc-daygrid-day-number {
	opacity: 0.45;
}
.cap-events .fc .fc-day-today .fc-daygrid-day-number {
	color: var(--color-link);
	font-weight: 700;
}
/* Month cells: let events wrap and stack instead of clipping to one line. */
.cap-events .fc-daygrid-event {
	margin: 2px 4px;
	padding: 2px 5px;
	border-width: 0 0 0 3px;
	border-radius: 2px;
	white-space: normal;
}
.cap-events .fc-daygrid-event:hover {
	background: color-mix(in srgb, var(--color-link) 16%, var(--color-surface));
}
.cap-events .fc-daygrid-event .fc-event-main {
	white-space: normal;
}
.cap-fc-chip {
	display: block;
	line-height: 1.2;
	overflow: hidden;
}
.cap-fc-chip__time {
	display: block;
	font-weight: 700;
	font-size: 0.66rem;
	color: var(--color-muted);
}
.cap-fc-chip__title {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-link);
	overflow-wrap: anywhere;
}

/* "View details" CTA in the calendar's List view (revealed on row hover). */
.cap-events .fc-list-event .cap-fc-cta {
	display: inline-block;
	margin-left: 0.75rem;
	color: var(--color-link);
	font-size: var(--fs-sm);
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.cap-events .fc-list-event:hover .cap-fc-cta,
.cap-events .fc-list-event:focus-within .cap-fc-cta {
	opacity: 1;
}

.cap-events__editor-note,
.cap-events__error {
	color: var(--color-muted);
	font-size: var(--fs-sm);
	font-style: italic;
}

/* Upcoming list */
.cap-events__list {
	margin-top: var(--space-4);
}
.cap-events__list-title {
	/* Small header: bold MaxiSharp. */
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-xl);
	margin-bottom: var(--space-2);
}
.cap-events__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cap-events__item--more {
	display: none; /* revealed in batches by the Load more button */
}
.cap-events__item + .cap-events__item {
	border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
/* Date + time each get their own row in a fixed-width left column; the title
   column starts at the same x across every item, so titles align. */
.cap-events__item-link {
	display: grid;
	grid-template-columns: 8.5rem 1fr auto;
	grid-template-areas:
		"date  title   cost"
		"time  venue   details";
	column-gap: var(--space-3);
	row-gap: 0.1rem;
	align-items: baseline;
	padding: var(--space-3) 0;
	text-decoration: none;
	color: var(--color-text);
}
.cap-events__item-date {
	grid-area: date;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.cap-events__item-time {
	grid-area: time;
	font-variant-numeric: tabular-nums;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}
.cap-events__item-title {
	grid-area: title;
	font-family: var(--font-body);
	font-weight: 700;
}
.cap-events__item-venue {
	grid-area: venue;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}
.cap-events__item-cost {
	grid-area: cost;
	text-align: right;
	color: var(--color-border);
	font-weight: 600;
	white-space: nowrap;
}
.cap-events__item-details {
	grid-area: details;
	justify-self: end;
	color: var(--color-link);
	font-size: var(--fs-sm);
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.cap-events__item-link:hover .cap-events__item-title {
	color: var(--color-link);
}
.cap-events__item-link:hover .cap-events__item-details,
.cap-events__item-link:focus-visible .cap-events__item-details {
	opacity: 1;
}

.cap-events__load-more {
	margin-top: var(--space-3);
	background: transparent;
	color: var(--color-link);
	border: 1px solid currentColor;
	border-radius: 4px;
	padding: 0.6em 1.4em;
	font-family: var(--font-body);
	font-weight: 600;
	cursor: pointer;
}
.cap-events__load-more:hover {
	background: var(--color-link);
	color: var(--color-surface);
}

@media (max-width: 600px) {
	.cap-events__item-link {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"date  cost"
			"time  cost"
			"title title"
			"venue venue"
			"details details";
		row-gap: 0.15rem;
	}
	/* No hover on touch — always show the details affordance. */
	.cap-events__item-details {
		opacity: 1;
		justify-self: start;
	}
}

/* Mobile calendar chrome (matches the 640px toolbar split in view.js): keep the
   toolbars readable and give the month grid room so it isn't crushed. */
@media (max-width: 640px) {
	.cap-events .fc .fc-toolbar-title {
		font-size: var(--fs-md);
	}
	.cap-events .fc .fc-header-toolbar.fc-toolbar {
		margin-bottom: var(--space-2);
		gap: 0.5rem;
	}
	/* The view switcher (Today / Month / Week / List) rides at the top right, level with the
	   section's heading; the month and its arrows sit beneath. With no heading it has the row to itself. */
	.cap-events {
		position: relative;
	}
	.cap-events .fc .fc-footer-toolbar.fc-toolbar {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		flex-wrap: nowrap;
		gap: 0.4rem 0.5rem;
	}
	.cap-events__heading {
		display: flex;
		align-items: center;
		min-height: 2.5rem;
		margin-top: 0;
	}
	.cap-events:not(:has(.cap-events__heading)) .cap-events__calendar {
		padding-top: 2.75rem;
	}
	.cap-events .fc .fc-button {
		padding: 0.35em 0.6em;
		font-size: var(--fs-sm);
	}
	.cap-events .fc .fc-daygrid-day-number {
		padding: 2px 4px;
		font-size: 0.72rem;
	}
	.cap-events .fc .fc-col-header-cell-cushion {
		padding: 4px 2px;
		font-size: 0.7rem;
	}

	/* Compact month grid: each day shows dots for its events (read the details
	   in the List / Upcoming view), so cells stay short instead of tall chips. */
	.cap-events .fc .fc-daygrid-day-frame {
		min-height: 2.3rem;
	}
	.cap-events .fc .fc-daygrid-day-events {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: flex-start;
		gap: 3px;
		margin: 1px 0 3px;
		min-height: 0;
	}
	.cap-events .fc .fc-daygrid-event-harness {
		position: static !important;
		width: auto;
		margin: 0 !important;
	}
	.cap-events .fc .fc-daygrid-event {
		background: none !important;
		border: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.cap-events .fc .fc-daygrid-day-bottom {
		display: none; /* no "+N more" — the list view has them all */
	}
	.cap-fc-dot {
		display: block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--color-link);
	}
}


/* Single event: when / where / cost, then the booking button. */
.cap-event-meta {
	margin-block: var(--space-3);
	padding: var(--space-3);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.cap-event-meta__grid {
	margin: 0;
	display: grid;
	gap: var(--space-2);
}

.cap-event-meta__row {
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: 1rem;
	align-items: baseline;
}

.cap-event-meta__row dt {
	font-weight: 500;
	font-size: var(--fs-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.cap-event-meta__row dd {
	margin: 0;
}

.cap-event-meta__address {
	display: block;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.cap-event-meta__actions {
	margin: var(--space-3) 0 0;
}

/* A closed button (sold out, or the date has passed) keeps its shape but reads as inert. */
.cap-event-meta__button.is-disabled {
	background: transparent;
	color: var(--color-muted);
	box-shadow: inset 0 0 0 1px var(--color-border);
	cursor: not-allowed;
}

@media (max-width: 480px) {
	.cap-event-meta__row {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}