/**
 * sigma/news-resources -- Copy Master global BOX 8 (Results/News/Tips),
 * laid out to the comp's "News, Resources, and Insights" band (S08 in
 * docs/qa/comp-spec/SPEC-home.md; docs/COMPOSITION.md "Shared elements").
 *
 * Self-painting band (own background-color + padding), the same
 * reasoning as blocks/stats-band/style.css: every comp instance of this
 * band sits on navy, so it carries its own background instead of
 * assuming an ambient sigma/section colour. A white variant stays for
 * the one case the field allows (a page that already runs navy on both
 * sides of it).
 *
 * The numbers are the comp's, in CSS px at a 1440 canvas (1 comp unit =
 * 1px). Where a token exists it is used by name; the remaining literals
 * are the comp's geometry (card 235.4x509.9 at x=590/854/1118, rule
 * 191.3 wide at +212, and so on), which no spacing token describes and
 * which must not drift with the spacing scale. Sub-pixel values are kept
 * as measured -- the browser lays out in fractional px and snaps only
 * the paint, so 235.4 lands the third card's right edge at 1353.4 as the
 * comp does, where 235 would be 1.2px short.
 *
 * Reflow: one column below 768 (cards stack, full width, natural
 * height); three cards in a row from 768, shrinking below their comp
 * width only when the viewport forces it; the intro column moves to the
 * left of the cards from 1280, and the exact comp offsets (x=96 left
 * column, cards from x=590) apply at 1440.
 */

.news-resources {
	box-sizing: border-box;
	padding: 0;
}

.news-resources--bg-navy {
	background-color: var(--color-navy);
	color: var(--color-white);
}

.news-resources--bg-white {
	background-color: var(--color-white);
	color: var(--color-navy);
}

.news-resources__inner {
	box-sizing: border-box;
	max-width: 1440px;
	margin-inline: auto;
	padding: var(--space-2xl) var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

/* ---- Left column: headline, optional paragraph, one button ---------- */

.news-resources__intro {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

/*
 * 70px Cormorant Garamond Bold at the 1.1 heading pitch (77px lines).
 * The comp sets "News, / Resources, / and Insights" on three lines in a
 * column ~320px wide; 360px is the widest the column can be and still
 * break the default headline the same way ("Resources, and" measures
 * 399px, "and Insights" 306px). A different headline simply wraps in
 * the same narrow column.
 */
.news-resources__heading {
	max-width: 360px;
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--text-h2);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	color: inherit;
}

.news-resources__accent {
	font-style: italic;
	font-weight: var(--weight-serif-italic);
	color: var(--color-gold);
}

.news-resources__paragraph {
	max-width: 330px;
	margin: 34px 0 0;
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-body);
	color: inherit;
}

/*
 * The comp's 227x33 outline button, the theme's secondary/in-card size
 * -- the box (padding, border, type) is assets/css/base.css's shared
 * .sigma-button rule now; what stays here is this card's own position
 * (margin, the 44px tap target on touch layouts) and the two colour
 * properties that track the band's own background (currentColor, not
 * a static gold-bright, because .news-resources--bg-navy/--bg-white
 * set `color` on the ancestor and this button follows it -- see the
 * two variants below for the one place white on navy differs from the
 * gold-bright default).
 */
.news-resources__intro .news-resources__button.sigma-button {
	min-width: 227px;
	min-height: 44px;
	margin: var(--space-lg) 0 0;
	border-color: currentColor;
	color: inherit;
}

.news-resources--bg-navy .news-resources__intro .news-resources__button.sigma-button:not(.sigma-button--unlinked):hover,
.news-resources--bg-navy .news-resources__intro .news-resources__button.sigma-button:not(.sigma-button--unlinked):focus-visible {
	background-color: var(--color-white);
	color: var(--color-navy);
}

.news-resources--bg-white .news-resources__intro .news-resources__button.sigma-button {
	border-color: var(--color-gold-bright);
}

.news-resources--bg-white .news-resources__intro .news-resources__button.sigma-button:not(.sigma-button--unlinked):hover,
.news-resources--bg-white .news-resources__intro .news-resources__button.sigma-button:not(.sigma-button--unlinked):focus-visible {
	background-color: var(--color-gold-bright);
	color: var(--color-white);
}

/* ---- The three cards ------------------------------------------------ */

.news-resources__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
	box-sizing: border-box;
	min-width: 0;
}

/*
 * Whole card is the click target: the title's anchor stretches its
 * ::after over the card (see the title rules below), so the card needs
 * a positioning context. A card is a div holding a title, a body and
 * decoration; wrapping all of that in an anchor would nest <a> in <a>
 * once a body ever carries a link, so the inner anchor stays the one
 * and only anchor.
 */
.news-resources__item {
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Equal top and bottom: the stack centres itself with auto margins
	   from 768 up, and below that the card is short enough that an uneven
	   pad is the whole difference (49px above against 33px below). */
	padding: var(--space-xl) 0;
	border: 1.5px solid currentColor;
	border-radius: var(--radius-none);
	box-shadow: var(--shadow-none);
	text-align: center;
}

/*
 * The brand mark, cut from the lockup the way the comp itself does it.
 *
 * The designer placed the full 316x77 lockup on each navy card; only
 * the gold interlocking-S shows because that lockup's wordmark is navy.
 * Our assets/img/logo-*.png files are the PDF's images with the alpha
 * dropped (flat black ground under the gold-mark file, flat white under
 * the navy-mark one), so two things reproduce the comp: the wrapper
 * clips the lockup to the mark (the mark occupies the first 81px of the
 * scaled image; the wordmark starts at 111px), and mix-blend-mode
 * removes the flat ground -- `lighten` on navy keeps every channel of
 * the gold mark (each is brighter than navy) and turns the black ground
 * into the band; `darken` on white does the mirror for the navy mark.
 * Blending is per channel max/min, so the mark's own colour is exact,
 * not tinted, which `screen`/`multiply` would not give.
 *
 * Both files are sized here explicitly; the width/height attributes on
 * the <img> only reserve the intrinsic ratio before load.
 */
/*
 * flex-shrink: 0 on everything but the body: the card is a fixed-height
 * flex column from 768 up, and when a body runs long in a narrowed card
 * the mark and the rule would otherwise be the first things to give
 * (a span with overflow:hidden has no auto min-height to defend it).
 * The card's min-height grows instead -- see the 768 rules.
 */
/*
 * The mark used to be the full lockup, cropped to its S by a fixed width
 * and overflow:hidden, with mix-blend-mode dissolving the flat ground the
 * PDF extraction had left behind. All of that machinery existed because
 * we had no standalone icon and no alpha channel.
 *
 * The client sent real brand files on 21 September, so the mark is now
 * its own SVG-derived PNG with a genuine alpha channel: no crop, no
 * blend, no second file for the white variant. The blend was also what
 * made this slot fail silently when logo-navy.png stopped being a copy
 * of logo-gold.png -- a navy mark blended "lighter" onto a navy card is
 * invisible, and nothing errors. One less way for that to happen.
 */
.news-resources__mark {
	flex-shrink: 0;
	display: block;
	width: 81px;
	height: 77.2px;
	margin: 0 auto;
}

.news-resources__mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Order is set at every width, not only from 768 up, so the card reads
 * the same on a phone as on a desktop: mark, title, rule, body, arrow.
 * See the 768 block for why the rule moved below the title.
 */
.news-resources__mark { order: 1; }
.news-resources__title { order: 2; }
.news-resources__rule { order: 3; }
.news-resources__body { order: 4; }
.news-resources__arrow { order: 5; }

.news-resources__rule {
	flex-shrink: 0;
	display: block;
	width: 191.3px;
	max-width: 100%;
	height: 0;
	margin: var(--space-md) auto 0;
	border-top: 0.75px solid currentColor;
}

/*
 * 50px Montserrat, uppercase, across the full card width (the card has
 * no side padding; the body carries its own). The comp sets its first
 * card's FAQS at 55px and the other two at 50px; that was a four-letter
 * word. The real first slot is "Results", which at 55px measures 247px
 * against a 232px card interior, so all three take the comp's 50px.
 * min-height still reserves the comp's 55px title slot, which is what
 * keeps the body's first line at the same y in every card.
 */
.news-resources__title {
	flex-shrink: 0;
	min-height: var(--text-stat-lg);
	margin: var(--space-md) 0 0;
	font-family: var(--font-sans);
	font-size: var(--text-stat);
	font-weight: var(--weight-sans-regular);
	line-height: var(--leading-ui);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
	color: inherit;
	overflow-wrap: anywhere;
}

/* The title carries the link, so it keeps the card's text colour and
   shows its underline on hover rather than reading as a stray inline
   link inside a card. */
.news-resources__title a {
	color: inherit;
	text-decoration: none;
}

.news-resources__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.news-resources__item:hover .news-resources__title a,
.news-resources__title a:focus-visible {
	text-decoration: underline;
}

.news-resources__body {
	position: relative;
	z-index: 1;
	margin: var(--space-sm) 0 0;
	padding-inline: 17.5px;
	font-family: var(--font-sans);
	font-size: var(--text-kicker);
	font-weight: var(--weight-sans-regular);
	line-height: var(--leading-body);
	color: inherit;
}

.news-resources__arrow {
	flex-shrink: 0;
	display: block;
	width: 53px;
	height: 19px;
	margin: var(--space-md) auto 0;
	color: var(--color-gold);
}

.news-resources__arrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---- 768: three cards in a row, still stacked under the intro ------ */

@media (min-width: 768px) {
	.news-resources__inner {
		padding: var(--space-2xl) var(--space-xl);
	}

	/*
	 * minmax(0, 235.4px): the comp's card width whenever three of them
	 * fit, equal shrink when the viewport is narrower than 3 x 235.4 +
	 * 2 x 28.6 plus the padding (below ~860px).
	 */
	.news-resources__grid {
		grid-template-columns: repeat(3, minmax(0, 235.4px));
		justify-content: center;
		column-gap: 28.6px;
	}

	/*
	 * From here the card is the comp's 509.9px tall box and every inner
	 * offset is the comp's, measured from the card's top edge (border
	 * included): mark at 72.3, rule at 212, title cap-height at 256,
	 * body at 324, arrow centred at 454. min-height rather than height so
	 * a body that runs long in a narrowed card (768-860) grows the row
	 * instead of squeezing the mark; the grid stretches all three cards
	 * to the tallest. Padding and margins below are
	 * those offsets minus what precedes them, with the font metrics
	 * (Montserrat ascent 0.968, cap 0.7) folded into the title and body
	 * margins so the INK lands where the comp's ink is, not just the box.
	 */
	/*
	 * Equal padding top and bottom now that the stack centres itself.
	 * The comp's 70.8/44.9 split was the counterweight to a group pinned
	 * at the top of the card; with auto margins doing the centring, an
	 * uneven pad just shifts the whole group off centre -- measured 114px
	 * above the mark against 88px below the arrow before this.
	 */
	.news-resources__item {
		min-height: 509.9px;
		padding: var(--space-xl) 0;
	}

	/*
	 * Roman, 19 Sep: the rule moves BETWEEN the title and the body, and
	 * the stack centres vertically in the card.
	 *
	 * The comp draws the rule above the title at a fixed y=212 with the
	 * mark at 72.3, which left a tall empty gap under the mark and pushed
	 * everything else to the bottom of a 510px card. Those absolute
	 * offsets were drawn against the comp's own placeholder copy; the
	 * approved copy is shorter, so the card emptied out at the top -- the
	 * same lesson the stats band and value-prop already recorded, where a
	 * comp height survived a copy change no better than an absolute
	 * offset does.
	 *
	 * order: the rule is moved with flex order, not by editing render.php,
	 * so the DOM keeps reading mark, rule, title, body, arrow. Nothing
	 * about the markup or the reading order changes; only the painted
	 * position does.
	 *
	 * margin-block auto above the mark and below the arrow is what centres
	 * the group: the two auto margins split the card's free space evenly,
	 * so a short card and a long one both sit centred instead of
	 * top-anchored with a void.
	 */
	.news-resources__mark {
		order: 1;
		margin-block: auto 0;
	}

	.news-resources__title {
		order: 2;
		margin-top: 34.5px;
	}

	.news-resources__rule {
		order: 3;
		margin-top: var(--space-md);
	}

	.news-resources__body {
		order: 4;
		margin-top: var(--space-md);
	}

	.news-resources__arrow {
		order: 5;
		margin-block: var(--space-lg) auto;
	}

	/*
	 * Keep the three cards' rows level with each other.
	 *
	 * Centring each card independently is right vertically but makes a
	 * card with a shorter body sit differently from its neighbours: with
	 * "See our most recent transactions." on two lines and the other two
	 * bodies on three, the Results mark sat 11px higher and its arrow 11px
	 * higher again, so nothing in the row lined up. Reserving three lines
	 * of body means the tallest body in the set sets the height for all
	 * three, and every mark, title, rule and arrow lands on the same y.
	 *
	 * min-height, not height: a body longer than three lines still grows
	 * its card, and the grid stretches the other two to match.
	 */
	.news-resources__body {
		min-height: calc(var(--text-kicker) * var(--leading-body) * 3);
	}
}

/* ---- 1280: intro column to the left of the cards ------------------- */

@media (min-width: 1280px) {
	.news-resources__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: 28.6px;
		padding: 73px var(--space-xl) 86px 96px;
	}

	/*
	 * The intro column is as tall as the cards. The comp fills it with
	 * three headline lines, a four-line paragraph and the button, in
	 * that order: heading bottom 4349, paragraph 4387-4474, button box
	 * 4506.8 -- 38px and 33px of gap, nothing unusual.
	 *
	 * "so the button sits at +483 whether or not a paragraph is
	 * present" is what the old note claimed, and it was the defect: the
	 * paragraph is optional and this build does not supply one, so
	 * margin-top:auto (below) threw the button to the foot of a 509.9px
	 * column and left a 154px hole under the headline on every page the
	 * global box lands on (QA 800). Removing that auto is the whole fix:
	 * the button then sits --space-lg under the headline and the unused
	 * height falls to the bottom of the column, where nothing follows it.
	 *
	 * A justify-content:center went in alongside it and had to come
	 * back out (QA 809): on the pages that carry this box with no button
	 * at all it pushed the headline 96px below the top of the card row,
	 * where the comp draws it 34px below. The padding above is the
	 * comp's own top-hang and it is enough on its own.
	 */
	.news-resources__intro {
		flex: 1 1 auto;
		min-height: 509.9px;
		padding: 26px 0 66.9px;
	}

	.news-resources__grid {
		flex: 0 0 auto;
	}

	/* min-height: 0 drops the 44px touch floor; the comp's 33px comes
	   back on its own once the mobile min-height is out of the way (see
	   assets/css/base.css's .sigma-button for the derivation). */
	.news-resources__intro .news-resources__button.sigma-button {
		min-height: 0;
	}
}

/* ---- 1440: the comp's own canvas -------------------------------------- */

@media (min-width: 1440px) {
	/*
	 * 1440 - 1353.4 (right edge of the third card) = 86.6px. With the left
	 * padding at 96 and the cards fixed, the intro column comes out at
	 * exactly 465.4px and the first card starts at x=590.
	 */
	.news-resources__inner {
		padding-right: 86.6px;
	}
}