/**
 * Event list/calendar styling — toggle, responsive default, and
 * accessibility (visible focus, non-color-only emphasis).
 *
 * @package BCHBC\ChapterManagement
 */

/* Single source of truth for the brand color: Elementor's global "Primary"
   color if it's defined on the page (kept in sync automatically if it's
   ever changed in Elementor), falling back to the fixed hex value
   otherwise. To change the color later, edit only this one line. Border
   and muted-text tones are fixed neutrals (not brand-driven) shared by the
   filter card, event cards, and pagination. */
:root {
	--bchbc-primary: var( --e-global-color-primary, #2c4540 );
	/* Event button background — Elementor's global "Accent" color if set,
	   else this fixed hex (same pattern as --bchbc-primary above). */
	--bchbc-accent: var( --e-global-color-accent, #5e7c8a );
	--bchbc-border-color: #e3e0d8;
	--bchbc-muted: #6b6f66;
	/* Pulled from Elementor's global heading font if present (same pattern
	   as --bchbc-primary above), else a generic serif fallback. */
	--bchbc-heading-font: var( --e-global-typography-primary-font-family, Georgia, 'Times New Roman', serif );
	/* Soft blue-grey — deliberately distinct from --bchbc-primary so the
	   Chapter badge never reads as another action button. */
	--bchbc-badge-bg: #e4e9ec;
	--bchbc-badge-text: #45535c;
	/* Status badges (Sold Out / Members Only). Both carry their own words,
	   so color is reinforcement here, never the message itself — deliberately
	   two clearly different hues so they don't read as the same badge at a
	   glance. Contrast against their own backgrounds exceeds 4.5:1. */
	--bchbc-status-sold-out-bg: #f6e2df;
	--bchbc-status-sold-out-text: #8a2f22;
	--bchbc-status-members-bg: #efe6cf;
	--bchbc-status-members-text: #6c5410;
}

/* Re-themes FullCalendar via its own documented CSS custom properties
   (confirmed against the actual v6.1.21 source) — no selector overrides
   needed, and it can't drift out of sync with a future FullCalendar update
   the way overriding internal classes would. */
.bchbc-event-calendar {
	--fc-button-bg-color: var( --bchbc-primary );
	--fc-button-border-color: var( --bchbc-primary );
	--fc-button-hover-bg-color: color-mix( in srgb, var( --bchbc-primary ) 85%, black );
	--fc-button-hover-border-color: color-mix( in srgb, var( --bchbc-primary ) 85%, black );
	--fc-button-active-bg-color: color-mix( in srgb, var( --bchbc-primary ) 70%, black );
	--fc-button-active-border-color: color-mix( in srgb, var( --bchbc-primary ) 70%, black );
	--fc-event-bg-color: var( --bchbc-primary );
	--fc-event-border-color: var( --bchbc-primary );
	--fc-today-bg-color: color-mix( in srgb, var( --bchbc-primary ) 12%, white );
}

/* ---- Filter card ---- */

.bchbc-events-filter-card {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-bottom: 0.75em;
	padding: 1.5em;
	background: #fff;
	border: 1px solid var( --bchbc-border-color );
	border-radius: 14px;
}

.bchbc-events-filter-row-2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

/* `filters="0"` on the shortcode: no filter form, no Clear Filters link, so
   there's nothing left to justify a card treatment — the Show Past Events
   toggle sits directly on the page background instead, left-aligned rather
   than the desktop-default right alignment (that alignment only made sense
   opposite a Clear Filters link, which isn't rendered here at all). */
.bchbc-events-filter-card--bare {
	gap: 0;
	margin-bottom: 0.5em;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

.bchbc-events-filter-card--bare .bchbc-events-filter-row-2 {
	justify-content: flex-start;
}

.bchbc-events-clear-filters {
	font-size: 0.85em;
	font-weight: 600;
	color: var( --bchbc-primary );
	text-decoration: underline;
}

.bchbc-events-clear-filters:hover {
	color: color-mix( in srgb, var( --bchbc-primary ) 85%, black );
}

.bchbc-events-filters {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 1.5em;
	align-items: flex-end;
}

.bchbc-events-filter {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	min-width: 160px;
}

.bchbc-events-filter--search {
	flex: 1 1 220px;
}

.bchbc-events-filter label {
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --bchbc-muted );
}

.bchbc-events-filter select,
.bchbc-events-search-wrap input[type="search"] {
	width: 100%;
	padding: 0.65em 0.9em;
	background: #fff;
	color: inherit;
	font-size: 1em;
	border: 1px solid var( --bchbc-border-color );
	border-radius: 8px;
}

.bchbc-events-search-wrap {
	position: relative;
}

.bchbc-events-search-wrap input[type="search"] {
	padding-right: 2.4em;
}

.bchbc-events-search-icon {
	position: absolute;
	top: 50%;
	right: 0.8em;
	transform: translateY( -50% );
	color: var( --bchbc-muted );
	pointer-events: none;
}

.bchbc-events-filter-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.75em 1.4em;
	background: var( --bchbc-accent );
	color: #fff;
	font-size: 0.9em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
	border: none;
	border-radius: 999px;
	cursor: pointer;
}

.bchbc-events-filter-submit:hover {
	background: color-mix( in srgb, var( --bchbc-accent ) 85%, black );
}

/* ---- Past/Upcoming toggle switch ----
   Still a real `<a href>` (no-JS-safe navigation), just styled to look like
   a switch; `role="switch"`/`aria-checked` on the link and the adjacent
   static label (set in the template) carry the actual meaning for
   assistive tech and for anyone not relying on the shape alone. */

.bchbc-events-toggle {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.bchbc-events-toggle-label {
	font-size: 0.85em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --bchbc-muted );
	white-space: nowrap;
}

.bchbc-toggle-switch {
	position: relative;
	display: inline-block;
	width: 2.6em;
	height: 1.5em;
	flex-shrink: 0;
	background: #d8d5cb;
	border-radius: 999px;
}

.bchbc-toggle-switch[aria-checked="true"] {
	background: var( --bchbc-primary );
}

.bchbc-toggle-switch[aria-busy="true"] {
	opacity: 0.7;
	pointer-events: none;
}

.bchbc-toggle-switch-knob {
	position: absolute;
	top: 0.15em;
	left: 0.15em;
	width: 1.2em;
	height: 1.2em;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.25 );
	transition: left 0.15s ease;
}

.bchbc-toggle-switch[aria-checked="true"] .bchbc-toggle-switch-knob {
	left: 1.25em;
}

/* ---- Event count heading ---- */

.bchbc-events-count {
	margin: 0 0 0.75em;
	font-family: var( --bchbc-heading-font );
	font-size: 1.4em;
	font-weight: 700;
}

.bchbc-events-empty {
	padding: 1em 0;
}

/* ---- Event cards ---- */

.bchbc-event-list {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bchbc-event {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 1.25em;
	padding: 1.25em;
	background: #fff;
	border: 1px solid var( --bchbc-border-color );
	border-radius: 14px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Subtle hover: border + shadow + a small upward shift — the whole card is
   clickable (see the title link's stretched-link ::after below), so this
   also functions as the hover affordance for that. */
.bchbc-event:hover {
	transform: translateY( -2px );
	border-color: color-mix( in srgb, var( --bchbc-primary ) 35%, var( --bchbc-border-color ) );
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.08 );
}

.bchbc-event-thumb {
	flex: 0 0 180px;
}

.bchbc-event-thumb-img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 10px;
}

.bchbc-event-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: color-mix( in srgb, var( --bchbc-primary ) 12%, white );
	border-radius: 10px;
}

.bchbc-event-thumb-placeholder-img {
	max-width: 90%;
	max-height: 90%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.bchbc-event-date-badge {
	display: flex;
	flex: 0 0 150px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15em;
	padding: 0.75em 0.5em;
	background: color-mix( in srgb, var( --bchbc-primary ) 8%, white );
	border-radius: 10px;
	text-align: center;
}

.bchbc-event-date-month {
	font-size: 0.85em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --bchbc-primary );
}

.bchbc-event-date-day {
	font-size: 2em;
	font-weight: 700;
	line-height: 1;
	color: var( --bchbc-primary );
}

.bchbc-event-date-year {
	font-size: 0.85em;
	color: var( --bchbc-muted );
}

.bchbc-event-scope-badge {
	display: inline-block;
	margin-top: 0.5em;
	max-width: 100%;
	padding: 0.25em 0.75em;
	background: var( --bchbc-badge-bg );
	color: var( --bchbc-badge-text );
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: normal;
	overflow-wrap: anywhere;
	border-radius: 999px;
}

/* Sold Out / Members Only. Shared by the list cards and the single-Event
   view (rendered by `bchbc_event_status_badges()` in
   `src/Frontend/template-tags.php`), so one rule set keeps them identical
   in both places. */
.bchbc-event-status-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bchbc-event-status-badge {
	padding: 0.3em 0.9em;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 999px;
}

.bchbc-event-status-badge--sold-out {
	background: var( --bchbc-status-sold-out-bg );
	color: var( --bchbc-status-sold-out-text );
}

.bchbc-event-status-badge--members-only {
	background: var( --bchbc-status-members-bg );
	color: var( --bchbc-status-members-text );
}

.bchbc-event-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5em;
	min-width: 0;
}

.bchbc-event-title {
	margin: 0;
	font-family: var( --bchbc-heading-font );
	font-size: 1.5em;
}

.bchbc-event-title a {
	color: inherit;
	text-decoration: none;
}

.bchbc-event-title a:hover {
	text-decoration: underline;
}

/* Makes the whole card clickable via one real, accessible link (the
   title's `<a>`) instead of three separate anchors to the same
   destination — avoids the redundant-tab-stops accessibility anti-pattern
   while still satisfying "image/title/card area all link to the Event."
   `.bchbc-event-links` gets `position: relative` + a higher stacking
   context below so its buttons stay independently clickable above this
   overlay. */
.bchbc-event-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bchbc-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bchbc-event-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var( --bchbc-muted );
	font-size: 0.9em;
}

.bchbc-event-icon {
	flex-shrink: 0;
	color: var( --bchbc-primary );
}

.bchbc-event-summary {
	margin: 0;
	color: var( --bchbc-muted );
}

.bchbc-event-links {
	position: relative;
	/* Sits above the title link's stretched-link overlay (::after,
	   z-index: 1) so View Details/Register stay independently clickable —
	   without this, the overlay would intercept every click on this card. */
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.6em;
	margin: 0.5em 0 0;
}

.bchbc-event-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-width: 150px;
	padding: 0.6em 1.2em;
	background: var( --bchbc-accent );
	color: #fff;
	font-size: 0.85em;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 999px;
}

.bchbc-event-btn:hover {
	background: color-mix( in srgb, var( --bchbc-accent ) 85%, black );
	color: #fff;
}

/* Outline variant: transparent background, border and text both in the
   accent color — never a solid fill. */
.bchbc-event-btn--secondary {
	background: transparent;
	color: var( --bchbc-accent );
	border: 1px solid var( --bchbc-accent );
}

.bchbc-event-btn--secondary:hover {
	background: color-mix( in srgb, var( --bchbc-accent ) 10%, white );
	color: var( --bchbc-accent );
}

@media ( max-width: 600px ) {
	.bchbc-events-filter-card {
		flex-direction: column;
		align-items: stretch;
	}

	.bchbc-events-filters {
		flex-direction: column;
		align-items: stretch;
	}

	/* Without this, the search filter keeps its desktop `flex: 1 1 220px`
	   — meaningless as a *width* basis once the row above switches to
	   `flex-direction: column`, where the same `220px` is instead read as
	   a minimum *height*, leaving a large empty gap below the input. */
	.bchbc-events-filter--search {
		flex: none;
	}

	.bchbc-events-filter-submit {
		justify-content: center;
		width: 100%;
	}

	.bchbc-events-filter-row-2 {
		align-items: flex-start;
	}

	.bchbc-event {
		flex-direction: column;
	}

	.bchbc-event-thumb {
		flex-basis: auto;
	}

	/* Landscape on mobile (portrait on desktop) — a tall 3:4 image eats too
	   much vertical space stacked above the rest of a mobile card. */
	.bchbc-event-thumb-img,
	.bchbc-event-thumb-placeholder {
		aspect-ratio: 16 / 9;
	}

	.bchbc-event-links {
		flex-direction: column;
		align-items: stretch;
	}

	.bchbc-event-links .bchbc-event-btn {
		width: 100%;
	}
}

/* ---- View switch (List View / Calendar View) ----
   JS-injected (assets/js/bchbc-events-calendar.js) — without JS this
   simply never appears, and the plain CSS default (list, on every
   viewport width) applies instead. */

.bchbc-events-view-switch {
	display: inline-flex;
	gap: 0.4em;
	margin-bottom: 1em;
	padding: 0.3em;
	background-color: color-mix( in srgb, var( --bchbc-primary ) 6%, white );
	border-radius: 999px;
}

.bchbc-events-view-switch-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 1.1em;
	background-color: color-mix( in srgb, var( --bchbc-primary ) 8%, white );
	color: var( --bchbc-muted );
	font-size: 0.85em;
	font-weight: 700;
	border: none;
	border-radius: 999px;
	cursor: pointer;
}

/* `.bchbc-event-icon` (the shared icon set) sets its own `color`, so the
   button's own `color` alone wouldn't reach the SVG via inheritance. */
.bchbc-events-view-switch-btn .bchbc-event-icon {
	color: var( --bchbc-muted );
}

.bchbc-events-view-switch-btn[aria-pressed="true"] {
	background-color: var( --bchbc-primary );
	color: #fff;
}

.bchbc-events-view-switch-btn[aria-pressed="true"] .bchbc-event-icon {
	color: #fff;
}

/* ---- Load More ---- */

.bchbc-events-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 1.5em;
}

.bchbc-events-load-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.75em 1.75em;
	background: var( --bchbc-accent );
	color: #fff;
	font-size: 0.9em;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
}

.bchbc-events-load-more:hover {
	background: color-mix( in srgb, var( --bchbc-accent ) 85%, black );
}

.bchbc-events-load-more[aria-busy="true"] {
	opacity: 0.7;
	pointer-events: none;
}

/* ---- Event details (single Event) ----
   Reuses `.bchbc-event-meta`/`.bchbc-event-meta-item`, `.bchbc-event-links`,
   and `.bchbc-event-btn` from the list view above as-is — only new,
   detail-specific structure gets its own rules here. Two columns on
   desktop (main content / sidebar), one column — main first — on mobile. */

.bchbc-event-detail {
	display: grid;
	grid-template-columns: minmax( 0, 2fr ) minmax( 0, 1fr );
	gap: 2em;
	align-items: start;
}

.bchbc-event-detail-main,
.bchbc-event-detail-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

.bchbc-event-detail-card {
	padding: 1.5em;
	background: #fff;
	border: 1px solid var( --bchbc-border-color );
	border-radius: 14px;
}

.bchbc-event-detail-thumb-img {
	display: block;
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: 14px;
}

.bchbc-event-type-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.bchbc-event-type-badge {
	padding: 0.3em 0.9em;
	background: var( --bchbc-primary );
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 999px;
}

.bchbc-event-meta--detail {
	font-size: 1em;
}

.bchbc-event-meta--stacked {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.65em;
}

.bchbc-event-detail-section {
	padding-top: 1.5em;
	border-top: 1px solid var( --bchbc-border-color );
}

.bchbc-event-detail-section:first-of-type {
	padding-top: 0;
	border-top: none;
}

.bchbc-event-detail-heading {
	margin: 0 0 0.75em;
	font-size: 1.15em;
	font-weight: 700;
}

.bchbc-event-detail-content {
	font-size: 1.05em;
	line-height: 1.7;
}

.bchbc-event-detail-content > :first-child {
	margin-top: 0;
}

.bchbc-event-detail-content > :last-child {
	margin-bottom: 0;
}

.bchbc-event-address {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	margin: 0 0 0.5em;
	color: var( --bchbc-muted );
	font-style: normal;
}

.bchbc-event-map-links {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0 0 1em;
	color: var( --bchbc-primary );
	font-weight: 600;
}

.bchbc-event-map-links a {
	color: inherit;
	text-decoration: underline;
}

/* In the detail card the status badges sit between the Event Type badges
   and the "Event Details" heading, so they need the same bottom spacing
   `.bchbc-event-type-badges` has. On a list card they're a flex child and
   the body's own `gap` already spaces them. */
.bchbc-event-detail-card .bchbc-event-status-badges {
	margin-bottom: 1em;
}

.bchbc-event-location-note {
	margin: 0.5em 0 0;
	color: var( --bchbc-muted );
}

/* "Contact for Information" — shown in place of an address, so it gets the
   same pin icon the address block's Map/Directions line uses rather than
   leaving the Location section visually empty. */
.bchbc-event-location-contact {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	color: var( --bchbc-primary );
}

.bchbc-event-location-contact-info {
	margin-top: 0.5em;
	color: var( --bchbc-muted );
}

.bchbc-event-location-contact-info > :first-child {
	margin-top: 0;
}

.bchbc-event-location-contact-info > :last-child {
	margin-bottom: 0;
}

/* The meeting URL in full, next to its Copy button. `overflow-wrap` on the
   URL matters more than usual here: meeting links are long, unbroken
   strings that would otherwise push the sidebar layout wide. */
.bchbc-event-copy-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-top: 0.75em;
	padding: 0.6em 0.85em;
	background: color-mix( in srgb, var( --bchbc-primary ) 5%, white );
	border: 1px solid var( --bchbc-border-color );
	border-radius: 10px;
}

.bchbc-event-copy-link-url {
	flex: 1 1 12em;
	min-width: 0;
	color: var( --bchbc-primary );
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

.bchbc-event-copy-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.35em;
	padding: 0.4em 0.8em;
	background: #fff;
	color: var( --bchbc-primary );
	font-size: 0.85em;
	font-weight: 600;
	border: 1px solid var( --bchbc-border-color );
	border-radius: 999px;
	cursor: pointer;
}

.bchbc-event-copy-btn:hover {
	background: color-mix( in srgb, var( --bchbc-primary ) 8%, white );
}

.bchbc-event-copy-btn.is-copied {
	border-color: var( --bchbc-primary );
}

.bchbc-event-copy-btn-icon {
	display: inline-flex;
}

/* One icon swaps for the other on success — both are in the button from
   the start (see `bchbc_event_icon()` output in the template) rather than
   being built in JS, so there's nothing to lay out on click. */
.bchbc-event-copy-btn-icon .bchbc-event-icon:last-child,
.bchbc-event-copy-btn-icon.is-copied .bchbc-event-icon:first-child {
	display: none;
}

.bchbc-event-copy-btn-icon.is-copied .bchbc-event-icon:last-child {
	display: inline;
}

/* E-transfer notice, inside the Contact & Registration card — set apart
   from the contact list above it because it's an action the attendee has
   to take before the Event, not another detail to read. */
.bchbc-event-etransfer {
	margin-top: 1em;
	padding: 0.85em 1em;
	background: var( --bchbc-status-members-bg );
	color: var( --bchbc-status-members-text );
	border-radius: 10px;
}

.bchbc-event-etransfer-heading {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}

.bchbc-event-etransfer-instructions {
	margin-top: 0.4em;
	font-size: 0.95em;
}

.bchbc-event-etransfer-instructions > :first-child {
	margin-top: 0;
}

.bchbc-event-etransfer-instructions > :last-child {
	margin-bottom: 0;
}

/* Buttons inside the detail view read left-to-right in a single column,
   unlike the list view's cards where they sit bottom-right of a row. */
.bchbc-event-detail .bchbc-event-links {
	justify-content: flex-start;
}

.bchbc-event-btn--block {
	justify-content: center;
	width: 100%;
	margin-top: 0.5em;
}

.bchbc-event-share-copy {
	margin: 0 0 1em;
	color: var( --bchbc-muted );
}

.bchbc-event-share-links {
	display: flex;
	gap: 0.75em;
	margin: 0;
}

.bchbc-event-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	background: var( --bchbc-accent );
	color: #fff;
	border-radius: 50%;
}

.bchbc-event-share-btn:hover {
	background: color-mix( in srgb, var( --bchbc-accent ) 85%, black );
}

.bchbc-event-file-list {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bchbc-event-file-item a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var( --bchbc-primary );
	font-weight: 600;
	text-decoration: none;
}

.bchbc-event-file-item a:hover {
	text-decoration: underline;
}

.bchbc-event-gallery {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
	gap: 0.75em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bchbc-event-gallery-item a {
	display: block;
}

.bchbc-event-gallery-item img {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
	border-radius: 10px;
}

@media ( max-width: 800px ) {
	.bchbc-event-detail {
		display: flex;
		flex-direction: column;
	}
}

/* ---- Auto (list + calendar) wrapper ----
   List by default, on every viewport width — both are always in the
   markup, this is purely a display toggle, never a content difference.
   Calendar only shows once a visitor asks for it, via the List View /
   Calendar View toggle (assets/js/bchbc-events-calendar.js) or
   `?bchbc_view=calendar`. */
.bchbc-events-auto .bchbc-event-calendar {
	display: none;
}

.bchbc-events-auto .bchbc-event-list,
.bchbc-events-auto .bchbc-events-filter-card,
.bchbc-events-auto .bchbc-events-count {
	display: block;
}

.bchbc-events-auto.bchbc-show-calendar .bchbc-event-calendar {
	display: block;
}

.bchbc-events-auto.bchbc-show-calendar .bchbc-event-list,
.bchbc-events-auto.bchbc-show-calendar .bchbc-events-filter-card,
.bchbc-events-auto.bchbc-show-calendar .bchbc-events-count {
	display: none;
}

/* On mobile portrait, Calendar is unreachable entirely — List is the only
   view, and the List View / Calendar View toggle (which would otherwise
   switch to Calendar) is hidden too. Each selector here matches the
   specificity of its desktop-view counterpart above and relies on source
   order (this block comes later in the file) to win at this breakpoint,
   rather than `!important` — including the `.bchbc-show-calendar` variants,
   so a shared `?bchbc_view=calendar` link can't reveal the calendar here
   either. */
@media ( max-width: 600px ) and ( orientation: portrait ) {
	.bchbc-events-auto .bchbc-event-calendar,
	.bchbc-events-auto.bchbc-show-calendar .bchbc-event-calendar {
		display: none;
	}

	.bchbc-events-auto .bchbc-event-list,
	.bchbc-events-auto .bchbc-events-filter-card,
	.bchbc-events-auto .bchbc-events-count,
	.bchbc-events-auto.bchbc-show-calendar .bchbc-event-list,
	.bchbc-events-auto.bchbc-show-calendar .bchbc-events-filter-card,
	.bchbc-events-auto.bchbc-show-calendar .bchbc-events-count {
		display: block;
	}

	.bchbc-events-view-switch {
		display: none;
	}
}

/* Visible Chapter/Provincial label on each calendar event — text-based
   (never color-only), so it reads the same for anyone regardless of color
   vision. Kept on its own line and small so it doesn't crowd the compact
   month-grid cells. */
.bchbc-fc-scope-label {
	display: block;
	font-size: 0.8em;
	font-weight: 400;
	opacity: 0.85;
	white-space: normal;
	overflow-wrap: break-word;
}

/* Sold Out / Members Only on a calendar event. Bold rather than a colored
   pill: the event block already has FullCalendar's own background, so a
   second background here would fight it — and, as everywhere else, the
   word itself carries the meaning, not the styling. */
.bchbc-fc-status-label {
	display: block;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: normal;
	overflow-wrap: break-word;
}

/* Visible focus states throughout — never rely on the browser default
   alone. `.bchbc-events-view-switch` is listed explicitly: it's injected as
   a sibling of `.bchbc-events` (both children of `.bchbc-events-auto`), not
   a descendant of it, so it wouldn't otherwise be covered by the
   `.bchbc-events button` rule below it. */
.bchbc-events a:focus-visible,
.bchbc-events button:focus-visible,
.bchbc-events input:focus-visible,
.bchbc-events select:focus-visible,
.bchbc-events-view-switch button:focus-visible,
.bchbc-event-calendar :focus-visible {
	outline: 2px solid var( --bchbc-primary );
	outline-offset: 2px;
}

.bchbc-event-calendar .fc-event {
	cursor: pointer;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	border: 0;
}