/**
 * Split section (template-parts/components/split-section.php).
 *
 * Shared: the CFD page uses it twice and the VISIO page once. Extracted from
 * cfd-page.css when the second page needed it, so there is one set of rules
 * rather than a copy per template. The class names came with it unchanged -
 * renaming them would touch a signed-off page to no visible end, the same call
 * the contact-details component made.
 */

/* The section's own rhythm, which it MUST own: this is a shared component, so
   it cannot depend on a caller's page stylesheet for the space around it. It
   did - the markup carried .cfd-page__section and the padding for that class
   lives in cfd-page.css - so on the VISIO page, which loads its own section
   stylesheet instead, the split had padding-block 0 and sat flush against the
   hero. The extraction that moved this component out of cfd-page.css left this
   one rule behind. Same mistake, same build, as the centred header's
   description rule that had to be promoted to base.css. */
.cfd-prose {
	padding-block: var(--section-pad-y);
}

/* --------------------------------------------------------------------
 * Prose sections
 *
 * With an image they are a 50/50 split, mirrored between the two so the page
 * alternates. 1fr 1fr and a 64px gutter are the site's two-column split, the
 * same pair .application-block and .contact__grid use.
 *
 * The content column is padded 32px top and bottom and pushes its headline to
 * the top and its body to the bottom with space-between rather than a gap: a
 * gap would set the distance between them, and what is wanted is for both to
 * meet the image's edges however tall the column ends up.
 * -------------------------------------------------------------------- */

.cfd-prose--split .cfd-prose__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: stretch; /* the media column takes the row's full height */
}

.cfd-prose--split .cfd-prose__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* A MINIMUM, not the spacing. space-between distributes free space, and
	   when the headline and body together fill the column exactly - which they
	   do, because the image sets that height - there is none to distribute and
	   the two sit flush. Measured 0px. The gap floors it while space-between
	   still pushes them apart whenever there is room, so both behaviours hold.
	   32px is the headline-to-body step the CTA band next door uses. */
	gap: 32px;
	padding-block: 32px;
}

/* Mirrored: content right, image left. Placed rather than reordered in the
   markup, because the reading order is the same either way - headline, body,
   then the picture of what it is describing - and only the columns swap. */
.cfd-prose--mirrored .cfd-prose__content {
	grid-column: 2;
	grid-row: 1;
}

.cfd-prose--mirrored .cfd-prose__media {
	grid-column: 1;
	grid-row: 1;
}

.cfd-prose__media {
	min-width: 0;
}

/* Fills its column edge to edge. cover, by designer ruling: contain was tried
   here and letterboxed 21px of card surface above the render in section 3,
   which reads as a mistake rather than as a decision.

   WHAT THIS TRADES AWAY, recorded rather than assumed away. cover crops
   whenever the copy beside it outgrows the image's natural height at half
   width, and the crop scales with the excess: measured 0.1% at the current
   copy, 37.6% off the sides at 2079 characters. The threshold is a property of
   the ratio - roughly 11 lines of body against a 4:3, 5 against a 16:9,
   because a wider render is shorter at 624px.

   Nobody decides to cross it. SK runs longer than EN, so the TRANSLATION PASS
   crosses it, silently, on copy that was fine in English. Check these two
   sections when the Slovak lands: if a render has lost its edges, the answer
   is a taller image or shorter copy, not a smaller crop. */
.cfd-prose__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px; /* the site's radius */
}

.cfd-prose__headline {
	color: var(--color-heading-text);
}

.cfd-prose__body {
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
	color: var(--color-body-text);
}

/* 32px, the gap the eyebrow already leaves under itself site-wide and the
   step this page uses between a heading and what it introduces. In a split
   section the margin does nothing, because space-between owns the distance.

   SELECTED FROM THE HEADLINE, not set on the body unconditionally. This was
   `.cfd-prose__body { margin-top: 32px }` while a headline was mandatory,
   which was the same thing then and stopped being it when the headline became
   optional: with nothing above the body, the margin separated it from the top
   of its own column and read as a stray indent. Measured at 390px, where the
   stacked rule below restores it: the body started 32px down with nothing
   there. Written this way the space belongs to the PAIR, so it exists exactly
   when both halves of the pair do. */
.cfd-prose__headline + .cfd-prose__bottom .cfd-prose__body {
	margin-top: 32px;
}

/* Three classes in the selector above, so the split override needs four to
   beat it. Media queries add no specificity, so the stacked rule repeats the
   full selector too. */
.cfd-prose--split .cfd-prose__headline + .cfd-prose__bottom .cfd-prose__body {
	margin-top: 0;
}

/* --------------------------------------------------------------------
 * Rich body: editor HTML instead of one escaped paragraph
 *
 * body_html gives a section SEVERAL paragraphs where body gives it one, so the
 * distance between them has to be declared - it is the first thing this
 * component has ever needed that a single <p> did not answer.
 *
 * 24px is .entry-content's, and that file's reasoning carries over unchanged:
 * the gap from a heading to its text and the gap between two paragraphs are
 * the same kind of gap, so this takes the heading-to-copy step rather than
 * inventing a second number for the same job.
 *
 * The TYPE is deliberately not restated. font-size, line-height and colour are
 * inherited properties set on .cfd-prose__body above, and base.css styles no
 * bare <p>, so the paragraphs inside pick them up on their own. Restating them
 * here would give the component two places to change the body's type in.
 * -------------------------------------------------------------------- */

.cfd-prose__body--rich > * {
	margin-block: 24px 0;
}

/* The first block sits against the top of the column and adds nothing of its
   own, so the section's padding is the only space above it. */
.cfd-prose__body--rich > *:first-child {
	margin-top: 0;
}

/* 600 and the heading colour, which is .entry-content's answer for the same
   markup coming out of the same editor. b as well as strong: the editor emits
   either depending on how the text was emphasised. */
.cfd-prose__body--rich strong,
.cfd-prose__body--rich b {
	font-weight: 600;
	color: var(--color-heading-text);
}

/* --------------------------------------------------------------------
 * The software spec row
 *
 * The company data sheet's row, derived not re-picked: 170px label column,
 * 24px gap, baseline aligned, 16px of padding above. company-data.css is not
 * loaded here, so the three values are restated; they are the same three.
 *
 * The hairline is on TOP only and there is one row, so it reads as a rule
 * separating the fact from the prose above it rather than as a table with one
 * line in it.
 * -------------------------------------------------------------------- */

.cfd-prose__spec {
	margin: 64px 0 0; /* the site's section step, between the body and the fact */
}

.cfd-prose__spec-row {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 24px;
	align-items: baseline;
	padding-top: 16px;
	border-top: 1px solid var(--color-border-subtle);
}

.cfd-prose__spec-label {
	margin: 0;
	font-size: var(--type-card-body-size);
	line-height: 1.45;
	font-weight: var(--type-card-body-weight);
	color: var(--color-text-secondary);
}

.cfd-prose__spec-value {
	margin: 0;
	font-size: var(--type-card-body-size);
	line-height: 1.45;
	font-weight: var(--type-card-body-weight);
	color: var(--color-heading-text);
}

/* --------------------------------------------------------------------
 * Contained, unmatted
 *
 * Letterboxed with nothing behind it, for artwork that carries its own
 * transparency - a logo safe-zone diagram, a mark on nothing. The mat below
 * exists to resolve the bare space a letterboxed RECTANGLE leaves on two
 * edges; artwork drawn on transparency has no such edges to resolve, and a
 * filled card behind it reads as an unfilled placeholder rather than a frame.
 *
 * THE COLUMN SHRINKS TO THE ARTWORK instead of stretching to the text. Every
 * other variant fills its column - cover crops to it, the mat pads out to it -
 * so the stretch was never visible before. Letterboxed onto nothing it is: the
 * image box took the text's height and the artwork sat inside it with 172.21px
 * of empty box around it, measured at 1440 against a 492.72px text column -
 * 34.9% of the column painting nothing.
 *
 * THE DEFECT WAS THE PHANTOM BOX, NOT THE POSITION, and the two are worth
 * keeping apart because they look identical on a transparent PNG. An element
 * that paints nothing but still occupies space collects the next background,
 * border or hit area someone adds to it - the same trap as the mat this
 * variant exists to remove. So the box shrinks to what it paints.
 *
 * WHERE that box then sits is a separate decision, and it is centred: which is
 * exactly where the stretched version put the artwork, so the fix changes the
 * box without moving the picture. The artwork centres against the text column,
 * which is the relationship the design already had.
 *
 * height: auto is what the stacked block below already does at every width -
 * this extends that rule to the one desktop case that needs it rather than
 * introducing a second mechanism.
 * -------------------------------------------------------------------- */

.cfd-prose--contain .cfd-prose__image {
	object-fit: contain;
	height: auto;
}

.cfd-prose--contain .cfd-prose__media {
	align-self: center;
}

/* --------------------------------------------------------------------
 * Framed variant: contain, matted
 *
 * CROP SCENES, LETTERBOX DOCUMENTS. A render is a scene and survives a crop;
 * an interface screenshot is a document whose EDGES identify the screen, so a
 * crop removes the thing being pointed at.
 *
 * --framed carries the fit as well as the mat, rather than sitting alongside a
 * --contain class, so that the matted callers emit the markup they always did.
 * It is not a coupling left behind: a mat only ever means anything on a
 * contained image, and split-section.php enforces that direction.
 *
 * The mat is what makes the letterbox a decision rather than a defect. With
 * the image edge to edge in its box, the leftover space appears as a strip of
 * grey along one edge and reads as a bug - which is exactly how it read on CFD
 * before that section went back to cover. Padding all four sides means there
 * is always a frame, and the ratio difference only makes two of its edges
 * deeper than the other two.
 *
 * 32px is the card padding idiom, and this box is a card holding a picture.
 * -------------------------------------------------------------------- */

.cfd-prose--framed .cfd-prose__media {
	display: flex;
	padding: 32px;
	border-radius: 6px;
	background-color: var(--color-surface-card);
}

.cfd-prose--framed .cfd-prose__image {
	object-fit: contain;
	border-radius: 0; /* the frame owns the corners now */
}

@media (max-width: 1024px) {
	/* Stacked, so the split stops being one. Content first in both sections:
	   the mirror is a desktop rhythm, and alternating the order down a phone
	   screen reads as a mistake rather than as a pattern. The image keeps its
	   own height here, with nothing beside it to match. */
	.cfd-prose--split .cfd-prose__layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.cfd-prose--mirrored .cfd-prose__content,
	.cfd-prose--mirrored .cfd-prose__media {
		grid-column: auto;
		grid-row: auto;
	}

	.cfd-prose--split .cfd-prose__content {
		padding-block: 0;
	}

	.cfd-prose--split .cfd-prose__headline + .cfd-prose__bottom .cfd-prose__body {
		margin-top: 32px;
	}

	.cfd-prose__image {
		height: auto;
	}
	.cfd-prose__spec {
		margin-top: 48px;
	}
	/* Stacked, label over value, exactly as the company data sheet does at
	   this width and for the same reason: a 170px label column against a
	   358px container leaves the value 164px, which is narrower than the
	   label it is answering. 6px under the label is that sheet's value too. */
	.cfd-prose__spec-row {
		display: block;
	}

	.cfd-prose__spec-label {
		margin-bottom: 6px;
	}

	.cfd-prose--framed .cfd-prose__media {
		padding: 16px; /* the mobile container inset */
	}
}