/**
 * Events Map
 *
 * Two panels side by side, each with its own border and radius, in a fixed
 * height. Only the list scrolls — the map is pinned by construction rather
 * than by sticky positioning, which is why nothing here depends on the
 * scroll behaviour of an ancestor. Salient puts overflow: hidden on
 * wrappers around page content, and that breaks position: sticky; this
 * layout never asks for it.
 *
 * Every colour and size comes from a custom property set per instance in
 * the shortcode's inline style block.
 */

.cl-emap {
	position: relative;
	padding: var(--cl-emap-pad, 20px);
	background: var(--cl-emap-page, rgba(229, 227, 217, 0.16));
	color: var(--cl-emap-ink, #061E21);
	font-size: 16px;
	line-height: 1.5;

	/* Derived rather than settings of their own: a tint of the text colour
	   works on any panel background, which two more colour pickers would
	   not. */
	--cl-emap-fill: rgba(15, 35, 33, 0.055);
	--cl-emap-fill-hover: rgba(15, 35, 33, 0.1);
	--cl-emap-lift: 0 1px 2px rgba(15, 35, 33, 0.04), 0 10px 28px rgba(15, 35, 33, 0.07);
	--cl-emap-lift-card: 0 6px 20px rgba(15, 35, 33, 0.09);

	/* The element is the card in the design: one rounded, tinted container
	   holding the filter row and both panels. It already had the fill and
	   the padding, but no radius — so against a white page it read as a
	   full-width band with the filters floating above the panels rather
	   than as a card with the filters inside it. */
	border-radius: var(--cl-emap-card-radius, 12px);
}

.cl-emap *,
.cl-emap *::before,
.cl-emap *::after {
	box-sizing: border-box;
}

/* Salient puts padding-bottom on paragraphs, which is where the count's
   extra 20-odd pixels of height came from — it was padding, not leading.
   Margins are set per element below, so only padding is reset here. */
.cl-emap p { padding: 0 !important; }

.cl-emap__shell {
	display: grid;
	grid-template-columns: var(--cl-emap-list-width, 50%) 1fr;
	gap: var(--cl-emap-gap, 25px);
	height: var(--cl-emap-height, calc(100vh - 40px));
}

/* Removing the gap alone would leave both panels independently rounded
   on all four corners, so they'd visibly touch at a seam rather than
   reading as one shape — squaring off the two touching inner corners
   (list's right side, map's left side) is what actually makes it read
   as a single panel with a flat shared edge down the middle. */
.cl-emap--merged .cl-emap__list-panel {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.cl-emap--merged .cl-emap__map-panel {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* No border: the panel reads as an object on the page because the page is
   darker than it is, which is a stronger signal than a hairline. */
.cl-emap__panel {
	border: 0;
	border-radius: var(--cl-emap-radius, 12px);
	background: var(--cl-emap-surface, #FEFDFD);
	/* What actually makes the radius clip the map tiles and the list. */
	overflow: hidden;
}

/* min-height: 0 on the column AND on the scroller. Without it a grid child
   refuses to shrink below its content, so the list pushes the panel past
   its height and the whole page scrolls instead of the list. */
/* One row on desktop: the trigger row above it is display: none there and
   generates no box, so the scroller is the only child. The stacked
   breakpoint restores a two-row template where the trigger row appears. */
.cl-emap__list-panel {
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	min-height: 0;
}

/* The space the filter bar left behind carries the count and the request —
   the two quietest things here, in the quietest place. */


/* Same size and same line box as the count opposite it, so the two ends of
   the row sit on one line rather than each finding its own. */

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
/* One radius for every button and field here: the "Action button radius"
   setting, 8px by default — the same as the site's own buttons. They had
   drifted to 4, 6, 7, 9, 10 and 12px. Surfaces (cards, panels, the dialog)
   and pills keep their own shapes. */
.cl-emap .cl-emap__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px !important;
	border: 1px solid transparent !important;
	border-radius: var(--cl-emap-btn-radius, 8px) !important;
	background: var(--cl-emap-accent, #C91228) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	white-space: nowrap;
	box-shadow: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cl-emap .cl-emap__btn:hover { filter: brightness(0.92); }

.cl-emap .cl-emap__btn--ghost {
	background: var(--cl-emap-fill) !important;
	border-color: transparent !important;
	color: var(--cl-emap-ink, #061E21) !important;
}

.cl-emap .cl-emap__btn--ghost:hover {
	filter: none;
	background: var(--cl-emap-fill-hover) !important;
}

.cl-emap .cl-emap__btn--sm { gap: 7px; padding: 8px 13px !important; font-size: 14px !important; }

.cl-emap__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--cl-emap-accent, #C91228);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.cl-emap__link[hidden] { display: none; }

/* Icons in the Solar "linear" idiom — 24px box, 1.5 stroke, round caps and
   joins, no fill — so they sit at the weight of the type, not over it. */
.cl-emap__i {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.cl-emap__i--sm { width: 15px; height: 15px; }
.cl-emap__i--muted { color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7)); }

/* ---------------------------------------------------------------
   Filter bar
   --------------------------------------------------------------- */
/**
 * Fixed while the section is on screen, then docked to the section's own
 * bottom edge so it can never travel down into the footer.
 *
 * Neither position alone works. Fixed on its own outlives the section and
 * ends up over the footer, which is what happened first. Absolute on its own
 * cannot follow the viewport at all. So script.js swaps between the two at
 * the point where a fixed bar would cross the section's bottom edge — the
 * standard fixed-until-boundary handover, and the reason both rules below
 * share every property except position and bottom.
 *
 * The transform carries the centring AND the fade-up, so the two have to be
 * written together — a separate translateY would replace the centring and
 * throw the bar to the left.
 */
/**
 * A plain row in normal flow above the shell. This was a floating glass
 * pill that faded with scroll and hid its filters behind a "Filters"
 * toggle; that mode is gone, so its fixed positioning, fade classes, blur
 * and collapse have gone with it. The .cl-emap__bar-content wrapper stays
 * in the markup, because the mobile drawer still uses it at the stacked
 * breakpoint.
 */
.cl-emap__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Wrapping is for the horizontal row only. The stacked breakpoint turns
	   this same element into a full-height column drawer, and wrap on a
	   height-constrained COLUMN spills the overflow into a second column
	   to the right rather than scrolling — which is exactly what broke the
	   drawer and pushed content off the side of the page. The drawer rules
	   set nowrap for that reason. */
	flex-wrap: wrap;
	width: 100%;
	padding-bottom: 20px;
}



/* Permanently open — the same technique the stacked breakpoint uses
   to force this content open inside the drawer. */
.cl-emap__bar-content {
	max-width: none !important;
	overflow: visible !important;
}


/**
 * A live blur over a scrolling list is one of the most expensive things
 * you can ask an iOS GPU to do, and it has to be recomputed for every
 * frame the list moves. On touch devices the bar becomes a solid panel
 * instead — visually near-identical at this opacity, and it costs nothing.
 */






/* Starts at true zero width — a separate flex item from the toggle
   button above, rather than one shared collapsing width across both,
   so the toggle's own size can never be misjudged and leave a sliver
   of this content peeking out from underneath it.
   overflow is forced visible (see the rule above): the filter dropdown
   panels are absolutely positioned and extend outside this box, so
   overflow: hidden would clip them entirely. */
.cl-emap__bar-content {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	max-width: 0;
	transition: max-width 0.28s ease;
}



@media (prefers-reduced-motion: reduce) {
	.cl-emap__bar-content { transition: none; }
}

/* ---------------------------------------------------------------
   Drawer chrome. All of it is hidden above the stacking breakpoint;
   the per-instance rules in the shortcode switch it on, since the
   breakpoint is a setting and cannot live in this static file.
   --------------------------------------------------------------- */
/* Sits inside the list panel as its first row, so it needs the panel's own
   horizontal padding rather than the page's. */
.cl-emap__triggers {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 12px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--cl-emap-line, rgba(6, 30, 33, 0.16));
}

/* The count is the one thing here that can give: the Filters button and
   the List/Map tabs both have to stay whole. */
.cl-emap__triggers .cl-emap__count--stacked {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

.cl-emap__trigger {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 16px;
	border: 1px solid var(--cl-emap-line, rgba(6, 30, 33, 0.16));
	border-radius: var(--cl-emap-btn-radius, 8px);
	background: var(--cl-emap-solid, #FEFDFD);
	color: var(--cl-emap-ink, #061E21);
	font-size: 15.5px;
	cursor: pointer;
}

.cl-emap__trigger-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--cl-emap-accent, #C91228);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
}

.cl-emap__trigger-count[hidden] { display: none; }

.cl-emap__scrim {
	/* Only exists at the stacked breakpoint — switched on by the
	   per-instance rule, since the breakpoint is a setting. */
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1001;
	background: rgba(15, 35, 33, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.28s ease;
}

.cl-emap.is-drawer-open .cl-emap__scrim { opacity: 1; pointer-events: auto; }

.cl-emap__drawer-head,
.cl-emap__drawer-foot { display: none; }

.cl-emap__drawer-head {
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cl-emap-line, rgba(6, 30, 33, 0.16));
}

.cl-emap .cl-emap__drawer-head .cl-emap__drawer-title { margin: 0 !important; font-size: 19px !important; line-height: 1.2 !important; }

.cl-emap__drawer-foot {
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--cl-emap-line, rgba(6, 30, 33, 0.16));
}

.cl-emap__drawer-foot .cl-emap__btn { flex: 1 1 0; justify-content: center; }

.cl-emap__tabs--inline { display: none; }

/* Mobile only — switched on by the per-instance stacked rules. Sits at the
   end of the list, after the last card and above the fade. */
.cl-emap__ask-foot {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
	padding: 14px 16px;
	border: 0;
	border-radius: var(--cl-emap-btn-radius, 8px);
	background: var(--cl-emap-fill);
	color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7));
	font-size: 14.5px;
	cursor: pointer;
}

.cl-emap__ask-foot:hover { color: var(--cl-emap-accent, #C91228); }

/* Only earns its place once there is something on the other side of it,
   which is when the view tabs appear. */
.cl-emap__bar-rule {
	display: none;
	align-self: stretch;
	width: 1px;
	margin: 2px 4px;
	background: var(--cl-emap-line, rgba(6, 30, 33, 0.16));
}

.cl-emap__drop { position: relative; }

/* Filter buttons and the search box are one control visually: same fill,
   same 1px hairline, same 6px radius, same ink. The border colour is the
   "Line" setting, whose default is #061E21 at 16% alpha — the 29 in
   #061E2129. */
/* Filter buttons and the search box are one control visually: same fill,
   same 1px hairline, same 6px radius, same ink, and — via line-height —
   the same height. The border colour is the "Line" setting, whose default
   is #061E21 at 16% alpha, the 29 in #061E2129.

   font-family: inherit matters more than it looks. A <button> does NOT
   inherit the page font: without this it falls back to the browser's own
   UI face and the filter row is the one part of the element not set in
   the site's typeface. */
/* Filter buttons and the search box are one control visually: same fill,
   same 1px hairline, same 6px radius, same ink, and — via line-height —
   the same height.

   Scoped through .cl-emap and set to solid #fff rather than the Surface
   setting: Salient styles bare <button> elements, and a single-class rule
   loses to it. White here is the control's own colour, not a tint of the
   panel behind it.

   font-family: inherit matters more than it looks. A <button> does NOT
   inherit the page font: without this the filter row is the one part of
   the element not set in the site's typeface. */
.cl-emap .cl-emap__fbtn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 14px;
	border: 1px solid var(--cl-emap-line, rgba(6, 30, 33, 0.16));
	border-radius: var(--cl-emap-btn-radius, 8px);
	background: #fff;
	color: var(--cl-emap-ink, #061E21);
	font-family: inherit;
	font-size: 15.5px;
	line-height: 1.4;
	/* The row wraps, which means its items can be asked to shrink — and a
	   shrunk button breaks "Event type" across two lines. These keep each
	   control whole and let the row wrap instead. */
	flex: 0 0 auto;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.cl-emap__fbtn:hover { border-color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7)); }

/* Open is marked by the border and the chevron, not by inverting the
   button. It used to fill with the ink colour and flip its text to the
   surface colour, which made the one field you were using the darkest
   thing in a row of white ones. */
/* Open is marked by the border and the chevron, not by inverting the
   button — which made the one field you were using the darkest thing in a
   row of white ones. The fill stays white. */
.cl-emap .cl-emap__fbtn[aria-expanded="true"] {
	border-color: var(--cl-emap-ink, #061E21);
	background: #fff;
}

.cl-emap__chev {
	width: 6.5px;
	height: 6.5px;
	margin-left: 1px;
	border-right: 1.4px solid currentColor;
	border-bottom: 1.4px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 0.18s ease;
}

/* Points up when open, matching a panel that now drops down. */
.cl-emap__fbtn[aria-expanded="true"] .cl-emap__chev { transform: rotate(225deg) translate(-2px, -2px); }


/* Solid white, not the Surface setting: the panel floats over the list and
   the map, so it needs to be opaque and its own colour rather than a tint
   that could end up matching whatever it is covering. */
.cl-emap__panel-drop {
	position: absolute;
	z-index: 40;
	/* Downward. These opened upward when the bar was a pill floating at
	   the bottom of the viewport; the bar is a row at the top of the
	   element now, so upward would open them over the page heading. */
	top: calc(100% + 10px);
	left: 0;
	/* A flat 288px, not min(288px, 100%): the percentage resolves against
	   .cl-emap__drop, which is only as wide as the button that opens it,
	   so the panel shrank to the button's width. The stacked breakpoint
	   overrides this with width: 100%; min-width: 0 for the drawer, which
	   is the only place the cap was ever needed. */
	min-width: 288px;
	max-height: 320px;
	overflow-y: auto;
	padding: 8px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(15, 35, 33, 0.13);
}

.cl-emap__panel-drop[hidden] { display: none; }

.cl-emap__drop--end .cl-emap__panel-drop { left: auto; right: 0; }

.cl-emap__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 16px;
	cursor: pointer;
}

.cl-emap__row:hover { background: var(--cl-emap-tint, #FAF9F7); }

.cl-emap__row-label { display: flex; align-items: center; gap: 12px; }

.cl-emap__dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }

.cl-emap .cl-emap__tick,
.cl-emap .cl-emap__radio {
	flex: 0 0 auto;
	width: 21px !important;
	height: 21px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7)) !important;
	background: var(--cl-emap-solid, #FEFDFD) !important;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.cl-emap .cl-emap__tick { border-radius: 6px !important; }
.cl-emap .cl-emap__radio { border-radius: 50% !important; }

.cl-emap .cl-emap__tick:checked,
.cl-emap .cl-emap__radio:checked {
	border-color: var(--cl-emap-accent, #C91228) !important;
	background: var(--cl-emap-accent, #C91228) !important;
}

.cl-emap .cl-emap__tick:checked::after {
	content: "";
	display: block;
	width: 5px;
	height: 9px;
	margin: 3px auto 0;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.cl-emap .cl-emap__radio:checked::after {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	margin: 6px auto;
	border-radius: 50%;
	background: #fff;
}

/* Matches .cl-emap__fbtn. Wider because it holds typed text, but a fixed
   width: the design has it ending well before the count at the right. */
.cl-emap__search {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Shrinkable, unlike the buttons: if the row runs out of room the
	   search box is the right thing to give, and it stays usable narrow. */
	flex: 0 1 260px;
	min-width: 140px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--cl-emap-line, rgba(6, 30, 33, 0.16));
	border-radius: var(--cl-emap-btn-radius, 8px);
	background: #fff;
	transition: border-color 0.15s ease;
}

.cl-emap__search:hover,
.cl-emap__search:focus-within { border-color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7)); }

.cl-emap .cl-emap__search input {
	width: 100%;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--cl-emap-ink, #061E21);
	/* Inputs don't inherit the page font either. */
	font-family: inherit !important;
	font-size: 15.5px !important;
	line-height: 1.4 !important;
}

.cl-emap .cl-emap__search input:focus { outline: none; box-shadow: none !important; }

/* Same ink as typed text, per the design, rather than the muted tone a
   placeholder usually takes. */
.cl-emap .cl-emap__search input::placeholder {
	color: var(--cl-emap-ink, #061E21);
	opacity: 1;
}

.cl-emap__tabs { display: none; gap: 6px; }

/* ---------------------------------------------------------------
   List
   --------------------------------------------------------------- */
.cl-emap__listwrap { position: relative; min-height: 0; }

/* Pushed to the right-hand end of the filter row. auto margin rather
   than justify-content on the bar, which would spread the filters apart
   from each other too. */
/* Only one of the two count copies is ever shown: the filter row's own at
   wide widths, the trigger row's once the filter row has become a drawer.
   The swap itself is in the per-instance stacked media query, since the
   breakpoint is a setting. margin-left is reset because the trigger row
   already spaces its children. */
.cl-emap__count--stacked {
	display: none;
	margin-left: 0;
}

.cl-emap__count {
	margin: 0 0 0 auto;
	color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7));
	font-size: 15px;
	line-height: 1.4;
	white-space: nowrap;
}

/* Shown only at the stacked breakpoint, by a per-instance rule (the
   breakpoint is a setting, so it cannot live in this static file). */
.cl-emap__compact {
	display: none;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 0;
	border-radius: 999px;
	background: var(--cl-emap-fill);
	color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7));
	font-size: 13px;
	cursor: pointer;
}

.cl-emap__compact[aria-pressed="false"] {
	background: var(--cl-emap-ink, #061E21);
	color: var(--cl-emap-surface, #FEFDFD);
}

.cl-emap__scroller {
	height: 100%;
	overflow-y: auto;
	padding: 0;
	scrollbar-width: thin;
}

.cl-emap__scroller::-webkit-scrollbar { width: 8px; }
.cl-emap__scroller::-webkit-scrollbar-thumb { background: var(--cl-emap-line, rgba(6, 30, 33, 0.16)); border-radius: 8px; }

.cl-emap__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--cl-emap-fade, 96px);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--cl-emap-surface, #FEFDFD) 72%);
	pointer-events: none;
}

.cl-emap__list { display: grid; gap: 12px; }

/* Bordered rather than filled — the newer design separates cards with a
   hairline border on a page that's close to white throughout, rather than
   a tonal fill difference. Card background defaults to the same value as
   Surface (see the card_bg field's own description), so the border is
   what's actually doing the separating. */
/* No pointer cursor: the card is not a control any more. Its links are.
   The border stays put through every state — hover and selection are the
   shadow's job, so nothing shifts or recolours under the reader. */
.cl-emap__card {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 18px;
	padding: 26px;
	border: 1px solid var(--cl-emap-line, rgba(6, 30, 33, 0.16));
	border-radius: 8px;
	background: var(--cl-emap-card, #FEFDFD);
	transition: box-shadow 0.15s ease;
}

.cl-emap__card[hidden] { display: none; }

/* A card background that matches Surface by default can't signal hover
   with a fill change, so a lift shadow plus a darkened border carry it
   instead. */
.cl-emap__card:hover {
	box-shadow: var(--cl-emap-lift-card);
}

/* Selected by a pin, not by a click. A lift rather than a coloured
   outline — enough to find the card the pin pointed at without the list
   suddenly gaining a hard red edge. */
.cl-emap__card.is-selected {
	box-shadow: var(--cl-emap-lift-card);
}

/* Past events go the other way — softer border, no lift on hover. */
.cl-emap__card.is-past {
	background: transparent;
	border-color: var(--cl-emap-line, rgba(6, 30, 33, 0.16));
	box-shadow: none;
}

.cl-emap__card.is-past:hover {
	border-color: var(--cl-emap-ink, #061E21);
	box-shadow: none;
}

.cl-emap__card.is-past .cl-emap__title { color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7)); }
.cl-emap__card.is-past .cl-emap__chip { background: var(--cl-emap-card, #FEFDFD); box-shadow: none; }

/* A tint-filled square rather than a shadowed white one — sits quietly
   against the bordered card instead of competing with it for attention. */
.cl-emap__chip {
	display: grid;
	align-content: center;
	justify-items: center;
	width: 62px;
	height: 62px;
	border: 0;
	border-radius: 4px;
	background: var(--cl-emap-tint, #FAF9F7);
}

.cl-emap__chip-month {
	color: var(--cl-emap-accent, #C91228);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cl-emap__chip-day { font-size: 24px; font-weight: 700; line-height: 1.15; }

/* Meta (venue + date) and the stand badge share a row, pushed to opposite
   ends — flex-start rather than centre, so a stand badge doesn't end up
   vertically centred against a meta line that's wrapped onto two rows on
   a narrow card. */
.cl-emap__meta-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.cl-emap .cl-emap__title a {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

/**
 * No underline on hover. A colour shift to the accent is the affordance
 * instead — an event name with no hover feedback at all gives no signal
 * that it is a link, and the whole card is not clickable.
 */
.cl-emap .cl-emap__title a:hover,
.cl-emap .cl-emap__title a:focus-visible {
	text-decoration: none;
	color: var(--cl-emap-accent, #C91228);
}

/**
 * The margin is variable-driven and defaults to 0.
 *
 * It used to be a hardcoded `0 0 12px !important`. The !important was there
 * to beat Salient, which styles headings with compound selectors like
 * `.row .col h3` that outrank a two-class selector — so the theme's own
 * heading margin was winning otherwise. Keeping the !important but taking
 * the value from a variable means the theme still loses, while the spacing
 * is chosen in the element settings rather than baked in here.
 */
.cl-emap .cl-emap__title {
	margin: 0 0 var(--cl-emap-title-gap, 0px) !important;
	color: var(--cl-emap-ink, #061E21);
	font-size: var(--cl-emap-title-size, 17.5px) !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em;
}

.cl-emap__where {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0 !important;
	color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7));
	font-size: var(--cl-emap-body-size, 16px);
}

/* Each icon hugs the text after it rather than floating in the gap. */
.cl-emap__where .cl-emap__i { margin-right: -8px; }

.cl-emap__desc {
	margin: 8px 0 0 !important;
	color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7));
	font-size: var(--cl-emap-body-size, 16px);
}

/* A hairline rule between the description and the action links below it —
   reuses the same border colour as everything else on the card (Line)
   rather than a separate, unconfigurable grey, so the whole palette stays
   driven from one set of colour settings. */
.cl-emap__divider {
	margin: 16px 0 0;
	border: 0;
	height: 1px;
	background: var(--cl-emap-line, rgba(6, 30, 33, 0.16));
}

/* Event details sits alone at the left; the website link is pushed to the
   right by .cl-emap__actions-end. */
.cl-emap__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 16px;
}

/* The divider and the buttons are children of the card (so a phone can run
   them across its full width), which would otherwise drop them into the date
   chip's column here. */
.cl-emap__card > .cl-emap__divider,
.cl-emap__card > .cl-emap__actions {
	grid-column: 2;
}

.cl-emap__viewsel { display: none; }

.cl-emap__actions-end {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto;
}

/* On a narrow card the two groups stack rather than the right-hand pair
   being squeezed; auto margin would otherwise keep pushing them into a
   column of their own. */
@media (max-width: 480px) {
	.cl-emap__actions-end { margin-left: 0; }
}

/* Visible icon+text links rather than icon-only buttons with a tooltip —
   plain, borderless, reads as a set of things you can do rather than a
   set of icons to decode first. */
.cl-emap .cl-emap__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	padding: 0;
	background: none;
	color: var(--cl-emap-ink, #061E21);
	font-size: var(--cl-emap-body-size, 16px);
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease;
}

.cl-emap .cl-emap__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/**
 * "Get tickets" stays the accent-coloured text CTA. Every other action
 * becomes an outlined button, matching "Refer with this pharmacy" on the
 * dispensary cards — same transparent fill, 1px rule and ink text, so the
 * two elements read as one system.
 *
 * Targeted with :not(--accent) rather than by adding a class in the PHP:
 * the accent link is the single exception, and a negative selector means a
 * new action added later picks up the button treatment automatically
 * instead of silently rendering as a bare link.
 */
.cl-emap .cl-emap__link:not(.cl-emap__link--accent) {
	justify-content: center;
	gap: 8px;
	/**
	 * nowrap and no shrinking. As a flex item the button shrinks by
	 * default, and a bordered box is narrow enough that "Event details"
	 * wraps onto two lines inside it — measured at 120px wide and 56px
	 * tall, against 40px for a single line. A button with a broken label
	 * reads as a rendering fault, so it holds its width and the row wraps
	 * instead.
	 */
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 11px 20px;
	border: 1px solid var(--cl-emap-line, rgba(6, 30, 33, 0.16));
	border-radius: var(--cl-emap-btn-radius, 8px);
	background: transparent;
	font-weight: 500;
	line-height: 1;
	transition: background-color 0.16s ease, border-color 0.16s ease;
}

.cl-emap .cl-emap__link:not(.cl-emap__link--accent):hover {
	/* No underline on a button — that reads as a link that has been given a
	   border by mistake. The background shift is the hover affordance.
	   Uses the element's existing Tint colour rather than a hardcoded grey,
	   so the hover follows the theme if that setting is changed. */
	text-decoration: none;
	background: var(--cl-emap-tint, #FAF9F7);
}

/* Icons sized in em inside a button, so they track the label rather than
   standing taller than its cap height. */
.cl-emap .cl-emap__link:not(.cl-emap__link--accent) .cl-emap__i {
	width: 1.05em;
	height: 1.05em;
	stroke-width: 1.7;
}

/**
 * "Get tickets" — same button shape as the outlined actions beside it, but
 * filled with the accent colour. Padding, radius, weight, nowrap and icon
 * sizing are all repeated rather than shared with the :not(--accent) rule
 * above, because that rule excludes this element by definition. Keep the
 * two in step if either is changed.
 */
.cl-emap .cl-emap__link--accent {
	justify-content: center;
	gap: 8px;
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 11px 20px;
	border: 1px solid var(--cl-emap-accent, #C91228);
	border-radius: var(--cl-emap-btn-radius, 8px);
	background: var(--cl-emap-accent, #C91228);
	color: var(--cl-emap-accent-text, #fff);
	font-weight: 500;
	line-height: 1;
	transition: filter 0.16s ease;
}

.cl-emap .cl-emap__link--accent:hover,
.cl-emap .cl-emap__link--accent:focus-visible {
	/* Darkened rather than swapped for a second colour, so the hover
	   follows the Accent setting instead of needing its own. */
	text-decoration: none;
	filter: brightness(0.9);
}

.cl-emap .cl-emap__link--accent .cl-emap__i {
	width: 1.05em;
	height: 1.05em;
	stroke-width: 1.7;
}

.cl-emap__link .cl-emap__i { width: 16px; height: 16px; }

/* Icon-only. The label lives on aria-label for screen readers, and the
   tooltip is the sighted equivalent — shown on keyboard focus as well as
   hover, so it isn't mouse-only. Only the map's own reset-view button
   uses this now; the card's actions moved to visible text links above. */
.cl-emap .cl-emap__iconbtn {
	position: relative;
	display: grid;
	place-items: center;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--cl-emap-btn-radius, 8px) !important;
	background: var(--cl-emap-fill) !important;
	color: var(--cl-emap-ink, #061E21) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cl-emap .cl-emap__iconbtn:hover {
	background: var(--cl-emap-ink, #061E21) !important;
	color: var(--cl-emap-surface, #FEFDFD) !important;
}

/* On the map the button needs its own edge and lift — the fill tint has
   nothing behind it to read against out there. */
.cl-emap .cl-emap__iconbtn--onmap {
	width: 38px !important;
	height: 38px !important;
	border: 1px solid var(--cl-emap-line, rgba(6, 30, 33, 0.16)) !important;
	background: rgba(255, 255, 255, 0.95) !important;
	box-shadow: 0 4px 14px rgba(15, 35, 33, 0.12) !important;
}

.cl-emap .cl-emap__iconbtn--onmap:hover {
	background: var(--cl-emap-ink, #061E21) !important;
	border-color: var(--cl-emap-ink, #061E21) !important;
	color: #fff !important;
}

.cl-emap__iconbtn .cl-emap__i { width: 17px; height: 17px; }

/* No tooltip without a data-tip — the reset button over the map is
   deliberately icon-only, with its label on aria-label for screen readers. */
.cl-emap__iconbtn[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 5;
	padding: 6px 9px;
	border-radius: 7px;
	background: var(--cl-emap-ink, #061E21);
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 3px);
	pointer-events: none;
	transition: opacity 0.13s ease, transform 0.13s ease;
}

.cl-emap__iconbtn[data-tip]:hover::after,
.cl-emap__iconbtn[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* Sits in the meta row now, paired with venue/date via space-between —
   no longer needs to push itself right with margin-left:auto among a row
   of action buttons, since it isn't in that row any more. */
/**
 * The pill is the tallest thing in the meta row, so its height is what sets
 * that row's height and therefore how far down the event title starts.
 * Shrinking the pill is what closes the gap above the title.
 *
 * Padding and gap are in em rather than px so that one size setting scales
 * the whole pill proportionally — at fixed px padding, reducing the font
 * size leaves the same chunky box and barely moves the title.
 */
.cl-emap__stand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 0.45em;
	padding: 0.35em 0.85em;
	border-radius: 999px;
	background: var(--cl-emap-tint, #FAF9F7);
	color: var(--cl-emap-ink, #061E21);
	font-size: var(--cl-emap-stand-size, 13px);
	line-height: 1.35;
	letter-spacing: 0.02em;
}

/* The icon tracks the label for the same reason. */
.cl-emap__stand .cl-emap__i {
	width: 1.15em;
	height: 1.15em;
}
/* Profession tags ("I am a…"), under the event name. Outlined rather than
   tint-filled so they don't read as a second copy of the stand badge, and
   sized from the same setting so the two stay in proportion. The
   !important list/margin resets beat Salient's content list styles. */
.cl-emap .cl-emap__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.cl-emap .cl-emap__tag {
	margin: 0 !important;
	padding: 0.3em 0.8em !important;
	border: 1px solid var(--cl-emap-line, rgba(6, 30, 33, 0.16));
	border-radius: 999px;
	background: transparent;
	color: var(--cl-emap-ink, #061E21);
	font-size: var(--cl-emap-stand-size, 13px);
	line-height: 1.35;
	list-style: none !important;
}

.cl-emap .cl-emap__tag::before { content: none !important; }

/* The "I am a…" dropdown is hidden by the script until an event has a
   profession; [hidden] needs spelling out because .cl-emap__drop sets its
   own display. */
.cl-emap__drop[hidden] { display: none !important; }

.cl-emap__empty {
	padding: 48px 24px;
	border: 1px dashed var(--cl-emap-line, rgba(6, 30, 33, 0.16));
	border-radius: 14px;
	text-align: center;
}

.cl-emap__empty[hidden] { display: none; }
.cl-emap .cl-emap__empty h3 { margin: 0 !important; font-size: 20px !important; }
.cl-emap__empty p { margin: 10px 0 18px !important; color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7)); font-size: 15px; }

/* ---------------------------------------------------------------
   Map
   --------------------------------------------------------------- */
/**
 * isolation: isolate is doing real work here.
 *
 * Leaflet gives its own panes z-index values from 200 (tiles) up to 700
 * (popups), and .leaflet-container has no z-index of its own — so those
 * panes were competing in this section's stacking context and beating the
 * filter bar, which is what put the bar behind the map. Isolating the panel
 * keeps Leaflet's numbering inside it, where it belongs.
 */
.cl-emap__map-panel {
	position: relative;
	z-index: 0;
	isolation: isolate;
	background: var(--cl-emap-tint, #FAF9F7);
}

.cl-emap__map { position: absolute; inset: 0; }

.cl-emap__mapbar {
	position: absolute;
	z-index: 500;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	pointer-events: none;
}

.cl-emap__mapbar > * { pointer-events: auto; }

.cl-emap__mapfallback {
	position: absolute;
	inset: 0;
	display: none;
	place-content: center;
	padding: 40px;
	text-align: center;
}

.cl-emap__map-panel.is-offline .cl-emap__mapfallback { display: grid; }
.cl-emap__map-panel.is-offline .cl-emap__map { display: none; }

/* The pin carries the month: on an events map, when is as much of the
   answer as where, and a row of identical dots throws that away.

   A teardrop rather than a disc. One rounded corner plus a 45-degree
   rotation gives a marker with an actual point, so it sits ON a place
   instead of hovering near it — and it needs no pseudo-element, which a
   separate tail would have, and that tail could only sit behind the body
   with a negative z-index that paints it behind the parent's own
   background.

   White body with the accent in the ring and the text: legible over both
   the pale land and the darker water of the tile set, where a dark disc
   disappeared into the roads. */
.cl-emap__pin {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	/* The tip lands at the bottom point after rotation, which is
	   (38 / sqrt(2)) = 26.9px below the centre. Half the box plus that
	   puts the tip exactly on the coordinate. */
	margin: -46px 0 0 -19px;
	border: 2px solid var(--cl-emap-accent, #C91228);
	border-radius: 50% 50% 50% 0;
	background: var(--cl-emap-accent, #C91228);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	box-shadow: 0 4px 12px rgba(15, 35, 33, 0.22);
	transform: rotate(-45deg);
	transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Counter-rotated so the month reads level inside a rotated marker. */
.cl-emap__pin > span {
	display: block;
	transform: rotate(45deg);
}

.cl-emap__pin.is-hovered { transform: rotate(-45deg) scale(1.12); }

/* Filled, not just larger: at a glance the one you picked is the solid
   one. */
/* Every pin is solid now, so selection reads through the ring and the
   size rather than the fill. */
.cl-emap__pin.is-selected {
	border-color: var(--cl-emap-ink, #061E21);
	transform: rotate(-45deg) scale(1.2);
	z-index: 600;
}

/* Past events keep the outlined treatment — with every live pin solid
   accent, an outline is what separates them at a glance. */
.cl-emap__pin.is-past {
	border-color: var(--cl-emap-line, rgba(6, 30, 33, 0.16));
	background: #fff;
	color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7));
	box-shadow: 0 3px 10px rgba(15, 35, 33, 0.14);
}

.cl-emap .leaflet-container { background: var(--cl-emap-tint, #FAF9F7); font: inherit; }
.cl-emap .leaflet-popup-content-wrapper { border-radius: 10px; }
.cl-emap .leaflet-popup-content { margin: 15px 17px; font-size: 14.5px; }
.cl-emap__popup-title { font-weight: 600; margin-bottom: 2px; }
.cl-emap__popup-meta { color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7)); }
.cl-emap__popup-links { display: flex; gap: 16px; margin-top: 9px; }

.cl-emap .cl-emap__popup-links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cl-emap-accent, #C91228);
}

/* ---------------------------------------------------------------
   Enquiry dialog
   --------------------------------------------------------------- */
.cl-emap__dialog {
	width: min(640px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: var(--cl-emap-solid, #FEFDFD);
	color: var(--cl-emap-ink, #061E21);
	overflow: auto;
}

.cl-emap__dialog::backdrop { background: rgba(15, 35, 33, 0.5); }

.cl-emap__sheet-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 26px 18px;
	border-bottom: 1px solid var(--cl-emap-line, rgba(6, 30, 33, 0.16));
}

.cl-emap .cl-emap__sheet-head h2 { margin: 0 !important; font-size: 24px !important; }
.cl-emap__sheet-head p { margin: 8px 0 0 !important; color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7)); font-size: 15px; }

.cl-emap__close {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: 1px solid var(--cl-emap-line, rgba(6, 30, 33, 0.16));
	border-radius: var(--cl-emap-btn-radius, 8px);
	background: var(--cl-emap-solid, #FEFDFD);
	color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7));
	cursor: pointer;
}

.cl-emap__close:hover { border-color: var(--cl-emap-ink, #061E21); color: var(--cl-emap-ink, #061E21); }

.cl-emap__sheet-body { padding: 22px 26px 26px; }

.cl-emap__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.cl-emap__field { display: grid; gap: 6px; margin-bottom: 16px; }

.cl-emap__field > label {
	color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7));
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cl-emap .cl-emap__input,
.cl-emap__field select {
	width: 100%;
	padding: 11px 14px !important;
	border: 1px solid var(--cl-emap-line, rgba(6, 30, 33, 0.16)) !important;
	border-radius: var(--cl-emap-btn-radius, 8px) !important;
	background: var(--cl-emap-solid, #FEFDFD) !important;
	color: var(--cl-emap-ink, #061E21);
	font-size: 15.5px !important;
	box-shadow: none !important;
}

.cl-emap .cl-emap__input:focus,
.cl-emap__field select:focus { border-color: var(--cl-emap-ink, #061E21) !important; outline: none; }

.cl-emap__error { display: none; color: var(--cl-emap-accent, #C91228); font-size: 13.5px; }
.cl-emap__field.has-error .cl-emap__input,
.cl-emap__field.has-error select { border-color: var(--cl-emap-accent, #C91228) !important; }
.cl-emap__field.has-error .cl-emap__error { display: block; }

.cl-emap__consent {
	display: flex !important;
	align-items: flex-start;
	gap: 11px;
	color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7));
	font-size: 15px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
}

.cl-emap__formerror {
	margin: 0 0 14px !important;
	padding: 11px 14px;
	border-radius: 10px;
	background: rgba(216, 35, 42, 0.08);
	color: var(--cl-emap-accent, #C91228);
	font-size: 14.5px;
}

.cl-emap__formerror[hidden] { display: none; }

.cl-emap__sheet-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding-top: 6px;
}

/* Honeypot: hidden from people, not from the DOM, because a bot fills
   anything with a plausible name and never checks what is visible. */
.cl-emap__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cl-emap__done { text-align: center; padding: 20px 0 6px; }
.cl-emap__done[hidden] { display: none; }
.cl-emap .cl-emap__done h2 { margin: 0 !important; font-size: 24px !important; }
.cl-emap__done p { margin: 12px auto 22px !important; max-width: 44ch; color: var(--cl-emap-ink-soft, rgba(6, 30, 33, 0.7)); }

@media (max-width: 600px) {
	.cl-emap__grid2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.cl-emap *,
	.cl-emap *::before,
	.cl-emap *::after { transition: none !important; }
}


/* ------------------------------------------------------------------ */
/* Phones (18 Sep 2026)                                                */
/* ------------------------------------------------------------------ */
@media (max-width: 690px) {

	/* The filter row is just controls on the page — no frame, no fill. */
	.cl-emap.is-compact .cl-emap__triggers {
		display: grid !important;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 10px;
		padding: 0 0 12px !important;
		border: 0 !important;
		background: transparent !important;
	}

	.cl-emap.is-compact .cl-emap__triggers .cl-emap__trigger { grid-column: 1; grid-row: 1; }

	/* Two view buttons plus Filters is too much on a phone: show the
	   dropdown instead, and hide the pair. */
	.cl-emap.is-compact .cl-emap__tabs,
	.cl-emap.is-compact .cl-emap__tabs--inline { display: none !important; }

	/* Matches the Filters button beside it: same padding, same text size,
	   so the two controls are the same height. */
	.cl-emap.is-compact .cl-emap__viewsel {
		display: block;
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		width: auto;
		max-width: 100%;
		appearance: none;
		-webkit-appearance: none;
		padding: 8px 34px 8px 12px;
		border: 1px solid var(--cl-emap-line, rgba(6, 30, 33, 0.16));
		border-radius: var(--cl-emap-btn-radius, 8px);
		/* White fill like the Filters button beside it and the site's other
		   fields (was transparent). */
		background-color: var(--cl-emap-solid, #FEFDFD);
		background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23061E21' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 14px center;
		background-size: 12px 8px;
		color: var(--cl-emap-ink, #061E21);
		font: inherit;
		font-size: 14px;
		/* The Filters button next to it has no line-height of its own, so its
		   text box is 18px at this size; matching that keeps the two controls
		   the same height (they were 36px and 38px). */
		line-height: 18px;
	}

	/* No count on phones (Jordan, 18 Sep 2026): under the controls it read
	   as a label for the first card, and every other placement crowded the
	   row. This is the only copy visible at this width — the filter bar's
	   own copy is already hidden by the stacked rules — so the number does
	   not appear on a phone at all. The script still fills both. */
	.cl-emap.is-compact .cl-emap__triggers .cl-emap__count--stacked {
		display: none !important;
	}

	/* Card: tighter, and the event name leads rather than the address. */
	.cl-emap.is-compact .cl-emap__card {
		position: relative;
		grid-template-columns: 48px 1fr;
		gap: 14px;
		padding: 16px;
	}

	.cl-emap.is-compact .cl-emap__chip { width: 48px; height: 48px; }
	.cl-emap.is-compact .cl-emap__chip-month { font-size: 11px; }
	.cl-emap.is-compact .cl-emap__chip-day { font-size: 19px; }

	.cl-emap.is-compact .cl-emap__body { display: flex; flex-direction: column; gap: 6px; }
	.cl-emap.is-compact .cl-emap__title { order: 1; font-size: 20px !important; padding-right: 104px; }
	.cl-emap.is-compact .cl-emap__meta-row { order: 2; flex-direction: column; align-items: flex-start; gap: 8px; }
	.cl-emap.is-compact .cl-emap__desc {
		order: 3;
		margin: 2px 0 0 !important;
		font-size: 15px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	/* Place and date as an icon column, so no icon is orphaned mid-line. */
	.cl-emap.is-compact .cl-emap__where {
		display: grid !important;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 4px 8px;
	}
	.cl-emap.is-compact .cl-emap__where .cl-emap__i { margin-right: 0 !important; }

	/* Stand number in the card's top right: it no longer costs a line, and
	   the title reserves room so a long name can't run underneath it. */
	.cl-emap.is-compact .cl-emap__stand {
		position: absolute;
		top: 14px;
		right: 14px;
		margin: 0;
		font-size: 13px;
	}

	/* No rule between the card's text and its buttons on a phone — the gap
	   does the separating (Jordan, 18 Sep 2026). */
	.cl-emap.is-compact .cl-emap__card > .cl-emap__divider { display: none; }

	/* Buttons run across the whole card, under the date chip too. */
	.cl-emap.is-compact .cl-emap__card > .cl-emap__divider,
	.cl-emap.is-compact .cl-emap__card > .cl-emap__actions {
		grid-column: 1 / -1;
	}

	.cl-emap.is-compact .cl-emap__actions {
		display: grid;
		grid-template-columns: 1fr 48px;
		align-items: stretch;
		gap: 8px;
		margin-top: 12px;
	}
	.cl-emap.is-compact .cl-emap__actions-end { display: contents; }
	.cl-emap.is-compact .cl-emap__actions .cl-emap__link { width: 100%; justify-content: center; }

	/* The website link shrinks to its icon; its label stays for screen
	   readers via the link's aria-label. */
	.cl-emap.is-compact .cl-emap__actions-end .cl-emap__link { gap: 0; padding-left: 0 !important; padding-right: 0 !important; }
	.cl-emap.is-compact .cl-emap__actions-end .cl-emap__link .cl-emap__link-text { display: none; }
	.cl-emap.is-compact .cl-emap__actions-end .cl-emap__link .cl-emap__i { width: 18px; height: 18px; }

	/* Square map. */
	.cl-emap.is-compact .cl-emap__map-panel,
	.cl-emap.is-compact .cl-emap__map {
		aspect-ratio: 1 / 1;
		height: auto !important;
		min-height: 0 !important;
	}

	/* "Request us at your event" is hidden on phones (Jordan, 18 Sep 2026);
	   the desktop footer button is untouched. */
	.cl-emap.is-compact .cl-emap__ask-foot { display: none !important; }
}


/* Salient forces `border-radius: 4px !important` on every native <button>
   (Theme Options → button style), so our own controls came out 4px while the
   link-styled ones stayed 8px — 4px and 8px side by side in the same row.
   Everything here follows the site's CTA buttons (8px, the "Action button
   radius" setting) instead. */
.cl-emap button.cl-emap__btn,
.cl-emap button.cl-emap__trigger,
.cl-emap button.cl-emap__fbtn,
.cl-emap button.cl-emap__iconbtn,
.cl-emap button.cl-emap__ask-foot,
.cl-emap button.cl-emap__close,
.cl-emap .cl-emap__search,
.cl-emap .cl-emap__input,
.cl-emap .cl-emap__field select,
.cl-emap .cl-emap__viewsel {
	border-radius: var(--cl-emap-btn-radius, 8px) !important;
}