/* Journey card auto-scroll stage: full-width dark frame with a horizontally
   overflowing mosaic marquee and centered text. */

.rds-journey.frames {
	position: relative;
	/* Compound selector (not just .rds-journey) 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.
	   Currently masked at runtime by pin-and-cover.js's own inline z-index
	   during an active transition, but this static value still needs to be
	   correct for any state where that inline override isn't present. */
	z-index: 1200;
	width: 100%;
	/* min-height: 0; */
	background: #071018;
	padding: 0;
	box-sizing: border-box;
	overflow: visible;
}

/* Own full-screen section (2026-08-12, "move this in its own section where
   it takes full screen") — was the first thing inside `.rds-journey__panel`,
   sharing that panel's single 100svh-minimum flex column with the heading,
   card marquee, closing statement, and keynote, all stacked below it, so it
   never actually got a dedicated screen to itself. Pulled out to a sibling
   section before `.rds-journey__panel`, sized to its own `min-height:
   100svh` and centered, matching the panel's own background for visual
   continuity. */
.rds-journey__intro {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 28svh;
	background: #111419;
	box-sizing: border-box;
	padding-bottom: 30vh;
}

.rds-journey__panel {
	width: 100%;
	min-height: 100svh;
	background: #111419;
	border-radius: 0;
	padding: clamp(2.375rem, 10vh, 4rem) 0 clamp(2.25rem, 7vh, 4rem);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: visible;
}

.rds-journey__heading {
	width: 100%;
	margin: 0 auto clamp(1.5rem, 6vh, 4.125rem);
	padding-inline: clamp(1.5rem, 5vw, 5rem);
	box-sizing: border-box;
	text-align: center;
}

.rds-journey__heading-emphasis {
	color: #0578ff;
}

.rds-journey__subheading {
	width: min(100%, 69rem);
	margin: 0 auto clamp(1.75rem, 5vh, 3.5rem);
	padding-inline: clamp(1.5rem, 5vw, 5rem);
	box-sizing: border-box;
	color: #ffffff;
	font-family: "Ember Modern Text", sans-serif;
	letter-spacing: 0;
	text-align: center;
}

.rds-journey__track-wrap {
	/* Native horizontal scroll is the no-JS/reduced-motion/kill-switch
	   fallback — initAutoScrollMarquee sets overflow:hidden on this same
	   element once it takes over, matching horizontal-scrub.js's convention. */
	width: 100%;
	overflow-x: hidden;
}

.rds-journey__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.rds-journey__track-set {
	display: flex;
	align-items: flex-start;
	flex-shrink: 0;
	/* Between-group gap (2026-08-06 follow-up, matching a separate reference
	   crop's card spacing) is intentionally NOT the same value as
	   `--rds-journey-gap` below — that one stays tied to the exact Figma
	   864 = 2*418+28 measurement (the internal gap inside a stack/tall
	   group), while THIS gap is the space between separate mosaic units in
	   the row, sized to match that crop's visibly wider card-to-card
	   spacing (~9% of a card's own width, vs. the stack's ~4.8%) — two
	   different gaps for two different jobs, not an inconsistency. */
	gap: clamp(0.625rem, 1.25vw, 0.875rem);
	padding-right: clamp(0.625rem, 1.25vw, 0.875rem);
	/* Ratios below are the exact Figma Inspect measurements (587x418 short,
	   586x864 tall — same ~586px width on both), not an approximation:
	   row = col * (418/587) ≈ col * 0.712, and gap derives from
	   864 = 2*418 + gap ≈ 28px at that same 586-587px column width. */
	--rds-journey-col: clamp(19.140625rem, 35.9375vw, 25rem);
	--rds-journey-row: clamp(13.671875rem, 25.625vw, 17.7734375rem);
	--rds-journey-gap: clamp(0.625rem, 1.25vw, 0.875rem);
}

.rds-journey__mosaic-group {
	flex-shrink: 0;
	gap: var(--rds-journey-gap);
}

.rds-journey__mosaic-group--stack {
	/* Was overridden for the row's FIRST stack group only (a leftover
	   grid-based "wide card + offset card, empty bottom-left cell" rule
	   from an earlier round) — that empty cell is exactly the dead space
	   flagged directly (2026-08-06, "can we fill in space like this"
	   against a reference with no such gap): a plain, uniform flex stack,
	   same as every other stack group in the row, has no cell to leave
	   empty in the first place. */
	display: flex;
	flex-direction: column;
	width: var(--rds-journey-col);
}

.rds-journey__card {
	display: block;
	flex-shrink: 0;
	width: var(--rds-journey-col);
	border-radius: clamp(0.375rem, 0.8vw, 0.625rem);
	overflow: hidden;
	position: relative;
}

.rds-journey__card--row {
	width: 100%;
}

.rds-journey__card--placeholder {
	background: #acacac;
}

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

.rds-journey__card--row,
.rds-journey__card--tall,
.rds-journey__card--wide {
	height: var(--rds-journey-row);
}

.rds-journey__card--tall {
	height: calc(var(--rds-journey-row) * 2 + var(--rds-journey-gap));
}

/* Wide slot (2026-08-06, "not seeing the wide slot shape like design ref")
   — a card spanning two columns at one row's height, sitting atop a normal
   side-by-side pair of row cards (`.rds-journey__wide-row`) so the group's
   total footprint still matches the stack/tall groups' own 2-column-tall
   height exactly. */
.rds-journey__card--wide {
	width: calc(var(--rds-journey-col) * 2 + var(--rds-journey-gap));
}

.rds-journey__mosaic-group--wide-stack {
	display: flex;
	flex-direction: column;
	width: calc(var(--rds-journey-col) * 2 + var(--rds-journey-gap));
}

.rds-journey__wide-row {
	display: flex;
	gap: var(--rds-journey-gap);
}

/* `.rds-journey__card--row`'s own `width: 100%` is correct inside the
   vertical `--stack` group (100% of that column's width) but wrong here —
   inside this horizontal row, it made each of the two cards claim 100% of
   the row's own width instead of one column each, so the second card
   rendered on top of / past the first instead of sitting beside it
   (2026-08-06, "there should just be one image wide. the 2 small ones fits
   under" — confirmed directly: both cards measured 814px wide, the row's
   own full width, instead of ~393px each). Higher-specificity override
   restores one-column width for row cards specifically in this context. */
.rds-journey__wide-row .rds-journey__card--row {
	width: var(--rds-journey-col);
}

.rds-journey__card-text {
	margin: 0;
	padding: 1.25rem;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	/* Bumped up (2026-07-26, user follow-up to the heading's 64px spec update)
	   — NOT the same 64px, which measurably overflows this card (605px wide
	   at 1440px viewport): at 64px the text would only fit ~2-3 words per
	   line and the block would run far taller than intended. Chose 40px by
	   rendering real candidates (32/36/40/44px) and screenshotting each — 40px
	   wraps cleanly into 3 lines with no overflow, clearly more prominent than
	   the old 18.4px cap, while staying visually distinct from the section's
	   two big statement lines (heading/closing, both 64px). Same relative
	   line-height/letter-spacing ratios as the heading (1.1875 / -0.02em) for
	   visual consistency across this block's bold text. */
	font-size: clamp(0.9rem, 2.8vw, 2.5rem);
	line-height: 1.1875;
	/* letter-spacing: -0.02em; */
}

.rds-journey__closing {
	width: min(52rem, calc(100% - 2rem));
	/* Larger beat after the mosaic track before the Las Vegas line
	   (was "after the Road caption" — that caption was removed 2026-08-06,
	   this margin now applies directly after the track instead). */
	margin: clamp(5rem, 14vh, 8rem) auto 0;
	text-align: center;
}

.rds-journey__keynote {
	width: 100%;
	min-height: 100svh;
	margin: clamp(2rem, 7vh, 4.5rem) auto 0;
	position: relative;
	overflow: visible;
}

.rds-journey__keynote-stage {
	position: relative;
	z-index: 1300;
	top: 0;
	left: 0;
	width: 100%;
	height: 100svh;
	overflow: hidden;
	/* background: radial-gradient(circle at 72% 48%, rgba(120, 147, 198, 0.18) 0%, rgba(7, 16, 24, 0) 36%), #071018; */
	isolation: isolate;
}

.rds-journey__keynote-text {
	margin: 0;
	position: absolute;
	z-index: 3;
	left: clamp(3rem, 7.25vw, 7.5rem);
	top: 50%;
	width: min(32rem, calc(98vw - 8rem));
	text-shadow: 0 0.125rem 1.5rem rgba( 0, 0, 0, 0.35 );
	transform: translateY(-50%);
	will-change: transform, opacity;
}

.rds-journey__keynote-card {
	position: absolute;
	z-index: 2;
	left: 46.25vw;
	top: 50%;
	width: min(40rem, 40vw);
	height: min(27.75rem, 68svh);
	transform: translateY(-50%);
	border-radius: clamp(1.25rem, 3vw, 2.5rem);
	overflow: hidden;
	background:
		linear-gradient( 135deg, rgba( 255, 255, 255, 0.12 ) 0%, rgba( 255, 255, 255, 0 ) 46% ),
		#7893c6;
	container-type: size;
	    box-shadow: 0px 0px 10px #0578FF;
	will-change: left, top, width, height, border-radius;
}

.rds-journey__keynote-card--placeholder {
	background: #7893c6;
}

.rds-journey__keynote-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient( 180deg, rgba( 7, 16, 24, 0.18 ) 0%, rgba( 7, 16, 24, 0.08 ) 42%, rgba( 7, 16, 24, 0.2 ) 100% ),
		linear-gradient( 90deg, rgba( 7, 16, 24, 0.35 ) 0%, rgba( 7, 16, 24, 0.08 ) 58%, rgba( 7, 16, 24, 0.14 ) 100% );
}

.rds-journey__keynote-card img,
.rds-journey__keynote-card video {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.rds-journey__keynote-card video {
	backface-visibility: hidden;
	transform: translateZ(0);
	will-change: transform;
}

.rds-journey__keynote-card iframe {
	display: block;
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	width: max( 100cqw, 100cqh * 1.7778 );
	height: max( 100cqh, 100cqw / 1.7778 );
	border: 0;
	pointer-events: none;
	opacity: 0.72;
	transform: translate( -50%, -50% );
}

@media (max-width: 700px) {
	.rds-journey__keynote {
		min-height: 100svh;
	}

	.rds-journey__keynote-text {
		left: 1rem;
		top: 20svh;
		width: calc(100vw - 2rem);
		font-size: clamp(2rem, 10vw, 3rem);
	}

	.rds-journey__keynote-card {
		left: 50vw;
		width: calc(50vw - 1rem);
		height: clamp(7rem, 26vh, 15rem);
	}

}
