/* Bus Ads block (template-parts/blocks/block-bus-ads.php).

   The background color covers the block's own width (the page's content
   width), with --ba-pad of padding inside it. The side-view bus fills the
   padded width, and its solid ground line (.busAds__bus--side::after) runs
   --ba-ext past the colored band on both sides. --ba-ext stays under the
   page gutter at phone widths so the line never causes a sideways scroll.

   The back view (.is-back) puts the bus on the left and the thumbnails on
   the right; it stacks below 760px of block width (container query). */

.busAds
{
	--ba-bg: #eef0f0;
	--ba-line: var(--colGrey, #333);
	--ba-bus: #fff;
	--ba-pad: clamp(1.5rem, 5vw, 3.5rem);
	--ba-ext: clamp(8px, 2.5vw, 32px);
	position: relative;
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	box-sizing: border-box;
	margin-block: calc(var(--defaultInterval, 20px) * 2);
	padding: var(--ba-pad);
	background: var(--ba-bg);
	border-radius: var(--defaultBorderRadius, 10px);
	container-type: inline-size;
	container-name: busAds;
}

/* ---------- Title + body ---------- */
.busAds__head
{
	display: grid;
	gap: 0.5rem;
	max-width: 62ch;
}

.busAds__kicker
{
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--colA, #355067);
}

.busAds .busAds__title
{
	margin: 0;
	text-wrap: balance;
}

.busAds__body p
{
	margin: 0 0 0.75em;
}

.busAds__body p:last-child
{
	margin-bottom: 0;
}

/* ---------- Bus side / Bus back switch ---------- */
.busAds__switch
{
	display: inline-flex;
	justify-self: start;
	border: 1px solid var(--ba-line);
	border-radius: 999px;
	overflow: hidden;
}

.busAds__switch button
{
	margin: 0;
	padding: 0.45em 1.2em;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ba-line);
	font: inherit;
	font-size: 1rem;
	line-height: 1.2;
	cursor: pointer;
}

/* Theme buttons change background on hover/focus; pin both states here. */
.busAds__switch button:hover,
.busAds__switch button:focus,
.busAds__switch button:active
{
	background: transparent;
	color: var(--ba-line);
}

.busAds__switch button[aria-pressed="true"],
.busAds__switch button[aria-pressed="true"]:hover,
.busAds__switch button[aria-pressed="true"]:focus
{
	background: var(--ba-line);
	color: var(--ba-bg);
}

.busAds__switch button:focus-visible,
.busAds__thumb:focus-visible
{
	outline: 2px solid var(--ba-line);
	outline-offset: 2px;
}

/* ---------- Viewer ---------- */
.busAds__viewer
{
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

.busAds.is-back .busAds__viewer
{
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

@container busAds (max-width: 760px)
{
	.busAds.is-back .busAds__viewer
	{
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Bus ---------- */
.busAds__bus
{
	position: relative;
	min-width: 0;
	width: 100%;
	margin: 0;
	color: var(--ba-line);
}

.busAds__bus[hidden]
{
	display: none;
}

.busAds__art
{
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.busAds__slot
{
	position: absolute;
}

/* Between the belt line and the wheel arches (viewBox 1000x420):
   x 90–714, y 152–282 for a 4.8:1 king ad. */
.busAds__bus--side .busAds__slot
{
	left: 9%;
	width: 62.4%;
	top: 36.2%;
}

.busAds__bus--back
{
	max-width: 440px;
	justify-self: center;
}

.busAds__bus--back .busAds__slot
{
	left: 14%;
	width: 72%;
	top: 46.5%;
}

.busAds__ad
{
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.busAds__ad.is-swapping
{
	animation: busAdsSwap 0.35s ease-out;
}

@keyframes busAdsSwap
{
	from { opacity: 0.25; transform: translateY(4px); }
	to   { opacity: 1;    transform: none; }
}

/* Solid ground line: the bus fills the padded width, so pull the line out
   through the padding and --ba-ext beyond the band. Sits on the wheels:
   92.86% = wheel bottom (390/420). */
.busAds__bus--side::after
{
	content: "";
	position: absolute;
	left: calc(-1 * (var(--ba-pad) + var(--ba-ext)));
	right: calc(-1 * (var(--ba-pad) + var(--ba-ext)));
	top: 92.86%;
	height: 3px;
	transform: translateY(-50%);
	background: var(--ba-line);
	pointer-events: none;
}

/* ---------- Design picker ---------- */
.busAds__pick
{
	min-width: 0;
}

/* 3 columns (6 ads = two full rows), 2 on narrow blocks and beside the
   back-view bus. */
.busAds__picker
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.busAds.is-back .busAds__picker
{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container busAds (max-width: 600px)
{
	.busAds__picker
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.busAds__thumb
	{
		padding: 4px;
		font-size: 0.8rem;
	}
}

.busAds__thumb
{
	display: grid;
	gap: 6px;
	align-content: start;
	min-width: 0;
	margin: 0;
	padding: 6px;
	border: 2px solid transparent;
	border-radius: 4px;
	background: var(--ba-bus);
	color: var(--ba-line);
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.busAds__thumb[hidden]
{
	display: none;
}

.busAds__thumb:hover,
.busAds__thumb:focus,
.busAds__thumb:active
{
	background: var(--ba-bus);
	color: var(--ba-line);
}

.busAds__thumb:hover
{
	border-color: color-mix(in srgb, var(--ba-line) 35%, transparent);
}

.busAds__thumb[aria-pressed="true"]
{
	border-color: var(--ba-line);
}

.busAds__thumb img
{
	display: block;
	width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce)
{
	.busAds__ad.is-swapping
	{
		animation: none;
	}
}

/* ---------- Phones: wider block + swipeable ad row ----------
   The page's content tier is 70vw, which left the ad on the bus about 200px
   wide on a phone. Here the block breaks out to the full width minus a 16px
   gutter; the title and copy keep the page's text column. #SD[class] and the
   :not()s outrank page-width-control.css's tier rule (1,4,0) without
   !important. */
@media (max-width: 600px)
{
	#SD[class] .entry-content > .busAds:not(.alignfull):not(.SDblock)
	{
		width: auto;
		max-width: none;
		margin-left: calc(50% - 50vw + 16px);
		margin-right: calc(50% - 50vw + 16px);
	}

	.busAds
	{
		--ba-pad: 12px;
		--ba-ext: 10px;
	}

	.busAds__head
	{
		padding-inline: max(0px, calc(15vw - 16px - var(--ba-pad)));
	}

	/* One near-full-width card per ad; swiping changes the ad on the bus
	   (busAds.js). The row bleeds through the block padding so cards can
	   slide in from the band's edge. */
	.busAds .busAds__picker,
	.busAds.is-back .busAds__picker
	{
		display: flex;
		gap: 10px;
		margin-inline: calc(-1 * var(--ba-pad));
		padding: 4px var(--ba-pad);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--ba-pad);
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.busAds__picker::-webkit-scrollbar
	{
		display: none;
	}

	.busAds__thumb
	{
		flex: 0 0 calc(100% - 2 * var(--ba-pad) - 18px);
		scroll-snap-align: center;
		padding: 6px;
		font-size: 1rem;
	}

	/* Each dot is a 24px tap target with a 7px dot drawn inside it. */
	.busAds__dots
	{
		display: flex;
		justify-content: center;
		margin-top: 6px;
	}

	.busAds__dots button,
	.busAds__dots button:hover,
	.busAds__dots button:focus,
	.busAds__dots button:active
	{
		display: grid;
		place-items: center;
		width: 24px;
		height: 24px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.busAds__dots button::before
	{
		content: "";
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--ba-line);
		opacity: 0.25;
		transition: opacity 0.2s ease;
	}

	.busAds__dots button.is-current::before
	{
		opacity: 1;
	}
}

@media (min-width: 601px)
{
	.busAds__dots
	{
		display: none;
	}
}