/**
 * seamlessmd/latest-insights — "Latest Insights & Articles" article grid.
 *
 * Grid throughout, at two levels: the section grid (3 / 2 / 1 columns) and the
 * card's own image | content split. Grid column placement is flow-relative, so
 * RTL mirrors the header and the image / content split with no second
 * stylesheet and without a language branch in PHP. Every offset uses logical
 * properties.
 *
 * Cards have no fixed width — `minmax(0, 1fr)` tracks — so removing an article
 * reflows the grid and the remaining cards keep equal widths. Card height comes
 * from the content, floored by `min-block-size` so the image never collapses to
 * a sliver; nothing here sets a fixed height.
 *
 * The palette has no blue token, so the accent is declared block-locally on the
 * root class rather than added globally. The category tone pairs mirror the
 * resources hero and the browse strip above, so the whole page shares one
 * accent palette.
 *
 * Load order: this file loads BEFORE assets/css/seamlessmd-theme.css, so any
 * rule that has to beat the bundle is scoped twice deliberately (noted inline).
 */

.seamlessmd-latest-insights {
	--seamlessmd-li-blue: #2563eb;
	--seamlessmd-li-navy: var( --seamlessmd-dark-navy, #0b1b3a );
	--seamlessmd-li-muted: #667089;
	--seamlessmd-li-card-bg: #fff;
	--seamlessmd-li-card-border: #e6ecf6;
	--seamlessmd-li-card-shadow: 0 6px 18px rgba( 15, 32, 68, 0.05 );
	--seamlessmd-li-radius: 0.9rem;
	--seamlessmd-li-gap: clamp( 0.85rem, 1.4vw, 1.3rem );

	/* Mirrors the panel padding used by the resources hero and the browse
	 * strip, so all three sections share one content column. */
	--seamlessmd-li-pad: clamp( 1.15rem, 2.1vw, 1.95rem );

	/* Fallback tone, overridden per category modifier below. */
	--seamlessmd-li-tone-fg: #2563eb;
	--seamlessmd-li-tone-bg: #e7effd;

	padding-block: clamp( 1.2rem, 2.4vw, 1.9rem ) clamp( 1.2rem, 2.6vw, 2.2rem );
}

/* (0,2,0) — matches the widened inner of the two sections above so all three
 * share one content column. Scoped to this block; `.seamlessmd-container` is
 * untouched. */
.seamlessmd-latest-insights .seamlessmd-latest-insights__inner {
	/* Follows the shared page-margin token (full-bleed site layout). */
	max-inline-size: var( --seamlessmd-container-max, 1340px );
}

/* ---------- header ---------- */

.seamlessmd-latest-insights__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-block-end: clamp( 0.7rem, 1.3vw, 1.05rem );
	padding-inline: var( --seamlessmd-li-pad );
}

.seamlessmd-latest-insights__heading {
	margin: 0;
	color: var( --seamlessmd-li-navy );
	font-size: clamp( 1.15rem, 1.6vw, 1.4rem );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-align: start;
}

.seamlessmd-latest-insights__action {
	color: var( --seamlessmd-li-blue );
	font-size: clamp( 0.82rem, 0.95vw, 0.9rem );
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

a.seamlessmd-latest-insights__action:hover,
a.seamlessmd-latest-insights__action:focus-visible {
	text-decoration: underline;
}

/* ---------- grid ---------- */

.seamlessmd-latest-insights__grid {
	display: grid;
	/* Four columns at desktop matches the current four-item set and reads as
	 * one clean row instead of the ragged 3-then-1 the earlier three-column
	 * cap produced when the fourth article dropped to its own row with three
	 * empty tracks beside it. */
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	/* Grid sizes each row independently, so a final row holding one card would
	 * shrink to that card's own content and read as a smaller card than the
	 * full row above it. Equal implicit rows tie every row to the tallest,
	 * whatever the post count. `__item` and the card already stretch, so the
	 * card fills the track with no markup change. Reset to `auto` in the
	 * single-column branch below, where equal rows would only pad short cards
	 * with blank space. */
	grid-auto-rows: 1fr;
	gap: var( --seamlessmd-li-gap );
	margin: 0;
	padding-block: 0;
	padding-inline: var( --seamlessmd-li-pad );
	list-style: none;
}

.seamlessmd-latest-insights__item {
	display: flex;
	min-inline-size: 0;
}

/* ---------- card ---------- */

.seamlessmd-latest-insights__card {
	display: grid;
	/* Image on the inline-start, content on the inline-end. Grid tracks are
	 * flow-relative, so RTL swaps them with no extra rule. The reference splits
	 * the card almost evenly, but its card is wider than the one this container
	 * yields; holding the image at 0.8fr keeps the text column wide enough for
	 * the design's two-line titles instead of pushing them to three. */
	grid-template-columns: minmax( 0, 0.8fr ) minmax( 0, 1fr );
	align-items: stretch;
	inline-size: 100%;
	/* A floor, not a fixed height — the card still grows with its content. */
	min-block-size: 8.25rem;
	background: var( --seamlessmd-li-card-bg );
	border: 1px solid var( --seamlessmd-li-card-border );
	border-radius: var( --seamlessmd-li-radius );
	box-shadow: var( --seamlessmd-li-card-shadow );
	/* Clips the image to the card's rounded corners. */
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.seamlessmd-latest-insights__card--no-media {
	grid-template-columns: minmax( 0, 1fr );
}

a.seamlessmd-latest-insights__card:hover,
a.seamlessmd-latest-insights__card:focus-visible {
	border-color: #d3ddef;
	box-shadow: 0 10px 24px rgba( 15, 32, 68, 0.09 );
	transform: translateY( -2px );
}

a.seamlessmd-latest-insights__card:focus-visible {
	outline: 2px solid var( --seamlessmd-li-blue );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.seamlessmd-latest-insights__card {
		transition: none;
	}

	a.seamlessmd-latest-insights__card:hover,
	a.seamlessmd-latest-insights__card:focus-visible {
		transform: none;
	}
}

/* ---------- media ---------- */

.seamlessmd-latest-insights__media {
	display: block;
	min-inline-size: 0;
	overflow: hidden;
	background: #eef2f8;
}

/* (0,2,0) — theme.css sets `img { max-width: 100%; height: auto }` after this
 * file; `height: auto` would collapse the photo to its intrinsic ratio instead
 * of filling the card, so the sizing is re-stated at higher specificity. */
.seamlessmd-latest-insights .seamlessmd-latest-insights__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	object-position: 50% 45%;
}

/* ---------- body ---------- */

.seamlessmd-latest-insights__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-inline-size: 0;
	padding-block: clamp( 0.75rem, 1.2vw, 0.95rem );
	padding-inline: clamp( 0.75rem, 1.1vw, 0.9rem );
}

.seamlessmd-latest-insights__category {
	color: var( --seamlessmd-li-tone-fg );
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Arabic letters join and have no letter case; tracking breaks the joins and
 * uppercasing is meaningless. */
[dir="rtl"] .seamlessmd-latest-insights__category {
	letter-spacing: normal;
	text-transform: none;
	font-size: 0.74rem;
}

[dir="rtl"] .seamlessmd-latest-insights__heading {
	letter-spacing: normal;
	line-height: 1.4;
}

.seamlessmd-latest-insights__title {
	color: var( --seamlessmd-li-navy );
	font-size: clamp( 0.92rem, 1.05vw, 1rem );
	font-weight: 700;
	line-height: 1.32;
	overflow-wrap: anywhere;
}

[dir="rtl"] .seamlessmd-latest-insights__title {
	line-height: 1.45;
}

/* ---------- author row ---------- */

.seamlessmd-latest-insights__author {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	/* Pins the row to the bottom of the card regardless of title length. */
	margin-block-start: auto;
	padding-block-start: 0.5rem;
	min-inline-size: 0;
}

.seamlessmd-latest-insights__avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	overflow: hidden;
	border-radius: 50%;
	background: var( --seamlessmd-li-tone-bg );
	color: var( --seamlessmd-li-tone-fg );
	font-size: 0.82rem;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.seamlessmd-latest-insights .seamlessmd-latest-insights__avatar-image {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
}

.seamlessmd-latest-insights__author-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-inline-size: 0;
}

.seamlessmd-latest-insights__author-name {
	color: var( --seamlessmd-li-navy );
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.seamlessmd-latest-insights__meta {
	color: var( --seamlessmd-li-muted );
	font-size: 0.74rem;
	line-height: 1.3;
}

/* Each half stays intact; a narrow card breaks between the date and the read
 * time rather than orphaning "read" onto its own line. */
.seamlessmd-latest-insights__date,
.seamlessmd-latest-insights__read-time {
	display: inline-block;
	white-space: nowrap;
}

/* The separator is typography, not content: it is drawn only when a read time
 * follows a date, and never lands in the accessibility tree or in copied text
 * as a stray character of its own. */
.seamlessmd-latest-insights__date + .seamlessmd-latest-insights__read-time::before {
	content: "•";
	margin-inline: 0.4em;
	color: #aab3c6;
}

/* ---------- category tones ---------- */

.seamlessmd-latest-insights__category--tone-blue {
	--seamlessmd-li-tone-fg: #2563eb;
	--seamlessmd-li-tone-bg: #e7effd;
}

.seamlessmd-latest-insights__category--tone-cyan {
	--seamlessmd-li-tone-fg: #0a9bc4;
	--seamlessmd-li-tone-bg: #e0f3fb;
}

.seamlessmd-latest-insights__category--tone-teal {
	/* Teal retired site-wide (2026-09-03): the key stays for stored content
	 * and the hash tables; it now renders the block's blue pair. */
	--seamlessmd-li-tone-fg: #2563eb;
	--seamlessmd-li-tone-bg: #e7effd;
}

.seamlessmd-latest-insights__category--tone-green {
	--seamlessmd-li-tone-fg: #16a34a;
	--seamlessmd-li-tone-bg: #e4f5ea;
}

.seamlessmd-latest-insights__category--tone-orange {
	--seamlessmd-li-tone-fg: #ea6c17;
	--seamlessmd-li-tone-bg: #fdeddf;
}

.seamlessmd-latest-insights__category--tone-purple {
	--seamlessmd-li-tone-fg: #7c3aed;
	--seamlessmd-li-tone-bg: #f0e9fd;
}

.seamlessmd-latest-insights__category--tone-pink {
	--seamlessmd-li-tone-fg: #db2777;
	--seamlessmd-li-tone-bg: #fdeaf3;
}

/* ---------- responsive ---------- */

/* Narrow desktop, iPad Pro and tablet — two columns. Above 1199 the
 * four-item set fits as a clean single row, but at these widths four narrow
 * tracks would give each title too many wrapped lines; two-across keeps the
 * cards readable without giving up the balanced grid. */
@media ( max-width: 1199px ) {
	.seamlessmd-latest-insights__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* Small tablet / large phone — one column, card stays horizontal. */
@media ( max-width: 767px ) {
	.seamlessmd-latest-insights__grid {
		grid-template-columns: minmax( 0, 1fr );
		/* One card per row, so there is no neighbour to match: each card sizes
		 * to its own content instead of every card inheriting the tallest. */
		grid-auto-rows: auto;
	}
}

/* Narrow mobile — the image stacks above the content. The aspect ratio keeps
 * the photo readable now that it no longer takes its height from a sibling
 * column. */
@media ( max-width: 575px ) {
	.seamlessmd-latest-insights {
		--seamlessmd-li-pad: 0rem;
	}

	.seamlessmd-latest-insights__card {
		grid-template-columns: minmax( 0, 1fr );
		min-block-size: 0;
	}

	.seamlessmd-latest-insights__media {
		aspect-ratio: 16 / 9;
	}
}

/* ---------- expanded "All Articles & Insights" (?view=articles) ----------
 *
 * The expanded listing is the SAME card at full width, one per row, so it
 * inherits the whole compact design — image treatment, category pill,
 * typography, RTL mirroring — instead of introducing a second card. Only the
 * track count changes, plus pagination below.
 */

.seamlessmd-latest-insights--expanded .seamlessmd-latest-insights__grid {
	grid-template-columns: minmax( 0, 1fr );
	/* One card per row: each sizes to its own content, exactly as the compact
	 * grid does in its single-column branch. */
	grid-auto-rows: auto;
}

/* The row is wider than a third of the container, so hold the image to a share
 * of it rather than letting a 0.8fr track stretch a thumbnail across half the
 * page. */
@media ( min-width: 768px ) {
	.seamlessmd-latest-insights--expanded .seamlessmd-latest-insights__card {
		grid-template-columns: minmax( 0, 0.28fr ) minmax( 0, 1fr );
	}
}

/* ---------- pagination ---------- */

.seamlessmd-latest-insights__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-block-start: clamp( 1.5rem, 3vw, 2.25rem );
	padding-inline: var( --seamlessmd-li-pad );
}

.seamlessmd-latest-insights__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.5rem;
	min-block-size: 2.5rem;
	padding-inline: 0.75rem;
	border: 1px solid var( --seamlessmd-li-card-border );
	border-radius: 0.5rem;
	background: var( --seamlessmd-li-card-bg );
	color: var( --seamlessmd-text );
	font-size: 0.9375rem;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.seamlessmd-latest-insights__pagination a.page-numbers:hover,
.seamlessmd-latest-insights__pagination a.page-numbers:focus-visible {
	border-color: currentcolor;
}

.seamlessmd-latest-insights__pagination a.page-numbers:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

/* Current page is not a link — mark it, do not resize it, so the row does not
 * shift as you page through. */
.seamlessmd-latest-insights__pagination .page-numbers.current {
	border-color: currentcolor;
	font-weight: 600;
}

.seamlessmd-latest-insights__pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

@media ( prefers-reduced-motion: reduce ) {
	.seamlessmd-latest-insights__pagination .page-numbers {
		transition: none;
	}
}