/**
 * Dynamic Post Grid + Filter
 * Scoped, variable-driven styles. Every selector is namespaced under `.dpg`
 * and all custom properties are scoped to the component root (no :root), so
 * nothing leaks into or collides with the Salient theme.
 *
 * Version: 1.4.1
 */

/* -------------------------------------------------------------------------
 * Component root: scoped custom properties (override per-instance via inline
 * style or a one-block theme override on `.dpg`).
 * ---------------------------------------------------------------------- */
.dpg {
	/* Layout (also set inline per instance). */
	--dpg-columns: 3;
	--dpg-columns-tablet: 2;
	--dpg-columns-mobile: 1;
	--dpg-gap: 30px;

	/* Palette / surface. */
	--dpg-card-bg: #ffffff;
	--dpg-card-radius: 10px;
	--dpg-card-shadow: 0 6px 24px rgba(18, 22, 33, 0.08);
	--dpg-card-shadow-hover: 0 14px 38px rgba(18, 22, 33, 0.16);
	--dpg-text: #1c2230;
	--dpg-muted: #6b7280;
	--dpg-accent: #2f6df6;
	--dpg-border: #e7e9ee;
	--dpg-badge-bg: #2f6df6;
	--dpg-badge-text: #ffffff;
	--dpg-img-ratio: 16 / 10;
	--dpg-transition: 220ms ease;

	/* Taxonomy pills — "quiet coding" style (design option 1d). */
	--dpg-tax-pill-bg: #f4f3ef;
	--dpg-tax-pill-text: #3f3d38;
	--dpg-tax-pill-bg-hover: #ecebe6;
	--dpg-tax-pill-radius: 5px;
	--dpg-tax-legend-color: #8a857b;

	/* Filter bar. */
	--dpg-bar-bg: #1f2430;
	--dpg-bar-text: #f4f6fb;
	--dpg-bar-muted: #aeb6c6;
	--dpg-bar-radius: 18px;
	--dpg-bar-gap: 16px;
	--dpg-pill-bg: #2b3140;
	--dpg-pill-text: #f4f6fb;
	--dpg-pill-radius: 999px;
	--dpg-pill-border: #3a4254;
	--dpg-bar-accent: #4c8bf5;
	--dpg-field-width: 200px; /* shared width for every filter field */

	/* Education preset. */
	--dpg-edu-gap: 30px;
	--dpg-edu-ratio: 3 / 2;
	--dpg-edu-cat: #1c3f8f;        /* category label (blue) */
	--dpg-edu-title: #2c3845;      /* title (slate) */
	--dpg-edu-muted: #6a7488;      /* date / meta */
	--dpg-edu-btn-bg: #15225f;     /* "Learn more" button (navy) */
	--dpg-edu-btn-text: #ffffff;
	--dpg-edu-btn-radius: 999px;
	--dpg-edu-pad: 26px;

	color: var(--dpg-text);
	box-sizing: border-box;
}
.dpg *,
.dpg *::before,
.dpg *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Grid
 * ---------------------------------------------------------------------- */
.dpg .dpg-grid {
	display: grid;
	grid-template-columns: repeat(var(--dpg-columns), minmax(0, 1fr));
	gap: var(--dpg-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dpg .dpg-grid-wrap {
	position: relative;
	min-height: 60px;
}

/* Loading state (set by JS on the results wrapper). */
.dpg .dpg-grid-wrap.is-loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity var(--dpg-transition);
}
.dpg .dpg-grid-wrap.is-loading::after {
	content: "";
	position: absolute;
	top: 18px;
	left: 50%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	border: 3px solid var(--dpg-border);
	border-top-color: var(--dpg-accent);
	border-radius: 50%;
	animation: dpg-spin 0.8s linear infinite;
	z-index: 2;
}

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

/* -------------------------------------------------------------------------
 * Card — shared
 * ---------------------------------------------------------------------- */
.dpg .dpg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--dpg-card-bg);
	border-radius: var(--dpg-card-radius);
	overflow: hidden;
	box-shadow: var(--dpg-card-shadow);
	transition: box-shadow var(--dpg-transition), transform var(--dpg-transition);
}

.dpg .dpg-card-media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--dpg-img-ratio);
	background: #eef1f6;
}
/*
 * Absolute-fill the image. Using position:absolute + inset:0 (rather than
 * height:100%) so a theme rule like `img { height: auto !important }`
 * (Salient ships one) cannot collapse the featured image.
 */
.dpg .dpg-card-media .dpg-img,
.dpg .dpg-card-media img,
.dpg .dpg-edu-media .dpg-img,
.dpg .dpg-edu-media img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: cover;
	transition: transform 400ms ease;
}
.dpg .dpg-img--placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e9edf5, #dde3ef);
}

.dpg .dpg-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 22px;
	flex: 1 1 auto; /* fill the card so a bottom-pinned read-more can reach the base */
}

.dpg .dpg-card-title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.3;
	font-weight: 700;
}
.dpg .dpg-card-title a {
	color: inherit;
	text-decoration: none;
}
.dpg .dpg-card-title a:hover {
	color: var(--dpg-accent);
}

.dpg .dpg-card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	color: var(--dpg-muted);
}
.dpg .dpg-card-meta a {
	color: inherit;
	text-decoration: none;
}
.dpg .dpg-avatar {
	border-radius: 50%;
	vertical-align: middle;
}

.dpg .dpg-card-excerpt {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--dpg-muted);
}

.dpg .dpg-term-badge {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 10px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--dpg-badge-text);
	background: var(--dpg-badge-bg);
	border-radius: 4px;
	text-decoration: none;
}
.dpg .dpg-term-badge--inline {
	background: transparent;
	color: var(--dpg-accent);
	padding: 0;
}

/* Taxonomy pills — "quiet coding" (design option 1d): a family legend, neutral
 * pills each with a colour-coded leading bar, and a "+N more" toggle. */
.dpg .dpg-tax {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin: 0;
}
.dpg .dpg-tax-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--dpg-tax-legend-color);
}
.dpg .dpg-tax-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.dpg .dpg-tax-legend-bar {
	width: 9px;
	height: 3px;
	border-radius: 2px;
	flex: 0 0 auto;
}
.dpg .dpg-tax-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}
.dpg .dpg-tax-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px 5px 8px;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--dpg-tax-pill-text);
	background: var(--dpg-tax-pill-bg);
	border-radius: var(--dpg-tax-pill-radius);
	text-decoration: none;
	transition: background var(--dpg-transition);
}
.dpg .dpg-tax-pill-bar {
	width: 3px;
	height: 12px;
	border-radius: 2px;
	flex: 0 0 auto;
}
a.dpg-tax-pill:hover {
	background: var(--dpg-tax-pill-bg-hover);
}
.dpg .dpg-tax-pill--extra,
.dpg .dpg-tax-pill--rowhide {
	display: none;
}
.dpg .dpg-tax.is-expanded .dpg-tax-pill--extra,
.dpg .dpg-tax.is-expanded .dpg-tax-pill--rowhide {
	display: inline-flex;
}
.dpg .dpg-pill-more {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.4;
	color: #5c5a54;
	background: transparent;
	border: 1px dashed #cdc9c0;
	border-radius: var(--dpg-tax-pill-radius);
	cursor: pointer;
	transition: color var(--dpg-transition), border-color var(--dpg-transition);
}
.dpg .dpg-pill-more:hover {
	color: var(--dpg-accent);
	border-color: var(--dpg-accent);
}
.dpg .dpg-pill-more[hidden] {
	display: none;
}
/* Education layout is centred, so centre its pill rows too. */
.dpg.dpg-style-education .dpg-tax-legend,
.dpg.dpg-style-education .dpg-tax-pills {
	justify-content: center;
}

/* Stretched "cover" link: makes the card navigate to the post without wrapping
 * the whole card in an <a> (which would nest the pill links — invalid HTML).
 * The cover sits above the static content but below the real inner links. */
.dpg .dpg-card-cover {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	/* transparent hit area */
}
.dpg .dpg-card-cover:focus-visible {
	outline: 2px solid var(--dpg-accent);
	outline-offset: -3px;
}
/* Keep the pill links + toggle clickable above the cover (same stacking ctx). */
.dpg .dpg-card--overlay .dpg-tax,
.dpg .dpg-card--magazine .dpg-tax,
.dpg .dpg-card--education .dpg-tax {
	position: relative;
	z-index: 2;
}

.dpg .dpg-card-readmore {
	margin-top: auto; /* pin to the bottom of the card body */
	padding-top: 4px;
	align-self: flex-start;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--dpg-accent);
	text-decoration: none;
}
.dpg .dpg-card-readmore .dpg-readmore-arrow {
	transition: transform var(--dpg-transition);
	display: inline-block;
}
.dpg .dpg-card-readmore:hover .dpg-readmore-arrow {
	transform: translateX(4px);
}

/* -------------------------------------------------------------------------
 * Card style: Overlay & Magazine (meta over image)
 * ---------------------------------------------------------------------- */
.dpg .dpg-card--overlay,
.dpg .dpg-card--magazine {
	min-height: 300px;
}
.dpg .dpg-card--overlay .dpg-card-link,
.dpg .dpg-card--magazine .dpg-card-link {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
	color: #fff;
	text-decoration: none;
}
.dpg .dpg-card--overlay .dpg-card-media,
.dpg .dpg-card--magazine .dpg-card-media {
	aspect-ratio: auto;
	position: absolute;
	inset: 0;
	height: 100%;
}
.dpg .dpg-card-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 13, 20, 0.85) 0%, rgba(10, 13, 20, 0.25) 45%, rgba(10, 13, 20, 0) 75%);
}
.dpg .dpg-card-overlay-body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	min-height: 300px;
	flex: 1 1 auto; /* fill the card so the cover link spans the whole surface */
	justify-content: flex-end;
}
.dpg .dpg-card--overlay .dpg-card-title,
.dpg .dpg-card--magazine .dpg-card-title {
	color: #fff;
}
.dpg .dpg-card--overlay .dpg-card-meta,
.dpg .dpg-card--magazine .dpg-card-meta,
.dpg .dpg-card--overlay .dpg-card-excerpt,
.dpg .dpg-card--magazine .dpg-card-excerpt {
	color: rgba(255, 255, 255, 0.82);
}

/* Magazine: first item spans wide and tall. */
.dpg.dpg-style-magazine .dpg-card--featured {
	grid-column: span 2;
	min-height: 440px;
}
.dpg.dpg-style-magazine .dpg-card--featured .dpg-card-overlay-body {
	min-height: 440px;
}
.dpg.dpg-style-magazine .dpg-card--featured .dpg-card-title {
	font-size: 1.9rem;
}

/* -------------------------------------------------------------------------
 * Card style: Minimal
 * ---------------------------------------------------------------------- */
.dpg .dpg-card--minimal {
	background: transparent;
	box-shadow: none;
	border-bottom: 1px solid var(--dpg-border);
	border-radius: 0;
}
.dpg .dpg-card--minimal .dpg-card-body {
	padding: 0 0 18px;
}
.dpg .dpg-card--minimal .dpg-card-title {
	font-size: 1.05rem;
}

/* -------------------------------------------------------------------------
 * Hover effects (selectable)
 * ---------------------------------------------------------------------- */
.dpg.dpg-hover-zoom .dpg-card:hover .dpg-img,
.dpg.dpg-hover-zoom .dpg-card:hover img {
	transform: scale(1.06);
}
.dpg.dpg-hover-lift .dpg-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--dpg-card-shadow-hover);
}
.dpg.dpg-hover-overlay .dpg-card .dpg-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 28, 48, 0.0);
	transition: background var(--dpg-transition);
	z-index: 1;
}
.dpg.dpg-hover-overlay .dpg-card:hover .dpg-card-media::after {
	background: rgba(20, 28, 48, 0.28);
}

/* -------------------------------------------------------------------------
 * Education / Featured Magazine preset
 * Even grid of equal, centred cards: image · CATEGORY | Month Year · title ·
 * excerpt · navy "Learn more" pill. (Matches texascensus.org/education.)
 * ---------------------------------------------------------------------- */
.dpg.dpg-style-education .dpg-grid {
	gap: var(--dpg-edu-gap);
}
.dpg.dpg-style-education .dpg-card {
	background: var(--dpg-card-bg);
	box-shadow: 0 4px 18px rgba(18, 22, 33, 0.07);
}
.dpg .dpg-card--education .dpg-edu-link {
	display: flex;
	flex-direction: column;
	/* Link hugs its content (no grow) so the media/title heights stay
	 * consistent across cards; growing it (flex:1) distorted the alignment. */
	flex: 0 1 auto;
	text-decoration: none;
	color: inherit;
}
.dpg .dpg-edu-media {
	display: block;
	position: relative;
	aspect-ratio: var(--dpg-edu-ratio);
	overflow: hidden;
	background: #eef1f6;
}
.dpg .dpg-edu-body {
	position: relative; /* containing block for the cover link */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 28px var(--dpg-edu-pad) 30px;
	flex: 1 1 auto;
	text-align: center;
}
.dpg .dpg-edu-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.dpg .dpg-edu-cat {
	color: var(--dpg-edu-cat);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.dpg .dpg-edu-sep {
	color: var(--dpg-edu-muted);
	opacity: 0.6;
}
.dpg .dpg-edu-date {
	color: var(--dpg-edu-muted);
}
.dpg .dpg-edu-title {
	margin: 0;
	font-size: 1.45rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--dpg-edu-title);
}
.dpg .dpg-edu-excerpt {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--dpg-muted);
}
.dpg .dpg-edu-btn {
	display: inline-block;
	margin-top: auto; /* pin the button to the bottom; content stays top-aligned */
	padding: 8px 24px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dpg-edu-btn-text);
	background: var(--dpg-edu-btn-bg);
	border-radius: var(--dpg-edu-btn-radius);
	transition: filter var(--dpg-transition), transform var(--dpg-transition);
}
.dpg .dpg-card--education:hover .dpg-edu-btn {
	filter: brightness(1.12);
}
.dpg.dpg-style-education.dpg-hover-zoom .dpg-card--education:hover .dpg-img,
.dpg.dpg-style-education.dpg-hover-zoom .dpg-card--education:hover img {
	transform: scale(1.05);
}

/* -------------------------------------------------------------------------
 * Carousel mode
 * ---------------------------------------------------------------------- */
.dpg .dpg-carousel {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}
.dpg .dpg-carousel .dpg-card {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (var(--dpg-columns) - 1) * var(--dpg-gap)) / var(--dpg-columns));
}

/* -------------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */
.dpg .dpg-pagination {
	margin-top: 28px;
	text-align: center;
}
.dpg .dpg-pagination--numbered ul {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dpg .dpg-pagination--numbered a,
.dpg .dpg-pagination--numbered span {
	display: inline-block;
	min-width: 38px;
	padding: 8px 12px;
	border: 1px solid var(--dpg-border);
	border-radius: 6px;
	text-decoration: none;
	color: var(--dpg-text);
}
.dpg .dpg-pagination--numbered .current {
	background: var(--dpg-accent);
	border-color: var(--dpg-accent);
	color: #fff;
}
.dpg .dpg-loadmore-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 28px;
	font-size: 0.92rem;
	font-weight: 600;
	color: #fff;
	background: var(--dpg-accent);
	border: 0;
	border-radius: var(--dpg-pill-radius);
	cursor: pointer;
	transition: filter var(--dpg-transition), opacity var(--dpg-transition);
}
.dpg .dpg-loadmore-btn:hover {
	filter: brightness(1.06);
}
.dpg .dpg-loadmore-btn[hidden] {
	display: none;
}
.dpg .dpg-loadmore-btn.is-loading {
	opacity: 0.7;
	pointer-events: none;
}
.dpg .dpg-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: dpg-spin 0.7s linear infinite;
}
.dpg .dpg-loadmore-btn.is-loading .dpg-spinner {
	display: inline-block;
}

.dpg .dpg-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--dpg-muted);
	font-size: 1rem;
}

/* -------------------------------------------------------------------------
 * Filter bar (compact dark rounded default; colours are themeable via the
 * --dpg-bar-* / --dpg-pill-* scoped variables — change one block to restyle).
 * ---------------------------------------------------------------------- */
.dpg .dpg-filter-bar {
	margin: 0 0 22px;
}
.dpg .dpg-filter-inner {
	padding: 14px 16px;
	background: var(--dpg-bar-bg);
	border-radius: var(--dpg-bar-radius);
}
/* Clear sits on its own line, above the filters. */
.dpg .dpg-filter-top {
	display: flex;
	justify-content: flex-end;
}
.dpg .dpg-filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}
/* Every field gets the same fixed width so dropdowns and search stay equal. */
.dpg .dpg-filter-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 0 0 var(--dpg-field-width);
	width: var(--dpg-field-width);
	min-width: 0;
}
/* Right-align the search (and the Apply button that follows it). */
.dpg .dpg-filter-group--search {
	margin-left: auto;
}
/* The Apply button hugs its content rather than taking a full field width. */
.dpg .dpg-filter-group--apply {
	flex: 0 0 auto;
	width: auto;
	justify-content: flex-end;
}
.dpg .dpg-filter-label {
	font-size: 0.66rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--dpg-bar-muted);
}
/* Colour swatch that ties a filter to its pills. */
.dpg .dpg-filter-swatch {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	margin-right: 6px;
	vertical-align: middle;
}
/* -------------------------------------------------------------------------
 * Multi-select taxonomy control (<details> + checkboxes; no-JS friendly)
 * ---------------------------------------------------------------------- */
.dpg .dpg-ms {
	position: relative;
	width: 100%;
}
.dpg .dpg-ms-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 10px 30px 10px 13px;
	font-size: 0.82rem;
	line-height: 1.3;
	color: var(--dpg-pill-text);
	background: var(--dpg-pill-bg);
	border: 1px solid var(--dpg-pill-border);
	border-radius: var(--dpg-pill-radius);
	cursor: pointer;
	list-style: none;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
}
/* Remove the native disclosure marker. */
.dpg .dpg-ms-toggle::-webkit-details-marker {
	display: none;
}
.dpg .dpg-ms-toggle::marker {
	content: "";
}
.dpg .dpg-ms-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dpg .dpg-ms-caret {
	position: absolute;
	right: 13px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 2px solid var(--dpg-bar-muted);
	border-bottom: 2px solid var(--dpg-bar-muted);
	transform: rotate(45deg);
	transition: transform var(--dpg-transition);
	pointer-events: none;
}
.dpg .dpg-ms[open] .dpg-ms-caret {
	transform: rotate(-135deg);
	margin-top: -2px;
}
.dpg .dpg-ms-toggle:focus-visible {
	outline: 2px solid var(--dpg-bar-accent);
	outline-offset: 1px;
}
.dpg .dpg-ms.has-selection .dpg-ms-toggle {
	border-color: var(--dpg-bar-accent);
}
.dpg .dpg-ms-panel {
	position: absolute;
	z-index: 9999;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 260px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px;
	background: var(--dpg-pill-bg);
	border: 1px solid var(--dpg-pill-border);
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(10, 13, 20, 0.28);
}
.dpg .dpg-ms-option {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 9px;
	font-size: 0.82rem;
	color: var(--dpg-pill-text);
	border-radius: 8px;
	cursor: pointer;
	white-space: normal;
}
.dpg .dpg-ms-option:hover {
	background: rgba(255, 255, 255, 0.08);
}
.dpg .dpg-ms-option input[type="checkbox"],
.dpg .dpg-ms-option input[type="radio"] {
	width: 15px;
	height: 15px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--dpg-bar-accent);
	cursor: pointer;
}
.dpg .dpg-ms-option-label {
	line-height: 1.35;
}
.dpg .dpg-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.dpg .dpg-search-input {
	width: 100%;
	min-width: 170px;
	padding: 10px !important;
	padding-right: 40px !important; /* room for the magnifier button */
	font-size: 0.82rem !important;
	/* Use the configurable field vars (with !important so they beat theme CSS)
	 * so the "Field background/text color" controls actually drive this input. */
	color: var(--dpg-pill-text) !important;
	background: var(--dpg-pill-bg) !important;
	border: 1px solid var(--dpg-pill-border) !important;
	border-radius: var(--dpg-pill-radius) !important;
}
.dpg .dpg-search-input::placeholder {
	color: var(--dpg-bar-muted);
	opacity: 0.85;
}
.dpg .dpg-search-input:focus-visible {
	outline: 2px solid var(--dpg-bar-accent);
	outline-offset: 1px;
}
/* High-specificity selector so the in-field submit button survives conflicting
 * theme button styles. */
body .dpg .dpg-filter-bar .dpg-filter-row .dpg-search-input + button[type="submit"].dpg-search-btn {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-height: 0;
	margin: 0;
	padding: 0 !important;
	color: var(--dpg-pill-text);
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 50% !important;
	cursor: pointer;
}
body .dpg .dpg-filter-bar .dpg-filter-row .dpg-search-input + button[type="submit"].dpg-search-btn:hover {
	color: var(--dpg-bar-accent);
	background: transparent;
}
.dpg .dpg-filter-apply {
	padding: 10px 18px;
	font-size: 0.8rem;
	font-weight: 600;
	color: #fff;
	background: var(--dpg-bar-accent);
	border: 1px solid var(--dpg-bar-accent);
	border-radius: var(--dpg-pill-radius);
	cursor: pointer;
}
/* Small underlined "Clear" link on its own line. */
.dpg .dpg-filter-reset {
	padding: 2px 4px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dpg-bar-muted);
	background: transparent;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.dpg .dpg-filter-reset:hover {
	color: var(--dpg-bar-text);
}

/* -------------------------------------------------------------------------
 * Content alignment (content_align attribute → .dpg-align-* on the instance)
 * ---------------------------------------------------------------------- */
.dpg.dpg-align-left .dpg-card-body,
.dpg.dpg-align-left .dpg-edu-body,
.dpg.dpg-align-left .dpg-card-overlay-body {
	text-align: left;
	align-items: flex-start;
}
.dpg.dpg-align-center .dpg-card-body,
.dpg.dpg-align-center .dpg-edu-body,
.dpg.dpg-align-center .dpg-card-overlay-body {
	text-align: center;
	align-items: center;
}
.dpg.dpg-align-right .dpg-card-body,
.dpg.dpg-align-right .dpg-edu-body,
.dpg.dpg-align-right .dpg-card-overlay-body {
	text-align: right;
	align-items: flex-end;
}
/* Flex rows follow the chosen alignment. */
.dpg.dpg-align-left .dpg-edu-meta,
.dpg.dpg-align-left .dpg-card-meta,
.dpg.dpg-align-left .dpg-tax-legend,
.dpg.dpg-align-left .dpg-tax-pills {
	justify-content: flex-start;
}
.dpg.dpg-align-center .dpg-edu-meta,
.dpg.dpg-align-center .dpg-card-meta,
.dpg.dpg-align-center .dpg-tax-legend,
.dpg.dpg-align-center .dpg-tax-pills {
	justify-content: center;
}
.dpg.dpg-align-right .dpg-edu-meta,
.dpg.dpg-align-right .dpg-card-meta,
.dpg.dpg-align-right .dpg-tax-legend,
.dpg.dpg-align-right .dpg-tax-pills {
	justify-content: flex-end;
}
/* Self-aligned elements (term badge, read-more). */
.dpg.dpg-align-left .dpg-term-badge,
.dpg.dpg-align-left .dpg-card-readmore {
	align-self: flex-start;
}
.dpg.dpg-align-center .dpg-term-badge,
.dpg.dpg-align-center .dpg-card-readmore {
	align-self: center;
}
.dpg.dpg-align-right .dpg-term-badge,
.dpg.dpg-align-right .dpg-card-readmore {
	align-self: flex-end;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.dpg .dpg-grid {
		grid-template-columns: repeat(var(--dpg-columns-tablet), minmax(0, 1fr));
	}
	.dpg.dpg-style-magazine .dpg-card--featured {
		grid-column: span 2;
	}
}

@media (max-width: 680px) {
	.dpg .dpg-grid {
		grid-template-columns: repeat(var(--dpg-columns-mobile), minmax(0, 1fr));
	}
	.dpg.dpg-style-magazine .dpg-card--featured {
		grid-column: 1 / -1;
	}
	.dpg.dpg-style-magazine .dpg-card--featured .dpg-card-title {
		font-size: 1.4rem;
	}
	.dpg .dpg-filter-row {
		flex-direction: column;
		align-items: stretch;
	}
	.dpg .dpg-filter-group,
	.dpg .dpg-filter-group--search,
	.dpg .dpg-filter-group--apply {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		margin-left: 0;
	}
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.dpg * {
		transition: none !important;
		animation: none !important;
	}
}