/* Reference: amazon-design-refs/sections/connective-tissue-zones.png (hand-cropped
   from the full composite, and itself truncated — the true section boundary was
   found by pixel-matching this crop and the next section's crop against
   amazon-design-refs/pages/full-design-v1.png: this section spans y=6300–7850
   there). Cards visibly bleed past both left/right edges of the reference frame —
   the "there's more, scroll me" carousel signal — not a fixed grid like Journey
   Cards. Colors/measurements pixel-sampled from that reconstructed full crop, not
   guessed: background #111419 (consistent with every other section), placeholder
   card gray #B5B5B5 (distinct from Journey Cards' own #ACACAC — each section's
   measured value is treated as authoritative rather than forced to match), ~699×613
   card box (~8:7 aspect ratio), ~45–50px gap between cards. Corner radius and the
   clamp() scaling factors are reasonable estimates, same caveat as Journey Cards'
   own MODULES.md note. */

.rds-connective {
	/* Full viewport height (2026-07-26, user request) so this reads as its
	   own full-screen "scene." The horizontal-scrub pin (assets/js/transitions/
	   horizontal-scrub.js) is off by default as of 2026-08-06 ("disable the
	   gsap horizontal scroll for section") — the card row auto-scrolls on its
	   own via the shared auto-scroll-marquee module instead, same as Journey
	   Cards, and this section now just scrolls normally past it. Content stays
	   vertically centered via .rds-connective__inner (absolute + translateY
	   (-50%)) regardless, since that centering doesn't depend on the scrub
	   module ever running. */
	position: relative;
	z-index: 1200;
	min-height: 100vh;
	width: 100%;
	background: #111419;
	box-sizing: border-box;
}

.rds-connective__inner {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	padding: clamp(3rem, 6vw, 6rem) 0;
	box-sizing: border-box;
}

/* Compound selector (not just .rds-connective__heading) so this reliably
   beats base.css's later-loaded `.rds-sub-header { margin: 0 }` at tied
   specificity — confirmed directly (2026-08-06): with a single-class
   selector the margin computed to 0px instead of this rule's own value,
   same base.css-loads-last issue documented on `.rds-journey.frames`'s own
   z-index rule. */
.rds-connective__inner .rds-connective__heading {
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	max-width: 55rem;
	padding: 0 clamp(1.5rem, 4vw, 3rem);
	text-align: center;
}

.rds-connective__row {
	width: 100%;
	/* Native fallback when JS/GSAP hasn't taken over the scrub (no-JS,
	   reduced-motion, or this block's own scrollAnimationEnabled off) — the
	   row is still fully browsable via native horizontal scroll/swipe. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}

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

.rds-connective__track-set {
	display: flex;
	align-items: flex-start;
	flex-shrink: 0;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.rds-connective__card {
	flex: 0 0 auto;
	width: clamp(16rem, 38vw, 26rem);
	aspect-ratio: 8 / 7;
	border-radius: clamp(1rem, 2vw, 1.75rem);
	background: #b5b5b5;
	overflow: hidden;
	scroll-snap-align: center;
}

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