/**
 * SMP Search
 *
 * Scoped under .smpcs-search, inheriting the theme's font families rather than
 * importing its own. Palette lives in the custom properties below -- the navy
 * and red are read off the comps and should be replaced with the exact brand
 * values once confirmed.
 */

.smpcs-search {
	--smpcs-navy: #1c3554;
	--smpcs-navy-deep: #14263d;
	--smpcs-blue: #1568b0;
	--smpcs-red: #c8102e;
	--smpcs-red-dark: #a50d26;
	--smpcs-ink: #1b2530;
	--smpcs-muted: #5f6c7b;
	--smpcs-line: #dde3ea;
	--smpcs-line-soft: #eef2f6;
	--smpcs-bg: #f5f7f9;
	--smpcs-radius: 4px;
	--smpcs-radius-pill: 999px;
	--smpcs-rail: 232px;
	--smpcs-gap: 22px;

	/* Outer gutter. Scales with viewport so the page never sits flush to the
	   browser edge on narrow screens or float unanchored on very wide ones. */
	--smpcs-pad: clamp(16px, 3.5vw, 40px);

	/* How far the pill row hangs below the navy band. */
	--smpcs-pill-h: 42px;
	--smpcs-pill-overlap: 14px;
	--smpcs-pill-bg: #eef1f5;

	color: var(--smpcs-ink);
	/* Deliberately NOT container-type: inline-size. That makes this element a
	   containing block for position:fixed descendants, which pins the filter
	   and sort drawers to the element rather than the viewport -- and leaves
	   the closed drawer sitting past the right edge, scrolling the whole page
	   sideways. Breakpoints below are viewport-based for the same reason. */
	overflow-x: clip;
}

/* ---------- Boot overlay ---------- */

.smpcs-search {
	position: relative;
}

.smpcs-boot {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 120px;
	background: #fff;
	/* Belt and braces: JS clears this the moment it initialises, but the
	   animation clears it regardless so a blocked or failed script cannot
	   leave the page hidden behind a spinner. */
	animation: smpcs-boot-out 0.25s ease 0.7s forwards;
}

.smpcs-search.is-ready .smpcs-boot {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0.18s ease;
}

@keyframes smpcs-boot-out {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

.smpcs-spinner {
	width: 26px;
	height: 26px;
	border: 2px solid var(--smpcs-line);
	border-top-color: var(--smpcs-blue);
	border-radius: 50%;
	animation: smpcs-spin 0.7s linear infinite;
}

@keyframes smpcs-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.smpcs-spinner {
		animation: none;
	}

	.smpcs-boot {
		animation-duration: 0.01s;
		animation-delay: 0.2s;
	}
}

.smpcs-search *,
.smpcs-search *::before,
.smpcs-search *::after {
	box-sizing: border-box;
}

.smpcs-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Search band ---------- */

.smpcs-band {
	background: var(--smpcs-navy);
	/* Bottom padding reserves the strip the pills overlap into. */
	padding: 22px var(--smpcs-pad) calc(var(--smpcs-pill-h) - var(--smpcs-pill-overlap) + 14px);
	border-radius: var(--smpcs-radius) var(--smpcs-radius) 0 0;
}

.smpcs-band__form {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 620px;
	margin: 0 auto;
	background: #fff;
	border-radius: var(--smpcs-radius-pill);
	padding: 0 14px;
}

.smpcs-band__icon {
	display: flex;
	color: var(--smpcs-navy);
	flex: 0 0 auto;
}

.smpcs-band__form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 13px 10px;
	font-size: 1rem;
	color: var(--smpcs-ink);
	appearance: none;
}

.smpcs-band__form input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

.smpcs-band__form input[type="search"]:focus {
	outline: none;
}

.smpcs-band__form:focus-within {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

.smpcs-band__clear {
	display: flex;
	flex: 0 0 auto;
	padding: 6px;
	color: var(--smpcs-muted);
	border-radius: 50%;
}

.smpcs-band__clear:hover {
	color: var(--smpcs-ink);
	background: var(--smpcs-line-soft);
}

/* ---------- Tabs ---------- */

.smpcs-tabs {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	/* Pull the row up so it straddles the band's lower edge. */
	margin: calc((var(--smpcs-pill-h) - var(--smpcs-pill-overlap)) * -1) 0 22px;
	padding: 0 var(--smpcs-pad);
	z-index: 2;
}

.smpcs-tabs__scroller {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	/* Room for the pill shadow, clipped otherwise by the scroll box. */
	padding: 4px 0 6px;
}

.smpcs-tabs__scroller::-webkit-scrollbar {
	display: none;
}

.smpcs-tabs__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: max-content;
}

.smpcs-pill {
	display: inline-block;
	height: var(--smpcs-pill-h);
	padding: 0 22px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: var(--smpcs-pill-h);
	white-space: nowrap;
	text-decoration: none;
	color: var(--smpcs-navy);
	background: var(--smpcs-pill-bg);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: var(--smpcs-radius-pill);
	box-shadow: 0 1px 3px rgba(20, 38, 61, 0.16);
	scroll-snap-align: start;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.smpcs-pill:hover,
.smpcs-pill:focus-visible {
	background: var(--smpcs-blue);
	border-color: var(--smpcs-blue);
	color: #fff;
}

.smpcs-pill.is-current {
	background: var(--smpcs-blue);
	border-color: var(--smpcs-blue);
	color: #fff;
}

/* Categories with no matches are styled the same as any other. Fading them
   read as the whole strip dimming whenever a filter was applied. */
.smpcs-pill.is-empty {
	opacity: 1;
}

.smpcs-pill__count {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* Scroll arrows. Revealed by JS only when the strip actually overflows, so
   they never appear as dead controls.

   The forward arrow deliberately does NOT push to the container edge. The
   strip is capped to whole pills, so any leftover width would open up between
   the last pill and the arrow. Sitting flush against the strip keeps the
   control next to the content it scrolls. */

.smpcs-tabs__arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--smpcs-navy);
	background: #fff;
	border: 1px solid var(--smpcs-line);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(20, 38, 61, 0.2);
	cursor: pointer;
}

.smpcs-tabs__arrow:hover {
	background: var(--smpcs-line-soft);
}

/* Hidden but still occupying its slot.
   display:none handed the arrow's width back to the strip, which quantise()
   then turned into dead space between the last pill and the other arrow. The
   row must stay the same size whether or not an arrow is usable. */
.smpcs-tabs__arrow.is-hidden {
	visibility: hidden;
	pointer-events: none;
}

.smpcs-tabs__arrow--prev svg {
	transform: rotate(180deg);
}

/* Carousel position dots, populated by JS on narrow viewports. */
.smpcs-tabs__dots {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -16px;
	gap: 6px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.smpcs-tabs__dots li {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #c6cfd8;
}

.smpcs-tabs__dots li.is-active {
	background: var(--smpcs-blue);
}

/* ---------- Controls row ----------
   Shares the body's two-column grid so "Filter by:" lines up with the rail and
   the sort control lines up with the results. The rule beneath spans the full
   width, per the design. */

.smpcs-search__controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin: 0 0 18px;
	padding: 0 var(--smpcs-pad) 10px;
	border-bottom: 1px solid var(--smpcs-line);
}

.smpcs-search__controls--railed {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Heading and the selected chips read as one group on the left. The heading
   keeps the rail's width so it still sits over the filter column, and the
   chips begin immediately after it. */
.smpcs-controls__filter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	flex: 1 1 auto;
	min-width: 0;
}

.smpcs-controls__filter .smpcs-controls__label {
	flex: 0 0 auto;
	min-width: calc(var(--smpcs-rail) - 24px);
}

.smpcs-controls__label {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smpcs-muted);
	white-space: nowrap;
}

.smpcs-controls__main {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px 16px;
	flex: 0 0 auto;
	min-width: 0;
}

.smpcs-drawer-toggle {
	display: none;
	flex: 1 1 0;
	padding: 11px 18px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--smpcs-ink);
	background: var(--smpcs-line-soft);
	border: 1px solid var(--smpcs-line);
	border-radius: var(--smpcs-radius);
	cursor: pointer;
}

.smpcs-sort {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 0.875rem;
	color: var(--smpcs-muted);
}

.smpcs-sort label {
	white-space: nowrap;
}

.smpcs-sort select {
	padding: 7px 10px;
	font-size: 0.875rem;
	color: var(--smpcs-ink);
	background: #fff;
	border: 1px solid var(--smpcs-line);
	border-radius: var(--smpcs-radius);
}

/* Mobile-only trigger for the sort panel. */
.smpcs-drawer-toggle--sort {
	display: none;
}

/* The sort panel reuses .smpcs-rail for its drawer behaviour, but .smpcs-rail
   is the visible sidebar at desktop widths -- so this variant stays hidden
   until the mobile block turns it into a drawer. */
.smpcs-rail--sort {
	display: none;
}

/* Sort options inside the drawer. */
.smpcs-sortlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.smpcs-sortlist__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 2px;
	font-size: 0.9375rem;
	color: var(--smpcs-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--smpcs-line-soft);
}

.smpcs-sortlist__item:hover {
	color: var(--smpcs-blue);
}

.smpcs-sortlist__item.is-current {
	font-weight: 700;
	color: var(--smpcs-blue);
}

.smpcs-sortlist__item.is-current::after {
	content: "";
	width: 14px;
	height: 9px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg) translate(2px, -3px);
}

/* Position dots under a carousel. Written by JS, hidden above mobile. */
.smpcs-carousel-dots {
	display: none;
	gap: 7px;
	justify-content: center;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.smpcs-carousel-dots li {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #c6cfd8;
	transition: background-color 0.15s ease;
}

.smpcs-carousel-dots li.is-active {
	background: var(--smpcs-blue);
}

/* ---------- Active filter chips ---------- */

.smpcs-chips {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-size: 0.8125rem;
}

.smpcs-chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.smpcs-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	color: var(--smpcs-navy);
	background: var(--smpcs-line-soft);
	border: 1px solid var(--smpcs-line);
	border-radius: var(--smpcs-radius-pill);
	text-decoration: none;
}

.smpcs-chip:hover {
	border-color: var(--smpcs-red);
	color: var(--smpcs-red);
}

.smpcs-chips__clear {
	color: var(--smpcs-blue);
	text-decoration: underline;
}

/* ---------- Body layout ---------- */

.smpcs-search__body {
	display: block;
	padding: 0 var(--smpcs-pad) 8px;
}

.smpcs-search--railed .smpcs-search__body {
	display: grid;
	grid-template-columns: var(--smpcs-rail) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.smpcs-search__main {
	min-width: 0;
}

/* ---------- Filter rail ---------- */

.smpcs-rail {
	/* Grid items default to min-width:auto, which lets wide content push the
	   item past its track -- long tag names were doing exactly that and
	   spilling the chip list over the results column. */
	min-width: 0;
}

.smpcs-rail__head {
	/* Desktop shows "Filter by:" in the controls bar instead. */
	display: none;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 10px;
}

.smpcs-rail__head h2 {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smpcs-muted);
}

.smpcs-rail__close {
	display: none;
	padding: 6px;
	background: none;
	border: 0;
	color: var(--smpcs-ink);
	cursor: pointer;
}

.smpcs-group {
	border-bottom: 1px solid var(--smpcs-line-soft);
}

.smpcs-group:first-of-type > summary {
	padding-top: 0;
}

.smpcs-group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 0;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.smpcs-group > summary::-webkit-details-marker {
	display: none;
}

.smpcs-group > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--smpcs-muted);
	border-bottom: 2px solid var(--smpcs-muted);
	transform: rotate(45deg) translateY(-2px);
}

.smpcs-group[open] > summary::after {
	transform: rotate(-135deg) translateY(-2px);
}

.smpcs-group__list {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.smpcs-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 5px 0;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--smpcs-ink);
	text-decoration: none;
}

.smpcs-check:hover {
	color: var(--smpcs-blue);
}

.smpcs-check__box {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	border: 1px solid #9aa7b4;
	border-radius: 2px;
	background: #fff;
}

.smpcs-check.is-checked .smpcs-check__box {
	background: var(--smpcs-blue);
	border-color: var(--smpcs-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
	background-size: 12px;
	background-position: center;
	background-repeat: no-repeat;
}

.smpcs-check__label {
	flex: 1 1 auto;
}

.smpcs-check__count {
	flex: 0 0 auto;
	font-size: 0.75rem;
	color: var(--smpcs-muted);
	font-variant-numeric: tabular-nums;
}

/* A dimension left with nothing to offer by the current filters. Kept in place
   so the rail does not appear to lose its controls. */

/* ---------- Tag chips ----------
   An open vocabulary reads as a cloud rather than a list: entries are short,
   unordered, and there can be far more of them than the fixed dimensions hold. */

.smpcs-tagbox {
	display: flex;
	flex-wrap: wrap;
	min-width: 0;
	gap: 6px;
	margin: 2px 0 14px;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--smpcs-line);
	border-radius: var(--smpcs-radius);
}

/* Nothing to offer yet: the box stays, so the filter reads as "not populated"
   rather than "missing". */
.smpcs-tagbox__empty {
	margin: 0;
	padding: 2px;
	font-size: 0.8125rem;
	color: var(--smpcs-muted);
}

.smpcs-tagchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	min-width: 0;
	padding: 5px 10px;
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--smpcs-ink);
	background: var(--smpcs-line-soft);
	border: 1px solid transparent;
	border-radius: var(--smpcs-radius);
	text-decoration: none;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.smpcs-tagchip__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.smpcs-tagchip:hover {
	background: var(--smpcs-blue-pale, #e8f2fb);
	border-color: var(--smpcs-blue);
	color: var(--smpcs-blue);
}

/* Selected reads as a filled token with a cross, so removing one is a single
   obvious click rather than hunting for the checkbox that turned it on. */
.smpcs-tagchip.is-selected {
	background: var(--smpcs-blue);
	border-color: var(--smpcs-blue);
	color: #fff;
	font-weight: 600;
}

.smpcs-tagchip.is-selected:hover {
	background: var(--smpcs-navy);
	border-color: var(--smpcs-navy);
	color: #fff;
}

.smpcs-tagchip__count {
	font-size: 0.6875rem;
	color: var(--smpcs-muted);
	font-variant-numeric: tabular-nums;
}

.smpcs-tagchip:hover .smpcs-tagchip__count {
	color: inherit;
}

.smpcs-tagchip__x {
	display: inline-flex;
	align-items: center;
	opacity: 0.85;
}

.smpcs-tagchip__x svg {
	width: 11px;
	height: 11px;
}

/* Overflow disclosure, so a long vocabulary cannot run the sidebar off the
   page. Styled as a quiet link rather than another group heading. */
.smpcs-tagmore {
	flex: 1 0 100%;
	margin: 4px 0 0;
}

.smpcs-tagmore > summary {
	display: inline-block;
	padding: 2px 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--smpcs-blue);
	cursor: pointer;
	list-style: none;
}

.smpcs-tagmore > summary::-webkit-details-marker {
	display: none;
}

.smpcs-tagmore > summary:hover {
	text-decoration: underline;
}

.smpcs-tagbox--overflow {
	margin: 8px 0 0;
	padding: 0 2px 0 0;
	border: 0;
	background: transparent;
	/* A large vocabulary would otherwise run hundreds of chips down the page. */
	max-height: 300px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The tag group's own box supplies the frame, so the list padding that the
   checkbox groups use would double it up. */
.smpcs-group--tags > summary {
	margin-bottom: 2px;
}

/* ---------- Section headings ---------- */

.smpcs-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 30px 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--smpcs-line);
}

.smpcs-section-head:first-child {
	margin-top: 0;
}

.smpcs-section-head h2 {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
}

.smpcs-section-head__count {
	font-weight: 500;
	color: var(--smpcs-muted);
	font-variant-numeric: tabular-nums;
}

.smpcs-viewall {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--smpcs-blue);
	text-decoration: none;
	white-space: nowrap;
}

.smpcs-viewall:hover {
	text-decoration: underline;
}

/* ---------- Cards ---------- */

/* Column counts are set per section rather than by auto-fill, so a section
   with two results still reads as a two-up block instead of stretching. */
.smpcs-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--smpcs-gap);
	margin: 0 0 8px;
}

.smpcs-grid--1 { grid-template-columns: minmax(0, 1fr); }
.smpcs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.smpcs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.smpcs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.smpcs-grid--programs {
	gap: 26px;
	margin-bottom: 12px;
}

.smpcs-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.smpcs-card__media {
	display: block;
	margin: 0 0 12px;
	aspect-ratio: 3 / 4;
	background: var(--smpcs-bg);
	border-radius: 2px;
	overflow: hidden;
}

.smpcs-card__media--wide {
	aspect-ratio: 16 / 9;
}

.smpcs-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Blog art is photography, so filling and cropping the box is right. */
.smpcs-card--post .smpcs-card__media img {
	object-fit: cover;
}

/* Program art is a logo lockup with its own margins and a coloured spine.
   Cropping it cuts the wordmark in half, so it is always contained. The box is
   2:1 to match the supplied banners exactly -- anything else letterboxes on a
   transparent background rather than losing part of the artwork. */
.smpcs-card--program .smpcs-card__media {
	aspect-ratio: 2 / 1;
	background: transparent;
}

.smpcs-card--program .smpcs-card__media img {
	object-fit: contain;
	object-position: center;
}

.smpcs-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.smpcs-card__title {
	margin: 0 0 4px;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
}

.smpcs-card--program .smpcs-card__title {
	font-size: 1.0625rem;
	font-style: italic;
}

.smpcs-card__title a {
	color: var(--smpcs-ink);
	text-decoration: none;
}

.smpcs-card__title a:hover {
	color: var(--smpcs-blue);
	text-decoration: underline;
}

.smpcs-card__meta {
	margin: 0 0 4px;
	font-size: 0.8125rem;
	color: var(--smpcs-muted);
	line-height: 1.4;
}

.smpcs-card__summary {
	margin: 0 0 10px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--smpcs-muted);
}

.smpcs-card__facts {
	margin: 0 0 10px;
	font-size: 0.8125rem;
	color: var(--smpcs-ink);
	font-variant-numeric: tabular-nums;
}

.smpcs-card__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: auto 0 0;
}

.smpcs-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--smpcs-blue);
	text-decoration: none;
}

.smpcs-link:hover {
	text-decoration: underline;
}

/* Shown when the query had to be relaxed to return anything. */
.smpcs-notice {
	margin: 0 0 18px;
	padding: 10px 14px;
	font-size: 0.875rem;
	color: var(--smpcs-ink);
	background: var(--smpcs-line-soft);
	border-left: 3px solid var(--smpcs-blue);
	border-radius: 2px;
}

.smpcs-notice strong {
	font-weight: 700;
}

/* ---------- Empty state ---------- */

.smpcs-empty {
	padding: 48px 24px;
	text-align: center;
	background: var(--smpcs-bg);
	border-radius: var(--smpcs-radius);
}

.smpcs-empty p {
	margin: 0 0 8px;
	color: var(--smpcs-muted);
}

.smpcs-empty p:last-child {
	margin-bottom: 0;
}

.smpcs-empty strong {
	color: var(--smpcs-ink);
}

.smpcs-empty a {
	color: var(--smpcs-blue);
}

/* ---------- Pagination ---------- */

.smpcs-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 28px 0 0;
}

.smpcs-pagination__pages {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.smpcs-pagination a,
.smpcs-pagination span {
	display: block;
	min-width: 38px;
	padding: 8px 11px;
	font-size: 0.875rem;
	text-align: center;
	text-decoration: none;
	border-radius: var(--smpcs-radius);
	font-variant-numeric: tabular-nums;
}

.smpcs-pagination a {
	color: var(--smpcs-blue);
	border: 1px solid var(--smpcs-line);
}

.smpcs-pagination a:hover {
	border-color: var(--smpcs-blue);
	background: var(--smpcs-line-soft);
}

.smpcs-pagination .is-current span {
	background: var(--smpcs-blue);
	color: #fff;
	font-weight: 600;
}

.smpcs-pagination__gap {
	padding: 8px 2px;
	color: var(--smpcs-muted);
}

.smpcs-pagination__step {
	font-weight: 600;
}

/* ---------- Focus ---------- */

.smpcs-search a:focus-visible,
.smpcs-search button:focus-visible,
.smpcs-search select:focus-visible,
.smpcs-search summary:focus-visible {
	outline: 2px solid var(--smpcs-blue);
	outline-offset: 2px;
}

/* ---------- Narrow: drawer filters, swipeable section previews ---------- */

/* Tablet: products drop to two across. */
@media (max-width: 1200px) {
	.smpcs-grid--3,
	.smpcs-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile. */
@media (max-width: 900px) {
	.smpcs-search--railed .smpcs-search__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.smpcs-drawer-toggle {
		display: block;
	}

	/* Filters + Sort as equal buttons; the label is redundant next to them. */
	.smpcs-search__controls,
	.smpcs-search__controls--railed {
		display: flex;
		grid-template-columns: none;
		justify-content: stretch;
		align-items: stretch;
		gap: 12px;
		border-bottom: 0;
		/* Breathing room under the tab strip and its dots. */
		margin-top: 22px;
		padding-bottom: 0;
	}

	.smpcs-controls__label {
		display: none;
	}

	.smpcs-search__controls--railed {
		flex-wrap: wrap;
	}

	.smpcs-controls__filter {
		flex: 1 1 0;
	}

	.smpcs-controls__main {
		flex: 1 1 0;
		justify-content: stretch;
	}

	/* Chips take a full-width row of their own beneath the two buttons. */
	.smpcs-controls__filter {
		flex-wrap: wrap;
		flex: 1 1 0;
		gap: 0;
	}

	.smpcs-chips {
		flex: 1 0 100%;
		width: 100%;
		order: 3;
		justify-content: flex-start;
		margin-top: 14px;
	}

	.smpcs-chips ul {
		width: 100%;
	}

	.smpcs-rail--sort {
		display: block;
	}

	.smpcs-rail__head {
		display: flex;
		margin-bottom: 4px;
	}

	.smpcs-rail__head h2 {
		font-size: 0.9375rem;
		letter-spacing: 0.04em;
	}

	/* The inline select gives way to a drawer trigger, matching Filters. */
	.smpcs-sort {
		display: none;
	}

	.smpcs-drawer-toggle--sort {
		display: block;
		width: 100%;
	}

	.smpcs-carousel-dots {
		display: flex;
	}

	.smpcs-sort label {
		font-weight: 600;
		color: var(--smpcs-ink);
	}

	.smpcs-sort select {
		border: 0;
		background: transparent;
		font-weight: 600;
	}

	.smpcs-rail {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(340px, 88vw);
		z-index: 9999;
		padding: 18px 20px;
		background: #fff;
		box-shadow: -6px 0 26px rgba(0, 0, 0, 0.18);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.24s ease, visibility 0.24s;
	}

	.smpcs-rail.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.smpcs-rail__close {
		display: block;
	}

	.smpcs-tabs__dots {
		display: flex;
	}

	/* A full result listing stays a vertical grid, two up so more fits on
	   screen than a single stacked column. */
	.smpcs-grid,
	.smpcs-grid--1,
	.smpcs-grid--2,
	.smpcs-grid--3,
	.smpcs-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 16px;
	}

	/* Section previews swipe sideways instead. Cards are sized so the next one
	   peeks in at the right edge -- that overhang is what tells the reader the
	   row scrolls, without needing arrows or dots. */
	.smpcs-grid--carousel {
		display: flex;
		gap: 16px;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		/* Full-bleed to the page edge so cards scroll out of the gutter. */
		margin-inline: calc(var(--smpcs-pad) * -1);
		padding-inline: var(--smpcs-pad);
		scroll-padding-inline: var(--smpcs-pad);
		padding-bottom: 4px;
	}

	.smpcs-grid--carousel::-webkit-scrollbar {
		display: none;
	}

	.smpcs-grid--carousel > .smpcs-card {
		flex: 0 0 auto;
		width: 62%;
		max-width: 260px;
		scroll-snap-align: start;
	}

	.smpcs-grid--carousel.smpcs-grid--programs > .smpcs-card {
		width: 86%;
		max-width: 420px;
	}

	/* Arrows are redundant once the strip is swipeable. */
	.smpcs-tabs__arrow {
		display: none !important;
	}

	.smpcs-card {
		text-align: center;
		align-items: center;
	}

	.smpcs-grid--carousel > .smpcs-card {
		text-align: left;
		align-items: stretch;
	}

	.smpcs-card__media {
		width: 100%;
		aspect-ratio: 3 / 4;
	}

	.smpcs-card__media--wide {
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.smpcs-card--program .smpcs-card__media {
		width: 100%;
		aspect-ratio: 2 / 1;
	}

	.smpcs-card__body {
		width: 100%;
		align-items: center;
	}

	.smpcs-grid--carousel .smpcs-card__body {
		align-items: flex-start;
	}

	.smpcs-card__title {
		font-size: 1rem;
	}

	.smpcs-card__facts {
		font-size: 0.875rem;
	}

	.smpcs-card__links {
		align-items: center;
	}
}

.smpcs-scrim {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(20, 38, 61, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.24s ease, visibility 0.24s;
}

.smpcs-scrim.is-open {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.smpcs-rail,
	.smpcs-scrim {
		transition: none;
	}
}

/* ---------- Beta notice, editors only ---------- */

.smpcs-debug {
	margin: 26px var(--smpcs-pad) 0;
	padding: 9px 12px;
	font-size: 0.75rem;
	color: var(--smpcs-muted);
	background: var(--smpcs-bg);
	border-left: 3px solid var(--smpcs-blue);
	border-radius: 2px;
}