/*
 * Section: Cards — Figma 4:246 (Return) / 2001:950 (Solution)
 *
 * Head is a 1280 container; the card row is deliberately full-bleed and runs
 * edge to edge, as in both frames.
 */

.section-cards__head {
	width: var(--content);
	max-width: 100%;
	margin-inline: auto;
	/* Same measure below the intro as between the label and the heading, so
	   the head sits in an even band of space. */
	padding: 75px 0 calc(24px * var(--label-gap-scale));
}

.section-cards__intro {
	display: flex;

	/* Figma 2001:955 centres the two columns against each other rather than
	   top-aligning them: the 69-tall heading and the 88-tall paragraph share a
	   midpoint. */
	align-items: center;

	/* No gap — the two columns' own widths (625 + 571) fill the 1200 column,
	   and the separation is the heading's 147 right padding. */
	gap: 0;
	padding-top: calc(24px * var(--label-gap-scale));
}

.section-cards__heading {
	display: flex;
	align-items: baseline;

	/* The frame separates the slash from the word with two spaces in the text
	   itself rather than a gap; half an em is the same distance at 58px. */
	gap: 0.5em;
	flex: 0 0 52.083%; /* 625 / 1200 — Solution 2001:955 */
	max-width: 52.083%;
	margin: 0;
	padding-right: 12.25%; /* 147 / 1200 */
	color: var(--night);
	font-size: var(--wp--preset--font-size--heading-xl);
	font-weight: 700;
	line-height: 1.19;
	letter-spacing: -0.026em;
}

/* The red slash is a recurring motif; it scales with the heading. */
/* The file ships a dedicated 32x54 slash for headings, already Mars. */
/* The slash is a flex item beside the heading and the artwork is drawn with
   preserveAspectRatio="none", so anything that squeezes the box squeezes the
   mark with it. Without this the longest headings crushed it - Hospitality ran
   it at 11px wide against a designed 27, Student Housing at 14 - while pages
   with short headings looked right, which is what made it read as a problem
   with those two pages rather than with every one of them. */
.section-cards__slash {
	flex: 0 0 auto;
}

.section-cards__slash svg {
	width: 0.552em;  /* 32 / 58 */
	height: 0.931em; /* 54 / 58 */
}

/* Every frame sets this text box wider than the column it sits in and lets it
   overhang to the right, which is what decides where the copy wraps. The
   measure is given in frame pixels and converted here, so it stays a share of
   the width like everything else. */
.section-cards__description {
	flex: 0 0 auto;
	min-width: 0;
	width: calc(var(--cards-copy, 571) / 1676 * 100vw);
	margin: 0;
	color: var(--slate);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1.625;
}

/* Return's heading box is wider than Solution's: 32 slash + 480 text + 147
   padding = 659, leaving 517 for the copy (Figma 4:254). */
.section-cards--dark .section-cards__heading {
	flex: 0 0 54.917%; /* 659 / 1200 */
	max-width: 54.917%;
}

.section-cards--dark .section-cards__description {
	width: calc(var(--cards-copy, 517) / 1676 * 100vw);
}

/* Card row ---------------------------------------------------------------- */

.section-cards__row {
	display: grid;
	grid-template-columns: repeat(var(--cards, 3), minmax(0, 1fr));
	gap: 6px; /* the 6px inset each Solution block carries on its left */
	margin: 0;
	padding: 0;
	list-style: none;
}

.media-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 475px;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
}

/* Return hangs a 45x109 white wedge in the top-right corner (I44:1017;88:469).
   Cutting the corner rather than painting a white triangle lets the page's own
   ground show through, which is what the frame is drawing. Solution (2001:958)
   leaves its cards square and runs a slash across the bottom-right instead. */
.section-cards--dark .media-card {
	min-height: 649px;
	clip-path: polygon(0 0, calc(100% - 45px) 0, 100% 109px, 100% 100%, 0 100%);
}

/* Every card's eyebrow, heading and description sits on the same line as its
   neighbours', whatever the copy does.
 *
 * The stack is bottom-aligned, so left alone each card's own height decides
 * where its top lands: a heading that wraps in one card and not the next, or a
 * description running to three lines rather than two, and the row stops lining
 * up. Reserving a spare line on each element would level the tops, but at the
 * cost of a gap under every heading that did not need it.
 *
 * So the row hands its three text rows down to the cards instead. Each row is
 * as tall as the tallest card needs and no taller — one line where every
 * heading fits on one, two where any heading wraps — and all three cards are
 * measured against the same rows. The leading 1fr absorbs the slack above,
 * which is what bottom-aligned the stack before.
 *
 * The body steps out of the layout (display: contents) so its children can
 * reach the card's grid, so the inset it carried moves onto the card. */
/* The card's own min-height cannot feed the 1fr: a grid item spanning tracks
   is sized *by* them, so the leading row stayed at nothing and the whole stack
   sat at the top of the card. The height belongs to the row, where the spare
   space is there to be handed to the 1fr. */
.section-cards--dark .section-cards__row {
	grid-template-rows: 1fr auto auto auto;
	min-height: 649px;
}

.section-cards--short .section-cards__row {
	min-height: 480px;
}

.section-cards--dark .media-card {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;

	/* The flex rule above bottom-aligned the whole stack; as a grid it would
	   bottom-align each line inside its own row instead, dropping a two-line
	   description to the foot of a row sized for three. The 1fr row does the
	   bottom-aligning now, so each line sits at the top of its own. */
	align-items: start;
	padding: 0 40px 51px 60px;
}

.section-cards--dark .media-card__body {
	display: contents;
}

/* Named rather than left to auto-placement: the spare row has to be the first
   one, and auto-placement would fill it with the eyebrow and push the heading
   and description to the rows below — splitting the stack in half down the
   card. Placing them also means a card missing an eyebrow keeps its heading on
   the heading row rather than promoting it a line. */
.section-cards--dark .media-card__eyebrow {
	grid-row: 2;

	/* A grid item fills its column by default, which stretched the pill across
	   the whole card. The heading and description do want the full width —
	   it is what decides where they wrap — so only the pill opts out. */
	justify-self: start;
}

.section-cards--dark .media-card__title {
	grid-row: 3;
}

.section-cards--dark .media-card__description {
	grid-row: 4;
}

.media-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--img-focus, 50% 50%);
	z-index: -2;
}

.media-card__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.section-cards--dark .media-card__scrim {
	background: linear-gradient(
		0deg,
		rgba(11 22 40 / 0.95) 0%,
		rgba(11 22 40 / 0.6) 50%,
		rgba(11 22 40 / 0.1) 100%
	);
}

/* Figma I2001:959;4:136 — the wash is not the full card: it starts 77 down and
   runs 482 tall, past the card's own 475, so the top of the photo stays clear
   and the fade never completes before the bottom edge. */
.section-cards--tint .media-card__scrim {
	inset: 77px 0 auto;
	height: 482px;
	background: linear-gradient(
		0deg,
		rgba(11 22 40 / 0.95) 0%,
		rgba(11 22 40 / 0.5) 56.731%,
		rgba(11 22 40 / 0) 100%
	);
}

/* Figma I2001:959;79:442: a 999x572 slash hung off the bottom-right, so only
   its left arm crosses the card. The file is already white at 15%. */
.media-card__slash {
	position: absolute;
	right: -733px;
	bottom: -129px;
	z-index: -1;
	display: none;
	width: 999px;
	height: 572px;
	pointer-events: none;
}

.section-cards--tint .media-card__slash {
	display: block;
}

.media-card__slash svg {
	width: 100%;
	height: 100%;
}

.media-card__body {
	width: 100%;
	padding: 32px;
}

.media-card__eyebrow {
	display: inline-block;
	margin: 0 0 10px;
	color: #fff;
	font-size: var(--fs-10);
	font-weight: 800;
	line-height: 1.333;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Figma I2001:959;4:137: the text box is inset 4 from the right and 8 from the
   bottom, with 36/32 padding inside it and the stack bottom-aligned. */
.section-cards--tint .media-card__body {
	padding: 32px 36px 40px;
}

.section-cards--tint .media-card__eyebrow {
	margin-bottom: 4px;
	color: rgba(255 255 255 / 0.6);
}

.section-cards--tint .media-card__button {
	margin-top: 24px;
}

/* Figma I44:1017;4:261: 40 of side padding with another 20 on the text stack
   and 51 below it — set on the card above, since the body is out of the layout
   so that its children can join the row's grid. */

/* Return sets the label in a translucent pill with its glyph; Solution leaves
   it plain (I44:1017;4006:5486). */
.section-cards--dark .media-card__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 32px;
	margin-bottom: 12px;
	padding: 0 14px 0 9px;
	border-radius: 6px;
	background: rgba(255 255 255 / 0.15);
	color: #fff;
	letter-spacing: 0.12em;
}

/* Height, not a square: these glyphs are drawn at whatever width they need —
   the $ is half as wide as it is tall — so a fixed square box would leave a
   different gap before each label and stretch the narrow ones to fill it. */
.media-card__eyebrow-icon {
	display: block;
	flex: 0 0 auto;
	width: auto;
	height: 16px;
}

.media-card__eyebrow-icon svg {
	display: block;
	width: auto;
	height: 100%;
}

/* The body above is a fixed box, so the stack already starts at the same line
   in every card and nothing here needs to reserve a spare line to hold the row
   level. Reserving one *here* is what pushed the copy apart: a heading that
   fits on one line kept the second line's worth of space between itself and
   its description. The block runs heading straight into description, and a
   card whose copy is shorter than its neighbours' simply ends higher — the
   slack falls at the bottom of the box, where nothing shows it. */
.section-cards--dark .media-card__title {
	margin-bottom: 16px;
}

.section-cards--dark .media-card__description {
	max-width: none;
	margin: 0;
	color: rgba(255 255 255 / 0.8);
	font-weight: 400;
	line-height: 1.625; /* 22.75 / 14 */
}

.media-card__title {
	margin: 0;
	color: #fff;
	font-size: var(--wp--preset--font-size--heading-md);
	font-weight: 800;
	line-height: 1.333;
	letter-spacing: -0.025em;
}

.media-card__description {
	max-width: 420px;
	margin: 12px 0 0;
	color: rgba(255 255 255 / 0.85);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.625;
}

.media-card__button {
	margin-top: 20px;
}

/* Multifamily's problem row (2089:1673) is the same dark card at 480 rather
   than 649, with the photo stopping 13 short of the card's bottom edge so the
   section's own ground shows under it, and a lighter, roomier eyebrow pill. */
.section-cards--short .media-card {
	min-height: 480px;
}

.section-cards--short .media-card__image,
.section-cards--short .media-card__scrim {
	inset: 0 0 auto;
	height: 467px;
}

/* 51 under the copy as on the tall card, plus the 13 the photo stops short. */
.section-cards--short .media-card {
	padding-bottom: 64px;
}

.section-cards--short .media-card__eyebrow {
	gap: 8px;
	padding: 0 10px;
	background: rgba(255 255 255 / 0.1);
	font-size: var(--wp--preset--font-size--eyebrow); /* 12 */
	font-weight: 600;
}

.section-cards--short .media-card__eyebrow-icon {
	width: auto;
	height: 18px;
}

@media (max-width: 1024px) {
	.section-cards__intro {
		flex-direction: column;
		gap: 20px;
	}

	/* Stacked, the columns' percentage basis would be read as a height —
	   reset it along with the measures. */
	.section-cards__heading,
	.section-cards--dark .section-cards__heading,
	.section-cards__description,
	.section-cards--dark .section-cards__description {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		padding-right: 0;
	}

	.section-cards__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Two abreast and then stacked, there is no row of three left to line up:
	   each card sets its own height and the copy runs as long as it needs to.
	   The shared rows come off with it — the row would otherwise hand every card
	   the same three lines down a column where they are read one at a time. */
	.section-cards--dark .section-cards__row,
	.section-cards--short .section-cards__row {
		grid-template-rows: none;
		min-height: 0;
	}

	.section-cards--dark .media-card {
		display: flex;

		/* Back to bottom-aligning the stack as a whole: `start` above is for
		   placing each line in its own shared row, and left on here it would
		   strand the copy at the top of the photo. */
		align-items: flex-end;
		grid-row: auto;
	}

	.section-cards--dark .media-card__body {
		display: block;
	}

	.section-cards--dark .media-card__eyebrow,
	.section-cards--dark .media-card__title,
	.section-cards--dark .media-card__description {
		grid-row: auto;
	}
}

@media (max-width: 782px) {
	.section-cards__head {
		padding-block: 56px 24px;
	}

	.section-cards__row {
		grid-template-columns: 1fr;
	}

	.media-card {
		min-height: 380px;
	}

	.section-cards--short .media-card {
		min-height: 380px;
	}

	.section-cards--short .media-card__image,
	.section-cards--short .media-card__scrim {
		inset: 0;
		height: auto;
	}

	.section-cards--short .media-card {
		padding-bottom: 51px;
	}
}