/* Reference: amazon-design-refs/sections/breakouts-networking.png (a hand crop,
   per the Task 1.2 caveat — lower fidelity than a real per-scene Figma export).
   Colors/proportions pixel-sampled, not guessed: background #111419 (consistent
   sitewide), placeholder gray #B5B5B5 (measured — matches Connective Tissue
   Zones' own independently-measured value). Row layout measured at the
   reference's native 1719px width: left column ~725px, right column ~870px
   (ratio ~1:1.2), ~30px gap between/within columns (~1.75% of section width).
   Left column's two stacked images are equal height (~500px each) with the
   same 30px gap between them, matching the right panel's combined height
   exactly (1030px) — a deliberate symmetric split, not two mismatched boxes. */

.rds-breakouts {
	position: relative;
	/* Same convention as every other frame except Hero (see Nav's MODULES.md
	   entry, "Frames (except Hero) now render above Nav, by deliberate
	   design") — higher than Nav's own z-index:1000 so this section visually
	   covers Nav's background/logo wherever the two overlap. */
	z-index: 1200;
	width: 100%;
	background: #111419;
	padding: clamp(3rem, 6vw, 5rem) 4.5% clamp(3rem, 6vw, 5rem);
	box-sizing: border-box;
}

.rds-breakouts__heading {
	margin: 0 auto clamp(2.5rem, 6vw, 5rem);
	max-width: 56rem;
	text-align: center;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	/* Same clamp scale as Journey Cards' heading/closing — consistent bold
	   statement-text sizing across the page; no new exact spec was provided
	   for this section, and this is the same reasonable-estimate convention
	   already used for Connective Tissue Zones. */
	font-size: clamp(1.75rem, 4.5vw, 4rem);
	line-height: 1.1875;
	/* letter-spacing: -0.02em; */
}

.rds-breakouts__row {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(1rem, 1.75vw, 1.5rem);
	align-items: stretch;
}

.rds-breakouts__stack {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 1.75vw, 1.5rem);
}

.rds-breakouts__image {
	display: block;
	width: 100%;
	aspect-ratio: 29 / 20;
	border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
	overflow: hidden;
	position: relative;
}

.rds-breakouts__image--placeholder {
	background: #b5b5b5;
}

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

.rds-breakouts__panel {
	position: relative;
	width: 100%;
	aspect-ratio: 87 / 103;
	border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rds-breakouts__panel--placeholder {
	background: #b5b5b5;
}

.rds-breakouts__panel-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Same WCAG-driven contrast rationale as Immersive Keynote's scrim — only
   rendered once a real photo is uploaded (the gray placeholder is dark
   enough on its own for the placeholder-state text). */
.rds-breakouts__panel-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.4);
}

.rds-breakouts__panel-text {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: clamp(1.5rem, 4vw, 3rem);
	max-width: 26rem;
	text-align: center;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	font-size: clamp(1.75rem, 4.5vw, 4rem);
	line-height: 1.1875;
	letter-spacing: -0.02em;
}

@media (max-width: 700px) {
	.rds-breakouts__row {
		grid-template-columns: 1fr;
	}
}