/* Newsroom card grid — patterns/newsroom-grid.php.
 *
 * Figma node 2104:1622 ("2. Resources — article grid + pagination"), handoff
 * §3. This file owns the band's rhythm and NOTHING ELSE: the grid, the
 * pagination and the cards are all infinitus/resource-grid and the shared
 * .resource-card component, and the comp draws that component as it already
 * ships.
 *
 * Checked node by node against _resource-card.scss rather than assumed. The
 * comp's cards carry the chamfered top-right thumbnail corner, the N50
 * surface, the 8px MD radius, the 48/32 internal padding (sp-12/sp-8 at >=768),
 * the 24px content gap, the 12px label-to-title gap, the 30px gutter and the
 * 3/2/1 reflow — all of which the component is. Card 1 in the comp is drawn in
 * a hover state with a cerulean edge, which is that component's gradient-border
 * hover. The comp's inconsistent card fills (Card 1 at N25, Card 9 with none —
 * handoff §3 flag) standardize to N50 by using one component, as that flag
 * recommends, and the thumbnail's raw ~5.27px radius is moot: the chamfer
 * replaces that corner.
 *
 * TWO OVERRIDES, one fact — the thumbnail is a white TILE holding a logo, not
 * a photograph. Everything below follows from that.
 *
 * OVERRIDE 1 — how the artwork is fitted. The component crops its images with `object-fit: cover` because
 * everywhere else they are 16:9 editorial photography and cropping is what
 * "fill the frame" means. Here the artwork is an outlet's logo — CNBC,
 * Bloomberg, Fierce Healthcare — with its own margins and its own aspect
 * ratio, and cover magnifies each one until only a few letterforms are left
 * ("mberg" for Bloomberg, "RCE care" for Fierce Healthcare, verified on the
 * built page). The comp draws exactly what the handoff describes: a white
 * surface with the logo INSIDE it (§3, "Thumbnail: 329×186 area, white
 * surface, client-placed image inside").
 *
 * So: contain instead of cover, on a white ground, with padding to hold the
 * logo off the tile's edges. Everything else about the thumbnail is the
 * component's — the 16:9 box and the chamfer both stay, which is why the cut
 * corner still reads and the grid rows still line up.
 *
 * An earlier revision of this file flattened the card here — no chamfer, no
 * hairline, fill-only hover — on the premise that press thumbnails are OG
 * graphics whose top-edge typography the chamfer would clip (the risk
 * _resource-card.scss's own ⚑ DESIGN note raises). That premise was wrong for
 * this page: these thumbnails are outlet LOGOS centered on white tiles, which
 * the cut cannot reach. Do not reintroduce the override without artwork that
 * actually loses something to it. */

.infinitus-section--newsroom-grid {
	/* The tile's stroke weight, node 2105:2158's own `stroke-width="2"`. Named
	   because the ring below is built out of padding, where a bare 2 reads as
	   nothing in particular. */
	--newsroom-grid-tile-stroke: 2px;

	/* Vertical Spacing/X-Large (200px at Wide), the page's closing rhythm
	   above the footer. No top padding: the hero's own padding-block-end is
	   the gap between the two bands, so a second value here would compose
	   into one too large — the same accounting resources-hub-hero.css makes
	   for its Featured band. */
	padding-block-end: var(--wp--preset--spacing--section-xl);
}

.infinitus-section--newsroom-grid .resource-card .resource-card__image img {
	background-color: var(--wp--preset--color--white);
	object-fit: contain;

	/* The logo's box inside the tile, measured off the comp rather than
	   guessed. Tile 328.98x185.51 (node 2104:1627); the logos placed in it are
	   210.02x87.41 (Fierce), 279.5x62.69 (PharmExec), 209.5x88.16 (Amgen),
	   147.5x86.64 (HIT) — none wider than 85% of the tile, none taller than
	   47.5% of it, each centred on both axes. PharmExec sits exactly on the
	   width cap and Amgen exactly on the height cap, so those two are the
	   design's own limits rather than an average of them.

	   Expressed as padding so `contain` does the fitting: 7.5% a side
	   horizontally leaves 85%, and 14.8% leaves 47.5% vertically — percentage
	   padding resolves against the WIDTH on both axes, and this box is
	   aspect-ratio 16/9, so 26.25% of the height is 26.25% x 0.5625 = 14.8% of
	   the width. That keeps the proportion exact at every breakpoint with no
	   media query.

	   Bloomberg is the one logo the comp draws smaller than these caps
	   (238.5x69.84 against a 279.6 width limit) — an optical judgement per
	   logo, which no single rule reproduces. Every other measured card matches. */
	padding: 14.8% 7.5%;
}

/* OVERRIDE 2 — the tile's hairline, which the shared component has no equivalent
 * of. BugHerd #161. The thumbnail's own vector in the comp (node 2105:2158,
 * "Rectangle 134") exports as
 *
 *   <path … fill="white" stroke="#F3F4F6" stroke-width="2"/>
 *
 * i.e. Neutrals/Neutral 100, the gray-100 preset, 2px, on the white fill this
 * file already draws. The handoff's audit table reports "Stroke styles ✅ N/A —
 * Cards are flat filled surfaces with no borders; no raw stroke colors
 * detected": that check looked for stroke STYLES, and this is a raw stroke on a
 * vector layer, so it slipped through. The node is the authority over the
 * audit.
 *
 * NOT `border` and not `outline` on the image. clip-path clips both, so either
 * one leaves the chamfer's diagonal — the single edge the comp most obviously
 * strokes — bare. The ring is the WRAPPER showing through instead: the same
 * chamfer shape, a gray-100 ground, and the white image inset from it by the
 * stroke's own width. Every edge including the cut gets the hairline, and both
 * shapes are percentage-based, so it stays proportional at every breakpoint
 * with no media query.
 *
 * The polygon is restated rather than shared because clip-path does not
 * inherit — but the chamfer's two custom properties are the component's own, so
 * the outer shape cannot drift from the inner one. The inner clip resolves
 * against a box 2 x --newsroom-grid-tile-stroke smaller on each axis, which is
 * what puts the ring on the diagonal too.
 *
 * Scoped to this section on purpose. `.resource-card` is shared with the
 * Resources hub, the /resource-type/{slug}/ archives and Clinical Evidence,
 * whose thumbnails are editorial photography — a hairline drawn tight around a
 * full-bleed photo is not something any of those comps ask for. Logo tiles
 * exist only here. */
.infinitus-section--newsroom-grid .resource-card .resource-card__image {
	background-color: var(--wp--preset--color--gray-100);
	border-radius: var(--wp--custom--radius--sm);
	box-sizing: border-box;
	clip-path: polygon(
		0 0,
		calc(100% - var(--resource-card-chamfer-x)) 0,
		100% var(--resource-card-chamfer-y),
		100% 100%,
		0 100%
	);
	padding: var(--newsroom-grid-tile-stroke);
}