/* Image + text band. Tokens live in assets/base.css. */

/*
 * The band is two boxes. The section paints the theme field, bleeds the full
 * page width (`.rkl-band--bleed`) and owns the vertical inset; the inner is the
 * flex row and carries `.rkl-band`, which is where the design's 1344/368
 * content column comes from — the theme's `wideSize` 1340 and its
 * `clamp(30px, 5vw, 50px)` root padding cannot produce it (landmine 61). One
 * element cannot both bleed and hold the column, which is why the dark instance
 * needs the pair.
 */
.rkl-media-text {
	font-family: var(--rkl-font);
}

/*
 * The row itself: Figma 2543:45778 — gap 80, vertically centred, padding 24/48.
 * No radius: the inner paints no background, has no border and clips nothing, so
 * a radius here would draw nothing at all. The frame's radius 8 belongs to the
 * boxes that do paint — the media box below carries it — and the dark field
 * behind the row is square, because the section bleeds and butts flush against
 * the stat band above it.
 * No width or max-width here: `.rkl-band` owns that, in one place.
 */
.rkl-media-text__inner {
	align-items: center;
	display: flex;
	gap: 80px;
	padding: 24px 48px;
}

/*
 * The page-builder stylesheet resets descendants to `content-box`, which is how
 * a leader card inflated once already. `.rkl-card *` sets `inherit`, at the same
 * specificity, so this block states it outright.
 */
.rkl-media-text *,
.rkl-media-text *::before,
.rkl-media-text *::after {
	box-sizing: border-box;
}

/* Figma 2543:51029 pulls the list side in: 24 24 24 48. */
.rkl-media-text.is-mode-list .rkl-media-text__inner {
	padding: 24px 24px 24px 48px;
}

/*
 * The design only draws the list with the image on the left. The editor can
 * still pick the other side, so the same inset is mirrored rather than left
 * lopsided — the tight 24 stays on the text side, the 48 on the media side.
 */
.rkl-media-text.is-mode-list.is-media-right .rkl-media-text__inner {
	padding: 24px 48px 24px 24px;
}

/*
 * mediaSide=right — the media is first in the DOM, so the flip is the row's.
 * `row-reverse` alone packs the pair against the *right* of the content box,
 * because its main-start is the right edge; the frame packs it left — text at
 * 96, media 576..1327, inside a 96..1344 content box, with the 17px of slack
 * left over on the right. In row-reverse, `flex-end` is that visual left. The
 * text column's `flex-grow` currently absorbs the 17px, so nothing is free to
 * distribute and this only shows once it stops — see the text column below.
 */
.rkl-media-text.is-media-right .rkl-media-text__inner {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

/*
 * theme=light is transparent: the page's own background shows through.
 */
.rkl-media-text.is-theme-light {
	background: transparent;
	color: var(--rkl-black);
}

/*
 * theme=dark paints its own field, edge to edge — the section is the bleeding
 * box, so the frame's green/red corner glow is this background rather than the
 * page's, and it stops where the band stops. Two radial gradients over
 * #0a0a0a, read off Figma
 * 2543:45778: red rising from the bottom-left corner, green from centre-bottom.
 * `#0a0a0a` is the frame's own near-black, not `--rkl-black` (#1e201e) — the
 * glow needs the darker ground to read.
 */
.rkl-media-text.is-theme-dark {
	background:
		radial-gradient(70% 120% at 8% 100%, rgba(221, 41, 54, 0.55) 0%, rgba(10, 10, 10, 0) 60%),
		radial-gradient(60% 100% at 45% 108%, rgba(2, 149, 97, 0.55) 0%, rgba(10, 10, 10, 0) 62%),
		#0a0a0a;
	color: var(--rkl-white);
}

/*
 * The vertical inset, off the frames and measured against the field rather than
 * the row: the dark band's field (Rectangle 2324) is 1064..1854 while its
 * content frame (Frame 4020) is 1184..1734, so 120px above and below, on top of
 * the inner's own 24. The light instances are transparent and sit straight on
 * the page field, so they add nothing.
 *
 * These hang off the `--dark` / `--light` modifier rather than `is-theme-*`
 * because the modifier is what base.css keys the page's rhythm on — the flush
 * join `.rkl-stat-band + .rkl-media-text--dark` — so the band's page-level
 * geometry is all one class family.
 */
.rkl-media-text--light {
	padding-block: 0;
}

.rkl-media-text--dark {
	padding-block: 120px;
}

/*
 * theme=inherit: no field, no ink, no inset. The band is inside a container that
 * paints all three — on Apie mus that is `rkl/story-band`, whose single gradient
 * runs behind two bands and would show a seam if this one painted its own share
 * of it. The container also owns the rhythm between its children (80px there
 * against the page's 64), which is why the inset is 0 rather than the dark
 * instance's 120.
 */
.rkl-media-text--inherit {
	padding-block: 0;
}

.rkl-media-text.is-theme-inherit {
	background: transparent;
	color: inherit;
}

/* Nothing configured yet. Width, not an auto margin: an auto inline margin on a
   flex item suppresses `stretch` (landmine 38). */
.rkl-media-text__empty {
	color: var(--rkl-grey-05);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	text-align: center;
	width: 100%;
}

/* Media ------------------------------------------------------------------- */

/*
 * NO `background` here, and that is the decision rather than an omission.
 *
 * This box is what a visitor looks at until the photograph decodes, so what
 * sits behind it matters — and at this block the answer is a *setting*. The
 * field is #0a0a0a plus two corner glows on `is-theme-dark`, the page's own
 * surface on `is-theme-light`, and whatever container paints it on
 * `is-theme-inherit` (`rkl/story-band` on Apie mus, a green ramp into black).
 * No single colour stated here is right for all three, and a wrong one is worse
 * than none: transparent lets the band's own field show through, which is right
 * at every setting.
 *
 * That only works because render.php withholds `data-rkl-img` from the image
 * inside. base.css's `img[data-rkl-img]:not(.is-loaded)` paints #f9f9f9 on the
 * `<img>` at the box's full size, which covers this box regardless of what it
 * is or is not painting — measured 0.947 luminance on a 0.003 band. And its
 * companion `img[data-rkl-img].is-loaded { background: none }` means moving the
 * colour onto the image instead is not a fix either.
 */
.rkl-media-text__media {
	border-radius: var(--rkl-radius);
	/*
	 * Figma's media box is 751×502. The basis is the frame's, but it shrinks:
	 * 751 + 80 gap + 400 text + 96 padding = 1327, and the desktop layout starts
	 * at 1025, so an unshrinkable `0 0 751px` would push the band off screen for
	 * every viewport between the two. `object-fit: cover` absorbs the reflow.
	 */
	flex: 0 1 751px;
	height: 502px;
	min-width: 0;
	overflow: hidden;
	position: relative;
}

.rkl-media-text__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/*
 * The parallax overscan. The photograph is 6% taller than its box and starts 3%
 * above it, so the ±3% drift `render.php` asks for has room at both ends and the
 * box never shows an edge.
 *
 * Small on purpose: the overscan is *zoom*. `cover` fits the photograph to the
 * taller box, so 6% of overscan enlarges the frame's crop by 6% — and these two
 * photographs are node exports of exactly the frame's crop, sliced artwork
 * included. An earlier build used 12 and the slices came out visibly larger than
 * in Figma.
 *
 * `position: absolute` because the box's height is fixed (502) and the image has
 * to be able to exceed it; `overflow: hidden` on the box above already clips it.
 */
.rkl-media-text.is-parallax .rkl-media-text__media img {
	height: 106%;
	left: 0;
	position: absolute;
	top: -3%;
	transform: translate3d(0, var(--rkl-parallax, 0px), 0);
	will-change: transform;
}

/*
 * overlay=red — the frame's 154.44° wash across the dark band's photo. On the
 * box rather than the `<img>` so it also covers the stacked layers in list
 * mode, and `pointer-events: none` so it never swallows a row hover.
 */
.rkl-media-text.is-overlay-red .rkl-media-text__media::after {
	background: linear-gradient(154.44deg, rgba(251, 69, 64, 0) 55.946%, rgb(251, 69, 64) 99.074%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/*
 * List mode stacks one layer per row and cross-fades between them. `transition`,
 * never `animation: … both`: a filling animation leaves the element a permanent
 * stacking context and containing block, which is how a fixed-position sheet
 * ended up pinned inside a card (landmines 24 and 35).
 */
.rkl-media-text__layer {
	inset: 0;
	opacity: 0;
	position: absolute;
}

.rkl-media-text__layer.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.rkl-media-text__layer {
		transition: opacity 0.2s ease;
		will-change: opacity;
	}
}

/* Text column ------------------------------------------------------------- */

.rkl-media-text__text {
	display: flex;
	/*
	 * 400 in the frame, and it must not grow.
	 *
	 * The band as drawn is 48 + 751 + 80 + 400 + 48 = 1327 inside a 1344 column,
	 * so 17px of slack has to land somewhere, and letting the text absorb it was
	 * wrong in two visible ways. Measured against the frame at a 1440 viewport:
	 * the divider rules under `mode: list` came out 441 wide instead of 400 —
	 * the list is the one place the column's width is *drawn* — and with
	 * `mediaSide: right` the growing text pushed the media to end at 1344
	 * instead of the frame's 1327, so `justify-content: flex-end` had no free
	 * space left to distribute and did nothing.
	 *
	 * Fixed at 400, the slack sits at the end of the row, which is exactly where
	 * the frame leaves it: text 96..496, gap, media 576..1327, 17px to the
	 * padding edge.
	 */
	flex: 0 0 400px;
	flex-direction: column;
	gap: 24px;
	justify-content: center;
	min-width: 0;
}

/*
 * H2 — Boldonse 400, 28/1.9 uppercase at 1440, 20 on the mobile frame. Fluid
 * rather than a hard step, and `color: inherit` so the theme rule above owns the
 * colour instead of the theme's own heading styles.
 */
.rkl-media-text__title {
	color: inherit;
	font-family: "Boldonse", var(--rkl-font);
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 400;
	line-height: 1.9;
	margin: 0;
	text-transform: uppercase;
}

/* Body 2. Weight is stated: the theme inherits 300 and Poppins would be
   synthesised a shade too light (landmine 34). */
.rkl-media-text__body {
	color: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

/*
 * `.rkl-cta` (+ `--outline` / `--outline-light`) is the shared button; the
 * classes come from `ctaStyle`. `align-self` keeps it at its own width — a flex
 * column would otherwise stretch it across all 400px, which the frame does not
 * draw.
 */
.rkl-media-text__cta {
	align-self: flex-start;
	text-decoration: none;
}

/* Divider list ------------------------------------------------------------ */

.rkl-media-text__list {
	display: flex;
	flex-direction: column;
}

/*
 * Rows are buttons, so the UA button box has to be undone completely. Border on
 * top and bottom with a -1px bottom margin so neighbours share one line; the
 * last row keeps both of its own, which is why it drops the negative margin
 * instead of pulling whatever follows the list up by a pixel.
 */
.rkl-media-text__row {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--rkl-grey-01);
	border-top: 1px solid var(--rkl-grey-01);
	color: inherit;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	/* 0, not 8 — the caret carries its own trailing margin. See __caret below. */
	gap: 0;
	margin: 0 0 -1px;
	padding: 24px 8px;
	text-align: left;
	width: 100%;
}

.rkl-media-text__row:last-child {
	margin-bottom: 0;
}

.rkl-media-text__row:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: -2px;
}

/*
 * The list is only drawn on the light band, but the combination is selectable,
 * and `--rkl-grey-01` on the near-black field is invisible. Same divider,
 * measured off the white side.
 */
.rkl-media-text.is-theme-dark .rkl-media-text__row {
	border-bottom-color: rgba(255, 255, 255, 0.24);
	border-top-color: rgba(255, 255, 255, 0.24);
}

.rkl-media-text.is-theme-dark .rkl-media-text__row:focus-visible {
	outline-color: var(--rkl-white);
}

/*
 * The caret takes no room until its row is active, so the label moves.
 *
 * That is the design, and it was worth checking rather than assuming: in the
 * main frame and in both advert alternates (2543:53390, 2543:53483) the inactive
 * labels start on the row's own 8px padding and only the active one is indented
 * by the caret — measured 27px apart against the 20 + 8 the caret and its gap
 * come to. Reserving the box instead keeps the label still, which is the calmer
 * behaviour and is what this block did first, but it is not what the design
 * draws and the difference is plainly visible on four stacked rows.
 *
 * So the shift stays and is made deliberate instead: the caret animates its own
 * width and trailing margin, which slides the label rather than jumping it. The
 * row's `gap` is 0 for the same reason — a gap would hold 8px open next to a
 * zero-width caret and put the inactive labels at 16 instead of 8.
 */
.rkl-media-text__caret {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	height: 20px;
	justify-content: center;
	margin-inline-end: 0;
	opacity: 0;
	overflow: hidden;
	width: 0;
}

.rkl-media-text__row.is-active .rkl-media-text__caret {
	margin-inline-end: 8px;
	opacity: 1;
	width: 20px;
}

.rkl-media-text__caret-icon {
	display: block;
	flex: 0 0 20px;
}

/*
 * Transition, not animation: a filling animation would leave every row a
 * stacking context for good (landmines 24 and 35).
 */
@media (prefers-reduced-motion: no-preference) {
	.rkl-media-text__caret {
		transition: width 0.2s ease, margin-inline-end 0.2s ease, opacity 0.2s ease;
	}
}

/* Subline. */
.rkl-media-text__label {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}

/* BREAKPOINT: 1024px. Mobile frames 2591:67569 / 67590 / 67596 / 67602. */
@media (max-width: 1024px) {
	/*
	 * The dark field's inset on the mobile frame: 1066..1737 against a content
	 * frame of 1106..1697, so 40 rather than 120.
	 */
	.rkl-media-text--dark {
		padding-block: 40px;
	}

	/*
	 * The stack. `row-reverse` must not survive it — stacked, it would put the
	 * text above the image, and every mobile frame leads with the image. Its
	 * rule is (0,3,0) and the list mode's padding is (0,3,0)/(0,4,0), so each of
	 * those selectors is repeated here rather than hoping a (0,1,0) rule wins.
	 */
	.rkl-media-text__inner,
	.rkl-media-text.is-media-right .rkl-media-text__inner,
	.rkl-media-text.is-mode-list .rkl-media-text__inner,
	.rkl-media-text.is-mode-list.is-media-right .rkl-media-text__inner {
		/*
		 * `align-items: center` is the desktop rule's vertical centring. Stacked
		 * it becomes *horizontal* centring, which shrink-wraps both columns:
		 * measured at 500px wide, the list column came out 340 instead of the
		 * full 468 and its rows with it, because `width: auto` on a centred flex
		 * item is a fit-content width, not a stretched one. Back to `stretch`.
		 */
		align-items: stretch;
		flex-direction: column;
		gap: 24px;
		/*
		 * And `justify-content` back to the top: `flex-end` is the visual left
		 * of a row-reverse row, but in a column it means the bottom.
		 */
		justify-content: flex-start;
		padding: 24px 0;
	}

	.rkl-media-text__media {
		/* The mobile frame's media is 368×246 — the 400 frame less its gutters. */
		aspect-ratio: 368 / 246;
		flex: auto;
		height: auto;
		width: 100%;
	}

	/*
	 * `flex: auto` (= `1 1 auto`) is still the right reset against the desktop
	 * `flex: 0 0 400px`, but not for the reason the shorthand suggests: stacked,
	 * the main axis is vertical, so that 400px basis would be read as a *height*
	 * and lock the column 400 tall. `auto` clears it back to the content height.
	 * The full width is not `flex`'s doing at all — it comes from the container's
	 * `align-items: stretch` above plus `width: auto` here.
	 */
	.rkl-media-text__text {
		flex: auto;
		width: auto;
	}

	/* The mobile frame's H2 is 20; the clamp still reads ~22 at 1024. */
	.rkl-media-text__title {
		font-size: 20px;
	}
}