/* Shared archive chrome — the <details> filter Select, the pill row, and the Query Loop
   pagination pill. archive-insights.css, our-work.css, and now the Our Work page's "Problems we
   solve" pill row (bpd_render_problems_pills(), inc/pattern-helpers.php) all carried or would
   have carried byte-identical copies of these rules; kept here so the surfaces cannot drift
   apart. Enqueued alongside whichever of those stylesheets the page already loads (functions.php)
   — never on its own, and never sitewide.

   Filter Bar — native <details>/<summary> disclosure styled as a Select box (OQ12: dropdown UI,
   plain <a href> links, zero JS). Our Work's two filter controls ship from the block markup
   without an inner list; the .wp-block-list rules apply the moment one is added.

   The summary font-size/box-sizing are body-sm/border-box to match the Figma "Select" component
   (5687:10182 — 14px label, 44px total control height). Previously body-md on a content-box 44px,
   which rendered a 46px control with a 16px label; corrected here rather than forked, since every
   surface renders the same component. */
.bpd-filter-select {
	position: relative;
	width: 301px;
}

.bpd-filter-select > summary {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--200);
	height: 44px;
	padding: 0 var(--wp--preset--spacing--300);
	border: var(--wp--custom--border--sm) solid var(--wp--preset--color--blue-300);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface-canvas);
	color: var(--wp--preset--color--text-default);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body-sm);
	cursor: pointer;
	list-style: none;
}

.bpd-filter-select > summary::-webkit-details-marker {
	display: none;
}

.bpd-filter-select > summary::after {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	transition: transform 200ms ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.19 10.12c-.25-.26-.25-.68 0-.93.24-.24.6-.25.86-.06l.06.06 4.87 4.96 4.91-4.96c.24-.24.6-.25.86-.06l.07.06c.23.24.25.6.06.87l-.06.07-5.37 5.43c-.23.24-.6.25-.85.05l-.07-.06L6.19 10.12z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.19 10.12c-.25-.26-.25-.68 0-.93.24-.24.6-.25.86-.06l.06.06 4.87 4.96 4.91-4.96c.24-.24.6-.25.86-.06l.07.06c.23.24.25.6.06.87l-.06.07-5.37 5.43c-.23.24-.6.25-.85.05l-.07-.06L6.19 10.12z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.bpd-filter-select[open] > summary::after {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.bpd-filter-select > summary::after {
		transition: none;
	}
	.wp-block-query-pagination.bpd-pagination .wp-block-query-pagination-next,
	.wp-block-query-pagination.bpd-pagination .wp-block-query-pagination-previous {
		transition: none;
	}
}

.bpd-filter-select .wp-block-list {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + var(--wp--preset--spacing--100));
	z-index: 10;
	width: 100%;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: var(--wp--preset--spacing--200);
	list-style: none;
	background-color: var(--wp--preset--color--surface-canvas);
	border: var(--wp--custom--border--sm) solid var(--wp--preset--color--blue-300);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--sm);
}

.bpd-filter-select .wp-block-list li {
	padding: var(--wp--preset--spacing--200) var(--wp--preset--spacing--100);
}

.bpd-filter-select .wp-block-list a {
	text-decoration: none;
}

/* Query pagination — the Next/Prev links (relabeled from Figma's "Load more" per OQ12's
   assumption), styled as the same green arrow pill already used for every other CTA.
   is-style-arrow's mask-icon mechanism isn't directly reusable since query-pagination-next/previous
   aren't core/button, so the pill look is redrawn here against the same tokens; the arrow geometry
   itself reuses the shared --bpd-arrow-icon custom property (header-footer.css) instead of
   repeating the data-URI. */
.wp-block-query-pagination.bpd-pagination {
	justify-content: center;
}

.wp-block-query-pagination.bpd-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination.bpd-pagination .wp-block-query-pagination-previous {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--100);
	height: 44px;
	padding: var(--wp--preset--spacing--200) var(--wp--preset--spacing--600);
	background-color: var(--wp--preset--color--green-600);
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--text-default);
	font-size: var(--wp--preset--font-size--body-md);
	text-decoration: none;
	transition: background-color 300ms ease;
}

.wp-block-query-pagination.bpd-pagination .wp-block-query-pagination-next:hover,
.wp-block-query-pagination.bpd-pagination .wp-block-query-pagination-previous:hover {
	background-color: var(--wp--preset--color--green-700);
}

.wp-block-query-pagination.bpd-pagination .wp-block-query-pagination-next::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--bpd-arrow-icon) no-repeat center / contain;
	mask: var(--bpd-arrow-icon) no-repeat center / contain;
}

.wp-block-query-pagination.bpd-pagination .wp-block-query-pagination-previous::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	transform: scaleX(-1);
	-webkit-mask: var(--bpd-arrow-icon) no-repeat center / contain;
	mask: var(--bpd-arrow-icon) no-repeat center / contain;
}

/* Category/Problems-we-solve pill row (moved from archive-insights.css so this file's existing
   Insights + Our Work sharing arrangement covers a third surface too — see header comment above).
   These are core buttons because a button is already a pill-shaped link with full colour +
   className support, where core/list-item declares "className": false and so cannot carry the
   active marker. Only the two colours that change per state live on the block itself
   (bpd_render_insights_pills() / bpd_render_problems_pills(), inc/pattern-helpers.php); the shared
   chrome is stated once here rather than repeated inline across every pill on every page. */
.bpd-pill-row .wp-block-button__link {
	display: flex;
	align-items: center;
	min-height: var(--wp--preset--spacing--1000);
	padding-inline: var(--wp--preset--spacing--400);
	padding-block: var(--wp--preset--spacing--100);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
	border: var(--wp--custom--border--sm) solid var(--wp--preset--color--blue-300);
}

/* The filled current-page pill carries no outline in the design. Keyed off the background preset
   the active pill already sets, so there is no second marker class to keep in sync. */
.bpd-pill-row .wp-block-button__link.has-blue-800-background-color {
	border-color: transparent;
}

/* Mobile: one swipeable row instead of a wrapped centred block (Figma 4788:32912's "Tabs row" --
   nowrap, gap 12px, flush to the 16px gutter; GitHub #96).

   A media query rather than minmax()/clamp() because this is a structural change, not a sizing
   one: wrap -> nowrap, centred -> start-aligned, and a new scroll container. None of those can be
   expressed fluidly. 781px is the same breakpoint the rest of this theme's mobile shifts use.

   The row already sits inside a group padded by --spacing--gutter, which resolves to exactly 16px
   at 375px, so the Figma left inset needs no extra padding here.

   Scoped to .bpd-pill-row, which is shared with the Problems-we-solve pill row on Our Work -- the
   scroll behaviour is wanted on both (six pills wrap awkwardly at 375 either way), and the pills
   are baked into post_content on the Insights pages, so a modifier class added in the renderer
   would not reach the pages already built. */
@media (max-width: 781px) {
	.bpd-pill-row {
		flex-wrap: nowrap;
		overflow-x: auto;

		/* Out to the viewport edges so the pills scroll off both sides instead of stopping at an
		   inset that reads as a mistake (issue #264). The track bleeds; its own padding rests the
		   first pill on the same 16px line as the copy above it. Widened and shifted rather than
		   given a negative margin: core's constrained-layout rule sets the auto margins with
		   !important, so a margin here cannot win. */
		width: 100vw;
		position: relative;
		inset-inline-start: calc(50% - 50vw);
		padding-inline: var(--wp--preset--spacing--400);

		/* Scroll padding keeps the first pill clear of the container edge when swiped back. */
		scroll-padding-inline-start: var(--wp--preset--spacing--400);
		/* Clears the scrollbar. Belongs in this query: the desktop row does not scroll, so an
		   unscoped padding would just add dead space under it. */
		padding-bottom: var(--wp--preset--spacing--300);
	}

	/* Core emits .is-content-justification-center (0,1,0) for the block's own centre alignment,
	   which the desktop row still wants. Matching it alongside .bpd-pill-row (0,2,0) wins on
	   specificity alone -- no !important, and no change to the block's editor-facing setting.
	   Start-alignment is not cosmetic here: a centred flex row that overflows puts its first item
	   at a negative offset, which several browsers will not let you scroll back to. */
	.bpd-pill-row.is-content-justification-center {
		justify-content: flex-start;
	}

	/* Without this the flex items compress to fit instead of overflowing, and nothing scrolls. */
	.bpd-pill-row .wp-block-button {
		flex-shrink: 0;
	}
}