/*
 * XPR Press component styles. Every value references a theme.json token
 * (--wp--preset--* / --wp--custom--*); raw numbers only where Figma has no token
 * (box sizes), each annotated with its Figma node id.
 */

/*
 * Figma strokes are "inside": they don't take space. CSS borders do, so every bordered box
 * subtracts the border from its Figma padding (the style audit compares padding + border).
 */

/* Page gutter (root padding in theme.json reads this). Figma: 30px desktop, 16px mobile. */
:root { --xpr-gutter: var(--wp--custom--gutter--desktop); }
@media (max-width: 767px) {
	:root { --xpr-gutter: var(--wp--custom--gutter--mobile); }
}

/* Disclaimer banner: desktop 593:2843, mobile 593:3820 */
.xpr-disclaimer {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	column-gap: var(--wp--preset--spacing--12);
	padding: calc(var(--wp--preset--spacing--12) - var(--wp--custom--border--width)) calc(var(--wp--preset--spacing--16) - var(--wp--custom--border--width));
	background: var(--wp--preset--color--surface-muted);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
}
.xpr-disclaimer__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--info);
}
.xpr-disclaimer__icon-mobile { display: none; }
.xpr-disclaimer__text {
	flex: 1 1 0;
	margin: 0;
	color: var(--wp--preset--color--gray-700);
	font-size: var(--wp--preset--font-size--14);
	line-height: var(--wp--custom--line-height--14-150);
	text-align: center;
}

@media (max-width: 767px) {
	.xpr-disclaimer {
		align-items: flex-start;
		column-gap: var(--wp--preset--spacing--10);
		padding: calc(var(--wp--preset--spacing--12) - var(--wp--custom--border--width));
	}
	.xpr-disclaimer__icon { width: 20px; height: 20px; border-radius: 0; color: var(--wp--preset--color--primary-chip); }
	.xpr-disclaimer__icon-desktop { display: none; }
	.xpr-disclaimer__icon-mobile { display: block; }
	.xpr-disclaimer__text {
		color: var(--wp--preset--color--gray-600);
		font-size: var(--wp--preset--font-size--12);
		line-height: var(--wp--custom--line-height--12-140);
		text-align: left;
	}
}

/* Page frame ------------------------------------------------------------- */
.xpr-main {
	/* Space under the cobrand header: Figma desktop banner y=123 under a 101px nav (22px);
	   mobile main-scroll-content padding-top 16 (593:3819). WordPress zeroes the first block's
	   top margin in constrained layouts, so this lives on the container. */
	padding-top: 22px;
	padding-bottom: var(--wp--preset--spacing--80);
}
@media (max-width: 767px) {
	.xpr-main { padding-top: var(--wp--preset--spacing--16); padding-bottom: var(--wp--preset--spacing--32); }
}

/* Listing: desktop 593:2848, mobile 593:3819 ------------------------------ */
.xpr-listing { margin-top: var(--wp--preset--spacing--40); }

/* Header row: desktop 631:2859 (title + chips left, search right) */
.xpr-listing__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 44px;
}
/* Heading → chips: a flat 24px whatever the heading (UT1-T8). Figma pins the chip to a fixed x, so
   with a short topic name the gap grew; Chromium also sets "Press Releases" a few px narrower. */
.xpr-listing__title-row { display: grid; grid-template-columns: max-content auto; align-items: center; column-gap: var(--wp--preset--spacing--24); }
.xpr-section-title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--24);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--24-110);
}
.xpr-listing__chips { display: flex; align-items: center; column-gap: var(--wp--preset--spacing--16); }

/* Chips: filter 631:2864, crypto 631:2868 */
.xpr-chip {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	column-gap: var(--wp--preset--spacing--8);
	height: 32px;
	margin: 0;
	padding: calc(var(--wp--preset--spacing--8) - var(--wp--custom--border--width)) calc(var(--wp--preset--spacing--12) - var(--wp--custom--border--width));
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--primary-chip);
	font: 600 var(--wp--preset--font-size--13) / var(--wp--custom--line-height--13-auto) var(--wp--preset--font-family--inter);
	text-decoration: none;
	text-align: start;
	white-space: pre; /* Figma label is " Crypto" with a leading space */
	cursor: pointer;
}
.xpr-chip__label { display: block; }
/* "Filter by topics" is fixed copy: use Figma's box widths so the row lines up exactly
   (Chromium sets this label ~2px narrower than Figma). */
.xpr-chip[aria-controls] { width: 139px; }
.xpr-chip--muted { min-width: 71px; justify-content: center; }
.xpr-chip__chevron { flex: none; }
.xpr-chip[aria-expanded="true"] .xpr-chip__chevron { transform: rotate(180deg); }
.xpr-chip--muted {
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12);
	background: var(--wp--preset--color--surface-muted);
	border: 0;
}

/* Search: desktop 631:2870 (510×44), mobile 593:3825 (358×40) */
.xpr-search {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto 1fr; /* icon | input + fake placeholder (same cell) */
	align-items: center;
	column-gap: var(--wp--preset--spacing--10);
	width: 510px;
	height: 44px;
	margin: 0;
	padding: 0 calc(var(--wp--preset--spacing--12) - var(--wp--custom--border--width));
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--border-input);
	border-radius: var(--wp--custom--radius--lg);
	color: #808080; /* Figma 631:2872 icon stroke; not in the palette (outlier list) */
}
.xpr-search__icon { flex: none; }
.xpr-search__placeholder--desktop { display: block; overflow: hidden; }
.xpr-search__icon--mobile, .xpr-search__placeholder--mobile { display: none; }
.xpr-search__input, .xpr-search__placeholder { grid-column: 2; grid-row: 1; }
.xpr-search__input {
	min-width: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	color: var(--wp--preset--color--ink);
	font: 400 var(--wp--preset--font-size--13) / var(--wp--custom--line-height--13-auto) var(--wp--preset--font-family--inter);
	-webkit-appearance: none;
	appearance: none;
}
.xpr-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.xpr-search__placeholder {
	overflow: hidden;
	color: var(--wp--preset--color--placeholder);
	font-size: var(--wp--preset--font-size--13);
	line-height: var(--wp--custom--line-height--13-auto);
	white-space: nowrap;
	pointer-events: none;
}
/* Also while the browser previews a saved entry (UT1-T3): the input is still :placeholder-shown then. */
.xpr-search__input:not(:placeholder-shown) + .xpr-search__placeholder,
.xpr-search__input:autofill + .xpr-search__placeholder { visibility: hidden; }
.xpr-search__input:-webkit-autofill + .xpr-search__placeholder { visibility: hidden; }
.xpr-search:focus-within { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; }

/* Card grid: 4 × 316px, gap 27 / 16 (615:2125) */
.xpr-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 316px);
	column-gap: 27px; /* Figma value; off the spacing scale (outlier L6) */
	row-gap: var(--wp--preset--spacing--16);
	margin: var(--wp--preset--spacing--16) 0 0;
	padding: 0;
	list-style: none;
}

/* Card: 615:2127 (desktop), 593:3836 (mobile). Figma offsets the text block 2px right of the
   image (image x=16, text x=18); built as drawn (outlier list). */
.xpr-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 316px;
	height: 346px;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--surface-card);
	border-radius: var(--wp--custom--radius--sm);
}
.xpr-card__image {
	display: block;
	flex: none;
	width: 277px;
	height: 173px;
	margin: 14px 0 0 var(--wp--preset--spacing--16);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface-muted);
}
/* Ad slots (inc/ads.php): centred; take no space until an ad fills them. Between cards: full row. */
.xpr-ad { display: flex; justify-content: center; }
.xpr-ad:not(:empty) { margin: var(--wp--preset--spacing--24) auto; }
.xpr-ad--top:not(:empty) { margin: 0 auto; }
li.xpr-ad { grid-column: 1 / -1; list-style: none; }
/* Top and bottom units are responsive (they fill their box), so keep them inside the content
   column like the disclaimer and cards, as on the paper's own pages, instead of edge to edge. */
.xpr-ad--top, .xpr-ad--bottom { box-sizing: border-box; width: calc(100% - 2 * var(--xpr-gutter)); max-width: var(--wp--style--global--content-size); margin-inline: auto; }
.xpr-ad--top > *, .xpr-ad--bottom > * { max-width: 100%; }
.xpr-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xpr-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 var(--wp--preset--spacing--16); color: var(--wp--preset--color--gray-400); font-size: var(--wp--preset--font-size--15); font-weight: 700; line-height: var(--wp--custom--line-height--15-auto); text-align: center; text-decoration: none; }
.xpr-card__details {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 145px;
	padding: var(--wp--preset--spacing--16) 14px var(--wp--preset--spacing--16) 18px;
}
.xpr-card__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--wp--preset--color--ink-black);
	font-size: var(--wp--preset--font-size--16);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--16-130);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
.xpr-card__title a { color: inherit; text-decoration: none; }
.xpr-card__title a:hover, .xpr-card__title a:focus-visible { text-decoration: underline; }
.xpr-card__meta { display: flex; align-items: center; justify-content: space-between; height: 30px; }
.xpr-card__byline { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--wp--preset--spacing--2); }
.xpr-card__source, .xpr-card__date { color: var(--wp--preset--color--gray-500); }
.xpr-card__source { font-size: var(--wp--preset--font-size--12); line-height: var(--wp--custom--line-height--12-auto); }
.xpr-card__date { font-size: var(--wp--preset--font-size--11); line-height: var(--wp--custom--line-height--11-auto); }

/* Share button: 29×29, radius 10 (615:2135) */
.xpr-share {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 29px;
	height: 29px;
	margin: 0;
	padding: 0;
	background: #EFF1F3; /* Figma: #E5E7EB at 50% on #FAFAFA, as Figma renders it (outlier C8) */
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--gray-500);
	cursor: pointer;
}
.xpr-share:hover { background: var(--wp--preset--color--border); }
.xpr-share.is-copied { color: var(--wp--preset--color--primary); }

/* View all: desktop 593:3058 → 593:3059 → 593:3060, mobile 593:3908 */
.xpr-listing__more { display: flex; justify-content: center; margin-top: var(--wp--preset--spacing--16); padding-top: var(--wp--preset--spacing--16); }
.xpr-listing__more-inner { display: flex; justify-content: center; padding-top: var(--wp--preset--spacing--8); }
.xpr-button {
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	padding: calc(var(--wp--preset--spacing--12) - var(--wp--custom--border--width)) calc(var(--wp--preset--spacing--32) - var(--wp--custom--border--width));
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	width: 252px; /* fixed in Figma (593:3060), not hug */
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--14);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--14-auto);
	text-decoration: none;
}
.xpr-button:hover { border-color: var(--wp--preset--color--primary); }

/* Dropdown menu (shared with the sort dropdown; spec 593:3392 / 593:3433) */
.xpr-dropdown { position: relative; }
.xpr-menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + var(--wp--preset--spacing--4));
	left: 0;
	box-sizing: border-box;
	width: 220px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--border-menu);
	border-radius: var(--wp--custom--radius--md);
}
.xpr-menu[hidden] { display: none; }
.xpr-menu__item {
	display: flex;
	align-items: center;
	column-gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--12);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--14);
	line-height: var(--wp--custom--line-height--14-auto);
	text-decoration: none;
}
.xpr-menu__item:hover, .xpr-menu__item:focus-visible { background: var(--wp--preset--color--surface-muted); outline: 0; }
.xpr-menu__check { flex: none; visibility: hidden; color: var(--wp--preset--color--primary-chip); }
.xpr-menu__item.is-active { color: var(--wp--preset--color--primary-chip); font-weight: 500; }
.xpr-menu__item.is-active .xpr-menu__check { visibility: visible; }

/* Mobile listing: 593:3819 ------------------------------------------------ */
@media (max-width: 767px) {
	.xpr-listing { margin-top: var(--wp--preset--spacing--20); }
	.xpr-listing__header { flex-direction: column; align-items: stretch; row-gap: var(--wp--preset--spacing--16); height: auto; }
	.xpr-listing__header .xpr-search { order: -1; }
	.xpr-listing__title-row { height: 31px; } /* Figma 593:3828 places the chip at a fixed x=151 (17px gap); 24px per UT1-T8 */
	.xpr-section-title { font-size: var(--wp--preset--font-size--18); line-height: var(--wp--custom--line-height--18-110); }
	.xpr-chip { height: 31px; font-size: var(--wp--preset--font-size--12); line-height: var(--wp--custom--line-height--12-auto); }
	.xpr-chip[aria-controls] { width: 132px; }
	.xpr-chip--muted { display: none; } /* not in the mobile frame */

	.xpr-search {
		width: 100%;
		height: 40px;
		column-gap: var(--wp--preset--spacing--8);
		border-color: var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--md);
		color: var(--wp--preset--color--placeholder);
	}
	.xpr-search__icon--desktop, .xpr-search__placeholder--desktop { display: none; }
	.xpr-search__icon--mobile, .xpr-search__placeholder--mobile { display: block; overflow: hidden; }

	.xpr-card-grid { justify-content: center; margin-top: var(--wp--preset--spacing--20); }
	.xpr-card--desktop { display: none; } /* mobile frame shows 6 cards, then View all */
	.xpr-card__details { justify-content: flex-start; row-gap: var(--wp--preset--spacing--12); height: auto; }

	.xpr-listing__more { margin-top: var(--wp--preset--spacing--20); padding-top: 0; }
	.xpr-listing__more-inner { width: 100%; }
	.xpr-button { width: 100%; }
}

/* ======================================================================
   Article page: desktop 593:3097, mobile 593:3459
   ====================================================================== */
.xpr-article { margin-top: var(--wp--preset--spacing--40); }
/* Figma's article block is 1382px wide, 4px wider than the 1378px banner (outlier L5). */
@media (min-width: 1440px) {
	/* Constrained layout forces max-width + auto margins (!important); widen and shift 2px so the
	   left edge stays aligned with the banner, as in Figma. */
	.xpr-main > .xpr-article { width: 1382px; max-width: none !important; translate: 1px 0; }
}
.xpr-article__top { display: flex; flex-direction: column; row-gap: var(--wp--preset--spacing--12); }

/* Breadcrumbs + search row: 211:266. Figma's fixed children overflow its 40px right padding
   (search ends 1px from the edge), so the right padding is 1px here. */
.xpr-article__crumbs-row {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	column-gap: var(--wp--preset--spacing--8);
	height: 68px;
	padding: var(--wp--preset--spacing--12) 1px var(--wp--preset--spacing--12) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
}
.xpr-breadcrumbs { display: flex; flex: 1 1 0; align-items: center; column-gap: var(--wp--preset--spacing--8); min-width: 0; }
.xpr-breadcrumbs__link, .xpr-breadcrumbs__current {
	flex: none;
	font-size: var(--wp--preset--font-size--13);
	line-height: var(--wp--custom--line-height--13-auto);
	white-space: nowrap;
}
.xpr-breadcrumbs__link { color: var(--wp--preset--color--primary-link); text-decoration: none; }
.xpr-breadcrumbs__link:hover { text-decoration: underline; }
.xpr-breadcrumbs__sep { flex: none; color: var(--wp--preset--color--muted-2); }
.xpr-breadcrumbs__current { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--wp--preset--color--muted); text-overflow: ellipsis; }
.xpr-search--article { flex: none; width: 484px; }

/* Header: 211:265 */
.xpr-article__header {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	row-gap: var(--wp--preset--spacing--16);
	width: 1024px;
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--white);
}
.xpr-article__title { margin: 0; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--36); font-weight: 700; line-height: var(--wp--custom--line-height--36-120); }
.xpr-article__meta { display: flex; align-items: center; justify-content: space-between; column-gap: var(--wp--preset--spacing--16); }
.xpr-article__byline { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--wp--preset--spacing--2); }
.xpr-article__partner { color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--14); font-weight: 700; line-height: var(--wp--custom--line-height--14-auto); text-decoration: none; }
a.xpr-article__partner:hover { text-decoration: underline; }
.xpr-article__dateline { color: var(--wp--preset--color--muted-2); font-size: var(--wp--preset--font-size--12); line-height: var(--wp--custom--line-height--12-auto); }

/* Topic pills: 211:164 (primary), 211:166 */
.xpr-pills { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--8); margin: 0; padding: 0; list-style: none; }
.xpr-pill {
	box-sizing: border-box;
	display: block;
	padding: calc(var(--wp--preset--spacing--6) - var(--wp--custom--border--width)) calc(var(--wp--preset--spacing--12) - var(--wp--custom--border--width));
	background: var(--wp--preset--color--surface-tag);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
	border-radius: 100px; /* Figma uses 100 here (999 elsewhere); renders identically */
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--12);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--12-auto);
	text-decoration: none;
	white-space: nowrap;
}
.xpr-pill--primary { padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--12); background: var(--wp--preset--color--primary-link); border: 0; color: var(--wp--preset--color--white); }

/* Content + sidebar: 593:3099 */
.xpr-article__layout { display: flex; align-items: flex-start; justify-content: space-between; column-gap: 58px; margin-top: 46px; }
.xpr-article__main {
	box-sizing: border-box;
	display: flex;
	flex: none;
	flex-direction: column;
	row-gap: 17px; /* Figma 593:3101; off-scale (outlier L6) */
	width: 1024px;
	padding: var(--wp--preset--spacing--32);
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--xl);
}

/* Hero: 211:264 */
.xpr-article__hero { background: var(--wp--preset--color--white); display: flex; flex-direction: column; row-gap: var(--wp--preset--spacing--12); margin: 0; padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--40); }
.xpr-article__hero-img { aspect-ratio: 880 / 495; overflow: hidden; border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--surface-muted); }
.xpr-article__hero-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Image smaller than its frame (set by interactions.js, UT1-T6): natural size, centred, never stretched. */
.xpr-article__hero-img.is-small img, .xpr-card__image.is-small img, .xpr-result__image.is-small img { object-fit: scale-down; }
/* Image shaped unlike its frame (set by interactions.js): shown whole instead of cropped. */
.xpr-article__hero-img.is-fit img, .xpr-card__image.is-fit img, .xpr-result__image.is-fit img { object-fit: contain; }
/* Behind a small or whole-shown image: a blurred copy of it fills the frame, not empty bars. */
:is(.xpr-article__hero-img, .xpr-card__image, .xpr-result__image):is(.is-small, .is-fit) { position: relative; isolation: isolate; }
:is(.xpr-article__hero-img, .xpr-card__image, .xpr-result__image):is(.is-small, .is-fit)::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -60px; /* well past the frame, so the blur's faded edge is clipped off */
	background: var(--xpr-img) center / cover no-repeat;
	filter: blur(18px) saturate(1.1);
	opacity: 0.55;
}
:is(.xpr-article__hero-img, .xpr-card__image, .xpr-result__image):is(.is-small, .is-fit) img { position: relative; }
.xpr-article__caption { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--13); line-height: 18px; /* 13px at Figma's 18px (≈140%) */ }

/* Body: 593:3125 */
.xpr-article__body { background: var(--wp--preset--color--white); display: flex; flex-direction: column; row-gap: var(--wp--preset--spacing--24); padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--40); }
.xpr-prose > * { margin: 0; }
.xpr-prose p, .xpr-prose li { color: var(--wp--preset--color--ink-black); font-size: var(--wp--preset--font-size--16); line-height: var(--wp--custom--line-height--16-150); }
/* Figma sets the dateline paragraph at 16/26 in #1D1D1D (others 16/24, #000): outlier T2 */
.xpr-prose > p:first-child { color: var(--wp--preset--color--ink); line-height: var(--wp--custom--line-height--16-160); }
.xpr-prose a { color: var(--wp--preset--color--link-bright); text-decoration: underline; } /* outlier C2: fails AA */
.xpr-prose strong, .xpr-prose b { font-weight: 700; }
.xpr-prose img { max-width: 100%; height: auto; border-radius: var(--wp--custom--radius--md); }
.xpr-prose figure { margin: 0; }
.xpr-prose h2, .xpr-prose h3 { color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--18); line-height: var(--wp--custom--line-height--18-140); }
.xpr-prose ul, .xpr-prose ol { padding-left: var(--wp--preset--spacing--24); }

/* Pull quote: 593:3128 (any blockquote in a release) */
.xpr-prose blockquote, .xpr-prose .wp-block-quote {
	display: flex;
	flex-direction: column;
	row-gap: var(--wp--preset--spacing--8);
	margin: 0;
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--12) var(--wp--preset--spacing--12) calc(var(--wp--preset--spacing--16) - var(--wp--custom--border--quote));
	background: var(--wp--preset--color--surface-subtle);
	border: 0;
	border-left: var(--wp--custom--border--quote) solid var(--wp--preset--color--primary-link);
	border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0;
}
.xpr-prose blockquote p { margin: 0; color: var(--wp--preset--color--primary-link); font-size: var(--wp--preset--font-size--16); font-style: italic; font-weight: 600; line-height: var(--wp--custom--line-height--16-150); }
.xpr-prose blockquote cite { color: var(--wp--preset--color--slate-500); font-size: var(--wp--preset--font-size--12); font-style: normal; font-weight: 500; line-height: var(--wp--custom--line-height--12-auto); }
/* Wire-site layout leftovers if xpr_press_wire_markup() doesn't recognise the markup: EIN's 60em
   float spacer and floated quote box would otherwise leave a page-tall gap. */
.xpr-prose .pr_quote_positioner { display: none; }
.xpr-prose .pr_quote { float: none !important; clear: none !important; max-width: none !important; margin: 0 !important; background: none !important; }

/* Related keywords: 211:262 */
/* Bottom-of-article notice (from the old single template; not in Figma) */
.xpr-article__notice { margin: 0 var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--16); border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--border); color: var(--wp--preset--color--gray-500); font-size: var(--wp--preset--font-size--13); font-style: italic; line-height: var(--wp--custom--line-height--13-150); }
.xpr-article__notice a { color: inherit; text-decoration: underline; }
.xpr-keywords { background: var(--wp--preset--color--white); display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--wp--preset--spacing--12); padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--40); }
.xpr-keywords__title { margin: 0; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--14); font-weight: 700; line-height: var(--wp--custom--line-height--14-auto); }
.xpr-keywords__list { align-self: stretch; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--8); margin: 0; padding: 0; list-style: none; }
.xpr-tag {
	display: block;
	padding: calc(5px - var(--wp--custom--border--width)) calc(var(--wp--preset--spacing--10) - var(--wp--custom--border--width));
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--border-tag);
	border-radius: var(--wp--custom--radius--xs);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--12);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--12-auto);
	text-decoration: none;
}
.xpr-tag:hover { border-color: var(--wp--preset--color--muted); }

/* Sidebar cards: 593:3135–3137 */
.xpr-article__sidebar { display: flex; flex: none; flex-direction: column; row-gap: var(--wp--preset--spacing--24); width: 300px; }
.xpr-side-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	row-gap: var(--wp--preset--spacing--16);
	padding: calc(var(--wp--preset--spacing--20) - var(--wp--custom--border--width));
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--border-slate);
	border-radius: var(--wp--custom--radius--xs);
}
.xpr-side-card__title { margin: 0; color: var(--wp--preset--color--slate-800); font-size: var(--wp--preset--font-size--14); font-weight: 700; line-height: var(--wp--custom--line-height--14-auto); }

.xpr-details__list { display: flex; flex-direction: column; row-gap: var(--wp--preset--spacing--16); margin: 0; }
.xpr-details__row { display: flex; column-gap: var(--wp--preset--spacing--12); }
.xpr-details__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 16px; height: 16px; background: var(--wp--preset--color--surface-icon); border-radius: var(--wp--custom--radius--md); color: #616674; /* Figma icon stroke; not in palette */ }
.xpr-details__text { display: flex; flex: 1 1 0; flex-direction: column; row-gap: var(--wp--preset--spacing--2); min-width: 0; }
.xpr-details__label { color: var(--wp--preset--color--slate-500); font-size: var(--wp--preset--font-size--11); font-weight: 600; letter-spacing: 0.055px; /* Figma 0.5% (outlier T3) */ line-height: var(--wp--custom--line-height--11-auto); text-transform: uppercase; }
.xpr-details__value { margin: 0; color: var(--wp--preset--color--slate-800); font-size: var(--wp--preset--font-size--13); font-weight: 500; line-height: var(--wp--custom--line-height--13-140); }
.xpr-details__button {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: calc(var(--wp--preset--spacing--10) - var(--wp--custom--border--width)) calc(var(--wp--preset--spacing--16) - var(--wp--custom--border--width));
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--border-slate);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--blue-600);
	font-size: var(--wp--preset--font-size--13);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--13-auto);
	text-decoration: none;
}
.xpr-details__button:hover { border-color: var(--wp--preset--color--blue-600); }
/* Two-line download button (Tasha, 2026-10-15): Figma's button style (border, radius, padding,
   label type) with the file type and size underneath. Not in Figma yet (outlier A11). */
.xpr-download { flex-direction: column; row-gap: var(--wp--preset--spacing--2); height: auto; }
.xpr-download[aria-busy="true"] { cursor: progress; opacity: 0.6; } /* building the PDF (first download) */
.xpr-download__meta { color: var(--wp--preset--color--slate-500); font-size: var(--wp--preset--font-size--11); font-weight: 500; line-height: var(--wp--custom--line-height--11-auto); }

.xpr-share-list { display: flex; flex-direction: column; row-gap: var(--wp--preset--spacing--12); margin: 0; padding: 0; list-style: none; }
.xpr-share-item {
	display: flex;
	align-items: center;
	column-gap: var(--wp--preset--spacing--12);
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--slate-800);
	font: 500 var(--wp--preset--font-size--13) / var(--wp--custom--line-height--13-auto) var(--wp--preset--font-family--inter);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.xpr-share-item__label { flex: 1 1 0; }
.xpr-share-item:hover .xpr-share-item__label { text-decoration: underline; }
/* Figma alternates 36px (LinkedIn, Facebook) and 32px (X, Copy Link) circles: built as drawn (outlier list) */
.xpr-share-item__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--wp--preset--color--surface-tag); border-radius: 16px; color: var(--wp--preset--color--slate-500); }
.xpr-share-item--lg .xpr-share-item__icon { width: 36px; height: 36px; border-radius: 18px; }
.xpr-share-item--copy .xpr-share-item__icon { background: #F2F4F5; } /* Figma: #64748B at 8% on white, as Figma renders it */

.xpr-more__list { display: flex; flex-direction: column; row-gap: var(--wp--preset--spacing--16); margin: 0; padding: 0; list-style: none; }
.xpr-more__item { display: flex; column-gap: var(--wp--preset--spacing--12); }
.xpr-more__thumb { display: block; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--surface-muted); }
.xpr-more__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xpr-more__text { display: flex; flex: 1 1 0; flex-direction: column; row-gap: var(--wp--preset--spacing--4); min-width: 0; }
.xpr-more__title {
	display: -webkit-box;
	overflow: hidden;
	color: var(--wp--preset--color--slate-800);
	font-size: var(--wp--preset--font-size--12);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--12-140);
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.xpr-more__title:hover { text-decoration: underline; }
.xpr-more__date { color: var(--wp--preset--color--slate-500); font-size: var(--wp--preset--font-size--11); font-weight: 500; line-height: var(--wp--custom--line-height--11-auto); }
/* Divider 215:201 + link 215:202 */
.xpr-more__all {
	display: flex;
	align-items: center;
	column-gap: var(--wp--preset--spacing--4);
	/* Figma's divider (215:201) takes no height: it renders on y=292–293, 16px below the list, with
	   the link text 16px below y=293. Draw it as a 1px background on a box pulled up 1px. */
	margin-top: -1px;
	padding-top: calc(var(--wp--preset--spacing--16) + 1px);
	background: linear-gradient(var(--wp--preset--color--border-slate), var(--wp--preset--color--border-slate)) 0 0 / 100% var(--wp--custom--border--width) no-repeat;
	color: var(--wp--preset--color--blue-600);
	font-size: var(--wp--preset--font-size--12);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--12-auto);
	text-decoration: none;
}
.xpr-more__all:hover { text-decoration: underline; }
.xpr-breadcrumbs__sep--mobile { display: none; }

/* Mobile article: 593:3459 (402px frame) --------------------------------- */
@media (max-width: 767px) {
	/* Article disclaimer variant 593:3460: desktop icon, centered, 10/12 padding (the listing uses 593:3820) */
	.xpr-main--article .xpr-disclaimer {
		align-items: center;
		padding: calc(var(--wp--preset--spacing--10) - var(--wp--custom--border--width)) calc(var(--wp--preset--spacing--12) - var(--wp--custom--border--width));
		border-radius: var(--wp--custom--radius--lg);
	}
	.xpr-main--article .xpr-disclaimer__icon { width: 24px; height: 24px; border-radius: var(--wp--custom--radius--sm); color: var(--wp--preset--color--info); }
	.xpr-main--article .xpr-disclaimer__icon-desktop { display: block; }
	.xpr-main--article .xpr-disclaimer__icon-mobile { display: none; }
	.xpr-main--article .xpr-disclaimer__text { color: var(--wp--preset--color--gray-700); line-height: var(--wp--custom--line-height--12-150); }

	.xpr-article { margin-top: var(--wp--preset--spacing--20); }
	.xpr-article__top { row-gap: var(--wp--preset--spacing--20); }
	.xpr-article__crumbs-row { flex-direction: column; align-items: stretch; row-gap: var(--wp--preset--spacing--20); height: auto; padding: 0; background: none; }

	/* 593:3465 */
	.xpr-breadcrumbs { flex: none; column-gap: var(--wp--preset--spacing--6); }
	.xpr-breadcrumbs__link, .xpr-breadcrumbs__current { font-size: var(--wp--preset--font-size--12); line-height: var(--wp--custom--line-height--12-auto); }
	.xpr-breadcrumbs__link { font-weight: 500; }
	.xpr-breadcrumbs__current { color: var(--wp--preset--color--slate-500); }
	.xpr-breadcrumbs__sep { display: none; }
	.xpr-breadcrumbs__sep--mobile { display: block; }

	/* 593:3473 (shares the listing's mobile search styles) */
	.xpr-search--article { width: 100%; border-color: var(--wp--preset--color--border-tag-m); color: var(--wp--preset--color--slate-500); }
	.xpr-search--article .xpr-search__placeholder { color: var(--wp--preset--color--slate-500); }

	/* 593:3477 */
	.xpr-article__header { row-gap: var(--wp--preset--spacing--12); width: auto; padding: 0; background: none; }
	.xpr-article__title { color: var(--wp--preset--color--slate-800); font-size: var(--wp--preset--font-size--24); line-height: var(--wp--custom--line-height--24-125); }
	.xpr-article__meta { flex-direction: column; align-items: flex-start; row-gap: var(--wp--preset--spacing--12); }
	.xpr-article__partner { color: var(--wp--preset--color--slate-800); font-size: var(--wp--preset--font-size--13); line-height: var(--wp--custom--line-height--13-auto); }
	.xpr-pills { align-self: stretch; gap: var(--wp--preset--spacing--6); }
	.xpr-pill {
		padding: calc(var(--wp--preset--spacing--4) - var(--wp--custom--border--width)) calc(var(--wp--preset--spacing--10) - var(--wp--custom--border--width));
		background: var(--wp--preset--color--surface-muted);
		border-color: var(--wp--preset--color--border-slate);
		color: var(--wp--preset--color--slate-500);
		font-size: var(--wp--preset--font-size--11);
		line-height: var(--wp--custom--line-height--11-auto);
	}
	.xpr-pill--primary { padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--10); background: var(--wp--preset--color--primary-link); color: var(--wp--preset--color--white); }

	.xpr-article__layout { flex-direction: column; align-items: stretch; row-gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--20); }
	.xpr-article__main { row-gap: var(--wp--preset--spacing--20); width: auto; padding: 0; background: none; border-radius: 0; }

	/* 593:3490 */
	.xpr-article__hero { row-gap: var(--wp--preset--spacing--8); padding: 0; background: none; }
	.xpr-article__caption { color: var(--wp--preset--color--muted-2); font-size: var(--wp--preset--font-size--11); line-height: var(--wp--custom--line-height--11-140); }

	/* 593:3512 */
	.xpr-article__body { row-gap: var(--wp--preset--spacing--16); padding: 0; background: none; }
	.xpr-prose p, .xpr-prose li, .xpr-prose > p:first-child { color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--15); line-height: var(--wp--custom--line-height--15-160); }
	.xpr-prose a { color: var(--wp--preset--color--primary-link); }

	/* 593:3521 */
	.xpr-keywords { row-gap: var(--wp--preset--spacing--10); padding: 0; background: none; }
	.xpr-article__notice { margin: 0; }
	.xpr-keywords__title { color: var(--wp--preset--color--slate-800); font-size: var(--wp--preset--font-size--13); line-height: var(--wp--custom--line-height--13-auto); }
	.xpr-keywords__list { gap: var(--wp--preset--spacing--6); }
	.xpr-tag { padding: calc(var(--wp--preset--spacing--6) - var(--wp--custom--border--width)) calc(var(--wp--preset--spacing--12) - var(--wp--custom--border--width)); border-color: var(--wp--preset--color--border-tag-m); }

	/* 593:3535–3537: same cards, full width */
	.xpr-article__sidebar { width: auto; }
}

/* ======================================================================
   Search results: desktop 593:3138, mobile 593:3583
   ====================================================================== */
.xpr-results-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "head search" "body body";
	align-items: start;
	margin-top: var(--wp--preset--spacing--40);
}
.xpr-results-page__crumbs { display: none; }

/* Header: 593:3174 + count 593:3185 */
.xpr-results-head { grid-area: head; }
.xpr-results-head__title {
	margin: 0;
	padding-top: 9px; /* Figma: text sits 9px down the 44px search row (593:3176) */
	color: var(--wp--preset--color--ink-alt);
	font-size: var(--wp--preset--font-size--18);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--18-auto);
}
.xpr-results-head__query { font-weight: 400; }
.xpr-results-head__count {
	margin: 14px 0 0; /* count at y=45 under the 44px row (off-scale, as drawn) */
	color: var(--wp--preset--color--gray-results);
	font-size: var(--wp--preset--font-size--14);
	line-height: var(--wp--custom--line-height--14-auto);
}

/* Search box with a value + clear button: 593:3178 */
.xpr-search--results { grid-area: search; grid-template-columns: auto 1fr auto; }
.xpr-search--results .xpr-search__input { color: var(--wp--preset--color--ink); }
.xpr-search__clear {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.xpr-search__clear-icon--desktop { flex: none; margin: -3px; } /* Figma's 28px icon box overflows the 22px button */
.xpr-search__clear-icon--mobile { display: none; }
.xpr-search__input:placeholder-shown ~ .xpr-search__clear { visibility: hidden; }

/* Filters + results: 593:3187 */
.xpr-results-page__body {
	grid-area: body;
	display: flex;
	align-items: flex-start;
	column-gap: var(--wp--preset--spacing--40);
	margin-top: 41px; /* count → layout (593:3186), off-scale as drawn */
	padding: var(--wp--preset--spacing--40) 0 0 var(--wp--preset--spacing--40);
}

/* Filter panel: 593:3188 */
.xpr-filters {
	box-sizing: border-box;
	display: flex;
	flex: none;
	flex-direction: column;
	row-gap: var(--wp--preset--spacing--24);
	width: 280px;
	padding: calc(var(--wp--preset--spacing--24) - var(--wp--custom--border--width));
	background: var(--wp--preset--color--surface-subtle);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
}
.xpr-filters__header { display: flex; align-items: center; justify-content: space-between; height: 18px; }
.xpr-filters__title { margin: 0; color: var(--wp--preset--color--ink-alt); font-size: var(--wp--preset--font-size--15); font-weight: 700; line-height: var(--wp--custom--line-height--15-auto); }
.xpr-filters__count { color: var(--wp--preset--color--gray-500); font-size: var(--wp--preset--font-size--12); font-weight: 600; }
.xpr-filters__clear { color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--13); font-weight: 600; line-height: var(--wp--custom--line-height--13-auto); text-decoration: none; }
.xpr-filters__clear:hover { text-decoration: underline; }
/* Section dividers: Figma "Line" layers take no height (24px above and below); their 1px stroke
   renders in the pixel row just above the section's top edge. */
.xpr-filter, .xpr-filters__actions { position: relative; padding-top: var(--wp--preset--spacing--24); }
.xpr-filter::before, .xpr-filters__actions::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--wp--custom--border--width));
	right: 0;
	left: 0;
	height: var(--wp--custom--border--width);
	background: var(--wp--preset--color--border);
}
.xpr-filter { display: flex; flex-direction: column; row-gap: var(--wp--preset--spacing--16); }
.xpr-filter__heading { margin: 0; }
.xpr-filter__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 15px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--ink-alt);
	font: 700 var(--wp--preset--font-size--12) / var(--wp--custom--line-height--12-auto) var(--wp--preset--font-family--inter);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
}
.xpr-filter__chevron { flex: none; }
.xpr-filter__body { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--wp--preset--spacing--16); }
.xpr-filter.is-closed .xpr-filter__body { display: none; }
.xpr-filter.is-closed .xpr-filter__chevron { rotate: 180deg; }
.xpr-filter__options { display: flex; flex-direction: column; row-gap: var(--wp--preset--spacing--12); align-self: stretch; margin: 0; padding: 0; list-style: none; }
.xpr-filter--topics .xpr-filter__options:not(.is-expanded) > li:nth-child(n+9) { display: none; }
.xpr-filter__more {
	display: none;
	align-items: center;
	column-gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--primary);
	font: 600 var(--wp--preset--font-size--12) / var(--wp--custom--line-height--12-auto) var(--wp--preset--font-family--inter);
	cursor: pointer;
}
.xpr-filter.has-more .xpr-filter__more { display: flex; }
.xpr-filter__more[aria-expanded="true"] svg { rotate: 180deg; }

/* Checkbox 278:310 and radio 593:3222 rows */
.xpr-option { display: flex; align-items: center; column-gap: var(--wp--preset--spacing--10); height: 16px; cursor: pointer; }
.xpr-option__input {
	box-sizing: border-box;
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0;
	background: var(--wp--preset--color--white) no-repeat center / 10px 10px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--primary);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.xpr-option__input--check { border-radius: var(--wp--custom--radius--xs); }
.xpr-option__input--check:checked {
	background-color: var(--wp--preset--color--primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M8.33397 2.5L3.75109 7.083L1.66797 4.99982' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.xpr-option__input--radio { border-color: var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); }
/* Selected: 8px dot (593:3223) centred in the 14px inner box */
.xpr-option__input--radio:checked { background-image: radial-gradient(circle closest-side, var(--wp--preset--color--primary) 3.6px, transparent 4.1px); background-size: auto; border-color: var(--wp--preset--color--primary); }
.xpr-option__input:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.xpr-option__label { color: var(--wp--preset--color--ink-alt); font-size: var(--wp--preset--font-size--13); font-weight: 600; line-height: var(--wp--custom--line-height--13-auto); }
.xpr-option__input--radio:not(:checked) + .xpr-option__label { color: var(--wp--preset--color--gray-500); font-weight: 500; }

/* Apply / Reset: 593:3268 */
.xpr-filters__actions { display: flex; flex-direction: column; row-gap: var(--wp--preset--spacing--10); }
.xpr-filters__button {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	margin: 0;
	padding: var(--wp--preset--spacing--12) 0;
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--white);
	font: 600 var(--wp--preset--font-size--13) / var(--wp--custom--line-height--13-auto) var(--wp--preset--font-family--inter);
	text-decoration: none;
	cursor: pointer;
}
.xpr-filters__button:hover { background: var(--wp--preset--color--blue-700); }
/* Reset is secondary on desktop too (staging review UT1-T5): Figma's mobile outline (593:3647)
   instead of the desktop frame's second solid blue button (outlier S6). */
.xpr-filters__button--reset { padding: calc(var(--wp--preset--spacing--12) - var(--wp--custom--border--width)) 0; background: var(--wp--preset--color--white); border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); color: var(--wp--preset--color--gray-500); }
.xpr-filters__button--reset:hover { background: var(--wp--preset--color--surface-subtle); color: var(--wp--preset--color--ink-alt); }
.xpr-filters__label--mobile { display: none; }

/* Results: 593:3271 */
.xpr-results { flex: 1 1 0; min-width: 0; max-width: 1009px; }
.xpr-result-list { display: flex; flex-direction: column; row-gap: var(--wp--preset--spacing--24); margin: 0; padding: 0; list-style: none; }
.xpr-result {
	display: flex;
	align-items: flex-start;
	column-gap: var(--wp--preset--spacing--24);
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--2-xl);
}
.xpr-result__image { display: block; flex: none; width: 240px; height: 160px; overflow: hidden; border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--surface-muted); }
.xpr-result__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xpr-result__details { display: flex; flex: 1 1 0; flex-direction: column; row-gap: var(--wp--preset--spacing--10); min-width: 0; }
.xpr-result__meta { display: flex; align-items: center; column-gap: var(--wp--preset--spacing--16); height: 23px; }
.xpr-result__source { color: var(--wp--preset--color--gray-500); font-size: var(--wp--preset--font-size--11); font-weight: 700; letter-spacing: 0.5px; line-height: var(--wp--custom--line-height--11-auto); text-transform: uppercase; }
.xpr-result__dot { flex: none; width: 4px; height: 4px; background: var(--wp--preset--color--gray-400); border-radius: 50%; }
.xpr-result__date { color: var(--wp--preset--color--gray-500); font-size: var(--wp--preset--font-size--12); line-height: var(--wp--custom--line-height--12-auto); }
.xpr-result__copy {
	display: flex;
	align-items: center;
	column-gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--surface-subtle);
	border: 0;
	border-radius: var(--wp--custom--radius--xs);
	color: var(--wp--preset--color--gray-500);
	font: 500 var(--wp--preset--font-size--12) / var(--wp--custom--line-height--12-auto) var(--wp--preset--font-family--inter);
	cursor: pointer;
}
.xpr-result__copy:hover { color: var(--wp--preset--color--ink-alt); }
.xpr-result__title { margin: 0; color: var(--wp--preset--color--ink-alt); font-size: var(--wp--preset--font-size--18); font-weight: 700; line-height: var(--wp--custom--line-height--18-140); }
.xpr-result__title a { color: inherit; text-decoration: none; }
.xpr-result__title a:hover, .xpr-result__title a:focus-visible { text-decoration: underline; }
.xpr-result__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--wp--preset--color--gray-500);
	font-size: var(--wp--preset--font-size--13);
	line-height: var(--wp--custom--line-height--13-150);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.xpr-result__footer { display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--wp--preset--spacing--6); }
.xpr-result__tags { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--8); margin: 0; padding: var(--wp--preset--spacing--4) 0 0; list-style: none; }
.xpr-result__tag {
	display: block;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--10);
	background: var(--wp--preset--color--surface-tag-2);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--ink-tag);
	font-size: var(--wp--preset--font-size--11);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--11-auto);
	text-decoration: none;
}
.xpr-result__tag:hover { background: var(--wp--preset--color--border); }
.xpr-result__share { display: none; }
.xpr-results__empty { color: var(--wp--preset--color--gray-results); font-size: var(--wp--preset--font-size--14); line-height: var(--wp--custom--line-height--14-150); }
.xpr-results__empty a { color: var(--wp--preset--color--primary); }

/* Pagination: 593:3370. Figma's container starts 20px into the feed and runs 40px past it, so
   it centres 30px right of the feed's centre; built as drawn. */
.xpr-pagination {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	column-gap: var(--wp--preset--spacing--8);
	margin: 17px -40px 0 20px;
	padding-top: var(--wp--preset--spacing--24);
}
.xpr-pagination__step, .xpr-pagination__page {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--gray-500);
	text-decoration: none;
}
.xpr-pagination__step { width: 30px; height: 30px; padding: var(--wp--preset--spacing--8); }
.xpr-pagination__step.is-disabled { cursor: default; } /* Figma draws the arrows at full colour on page 1 */
.xpr-pagination__page { height: 32px; padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12); font-size: var(--wp--preset--font-size--13); font-weight: 600; line-height: var(--wp--custom--line-height--13-auto); }
a.xpr-pagination__step:hover, a.xpr-pagination__page:hover { background: var(--wp--preset--color--surface-subtle); color: var(--wp--preset--color--ink-alt); }
.xpr-pagination__page.is-current { background: var(--wp--preset--color--surface-subtle); color: var(--wp--preset--color--ink-black); font-weight: 700; }
.xpr-pagination__gap::before { content: "..."; } /* literal dots (Figma 593:3385); WordPress would texturize them into "…" */
.xpr-pagination__gap { color: var(--wp--preset--color--gray-400); font-size: var(--wp--preset--font-size--13); line-height: var(--wp--custom--line-height--13-auto); }

/* Mobile search: 593:3583 ------------------------------------------------ */
@media (max-width: 767px) {
	/* Disclaimer variant 593:3592: desktop icon, 11/15 text */
	.xpr-main--search .xpr-disclaimer__icon { width: 24px; height: 24px; border-radius: var(--wp--custom--radius--sm); color: var(--wp--preset--color--info); }
	.xpr-main--search .xpr-disclaimer__icon-desktop { display: block; }
	.xpr-main--search .xpr-disclaimer__icon-mobile { display: none; }
	.xpr-main--search .xpr-disclaimer__text { font-size: var(--wp--preset--font-size--11); line-height: var(--wp--custom--line-height--11-140); }

	.xpr-results-page { display: flex; flex-direction: column; align-items: stretch; row-gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--20); }
	.xpr-results-page__body { display: contents; }
	.xpr-results-page__crumbs { display: flex; order: 1; }
	.xpr-search--results { order: 2; }
	.xpr-filters { order: 3; }
	.xpr-results-head { order: 4; position: relative; display: flex; flex-direction: column; row-gap: var(--wp--preset--spacing--4); }
	/* Divider 593:3652 sits in the 20px gaps between the filters and this header (takes no height) */
	.xpr-results-head::before { content: ""; position: absolute; top: -21px; right: 0; left: 0; height: var(--wp--custom--border--width); background: var(--wp--preset--color--border); }
	.xpr-results-page { row-gap: var(--wp--preset--spacing--20); }
	.xpr-results { order: 5; max-width: none; }

	.xpr-results-head__title { padding-top: 0; letter-spacing: -0.05px; } /* Inter v4 sets this line 1.6px wider than Figma, which wraps the 360px heading (outlier S7) */
	.xpr-results-head__query { color: var(--wp--preset--color--gray-600); }
	.xpr-results-head__count { align-self: flex-start; margin: 0; color: var(--wp--preset--color--gray-500); font-size: var(--wp--preset--font-size--13); line-height: var(--wp--custom--line-height--13-auto); }

	/* 593:3605 */
	.xpr-search.xpr-search--results { height: 44px; padding: 0 calc(var(--wp--preset--spacing--12) - var(--wp--custom--border--width)); border-color: var(--wp--preset--color--border-input); color: var(--wp--preset--color--gray-500); }
	.xpr-search--results .xpr-search__input { color: var(--wp--preset--color--ink-alt); font-size: var(--wp--preset--font-size--14); line-height: var(--wp--custom--line-height--14-auto); }
	.xpr-search__clear { width: 20px; height: 20px; padding: var(--wp--preset--spacing--4); background: var(--wp--preset--color--surface-muted); border-radius: var(--wp--custom--radius--lg); color: var(--wp--preset--color--ink-alt); }
	.xpr-search__clear-icon--desktop { display: none; }
	.xpr-search__clear-icon--mobile { display: block; }

	/* 593:3612 */
	.xpr-filters { row-gap: var(--wp--preset--spacing--16); width: auto; padding: calc(var(--wp--preset--spacing--16) - var(--wp--custom--border--width)) calc(var(--wp--preset--spacing--24) - var(--wp--custom--border--width)); }
	.xpr-filter, .xpr-filters__actions { padding-top: var(--wp--preset--spacing--16); }
	.xpr-filter--date, .xpr-filter--sort { padding-top: 0; }
	.xpr-filter--date::before, .xpr-filter--sort::before { content: none; }
	.xpr-filter--collapse-mobile:not(.is-open) .xpr-filter__body { display: none; }
	.xpr-filter--collapse-mobile:not(.is-open) .xpr-filter__toggle { justify-content: flex-start; width: auto; }
	.xpr-filter--collapse-mobile:not(.is-open) .xpr-filter__chevron { rotate: 180deg; }
	.xpr-filter--topics .xpr-filter__options:not(.is-expanded) > li:nth-child(n+4) { display: none; }
	.xpr-filter.has-more-mobile .xpr-filter__more { display: flex; }
	.xpr-filters__actions { flex-direction: row; column-gap: var(--wp--preset--spacing--8); }
	.xpr-filters__button { flex: 1 1 0; height: 35px; padding: var(--wp--preset--spacing--10) 0; font-size: var(--wp--preset--font-size--12); font-weight: 700; line-height: var(--wp--custom--line-height--12-auto); }
	.xpr-filters__button--reset { padding: calc(var(--wp--preset--spacing--10) - var(--wp--custom--border--width)) 0; background: none; border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); color: var(--wp--preset--color--gray-500); }
	.xpr-filters__button--reset:hover { background: var(--wp--preset--color--white); }
	.xpr-filters__label--desktop { display: none; }
	.xpr-filters__label--mobile { display: inline; }

	/* 593:3657 / 593:3705 */
	.xpr-result-list { row-gap: var(--wp--preset--spacing--16); }
	.xpr-result { flex-direction: column; row-gap: var(--wp--preset--spacing--12); padding: var(--wp--preset--spacing--16); background: var(--wp--preset--color--surface-card); border-radius: var(--wp--custom--radius--xl); }
	.xpr-result__image { width: 100%; }
	.xpr-result__title { order: -1; font-size: var(--wp--preset--font-size--16); line-height: var(--wp--custom--line-height--16-135); }
	.xpr-result__meta { column-gap: var(--wp--preset--spacing--8); height: 13px; }
	.xpr-result__source { font-size: var(--wp--preset--font-size--10); line-height: var(--wp--custom--line-height--10-auto); }
	.xpr-result__date { font-size: var(--wp--preset--font-size--11); line-height: var(--wp--custom--line-height--11-auto); }
	.xpr-result__copy { display: none; }
	.xpr-result__excerpt { line-height: var(--wp--custom--line-height--13-145); -webkit-line-clamp: 3; }
	.xpr-result__share { display: flex; margin-bottom: -4px; } /* Figma: the 29px button overflows the 25px tags row (593:3713) */

	.xpr-pagination { margin: var(--wp--preset--spacing--4) 0 0; padding-top: 0; flex-wrap: wrap; }
}
