/**
 * sigma/media-text -- the comps' founder block. Loaded only where the
 * block renders (block.json "style" field).
 *
 * Geometry is the comp's, to the pixel, at a 1440 viewport
 * (docs/qa/comp-spec/SPEC-home.md S05, y measured from the section's
 * top edge at 2090):
 *
 *   image      x=49   w=694 h=387   y=+124           (IMAGE  49.1 / 693.7 / 387.0)
 *   rule       x=750  0.75px navy   y=+66 to +560    (RULE   749.6, h=493.9)
 *              -- now drawn at x=772, see --media-text-rule-offset below
 *   headline   x=802  70px          em top y=+113    (TEXT   802 / 2203)
 *   paragraphs x=802  20px, 22 pitch, 22 between     (TEXT   2300, 2322 | 2365 ...)
 *   name       x=122  50px white    y=+267 from image top  (TEXT 122 / 2481)
 *   title      x=122  30px white    y=+325 from image top  (TEXT 122 / 2539)
 *   play       44x58 white, centred on the image     (FILL   375 / 2382)
 *   button     x=802  227x33, 1.5px gold-bright      y=+478 (BOX 802.5 / 2567.9)
 *
 * Those offsets have no design-token equivalent (they are positions,
 * not a spacing scale), so they are declared once as block-scoped
 * custom properties below and used by name -- one place to correct if
 * a re-measure ever moves one. Everything that IS a token (type sizes,
 * weights, leading, colours, the 8px/32px gaps) uses the token.
 *
 * The block owns its own 1440px canvas: the comp's content starts at
 * x=49, and no sigma/section width reaches that far out, so the layout
 * wraps it in nothing (section: null, like blocks/hero) and
 * data-full-bleed keeps assets/css/layout.css from capping it. Above
 * 1440 the canvas centres; below it the two columns shrink in the comp's
 * 694:538 proportion until 1024, where they stack.
 *
 * Buttons: assets/css/base.css's shared .sigma-button rule is the box
 * (padding, border, type) every registry button in the theme now uses;
 * .sigma-button.media-text__button below is only the size and position
 * that are genuinely this block's own.
 */

.media-text {
	--media-text-canvas: 1440px;
	--media-text-pad-left: 49px;
	--media-text-pad-right: 100px;
	--media-text-gap: 59px;
	--media-text-top: 66px;
	/*
	 * The comp's band does not end where its content does. The photo
	 * bottom sits at +511 and the drawn rule stops at +560, so there is
	 * a clear 49px of white under the block before anything else starts.
	 * Without it the rule ran to the band's own edge and met the grey
	 * section below it, reading as a line drawn between two sections
	 * rather than a divider inside one (Roman, 19 Sep, screenshot).
	 */
	--media-text-bottom: 49px;
	--media-text-image-top: 58px;
	--media-text-image-bottom: 49px;
	--media-text-text-top: 44px;
	--media-text-text-bottom: 47px;
	/*
	 * The comp puts the rule at x=749.6, which is 6.8px off the photo's
	 * right edge (742.8) and 52.4px off the text column (802) -- the line
	 * sits almost against the photograph. Reproduced literally at first,
	 * and QA measured it off her own screen before anyone argued about
	 * it: photo columns 282-975 (694px wide, so no browser scaling), rule
	 * at 983, gap 8px. The site was matching the drawing.
	 *
	 * Changed anyway, on Roman's call: it reads as the photo touching the
	 * line. 29.5 centres the rule in the 59px column gap the comp itself
	 * defines, so it gets the same air on both sides and becomes a
	 * divider rather than a border on the photograph.
	 *
	 * Done by moving the 0.75px line, NOT by resizing the photograph.
	 * Every other coordinate in this block -- the photo's 49px left edge
	 * and 694x387 box, the caption, the play glyph, the text column at
	 * 802 -- is still exactly where the comp draws it. This is the one
	 * deliberate departure in the block, and it moves one thin rule 22px.
	 */
	--media-text-rule-offset: 29.5px;
	--media-text-rule-width: 0.75px;
	--media-text-caption-left: 73px;
	--media-text-play-width: 44px;
	--media-text-play-height: 58px;
	--media-text-button-top: 29px;
	/* One body line: 20px x 1.1 = 22px. Also the paragraph gap and the
	   headline-to-body gap -- the comp uses one blank body line for both. */
	--media-text-line: calc(var(--text-body) * var(--leading-body));

	box-sizing: border-box;
	background-color: var(--color-white);
	color: var(--color-navy);
}

.media-text__inner {
	box-sizing: border-box;
	max-width: var(--media-text-canvas);
	margin-inline: auto;
	padding: var(--media-text-top) var(--media-text-pad-right) var(--media-text-bottom) var(--media-text-pad-left);
	display: grid;
	/* 694 : 538 -- at 1440 that is exactly the comp's two widths; below
	   1440 both shrink in proportion, the gap and pads stay put. */
	grid-template-columns: minmax(0, 694fr) minmax(0, 538fr);
	column-gap: var(--media-text-gap);
	align-items: stretch;
}

/*
 * The figure's margins, not padding, carry the image's offset inside the
 * row: the caption is positioned against the figure's box, and with
 * margins that box IS the image. align-self: start keeps the figure from
 * stretching when the text column is taller (Home's four paragraphs),
 * which would drag the caption off the image; the margin box still
 * sets the row's minimum height, so the rule reaches +560 even when the
 * text is short.
 */
.media-text__media {
	position: relative;
	align-self: start;
	margin: var(--media-text-image-top) 0 var(--media-text-image-bottom);
}

.media-text__media-link {
	display: block;
	color: inherit;
}

.media-text__media-link:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

.media-text__image {
	display: block;
	width: 100%;
	height: auto;
	/* 694x387 -- the comp's box, and the still's own 1273x710 ratio. An
	   editor-picked image of another shape is cropped to it, never
	   reflowed, so the rule, caption and text never move. */
	aspect-ratio: 694 / 387;
	object-fit: cover;
}

.media-text__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--media-text-play-width);
	height: var(--media-text-play-height);
	transform: translate(-50%, -50%);
	color: var(--color-white);
	pointer-events: none;
}

.media-text__caption {
	position: absolute;
	left: var(--media-text-caption-left);
	bottom: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	color: var(--color-white);
}

/*
 * Line-height 1 on both lines so their boxes are exactly 50 and 30px:
 * 387 - 32 (bottom) - 30 - 8 - 50 = 267, the comp's name offset.
 * --text-stat is the theme's 50px size; the comp sets the name at the
 * same size as the stat figures, so it shares the token rather than
 * duplicating the value under a second name.
 */
.media-text__name {
	font-family: var(--font-serif);
	font-size: var(--text-stat);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-ui);
}

.media-text__title {
	font-family: var(--font-sans);
	font-size: var(--text-h3);
	font-weight: var(--weight-sans-regular);
	line-height: var(--leading-ui);
}

.media-text__text {
	position: relative;
	min-width: 0;
	padding-block: var(--media-text-text-top) var(--media-text-text-bottom);
}

/*
 * The vertical rule. Drawn on the text column rather than in the gap so
 * it stretches with the row (align-items: stretch above) and lands at
 * 802 - 52 = 750 whatever the text column's own height ends up being.
 */
.media-text__text::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--media-text-rule-offset));
	width: var(--media-text-rule-width);
	background-color: var(--color-navy);
}

/*
 * 70px at 1440 (4.8612vw x 1440 = 70.0), shrinking with the viewport
 * down to the statement size so a one-line comp headline does not become
 * four lines in a 400px column on a laptop. Both ends are tokens.
 */
.media-text__heading {
	margin: 0 0 var(--media-text-line);
	/* The comp sets "We go the extra mile." on ONE line in its 538px
	   column; our self-hosted Cormorant cut runs ~3.5% wider than the one
	   embedded in the PDF (557px measured), so a one-line comp headline
	   may run up to 100px into the empty right pad before it wraps.
	   Paragraphs and the button keep the 538px column. */
	width: max-content;
	max-width: calc(100% + var(--media-text-pad-right));
	font-family: var(--font-serif);
	font-size: clamp(var(--text-statement), 4.8612vw, var(--text-h2));
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	color: var(--color-navy);
}

.media-text--heading-statement .media-text__heading {
	font-size: var(--text-statement);
	line-height: var(--leading-statement);
}

/* Bold italic gold -- the comp's accent everywhere (docs/COMPOSITION.md:
   gold at display size on white is the client's own design). */
.media-text__accent {
	font-style: italic;
	font-weight: var(--weight-serif-bold);
	color: var(--color-gold);
}

.media-text__body {
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-weight: var(--weight-serif-regular);
	line-height: var(--leading-body);
	color: var(--color-navy);
}

.media-text__body p {
	margin: 0 0 var(--media-text-line);
}

.media-text__body > :last-child {
	margin-bottom: 0;
}

.media-text__body strong {
	font-weight: var(--weight-serif-bold);
}

/*
 * 227 is the theme's secondary/in-card size -- this button sits under a
 * headline and body in a text column, not a standalone statement.
 * margin-top is this block's own position; the box itself is base.css's.
 */
.sigma-button.media-text__button {
	min-width: 227px;
	margin-top: var(--media-text-button-top);
}

/*
 * Below 1024 the comp's side-by-side geometry has no room: one column,
 * image full width above the text, the rule gone (a vertical rule between
 * two stacked things means nothing). Caption sizes drop so "Scot
 * Cockroft" at 50px does not run off a 311px-wide image at 375.
 */
@media (max-width: 1023px) {
	.media-text__inner {
		display: block;
		max-width: none;
		padding: var(--space-xl) var(--space-lg) var(--space-2xl);
	}

	.media-text__media {
		margin: 0 0 var(--space-lg);
	}

	.media-text__caption {
		left: var(--space-md);
		bottom: var(--space-md);
	}

	.media-text__name {
		font-size: var(--text-h3);
	}

	.media-text__title {
		font-size: var(--text-body);
	}

	.media-text__text {
		padding-block: 0;
	}

	.media-text__text::before {
		display: none;
	}

	/* No right pad to borrow once stacked -- the headline wraps inside
	   the column like everything else. */
	.media-text__heading {
		width: auto;
		max-width: none;
	}
}

/* Phones: the button spans the column and meets the 44px tap-target
   floor; the comp's 33px height is a mouse-and-1440 measurement. */
@media (max-width: 767px) {
	.sigma-button.media-text__button {
		width: 100%;
		min-width: 0;
		min-height: 2.75rem;
		white-space: normal;
	}
}

/*
 * Under 480 the image is ~170px tall and the overlaid name collides with
 * the centred play glyph (measured at 375: glyph spans y 58-116, caption
 * starts at 91). The caption drops below the image as plain navy text
 * there -- nothing hides the glyph, and a video link stays tappable.
 */
@media (max-width: 479px) {
	.media-text__caption {
		position: static;
		margin-top: var(--space-sm);
		color: var(--color-navy);
	}
}