/* Controls row: filter pills left, List/Calendar toggle right. Only ever rendered on
   the light-background What's On page (showFilters is off everywhere else), so these
   assume a light context - dark text, subtle border, gold active state. */
.whats-on-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.whats-on-filters {
	display: flex;
	gap: 0.5rem;
}
.whats-on-filters__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 1.1rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--charcoal);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.whats-on-filters__pill:hover {
	border-color: var(--wp--preset--color--primary);
}
.whats-on-filters__pill.is-active {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

.whats-on-month-filter {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.whats-on-month-filter__label {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--wp--preset--color--charcoal);
}
.whats-on-month-filter__select {
	padding: 0.45rem 2rem 0.45rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--charcoal);
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
}
.whats-on-month-filter__select:hover {
	border-color: var(--wp--preset--color--primary);
}

.whats-on-view-toggle {
	display: inline-flex;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	overflow: hidden;
}
.whats-on-view-toggle__option {
	padding: 0.45rem 1.1rem;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--wp--preset--color--charcoal);
}
.whats-on-view-toggle__option.is-active {
	background-color: var(--wp--preset--color--charcoal);
	color: #fff;
}

/* Grid - a touch tighter than before */
.whats-on-calendar__grid {
	display: grid;
	grid-template-columns: repeat(var(--whats-on-columns, 4), 1fr);
	gap: 1.25rem;
}
@media (max-width: 782px) {
	.whats-on-calendar__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.whats-on-calendar__grid {
		grid-template-columns: 1fr;
	}
}

/* Card (a <button>, so reset native button chrome) - full-bleed image with text
   overlaid on a gradient at the bottom, not a separate solid panel. */
.whats-on-card {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	border: none;
	border-radius: 0.5rem;
	overflow: hidden;
	background-color: var(--wp--preset--color--charcoal);
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
}
/* display:block must yield to [hidden] (client-side type/month filtering in view.js) - 
   same fix as the Route Grid card and the Photo Carousel lightbox. */
.whats-on-card:not([hidden]) {
	display: block;
}
.whats-on-card__image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--wp--preset--color--charcoal);
}
/* Category badge stays over the image, top-right. The date used to sit top-left on
   the image too, but on narrower cards (e.g. next to the wider feature-first card)
   the two badges could overlap - the date now sits in the body, right above the
   title, instead. */
.whats-on-card__type-badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.3rem 0.65rem;
	border-radius: 0.25rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--charcoal);
}
.whats-on-card__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.7) 55%, transparent 100%);
	display: block;
}
.whats-on-card__date-badge {
	display: block;
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--primary);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.whats-on-card__title {
	display: block;
	margin: 0 0 0.25rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: #fff;
}
.whats-on-card__time {
	display: block;
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--primary);
	font-size: 0.8rem;
	font-weight: 600;
}
.whats-on-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8rem;
	line-height: 1.4;
}

.whats-on-calendar__empty {
	text-align: left;
}

/* Phone, single-column: the default 3:4 portrait card is ~400px tall each. The homepage teaser
   and the Food & Drink "What's Being Served" row use it - a wider 3:2 shape keeps the list short.
   (The compact What's On page card and the profile-page card keep their own ratios.) */
@media (max-width: 480px) {
	.whats-on-calendar:not(.whats-on-calendar--compact):not(.whats-on-calendar--profile) .whats-on-card {
		aspect-ratio: 3 / 2;
	}
}

/* Compact cards - the main What's On page only (homepage teaser and vendor/category
   pages keep the taller card with the excerpt). */
.whats-on-calendar--compact .whats-on-card {
	aspect-ratio: 4 / 3;
}
/* Profile pages (single Recurring Event / Food Vendor "Upcoming Dates") - slightly
   shorter than the default 3:4 portrait card, though not as short as --compact. */
.whats-on-calendar--profile .whats-on-card {
	aspect-ratio: 1 / 1;
}
/* The shorter 4:3 aspect ratio leaves less room for the bottom gradient in
   .whats-on-card__body to darken before it reaches the title/time text, so title text
   sitting higher up the card can land on a bright, low-contrast part of the photo. A
   flat darkening layer across the whole image (not just the gradient at the bottom)
   fixes that regardless of how bright the underlying photo is. Every context that uses
   this card ends up wanting it, so it's no longer conditional on a variant class. */
.whats-on-card__image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

/* Feature-first - homepage teaser only: the next (soonest) event card runs wider
   than the rest, showing it's the one coming up. Falls back to the normal grid
   below desktop rather than fighting the existing 2-col/1-col responsive rules. */
@media (min-width: 783px) {
	.whats-on-calendar--feature-first .whats-on-calendar__grid {
		display: flex;
		align-items: stretch;
	}
	.whats-on-calendar--feature-first .whats-on-calendar__grid .whats-on-card {
		flex: 1 1 0;
		min-width: 0;
	}
	.whats-on-calendar--feature-first .whats-on-calendar__grid .whats-on-card:first-child {
		flex: 2 1 0;
		/* Cards keep aspect-ratio: 3/4 (portrait) - at 2x the width that would also
		   render 2x the height. Widen the ratio to match, so it stays roughly the
		   same height as its 3 narrower siblings instead of towering over them. */
		aspect-ratio: 3 / 2;
	}
}

/* Calendar month view */
.whats-on-calendar-month__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.whats-on-calendar-month__nav-link {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
}
.whats-on-calendar-month__nav-link:hover {
	color: var(--wp--preset--color--primary);
}
.whats-on-calendar-month__label {
	font-weight: 700;
	font-size: 1.125rem;
}

.whats-on-calendar-month__legend {
	display: flex;
	gap: 1.25rem;
	margin-bottom: 1rem;
}
.whats-on-calendar-month__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted-foreground);
}
.whats-on-calendar-month__legend-dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 999px;
}
.whats-on-calendar-month__legend-dot.is-event {
	background-color: var(--wp--preset--color--primary);
}
.whats-on-calendar-month__legend-dot.is-food {
	background-color: var(--wp--preset--color--forest);
}

.whats-on-calendar-month__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.5rem;
	overflow: hidden;
}
.whats-on-calendar-month__weekday {
	padding: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--muted-foreground);
	border-bottom: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--secondary);
}
.whats-on-calendar-month__cell {
	min-height: 6rem;
	padding: 0.4rem;
	border-right: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.whats-on-calendar-month__grid > *:nth-child(7n) {
	border-right: none;
}
.whats-on-calendar-month__cell.is-empty {
	background-color: var(--wp--preset--color--secondary);
}
.whats-on-calendar-month__day-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--charcoal);
}
.whats-on-calendar-month__day-num.is-today {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primary);
	color: #fff;
}
.whats-on-calendar-month__pills {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 0.35rem;
}
.whats-on-calendar-pill {
	display: block;
	width: 100%;
	border: none;
	border-radius: 0.25rem;
	padding: 0.15rem 0.4rem;
	font-size: 0.7rem;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
.whats-on-calendar-pill.is-event {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 18%, #fff);
	color: var(--wp--preset--color--gold-dark);
}
.whats-on-calendar-pill.is-food {
	background-color: color-mix(in srgb, var(--wp--preset--color--forest) 18%, #fff);
	color: var(--wp--preset--color--forest);
}
@media (max-width: 600px) {
	.whats-on-calendar-month__cell {
		min-height: 3.5rem;
	}
	.whats-on-calendar-pill {
		font-size: 0;
		padding: 0.3rem;
		border-radius: 999px;
		width: 0.5rem;
		height: 0.5rem;
	}
}

/* Modal */
.whats-on-modal {
	border: none;
	border-radius: 0.75rem;
	padding: 0;
	width: min(560px, 92vw);
	max-height: 85vh;
	overflow: hidden auto;
	color: var(--wp--preset--color--charcoal);
}
.whats-on-modal::backdrop {
	background: rgba(39, 43, 42, 0.7);
}
.whats-on-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1;
	width: 2.25rem;
	height: 2.25rem;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--wp--preset--color--charcoal);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.whats-on-modal__image {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: var(--wp--preset--color--secondary);
}
.whats-on-modal__body {
	padding: 1.5rem;
}
/* Doubled classes here beat style.css's ":root :where(p){color:...;line-height:1.6}" and
   ":root :where(h1,h2,...){margin-block-end:1rem}" - both are :root + :where(), which
   carries one real specificity point via :root even though :where() itself is zeroed,
   so a lone single-class selector ties with them and can lose on load order. */
.whats-on-modal__category.whats-on-modal__category {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1;
	margin: 0;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--charcoal);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.3rem 0.65rem;
	border-radius: 0.25rem;
}
.whats-on-modal__category:empty {
	display: none;
}
.whats-on-modal__title.whats-on-modal__title {
	margin-block: 0 0;
	font-size: 1.5rem;
	font-weight: 700;
}
.whats-on-modal__meta.whats-on-modal__meta {
	margin-block: 0 0.5rem;
	color: var(--wp--preset--color--muted-foreground);
	font-size: 0.9rem;
	font-weight: 600;
}
.whats-on-modal__description.whats-on-modal__description {
	margin: 0 0 1rem;
	/* Explicit colour: the modal sits inside the homepage's forest-green section, whose
	   ".has-forest-background-color p" rule would otherwise turn this text white-on-white. */
	color: var(--wp--preset--color--muted-foreground);
	font-size: 0.75rem; /* 12px */
	line-height: 1.6;
}
.whats-on-modal__series-link {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.5rem;
	border-radius: 0.5rem;
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	transition: background-color 150ms ease;
}
.whats-on-modal__series-link:hover {
	background-color: var(--wp--preset--color--gold-dark);
}