/* Reference: amazon-design-refs/sections/last-mile-land.png, plus explicit
   user direction to make the video panel itself full screen (edge-to-edge
   100vh), rather than the inset rounded-panel treatment used elsewhere. */

.rds-last-mile.frames {
	position: relative;
	/* Compound selector (not just .rds-last-mile) so this reliably beats the
	   shared .frames{z-index:2} base rule regardless of stylesheet load
	   order — WordPress prints this block's own <style> in <head> BEFORE
	   base.css's <link>, so on specificity-tie alone base.css would win. */
	z-index: 1200;
	width: 100%;
	background: #111419;
	box-sizing: border-box;
}

.rds-last-mile__intro {
	padding: clamp( 4rem, 9vw, 8rem ) clamp( 2rem, 8vw, 10rem ) clamp( 2.5rem, 6vw, 4rem );
	box-sizing: border-box;
}

.rds-last-mile__heading {
	margin: 0 auto;
	max-width: 56rem;
	text-align: center;
}

.rds-last-mile__panel {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #7690be;
}

.rds-last-mile__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.rds-last-mile__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/* Same contrast rationale as Immersive Keynote's scrim: guarantees the play
   affordance stays legible over unpredictable video frames. */
.rds-last-mile__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0.32;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba( 0, 0, 0, 0.55 ) 0%,
		rgba( 0, 0, 0, 0 ) 40%,
		rgba( 0, 0, 0, 0 ) 60%,
		rgba( 0, 0, 0, 0.55 ) 100%
	);
	transition: opacity 220ms ease;
}

.rds-last-mile__bash {
	width: 100%;
	background: #111419;
	overflow: hidden;
	box-sizing: border-box;
}

.rds-last-mile__bash-scroll {
	width: 100%;
	padding: clamp( 2.5rem, 6svh, 4.5rem ) 0;
	overflow: hidden;
	box-sizing: border-box;
}

.rds-last-mile__bash-track {
	--rds-last-mile-bash-pad: clamp( 2rem, 5.5vw, 5rem );
	--rds-last-mile-bash-gap: clamp( 2rem, 4.5vw, 4rem );
	--rds-last-mile-bash-stack-gap: clamp( 0.75rem, 1.6vw, 1.25rem );
	--rds-last-mile-bash-height-cap: calc(
		( 100svh - clamp( 5rem, 12svh, 9rem ) - var( --rds-last-mile-bash-stack-gap ) ) / 2 * ( 731 / 418 )
	);
	--rds-last-mile-bash-col: calc(
		( 100vw - ( var( --rds-last-mile-bash-pad ) * 2 ) - var( --rds-last-mile-bash-gap ) ) / 2
	);
	--rds-last-mile-bash-size: min( var( --rds-last-mile-bash-col ), var( --rds-last-mile-bash-height-cap ) );

	display: flex;
	align-items: center;
	gap: var( --rds-last-mile-bash-gap );
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0 var( --rds-last-mile-bash-pad );
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.rds-last-mile__bash-scroll.is-horizontal-scrub-active .rds-last-mile__bash-track {
	width: max-content;
	overflow: visible;
}

.rds-last-mile__bash-track::-webkit-scrollbar {
	display: none;
}

.rds-last-mile__bash-copy {
	flex: 0 0 var( --rds-last-mile-bash-size );
	margin: 0;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	/* letter-spacing: -0.02em; */
}

.rds-last-mile__bash-stack {
	flex: 0 0 var( --rds-last-mile-bash-size );
	display: flex;
	flex-direction: column;
	gap: var( --rds-last-mile-bash-stack-gap );
}

.rds-last-mile__bash-card {
	width: 100%;
	aspect-ratio: 731 / 418;
	border-radius: clamp( 1.75rem, 3.75vw, 3.4375rem );
	overflow: hidden;
	background: #d9d9d9;
}

/* One tall card kept as-is (matches Journey Cards' own final layout: one
   tall slot PLUS one wide-slot group, not an all-wide replacement) — sized
   to exactly span two stacked cards' height plus the gap between them. */
.rds-last-mile__bash-card--tall {
	flex: 0 0 var( --rds-last-mile-bash-size );
	height: calc( ( var( --rds-last-mile-bash-size ) * 418 / 731 ) * 2 + var( --rds-last-mile-bash-stack-gap ) );
}

/* Mosaic accent, revised 2026-08-06 ("update this section to match the same
   layout" — Journey Cards' own wide-slot fix) — a single WIDE card (two
   columns' width, one row's height) sitting atop a normal side-by-side pair
   of row cards, not a single tall card spanning two rows. Explicit height
   (not just `aspect-ratio`, which the base `.bash-card` rule already sets)
   because doubling the width while keeping that same 731:418 ratio would
   double the height too — this needs the SAME height as one normal card,
   just twice as wide. */
.rds-last-mile__bash-wide-stack {
	flex: 0 0 var( --rds-last-mile-bash-size );
	display: flex;
	flex-direction: column;
	gap: var( --rds-last-mile-bash-stack-gap );
	width: calc( var( --rds-last-mile-bash-size ) * 2 + var( --rds-last-mile-bash-stack-gap ) );
}

.rds-last-mile__bash-card--wide {
	width: calc( var( --rds-last-mile-bash-size ) * 2 + var( --rds-last-mile-bash-stack-gap ) );
	height: calc( var( --rds-last-mile-bash-size ) * 418 / 731 );
}

.rds-last-mile__bash-wide-row {
	display: flex;
	gap: var( --rds-last-mile-bash-stack-gap );
}

/* Same fix Journey Cards needed for its own wide-row: the base
   `.bash-card { width: 100% }` is correct inside a vertical `.bash-stack`
   (100% of that column) but wrong here — each of the two cards would claim
   100% of the row's own width instead of one column each. */
.rds-last-mile__bash-wide-row .rds-last-mile__bash-card {
	width: var( --rds-last-mile-bash-size );
	flex-shrink: 0;
}

.rds-last-mile__bash-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rds-last-mile__bash-image {
	flex: 0 0 auto;
	width: auto;
	height: calc( 100svh - clamp( 5rem, 12svh, 9rem ) );
	min-height: 32rem;
	margin: 0;
	/* Explicit aspect-ratio (matching VEGAS_BASH.png's real 6010x2160, not
	   just the `width`/`height` HTML attributes) so the figure's own width
	   is reserved from the very first layout pass instead of depending on
	   the browser inferring it from attrs — found causing a real ~585px
	   scroll-height jump once lazy-loading was disabled elsewhere on the
	   page (2026-08-16), same class of bug as the other scroll-stability
	   fixes already applied to Keynote Proof / Thanks Closing. */
	aspect-ratio: 6010 / 2160;
}

.rds-last-mile__bash-image img {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
}

.rds-last-mile__bash-card--placeholder {
	background: #d9d9d9;
}

.rds-last-mile__bash-spacer {
	flex: 0 0 clamp( 8rem, 24vw, 24rem );
	height: 1px;
	display: none;
}

@media ( max-width: 700px ) {
	.rds-last-mile__intro {
		padding-top: 3rem;
	}

	.rds-last-mile__bash {
		padding: 0;
	}

	.rds-last-mile__bash-scroll {
		padding: 2.5rem 0;
	}

	.rds-last-mile__bash-track {
		--rds-last-mile-bash-pad: 2rem;
		--rds-last-mile-bash-gap: 1.75rem;
	}

	.rds-last-mile__bash-card {
		border-radius: 1.5rem;
	}
}
