/*
 * ILM Components -- Posts / Grid.
 *
 * A CSS grid of cards. The column count comes from `--ilm-c-cols`, which the
 * `ilm-cols-N` classes in base.css set and the breakpoint variants override --
 * the same mechanism layout-grid.css uses, so a Posts grid and a Grid respond
 * at the same widths.
 *
 * `minmax(0, 1fr)` rather than `1fr`: a grid track's default minimum is
 * `auto`, so a long unbroken word in a title would push the track wider than
 * its share and the row would overflow.
 *
 * There is no JavaScript here and nothing is hidden. Every card the server
 * rendered is on the page -- no infinite scroll, no "load more", no
 * client-side filtering (section 113).
 */

.ilm-component--wordpress-posts-grid {
	display: block;
}

.ilm-posts-grid__list {
	display: grid;
	grid-template-columns: repeat(var(--ilm-c-cols), minmax(0, 1fr));
	row-gap: var(--ilm-c-gap);

	/* At most one column's share (1.23.0): the gaps can never outgrow the grid. See layout-row.css. */
	column-gap: min(var(--ilm-c-gap), 100% / var(--ilm-c-cols));
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilm-posts-grid__card {
	margin: 0;
	min-width: 0;
}

.ilm-posts-grid__article {
	display: flex;
	flex-direction: column;
	gap: var(--ilm-c-space-xs);
	height: 100%;
}

/*
 * The whole heading -- image and title together -- is one link, so this is the
 * element that carries the focus ring. Without `display: block` the anchor
 * would be inline and the outline would wrap awkwardly around the image.
 */
.ilm-posts-grid__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ilm-posts-grid__link:hover .ilm-posts-grid__title,
.ilm-posts-grid__link:focus-visible .ilm-posts-grid__title {
	text-decoration: underline;
}

/*
 * The image shape is the media vocabulary's `--ilm-c-ratio` (1.17.0), set by
 * an `ilm-ratio-*` class on the grid. 16:9 unless one is -- the shape every
 * earlier version drew -- and set on the grid itself at zero specificity, so
 * a ratio class on the same element wins and nothing outside the grid leaks
 * in by inheritance.
 */
:where(.ilm-component--wordpress-posts-grid) {
	--ilm-c-ratio: 16 / 9;
}

.ilm-posts-grid__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	margin-block-end: var(--ilm-c-space-xs);
}

/*
 * A shape, unless the grid asks for each image's own (1.23.0).
 *
 * "Original proportions" declares no shape at all rather than `auto`. The
 * image's `width` and `height` attributes, which WordPress writes from the
 * attachment's metadata, already give it its proportions before a byte of
 * it arrives -- the browser's own `aspect-ratio: auto <w> / <h>` -- and an
 * authored `aspect-ratio: auto` replaced that with nothing, so a lazy image
 * had no height until it loaded and every card under it moved. Zero
 * specificity on the grid, as before: (0,1,0) in all.
 */
:where(.ilm-component--wordpress-posts-grid:not(.ilm-ratio-auto)) .ilm-posts-grid__image {
	aspect-ratio: var(--ilm-c-ratio);
}

.ilm-posts-grid__title {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.ilm-posts-grid__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	font-size: 0.875em;
	opacity: 0.75;
}

.ilm-posts-grid__excerpt {
	margin: 0;
}

.ilm-posts-grid__empty {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 1.17.0: type and subtitle lines, pagination, card styles, empty bands.
 * ------------------------------------------------------------------------ */

.ilm-posts-grid__type {
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ilm-posts-grid__subtitle {
	margin: 0;
	font-size: 0.9375em;
	opacity: 0.85;
}

/*
 * Page links. Every one is a 44px target, and the current page is text with
 * `aria-current`, not a link to where the reader already is.
 */
.ilm-posts-grid__pagination {
	margin-block-start: var(--ilm-c-gap, var(--ilm-c-space-md));
}

.ilm-posts-grid__pages {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ilm-c-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilm-posts-grid__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--ilm-color-border, currentColor);
	border-radius: var(--ilm-radius-sm, 4px);
	color: inherit;
	text-decoration: none;
}

a.ilm-posts-grid__page:hover {
	border-color: currentColor;
}

a.ilm-posts-grid__page:focus-visible {
	outline: 2px solid var(--ilm-color-focus, currentColor);
	outline-offset: 2px;
}

.ilm-posts-grid__page--current {
	border-color: transparent;
	background: var(--ilm-color-primary, #1f1f1f);
	color: var(--ilm-color-on-primary, #fff);
	font-weight: 600;
}

.ilm-posts-grid__page--gap {
	border-color: transparent;
}

/*
 * Compact and overlay cards: the one link, stretched.
 *
 * The anchor holds only the title, so its name is the title alone; its
 * `::after` covers the card, so the whole card is still the link's hit area.
 * The focus ring is drawn by that same box, around the whole card.
 */
.ilm-posts-grid--compact .ilm-posts-grid__article,
.ilm-posts-grid--overlay .ilm-posts-grid__article {
	position: relative;
}

.ilm-posts-grid--compact .ilm-posts-grid__link::after,
.ilm-posts-grid--overlay .ilm-posts-grid__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.ilm-posts-grid--compact .ilm-posts-grid__link:focus-visible,
.ilm-posts-grid--overlay .ilm-posts-grid__link:focus-visible {
	outline: none;
}

.ilm-posts-grid--compact .ilm-posts-grid__link:focus-visible::after,
.ilm-posts-grid--overlay .ilm-posts-grid__link:focus-visible::after {
	outline: 2px solid var(--ilm-color-focus, currentColor);
	outline-offset: 2px;
}

.ilm-posts-grid__body {
	display: flex;
	flex-direction: column;
	gap: var(--ilm-c-space-xs);
	min-width: 0;
}

.ilm-posts-grid__media .ilm-posts-grid__image {
	margin: 0;
}

/* Compact: a small image beside the text. */
.ilm-posts-grid--compact .ilm-posts-grid__article {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--ilm-c-space-sm);
}

.ilm-posts-grid--compact .ilm-posts-grid__media {
	flex: 0 0 38%;
	max-inline-size: 10rem;
	overflow: hidden;
	border-radius: var(--ilm-radius-sm, 4px);
}

.ilm-posts-grid--compact .ilm-posts-grid__body {
	flex: 1 1 0;
}

/*
 * Overlay: the text on the image, on a scrim.
 *
 * The scrim is black whatever the site's colours, because the text on it is
 * always white: the image under it can be any colour at all, so neither may
 * come from a token. The text sits where the scrim is at least 75% opaque,
 * which keeps white text above 7:1 even over a white image. Without an image
 * the frame keeps the card's shape.
 */
.ilm-posts-grid--overlay .ilm-posts-grid__article {
	display: grid;
	overflow: hidden;
	border-radius: var(--ilm-radius-lg, 12px);
	background-color: #1a1a1d;
	color: #fff;
	isolation: isolate;
}

.ilm-posts-grid--overlay .ilm-posts-grid__media,
.ilm-posts-grid--overlay .ilm-posts-grid__body {
	grid-area: 1 / 1;
}

.ilm-posts-grid--overlay:where(:not(.ilm-ratio-auto)) .ilm-posts-grid__media {
	aspect-ratio: var(--ilm-c-ratio);
}

.ilm-posts-grid--overlay .ilm-posts-grid__image {
	height: 100%;
}

.ilm-posts-grid--overlay .ilm-posts-grid__body {
	align-self: end;
	padding: calc(var(--ilm-c-space-md) * 2) var(--ilm-c-space-md) var(--ilm-c-space-md);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.75) 65%, rgba(0, 0, 0, 0) 100%);
}

.ilm-posts-grid--overlay .ilm-posts-grid__meta {
	order: -1;
	opacity: 0.9;
}

.ilm-posts-grid--overlay .ilm-posts-grid__title {
	font-size: 1.375em;
	line-height: 1.15;
}

/*
 * A narrow overlay card sets its text below the image instead of on it.
 *
 * Measured by the card, not the viewport: a lead card on a phone and a card
 * in a narrow column are the same problem. Below 30rem the text -- type,
 * title, excerpt -- is nearly as tall as a 16:9 image, so the scrim would
 * cover the whole picture. A browser without container queries keeps the
 * overlay.
 */
.ilm-posts-grid--overlay .ilm-posts-grid__card {
	container-type: inline-size;
}

@container (max-width: 30rem) {

	.ilm-posts-grid--overlay .ilm-posts-grid__media,
	.ilm-posts-grid--overlay .ilm-posts-grid__body {
		grid-area: auto;
	}

	.ilm-posts-grid--overlay .ilm-posts-grid__body {
		padding: var(--ilm-c-space-sm);
		background: none;
	}
}

/*
 * An empty band (1.17.0): the nearest Section around a grid that matched
 * nothing and was told to hide it. Not in the editor canvas, whose body is
 * `ilm-canvas`, where the band has to stay visible to be edited. `!important`
 * because a Section's own design classes set `display`, and hiding is the
 * whole of this rule.
 */
:where(body:not(.ilm-canvas)) .ilm-component--layout-section:has([data-ilm-empty-band]):not(:has(.ilm-component--layout-section [data-ilm-empty-band])) {
	display: none !important;
}

/*
 * Image fit: contain (1.22.0). The whole image inside the card's shape, for
 * logos and covers that must not be cropped; the shape -- a fixed ratio, or
 * the image's own from its attributes -- still reserves the space, so the
 * grid does not jump while images load.
 */
.ilm-posts-grid--contain .ilm-posts-grid__image {
	object-fit: contain;
}

/*
 * A card's placeholder (1.27.0) stands where the image would: the standard
 * card's gap under it, the radius the card's images have, and the whole
 * frame inside a compact or overlay card's media box.
 */
.ilm-posts-grid__placeholder {
	margin-block-end: var(--ilm-c-space-xs);
}

.ilm-posts-grid__media .ilm-posts-grid__placeholder {
	margin: 0;
	block-size: 100%;
}

/*
 * A card whose picture opens larger (1.30.0, `cardLink: lightbox`).
 *
 * The picture is its own control (`.ilm-posts-grid__zoom`, a link to the
 * picture that the lightbox intercepts) and the title is the link to the
 * page. In the compact and overlay cards the title's link no longer stretches
 * over the whole card, so each of the two keeps its own target; the focus
 * ring goes back on the title.
 */
.ilm-posts-grid__zoom {
	display: block;
	border-radius: inherit;
}

.ilm-posts-grid--overlay .ilm-posts-grid__zoom {
	block-size: 100%;
}

.ilm-posts-grid--lightbox.ilm-posts-grid--compact .ilm-posts-grid__link::after,
.ilm-posts-grid--lightbox.ilm-posts-grid--overlay .ilm-posts-grid__link::after {
	content: none;
}

.ilm-posts-grid--lightbox.ilm-posts-grid--compact .ilm-posts-grid__link:focus-visible,
.ilm-posts-grid--lightbox.ilm-posts-grid--overlay .ilm-posts-grid__link:focus-visible {
	outline: 2px solid var(--ilm-color-focus, currentColor);
	outline-offset: 2px;
}

.ilm-posts-grid--lightbox.ilm-posts-grid--overlay .ilm-posts-grid__body {
	pointer-events: none;
}

.ilm-posts-grid--lightbox.ilm-posts-grid--overlay .ilm-posts-grid__body a {
	pointer-events: auto;
}

/* A record's dates on a card (1.30.0): one line that may wrap, never overflow. */
span.ilm-posts-grid__date {
	overflow-wrap: anywhere;
}

/* A paginated grid's page links lead back to it (1.30.0): it lands clear of a sticky header. */
.ilm-component--wordpress-posts-grid[id] {
	scroll-margin-block-start: 6rem;
}

/*
 * Changing pages in place (1.32.0). While a page is on its way the cards stay
 * where they are, dimmed (not animated), so nothing jumps; the empty alert takes no room
 * until it has something to say.
 */
.ilm-component--wordpress-posts-grid.is-loading .ilm-posts-grid__list {
	opacity: 0.55;
}

.ilm-component--wordpress-posts-grid.is-loading .ilm-posts-grid__pagination {
	cursor: progress;
}

.ilm-posts-grid__list:focus {
	outline: none;
}

.ilm-posts-grid__list:focus-visible {
	outline: 2px solid var(--ilm-color-focus, currentColor);
	outline-offset: 4px;
}

.ilm-posts-grid__notice {
	margin: var(--ilm-c-space-sm, 0.75rem) 0 0;
	font-size: 0.9375em;
}

.ilm-posts-grid__notice:empty {
	display: none;
}

/*
 * What a visitor may choose (1.33.0). Each set of options is a labelled
 * group of links that wraps onto as many lines as it needs -- never a row
 * that scrolls sideways -- with 44px targets, as the page links have. The
 * option shown is `aria-current`, filled like the current page.
 */
.ilm-posts-grid__choices {
	display: grid;
	gap: var(--ilm-c-space-sm, 0.75rem);
	margin-block-end: var(--ilm-c-gap, var(--ilm-c-space-md));
}

.ilm-posts-grid__choice-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ilm-c-space-xs, 0.5rem);
	min-inline-size: 0;
}

.ilm-posts-grid__choice-label {
	margin-inline-end: var(--ilm-c-space-xs, 0.5rem);
	font-weight: 600;
}

.ilm-posts-grid__choice-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ilm-c-space-xs, 0.5rem);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilm-posts-grid__choice {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-block-size: 2.75rem;
	max-inline-size: 100%;
	padding-inline: 0.875rem;
	border: 1px solid var(--ilm-color-border, currentColor);
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ilm-posts-grid__choice:hover {
	border-color: currentColor;
}

.ilm-posts-grid__choice:focus-visible {
	outline: 2px solid var(--ilm-color-focus, currentColor);
	outline-offset: 2px;
}

.ilm-posts-grid__choice[aria-current] {
	border-color: transparent;
	background: var(--ilm-color-primary, #1f1f1f);
	color: var(--ilm-color-on-primary, #fff);
	font-weight: 600;
}

.ilm-posts-grid__choice-count {
	font-size: 0.8125em;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

/* On the filled option the count keeps the option's full colour: dimmed, it fails contrast. */
.ilm-posts-grid__choice[aria-current] .ilm-posts-grid__choice-count {
	opacity: 1;
}

.ilm-component--wordpress-posts-grid.is-loading .ilm-posts-grid__choices {
	cursor: progress;
}

/* The term chosen, and what a year leaves out: said once, above the cards. */
.ilm-posts-grid__context {
	margin-block-end: var(--ilm-c-gap, var(--ilm-c-space-md));
	padding: var(--ilm-c-space-md, 1rem);
	border-inline-start: 4px solid var(--ilm-color-primary, currentColor);
	background: var(--ilm-color-bg-subtle, #f4f6f8);
}

.ilm-posts-grid__context > * {
	margin: 0;
}

.ilm-posts-grid__context > * + * {
	margin-block-start: var(--ilm-c-space-xs, 0.5rem);
}

.ilm-posts-grid__context-title {
	font-size: 1.25em;
	font-weight: 700;
}

.ilm-posts-grid__context-note {
	font-size: 0.9375em;
}

.ilm-posts-grid__context-link {
	font-weight: 600;
}

.ilm-posts-grid__context-link:focus-visible {
	outline: 2px solid var(--ilm-color-focus, currentColor);
	outline-offset: 2px;
}

/*
 * Posts in full (1.35.0): one entry after another, the whole width, whatever
 * the column setting says -- a story is read down the page, not in a column
 * of three. The space between entries is the grid's gap; an entry's title
 * is a heading of the page and its content is the post's own markup.
 */
.ilm-posts-grid--entries .ilm-posts-grid__list {
	grid-template-columns: minmax(0, 1fr);
	column-gap: 0;
}

.ilm-posts-grid__entry {
	margin: 0;
	min-width: 0;
}

.ilm-posts-grid--entries .ilm-posts-grid__article {
	gap: var(--ilm-c-space-sm, 0.75rem);
	height: auto;
}

.ilm-posts-grid__entry-title {
	margin-block: 0;
	overflow-wrap: anywhere;
}

.ilm-posts-grid__entry-title .ilm-posts-grid__link {
	display: inline;
}

.ilm-posts-grid__entry-title .ilm-posts-grid__link:hover,
.ilm-posts-grid__entry-title .ilm-posts-grid__link:focus-visible {
	text-decoration: underline;
}

.ilm-posts-grid__entry-content {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* What Post Content gives its own body (wordpress-post-content.css), for the same body here. */
.ilm-posts-grid__entry-content > * + * {
	margin-block-start: var(--ilm-c-space-sm);
}

.ilm-posts-grid__entry-content img,
.ilm-posts-grid__entry-content iframe,
.ilm-posts-grid__entry-content video {
	max-width: 100%;
	height: auto;
}

/*
 * A wall of logos (1.40.0, `card: logo`).
 *
 * Every card's frame is one size -- the grid's shape (`--ilm-c-ratio`), and
 * 3:2 where the grid asks for each image's own, which a frame cannot have --
 * so the names under the frames start on one line across a row whatever
 * shape each file is. The image fills the frame's box less a margin of its
 * own (`padding`, which `object-fit` keeps the picture inside), whole: never
 * cropped, never stretched, and the file itself never changed.
 *
 * The frame is a quiet surface mixed from the text colour, so it reads on
 * the page's background and on a tinted band alike; a logo with its own
 * background stands inside it as a tile, a transparent one on the surface.
 *
 * A card with a link and a card without one share the face. Only the link
 * answers the pointer: its frame's edge strengthens and its name is
 * underlined on hover -- at once, as nothing in this stylesheet moves --
 * and the whole face carries the focus ring.
 */
.ilm-posts-grid--logo .ilm-posts-grid__face {
	display: block;
	color: inherit;
	text-decoration: none;
	border-radius: var(--ilm-radius-md, 8px);
}

.ilm-posts-grid--logo .ilm-posts-grid__frame {
	position: relative;
	display: block;
	box-sizing: border-box;
	inline-size: 100%;
	aspect-ratio: var(--ilm-c-ratio, 3 / 2);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	border-radius: var(--ilm-radius-md, 8px);
	background: color-mix(in srgb, currentColor 5%, transparent);
}

.ilm-posts-grid--logo.ilm-ratio-auto .ilm-posts-grid__frame {
	aspect-ratio: 3 / 2;
}

.ilm-posts-grid--logo .ilm-posts-grid__frame .ilm-posts-grid__image {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: auto;
	margin: 0;
	padding: 10%;
	object-fit: contain;
	object-position: center;
}

.ilm-posts-grid--logo .ilm-posts-grid__frame .ilm-posts-grid__zoom {
	position: absolute;
	inset: 0;
}

.ilm-posts-grid--logo .ilm-posts-grid__frame .ilm-placeholder {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	margin: 0;
	border: 0;
	background: none;
	container-type: inline-size;
	color: var(--ilm-color-fg, currentColor);
}

/* A missing logo's name, at a logo's size: in proportion to the frame. */
.ilm-posts-grid--logo .ilm-posts-grid__frame .ilm-placeholder__name {
	font-size: clamp(1.125rem, 20cqi, 2.5rem);
	opacity: 0.85;
}

.ilm-posts-grid--logo .ilm-posts-grid__title {
	margin-block-start: 0.625rem;
	font-size: 0.9375em;
	line-height: 1.35;
	text-align: center;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.ilm-posts-grid--logo a.ilm-posts-grid__face:hover .ilm-posts-grid__frame {
	border-color: color-mix(in srgb, currentColor 45%, transparent);
	background: color-mix(in srgb, currentColor 9%, transparent);
}

.ilm-posts-grid--logo a.ilm-posts-grid__face:focus-visible {
	outline: 2px solid var(--ilm-color-focus, currentColor);
	outline-offset: 4px;
}

.ilm-posts-grid--logo a.ilm-posts-grid__face:focus-visible .ilm-posts-grid__frame {
	border-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* A picture that opens larger: the name is the link, and carries its own ring. */
.ilm-posts-grid--logo .ilm-posts-grid__face > .ilm-posts-grid__link {
	display: block;
}

.ilm-posts-grid--logo .ilm-posts-grid__face > .ilm-posts-grid__link:focus-visible {
	outline: 2px solid var(--ilm-color-focus, currentColor);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 1.41.0: the feature card, and cards whose PDF opens in the reader.
 * ------------------------------------------------------------------------ */

/*
 * Feature: one large picture beside the text, once the card is wide enough
 * for both (measured by the card, as the overlay is), stacked below that.
 * Without a reader its title's link stretches over the card, as a compact
 * card's does.
 */
.ilm-posts-grid--feature .ilm-posts-grid__card {
	container-type: inline-size;
}

.ilm-posts-grid--feature .ilm-posts-grid__article {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: var(--ilm-c-space-md);
}

.ilm-posts-grid--feature .ilm-posts-grid__media {
	justify-self: center;
	inline-size: 100%;
	max-inline-size: 22rem;
}

.ilm-posts-grid--feature .ilm-posts-grid__body {
	gap: var(--ilm-c-space-sm);
}

.ilm-posts-grid--feature .ilm-posts-grid__title {
	font-size: clamp(1.75rem, 1.25rem + 2.5cqi, 3rem);
	line-height: 1.1;
}

@container (min-width: 36rem) {

	.ilm-posts-grid--feature .ilm-posts-grid__article {
		grid-template-columns: minmax(12rem, 22rem) minmax(0, 1fr);
		gap: var(--ilm-c-space-lg, var(--ilm-c-space-md));
	}

	.ilm-posts-grid--feature .ilm-posts-grid__media {
		justify-self: stretch;
	}
}

.ilm-posts-grid--feature:not(.ilm-posts-grid--reader) .ilm-posts-grid__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ilm-posts-grid--feature:not(.ilm-posts-grid--reader) .ilm-posts-grid__link:focus-visible {
	outline: none;
}

.ilm-posts-grid--feature:not(.ilm-posts-grid--reader) .ilm-posts-grid__link:focus-visible::after {
	outline: 2px solid var(--ilm-color-focus, currentColor);
	outline-offset: 2px;
}

/*
 * A cover that opens a PDF. Shown whole, at the bottom of its frame, so the
 * covers of a row stand on one line however each file is shaped; the shadow
 * follows the picture itself (`drop-shadow`), not the empty frame around it.
 * Never drawn wider than the frame -- a small file is not stretched past it.
 */
.ilm-posts-grid--reader .ilm-posts-grid__cover {
	display: block;
}

.ilm-posts-grid--reader .ilm-posts-grid__image {
	object-fit: contain;
	object-position: 50% 100%;
	filter: drop-shadow(0 0.375rem 0.75rem rgb(0 0 0 / 0.22));
}

.ilm-posts-grid--reader .ilm-posts-grid__media .ilm-posts-grid__image {
	margin: 0;
}

.ilm-posts-grid__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: var(--ilm-c-space-xs);
}

/* Stacked cards: the actions stand on the card's foot, so a row's line up whatever its titles' lengths. */
.ilm-posts-grid--reader:not(.ilm-posts-grid--feature, .ilm-posts-grid--compact, .ilm-posts-grid--overlay) .ilm-posts-grid__actions {
	margin-block-start: auto;
}

.ilm-posts-grid__action {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-block-size: 2.75rem;
	padding: 0.5em 1.125em;
	border: 2px solid var(--ilm-color-primary, #1d63c8);
	border-radius: var(--ilm-radius-md, 0.375rem);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.ilm-posts-grid__action .ilm-icon {
	inline-size: 1.15em;
	block-size: 1.15em;
	flex: none;
}

.ilm-posts-grid__action--read {
	background: var(--ilm-color-primary, #1d63c8);
	color: var(--ilm-color-on-primary, #fff);
}

/* On the page's own background, so in the link colour, which is made to read there. */
.ilm-posts-grid__action--original {
	border-color: currentColor;
	background: transparent;
	color: var(--ilm-color-link, var(--ilm-color-primary, #1d63c8));
}

.ilm-posts-grid__action--read:hover {
	border-color: var(--ilm-color-primary-hover, var(--ilm-color-primary, #1d63c8));
	background: var(--ilm-color-primary-hover, var(--ilm-color-primary, #1d63c8));
}

.ilm-posts-grid__action:hover {
	text-decoration: underline;
}

.ilm-posts-grid__action:focus-visible {
	outline: 2px solid var(--ilm-color-focus, currentColor);
	outline-offset: 2px;
}

/* A narrow card: the actions take its width, one above the other. */
@container (max-width: 14rem) {

	.ilm-posts-grid__action {
		flex: 1 1 100%;
	}
}

.ilm-posts-grid--reader .ilm-posts-grid__card {
	container-type: inline-size;
}

/* ---------------------------------------------------------------------------
 * 1.46.0: an item's terms under its title, and its profiles at the card's foot.
 * ------------------------------------------------------------------------ */

.ilm-posts-grid__terms {
	margin: 0;
	font-size: 0.9375em;
	opacity: 0.85;
	overflow-wrap: anywhere;
}

.ilm-posts-grid--logo .ilm-posts-grid__terms {
	text-align: center;
}

.ilm-posts-grid__profiles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	margin-block-start: var(--ilm-c-space-xs, 0.5rem);
	padding: 0;
	list-style: none;
}

.ilm-posts-grid--logo .ilm-posts-grid__profiles {
	justify-content: center;
}

.ilm-posts-grid__profile {
	margin: 0;
	padding: 0;
}

/*
 * Each a 44px target of its own. Above a stretched card link (compact,
 * overlay), so a profile is never covered by the card's own hit area.
 */
.ilm-posts-grid__profile-link {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	border-radius: var(--ilm-radius-md, 0.5rem);
	color: inherit;
	text-decoration: none;
}

.ilm-posts-grid__profile-link:hover,
.ilm-posts-grid__profile-link:focus-visible {
	color: var(--ilm-color-link, currentColor);
	background-color: var(--ilm-color-bg-strong, transparent);
}

.ilm-posts-grid__profile-link:focus-visible {
	outline: 2px solid var(--ilm-color-focus, currentColor);
	outline-offset: 2px;
}

.ilm-posts-grid__profile-icon {
	flex: none;
	inline-size: 1.25em;
	block-size: 1.25em;
}

/* The name stays in the link, out of sight: the mark is what is seen. */
.ilm-posts-grid__profile-name {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}