/* ── ARTICLE LIST ────────────────────────────────────────────────────────────
   Mirrors live's resource archive: a grey bar holding the heading + search on the
   left and the filter chips on the right; a white band with the featured article;
   then the article rows (title | category pill | thumbnail). */

/* Grey band sits behind the search + filter bar only; the featured article and
   the listing below are on the section background (white). Matches live. */
.block-article-list .article-list__bar-band {
	background: var(--color-light-grey, #f1f1f3);
}
/* The band breaks the section > .container relationship, so re-apply the block's
   horizontal gutter to the bar's container. */
.block-article-list .article-list__bar-band > .container {
	padding-left: var(--container-px);
	padding-right: var(--container-px);
}
.block-article-list .article-list__bar {
	display: grid;
	gap: 24px;
	padding: 24px 0;
}
@media (min-width: 992px) {
	.block-article-list .article-list__bar {
		grid-template-columns: 7fr 9fr;
		align-items: end;
	}
}

.block-article-list .article-list__heading {
	margin: 0 0 8px;
	font-size: 28px;
	line-height: 35px;
	font-weight: 700 !important;
}

.block-article-list .article-list__search {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: center;
	height: 80px;
}
/* Inline magnifier icon (live's #search symbol), sits inside the field on the left. */
.block-article-list .article-list__search-icon {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	width: 22px;
	height: 22px;
	color: #282829;
	pointer-events: none;
}
.block-article-list .article-list__search-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.block-article-list .article-list__search input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0 20px 0 54px;
	/* Border only shows on focus/active. */
	border: 1px solid transparent;
	border-radius: 0;
	font-size: 16px;
	background: #fff;
}
.block-article-list .article-list__search input:focus,
.block-article-list .article-list__search input:focus-visible,
.block-article-list .article-list__search input:active {
	border-color: #282829;
	outline: none;
}
/* Live shows an icon-only search field (submit on Enter) — hide the button so
   the input fills its column, matching live. The field still filters live via JS. */
.block-article-list .article-list__search [data-article-search-btn] {
	display: none;
}

.block-article-list .article-list__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* live: chips sit LEFT-aligned in their column (article-filter__list) */
.block-article-list .article-list__chip {
	padding: 8px 12px;
	border: 2px solid #282829;
	border-radius: 100px;
	background: transparent;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
	color: #282829;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.block-article-list .article-list__chip:hover,
.block-article-list .article-list__chip.is-active {
	background: #282829;
	color: #fff;
}

/* Featured article — image left, title + excerpt right */
/* Featured article — now inside the normal container (no full-width band). */
.block-article-list .article-list__featured {
	display: grid;
	gap: 24px;
	align-items: center;
	margin: 40px 0;
}
@media (min-width: 768px) {
	.block-article-list .article-list__featured { grid-template-columns: 10fr 6fr; gap: 40px; }
}
.block-article-list .article-list__featured-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.block-article-list .article-list__featured-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.block-article-list .article-list__featured-title { margin: 0 0 16px; }
.block-article-list .article-list__featured-copy  { margin: 0; }
.block-article-list .article-list__featured-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

/* Title link + arrow icon.
   `.c-link__icon` is a shared component that article-list never sized, so the
   inline SVG arrow had no width/height and ballooned to fill the link. Constrain
   it to a small inline arrow that follows the title text. */
.block-article-list .article-list__featured-title .c-link {
	display: inline;
	color: inherit;
	text-decoration: none;
}
.block-article-list .c-link__icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	vertical-align: middle;
}
.block-article-list .article-list__featured-title .c-link__icon {
	margin-left: 12px;
}
.block-article-list .article-list__featured-title .c-link__icon svg {
	width: 28px;
	height: 28px;
}

/* Article rows */
.block-article-list .article-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.block-article-list .article-list__item {
	border-bottom: 1px solid #e2dedd;
}
.block-article-list .article-list__item:first-child {
	border-top: none;
}
.block-article-list .article-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	align-items: center;
	padding: 24px 0 32px;
}
@media (min-width: 768px) {
	.block-article-list .article-card {
		/* live: 208px tag | title | 230px thumbnail, ~34px gap, top-aligned */
		grid-template-columns: 208px 1fr 230px;
		gap: 34px;
		align-items: start;
	}
	/* Live order: category pill (left) | title + arrow | thumbnail (right).
	   The pill is last in the DOM, so pull it to the first column. Fixed-width
	   first column so every title starts at the same x, matching live. */
	.block-article-list .article-card__tag { order: -1; }
}
.block-article-list .article-card__title {
	margin: 0;
	/* live: 32/40 medium — !important to beat the theme's .font-heading5
	   (James, 2026-07-29: 500, not 600) */
	font-size: 32px !important;
	line-height: 40px !important;
	font-weight: 500 !important;
}
.block-article-list .article-card__title a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	color: inherit;
	text-decoration: none;
}
.block-article-list .article-card__title .c-link__icon svg {
	width: 22px;
	height: 22px;
	transition: transform .3s cubic-bezier(.4, 0, 0, 1);
}
.block-article-list .article-card__title a:hover .c-link__icon svg,
.block-article-list .article-card__title a:focus .c-link__icon svg {
	transform: translateX(6px);
}
.block-article-list .article-card__image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}
.block-article-list .c-pill {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 100px;
	background: var(--color-grey, #e2dedd);
	font-size: 18px;
	line-height: 22px;
	font-weight: 300;
	text-align: center;
	white-space: normal;
}
/* row pills fill the tag column and stack (live: div.c-pill.u-text-center) */
@media (min-width: 768px) {
	.block-article-list .article-card__tag .c-pill {
		display: block;
		width: 100%;
	}
}
.block-article-list .article-list__empty {
	padding: 32px 0;
	font-weight: 700;
}

/* chips are now LINKS (server-side filters, like live's ?service=om) */
.block-article-list .article-list__chip {
	display: inline-block;
	text-decoration: none;
}

/* multiple pills per row (an article can carry several service/technology terms) */
.block-article-list .article-card__tag {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
@media (min-width: 768px) {
	.block-article-list .article-card__tag { flex-direction: column; }
}

/* pagination — live's .c-pagination: centered 48px circles, current filled dark,
   next-page = chevron-right (symbols.svg#chevron-right) in a white circle */
.block-article-list .article-list__pagination {
	margin: 32px 0 30px;
}
.block-article-list .article-list__pagination ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.block-article-list .article-list__page {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 2px solid transparent;
	border-radius: 100px;
	/* NO fill on inactive pages / the next-arrow (James, 2026-07-29: live's circles
	   are white-on-white = invisible; on our grey band a white pill showed).
	   Only the current page (and hover) gets the dark fill. */
	background: transparent;
	font-size: 18px;
	font-weight: 600;
	color: #282829;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.block-article-list a.article-list__page:hover,
.block-article-list a.article-list__page:focus-visible {
	background: #282829;
	color: #fff;
}
.block-article-list .article-list__page.is-current {
	background: #282829;
	color: #fff;
}
.block-article-list .article-list__page--next svg {
	width: 11px;
	height: 17px;
	display: block;
}

/* Live parity: row cards turn grey on hover + desc line */
.block-article-list .article-card {
	transition: background 0.3s cubic-bezier(0.4, 0, 0, 1);
}
.block-article-list .article-card:hover,
.block-article-list .article-card:focus-within {
	background: #f1f1f3;
}
.block-article-list .article-card__desc {
	margin: 10px 0 0;
	max-width: 760px;
}

/* ── TITLE HOVER UNDERLINE — live 1:1 (James, 2026-07-29) ──────────────────────
   Live's .border-bot-sweep__elem trick: the span stays INLINE inside a
   .c-link__text wrapper (the wrapper — not the span — is the flex item, so the
   span still fragments per line box and the underline paints UNDER EACH LINE
   when a title wraps to 2+ rows). The gradient is full-height with only the
   bottom 2px painted (James: 2px, not 1px; live itself uses 0.08em ≈ 2.5), and
   the sweep grows from the left on hover: background-size 0→100% with live's
   springy easing (.5s cubic-bezier(.19,1,.22,1)).
   Also neutralise the global .border-bot-sweep underline that footer.css paints
   on the <a> itself — on these flex links it drew one long bar across the whole
   row (the "not behaving the same way as live" behaviour). */
/* The global rules this must beat/neutralise (both in style.css):
   - `a.c-link.border-bot-sweep .border-bot-sweep__elem` (0,3,1) — .35s ease, plain
     2px gradient; selectors below include `a.c-link` (0,4,1+) so they win.
   - `.c-link .c-link__text` — paints a SECOND sweep on the wrapper; killed here
     (the wrapper is the flex item, so its underline is one long non-per-line bar). */
.block-article-list .article-card__title a.c-link,
.block-article-list .article-list__featured-title a.c-link {
	background-image: none;
}
.block-article-list .article-card__title a.c-link .c-link__text,
.block-article-list .article-list__featured-title a.c-link .c-link__text {
	display: inline;
	min-width: 0;
	background: none;
}
.block-article-list .article-card__title a.c-link .border-bot-sweep__elem,
.block-article-list .article-list__featured-title a.c-link .border-bot-sweep__elem {
	display: inline;
	background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
	background-position: 100% center;
	background-repeat: no-repeat;
	background-size: 0px 100%;
	transition: background-size .5s cubic-bezier(.19, 1, .22, 1);
	padding-bottom: 0;
	/* per-line: each wrapped line paints the FULL gradient (its own bottom-2px
	   underline); the default `slice` would smear one gradient across the lines */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.block-article-list .article-card__title a.c-link:hover .border-bot-sweep__elem,
.block-article-list .article-card__title a.c-link:focus-visible .border-bot-sweep__elem,
.block-article-list .article-list__featured-title a.c-link:hover .border-bot-sweep__elem,
.block-article-list .article-list__featured-title a.c-link:focus-visible .border-bot-sweep__elem {
	background-position: 0 center;
	background-size: 100% 100%;
}