/* LMB Ads – sidebar carousel and wide trays (with mu-plugins/lmb-ads.php and lmb-ads.js).
   Colors from the 2026 style guide: Mist #eef1f4 panels, Fog #d5dbe1 outlines. */

.lmb-ad { display: block; line-height: 0; width: 100%; }
.lmb-ad img { display: block; width: 100%; height: auto; border-radius: 4px; }
.lmb-ad:focus-visible { outline: 3px solid #0b5a8a; outline-offset: 2px; }

/* ---------- Pause / Play button (shows only while ads are rotating) ---------- */
.lmb-ads__pause {
	display: none;
	font: 600 12px/1 "Montserrat", sans-serif;
	letter-spacing: .02em;
	color: #5a6472;
	background: #fff;
	border: 1px solid #d5dbe1;
	border-radius: 999px;
	padding: 5px 10px;
	cursor: pointer;
}
.lmb-ads__pause:hover, .lmb-ads__pause:focus-visible { color: #0b5a8a; border-color: #0b5a8a; }
.is-rotating > .lmb-ads__pause,
.is-rotating > .lmb-ads-side__bar > .lmb-ads__pause { display: inline-block; }

/* ---------- Tray: List view every 8 rides; under the Grid, Map and Calendar views ----------
   No panel: the page's own white, with a small "Advertisement" label so ads don't read as rides.
   The tray is exactly as tall as the ads (plus the label row) and never changes height. */
.lmb-ad-tray {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin: 20px 0 28px;
	padding: 22px 0 0; /* room for the label row */
	background: none;
	grid-column: 1 / -1; /* full width when it sits inside a card grid */
}
.lmb-ad-tray::before {
	content: "Advertisement";
	position: absolute;
	left: 0;
	top: 0;
	font: 600 11px/1 "Montserrat", sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #5a6472;
}
.lmb-ad-tray > .lmb-ads__pause { position: absolute; right: 0; top: -4px; padding: 3px 9px; font-size: 11px; }
.lmb-ad-tray--bottom { margin: 28px 0 8px; } /* under the Grid (below page numbers), Map and Calendar views */
.lmb-ad-tray[hidden] { display: none; }
/* Website banner on the Events and Dollar Per Rider pages */
.lmb-ad-tray--banner { margin: 16px 0 24px; }
.lmb-ad-tray--banner .lmb-ad-tray__stage { min-height: 0 !important; }

.lmb-ad-tray__stage {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	transition: opacity .35s ease;
}
.lmb-ad-tray__stage.is-fading { opacity: 0; }
/* Every ad in the tray is exactly the tray's height (195 px, less on narrow screens), keeping its shape */
.lmb-ad-tray--wide .lmb-ad { width: auto; max-width: 100%; }
.lmb-ad-tray--wide .lmb-ad img { width: auto; max-width: 100%; height: var(--lmb-tray-h, auto); }
/* Rectangles packed together in the center */
.lmb-ad-tray--rect .lmb-ad { width: auto; flex: 0 1 auto; }
.lmb-ad-tray--rect .lmb-ad img { width: auto; max-width: 100%; height: var(--lmb-tray-h, auto); }

/* ---------- Sidebar ---------- */
.lmb-ads-side__viewport { position: relative; overflow: hidden; transition: height .6s ease; }
.lmb-ads-side__stack { display: flex; flex-direction: column; gap: 12px; }
.lmb-ads-side__stack.is-sliding { transition: transform .6s ease; }
.lmb-ads-side__bar { display: flex; justify-content: flex-end; min-height: 26px; margin-top: 8px; }

/* Tall 1:2 ads take exactly two 6:5 slots; the image fits inside, centered */
.lmb-ads-side .lmb-ad--tall { display: flex; align-items: center; justify-content: center; }
.lmb-ads-side .lmb-ad--tall img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }

/* Phones: the sidebar sits below the calendar, two across */
.lmb-ads-side--grid .lmb-ads-side__viewport { overflow: visible; }
.lmb-ads-side--grid .lmb-ads-side__stack { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; transition: opacity .35s ease; }
.lmb-ads-side--grid .lmb-ad--tall { grid-row: span 2; }
.lmb-ads-side--grid .lmb-ads-side__stack.is-fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.lmb-ad-tray__stage, .lmb-ads-side__viewport, .lmb-ads-side__stack, .lmb-ads-side__stack.is-sliding { transition: none; }
}