/* ---------- Design tokens ----------
 * Themes can override the visual style of the calendar/list without touching
 * markup by redeclaring these custom properties on `.wpem-calendar-wrap`,
 * `.wpem-list-wrap`, or `.wpem-agenda-wrap` (e.g. in a child theme's stylesheet).
 */
.wpem-calendar-wrap,
.wpem-list-wrap,
.wpem-agenda-wrap,
.wpem-gallery-wrap {
	--wpem-accent: #4f46e5;
	--wpem-accent-text: #ffffff;
	--wpem-text: #1e1e1e;
	--wpem-muted: #6b7280;
	--wpem-border: #e5e7eb;
	--wpem-surface: #ffffff;
	--wpem-radius: 12px;
}

/* ---------- Shared ---------- */
.wpem-calendar-wrap,
.wpem-list-wrap,
.wpem-agenda-wrap,
.wpem-gallery-wrap {
	max-width: 1100px;
	margin: 32px auto;
	color: var( --wpem-text );
	font-size: 15px;
	line-height: 1.5;
	/* Isolate from surrounding theme sections (dark heroes, custom link/heading
	 * colors, etc.) so the widget always renders legibly regardless of context. */
	background: var( --wpem-surface );
	border: 1px solid var( --wpem-border );
	border-radius: var( --wpem-radius );
	padding: 24px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 ), 0 8px 24px rgba( 0, 0, 0, 0.04 );
}

.wpem-calendar-wrap *,
.wpem-list-wrap *,
.wpem-agenda-wrap *,
.wpem-gallery-wrap * {
	box-sizing: border-box;
}

.wpem-calendar-topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 4px;
}

.wpem-view-toggle {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: var( --wpem-neutral-hover, #f3f4f6 );
	border-radius: 10px;
}

.wpem-view-btn {
	padding: 8px 16px;
	border: none;
	background: transparent;
	color: var( --wpem-muted ) !important;
	border-radius: 7px;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
}

.wpem-view-btn.is-active {
	background: var( --wpem-surface );
	color: var( --wpem-text ) !important;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.08 );
}

.wpem-calendar-panel[hidden] {
	display: none;
}

.wpem-calendar-panel[data-panel="list"] {
	margin-top: 16px;
}

.wpem-calendar-filters,
.wpem-list-filters {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.wpem-filter-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wpem-filter-group label {
	font-size: 12px;
	font-weight: 600;
	color: var( --wpem-muted );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wpem-calendar-filters select,
.wpem-list-filters select {
	padding: 8px 32px 8px 12px;
	border: 1px solid var( --wpem-border );
	border-radius: 8px;
	background: var( --wpem-surface ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 8px center;
	background-size: 16px;
	appearance: none;
	color: var( --wpem-text ) !important;
	font-size: 14px;
	min-width: 160px;
	max-width: 100%;
	cursor: pointer;
}

.wpem-calendar-filters select:focus,
.wpem-list-filters select:focus {
	outline: none;
	border-color: var( --wpem-accent );
	box-shadow: 0 0 0 3px rgba( 79, 70, 229, 0.15 );
}

/* ---------- Calendar ---------- */
.wpem-calendar {
	background: var( --wpem-surface );
	color: var( --wpem-text );

	/* FullCalendar reads these custom properties directly, so the whole
	 * component re-themes without any !important overrides. */
	--fc-border-color: var( --wpem-border );
	--fc-page-bg-color: var( --wpem-surface );
	--fc-neutral-bg-color: #f9fafb;
	--fc-today-bg-color: rgba( 79, 70, 229, 0.06 );
	--fc-button-bg-color: var( --wpem-surface );
	--fc-button-border-color: var( --wpem-border );
	--fc-button-text-color: var( --wpem-text );
	--fc-button-hover-bg-color: #f3f4f6;
	--fc-button-hover-border-color: var( --wpem-border );
	--fc-button-active-bg-color: var( --wpem-accent );
	--fc-button-active-border-color: var( --wpem-accent );
	--fc-event-bg-color: var( --wpem-accent );
	--fc-event-border-color: var( --wpem-accent );
	--fc-event-text-color: var( --wpem-accent-text );
	--fc-list-event-hover-bg-color: #f9fafb;
	--fc-small-font-size: 12px;
}

.wpem-calendar .fc {
	font-family: inherit;
}

/* FullCalendar renders day numbers, weekday headers, AND each event itself as
 * real <a href="..."> tags (an event's clickable area IS the anchor, not a
 * link nested inside it). That means the browser's/theme's default `:visited`
 * color — classically a dim purple/olive tint — can apply to already-clicked
 * events and make them nearly invisible until :hover restores full color. We
 * pin the color across every link state so it never depends on visited
 * history.
 *
 * Month view renders timed events as a small colored dot + plain text with NO
 * background fill behind it ("dot-style"), so that text sits directly on the
 * white/light cell and needs the same dark text color as everything else.
 * Week/Day views (and the all-day row) render events as a filled box using
 * the event's own background color ("block-style"), so THAT text needs a
 * fixed light color instead to stay readable against the fill. The two lists
 * below are deliberately non-overlapping so neither rule fights the other. */
.wpem-calendar .fc-daygrid-day-number,
.wpem-calendar .fc-col-header-cell-cushion,
.wpem-calendar .fc-list-day-cushion,
.wpem-calendar .fc-daygrid-more-link,
.wpem-calendar .fc-toolbar-title,
.wpem-calendar .fc-daygrid-dot-event,
.wpem-calendar .fc-daygrid-dot-event:link,
.wpem-calendar .fc-daygrid-dot-event:visited,
.wpem-calendar .fc-daygrid-dot-event:hover,
.wpem-calendar .fc-daygrid-dot-event:active,
.wpem-calendar .fc-daygrid-dot-event .fc-event-title,
.wpem-calendar .fc-daygrid-dot-event .fc-event-time {
	color: var( --wpem-text ) !important;
	text-decoration: none !important;
}

.wpem-calendar .fc-toolbar-title {
	font-size: 20px;
	font-weight: 700;
}

.wpem-calendar .fc-daygrid-block-event,
.wpem-calendar .fc-daygrid-block-event:link,
.wpem-calendar .fc-daygrid-block-event:visited,
.wpem-calendar .fc-daygrid-block-event:hover,
.wpem-calendar .fc-daygrid-block-event .fc-event-title,
.wpem-calendar .fc-daygrid-block-event .fc-event-time,
.wpem-calendar .fc-timegrid-event,
.wpem-calendar .fc-timegrid-event:link,
.wpem-calendar .fc-timegrid-event:visited,
.wpem-calendar .fc-timegrid-event:hover,
.wpem-calendar .fc-timegrid-event .fc-event-title,
.wpem-calendar .fc-timegrid-event .fc-event-time {
	color: var( --wpem-event-text, #fff ) !important;
	text-decoration: none !important;
}

.wpem-calendar .fc-button {
	box-shadow: none !important;
	text-transform: capitalize;
	font-weight: 600;
	padding: 6px 14px;
}

.wpem-calendar .fc-button:focus {
	box-shadow: 0 0 0 3px rgba( 79, 70, 229, 0.15 ) !important;
}

.wpem-calendar .fc-button-active {
	color: var( --wpem-accent-text ) !important;
}

.wpem-calendar .fc-daygrid-day.fc-day-today,
.wpem-calendar .fc-timegrid-col.fc-day-today {
	background: var( --fc-today-bg-color );
}

.wpem-calendar .fc-event {
	border-radius: 6px;
	padding: 1px 4px;
	cursor: pointer;
}

.wpem-fc-past {
	opacity: 0.5;
}

/* ---------- List / tabs ---------- */
.wpem-list-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.wpem-tab {
	padding: 8px 18px;
	border: 1px solid var( --wpem-border );
	background: var( --wpem-surface );
	color: var( --wpem-text ) !important;
	border-radius: 20px;
	cursor: pointer;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wpem-tab:hover {
	border-color: var( --wpem-accent );
}

.wpem-tab.is-active {
	background: var( --wpem-accent );
	color: var( --wpem-accent-text ) !important;
	border-color: var( --wpem-accent );
}

.wpem-list-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}

.wpem-no-events,
.wpem-list-loading {
	grid-column: 1 / -1;
	text-align: center;
	color: #777;
	padding: 40px 0;
}

.wpem-list-pagination {
	text-align: center;
	margin-top: 24px;
}

.wpem-load-more {
	padding: 10px 24px;
	border: 1px solid var( --wpem-accent );
	color: var( --wpem-accent ) !important;
	background: var( --wpem-surface );
	border-radius: 24px;
	cursor: pointer;
	font-weight: 600;
}

.wpem-load-more:hover {
	background: var( --wpem-accent );
	color: var( --wpem-accent-text ) !important;
}

/* ---------- Cards ---------- */
.wpem-card {
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.wpem-card-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: #f2f2f2;
}

.wpem-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wpem-card-thumb-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #eee, #f7f7f7);
}

.wpem-card-flag {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 10px;
	border-radius: 3px;
}

.wpem-card-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.wpem-card-date {
	font-size: 13px;
	color: #888;
	font-weight: 600;
}

.wpem-card-title {
	margin: 0;
	font-size: 18px;
	/* Set here too (not just on the nested `a`) since the gallery card variant
	 * has no link inside the title — the whole card is the clickable target. */
	color: var( --wpem-text ) !important;
}

.wpem-card-title a {
	/* !important guards against theme-level `a { color: ... }` rules
	 * (common in page builders) making the title unreadable. */
	color: var( --wpem-text ) !important;
	text-decoration: none;
}

.wpem-card-venue {
	font-size: 13px;
	color: #666;
}

.wpem-card-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}

.wpem-card-cat {
	font-size: 11px;
	background: #f0f0f0;
	padding: 2px 8px;
	border-radius: 10px;
	color: #555;
}

.wpem-card-btn {
	margin-top: auto;
	display: inline-block;
	padding: 8px 16px;
	background: var( --wpem-accent );
	color: var( --wpem-accent-text ) !important;
	text-decoration: none;
	border-radius: 6px;
	text-align: center;
	font-weight: 600;
}

.wpem-card-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	margin-top: 10px;
}

.wpem-card-gallery-thumb {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 4px;
}

.wpem-card-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wpem-card-gallery-more {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

/* ---------- Single event ----------
 * Unlike the shortcode widgets above, this is the actual page/post content —
 * it deliberately inherits the active theme's own colors and typography
 * (dark theme, light theme, whatever) rather than forcing a card/background,
 * so it looks native on any site. Only self-contained elements (chips, the
 * ticket button) get explicit colors, since those need to look the same
 * regardless of what the surrounding page looks like. */
.wpem-single-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
}

.wpem-single-image {
	position: relative;
	margin-bottom: 24px;
}

.wpem-single-image img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

.wpem-single-flag {
	position: absolute;
	top: 14px;
	left: 14px;
}

.wpem-single-title {
	margin-bottom: 16px;
	line-height: 1.2;
}

.wpem-single-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin-bottom: 14px;
	font-size: 15px;
	/* Mutes the inherited theme text color without assuming light or dark. */
	opacity: 0.8;
}

.wpem-single-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.wpem-meta-icon {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	opacity: 0.85;
}

.wpem-single-cats {
	margin-bottom: 24px;
}

.wpem-single-tag {
	background: transparent !important;
	color: inherit !important;
	opacity: 0.8;
	border: 1px solid rgba( 128, 128, 128, 0.4 );
}

.wpem-ticket-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 32px;
	background: #d0ad55;
	color: #1e1e1e !important;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 28px;
	box-shadow: 0 6px 18px rgba( 208, 173, 85, 0.35 );
	transition: background 0.15s ease, transform 0.15s ease;
}

.wpem-ticket-btn:hover {
	background: #ba9640;
	color: #1e1e1e !important;
	transform: translateY( -1px );
}

.wpem-single-content {
	line-height: 1.75;
	font-size: 16px;
	margin-bottom: 36px;
	padding-top: 28px;
	border-top: 1px solid rgba( 128, 128, 128, 0.25 );
}

.wpem-single-gallery {
	padding-top: 12px;
	border-top: 1px solid rgba( 128, 128, 128, 0.25 );
}

.wpem-single-gallery h2 {
	margin-bottom: 14px;
}

.wpem-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px;
}

.wpem-gallery-grid img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

/* ---------- Gallery modal button sizing guard ----------
 * These overlay buttons are appended directly to <body> (not inside a
 * .wpem-*-wrap container), so they don't get the plugin's usual box-sizing
 * reset and are exposed to whatever global button styling the theme applies
 * — most commonly a `button { min-width: ...; padding: ...; }` rule for a
 * "pill" CTA look. min-width/min-height always win over a smaller `width`/
 * `height` value during layout regardless of CSS specificity, which stretches
 * these into ovals instead of circles unless explicitly zeroed out here. */
.wpem-gallery-modal-toolbar button,
.wpem-gallery-modal-prev,
.wpem-gallery-modal-next {
	box-sizing: border-box !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: 1 !important;
}

/* Shared by gallery-modal.js's openModal()/closeModal() to prevent the page
 * from scrolling behind the overlay while it's open. */
body.wpem-lightbox-locked {
	overflow: hidden;
}

/* ---------- Agenda list ---------- */
.wpem-agenda-wrap {
	/* Narrower than the calendar/grid wraps — this view is text-forward. */
	max-width: 900px;
}

.wpem-agenda-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.wpem-agenda-nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wpem-agenda-prev,
.wpem-agenda-next {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --wpem-border, #e5e7eb );
	background: var( --wpem-surface, #fff );
	border-radius: 8px;
	cursor: pointer;
	/* !important guards against theme-level `button { color: ... }` rules
	 * (common in dark-themed sites) making the prev/next glyphs invisible. */
	color: var( --wpem-text, #1e1e1e ) !important;
}

.wpem-agenda-prev svg,
.wpem-agenda-next svg {
	width: 18px;
	height: 18px;
}

.wpem-agenda-prev:hover:not(:disabled),
.wpem-agenda-next:hover:not(:disabled) {
	border-color: var( --wpem-accent, #4f46e5 );
	color: var( --wpem-accent, #4f46e5 ) !important;
}

.wpem-agenda-prev:disabled,
.wpem-agenda-next:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.wpem-agenda-today {
	height: 36px;
	padding: 0 14px;
	border: 1px solid var( --wpem-border, #e5e7eb );
	background: var( --wpem-surface, #fff );
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	color: var( --wpem-text, #1e1e1e ) !important;
}

.wpem-agenda-today:hover {
	border-color: var( --wpem-accent, #4f46e5 );
	color: var( --wpem-accent, #4f46e5 ) !important;
}

.wpem-agenda-filter {
	height: 36px;
	padding: 0 30px 0 12px;
	border: none;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 6px center;
	background-size: 16px;
	appearance: none;
	font-size: 16px;
	font-weight: 700;
	color: var( --wpem-text, #1e1e1e ) !important;
	cursor: pointer;
}

.wpem-agenda-filter option {
	color: #1e1e1e;
}

.wpem-agenda-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.wpem-agenda-filters select {
	padding: 8px 32px 8px 12px;
	border: 1px solid var( --wpem-border, #e5e7eb );
	border-radius: 8px;
	background: var( --wpem-surface, #fff ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 8px center;
	background-size: 16px;
	appearance: none;
	color: var( --wpem-text, #1e1e1e ) !important;
	font-size: 14px;
	max-width: 100%;
	cursor: pointer;
}

.wpem-agenda-month {
	font-size: 20px;
	font-weight: 700;
	color: var( --wpem-text, #1e1e1e );
	padding-bottom: 10px;
	margin: 24px 0 10px;
	border-bottom: 2px solid var( --wpem-border, #e5e7eb );
}

.wpem-agenda-month:first-child {
	margin-top: 0;
}

.wpem-agenda-row {
	display: flex;
	gap: 20px;
	padding: 16px 10px;
	border-radius: 8px;
	transition: background 0.15s ease;
}

.wpem-agenda-row:hover {
	background: var( --wpem-neutral-hover, #f9fafb );
}

.wpem-agenda-row-past {
	opacity: 0.6;
}

/* Like the day-block link elsewhere, this is a real <a href="..."> — the
 * .wpem-agenda-day span has no color of its own, so without pinning it here
 * (across every link state, see the FullCalendar note above) it silently
 * inherits the browser/theme's :visited link color once clicked, and can
 * disappear against the white row background. */
.wpem-agenda-date,
.wpem-agenda-date:link,
.wpem-agenda-date:visited,
.wpem-agenda-date:hover,
.wpem-agenda-date:active {
	flex: 0 0 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	color: var( --wpem-text, #1e1e1e ) !important;
	border-right: 1px solid var( --wpem-border, #e5e7eb );
	padding-right: 16px;
}

.wpem-agenda-dow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var( --wpem-muted, #6b7280 );
	text-transform: uppercase;
}

.wpem-agenda-day {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: var( --wpem-text, #1e1e1e ) !important;
}

.wpem-agenda-body {
	flex: 1;
	min-width: 0;
}

.wpem-agenda-time {
	font-size: 13px;
	color: var( --wpem-muted, #6b7280 );
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.wpem-agenda-title {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 700;
}

.wpem-agenda-title a {
	color: var( --wpem-text, #1e1e1e ) !important;
	text-decoration: none;
}

.wpem-agenda-title a:hover {
	color: var( --wpem-accent, #4f46e5 );
}

.wpem-agenda-venue {
	font-size: 14px;
	color: var( --wpem-muted, #6b7280 );
	margin-bottom: 6px;
}

.wpem-agenda-excerpt {
	font-size: 14px;
	color: var( --wpem-muted, #6b7280 );
	margin: 0;
	line-height: 1.6;
}

.wpem-agenda-thumb {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	border-radius: 8px;
	overflow: hidden;
	display: block;
}

.wpem-agenda-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Past events gallery grid ---------- */
.wpem-gallery-grid-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}

.wpem-gallery-card {
	display: block;
	border: 1px solid var( --wpem-border );
	border-radius: 8px;
	overflow: hidden;
	background: var( --wpem-surface );
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	padding: 0;
	width: 100%;
	font: inherit;
}

.wpem-gallery-card:hover .wpem-gallery-card-thumb img {
	transform: scale( 1.04 );
}

.wpem-gallery-card-thumb {
	position: relative;
	/* Fixed height so every card in the grid lines up at the same size,
	 * regardless of each flyer's own proportions. 3:4 is closer to a typical
	 * portrait event-flyer's own proportions than a 16:10 landscape box would
	 * be, so object-fit:contain below has much less empty space to letterbox
	 * in for most posters. */
	aspect-ratio: 3 / 4;
	/* Dark backdrop so the letterbox bars around a contained flyer read as an
	 * intentional poster display rather than a plain gap. */
	background: #1a1a1a;
	overflow: hidden;
}

.wpem-gallery-card-thumb img {
	width: 100%;
	height: 100%;
	/* object-fit: contain shows the whole flyer — nothing cropped off —
	 * scaled down to fit the fixed-size box above, letterboxed on whichever
	 * sides don't match the box's aspect ratio. */
	object-fit: contain;
	object-position: center;
	display: block;
	transition: transform 0.25s ease;
}

.wpem-gallery-count {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: rgba( 0, 0, 0, 0.7 );
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 12px;
}

.wpem-gallery-card-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* ---------- Gallery modal viewer ---------- */
.wpem-gallery-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.92 );
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 100001;
	padding: 24px;
}

.wpem-gallery-modal-overlay.is-open {
	display: flex;
}

.wpem-gallery-modal-main {
	/* The prev/next arrows are positioned children of this element (so they
	 * can straddle the image's actual edge rather than float in empty space
	 * at the viewport edge), so this needs to be their positioning context. */
	position: relative;
	max-width: 90vw;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wpem-gallery-modal-scroll {
	max-width: 90vw;
	max-height: 70vh;
	overflow: auto;
	/* Panning while zoomed should feel clean, not like a browser scroll pane —
	 * hide the scrollbar chrome while keeping the pan (wheel/trackpad/touch)
	 * itself fully functional. */
	scrollbar-width: none;
}

.wpem-gallery-modal-scroll::-webkit-scrollbar {
	display: none;
}

.wpem-gallery-modal-main img {
	max-width: 90vw;
	max-height: 70vh;
	object-fit: contain;
	border-radius: 6px;
	display: block;
	margin: 0 auto;
	transition: transform 0.2s ease, opacity 0.18s ease;
}

.wpem-gallery-modal-main img.is-zoomed {
	max-width: none;
	max-height: none;
	transform: scale( 1.8 );
}

/* Slider-style transition between photos, driven by gallery-modal.js's
 * showIndex(): the outgoing photo slides/fades toward the direction being
 * navigated away from, then the incoming photo slides/fades in from the
 * opposite side. */
.wpem-gallery-modal-main img.wpem-slide-out-left {
	transform: translateX( -40px );
	opacity: 0;
}

.wpem-gallery-modal-main img.wpem-slide-out-right {
	transform: translateX( 40px );
	opacity: 0;
}

.wpem-gallery-modal-main img.wpem-slide-in-left {
	transform: translateX( -40px );
	opacity: 0;
}

.wpem-gallery-modal-main img.wpem-slide-in-right {
	transform: translateX( 40px );
	opacity: 0;
}

.wpem-gallery-modal-main img.wpem-slide-no-transition {
	transition: none;
}

.wpem-gallery-modal-caption {
	color: #fff;
	margin-top: 10px;
	font-size: 15px;
	text-align: center;
}

.wpem-gallery-modal-counter {
	color: rgba( 255, 255, 255, 0.6 );
	font-size: 13px;
	margin-top: 4px;
}

.wpem-gallery-modal-toast {
	position: absolute;
	bottom: -36px;
	left: 50%;
	transform: translateX( -50% );
	background: rgba( 0, 0, 0, 0.75 );
	color: #fff;
	font-size: 13px;
	padding: 6px 14px;
	border-radius: 20px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.wpem-gallery-modal-toast.is-visible {
	opacity: 1;
}

/* Plain icon toolbar, top-right — no button chrome (background/border),
 * matching a minimal native-app style lightbox rather than a set of pill
 * buttons floating over the photo. */
.wpem-gallery-modal-toolbar {
	position: absolute;
	top: 20px;
	right: 24px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 18px;
}

.wpem-gallery-modal-toolbar button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	/* !important throughout: these icons have no background to fall back on
	 * (unlike the earlier circular buttons), so a theme's `button { color:
	 * ...; background: ...; }` rule can make them fully invisible instead of
	 * just low-contrast. */
	background: none !important;
	border: none !important;
	color: #fff !important;
	cursor: pointer;
}

.wpem-gallery-modal-toolbar svg {
	width: 20px;
	height: 20px;
	/* Inline SVG presentation attributes (stroke="currentColor" in the markup)
	 * have lower priority than *any* CSS rule targeting the same property —
	 * even without !important — so a theme-wide `svg { stroke: ...; fill:
	 * ...; }` reset would silently win and could make the icon invisible or
	 * the wrong color. Re-declaring it here in CSS, with !important, ensures
	 * our declaration is the one that wins instead. */
	stroke: currentColor !important;
	fill: none !important;
}

.wpem-gallery-modal-toolbar button:hover,
.wpem-gallery-modal-zoom.is-active {
	opacity: 0.7;
}

/* Small semi-transparent circular buttons that straddle the image's own
 * left/right edge (half overlapping the photo, half in the empty space
 * beside it) rather than floating at the viewport edge. !important on
 * color/background for the same reason as the toolbar buttons above: with
 * a background this light, a theme's `button { color: ...; background:
 * ...; }` rule could otherwise wash it out or hide it entirely. */
.wpem-gallery-modal-prev,
.wpem-gallery-modal-next {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.55 ) !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.25 );
	color: #1e1e1e !important;
	cursor: pointer;
}

.wpem-gallery-modal-prev svg,
.wpem-gallery-modal-next svg {
	width: 18px;
	height: 18px;
	stroke-width: 2.5;
	/* See the matching comment on .wpem-gallery-modal-toolbar svg above —
	 * re-declares the inline stroke="currentColor" attribute in CSS so a
	 * theme-wide svg reset can't silently override it. */
	stroke: currentColor !important;
	fill: none !important;
}

.wpem-gallery-modal-prev:hover,
.wpem-gallery-modal-next:hover {
	background: rgba( 255, 255, 255, 0.85 ) !important;
}

.wpem-gallery-modal-prev {
	left: 0;
	transform: translate( -50%, -50% );
}

.wpem-gallery-modal-next {
	right: 0;
	transform: translate( 50%, -50% );
}

.wpem-gallery-modal-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 20px;
	max-width: 90vw;
	overflow-x: auto;
	padding-bottom: 4px;
}

.wpem-gallery-modal-thumb {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	opacity: 0.6;
}

.wpem-gallery-modal-thumb.is-active {
	border-color: var( --wpem-accent, #4f46e5 );
	opacity: 1;
}

.wpem-gallery-modal-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Archive page (the auto-generated /events/ URL) ---------- */
.wpem-archive-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 20px;
}

.wpem-archive-title {
	text-align: center;
	margin-bottom: 24px;
}

/* ==========================================================================
   Mobile responsiveness
   ========================================================================== */
@media (max-width: 782px) {
	.wpem-calendar-wrap,
	.wpem-list-wrap,
	.wpem-agenda-wrap,
	.wpem-gallery-wrap {
		margin: 20px auto;
		padding: 16px;
		border-radius: 8px;
	}

	.wpem-archive-wrap {
		padding: 20px 12px;
	}

	/* FullCalendar's own toolbar (prev/next/today, title, view-switch buttons)
	 * doesn't wrap on its own and will overflow a narrow viewport — stack its
	 * three sections instead of forcing them onto one row. */
	.wpem-calendar .fc-toolbar {
		flex-direction: column;
		align-items: stretch !important;
		gap: 10px;
	}

	.wpem-calendar .fc-toolbar-chunk {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 6px;
	}

	.wpem-calendar .fc-toolbar-title {
		font-size: 17px;
		text-align: center;
	}

	.wpem-calendar .fc-button {
		padding: 5px 10px;
		font-size: 13px;
	}

	.wpem-calendar-topbar {
		flex-direction: column;
		align-items: stretch;
	}

	.wpem-view-toggle {
		justify-content: center;
	}

	.wpem-calendar-filters,
	.wpem-list-filters,
	.wpem-agenda-filters {
		flex-direction: column;
	}

	.wpem-calendar-filters select,
	.wpem-list-filters select,
	.wpem-agenda-filters select {
		width: 100%;
		min-width: 0;
	}

	.wpem-list-tabs {
		flex-wrap: wrap;
	}

	.wpem-list-tabs .wpem-tab {
		flex: 1 1 auto;
		text-align: center;
	}

	.wpem-agenda-toolbar {
		flex-wrap: wrap;
	}

	.wpem-agenda-nav {
		flex-wrap: wrap;
		width: 100%;
	}

	.wpem-agenda-filter {
		flex: 1 1 auto;
	}

	.wpem-agenda-row {
		gap: 10px;
	}

	.wpem-agenda-date {
		flex-basis: 42px;
		padding-right: 10px;
	}

	.wpem-agenda-day {
		font-size: 21px;
	}

	.wpem-agenda-title {
		font-size: 17px;
	}

	/* Shrink instead of hiding — the flyer stays visible on mobile, just
	 * smaller, so it fits alongside the date block and text. */
	.wpem-agenda-thumb {
		flex-basis: 56px;
		width: 56px;
		height: 56px;
	}

	.wpem-list-grid,
	.wpem-gallery-grid-list {
		grid-template-columns: 1fr;
	}

	.wpem-single-wrap {
		padding: 12px;
	}

	.wpem-single-title {
		font-size: 22px;
	}

	/* The gallery modal's thumbnail strip and nav arrows are sized for a
	 * pointer/desktop layout — bump to the standard 44px minimum touch-target
	 * size for mobile. left/right stay at 0 (inherited from the base rule) so
	 * the translate()-based edge-straddle centering still works at any size. */
	.wpem-gallery-modal-prev,
	.wpem-gallery-modal-next {
		width: 44px;
		height: 44px;
	}

	.wpem-gallery-modal-prev svg,
	.wpem-gallery-modal-next svg {
		width: 20px;
		height: 20px;
	}

	.wpem-gallery-modal-toolbar {
		top: 12px;
		right: 12px;
		gap: 14px;
	}

	.wpem-gallery-modal-thumb {
		width: 44px;
		height: 44px;
	}
}