/*
 * trbc/feature-row — a picture beside a paragraph.
 *
 * Three decisions worth keeping:
 *
 *  1. The split is asymmetric (see MEDIA_WIDTHS in FeatureRowData.php). At
 *     50/50 the paragraph runs to ~90 characters a line and the picture stops
 *     leading, so the row reads as two things rather than one.
 *  2. The media has a fixed aspect ratio rather than matching the text
 *     column's height. Letting height come from the copy means a row with one
 *     extra sentence gets a taller picture, and a stack of rows down a page
 *     ends up with pictures of five different shapes.
 *  3. Alternation is a modifier, not automatic. `:nth-child(even)` looked
 *     clever and then broke the moment someone reordered the sections.
 */

.trbc-feature {
	--trbc-feature-media: 46%;
	--trbc-feature-gap: var(--trbc-space-12);
	--trbc-feature-ratio: 16 / 10;

	display: flex;
	align-items: center;
	gap: var(--trbc-feature-gap);
	width: 100%;
	font-family: var(--trbc-face);
	color: var(--trbc-ink);
}

.trbc-feature--media-right {
	flex-direction: row-reverse;
}

/* Consecutive feature rows need more air between them than the generic
   row rhythm gives: each one is a picture plus a heading, and at the standard
   gap the next picture starts before the previous paragraph has finished. */
.et_pb_row:has(.trbc-feature) + .et_pb_row:has(.trbc-feature) {
	margin-top: var(--trbc-space-16);
}

@media (max-width: 980px) {
	.et_pb_row:has(.trbc-feature) + .et_pb_row:has(.trbc-feature) {
		margin-top: var(--trbc-space-12);
	}
}

/* ---------- media ---------- */
.trbc-feature__media {
	flex: 0 0 var(--trbc-feature-media);
	aspect-ratio: var(--trbc-feature-ratio);
	border-radius: var(--trbc-radius-media);
	background-color: var(--trbc-surface);
	/* One elevation step at rest across the whole library — the feature photo
	   used to sit a step higher than every other card for no reason anyone
	   could name. */
	box-shadow: var(--trbc-shadow-1);
	overflow: hidden;
}

.trbc-feature__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.trbc-feature--fit-contain .trbc-feature__image {
	object-fit: contain;
	/* A logo needs air around it; a photograph does not. */
	padding: var(--trbc-space-8);
}

/* No picture supplied: a brand field, never an empty grey box. Same treatment
   as the page header's no-photo state so the two agree. */
.trbc-feature--no-media .trbc-feature__media {
	background-image:
		radial-gradient(90% 120% at 12% 0%, rgba(73, 149, 209, 0.5) 0%, transparent 60%),
		radial-gradient(80% 100% at 100% 100%, rgba(21, 86, 134, 0.55) 0%, transparent 62%),
		linear-gradient(150deg, #143c5a 0%, #0d2537 100%);
}

/* ---------- body ----------
 * flex-basis 0 rather than auto, and the measure capped on the text itself
 * rather than on this box.
 *
 * With `max-width` here the body was narrower than its share of the row, and
 * the leftover space had to go somewhere: in a media-right (row-reverse) row,
 * flex packs toward the main-start — which is the visual right — so the words
 * drifted inward and stopped lining up with the rows above and below. Letting
 * the body fill its share keeps both edges of the page true whichever side the
 * picture is on.
 */
.trbc-feature__body {
	flex: 1 1 0;
	min-width: 0;
}

.trbc-feature__eyebrow {
	margin: 0 0 var(--trbc-space-2);
	font-size: var(--trbc-text-xs);
	font-weight: var(--trbc-weight-bold);
	letter-spacing: var(--trbc-tracking-wide);
	text-transform: uppercase;
	/* --trbc-brand is 2.98:1 on the page ground and fails AA at this size. */
	color: var(--trbc-brand-deep);
}

.trbc-feature__title {
	margin: 0 0 var(--trbc-space-3);
	/* Titles here are one or two words; the cap stops a long one running the
	   full width of a wide column and losing its relationship to the picture. */
	max-width: 18ch;
	font-size: var(--trbc-text-display);
	font-weight: var(--trbc-weight-bold);
	line-height: var(--trbc-leading-tight);
	letter-spacing: var(--trbc-tracking-display);
	color: var(--trbc-ink);
	text-wrap: balance;
}

.trbc-feature__text {
	margin: 0;
	max-width: 46ch;
	font-size: var(--trbc-text-md);
	line-height: var(--trbc-leading-normal);
	color: var(--trbc-ink-soft);
}

/* ---------- action ----------
   Styling lives in css/buttons.css now; only the placement is the row's
   business. The bespoke chevron-link rules that used to sit here were the
   reason this component could not agree with the page header about what an
   action looks like. */
.trbc-feature__link {
	margin-top: var(--trbc-space-5);
}

/* ---------- panel tone ----------
   Lifts the whole row onto a surface. Use sparingly — one panel in a stack of
   plain rows is emphasis; four in a row is just a striped page. */
.trbc-feature--panel {
	padding: var(--trbc-space-10);
	border-radius: var(--trbc-radius-xl);
	background: var(--trbc-surface);
	box-shadow: var(--trbc-shadow-1);
}

.trbc-feature--panel .trbc-feature__media {
	box-shadow: none;
}

/* ---------- stacking ----------
   At tablet portrait the two columns stop being two columns. Media first
   regardless of media_side: on a narrow screen "left" and "right" are
   meaningless, and a picture is the better thing to lead with.
   row-reverse would put it second, so both directions are normalised. */
@media (max-width: 980px) {
	.trbc-feature,
	.trbc-feature--media-right {
		flex-direction: column;
		align-items: stretch;
		gap: var(--trbc-space-6);
	}

	.trbc-feature__media {
		flex: 0 0 auto;
		width: 100%;
		--trbc-feature-ratio: 16 / 9;
	}

	.trbc-feature__title,
	.trbc-feature__text {
		max-width: none;
	}

	.trbc-feature--panel {
		padding: var(--trbc-space-6);
	}
}

@media (max-width: 768px) {
	.trbc-feature--fit-contain .trbc-feature__media {
		padding: 0;
	}

	.trbc-feature--fit-contain .trbc-feature__image {
		padding: var(--trbc-space-5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.trbc-feature__link {
		transition: none;
	}
}