/* Masthead consistency correction (2026-08-06): normalized onto the same
   canonical shell token as every other Standard-tier page (was max-width
   1180px with 16px horizontal padding baked in -- a slightly narrower
   effective content width than the width:min()+margin-gutter formula used
   elsewhere, and a distinct mechanism worth converging on one rule). */
/* Standard-masthead spacing correction (2026-08-07): the top half of this
   padding used to duplicate the header-to-masthead gap with a third,
   different formula (24-64px here) -- that gap now lives on the masthead
   itself (page-surfaces.css), so this wrapper only keeps its own page-end
   bottom padding. */
.hp-events { width: min(100% - var(--hp-shell-gutter) * 2, var(--hp-shell-max-width)); margin-inline: auto; padding-block: 0 88px; color: var(--hp-color-ink,#17131f); }
.hp-event-card__date { color: var(--hp-color-primary,#7c3aed); font-weight: 800; }
/* Owner direction (2026-08-13): What's On rebuilt as a browse-first
   chronological feed. The always-expanded Date/Town/Category/Search/Apply
   slab is gone -- replaced by .hp-events-toolbar (an Upcoming/Past pill
   pair, always visible, plus a native <details> disclosure for Town/
   Category, collapsed by default, no JS needed). Deliberately not built on
   the shared .hp-compact-filters component -- that component keeps its own
   panel open above 699px by design for its other (larger-inventory)
   consumers; this is self-contained so that decision stays untouched. */
.hp-events-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 28px; }
.hp-events-toolbar__tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--hp-color-primary-100,#f2ebff); }
.hp-events-toolbar__tab { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; color: var(--hp-color-primary-700,#6d28d9); font-weight: 700; text-decoration: none; }
.hp-events-toolbar__tab:hover { background: rgba(255,255,255,.6); }
.hp-events-toolbar__tab.is-active { background: var(--hp-color-primary-500,#7c3aed); color: #fff; box-shadow: 0 6px 16px rgba(124,58,237,.28); }
.hp-events-toolbar__more { position: relative; }
.hp-events-toolbar__more-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--hp-color-primary-200,#c4b5fd); border-radius: 999px; background: #fff; color: var(--hp-color-primary-700,#6d28d9); font-weight: 700; cursor: pointer; list-style: none; }
.hp-events-toolbar__more-toggle::-webkit-details-marker { display: none; }
.hp-events-toolbar__more[open] .hp-events-toolbar__more-toggle { background: var(--hp-color-primary-500,#7c3aed); border-color: var(--hp-color-primary-500,#7c3aed); color: #fff; }
.hp-events-toolbar__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--hp-color-primary-500,#7c3aed); color: #fff; font-size: .75rem; }
.hp-events-toolbar__more[open] .hp-events-toolbar__count { background: rgba(255,255,255,.3); }
.hp-events-toolbar__panel { position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; display: grid; gap: 14px; min-width: 280px; padding: 18px; border: 1px solid #e6e1eb; border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(27,20,35,.16); }
.hp-events-toolbar__panel label { display: grid; gap: 6px; font-weight: 700; }
.hp-events-toolbar__panel select { min-height: 44px; padding: 8px; border: 1px solid #6d6675; border-radius: 10px; background: #fff; }
.hp-events-toolbar__actions { display: flex; align-items: center; gap: 14px; }
.hp-events-toolbar__clear { display: inline-flex; min-height: 44px; align-items: center; }
.hp-events__grid { display: grid; gap: 22px; }
.hp-event-card { overflow: hidden; border: 1px solid #e6e1eb; border-radius: 20px; background: #fff; box-shadow: 0 8px 28px rgba(27,20,35,.08); transition: box-shadow .25s ease, transform .25s ease; }
.hp-event-card:hover { box-shadow: 0 22px 48px rgba(45,24,73,.16); transform: translateY(-3px); }
.hp-event-card > div { padding: 22px; }
.hp-event-card > .hp-event-card__media { position: relative; padding: 0; }
.hp-event-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
/* Wave 2 (2026-08-17, owner accessibility refinement): the thumbnail is now
   wrapped in its own hidden duplicate link to the event's canonical page
   (tabindex="-1" aria-hidden="true" -- keyboard/AT users still get exactly
   one real link, the title, matching local-feed.css's own .hp-update-card__image
   pattern) so the image itself is genuinely clickable/tappable for mouse and
   touch users. display:block only; sizing stays on the img rule above. */
.hp-event-card__image { display: block; }
.hp-event-card__image--fallback { display: grid; place-items: center; aspect-ratio: 16/9; background: linear-gradient(135deg,var(--hp-color-primary-100,#f2ebff) 0%,#fff 100%); }
.hp-event-card__image--fallback img { width: 3.5rem; height: auto; }
/* Wave 3 (2026-08-08, discovery-page consolidation): a calendar-style date
   block overlaid on the media, matching the homepage's own What's On card
   treatment -- the full date/time string stays in the text body below, this
   is just the "glanceable day/month" summary. */
.hp-event-card__datebadge { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: 6px 10px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(27,20,35,.14); }
.hp-event-card__datebadge-day { color: var(--hp-color-primary-700,#6d28d9); font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.hp-event-card__datebadge-month { color: var(--hp-color-primary-500,#7c3aed); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hp-event-card__datebadge--range { min-width: 72px; }
.hp-event-card__datebadge--cross-month { min-width: 88px; }
.hp-event-card__datebadge--range .hp-event-card__datebadge-day { font-size: 1rem; white-space: nowrap; }
.hp-event-card h2 { margin: 0 0 6px; font-size: 1.4rem; line-height: 1.2; }
/* Fix: What's On previously had no explicit link colour (page-whats-on.php
   isn't wrapped in .site-main, so the sitewide purple-link rule in
   components.css never reached it), so titles fell through to the parent
   theme's own unstyled default -- red. Same shared token every other
   surface uses, applied directly here rather than restructuring the page
   shell. */
.hp-event-card h2 a, .hp-event-single a { color: var(--hp-color-link,#6d28d9); display: inline-flex; min-height: 44px; align-items: center; }
.hp-event-card h2 a:hover, .hp-event-single a:hover { color: var(--hp-color-link-hover,#2e1065); }
.hp-event-card__status { display: inline-block; padding: 5px 10px; border: 2px solid #8b1e2d; border-radius: 999px; font-weight: 800; }
.hp-event-card__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 8px; color: var(--hp-color-body,#555); font-size: 0.88rem; }
.hp-event-card__cta { margin-top: 14px; min-height: 44px; }

/* Design-system consolidation (2026-08-06): the zero-results panel used to
   end in a plain wrapped row of buttons -- now a small onward-journey tile
   grid (2x2 desktop, 1-col mobile), same card-token language used by the
   Free Tools grid, so an empty page still reads as intentionally designed. */
.hp-events__empty { margin-top: 20px; padding: clamp(24px,5vw,40px); border: 1px solid #ded7ea; border-radius: 20px; background: linear-gradient(135deg,#fff 0%,#f7f2ff 100%); box-shadow: 0 10px 34px rgba(45,24,73,.08); }
.hp-events__empty h2 { margin: .15em 0; font-size: clamp(1.6rem,5vw,2.5rem); }
.hp-events__empty-eyebrow { margin: 0; color: var(--hp-color-primary,#7c3aed); font-size: .8rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hp-events__empty-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
.hp-events__empty-tile {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	border: var(--hp-card-border, 1px solid #ded7ea);
	border-radius: var(--hp-radius-md, 14px);
	background: var(--hp-color-white, #fff);
	color: inherit;
	text-decoration: none;
	transition: box-shadow var(--hp-transition-card, .25s ease), border-color var(--hp-transition-card, .25s ease);
}
.hp-events__empty-tile:hover, .hp-events__empty-tile:focus-visible {
	box-shadow: var(--hp-card-shadow-hover, 0 18px 40px rgba(0,0,0,.08));
	border-color: var(--hp-color-primary-200, #c4b5fd);
}
.hp-events__empty-tile:focus-visible { outline: 3px solid var(--hp-color-primary-400, #8b5cf6); outline-offset: 2px; }
.hp-events__empty-tile-icon { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--hp-radius-md, 14px); background: var(--hp-color-primary-100, #f2ebff); color: var(--hp-color-primary-700, #6d28d9); }
.hp-events__empty-tile-icon svg { width: 20px; height: 20px; }
.hp-events__empty-tile-body { display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; }
.hp-events__empty-tile-body strong { color: var(--hp-color-ink,#17131f); font-size: 0.95rem; }
.hp-events__empty-tile-body span { color: var(--hp-color-body,#555); }
@media(prefers-reduced-motion:reduce) { .hp-events__empty-tile { transition: none; } }

.hp-event-single { max-width: 850px; margin: auto; padding: 32px 16px 100px; }
.hp-event-single__meta { padding: 18px; border-radius: 14px; background: #f4efff; }
.hp-event-single a { display: inline-flex; min-height: 44px; align-items: center; }
@media(max-width:699px) { .hp-events__empty-tiles { grid-template-columns: 1fr; } }
@media(min-width:700px) { .hp-events__grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1100px) { .hp-events__grid { grid-template-columns: repeat(3,1fr); } }
@media(prefers-reduced-motion:reduce) { .hp-event-card,.hp-events a { transition: none!important; } }

/* =========================================================
   DARK MODE  (L01.1, 2026-09-12)
   This stylesheet had no dark rules at all -- it predates the dark theme --
   and paints most of What's On with literal #fff, so in dark mode the tab
   strip, the filter panel, every event card and the date badge stayed light
   while their text was recoloured: the event title measured 2.15:1, its town
   1.92:1, the venue 1.21:1 and the card action 1.85:1. Each rule below sets
   a surface and its foreground together.
   ========================================================= */

.hp-experience-dark .hp-events-toolbar__tabs {
	background: #2a1f37;
}

.hp-experience-dark .hp-events-toolbar__tab {
	color: #d6b4ff;
}

.hp-experience-dark .hp-events-toolbar__tab:hover {
	background: rgba( 255, 255, 255, .08 );
}

.hp-experience-dark .hp-events-toolbar__more-toggle {
	background: var( --hp-color-surface, #21162c );
	border-color: var( --hp-color-border-strong, #604571 );
	color: #d6b4ff;
}

.hp-experience-dark .hp-events-toolbar__panel {
	background: var( --hp-color-surface, #21162c );
	border-color: var( --hp-color-border, #44334f );
	box-shadow: 0 18px 44px rgba( 0, 0, 0, .5 );
}

.hp-experience-dark .hp-events-toolbar__panel label,
.hp-experience-dark .hp-events-toolbar__clear {
	color: var( --hp-color-ink, #eee6f7 );
}

.hp-experience-dark .hp-events-toolbar__panel select {
	background: var( --hp-color-surface-muted, #191120 );
	border-color: var( --hp-color-border-strong, #604571 );
	color: var( --hp-color-ink, #eee6f7 );
}

.hp-experience-dark .hp-event-card {
	background: var( --hp-color-surface, #21162c );
	border-color: var( --hp-color-border, #44334f );
	box-shadow: none;
	color: var( --hp-color-ink, #eee6f7 );
}

/* The date badge keeps its own light plate and its own dark ink, so it is
   excluded here -- otherwise this muted colour wins on source order and puts
   pale text back on that plate (measured 1.71:1 on the cross-month variant). */
.hp-experience-dark .hp-event-card p,
.hp-experience-dark .hp-event-card span:not([class*="datebadge"]) {
	color: var( --hp-color-text-muted, #c3b6d0 );
}

.hp-experience-dark .hp-event-card h2 a,
.hp-experience-dark .hp-event-single a {
	color: var( --hp-color-link, #cc9cff );
}

.hp-experience-dark .hp-event-card h2 a:hover,
.hp-experience-dark .hp-event-single a:hover {
	color: var( --hp-color-link-hover, #eedbff );
}

.hp-experience-dark .hp-event-card__date {
	color: #d6b4ff;
}

/* The date badge stays a light plate deliberately -- it reads as a torn
   calendar page against the artwork -- so only its own text is restated
   here, against that plate rather than against the dark card. */
.hp-experience-dark .hp-event-card__datebadge {
	background: #f4efff;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .45 );
}

.hp-experience-dark .hp-event-card__datebadge-day {
	color: #3b1d73;
}

.hp-experience-dark .hp-event-card__datebadge-month {
	color: #55309c;
}

.hp-experience-dark .hp-event-card__image--fallback {
	background: linear-gradient( 135deg, #2e2140 0%, #1a1224 100% );
}

.hp-experience-dark .hp-event-card .hp-c-btn--secondary {
	color: #d6b4ff;
	border-color: #8b5cf6;
}

/* L01.1 (2026-09-12): the filter panel is absolutely positioned at left:0 of
   its toggle, which sits part-way along the toolbar, so at 390px its right
   edge landed 113px outside the viewport and its controls were cut off.
   Anchored to the right on phones and capped to the viewport width. */
@media (max-width: 560px) {
	.hp-events-toolbar__panel {
		right: 0;
		left: auto;
		min-width: 0;
		width: max-content;
		max-width: calc( 100vw - 2rem );
	}
}