/* ==========================================================================
   Listing template — Insights, Blog, Resources and the three category pages
   An index without pictures, read like a legal register: a compact masthead
   with the filter bar in its foot, the newest piece as a cover headline
   framed by its category petal, then every other piece as a bare ruled row
   that floods with its category's tint when pointed at.

   Colour: <main> carries .t-insights (blue) and, on a category page, its
   category class, which folio.css maps onto --acc. Each cover and row
   carries its OWN category class for --cat / --cat-tint / --cat-text.
   Saturated --cat is only ever a shape; text on tints stays ink / --body.
   ========================================================================== */

/* Masthead ---------------------------------------------------------------- */
/* One petal only, in the page's colour, hung from behind the glass header
   further in than on a service page: with the cover's petal bleeding off
   the right edge below it, the two make a diagonal instead of a column.
   Keep-out: it ends above the H1's cap line and right of the standfirst. */
@media (min-width: 1025px) {
	main.t-insights .mast--listing .mast__petal--a {
		width: min(24vw, 460px);
		right: 22vw;
		top: calc(min(24vw, 460px) * -0.46);
	}
}
main.t-insights .mast--listing .mast__stand { text-wrap: balance; }
/* the filter bar closes the masthead; the cover's own top space follows */
main.t-insights .mast--listing { padding-bottom: clamp(1.5rem, 2.5vw, 3rem); }

/* the filter bar sits in the masthead's foot, where service pages have
   'On this page' */
.lfilter {
	margin-top: clamp(2.5rem, 4.2vw, 5rem);
	padding-top: clamp(1rem, 1.25vw, 1.5rem);
	border-top: var(--rule);
}
.lfilter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* .awards__tab pills: white at rest (they can cross a petal), the homepage
   hover, and its AA pressed state for the page you are on */
.lpill {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.62em 1.15em 0.62em 1em;
	border-radius: 999px;
	background: var(--white);
	box-shadow: inset 0 0 0 1px var(--line);
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--small);
	line-height: 1.2;
	color: var(--ink);
	white-space: nowrap;
}
.lpill__n {
	font-size: var(--tiny);
	font-variant-numeric: tabular-nums;
	color: var(--body);
}
.lpill__lz { width: 10px; }
.lpill__seal { width: 18px; height: 18px; flex: none; }
main .lpill[aria-current="page"] {
	background: var(--green);
	box-shadow: inset 0 0 0 2px var(--green-text);
	font-weight: 600;
}
main .lpill[aria-current="page"] .lpill__n { color: var(--ink); }
/* on the green fill the pill's own mark would vanish (the Blog lozenge and
   the seal's green petal are the fill's colour): a white keyline keeps it.
   The seal is 18px on a 40-unit box, so 4.5 units of stroke, painted under
   the fill, leave about 1px of white round each petal. */
main .lpill[aria-current="page"] .lpill__lz { box-shadow: 0 0 0 2px var(--white); }
main .lpill[aria-current="page"] .lpill__seal rect {
	stroke: var(--white);
	stroke-width: 4.5;
	paint-order: stroke;
}

/* category chip (.post-card__cat, recoloured by category) */
.lchip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: max-content;
	padding: 0.28em 0.8em 0.28em 0.7em;
	border-radius: 999px;
	background: var(--cat-tint);
	color: var(--cat-text);
	font-size: var(--tiny);
	line-height: 1.3;
	transition: background-color 0.3s ease;
}
.lchip .lz { width: 8px; }

/* 'N min read' */
.lread {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--tiny);
	color: var(--body);
}
.lread svg { width: 1em; height: 1em; flex: none; }

/* Cover story --------------------------------------------------------------
   Not a card: a 12-column spread on white. Date and chip in cols 1-2, the
   headline in 3-9, and the category petal bleeding off the right edge in
   10-12 — with the SME News mark on it when the cover is the SME post. */
.cover {
	position: relative;
	overflow-x: clip;           /* the petal bleeds off the viewport edge */
	padding-block: clamp(3rem, 5vw, 6rem) clamp(3.5rem, 6.25vw, 7.5rem);
}
.cover__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto auto 1fr;
	column-gap: var(--card-gap);
	align-items: start;
}
.cover__meta {
	grid-column: 1 / 3;
	grid-row: 1 / span 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	margin: 0;
	padding-top: 0.55em;       /* sit on the headline's first cap line */
}
.cover__date { color: var(--ink); }
.cover__h {
	grid-column: 3 / 10;
	grid-row: 1;
	margin: 0;
	font-size: var(--mast-post);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-wrap: balance;
	overflow-wrap: anywhere;
	hyphens: manual;
}
.cover__h a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 0.05em;
	text-underline-offset: 0.12em;
	transition: text-decoration-color 0.35s ease;
}
.cover__h a:hover,
.cover__h a:focus-visible { text-decoration-color: var(--ink); }
.cover__stop {
	display: inline-block;
	width: 0.2em;
	height: 0.2em;
	margin-left: 0.08em;
	vertical-align: 0.02em;
	border-radius: 22%;
	background: var(--cat);
	rotate: 45deg;
}
.cover__ex {
	grid-column: 3 / 9;
	grid-row: 2;
	margin: 1.75rem 0 0;
	font-size: var(--standfirst);
	line-height: 1.5;
	color: var(--body);
}
.cover__cta { grid-column: 3 / 9; grid-row: 3; margin: 2.25rem 0 0; }

.cover__art {
	grid-column: 10 / -1;
	grid-row: 1 / span 3;
	position: relative;
	align-self: stretch;
	min-height: min(22vw, 420px);
}
.cover__petal {
	position: absolute;
	top: -6%;
	left: 26%;
	z-index: 0;
	width: min(26vw, 500px);
	aspect-ratio: 1;
	border-radius: 30%;
	background: var(--cat);
	rotate: -10deg;
	transition: opacity 0.9s var(--ease-out), scale 0.9s var(--ease-out);
	animation: petal-drift 22s ease-in-out 0.9s infinite alternate;
	--dx: 14px; --dy: -18px;
}
/* the SME News award, in a white tile sitting on the petal at cols 10-11 */
.cover__tile {
	position: relative;
	z-index: 1;
	width: min(240px, 100%);
	margin-top: calc(min(26vw, 500px) * 0.34);
	padding: clamp(1rem, 1.7vw, 2rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
	box-shadow: var(--shadow-card);
	transition: opacity 0.7s var(--ease-out) 0.25s, translate 0.7s var(--ease-out) 0.25s;
}
.cover__tile img { display: block; width: 100%; height: auto; }

.js-reveal .cover[data-reveal]:not(.is-revealed) .cover__petal { opacity: 0; scale: 0.92; }
.js-reveal .cover[data-reveal]:not(.is-revealed) .cover__tile { opacity: 0; translate: 0 16px; }

/* Register ------------------------------------------------------------------
   Rows extend a row-padding beyond the grid on both sides, so their content
   sits exactly on the page columns and the tint flood bleeds past them. The
   hairline is inset by the same amount, so the rounded fill never cuts it. */
.reg {
	--rp: clamp(1rem, 1.7vw, 2rem);
	--rv: clamp(1.5rem, 2.1vw, 2.5rem);
	padding-bottom: var(--section-y);
}
.reg + .reg { margin-top: calc(var(--section-y) * -0.5); }
.reg__year {
	position: relative;
	margin: 0 0 clamp(0.75rem, 1.2vw, 1.5rem);
	padding-top: 1.1rem;
	color: var(--ink);
}
.reg__year::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	border-top: var(--rule-strong);
	transform-origin: left;
	transition: transform 0.8s var(--ease-out);
}
.reg__list { margin-inline: calc(var(--rp) * -1); }

.reg__item {
	position: relative;
	transition: opacity 0.55s var(--ease-out), translate 0.55s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 60ms);
}
/* the hairline: above the row's fill, inset so the radius never cuts it */
.reg__item::before,
.reg__item:last-child::after {
	content: '';
	position: absolute;
	left: var(--rp);
	right: var(--rp);
	z-index: 1;
	pointer-events: none;
}
.reg__item::before { top: 0; border-top: var(--rule); }
.reg__item:last-child::after { bottom: 0; border-bottom: var(--rule); }

.reg__row {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: start;
	padding: var(--rv) var(--rp);
	border-radius: var(--r-lg);
	color: var(--ink);
}
/* the category tint floods in from the left */
.reg__row::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--cat-tint);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s var(--ease-out);
}
.reg__date { grid-column: 1 / 3; display: flex; flex-direction: column; gap: 0.45rem; }
.reg__day {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--h2-sm);
	line-height: 0.9;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.reg__my { font-size: var(--tiny); color: var(--body); }
.reg__row > .lchip { grid-column: 3 / 5; margin-top: 0.3rem; }
.reg__main { grid-column: 5 / 11; display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.reg__t {
	margin: 0;
	font-size: var(--h3);
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--ink);
	text-wrap: balance;
}
.reg__ex { max-width: 40em; font-size: var(--small); line-height: 1.6; color: var(--body); }
.reg__main .lread { margin-top: 0.2rem; }
.reg__arrow {
	grid-column: 11 / -1;
	justify-self: center;
	align-self: center;
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: clamp(44px, 2.9vw, 56px);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid var(--green);
	background: var(--white);
	transition: background-color 0.25s ease, box-shadow 0.25s ease, translate 0.35s var(--ease-out);
}
.reg__arrow svg { width: 42%; height: auto; }
/* a saturated petal waits just below the row, behind the arrow's column —
   out of sight, so the row is bare at rest */
.reg__petal {
	position: absolute;
	right: 6%;
	bottom: -18%;
	z-index: -1;
	width: 160px;
	aspect-ratio: 1;
	border-radius: 30%;
	background: var(--cat);
	rotate: -10deg;
	translate: 0 115%;
	transition: translate 0.5s var(--ease-out);
}
.reg__row:hover::after,
.reg__row:focus-visible::after { transform: none; }
.reg__row:hover .reg__petal,
.reg__row:focus-visible .reg__petal { translate: 0 0; }
.reg__row:hover .reg__arrow,
.reg__row:focus-visible .reg__arrow {
	background: var(--green);
	box-shadow: 0 0 0 3px var(--white);
	translate: 6px 0;
}
.reg__row:hover .lchip,
.reg__row:focus-visible .lchip { background: var(--white); }
.reg__row:focus-visible { outline-offset: 2px; border-radius: var(--r-lg); }

.js-reveal .reg[data-reveal]:not(.is-revealed) .reg__year::before { transform: scaleX(0); }
.js-reveal .reg[data-reveal]:not(.is-revealed) .reg__item { opacity: 0; translate: 0 16px; }

/* Empty state ------------------------------------------------------------ */
.lempty { padding-block: clamp(3rem, 5vw, 6rem) var(--section-y); }
.lempty__inner { position: relative; padding-top: clamp(1.5rem, 2.5vw, 3rem); }
.lempty__inner::before {
	content: '';
	position: absolute;
	inset: 0 var(--gutter) auto;
	border-top: var(--rule-strong);
	transform-origin: left;
	transition: transform 0.8s var(--ease-out);
}
.js-reveal .lempty[data-reveal]:not(.is-revealed) .lempty__inner::before { transform: scaleX(0); }
.lempty__inner > * { margin: 0; }
.lempty__line {
	max-width: 24em;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--statement-sm);
	line-height: 1.22;
	letter-spacing: -0.015em;
	color: var(--body);
}
.lempty__all { margin-top: 1.75rem !important; }

/* Responsive ---------------------------------------------------------------- */
/* In the narrow band of the full 12-column row the petal (a fixed 160px,
   'right: 6%') reaches into col 10 when it rises, so the text stops at col 9:
   no excerpt glyph ever lies on the saturated shape. */
@media (min-width: 1280px) and (max-width: 1439px) {
	.reg__main { grid-column: 5 / 10; }
}

@media (max-width: 1279px) {
	/* the date keeps its own height in row 1; the 1fr row 2 takes the main
	   column's extra height, so the chip always sits 0.8rem under the date */
	.reg__row { grid-template-columns: 2fr 7fr 1fr; grid-template-rows: auto 1fr; row-gap: 0.8rem; }
	.reg__date { grid-column: 1; grid-row: 1; }
	.reg__row > .lchip { grid-column: 1; grid-row: 2; margin-top: 0; }
	.reg__main { grid-column: 2; grid-row: 1 / span 2; }
	.reg__arrow { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
	.reg__petal { right: calc(var(--rp) - 52px); }
}

@media (max-width: 1024px) {
	.cover__h { grid-column: 3 / 11; }
	.cover__ex, .cover__cta { grid-column: 3 / 10; }
	/* tall enough to hold its petal, so the petal never runs into the
	   register's year rule below */
	.cover__art { grid-column: 10 / -1; grid-row: 2 / span 2; min-height: 32vw; }
	.cover__petal { left: 18%; top: 0; width: 30vw; }
	.cover__tile { margin-top: 9vw; }
}

@media (max-width: 860px) {
	/* the filter bar scrolls in its own container, fading at the right; the
	   rule stays on the grid, only the scrolling row runs to the edges */
	.lfilter__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(var(--gutter) * -1);
		/* the rail clips on both axes: 0.5rem above and below holds the 6px
		   focus ring (3px + 3px offset); the negative top margin keeps the
		   pills where they were under the rule */
		margin-top: -0.25rem;
		padding: 0.5rem var(--gutter) 0.5rem;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
	}
	.lfilter__list::-webkit-scrollbar { display: none; }
	.lfilter__list > li { flex: none; }
	.lfilter__list > li:last-child { padding-right: 2rem; }

	/* cover: stacked. The petal stands at the top right beside the date
	   line, bleeding off the edge; the date line wraps short of it and sits
	   at the foot of the petal's height, so the headline starts clear of it
	   and no text ever lies on the saturated shape. */
	.cover { --cp: clamp(170px, 34vw, 220px); padding-top: 3rem; }
	.cover__grid { display: block; }
	.cover__meta {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		align-content: flex-end;
		gap: 0.5rem 0.9rem;
		min-height: calc(var(--cp) * 1.08 - 2.5rem);
		padding: 0 30vw 1.25rem 0;
	}
	.cover__h { font-size: clamp(2rem, 6.4vw, 2.75rem); line-height: 1.06; }
	.cover__ex { margin-top: 1.25rem; font-size: var(--standfirst); }
	.cover__cta { margin-top: 1.75rem; }
	.cover__art { position: static; min-height: 0; }
	.cover__petal { top: 0.5rem; left: auto; right: -10vw; width: var(--cp); }
	.cover__art--tile { margin-top: 2rem; }
	.cover__tile { width: 200px; margin-top: 0; }

	/* register: a stacked row, the whole of it still the link */
	.reg__row {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: none;
		align-items: center;
		gap: 0.75rem 0.9rem;
		padding-block: 1.25rem;
	}
	.reg__date { grid-column: 1; grid-row: 1; display: block; font-size: var(--tiny); color: var(--body); }
	.reg__day { font: inherit; letter-spacing: 0; color: inherit; }
	.reg__row > .lchip { grid-column: 2; grid-row: 1; justify-self: start; }
	.reg__main { grid-column: 1 / -1; grid-row: 2; gap: 0.5rem; }
	.reg__t { font-size: 1.375rem; }
	.reg__ex { font-size: 0.9375rem; }
	.reg__arrow,
	.reg__petal { display: none; }
}

@media (max-width: 640px) {
	.cover__h { font-size: 2rem; }
}