.bgm-events-page,
.bgm-event-single {
	/* Event templates use readable local aliases backed by the shared design system. */
	--bgm-color-paper: var(--bgm-color-bg);
	--bgm-color-ink: var(--bgm-color-text);
	--bgm-color-muted: var(--bgm-color-text-muted);
	--bgm-color-sea: var(--bgm-color-primary);
	--bgm-color-gold: var(--bgm-color-accent);
	--bgm-radius-medium: var(--bgm-radius-md);
	--bgm-radius-large: var(--bgm-radius-lg);
	background: var(--bgm-color-paper);
	color: var(--bgm-color-ink);
}

.bgm-events-page *,
.bgm-event-single * {
	box-sizing: border-box;
}

.bgm-shell {
	width: min(var(--bgm-container), calc(100% - (2 * var(--bgm-gutter))));
	margin-inline: auto;
}

.bgm-events-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(6.5rem, 10vw, 9rem);
	background:
		radial-gradient(circle at 88% 18%, rgba(217, 232, 221, 0.72), transparent 31rem),
		linear-gradient(135deg, #f5f7f0 0%, var(--bgm-color-success-soft) 100%);
}

.bgm-events-hero::after {
	position: absolute;
	top: -11rem;
	right: -7rem;
	width: 34rem;
	height: 34rem;
	border: var(--bgm-border-width) solid rgba(26, 102, 89, 0.11);
	border-radius: var(--bgm-radius-round);
	content: "";
}

.bgm-events-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
	gap: clamp(2.5rem, 7vw, 7rem);
	align-items: end;
}

.bgm-events-kicker,
.bgm-event-eyebrow {
	margin: 0 0 1rem;
	color: var(--bgm-color-sea);
	font-family: var(--bgm-font-sans);
	font-size: var(--bgm-text-xs);
	font-weight: var(--bgm-weight-extrabold);
	letter-spacing: var(--bgm-tracking-eyebrow);
	text-transform: uppercase;
}

.bgm-events-hero h1,
.bgm-event-related h2 {
	margin: 0;
	font-family: var(--bgm-font-display);
	font-weight: var(--bgm-weight-semibold);
	letter-spacing: var(--bgm-tracking-card);
	line-height: var(--bgm-leading-section);
}

.bgm-events-hero h1 {
	/* font-size dropped (desktop only): premium-system.css's hero !important
	   rule wins here; its <=767px override drops !important, so the mobile
	   font-size below stays in effect and must not be touched. */
	max-width: 100%;
}

.bgm-events-hero__lead {
	max-width: 35rem;
	margin: 2rem 0 0;
	color: var(--bgm-color-muted);
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	line-height: var(--bgm-leading-body);
}

.bgm-events-hero__note {
	padding: clamp(2rem, 4vw, 3rem);
	border: var(--bgm-border-width) solid rgba(21, 63, 52, 0.1);
	border-radius: var(--bgm-radius-large);
	background: rgba(255, 255, 255, 0.88);
	box-shadow: var(--bgm-shadow-soft);
	backdrop-filter: blur(12px);
}

.bgm-events-hero__note strong {
	display: block;
	max-width: 100%;
	margin-bottom: var(--bgm-space-5);
	font-family: var(--bgm-font-display);
	font-size: var(--bgm-text-section);
	font-weight: var(--bgm-weight-semibold);
	letter-spacing: var(--bgm-tracking-card);
	line-height: var(--bgm-leading-card);
}

.bgm-events-hero__note ol {
	display: grid;
	gap: var(--bgm-space-3);
	margin: 0;
	padding: 1.4rem 0 0;
	border-top: var(--bgm-border-width) solid rgba(21, 63, 52, 0.1);
	list-style: none;
	counter-reset: event-step;
}

.bgm-events-hero__note li {
	display: flex;
	gap: var(--bgm-space-4);
	color: var(--bgm-color-muted);
	font-weight: var(--bgm-weight-semibold);
	counter-increment: event-step;
}

.bgm-events-hero__note li::before {
	color: var(--bgm-color-gold);
	font-weight: var(--bgm-weight-extrabold);
	content: "0" counter(event-step);
}

.bgm-events-discovery {
	position: relative;
	z-index: 2;
	margin-top: -3.5rem;
	padding-bottom: clamp(4.5rem, 8vw, 8rem);
}

.bgm-events-filter {
	padding: clamp(1.1rem, 2vw, 1.6rem);
	border: var(--bgm-border-width) solid rgba(21, 63, 52, 0.11);
	border-radius: var(--bgm-radius-large);
	background: rgba(255, 255, 255, 0.97);
	box-shadow: var(--bgm-shadow-soft);
}

.bgm-events-filter__search {
	position: relative;
	margin-bottom: var(--bgm-space-4);
}

.bgm-events-filter__search svg {
	position: absolute;
	top: 50%;
	left: 1.1rem;
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	transform: translateY(-50%);
}

.bgm-events-filter input[type="search"] {
	width: 100%;
	min-height: 3.7rem;
	padding: 0.8rem 1rem 0.8rem 3.25rem;
	border: var(--bgm-border-width) solid rgba(21, 63, 52, 0.14);
	border-radius: var(--bgm-radius-medium);
	background: var(--bgm-color-surface);
	font: inherit;
}

.bgm-events-filter__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bgm-space-3);
}

/*
 * The 4 filter cells render via the shared .bgm-filter-trigger /
 * .bgm-filter-dialog component (assets/css/filter-dialog.css) instead of a
 * native <select> — only the eyebrow label above each trigger stays
 * event-owned, so its colour keeps matching this page's --bgm-color-muted
 * rather than the shared component's own (slightly lighter) token.
 */
.bgm-events-filter__grid .bgm-filter-trigger > span {
	color: var(--bgm-color-muted);
}

.bgm-events-sort label {
	display: grid;
	gap: var(--bgm-space-2);
	color: var(--bgm-color-muted);
	font-size: var(--bgm-text-2xs);
	font-weight: var(--bgm-weight-extrabold);
	letter-spacing: var(--bgm-tracking-eyebrow);
	text-transform: uppercase;
}

.bgm-events-sort select {
	min-height: 3.15rem;
	padding: 0 2.7rem 0 1rem;
	border: var(--bgm-border-width) solid rgba(21, 63, 52, 0.14);
	border-radius: var(--bgm-radius-medium);
	background: var(--bgm-color-surface);
	color: var(--bgm-color-ink);
	font-family: var(--bgm-font-sans);
	font-size: var(--bgm-text-sm);
	font-weight: var(--bgm-weight-semibold);
}

.bgm-events-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bgm-space-2);
	margin: calc(var(--bgm-space-4) * -1) 0 var(--bgm-space-5);
}

.bgm-events-active-filters a {
	display: inline-flex;
	gap: var(--bgm-space-2);
	align-items: center;
	padding: 0.6rem 0.85rem;
	border: var(--bgm-border-width) solid rgba(21, 63, 52, 0.16);
	border-radius: var(--bgm-radius-pill);
	background: var(--bgm-color-surface);
	color: var(--bgm-color-ink);
	font-size: var(--bgm-text-xs);
	font-weight: var(--bgm-weight-bold);
	text-decoration: none;
}

.bgm-events-active-filters a span {
	color: var(--bgm-color-sea);
	font-size: var(--bgm-text-base);
	line-height: 0.8;
}

.bgm-events-active-filters a.is-clear-all {
	color: var(--bgm-color-muted);
	background: transparent;
	border-color: transparent;
}

.bgm-events-filter__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--bgm-space-3);
	align-items: center;
	margin-top: var(--bgm-space-4);
	padding-top: var(--bgm-space-4);
	border-top: var(--bgm-border-width) solid rgba(21, 63, 52, 0.09);
}

.bgm-events-filter__actions a,
.bgm-events-filter__actions button {
	display: inline-flex;
	min-height: 2.85rem;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1.2rem;
	border: 0;
	border-radius: var(--bgm-radius-pill);
	font: 750 0.86rem/1 var(--bgm-font-sans);
	text-decoration: none;
	cursor: pointer;
}

.bgm-events-filter__actions a {
	color: var(--bgm-color-muted);
	background: transparent;
}

.bgm-events-filter__actions button {
	color: var(--bgm-color-surface);
	background: var(--bgm-color-sea);
}

.bgm-events-results__header {
	display: flex;
	justify-content: space-between;
	gap: var(--bgm-space-8);
	align-items: end;
	margin: clamp(4.5rem, 8vw, 7rem) 0 2rem;
}

.bgm-events-results__header h2 {
	margin: 0;
	font-family: var(--bgm-font-display);
	font-size: clamp(3rem, 5vw, 5rem);
	font-weight: var(--bgm-weight-semibold);
	letter-spacing: var(--bgm-tracking-card);
	line-height: var(--bgm-leading-section);
}

.bgm-events-results__count {
	margin: 0 0 0.65rem;
	color: var(--bgm-color-gold);
	font-size: var(--bgm-text-xs);
	font-weight: var(--bgm-weight-extrabold);
	letter-spacing: var(--bgm-tracking-eyebrow);
	text-transform: uppercase;
}

.bgm-events-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

.bgm-event-card {
	display: grid;
	grid-template-columns: minmax(15rem, 0.92fr) minmax(0, 1.08fr);
	min-width: 0;
	overflow: hidden;
	border: var(--bgm-border-width) solid rgba(21, 63, 52, 0.08);
	border-radius: var(--bgm-radius-xl);
	background: #fffefb;
	box-shadow: var(--bgm-shadow-card);
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.bgm-event-card:hover {
	border-color: rgba(21, 63, 52, 0.16);
	box-shadow: var(--bgm-shadow-lift);
	transform: translateY(-4px);
}

.bgm-event-card--featured {
	grid-column: 1 / -1;
	grid-template-columns: minmax(18rem, 0.86fr) minmax(0, 1.14fr);
	padding: var(--bgm-space-3);
	border-color: rgba(177, 128, 42, 0.18);
	background:
		radial-gradient(circle at 92% 12%, rgba(244, 199, 91, 0.12), transparent 16rem),
		linear-gradient(135deg, var(--bgm-color-surface) 0%, var(--bgm-color-success-soft) 100%);
}

/* aspect-ratio (not a fixed height) keeps every card's row a predictable
   size regardless of the uploaded flyer's own proportions — without it a
   tall poster image drags the whole row (and the short text column beside
   it) down into a huge dead gap; see the mobile breakpoint below, which
   already used this fix and is now the pattern the desktop layout follows. */
.bgm-event-card__media {
	position: relative;
	display: block;
	min-width: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: calc(var(--bgm-radius-xl) - 0.5rem);
	background: var(--bgm-color-success-soft);
}

.bgm-event-card--featured .bgm-event-card__media {
	aspect-ratio: 4 / 3;
}

.bgm-event-card__media img,
.bgm-event-related-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bgm-event-card__media img,
.bgm-event-related-card__media img {
	transition: transform 500ms cubic-bezier(0.2, 0.65, 0.3, 1);
}

.bgm-event-card:hover .bgm-event-card__media img,
.bgm-event-related-card:hover .bgm-event-related-card__media img {
	transform: scale(1.035);
}

.bgm-event-card__placeholder,
.bgm-event-related-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 70% 24%, rgba(255, 205, 103, 0.42), transparent 24%),
		linear-gradient(145deg, #dbe8df, #b9ced0);
}

.bgm-event-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--bgm-space-3);
	padding: clamp(1.75rem, 3vw, 2.75rem);
}

.bgm-event-card__topline,
.bgm-event-related-card__date {
	display: flex;
	justify-content: space-between;
	gap: var(--bgm-space-4);
	align-items: center;
}

.bgm-event-card__status {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.9rem;
	border-radius: var(--bgm-radius-pill);
	background: var(--bgm-color-accent-soft);
	color: var(--bgm-color-accent-text-on-soft);
	font-size: var(--bgm-text-2xs);
	font-weight: var(--bgm-weight-extrabold);
	letter-spacing: var(--bgm-tracking-eyebrow);
	text-transform: uppercase;
}

/* Absolute chip over the image, not inline flow: it used to sit in normal
   flow right after the <img>, which pushed it below the media box and left
   it clipped to a sliver by the media's own overflow:hidden. */
.bgm-event-date {
	position: absolute;
	z-index: 2;
	top: 1rem;
	left: 1rem;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	min-width: 3.2rem;
	padding: 0.55rem 0.6rem;
	border-radius: var(--bgm-radius-md);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 0.5rem 1.1rem rgba(22, 32, 29, 0.14);
	color: var(--bgm-color-gold);
	line-height: 1;
	backdrop-filter: blur(6px);
}

.bgm-event-date.is-ongoing {
	color: var(--bgm-color-sea);
}

.bgm-event-date strong {
	font-family: var(--bgm-font-display);
	font-size: 1.3rem;
	font-weight: var(--bgm-weight-bold);
	line-height: 1;
}

.bgm-event-date small {
	font-size: 0.6rem;
	font-weight: var(--bgm-weight-extrabold);
	letter-spacing: var(--bgm-tracking-eyebrow);
	text-transform: uppercase;
}

.bgm-event-card__save,
.bgm-event-related-card__save,
.bgm-event-save-button {
	display: inline-grid;
	width: 2.85rem;
	height: 2.85rem;
	flex: 0 0 auto;
	place-items: center;
	padding: 0;
	border: var(--bgm-border-width) solid rgba(21, 63, 52, 0.15);
	border-radius: var(--bgm-radius-pill);
	background: rgba(255, 255, 255, 0.9);
	color: var(--bgm-color-ink);
	transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.bgm-event-card__save svg,
.bgm-event-related-card__save svg,
.bgm-event-save-button svg {
	width: 1.1rem;
	height: 1.1rem;
}

.bgm-event-card__save:hover,
.bgm-event-related-card__save:hover,
.bgm-event-save-button:hover {
	border-color: var(--bgm-color-sea);
	color: var(--bgm-color-sea);
}

.bgm-event-card__save.is-saved,
.bgm-event-related-card__save.is-saved,
.bgm-event-save-button.is-saved {
	border-color: var(--bgm-color-sea);
	background: var(--bgm-color-sea);
	color: var(--bgm-color-surface);
}

.bgm-event-card h3 {
	margin: 0;
	font-family: var(--bgm-font-display);
	font-size: clamp(2.1rem, 3.4vw, 3.2rem);
	font-weight: var(--bgm-weight-semibold);
	letter-spacing: var(--bgm-tracking-card);
	line-height: var(--bgm-leading-section);
	text-wrap: balance;
}

.bgm-event-card--featured h3 {
	max-width: 17ch;
}

.bgm-event-card:not(.bgm-event-card--featured) h3 {
	font-size: clamp(1.65rem, 2.1vw, 2.15rem);
}

.bgm-event-card h3 a,
.bgm-event-related-card h3 a {
	color: inherit;
	text-decoration: none;
}

.bgm-event-card__summary {
	margin: 0;
	color: var(--bgm-color-muted);
	font-size: var(--bgm-text-sm);
	line-height: var(--bgm-leading-body);
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.bgm-event-card__meta {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding-top: var(--bgm-space-4);
	border-top: var(--bgm-border-width) solid rgba(21, 63, 52, 0.08);
	color: var(--bgm-color-muted);
	font-size: var(--bgm-text-nav);
	font-weight: var(--bgm-weight-semibold);
}

.bgm-event-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

.bgm-event-card__meta svg {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	fill: none;
	stroke: var(--bgm-color-gold);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bgm-event-card__link {
	display: inline-flex;
	width: fit-content;
	gap: var(--bgm-space-2);
	align-items: center;
	margin: 0;
	padding-bottom: 0.15rem;
	border-bottom: var(--bgm-border-width) solid transparent;
	color: var(--bgm-color-ink);
	font-size: var(--bgm-text-nav);
	font-weight: var(--bgm-weight-extrabold);
	text-decoration: none;
	transition: color 180ms ease, border-color 180ms ease;
}

.bgm-event-card__link span {
	transition: transform 180ms ease;
}

.bgm-event-card:hover .bgm-event-card__link {
	border-color: currentColor;
	color: var(--bgm-color-sea);
}

.bgm-event-card:hover .bgm-event-card__link span {
	transform: translateX(0.25rem);
}

.bgm-events-pagination {
	margin-top: var(--bgm-space-12);
}

.bgm-events-pagination .nav-links {
	display: flex;
	gap: var(--bgm-space-2);
	justify-content: center;
}

.bgm-events-pagination a,
.bgm-events-pagination span {
	display: grid;
	min-width: 2.75rem;
	min-height: 2.75rem;
	place-items: center;
	border: var(--bgm-border-width) solid rgba(21, 63, 52, 0.13);
	border-radius: var(--bgm-radius-pill);
	color: var(--bgm-color-ink);
	text-decoration: none;
}

.bgm-events-pagination .current {
	color: var(--bgm-color-surface);
	background: var(--bgm-color-sea);
}

.bgm-events-empty {
	max-width: 45rem;
	margin: 1rem auto 0;
	padding: clamp(3rem, 7vw, 6rem);
	border: var(--bgm-border-width) solid rgba(21, 63, 52, 0.12);
	border-radius: var(--bgm-radius-large);
	text-align: center;
	background: var(--bgm-color-surface);
}

.bgm-events-empty__icon {
	display: grid;
	width: 4.25rem;
	height: 4.25rem;
	margin: 0 auto 1.5rem;
	place-items: center;
	border-radius: var(--bgm-radius-round);
	color: var(--bgm-color-sea);
	background: #edf5ed;
}

.bgm-events-empty h2 {
	margin: 0;
	font-family: var(--bgm-font-display);
	font-size: clamp(2.2rem, 4vw, 4rem);
	font-weight: var(--bgm-weight-semibold);
	letter-spacing: var(--bgm-tracking-card);
}

.bgm-events-empty p {
	color: var(--bgm-color-muted);
}

.bgm-events-empty a {
	display: inline-flex;
	min-height: 3rem;
	align-items: center;
	margin-top: var(--bgm-space-4);
	padding: 0 1.4rem;
	border-radius: var(--bgm-radius-pill);
	color: var(--bgm-color-surface);
	background: var(--bgm-color-sea);
	font-weight: var(--bgm-weight-bold);
	text-decoration: none;
}

.bgm-event-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bgm-space-2);
	align-items: center;
	margin-top: var(--bgm-space-6);
}

.bgm-event-button,
.bgm-event-share__toggle {
	display: inline-flex;
	min-height: 3.2rem;
	align-items: center;
	justify-content: center;
	gap: var(--bgm-space-2);
	padding: 0 1.2rem;
	border: var(--bgm-border-width) solid rgba(21, 63, 52, 0.14);
	border-radius: var(--bgm-radius-pill);
	color: var(--bgm-color-ink);
	background: rgba(255, 255, 255, 0.58);
	font-size: var(--bgm-text-sm);
	font-weight: var(--bgm-weight-extrabold);
	text-decoration: none;
}

.bgm-event-button--primary {
	border-color: var(--bgm-color-sea);
	color: var(--bgm-color-surface);
	background: var(--bgm-color-sea);
}

.bgm-event-button--primary:hover,
.bgm-event-button--primary:focus-visible {
	/* Override the global link hover colour so the label stays legible on the sea surface. */
	color: var(--bgm-color-surface);
	background: var(--bgm-color-sea);
}

.bgm-event-share {
	position: relative;
}

.bgm-event-share__toggle {
	width: 3.2rem;
	padding: 0;
	cursor: pointer;
	backdrop-filter: blur(14px);
	transition:
		border-color 180ms ease,
		background-color 180ms ease,
		color 180ms ease;
}

.bgm-event-share__toggle svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

.bgm-event-share__toggle:hover,
.bgm-event-share__toggle[aria-expanded="true"] {
	border-color: rgba(26, 102, 89, 0.26);
	color: var(--bgm-color-sea);
	background: var(--bgm-color-surface);
}

.bgm-event-share__menu {
	position: absolute;
	z-index: 12;
	top: calc(100% + 0.75rem);
	left: 0;
	display: grid;
	width: 13.5rem;
	max-width: calc(100vw - 2rem);
	padding: var(--bgm-space-2);
	border: var(--bgm-border-width) solid var(--bgm-color-border);
	border-radius: var(--bgm-radius-card-sm);
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 1.15rem 3rem rgba(24, 43, 39, 0.16);
}

.bgm-event-share__menu[hidden] {
	display: none;
}

.bgm-event-share__menu .bgm-event-share__item {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	min-height: 2.85rem;
	gap: var(--bgm-space-3);
	align-items: center;
	width: 100%;
	padding: 0.35rem 0.7rem;
	border: 0;
	border-radius: var(--bgm-radius-control-lg);
	color: var(--bgm-color-ink);
	background: transparent;
	font: 750 var(--bgm-text-xs)/1.2 var(--bgm-font-sans);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition:
		color 180ms ease,
		background-color 180ms ease;
}

.bgm-event-share__menu .bgm-event-share__item:hover,
.bgm-event-share__menu .bgm-event-share__item:focus-visible {
	color: var(--bgm-color-sea);
	outline: none;
}

.bgm-event-share__menu .bgm-event-share__item:hover {
	background: #f2f7f2;
}

.bgm-event-share__menu .bgm-event-share__item:focus-visible .bgm-event-share__icon {
	box-shadow: 0 0 0 2px rgba(26, 102, 89, 0.28);
}

.bgm-event-share__item--whatsapp {
	color: var(--bgm-color-sea);
}

.bgm-event-share__icon {
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--bgm-radius-round);
	color: var(--bgm-color-sea);
	background: #f2f5f0;
}

.bgm-event-share__icon svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

.bgm-event-share__icon svg path[fill="none"],
.bgm-event-share__item:last-child .bgm-event-share__icon svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

@media (prefers-reduced-motion: reduce) {
	.bgm-event-share__toggle,
	.bgm-event-share__menu .bgm-event-share__item {
		transition: none;
	}
}

.bgm-event-related {
	padding: clamp(5rem, 9vw, 9rem) 0;
}

.bgm-event-related h2 {
	max-width: 9ch;
	font-size: clamp(3rem, 5.5vw, 5.4rem);
}

.bgm-event-story__content {
	color: #0b2638;
	font-size: clamp(1rem, 1.3vw, 1.16rem);
	line-height: var(--bgm-leading-body);
}

/* Permanent editorial detail styling, migrated from Yellow Pencil. */
.bgm-event-story__content h2 {
	max-width: 660px;
	font-size: 42px !important;
	font-weight: var(--bgm-weight-bold);
	color: #0b2638;
}

.bgm-event-story__content > :first-child {
	margin-top: 0;
}

.bgm-event-story__content a {
	color: var(--bgm-color-sea);
}

/* Description / location / tags / countdown / calendar / gallery */
.bgm-event-detail {
	padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.bgm-event-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(17rem, 1fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
}

.bgm-event-detail__main {
	display: grid;
	gap: clamp(2.5rem, 5vw, 3.5rem);
	min-width: 0;
}

/*
 * Was .bgm-event-breadcrumb (dark chip, built for sitting over the hero
 * photo) — this one sits on the page's own cream background instead now, so
 * it goes back to plain text, wrapping instead of ellipsis-truncating since
 * there's no fixed-width chip to protect it from a long title anymore.
 */
.bgm-event-detail__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bgm-space-2);
	align-items: center;
	color: var(--bgm-color-text-soft);
	font-size: var(--bgm-text-sm);
}

.bgm-event-detail__breadcrumb a {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	color: var(--bgm-color-text-muted);
	text-decoration: none;
}

.bgm-event-detail__breadcrumb a:hover,
.bgm-event-detail__breadcrumb a:focus-visible {
	color: var(--bgm-color-accent);
}

/*
 * The title block: breadcrumb, eyebrow, title, photo, summary, actions and
 * location, formerly the full-bleed scrim hero above this grid, now the
 * grid's own first item — so it needs its own tight internal spacing
 * instead of .bgm-event-detail__main's ~3rem inter-block gap (fine between
 * "Nereye Gidiyoruz" and the tags list, far too loose between a breadcrumb
 * and the title right under it).
 */
.bgm-event-detail__intro > * + * {
	margin-top: var(--bgm-space-4);
}

.bgm-event-detail__intro > .bgm-event-detail__actions {
	margin-top: var(--bgm-space-6);
}

/*
 * Layout only: colour/weight/size for the title (#bgm-event-title) and the
 * eyebrow (.bgm-event-eyebrow) already come from their own shared,
 * id/class-based rules elsewhere (premium-system.css, event.css) — those
 * apply here unchanged since the id and class carry over from the old hero
 * markup verbatim. max-width used to come from premium-system.css's
 * `.bgm-event-hero h1{max-width:16ch}`, scoped to the hero this title no
 * longer lives in, so it needs its own here.
 */
.bgm-event-detail__title {
	max-width: 40ch;
	margin: 0;
	overflow-wrap: anywhere;
}

/*
 * Explicit margin-top rather than 0 + relying on .bgm-event-detail__intro's
 * own > * + * rule: both rules share the same specificity, so whichever is
 * declared later in the file would otherwise win the tie — margin:0 here
 * pressed the photo straight up against the title's own descenders with no
 * visible gap.
 */
.bgm-event-detail__media {
	margin: var(--bgm-space-5) 0 0;
}

.bgm-event-detail__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--bgm-radius-lg);
	object-fit: cover;
	box-shadow: var(--bgm-shadow-soft);
}

/*
 * Was .bgm-event-hero__summary (on-media colour, illegible against this
 * page's cream background now that it sits in the flow instead of over the
 * photo) — same type scale, page-text colour instead.
 */
.bgm-event-detail__summary {
	max-width: 42rem;
	margin: 0;
	color: var(--bgm-color-text-muted);
	font-size: var(--bgm-text-lg);
	line-height: var(--bgm-leading-body);
}

.bgm-event-detail__block h2 {
	margin: 0 0 var(--bgm-space-4);
	font-family: var(--bgm-font-display);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: var(--bgm-weight-semibold);
	letter-spacing: var(--bgm-tracking-card);
}

.bgm-event-tags__list,
.bgm-event-categories__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bgm-space-2) var(--bgm-space-3);
}

.bgm-event-tags__list span {
	display: inline-flex;
	align-items: center;
	gap: var(--bgm-space-2);
	padding: 0.55rem 0.9rem;
	border-radius: var(--bgm-radius-pill);
	background: var(--bgm-color-success-soft);
	color: var(--bgm-color-ink);
	font-size: var(--bgm-text-sm);
	font-weight: var(--bgm-weight-semibold);
}

.bgm-event-tags__list svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: var(--bgm-color-sea);
	stroke-width: 1.8;
}

.bgm-event-categories__list a {
	display: inline-flex;
	padding: 0.55rem 0.9rem;
	border: var(--bgm-border-width) solid rgba(21, 63, 52, 0.16);
	border-radius: var(--bgm-radius-pill);
	color: var(--bgm-color-ink);
	font-size: var(--bgm-text-sm);
	font-weight: var(--bgm-weight-semibold);
	text-decoration: none;
	transition: border-color 160ms ease, color 160ms ease;
}

.bgm-event-categories__list a:hover,
.bgm-event-categories__list a:focus-visible {
	border-color: var(--bgm-color-sea);
	color: var(--bgm-color-sea);
}

.bgm-event-detail__sidebar {
	position: sticky;
	top: var(--bgm-space-8);
	display: grid;
	gap: var(--bgm-space-5);
	min-width: 0;
}

.bgm-event-countdown {
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--bgm-radius-large);
	background: var(--bgm-color-primary);
	color: var(--bgm-color-on-primary);
}

.bgm-event-countdown__label {
	margin: 0 0 var(--bgm-space-4);
	font-size: var(--bgm-text-xs);
	font-weight: var(--bgm-weight-extrabold);
	letter-spacing: var(--bgm-tracking-eyebrow);
	text-transform: uppercase;
	opacity: 0.82;
}

.bgm-event-countdown__figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bgm-space-3);
	text-align: center;
}

.bgm-event-countdown__figures div {
	padding: var(--bgm-space-3) var(--bgm-space-2);
	border-radius: var(--bgm-radius-md);
	background: rgb(var(--bgm-white-rgb) / 0.12);
}

.bgm-event-countdown__figures strong {
	display: block;
	font-family: var(--bgm-font-display);
	font-size: var(--bgm-text-xl);
	font-weight: var(--bgm-weight-bold);
	font-variant-numeric: tabular-nums;
}

.bgm-event-countdown__figures span {
	display: block;
	margin-top: var(--bgm-space-1);
	font-size: var(--bgm-text-2xs);
	font-weight: var(--bgm-weight-semibold);
	letter-spacing: var(--bgm-tracking-eyebrow);
	text-transform: uppercase;
	opacity: 0.78;
}

/* Border/radius/background/shadow come from premium-system.css's shared
   :where() card-token rule, which every other card-like component here
   also relies on instead of redeclaring the same values locally. */
.bgm-event-sidebar-card {
	padding: clamp(1.35rem, 2.5vw, 1.75rem);
}

.bgm-event-sidebar-card h3 {
	margin: 0 0 var(--bgm-space-3);
	font-family: var(--bgm-font-display);
	font-size: var(--bgm-text-base);
	font-weight: var(--bgm-weight-semibold);
}

.bgm-event-sidebar-card p {
	margin: 0;
	color: var(--bgm-color-ink);
}

.bgm-event-sidebar-organizer__eyebrow {
	display: block;
	margin: 0 0 var(--bgm-space-3);
	color: var(--bgm-color-accent);
	font-size: var(--bgm-text-xs);
	font-weight: var(--bgm-weight-extrabold);
	letter-spacing: var(--bgm-tracking-eyebrow);
	text-transform: uppercase;
}

.bgm-event-sidebar-organizer__identity {
	display: flex;
	align-items: center;
	gap: var(--bgm-space-3);
}

.bgm-event-sidebar-organizer__avatar {
	display: grid;
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	place-items: center;
	border-radius: var(--bgm-radius-round);
	background: linear-gradient(135deg, var(--bgm-color-primary), var(--bgm-color-accent));
	box-shadow: 0 0.5rem 1.1rem rgb(var(--bgm-navy-rgb) / 0.28);
	color: var(--bgm-color-on-primary);
	font-family: var(--bgm-font-display);
	font-size: var(--bgm-text-base);
	font-weight: var(--bgm-weight-bold);
}

.bgm-event-sidebar-organizer__name {
	margin: 0;
	font-family: var(--bgm-font-display);
	font-size: var(--bgm-text-lg);
	font-weight: var(--bgm-weight-semibold);
	line-height: var(--bgm-leading-card);
}

.bgm-event-sidebar-date__end {
	margin-top: var(--bgm-space-1) !important;
	color: var(--bgm-color-muted) !important;
	font-size: var(--bgm-text-sm);
}

/* Same icon-badge language as the (now-removed) Katılım fact in the strip
   above the fold — carried over so the card reads as a continuation of that
   idea, not a new one — paired with an eyebrow + display-weight status so
   "Kayıt gerekli" reads as a headline, not a plain dt/dd line. */
.bgm-event-sidebar-participation__header {
	display: flex;
	align-items: center;
	gap: var(--bgm-space-3);
}

.bgm-event-sidebar-participation__icon {
	display: grid;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border: var(--bgm-border-width) solid rgba(177, 128, 42, 0.32);
	border-radius: var(--bgm-radius-round);
	color: var(--bgm-color-gold);
}

.bgm-event-sidebar-participation__icon svg {
	width: 1.3rem;
	height: 1.3rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.bgm-event-sidebar-participation__eyebrow {
	margin: 0 0 0.2rem;
	color: var(--bgm-color-gold);
	font-size: var(--bgm-text-2xs);
	font-weight: var(--bgm-weight-extrabold);
	letter-spacing: var(--bgm-tracking-eyebrow);
	text-transform: uppercase;
}

.bgm-event-sidebar-participation__status {
	display: block;
	font-family: var(--bgm-font-display);
	font-size: var(--bgm-text-lg);
	font-weight: var(--bgm-weight-semibold);
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.bgm-event-sidebar-participation__note {
	margin: var(--bgm-space-3) 0 0 !important;
	color: var(--bgm-color-muted) !important;
	font-size: var(--bgm-text-sm);
	line-height: var(--bgm-leading-body);
}

/* premium-system.css's shared :where(…, .bgm-event-button, …) reset fills
   every .bgm-event-button navy with !important, so .bgm-event-button--primary's
   own (non-important) --bgm-color-sea never actually shows outside the hero
   overlay — same trap the overlay's own comment above already explains, just
   scoped here instead of there. This CTA needs to outrank it on its own: the
   gold accent it now claims (this card's icon and eyebrow already carry that
   colour) is what makes it read as the one thing to do here, not one pill
   among equals with the calendar links in the card below. */
.bgm-event-sidebar-participation__cta {
	width: 100%;
	min-height: 2.85rem;
	margin-top: var(--bgm-space-4);
	border-color: var(--bgm-color-accent) !important;
	background: var(--bgm-color-accent) !important;
	color: var(--bgm-color-on-primary) !important;
}

.bgm-event-sidebar-participation__cta:hover,
.bgm-event-sidebar-participation__cta:focus-visible {
	border-color: var(--bgm-color-accent-hover) !important;
	background: var(--bgm-color-accent-hover) !important;
	color: var(--bgm-color-on-primary) !important;
}

/* Labeled variant of the shared icon-only .bgm-save-button (home.css) — this
   card needs a full-width text+icon button, so specificity is matched with
   `button.` to win the tie against home.css's !important colors. */
button.bgm-event-sidebar-save__button {
	display: flex;
	width: 100%;
	height: auto;
	min-height: 2.85rem;
	padding: var(--bgm-button-padding);
	border: var(--bgm-border-width) solid var(--bgm-color-sea);
	border-radius: var(--bgm-button-radius);
	background-color: transparent !important;
	background-image: none !important;
	color: var(--bgm-color-sea) !important;
	font-family: var(--bgm-font-body);
	font-size: var(--bgm-button-font-size);
	font-weight: var(--bgm-button-font-weight);
	gap: var(--bgm-space-2);
	align-items: center;
	justify-content: center;
}
button.bgm-event-sidebar-save__button:hover,
button.bgm-event-sidebar-save__button:focus-visible,
button.bgm-event-sidebar-save__button.is-saved {
	background-color: var(--bgm-color-sea) !important;
	background-image: none !important;
	color: var(--bgm-color-surface) !important;
}
.bgm-event-sidebar-save__button svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}
.bgm-event-sidebar-save__button.is-saved svg { fill: currentColor; }

.bgm-event-sidebar-date__actions {
	display: grid;
	gap: var(--bgm-space-2);
	margin-top: var(--bgm-space-4);
}

.bgm-event-sidebar-date__actions .bgm-event-button {
	width: 100%;
	min-height: 2.85rem;
}

/* "Takvimime Ekle" gets positive discrimination here: same pill shape as the
   Google/iCalendar links beside it, but coloured and hovered like the
   primary ticket CTA — it's BGM's own feature, not a hand-off to an
   external calendar app, and this is the one place both live side by side. */
.bgm-event-sidebar-date__actions .bgm-calendar-action {
	width: 100%;
}

.bgm-event-sidebar-date__actions .bgm-calendar-button {
	width: 100%;
	min-height: 2.85rem;
	border-color: var(--bgm-color-accent);
	border-radius: var(--bgm-button-radius);
	color: var(--bgm-color-on-primary);
	background: var(--bgm-color-accent);
}

.bgm-event-sidebar-date__actions .bgm-calendar-action .bgm-calendar-button:hover,
.bgm-event-sidebar-date__actions .bgm-calendar-button[aria-pressed="true"],
.bgm-event-sidebar-date__actions .bgm-calendar-button[aria-pressed="true"]:hover {
	border-color: var(--bgm-color-accent-hover);
	color: var(--bgm-color-on-primary);
	background: var(--bgm-color-accent-hover);
}

.bgm-event-sidebar-map .bgm-event-sidebar-map__canvas {
	position: relative;
	aspect-ratio: 4 / 3;
	width: 100%;
	overflow: hidden;
	border-radius: var(--bgm-radius-md);
	background: color-mix(in srgb, var(--bgm-color-primary) 6%, var(--bgm-color-surface));
}

/* Mapbox paints its own canvas once the JS/token are loaded; until then (or
   if a visitor has no JS) this reads as a quiet placeholder, not a broken box. */
.bgm-event-sidebar-map__canvas .mapboxgl-canvas-container {
	border-radius: inherit;
}

/* Geocoding a typed venue name takes a moment before the map paints —
   a quiet pulse says "working on it" instead of a static empty box. */
.bgm-event-sidebar-map__canvas.is-locating {
	animation: bgm-event-map-locating 1.6s ease-in-out infinite;
}

@keyframes bgm-event-map-locating {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
	.bgm-event-sidebar-map__canvas.is-locating {
		animation: none;
	}
}

.bgm-event-sidebar-map__canvas .mapboxgl-ctrl-group {
	border-radius: var(--bgm-radius-control-lg);
	box-shadow: var(--bgm-shadow-soft);
	overflow: hidden;
}

.bgm-event-sidebar-map__canvas .mapboxgl-ctrl-top-right,
.bgm-event-sidebar-map__canvas .mapboxgl-ctrl-bottom-right {
	margin: var(--bgm-space-2);
}

.bgm-event-map-marker {
	display: grid;
	width: 2.5rem;
	height: 2.5rem;
	place-items: center;
	border-radius: var(--bgm-radius-round);
	background: var(--bgm-color-primary);
	color: var(--bgm-color-on-primary);
	box-shadow: 0 0 0 4px rgb(var(--bgm-white-rgb) / 0.92), 0 0.5rem 1.25rem rgb(var(--bgm-navy-rgb) / 0.32);
}

.bgm-event-map-marker svg {
	width: 1.2rem;
	height: 1.2rem;
	fill: currentColor;
}

.bgm-event-sidebar-map__address {
	margin: var(--bgm-space-3) 0 0;
	color: var(--bgm-color-text-muted);
	font-size: var(--bgm-text-sm);
}

.bgm-event-sidebar-map__cta {
	margin-top: var(--bgm-space-3);
	width: 100%;
}

.bgm-event-sidebar-gallery__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bgm-space-3);
	margin-bottom: var(--bgm-space-3);
}

.bgm-event-sidebar-gallery__header h3 {
	margin-bottom: 0;
}

.bgm-event-sidebar-gallery__status {
	color: var(--bgm-color-text-muted);
	font-size: var(--bgm-text-2xs);
	font-weight: var(--bgm-weight-extrabold);
	letter-spacing: var(--bgm-tracking-eyebrow);
	white-space: nowrap;
}

.bgm-event-sidebar-gallery__nav button {
	inline-size: 2.05rem;
	block-size: 1.6rem;
}

.bgm-event-sidebar-gallery__grid {
	display: grid;
	gap: var(--bgm-space-2);
}

/* Static grid only applies with 3 images or fewer — the carousel variant
   (.bgm-loop-carousel-track, from home.css) owns its own column tracks. */
.bgm-event-sidebar-gallery__grid:not(.bgm-loop-carousel-track) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 4+ images swap the static grid for the shared loop-carousel: still three
   images per view, but scrollable/draggable instead of wrapping to a row. */
.bgm-event-sidebar-gallery.bgm-loop-carousel {
	--bgm-carousel-visible: 3;
	--bgm-carousel-gap: var(--bgm-space-2);
}

/* The corner radius/clip lives on this wrapper, never on the <img> itself —
   an element that's both scaled (transform) and rounded (border-radius) can
   render its corners squared-off mid-transition in Chromium. Clipping a
   *static* box around a scaling child sidesteps that entirely, and it also
   gives the lightbox trigger a full-bleed hit target. */
.bgm-event-sidebar-gallery__thumb {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--bgm-radius-md);
	box-shadow: var(--bgm-shadow-soft);
	cursor: zoom-in;
	transition: box-shadow var(--bgm-duration-normal) var(--bgm-ease-out);
}

.bgm-event-sidebar-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--bgm-duration-normal) var(--bgm-ease-out);
}

.bgm-event-sidebar-gallery__thumb:hover,
.bgm-event-sidebar-gallery__thumb:focus-visible {
	box-shadow: var(--bgm-shadow-lift);
}

.bgm-event-sidebar-gallery__thumb:hover img,
.bgm-event-sidebar-gallery__thumb:focus-visible img {
	transform: scale(1.06);
}

/* Response principle: feedback starts on press, not on release. */
.bgm-event-sidebar-gallery__thumb:active img {
	transform: scale(0.97);
	transition-duration: var(--bgm-duration-fast);
}

.bgm-event-sidebar-gallery__thumb:focus-visible {
	outline: var(--bgm-border-width-strong) solid color-mix(in srgb, var(--bgm-color-primary) 44%, white);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.bgm-event-sidebar-gallery__thumb img {
		transition: none;
	}

	.bgm-event-sidebar-gallery__thumb:hover img,
	.bgm-event-sidebar-gallery__thumb:focus-visible img,
	.bgm-event-sidebar-gallery__thumb:active img {
		transform: none;
	}
}

/* Full-screen image viewer, opened by clicking a thumbnail above. */
.bgm-event-lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
	opacity: 0;
	transform: scale(0.96);
	transition:
		opacity var(--bgm-duration-slow) var(--bgm-ease-out),
		transform var(--bgm-duration-slow) var(--bgm-ease-out),
		overlay var(--bgm-duration-slow) allow-discrete,
		display var(--bgm-duration-slow) allow-discrete;
}

.bgm-event-lightbox[open] {
	opacity: 1;
	transform: scale(1);
}

@starting-style {
	.bgm-event-lightbox[open] {
		opacity: 0;
		transform: scale(0.96);
	}
}

.bgm-event-lightbox.is-fallback-open {
	position: fixed;
	z-index: 10000;
	inset: 0;
	display: block;
	opacity: 1;
	transform: none;
	background: rgba(6, 17, 13, .94);
}

.bgm-event-lightbox::backdrop {
	background: rgba(6, 17, 13, .9);
	backdrop-filter: blur(14px);
	opacity: 0;
	transition: opacity var(--bgm-duration-slow) var(--bgm-ease-out), overlay var(--bgm-duration-slow) allow-discrete, display var(--bgm-duration-slow) allow-discrete;
}

.bgm-event-lightbox[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.bgm-event-lightbox[open]::backdrop {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bgm-event-lightbox {
		transform: none;
		transition: opacity var(--bgm-duration-normal) ease, overlay var(--bgm-duration-normal) allow-discrete, display var(--bgm-duration-normal) allow-discrete;
	}

	@starting-style {
		.bgm-event-lightbox[open] {
			opacity: 0;
		}
	}
}

.bgm-event-lightbox-shell {
	position: relative;
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	padding: 2rem 5rem;
}

.bgm-event-lightbox-media {
	position: relative;
	display: grid;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	place-items: center;
}

.bgm-event-lightbox-media img {
	display: block;
	width: auto;
	max-width: calc(100vw - 10rem);
	height: auto;
	max-height: calc(100vh - 4rem);
	border-radius: var(--bgm-radius-card-sm);
	box-shadow: 0 2rem 6rem rgb(var(--bgm-navy-rgb) / 0.4);
	object-fit: contain;
}

.bgm-event-lightbox-close,
.bgm-event-lightbox-previous,
.bgm-event-lightbox-next {
	position: absolute;
	z-index: 2;
	display: grid;
	width: 3rem;
	height: 3rem;
	padding: 0;
	place-items: center;
	border: var(--bgm-border-width) solid rgba(255, 255, 255, .3);
	border-radius: var(--bgm-radius-pill);
	background: rgba(255, 255, 255, .94);
	color: #17342b;
	box-shadow: 0 .8rem 2.4rem rgb(var(--bgm-navy-rgb) / 0.24);
	cursor: pointer;
	transition: transform var(--bgm-duration-fast) var(--bgm-ease-out);
}

.bgm-event-lightbox-close:active,
.bgm-event-lightbox-previous:not(:disabled):active,
.bgm-event-lightbox-next:not(:disabled):active {
	transform: scale(0.92);
}

.bgm-event-lightbox-close { top: 1.4rem; right: 1.4rem; }
.bgm-event-lightbox-previous { top: 50%; left: 1.4rem; transform: translateY(-50%); }
.bgm-event-lightbox-next { top: 50%; right: 1.4rem; transform: translateY(-50%); }

.bgm-event-lightbox-previous:active:not(:disabled) { transform: translateY(-50%) scale(0.92); }
.bgm-event-lightbox-next:active:not(:disabled) { transform: translateY(-50%) scale(0.92); }

.bgm-event-lightbox-close:disabled,
.bgm-event-lightbox-previous:disabled,
.bgm-event-lightbox-next:disabled {
	opacity: .3;
	cursor: default;
}

.bgm-event-lightbox-close svg,
.bgm-event-lightbox-previous svg,
.bgm-event-lightbox-next svg {
	width: 1.2rem;
	height: 1.2rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.bgm-event-lightbox-counter {
	position: absolute;
	right: .8rem;
	bottom: .8rem;
	padding: .5rem .75rem;
	border-radius: var(--bgm-radius-control-lg);
	background: rgba(255, 255, 255, .94);
	color: var(--bgm-color-text-muted);
	font-size: var(--bgm-text-xs);
	font-weight: var(--bgm-weight-bold);
	box-shadow: 0 .4rem 1.2rem rgb(var(--bgm-navy-rgb) / 0.16);
}

.bgm-event-lightbox-counter b {
	color: var(--bgm-color-success);
	font-weight: var(--bgm-weight-extrabold);
}

@media (max-width: 640px) {
	.bgm-event-lightbox-shell {
		padding: 1rem;
	}

	.bgm-event-lightbox-media img {
		max-width: calc(100vw - 2rem);
		max-height: calc(100vh - 6rem);
	}

	.bgm-event-lightbox-close,
	.bgm-event-lightbox-previous,
	.bgm-event-lightbox-next {
		width: 2.5rem;
		height: 2.5rem;
	}

	.bgm-event-lightbox-close { top: .75rem; right: .75rem; }
	.bgm-event-lightbox-previous { left: .5rem; }
	.bgm-event-lightbox-next { right: .5rem; }
}

@media (max-width: 900px) {
	.bgm-event-detail__grid {
		grid-template-columns: 1fr;
	}

	.bgm-event-detail__sidebar {
		position: static;
	}
}

.bgm-event-related {
	border-top: var(--bgm-border-width) solid rgba(21, 63, 52, 0.09);
}

.bgm-event-related__header {
	display: flex;
	justify-content: space-between;
	gap: var(--bgm-space-8);
	align-items: end;
	margin-bottom: var(--bgm-space-8);
}

.bgm-event-related__header a {
	color: var(--bgm-color-gold);
	font-size: var(--bgm-text-nav);
	font-weight: var(--bgm-weight-extrabold);
	text-decoration: none;
}

.bgm-event-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bgm-space-5);
}

.bgm-event-related-card {
	overflow: hidden;
	border: var(--bgm-border-width) solid rgba(21, 63, 52, 0.11);
	border-radius: var(--bgm-radius-large);
	background: var(--bgm-color-surface);
}

.bgm-event-related-card__media {
	display: block;
	height: 15rem;
	overflow: hidden;
	background: var(--bgm-color-success-soft);
}

.bgm-event-related-card__body {
	padding: var(--bgm-space-5);
}

.bgm-event-related-card__date span {
	color: var(--bgm-color-gold);
	font-size: var(--bgm-text-xs);
	font-weight: var(--bgm-weight-extrabold);
	letter-spacing: var(--bgm-tracking-eyebrow);
	text-transform: uppercase;
}

.bgm-event-related-card h3 {
	margin: 1.1rem 0 0.5rem;
	font-family: var(--bgm-font-display);
	font-size: var(--bgm-text-card);
	font-weight: var(--bgm-weight-semibold);
	letter-spacing: var(--bgm-tracking-card);
	line-height: var(--bgm-leading-card);
}

.bgm-event-related-card p {
	margin: 0;
	color: var(--bgm-color-muted);
	font-size: var(--bgm-text-nav);
}

.bgm-events-page :focus-visible,
.bgm-event-single :focus-visible {
	outline: 3px solid rgba(26, 102, 89, 0.34);
	outline-offset: 3px;
}

@media (max-width: 1100px) {
	/* Several shared, !important hero-title rules compete here (including
	   body:not(.home) h1, which is specific enough to beat a plain class
	   selector even with !important of its own) — floors at var(--bgm-text-hero),
	   3.125rem+ from here down to 320px, too loud for a title now sitting as
	   plain flow copy in the left column. The desktop-only 53px rule
	   (body.single-bgm_event #bgm-event-title, in premium-system.css) only
	   applies above 1101px, so this id-selector override — an id always
	   outranks the class-based competitors — is what wins below it. */
	#bgm-event-title {
		font-size: clamp(1.75rem, 4.5vw, 2.75rem) !important;
	}

	.bgm-events-filter__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bgm-event-card {
		grid-template-columns: 1fr;
	}

	.bgm-event-card__media {
		aspect-ratio: 16 / 9;
	}

	.bgm-event-card--featured {
		grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.1fr);
	}

	.bgm-event-card--featured .bgm-event-card__media {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 900px) {
	.bgm-events-hero__inner {
		grid-template-columns: 1fr;
	}

	.bgm-events-hero {
		padding-top: 4rem;
	}

	.bgm-events-hero h1 {
		max-width: 100%;
	}

	.bgm-events-hero__note {
		max-width: 35rem;
	}

	.bgm-event-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.bgm-shell {
		width: min(var(--bgm-container), calc(100% - 2rem));
	}

	.bgm-event-breadcrumb > span:last-child {
		max-width: 12ch;
	}

	.bgm-events-hero {
		padding: 3.5rem 0 6.5rem;
	}

	.bgm-events-hero h1 {
		font-size: clamp(3.8rem, 18vw, 5.7rem);
	}

	.bgm-events-discovery {
		margin-top: -2.5rem;
	}

	.bgm-events-filter__grid {
		grid-template-columns: 1fr 1fr;
	}

	.bgm-events-results__header,
	.bgm-event-related__header {
		align-items: flex-start;
		flex-direction: column;
	}

	.bgm-events-grid {
		grid-template-columns: 1fr;
	}

	.bgm-event-card--featured {
		grid-column: auto;
		grid-template-columns: 1fr;
		padding: var(--bgm-space-2);
	}

	.bgm-event-card__media,
	.bgm-event-card--featured .bgm-event-card__media {
		aspect-ratio: 16 / 10;
	}

	.bgm-event-card h3,
	.bgm-event-card:not(.bgm-event-card--featured) h3 {
		font-size: clamp(2rem, 9vw, 2.7rem);
	}

	.bgm-event-card--featured .bgm-event-card__summary {
		-webkit-line-clamp: 2;
	}

	/* Several shared, !important hero-title rules compete here (including
	   body:not(.home) h1, which is specific enough to beat a plain class
	   selector even with !important of its own) — floors at var(--bgm-text-hero),
	   3.125rem even on a 375px screen, too loud for flow copy at this width.
	   #bgm-event-title matches this template's own established override
	   technique (see premium-system.css's desktop-only rule for the same id)
	   — an id always outranks those competitors. */
	#bgm-event-title {
		font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
	}

	.bgm-event-related__grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.bgm-event-related-card {
		min-width: min(82vw, 21rem);
		scroll-snap-align: start;
	}
}

@media (max-width: 520px) {
	.bgm-events-filter__grid {
		grid-template-columns: 1fr;
	}

	.bgm-events-filter__actions {
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.bgm-event-hero__actions {
		gap: var(--bgm-space-2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bgm-event-card,
	.bgm-event-card__media img,
	.bgm-event-related-card__media img {
		transition: none;
	}
}