/* Reference: user-provided Figma screenshot (2026-08-02) — this content
   could not be located through the connected Figma file's API access
   despite two thorough search passes (see design.md Decision 14); the
   screenshot is the source of truth here, not a downloaded Figma export.

   Originally built as a plain 3-column static row, deliberately not the
   "locked horizontal scroll" the reference's own UX annotation mentioned
   (flagged then as an open item, ambiguous whether that annotation was a
   build instruction). Revisited 2026-08-08 ("I will be a gsap scroll
   horizontal section. same like case studies and other sections") — the
   tier row now pins and scrubs horizontally via the shared
   `horizontal-scrub.js` module (`.rds-comm-model__scroll` /
   `.rds-comm-model__tiers`, same convention as Last Mile Land's own
   `.bash-scroll`/`.bash-track`), with each tier a fixed-width flex item
   instead of an equal-fraction grid column so the row actually overflows.

   Badge gradient colors are a reasonable reading of the screenshot (Tier 1:
   pink-to-blue, Tier 2: teal-to-blue, Tier 3: solid accent blue), not
   pixel-sampled since this is a screenshot rather than a Figma export. The
   flow-arrow asset itself (2026-08-08) is a real provided SVG, not a
   screenshot approximation — pink-to-blue gradient, matching Tier 1's own
   badge. Arrow direction per tier is a real, deliberate design detail
   confirmed from the screenshot: Tier 1 flows all-forward (Amazon → DSPs,
   one-way broadcast), Tier 3 flows all-reverse (DSPs → Amazon, workshop/
   listening), Tier 2 is half-and-half (hybrid). */

/* Full screen (2026-08-08, "make this section full screen") — `min-height:
   100svh` plus centering the heading/scroll-box vertically, same convention
   as Journey Cards' own `.rds-journey.frames`, rather than a short content
   block sitting at the top of a much taller pinned section. */
.rds-comm-model {
	position: relative;
	width: 100%;
	background: #111419;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
}

/* 2026-08-08 ("make h2") — changed from a styled <p> to a real <h2>, and
   the block-specific override rule that used to live here removed entirely
   so the sitewide `h2 {}` rule in base.css (the style guide's own heading
   spec) applies instead. */
h2.rds-comm-model__heading {
	max-width: min(51rem, 88vw);
	margin: 0 auto 0;
	text-align: center;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
}

.rds-comm-model__scrub {
	/* Explicit, page-order z-index (2026-08-10, intermittent cross-section
	   overlap report) — GSAP's pin sets this to `position: fixed` while
	   active, but never gave it its own `z-index`, so it stacked at the
	   implicit default (`auto`) against every other section's pinned
	   scrub root, which also defaults to `auto`. Two `auto`-stacked fixed
	   elements are tie-broken by DOM/paint order, which isn't guaranteed
	   stable across engines/timing during a fast scroll — an explicit value
	   here, lower than VisID Evolution's below (the next section down),
	   makes the later section deterministically win instead of relying on
	   that implicit tie-break. */
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 100svh;
	padding: clamp(1.5rem, 4vw, 3rem);
	box-sizing: border-box;
	overflow: hidden;
}

.rds-comm-model__scroll {
	position: relative;
	z-index: 1;
	width: 100%;
	border-radius: clamp(1.25rem, 2.5vw, 1.75rem);
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
}

.rds-comm-model__tiers {
	display: flex;
	align-items: stretch;
	gap: 0;
	width: 100%;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.rds-comm-model__tiers::after {
	content: "";
	flex: 0 0 var(--rds-manual-carousel-end-padding, 0);
	width: var(--rds-manual-carousel-end-padding, 0);
	height: 1px;
}

/* Transform-driven scrub takes over from the native `overflow-x: auto`
   fallback above once `initHorizontalScrubTransition` engages (same
   two-state pattern as Last Mile Land's `.bash-scroll`/`.bash-track`) —
   `overflow: visible` lets the track paint past its own nominal box so
   GSAP's transform can position it; the outer `.rds-comm-model__scroll`
   (which stays `overflow: hidden`) is what actually clips it to one tier's
   width at a time. No explicit track width is needed here (unlike Last Mile
   Land's `width: max-content`) — with each tier at `flex: 0 0 100%` below,
   three non-wrapping 100%-basis children naturally lay out to three times
   the track's own width on their own. */
.rds-comm-model__scrub.is-horizontal-scrub-active .rds-comm-model__tiers {
	overflow: visible;
}

.rds-comm-model__tiers::-webkit-scrollbar {
	display: none;
}

/* Manual "next tier" arrow (2026-08-11, "deactive gsap horizon scroll. make
   it a manual scroll/carousuel that can jump to next slide when click on
   arrow. make arrow vissible. maybe box shdow") — replaces the GSAP pinned
   scrub with a plain native `overflow-x: auto` row (already the fallback
   state above) plus this click-to-advance control. Positioned over the
   scroll area rather than inside a tier so it stays put while tiers scroll
   underneath it. */
.rds-comm-model__nav-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(3.5rem, 6vw, 4.75rem);
	height: clamp(3.5rem, 6vw, 4.75rem);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.rds-comm-model__nav-arrow--next {
	right: clamp(1.5rem, 4vw, 3rem);
}

.rds-comm-model__nav-arrow--prev {
	left: clamp(1.5rem, 4vw, 3rem);
}

.rds-comm-model__nav-arrow--prev .rds-horizontal-scroll-arrow-icon {
	transform: rotate(180deg);
}

.rds-comm-model__nav-arrow:hover,
.rds-comm-model__nav-arrow:focus-visible {
	transform: translateY(-50%) scale(1.08);
}

.rds-comm-model__nav-arrow:focus-visible {
	outline: 0.1875rem solid #ffffff;
	outline-offset: 0.25rem;
}

.rds-comm-model__nav-arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

.rds-comm-model__nav-arrow svg {
	display: block;
	width: 72%;
	height: 72%;
}

/* Each tier takes the full width of the frame — one card fully visible at
   a time, sliding over to the next as the section scrubs (2026-08-08, "each
   tier should take 100% width") — rather than a peek-ahead multi-card row. */
.rds-comm-model__tier {
	flex: 0 0 100%;
	scroll-snap-align: center;
}

.rds-comm-model__tier--image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(100svh - clamp(3rem, 8vw, 6rem));
	min-height: 32rem;
}

.rds-comm-model__model-image {
	width: 100%;
	height: 100%;
	margin: 0;
}

.rds-comm-model__model-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 2026-08-08: `font-size` removed — falls through to the sitewide `p {}`
   style-guide rule in base.css instead of a bespoke per-block size. */
.rds-comm-model__badge {
	margin: 0 0 clamp(1.75rem, 5vh, 2.75rem);
	padding: clamp(2rem, 5vh, 2.85rem) clamp(2rem, 4.6vw, 3.25rem);
	border-radius: clamp(1rem, 2vw, 1.5rem);
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	/* letter-spacing: -0.04em; */
}

.rds-comm-model__badge--gradient-1 {
	background: linear-gradient(90deg, #c570db 0%, #0578ff 100%);
}

.rds-comm-model__badge--gradient-2 {
	background: linear-gradient(90deg, #4cc9c9 0%, #0578ff 100%);
}

.rds-comm-model__badge--solid {
	background: #0578ff;
}

/* 2026-08-08: `font-size`/`line-height` removed — falls through to the
   sitewide `p {}` style-guide rule in base.css instead of a bespoke
   per-block size. */
.rds-comm-model__description {
	max-width: min(74rem, 86vw);
	margin: 0 0 clamp(1.65rem, 4.6vh, 2.5rem) clamp(1rem, 5vw, 3.5rem);
	color: #ffffff;
	font-family: "Ember Modern Text", sans-serif;
	font-weight: 400;
	/* letter-spacing: -0.02em; */
}

.rds-comm-model__flow-heading {
	margin: 0 0 clamp(0.9rem, 4vh, 16.25rem) clamp(1rem, 5vw, 3.5rem);
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 2.8vw, 2.9rem);
	line-height: 1;
	/* letter-spacing: -0.03em; */
}

.rds-comm-model__flow {
	margin: 0;
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 1.8vw, 1.5rem);
	padding: 0 clamp(1rem, 5vw, 3.5rem);
}

.rds-comm-model__flow-label {
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	/* letter-spacing: -0.035em; */
}

.rds-comm-model__arrows {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.65rem, 1.3vw, 1.15rem);
	flex: 0 1 auto;
	margin-left: clamp(1rem, 2.35vw, 1.75rem);
	overflow: hidden;
}

/* 2026-08-08 ("added this frame/section. following current style guide")
   swaps the old plain-blue CSS border-triangle for the provided gradient
   arrow asset (pink→blue, matches Tier 1's own badge gradient) — a real
   SVG background-image rather than a border trick since the border-trick
   version can't carry a gradient fill. The asset points right by default
   (flat edge left, tip right); `forward` needs no transform, `reverse`
   mirrors it with `scaleX(-1)` rather than needing a second asset. */
.rds-comm-model__arrow {
	flex: 0 0 auto;
	width: clamp(3rem, 4.35vw, 4.4rem);
	height: clamp(3.1rem, 4.45vw, 4.55rem);
	background-image: url("/wp-content/plugins/rds-pitch-landing/assets/images/communication-model/arrow.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.rds-comm-model__arrow--connect {
	background-image: url("/wp-content/plugins/rds-pitch-landing/assets/images/communication-model/arrow-connect.svg");
}

.rds-comm-model__arrow--iotr {
	background-image: url("/wp-content/plugins/rds-pitch-landing/assets/images/communication-model/arrow-iotr.svg");
}

.rds-comm-model__arrow--reverse {
	transform: scaleX(-1);
}

.rds-comm-model__arrow--iotr.rds-comm-model__arrow--forward {
	transform: scaleX(-1);
}

.rds-comm-model__arrow--iotr.rds-comm-model__arrow--reverse {
	transform: none;
}

/* 2026-08-08 ("scale to make it look like this") — the global `p {}` style-
   guide rule (`font-size: 3.125rem`, no clamp) that `.badge`/`.description`/
   `.flow-label` now fall through to is a fixed size, not responsive — fine
   at desktop widths, but at narrow viewports it badly overflows: the badge
   pill clips its own label mid-word, and the description/flow row run past
   the viewport edge instead of wrapping. These sizes bring each element back
   to fitting/wrapping cleanly within the frame at phone widths, matching the
   reference screenshot, without touching the desktop sizing above (which
   intentionally now comes from the shared `p {}`/`h2 {}` rules). */
@media (max-width: 480px) {
	.rds-comm-model {
		padding: clamp(2rem, 4vh, 3rem) 0 0;
	}

	h2.rds-comm-model__heading {
		margin-bottom: 2.5rem;
		padding: 0 1.25rem;
	}

	.rds-comm-model__scrub {
		padding: clamp(2rem, 4vh, 3rem) 1.25rem;
	}

	.rds-comm-model__flow-heading {
		font-size: 0.9rem;
	}

	.rds-comm-model__arrow {
		width: 1.5rem;
		height: 1.5625rem;
	}
}