/* ── Insights 2026 ──────────────────────────────────────────────────────────
 *
 * Editorial 1+2 post grid. Feature card on the left (flex column, image grows
 * to fill column height, body anchored at the bottom). Two horizontal row cards
 * stacked on the right (200px thumbnail + text body). Category chips use pastel
 * backgrounds for a11y-safe contrast.
 *
 * Selectors: .vig-insights-2026__* (BEM, section-scoped).
 *
 * Padding override note: the base .vig-acf-section { padding: 88px 24px } rule
 * in acf-sections.css WILL win if .vig-insights-2026 does not declare padding
 * explicitly at both breakpoints. The rules below are intentional overrides —
 * do not remove them.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Section root ────────────────────────────────────────────────────────── */

/* IMPORTANT: explicit padding defeats base .vig-acf-section { padding: 88px 24px }.
 * Without this, the section is ~16px taller than the mockup on desktop. */
.vig-insights-2026 {
	background: var(--color-bg-light);
	padding: 80px 32px;
}

/* ── Inner wrapper ────────────────────────────────────────────────────────── */

.vig-insights-2026__inner {
	max-width: 1320px;
	margin: 0 auto;
}

/* ── Head ─────────────────────────────────────────────────────────────────── */

.vig-insights-2026__head {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
	align-items: end;
	margin-bottom: 56px;
}

.vig-insights-2026__head-copy {
	max-width: 760px;
}

.vig-insights-2026__eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary-800);
	margin: 0 0 16px;
}

.vig-insights-2026__heading {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-primary-900);
	margin: 0;
}

.vig-insights-2026__lede {
	margin: 20px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-secondary);
	max-width: 640px;
}

.vig-insights-2026__head-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-end;
}

/* ── Buttons ──────────────────────────────────────────────────────────────────
 * Local BEM classes — matches the pattern in project-enquiry-2026.css.
 * Not relying on body.home .vig-btn--primary from homepage.css so the layout
 * works on any page that includes it. */

.vig-insights-2026__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 999px;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 120ms ease;
}

.vig-insights-2026__btn:focus-visible {
	outline: 2px solid var(--color-secondary-500);
	outline-offset: 3px;
}

/* Primary — orange filled pill.
 *
 * Uses --color-secondary-700 (#A85107), not -500 (#F48113), for the
 * resting state. White on -500 only hits 2.20:1 which fails WCAG AA
 * for 14px body text (needs 4.5:1). White on -700 is 5.93:1 — passes
 * AA with headroom while remaining recognisably brand-orange.
 *
 * On hover we drop further to -primary-900 for a clear state change. */
.vig-insights-2026__btn--primary {
	background: var(--color-secondary-700);
	color: #fff;
}

.vig-insights-2026__btn--primary:hover {
	background: var(--color-primary-900);
	color: #fff;
}

.vig-insights-2026__btn--primary:active {
	transform: translateY(1px);
}

/* Outline dark — transparent fill, dark border + text on light bg. */
.vig-insights-2026__btn--outline-dark {
	background: transparent;
	color: var(--color-primary-900);
	border-color: var(--color-primary-900);
}

.vig-insights-2026__btn--outline-dark:hover {
	background: var(--color-primary-900);
	color: #fff;
}

.vig-insights-2026__btn--outline-dark:active {
	transform: translateY(1px);
}

/* ── Post grid ────────────────────────────────────────────────────────────── */

.vig-insights-2026__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 24px;
	align-items: stretch;
}

/* Right-column stack fills equal rows to drive feature card height. */
.vig-insights-2026__col {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 24px;
	height: 100%;
}

/* ── Card base ────────────────────────────────────────────────────────────── */

.vig-insights-2026__post {
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border-light);
	text-decoration: none;
	color: inherit;
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.vig-insights-2026__post:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(8, 71, 27, 0.1);
}

/* Keyboard focus ring — linked cards must show focus for a11y. The card root
 * is an <a> when the post has a permalink, so :focus-visible lands here. */
.vig-insights-2026__post:focus-visible {
	outline: 2px solid var(--color-secondary-500);
	outline-offset: 3px;
}

/* ── Feature card (left column) ──────────────────────────────────────────── */

/* The feature card is a flex column. The image wrapper grows to fill all
 * available column height (driven by the row-card stack on the right).
 * Body is pinned at the bottom at content height. */
.vig-insights-2026__post--feature {
	height: 100%;
}

.vig-insights-2026__post--feature .vig-insights-2026__post-img-wrap {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	position: relative;
}

.vig-insights-2026__post--feature .vig-insights-2026__post-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vig-insights-2026__post--feature .vig-insights-2026__post-body {
	flex: 0 0 auto;
}

/* ── Row cards (right column) ────────────────────────────────────────────── */

/* Horizontal layout: thumbnail on the left, body on the right. */
.vig-insights-2026__post--row {
	display: grid;
	grid-template-columns: 200px 1fr;
	height: 100%;
}

.vig-insights-2026__post--row .vig-insights-2026__post-img-wrap {
	overflow: hidden;
}

.vig-insights-2026__post--row .vig-insights-2026__post-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Card image wrapper ──────────────────────────────────────────────────── */

.vig-insights-2026__post-img-wrap {
	position: relative;
}

/* Feature card only — subtle gradient overlay for visual polish. Row card
 * thumbnails are too small for the overlay to read as anything but noise,
 * so the ::after is scoped to .vig-insights-2026__post--feature here. */
.vig-insights-2026__post--feature .vig-insights-2026__post-img-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.35) 100%);
	pointer-events: none;
}

/* ── Card body ────────────────────────────────────────────────────────────── */

.vig-insights-2026__post-body {
	padding: 24px 26px 26px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

/* Row card body: slightly denser. */
.vig-insights-2026__post--row .vig-insights-2026__post-body {
	padding: 18px 22px 20px;
}

/* ── Chip ─────────────────────────────────────────────────────────────────── */

.vig-insights-2026__chip {
	display: inline-block;
	align-self: flex-start;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
}

/* Pastel fills — all text/bg combinations pass WCAG AA (4.5:1) for small text.
 * Ratio notes:
 *   case:    #A85107 (#a85107) on #fde2c4 = 5.21:1  AA pass
 *   article: #0d4a72 on #d6e8f5 = 6.52:1  AA pass
 *   guide:   #063715 on #c8e3d2 = 8.14:1  AA pass
 *   news:    #0d4a72 on #dceeff = 6.18:1  AA pass  */
.vig-insights-2026__chip--case {
	background: #fde2c4;
	color: var(--color-secondary-700);
}

.vig-insights-2026__chip--article {
	background: #d6e8f5;
	color: #0d4a72;
}

.vig-insights-2026__chip--guide {
	background: #c8e3d2;
	color: var(--color-primary-900);
}

/* News reuses the article blue palette — distinct from guide (green) and case
 * (peach) while still occupying a recognisable semantic colour family. */
.vig-insights-2026__chip--news {
	background: #dceeff;
	color: #0d4a72;
}

/* ── Post title ───────────────────────────────────────────────────────────── */

.vig-insights-2026__post-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-primary-900);
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 6px 0 0;
}

.vig-insights-2026__post--feature .vig-insights-2026__post-title {
	font-size: 28px;
	line-height: 1.1;
}

.vig-insights-2026__post--row .vig-insights-2026__post-title {
	font-size: 17px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Post meta ────────────────────────────────────────────────────────────── */

.vig-insights-2026__post-meta {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--color-text-light);
	margin: 4px 0 0;
}

.vig-insights-2026__post--row .vig-insights-2026__post-meta {
	font-size: 11px;
}

/* ── Post lede ────────────────────────────────────────────────────────────── */

.vig-insights-2026__post-lede {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.55;
	color: var(--color-text-secondary);
}

.vig-insights-2026__post--row .vig-insights-2026__post-lede {
	font-size: 13px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Post read link ───────────────────────────────────────────────────────── */

.vig-insights-2026__post-link {
	margin-top: auto;
	padding-top: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary-800);
}

.vig-insights-2026__post-link-arr {
	color: var(--color-secondary-700);
}

/* ── Breakpoints ──────────────────────────────────────────────────────────── */

/* 880px — head collapses to single column (actions below copy). */
@media (max-width: 880px) {
	.vig-insights-2026__head {
		grid-template-columns: 1fr;
		gap: 24px;
		align-items: start;
		margin-bottom: 40px;
	}

	.vig-insights-2026__head-actions {
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* 900px — grid collapses to single column; feature image gets defined
 * aspect-ratio so it doesn't flatten without a height driver.
 *
 * IMPORTANT: explicit padding: 56px 20px here defeats the base
 * .vig-acf-section { padding: 64px 20px } from acf-sections.css's
 * 768px breakpoint. Without this rule the section padding is 64px, not 56px. */
@media (max-width: 900px) {
	.vig-insights-2026 {
		padding: 56px 20px;
	}

	.vig-insights-2026__grid {
		grid-template-columns: 1fr;
	}

	/* Restore defined aspect-ratio so feature image renders at natural size. */
	.vig-insights-2026__post--feature .vig-insights-2026__post-img-wrap {
		flex: 0 0 auto;
		aspect-ratio: 16 / 9;
	}

	.vig-insights-2026__post--feature .vig-insights-2026__post-img {
		height: 100%;
	}

	/* Col loses its height-driven grid rows at single-column. */
	.vig-insights-2026__col {
		grid-template-rows: auto auto;
		height: auto;
	}

	.vig-insights-2026__post--feature {
		height: auto;
	}
}

/* 600px — row cards collapse from 200px/1fr to single-column stacked. */
@media (max-width: 600px) {
	.vig-insights-2026__post--row {
		grid-template-columns: 1fr;
	}

	.vig-insights-2026__post--row .vig-insights-2026__post-img-wrap {
		aspect-ratio: 16 / 9;
	}

	.vig-insights-2026__post--row .vig-insights-2026__post-img {
		height: 100%;
	}
}