/*!
 * MP Foundry – structural styles.
 *
 * Design tokens are CSS custom properties (overridden from Settings → Styling).
 * Typography is inherited from the theme unless --mpf-font-* is set.
 * Class names are a documented contract: mpf-block, mpf-module, mpf-card, mpf-filter, …
 */

:root {
	--mpf-color-primary: #bc204b;
	--mpf-color-secondary: #b4521b;
	--mpf-color-accent: #1f7a8c;
	/* Text follows the theme: currentColor is the color of the text around the
	   block, and muted text is that color faded. Settings → Styling can set both. */
	--mpf-color-text: currentColor;
	--mpf-color-muted: color-mix(in srgb, currentColor 65%, transparent);
	--mpf-color-surface: #ffffff;
	--mpf-color-border: #e2e6ea;
	--mpf-color-surface-alt: #f6f7f9;
	--mpf-radius-card: 0.5rem;
	--mpf-radius-control: 0.375rem;
	--mpf-space-xs: 0.25rem;
	--mpf-space-sm: 0.5rem;
	--mpf-space-md: 1rem;
	--mpf-space-lg: 1.5rem;
	--mpf-space-xl: 2.5rem;
	--mpf-font-heading: inherit;
	--mpf-font-body: inherit;
	/* The block's base text size; everything inside is sized in em from it. */
	--mpf-font-size: 16px;
	/* Text sizes (mpf-style-text-*), relative to the text around them. */
	--mpf-text-xs: 0.75em;
	--mpf-text-sm: 0.875em;
	--mpf-text-lg: 1.125em;
	--mpf-text-xl: 1.25em;
	--mpf-text-2xl: 1.5em;
	--mpf-text-3xl: 1.875em;
	--mpf-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
	--mpf-shadow-card-hover: 0 4px 12px rgba(16, 24, 40, 0.12);
	--mpf-transition: 150ms ease;
}

/* ---------- Block & layout ---------- */

.mpf-block {
	font-family: var(--mpf-font-body);
	font-size: var(--mpf-font-size);
	color: var(--mpf-color-text);
	box-sizing: border-box;
}

.mpf-block *,
.mpf-block *::before,
.mpf-block *::after {
	box-sizing: inherit;
}

.mpf-block h1,
.mpf-block h2,
.mpf-block h3,
.mpf-block h4,
.mpf-block h5,
.mpf-block h6 {
	font-family: var(--mpf-font-heading);
	margin: 0;
}

.mpf-row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--mpf-space-lg);
	margin-bottom: var(--mpf-space-lg);
}

.mpf-row:last-child {
	margin-bottom: 0;
}

@media (max-width: 781px) {
	.mpf-col--mobile-first { order: -1; }
}

.mpf-row--align-center { align-items: center; }
.mpf-row--align-end { align-items: end; }

.mpf-col { grid-column: span 12; min-width: 0; }

@media (min-width: 782px) {
	.mpf-col--1 { grid-column: span 1; }
	.mpf-col--2 { grid-column: span 2; }
	.mpf-col--3 { grid-column: span 3; }
	.mpf-col--4 { grid-column: span 4; }
	.mpf-col--5 { grid-column: span 5; }
	.mpf-col--6 { grid-column: span 6; }
	.mpf-col--7 { grid-column: span 7; }
	.mpf-col--8 { grid-column: span 8; }
	.mpf-col--9 { grid-column: span 9; }
	.mpf-col--10 { grid-column: span 10; }
	.mpf-col--11 { grid-column: span 11; }
	.mpf-col--12 { grid-column: span 12; }
}

.mpf-module + .mpf-module { margin-top: var(--mpf-space-lg); }

.mpf-align-center { text-align: center; }
.mpf-align-right { text-align: right; }

/* ---------- Components ---------- */

.mpf-heading { line-height: 1.25; }
/* The headings the plugin prints have no theme margins; modules space themselves.
   :not(#mpf) lends the rule an id's weight, so a theme rule as specific as Sydney's
   `body:not(.a):not(.b):not(.c) .entry-content h3 { margin-top: 1.2em }` loses. */
.mpf-block :is(.mpf-heading, .mpf-hero__heading, .mpf-agenda__heading, .mpf-calendar__heading, .mpf-detail__section-title):not(#mpf) {
	font-family: var(--mpf-font-heading);
	margin: 0;
}
/* Headings inside records (card titles, agenda and map entries, detail fields)
   are the plugin's own typography: sized from the block's text, not the theme's
   document headings, which run from 24px to 40px for an h3 across themes and
   overwhelm a card, and clear of the theme's heading font, weight, spacing and
   capitalisation. A heading module keeps the theme's look: it titles a section
   of the page. */
.mpf-block .mpf-component.mpf-heading:not(#mpf) {
	font-family: var(--mpf-font-heading);
	font-size: var(--mpf-heading-size, 1.25em);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-wrap: pretty;
	margin: 0;
}
h1.mpf-component.mpf-heading { --mpf-heading-size: 2em; }
h2.mpf-component.mpf-heading { --mpf-heading-size: 1.5em; }
h3.mpf-component.mpf-heading { --mpf-heading-size: 1.25em; }
h4.mpf-component.mpf-heading { --mpf-heading-size: 1.125em; }
h5.mpf-component.mpf-heading { --mpf-heading-size: 1em; }
h6.mpf-component.mpf-heading { --mpf-heading-size: 0.875em; }
/* Some themes space paragraphs with padding rather than margin. */
.mpf-text { margin: 0; padding-bottom: 0; }
.mpf-text + .mpf-text { margin-top: var(--mpf-space-sm); }
.mpf-text p:last-child { margin-bottom: 0; padding-bottom: 0; }
/* A quote in a text module. Zero specificity (:where), so a theme that styles
   blockquote itself wins; block themes style only their own quote block. */
:where(.mpf-text) blockquote {
	margin: var(--mpf-space-md) 0;
	padding: var(--mpf-space-xs) 0 var(--mpf-space-xs) var(--mpf-space-md);
	border-left: 3px solid var(--mpf-color-border);
	font-style: italic;
}
:where(.mpf-text blockquote) p { margin: 0; }

.mpf-pill {
	display: inline-block;
	vertical-align: middle;
	padding: 0.15em 0.65em;
	border-radius: 999px;
	background: var(--mpf-color-surface-alt);
	color: var(--mpf-color-muted);
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.6;
	margin-right: var(--mpf-space-xs);
	/* Only as wide as its label, so a pill in a card body, agenda row or other
	   column layout is not stretched to the full width. */
	width: fit-content;
	max-width: 100%;
	/* One line; a label too long for its card ends with an ellipsis. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Pill colors. Semantic colors are CSS variables so a theme can override them. */
:root {
	--mpf-color-success: #1f7a44;
	--mpf-color-warning: #946108;
	--mpf-color-danger: #b32d2e;
	--mpf-color-info: #1d4f91;
}

.mpf-pill--primary { --mpf-pill-color: var(--mpf-color-primary); background: var(--mpf-color-primary); color: #fff; }
.mpf-pill--secondary { --mpf-pill-color: var(--mpf-color-secondary); background: var(--mpf-color-secondary); color: #fff; }
.mpf-pill--accent { --mpf-pill-color: var(--mpf-color-accent); background: var(--mpf-color-accent); color: #fff; }
.mpf-pill--success { --mpf-pill-color: var(--mpf-color-success); background: var(--mpf-color-success); color: #fff; }
.mpf-pill--warning { --mpf-pill-color: var(--mpf-color-warning); background: var(--mpf-color-warning); color: #fff; }
.mpf-pill--danger { --mpf-pill-color: var(--mpf-color-danger); background: var(--mpf-color-danger); color: #fff; }
.mpf-pill--info { --mpf-pill-color: var(--mpf-color-info); background: var(--mpf-color-info); color: #fff; }
.mpf-pill--neutral { --mpf-pill-color: var(--mpf-color-muted); background: var(--mpf-color-surface-alt); color: var(--mpf-color-text); }

/* Outline pills: no fill, with the color as text, icon and border. An inset shadow keeps the size of a solid pill. */
.mpf-pill.mpf-pill--outline {
	background: transparent;
	color: var(--mpf-pill-color, var(--mpf-pill-outline-color, var(--mpf-color-muted)));
	box-shadow: inset 0 0 0 1px currentColor;
}

.mpf-date,
.mpf-date-range {
	display: inline-block;
	color: var(--mpf-color-muted);
	font-size: 0.9em;
}

.mpf-field { display: flex; flex-direction: column; gap: 0.15em; }
.mpf-field__label {
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--mpf-color-muted);
	font-weight: 600;
}

/* Width goes through --mpf-image-width so one strong rule can beat theme image
   rules such as `.row .col img:not([srcset]) { width: auto }`; contexts below
   change the variable, not the width. */
.mpf-image {
	--mpf-image-width: 100%;
	display: block;
	height: auto;
	object-fit: cover;
	border-radius: calc(var(--mpf-radius-card) - 2px);
}
.mpf-block .mpf-module img.mpf-component.mpf-image { width: var(--mpf-image-width); }
/* Beside other items in a row, an image is a thumbnail. */
.mpf-group--row > .mpf-image,
.mpf-group--inline > .mpf-image { --mpf-image-width: 6rem; flex: 0 0 auto; }
/* Text beside a thumbnail wraps next to it instead of dropping below it. */
.mpf-group--row:has(> .mpf-image) { flex-wrap: nowrap; }
.mpf-group--row:has(> .mpf-image) > :not(.mpf-image) { min-width: 0; }

/* Aspect ratios are set inline (style="aspect-ratio: 9 / 16"); these classes are hooks. */
.mpf-image--square { aspect-ratio: 1 / 1; }
.mpf-image--video { aspect-ratio: 16 / 9; }
.mpf-image--wide { aspect-ratio: 3 / 1; }

.mpf-button {
	display: inline-block;
	padding: 0.6em 1.1em;
	border-radius: var(--mpf-radius-control);
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 0.95em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--mpf-transition), color var(--mpf-transition), border-color var(--mpf-transition);
	position: relative;
	z-index: 2;
}

/* Theme rules for buttons and links (`button { text-transform: uppercase; letter-spacing: 2px }`,
   `.entry-content a { text-decoration: underline }`) stop at the plugin's buttons. */
.mpf-block .mpf-button,
.mpf-block .mpf-carousel__arrow,
.mpf-block .mpf-map__locate { font-family: inherit; text-transform: none; letter-spacing: normal; text-shadow: none; }
.mpf-block .mpf-button { text-decoration: none; }

.mpf-button--primary { background: var(--mpf-color-primary); color: #fff; }
.mpf-button--primary:hover,
.mpf-button--primary:focus-visible { background: color-mix(in srgb, var(--mpf-color-primary) 85%, #000); color: #fff; }
.mpf-button--secondary { background: var(--mpf-color-secondary); color: #fff; }
.mpf-button--outline { background: transparent; color: var(--mpf-color-primary); border-color: currentColor; }
.mpf-button--ghost { background: transparent; color: var(--mpf-color-muted); }
.mpf-button--ghost:hover { color: inherit; }
/* A visible keyboard focus ring on every button and link, whatever their colour. */
.mpf-button:focus-visible { outline: 2px solid var(--mpf-color-accent); outline-offset: 2px; }

/* Links take the theme's link color; a color on the component sets it inline. */
.mpf-link { text-decoration: underline; position: relative; z-index: 2; }
.mpf-link:focus-visible { outline: 2px solid var(--mpf-color-accent); outline-offset: 2px; border-radius: 2px; }

.mpf-address { font-style: normal; display: flex; flex-direction: column; }
.mpf-divider { border: 0; border-top: 1px solid var(--mpf-color-border); margin: var(--mpf-space-lg) 0; }
/* Groups wrap child components. Default is normal block flow; opt into flex layouts. */
.mpf-group { display: block; }
.mpf-group--row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mpf-space-xs) var(--mpf-space-sm); }
.mpf-group--stack { display: flex; flex-direction: column; gap: var(--mpf-space-sm); }
.mpf-group--inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--mpf-space-xs); }
.mpf-block ul.mpf-repeater,
.mpf-block ol.mpf-repeater { list-style: none; margin: 0; padding: 0; }
.mpf-repeater__item { min-width: 0; }
.mpf-repeater__empty { margin: 0; color: var(--mpf-color-muted); }
/*
 * Group placement. justify is horizontal and align is vertical in every layout, so a
 * stack swaps the flex properties. Three classes so an explicit choice beats .mpf-style-center.
 */
.mpf-group.mpf-group--block.mpf-group--justify-start { text-align: start; }
.mpf-group.mpf-group--block.mpf-group--justify-center { text-align: center; }
.mpf-group.mpf-group--block.mpf-group--justify-end { text-align: end; }
.mpf-group.mpf-group--row.mpf-group--justify-start,
.mpf-group.mpf-group--inline.mpf-group--justify-start { justify-content: flex-start; }
.mpf-group.mpf-group--row.mpf-group--justify-center,
.mpf-group.mpf-group--inline.mpf-group--justify-center { justify-content: center; }
.mpf-group.mpf-group--row.mpf-group--justify-end,
.mpf-group.mpf-group--inline.mpf-group--justify-end { justify-content: flex-end; }
.mpf-group.mpf-group--row.mpf-group--justify-between,
.mpf-group.mpf-group--inline.mpf-group--justify-between { justify-content: space-between; }
.mpf-group.mpf-group--stack.mpf-group--justify-start { align-items: flex-start; text-align: start; }
.mpf-group.mpf-group--stack.mpf-group--justify-center { align-items: center; text-align: center; }
.mpf-group.mpf-group--stack.mpf-group--justify-end { align-items: flex-end; text-align: end; }
.mpf-group--row.mpf-group--align-start,
.mpf-group--inline.mpf-group--align-start { align-items: flex-start; }
.mpf-group--row.mpf-group--align-center,
.mpf-group--inline.mpf-group--align-center { align-items: center; }
.mpf-group--row.mpf-group--align-end,
.mpf-group--inline.mpf-group--align-end { align-items: flex-end; }
.mpf-group--row.mpf-group--align-baseline,
.mpf-group--inline.mpf-group--align-baseline { align-items: baseline; }
.mpf-group--stack.mpf-group--align-center { justify-content: center; }
.mpf-group--stack.mpf-group--align-end { justify-content: flex-end; }
.mpf-group.mpf-group--gap-none { gap: 0; }
.mpf-group.mpf-group--gap-xs { gap: var(--mpf-space-xs); }
.mpf-group.mpf-group--gap-sm { gap: var(--mpf-space-sm); }
.mpf-group.mpf-group--gap-md { gap: var(--mpf-space-md); }
.mpf-group.mpf-group--gap-lg { gap: var(--mpf-space-lg); }
/* Pills in a row group shed their right margin; the gap handles spacing. */
.mpf-group--row > .mpf-pill,
.mpf-group--inline > .mpf-pill { margin-right: 0; }
/* Flex groups space children with gap, so text drops its paragraph margin. */
.mpf-group--row > .mpf-text,
.mpf-group--stack > .mpf-text,
.mpf-group--inline > .mpf-text { margin-top: 0; }

/* ---------- Icons (Font Awesome) ----------
   Icons are <i class="mpf-icon fa-…">; an SVG kit swaps each for an <svg> with the
   same classes. They take the text colour and size of what they sit in, scaled
   by a size class (Icon::SIZES, at Font Awesome 6's scale).

   Themes often restyle every Font Awesome icon (`i[class*="fa-"] { font-size;
   vertical-align }`), so the plugin sets an icon's size, line height and
   alignment itself, three selectors deep. The size classes set variables, so
   they win whatever their specificity. An SVG icon keeps Font Awesome's own
   alignment. */

.mpf-block .mpf-icon[class*="fa-"] {
	font-size: var(--mpf-icon-size, 1em);
	line-height: var(--mpf-icon-line-height, 1);
	vertical-align: var(--mpf-icon-align, baseline);
}
.mpf-block svg.mpf-icon[class*="fa-"] { vertical-align: var(--mpf-icon-align, -0.125em); }

.mpf-icon--before { margin-inline-end: 0.4em; }
.mpf-icon--after { margin-inline-start: 0.4em; }
.mpf-icon-wrap { display: inline-block; }
.mpf-icon-wrap--date { color: var(--mpf-color-muted); font-size: 0.9em; }
.mpf-icon-wrap--date > .mpf-date,
.mpf-icon-wrap--date > .mpf-date-range { font-size: inherit; color: inherit; }
.mpf-icon--2xs { --mpf-icon-size: 0.625em; --mpf-icon-line-height: 0.1em; --mpf-icon-align: 0.225em; }
.mpf-icon--xs { --mpf-icon-size: 0.75em; --mpf-icon-line-height: 0.08333em; --mpf-icon-align: 0.125em; }
.mpf-icon--sm { --mpf-icon-size: 0.875em; --mpf-icon-line-height: 0.07143em; --mpf-icon-align: 0.05357em; }
.mpf-icon--lg { --mpf-icon-size: 1.25em; --mpf-icon-line-height: 0.05em; --mpf-icon-align: -0.075em; }
.mpf-icon--xl { --mpf-icon-size: 1.5em; --mpf-icon-line-height: 0.04167em; --mpf-icon-align: -0.125em; }
.mpf-icon--2xl { --mpf-icon-size: 2em; --mpf-icon-line-height: 0.03125em; --mpf-icon-align: -0.1875em; }
.mpf-icon--2x { --mpf-icon-size: 2em; }
.mpf-icon--3x { --mpf-icon-size: 3em; }
.mpf-icon--4x { --mpf-icon-size: 4em; }
.mpf-icon--5x { --mpf-icon-size: 5em; }
/* The same sizes and alignment for an icon without the variables (no Font Awesome class). */
.mpf-icon.mpf-icon--2xs, .mpf-icon.mpf-icon--xs, .mpf-icon.mpf-icon--sm, .mpf-icon.mpf-icon--lg, .mpf-icon.mpf-icon--xl, .mpf-icon.mpf-icon--2xl,
.mpf-icon.mpf-icon--2x, .mpf-icon.mpf-icon--3x, .mpf-icon.mpf-icon--4x, .mpf-icon.mpf-icon--5x { font-size: var(--mpf-icon-size); line-height: var(--mpf-icon-line-height, 1); vertical-align: var(--mpf-icon-align, baseline); }

/* Text kept for screen readers when a pill, button or link shows only its icon. */
.mpf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mpf-pill--icon-only { min-width: 1.9em; padding-left: 0.45em; padding-right: 0.45em; text-align: center; }
.mpf-button--icon-only { min-width: 2.5em; padding-left: 0.7em; padding-right: 0.7em; text-align: center; }

.mpf-address--icon { flex-direction: row; align-items: flex-start; }
.mpf-address--icon > .mpf-icon { margin-top: 0.25em; color: var(--mpf-color-muted); }
.mpf-address__lines { display: flex; flex-direction: column; }

.mpf-divider--icon { display: flex; align-items: center; gap: var(--mpf-space-sm); border-top: 0; margin: var(--mpf-space-lg) 0; color: var(--mpf-color-muted); }
.mpf-divider--icon::before,
.mpf-divider--icon::after { content: ""; flex: 1; border-top: 1px solid var(--mpf-color-border); }

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

.mpf-card-grid__items,
.mpf-card-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mpf-card-grid__items {
	display: grid;
	gap: var(--mpf-space-lg);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.mpf-card-grid--gap-sm .mpf-card-grid__items { gap: var(--mpf-space-sm); }
.mpf-card-grid--gap-lg .mpf-card-grid__items { gap: var(--mpf-space-xl); }

/* Columns follow the grid's own width (not the window's), so a narrow theme
   content area gets fewer, readable cards instead of squeezed ones. */
.mpf-card-grid { container-type: inline-size; }

@container (min-width: 480px) {
	.mpf-card-grid--cols-2 .mpf-card-grid__items,
	.mpf-card-grid--cols-3 .mpf-card-grid__items,
	.mpf-card-grid--cols-4 .mpf-card-grid__items,
	.mpf-card-grid--cols-5 .mpf-card-grid__items,
	.mpf-card-grid--cols-6 .mpf-card-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 720px) {
	.mpf-card-grid--cols-3 .mpf-card-grid__items,
	.mpf-card-grid--cols-4 .mpf-card-grid__items,
	.mpf-card-grid--cols-5 .mpf-card-grid__items,
	.mpf-card-grid--cols-6 .mpf-card-grid__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (min-width: 960px) {
	.mpf-card-grid--cols-4 .mpf-card-grid__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mpf-card-grid--cols-5 .mpf-card-grid__items,
	.mpf-card-grid--cols-6 .mpf-card-grid__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container (min-width: 1200px) {
	.mpf-card-grid--cols-5 .mpf-card-grid__items { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.mpf-card-grid--cols-6 .mpf-card-grid__items { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.mpf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mpf-color-surface);
	border: 1px solid var(--mpf-color-border);
	border-radius: var(--mpf-radius-card);
	box-shadow: var(--mpf-shadow-card);
	overflow: hidden;
	transition: box-shadow var(--mpf-transition), transform var(--mpf-transition);
}

.mpf-card-grid--equal .mpf-card { height: 100%; }

.mpf-card:has(.mpf-card__link):hover,
.mpf-card:has(.mpf-card__link:focus-visible) {
	box-shadow: var(--mpf-shadow-card-hover);
	transform: translateY(-2px);
}

/* Divided list rows don't lift; they tint. */
.mpf-card-list--dividers .mpf-card:has(.mpf-card__link):hover,
.mpf-card-list--dividers .mpf-card:has(.mpf-card__link:focus-visible) {
	box-shadow: none;
	transform: none;
	background: var(--mpf-color-surface-alt);
}

.mpf-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.mpf-card__link:focus-visible { outline: 2px solid var(--mpf-color-accent); outline-offset: 2px; }

.mpf-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mpf-space-sm);
	padding: var(--mpf-space-md);
	flex: 1;
}

.mpf-card__body > .mpf-image {
	margin: calc(-1 * var(--mpf-space-md)) calc(-1 * var(--mpf-space-md)) var(--mpf-space-xs);
	--mpf-image-width: calc(100% + 2 * var(--mpf-space-md));
	max-width: calc(100% + 2 * var(--mpf-space-md)) !important;
	border-radius: 0;
	aspect-ratio: 16 / 9;
}

.mpf-card__body > .mpf-button { align-self: flex-start; margin-top: auto; }

/* Card list */
.mpf-card-list__items { display: flex; flex-direction: column; gap: var(--mpf-space-md); }
.mpf-card-list--dividers .mpf-card--list { border-radius: 0; border-width: 0 0 1px; box-shadow: none; }
.mpf-card-list--dividers .mpf-card--list:last-child { border-bottom-width: 0; }
.mpf-card--list .mpf-card__body { display: grid; grid-template-columns: 1fr; gap: var(--mpf-space-sm) var(--mpf-space-md); }
.mpf-card--list .mpf-card__body > .mpf-image { margin: 0; --mpf-image-width: 100%; max-width: 100% !important; border-radius: calc(var(--mpf-radius-card) - 2px); aspect-ratio: 4 / 3; }

/* The side column appears only when an image sits directly in the card body (a
   fallback or static image counts; one inside a group does not). */
@media (min-width: 600px) {
	/* The last row takes up the image's extra height, so the text stays together at the top. */
	.mpf-card-list--image-left .mpf-card__body:has(> .mpf-image),
	.mpf-card-list--image-right .mpf-card__body:has(> .mpf-image) { grid-template-rows: repeat(5, auto) 1fr; align-content: start; }
	.mpf-card-list--image-left .mpf-card__body:has(> .mpf-image) { grid-template-columns: 200px 1fr; }
	.mpf-card-list--image-left .mpf-card__body > .mpf-image { grid-row: 1 / span 6; }
	.mpf-card-list--image-right .mpf-card__body:has(> .mpf-image) { grid-template-columns: 1fr 200px; }
	.mpf-card-list--image-right .mpf-card__body > .mpf-image { grid-column: 2; grid-row: 1 / span 6; }
}

.mpf-card-list--compact .mpf-card__body { padding: var(--mpf-space-sm) var(--mpf-space-md); }

/* Fixed card shape (settings.card_ratio, set inline): the card keeps its
   proportions instead of stretching to the row, and still grows rather than
   clipping when its content needs more room. */
.mpf-card.mpf-card--ratio {
	height: auto;
	min-height: auto;
	overflow: clip; /* Not a scroll container, so the ratio's automatic minimum height applies. */
	align-self: start;
}
.mpf-card--ratio .mpf-card__body { flex: 1 1 auto; }

/* Card background image (settings.background): the URL arrives in --mpf-card-bg. */
.mpf-card--bg {
	background-image: var(--mpf-card-bg);
	background-size: cover;
	background-position: center;
	min-height: 12rem;
}
.mpf-card--bg .mpf-card__body { position: relative; justify-content: flex-end; }
.mpf-card--bg-dark { color: #fff; border-color: transparent; --mpf-pill-outline-color: #fff; }
.mpf-card--bg-dark .mpf-card__body { background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.25)); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.mpf-card--bg-dark .mpf-pill { text-shadow: none; }
.mpf-card--bg-dark .mpf-heading,
.mpf-card--bg-dark .mpf-text,
.mpf-card--bg-dark .mpf-field__value,
.mpf-card--bg-dark .mpf-date,
.mpf-card--bg-dark .mpf-date-range,
.mpf-card--bg-dark .mpf-address,
.mpf-card--bg-dark .mpf-link { color: inherit; }
.mpf-card--bg-dark .mpf-field__label { color: rgba(255, 255, 255, 0.8); }
.mpf-card--bg-dark .mpf-pill:not([class*="mpf-pill--"]) { background: rgba(255, 255, 255, 0.2); color: #fff; }
.mpf-card--bg-light .mpf-card__body { background: linear-gradient(to top, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.55) 75%, rgba(255, 255, 255, 0.2)); }

/* ---------- Card carousel ---------- */

.mpf-carousel { position: relative; --mpf-carousel-gap: var(--mpf-space-lg); --mpf-carousel-view: 3; }
.mpf-carousel--gap-sm { --mpf-carousel-gap: var(--mpf-space-sm); }
.mpf-carousel--gap-lg { --mpf-carousel-gap: var(--mpf-space-xl); }
.mpf-carousel__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding: 2px 2px var(--mpf-space-sm);
}
.mpf-carousel__viewport:focus-visible { outline: 2px solid var(--mpf-color-accent); outline-offset: 2px; }
.mpf-carousel__track {
	display: flex;
	gap: var(--mpf-carousel-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}
/* A peek of the next card on phones says "swipe"; wider screens show per_view cards. */
.mpf-carousel__item {
	flex: 0 0 85%;
	scroll-snap-align: start;
}
.mpf-carousel--equal .mpf-carousel__track { align-items: stretch; }
.mpf-carousel:not(.mpf-carousel--equal) .mpf-carousel__track { align-items: flex-start; }
@media (min-width: 600px) {
	.mpf-carousel--view-2,
	.mpf-carousel--view-3,
	.mpf-carousel--view-4,
	.mpf-carousel--view-5,
	.mpf-carousel--view-6 { --mpf-carousel-view: 2; }
	.mpf-carousel--view-1 { --mpf-carousel-view: 1; }
	.mpf-carousel__item { flex-basis: calc((100% - (var(--mpf-carousel-view) - 1) * var(--mpf-carousel-gap)) / var(--mpf-carousel-view)); }
}
@media (min-width: 960px) {
	.mpf-carousel--view-3 { --mpf-carousel-view: 3; }
	.mpf-carousel--view-4 { --mpf-carousel-view: 4; }
	.mpf-carousel--view-5 { --mpf-carousel-view: 5; }
	.mpf-carousel--view-6 { --mpf-carousel-view: 6; }
}
.mpf-carousel__controls { display: flex; justify-content: flex-end; gap: var(--mpf-space-sm); margin-top: var(--mpf-space-sm); }
.mpf-carousel__controls[hidden] { display: none; }
.mpf-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1;
	border: 1px solid var(--mpf-color-border);
	border-radius: 999px;
	background: var(--mpf-color-surface);
	color: var(--mpf-color-text);
	box-shadow: var(--mpf-shadow-card);
	cursor: pointer;
	transition: background-color var(--mpf-transition), opacity var(--mpf-transition);
}
.mpf-carousel__arrow:hover:not(:disabled) { background: var(--mpf-color-surface-alt); }
.mpf-carousel__arrow:focus-visible { outline: 2px solid var(--mpf-color-accent); outline-offset: 2px; }
.mpf-carousel__arrow:disabled { opacity: 0.4; cursor: default; }
/* Touch screens swipe; the buttons are for mouse and trackpad users. */
@media (hover: none) and (pointer: coarse) {
	.mpf-carousel__controls { display: none; }
}

/* ---------- Agenda ---------- */

.mpf-agenda__groups,
.mpf-agenda__items { list-style: none; margin: 0; padding: 0; }
.mpf-agenda__group + .mpf-agenda__group { margin-top: var(--mpf-space-lg); }
.mpf-agenda__heading {
	font-size: 1rem;
	padding-bottom: var(--mpf-space-xs);
	margin-bottom: var(--mpf-space-sm) !important;
	border-bottom: 2px solid var(--mpf-color-primary);
}
.mpf-agenda__group--today .mpf-agenda__heading { color: var(--mpf-color-primary); }
/* The time column is as wide as the widest time in the list (subgrid), so a
   long time such as "10:00 am MST" never runs into the title. */
.mpf-agenda__items { display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.mpf-agenda__item {
	position: relative;
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: 7em minmax(0, 1fr);
	grid-template-columns: subgrid;
	gap: var(--mpf-space-md);
	padding: var(--mpf-space-sm) var(--mpf-space-xs);
	border-bottom: 1px solid var(--mpf-color-border);
}
.mpf-agenda__item:last-child { border-bottom: 0; }
.mpf-agenda__item:has(.mpf-agenda__link):hover { background: var(--mpf-color-surface-alt); }
.mpf-agenda__when { color: var(--mpf-color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mpf-agenda__body { display: flex; flex-direction: column; gap: var(--mpf-space-xs); min-width: 0; }
.mpf-agenda__link { position: absolute; inset: 0; z-index: 1; }
.mpf-agenda__link:focus-visible { outline: 2px solid var(--mpf-color-accent); outline-offset: -2px; }
.mpf-agenda--compact .mpf-agenda__item { padding-top: var(--mpf-space-xs); padding-bottom: var(--mpf-space-xs); }
.mpf-agenda__item:not(:has(.mpf-agenda__when)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 479px) {
	.mpf-agenda__item { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------- Calendar ---------- */

.mpf-calendar__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mpf-space-sm); margin-bottom: var(--mpf-space-sm); }
.mpf-calendar__nav { display: flex; gap: var(--mpf-space-xs); }
.mpf-calendar__prev,
.mpf-calendar__next { font-size: 1.25rem; line-height: 1; padding-left: 0.75em; padding-right: 0.75em; }
.mpf-calendar__legend { display: flex; flex-wrap: wrap; gap: var(--mpf-space-xs) var(--mpf-space-md); list-style: none; margin: 0 0 var(--mpf-space-sm); padding: 0; font-size: 0.875em; }
.mpf-calendar__key { display: inline-flex; align-items: center; gap: var(--mpf-space-xs); }
.mpf-calendar__swatch { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 3px; }
.mpf-calendar__weekdays,
.mpf-calendar__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mpf-calendar__weekday { padding: var(--mpf-space-xs); font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mpf-color-muted); text-align: center; }
.mpf-calendar__days { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mpf-color-border); border-left: 1px solid var(--mpf-color-border); }
.mpf-calendar__day { min-height: 6.5rem; padding: var(--mpf-space-xs); border-right: 1px solid var(--mpf-color-border); border-bottom: 1px solid var(--mpf-color-border); min-width: 0; }
.mpf-calendar__day--outside { background: var(--mpf-color-surface-alt); }
.mpf-calendar__day--outside .mpf-calendar__num { color: var(--mpf-color-muted); }
.mpf-calendar__date { display: block; margin-bottom: var(--mpf-space-xs); }
.mpf-calendar__num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75em; height: 1.75em; font-size: 0.875em; font-weight: 600; border-radius: 999px; }
.mpf-calendar__day--today .mpf-calendar__num { background: var(--mpf-color-primary); color: #fff; }
.mpf-calendar__full,
.mpf-calendar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mpf-calendar__events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mpf-calendar__event {
	--mpf-event-color: var(--mpf-color-accent);
	--mpf-event-text: #fff;
	position: relative;
	padding: 1px 6px;
	font-size: 0.8em;
	line-height: 1.35;
	border-radius: 4px;
	background: var(--mpf-event-color);
	color: var(--mpf-event-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mpf-calendar__event--continued { opacity: 0.8; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mpf-calendar__event:has(.mpf-calendar__link):hover { filter: brightness(0.92); }
.mpf-calendar__time { font-weight: 600; }
.mpf-calendar__link { position: absolute; inset: 0; z-index: 1; }
.mpf-calendar__link:focus-visible { outline: 2px solid var(--mpf-color-text); outline-offset: 1px; }
.mpf-calendar__empty { margin-top: var(--mpf-space-sm); }
.mpf-calendar__views { display: flex; gap: 2px; margin-right: auto; margin-left: var(--mpf-space-sm); }
.mpf-calendar__view.is-active { background: var(--mpf-color-surface-alt); font-weight: 600; }
.mpf-calendar__more { display: inline-block; margin-top: 2px; font-size: 0.8em; font-weight: 600; color: var(--mpf-color-muted); text-decoration: none; }
.mpf-calendar__more:hover,
.mpf-calendar__more:focus-visible { color: var(--mpf-color-text); text-decoration: underline; }
.mpf-calendar--week .mpf-calendar__day { min-height: 12rem; }
.mpf-calendar--week .mpf-calendar__event { white-space: normal; }
.mpf-add-to-calendar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--mpf-space-xs) var(--mpf-space-sm); }
.mpf-add-to-calendar__label { color: var(--mpf-color-muted); }

/* Progress (ProgressComponent): a label and figures above a bar. */
.mpf-progress { display: flex; flex-direction: column; gap: var(--mpf-space-xs); width: 100%; }
.mpf-progress__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--mpf-space-sm); }
.mpf-progress__label { font-weight: 600; }
.mpf-progress__stats { color: var(--mpf-color-muted); font-variant-numeric: tabular-nums; }
.mpf-progress__stat + .mpf-progress__stat::before { content: "\00b7"; margin: 0 0.4em; }
.mpf-progress__track { height: 0.625em; border-radius: 999px; background-color: var(--mpf-color-border); overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mpf-progress__bar { height: 100%; max-width: 100%; border-radius: inherit; background-color: var(--mpf-color-primary); transition: width var(--mpf-transition); }

/* Phones: a list of the days that have events. */
@media (max-width: 599px) {
	.mpf-calendar__weekdays { display: none; }
	.mpf-calendar__days { display: block; border: 0; }
	.mpf-calendar__day { display: none; min-height: 0; border: 0; border-bottom: 1px solid var(--mpf-color-border); padding: var(--mpf-space-sm) 0; }
	.mpf-calendar__day--busy:not(.mpf-calendar__day--outside) { display: block; }
	.mpf-calendar--week .mpf-calendar__day { display: block; min-height: 0; }
	.mpf-calendar__views { margin-left: 0; }
	.mpf-calendar__num { display: none; }
	.mpf-calendar__full { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-weight: 600; }
	.mpf-calendar__day--today .mpf-calendar__full { color: var(--mpf-color-primary); }
	.mpf-calendar__event { font-size: 0.9375em; padding: 4px 8px; white-space: normal; }
}

/* ---------- Map ---------- */

.mpf-map { display: grid; gap: var(--mpf-space-md); --mpf-map-height: 420px; }
.mpf-map--sm { --mpf-map-height: 300px; }
.mpf-map--lg { --mpf-map-height: 560px; }
.mpf-map__canvas {
	height: var(--mpf-map-height);
	min-height: 240px;
	border: 1px solid var(--mpf-color-border);
	border-radius: var(--mpf-radius-card);
	overflow: hidden;
	z-index: 0;
}
.mpf-map__canvas[hidden] { display: none; }
.mpf-map__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mpf-space-sm); }
.mpf-map__item {
	position: relative;
	padding: var(--mpf-space-sm) var(--mpf-space-md);
	border: 1px solid var(--mpf-color-border);
	border-radius: var(--mpf-radius-card);
	background: var(--mpf-color-surface);
}
.mpf-map__item:has(.mpf-map__link):hover { box-shadow: var(--mpf-shadow-card-hover); }
.mpf-map__body { display: flex; flex-direction: column; gap: var(--mpf-space-xs); }
.mpf-map__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mpf-map__link:focus-visible { outline: 2px solid var(--mpf-color-accent); outline-offset: 2px; }
.mpf-map__note { margin: 0; font-size: 0.85em; color: var(--mpf-color-muted); }
.mpf-map__locate {
	position: relative;
	z-index: 2;
	margin-top: var(--mpf-space-xs);
	padding: 0;
	border: 0;
	background: none;
	color: var(--mpf-color-primary);
	font: inherit;
	font-size: 0.85em;
	text-decoration: underline;
	cursor: pointer;
}
@media (min-width: 960px) {
	.mpf-map--ready.mpf-map--list-side { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; }
	.mpf-map--ready.mpf-map--list-side .mpf-map__list { max-height: var(--mpf-map-height); overflow-y: auto; padding-right: 2px; }
}
.mpf-map--ready.mpf-map--list-hidden .mpf-map__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mpf-map__marker { background: none; border: 0; }
.mpf-map__marker span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--mpf-color-primary);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
.mpf-map__marker b { transform: rotate(45deg); font-weight: inherit; }
.mpf-map__marker--fallback span { background: var(--mpf-color-accent); }
.mpf-map__popup { max-height: 260px; overflow-y: auto; font-family: var(--mpf-font-body); color: var(--mpf-color-text); }
.mpf-map__popup-item { position: relative; display: flex; flex-direction: column; gap: var(--mpf-space-xs); }
.mpf-map__popup-item + .mpf-map__popup-item { margin-top: var(--mpf-space-sm); padding-top: var(--mpf-space-sm); border-top: 1px solid var(--mpf-color-border); }
.mpf-map__popup .mpf-heading { font-size: 1rem; margin: 0; }
.mpf-map__popup .mpf-map__body { gap: 2px; }

/* Map pin (MapPinComponent): one place on a small map, with a caption below. */
.mpf-block .mpf-map-pin { display: flex; flex-direction: column; gap: var(--mpf-space-sm); width: 100%; margin: 0; --mpf-map-height: 300px; }
.mpf-map-pin--sm { --mpf-map-height: 200px; }
.mpf-map-pin--lg { --mpf-map-height: 420px; }
.mpf-map-pin__canvas {
	height: var(--mpf-map-height);
	border: 1px solid var(--mpf-color-border);
	border-radius: var(--mpf-radius-card);
	overflow: hidden;
	z-index: 0;
}
.mpf-map-pin__canvas[hidden] { display: none; }
.mpf-map-pin__caption { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mpf-space-xs); }
.mpf-map-pin__title { font-weight: 600; }
.mpf-map-pin__text { color: var(--mpf-color-muted); }
.mpf-map-pin__area { stroke: var(--mpf-color-primary); stroke-width: 2; fill: var(--mpf-color-primary); fill-opacity: 0.15; }

/* ---------- Table ---------- */

/* Element selectors in these rules outrank theme table styles such as `.main-content td`. */
.mpf-table__scroll { overflow-x: auto; }
.mpf-block table.mpf-table { width: 100%; border-collapse: collapse; border: 0; margin: 0; font-size: 0.9375em; line-height: 1.4; }
.mpf-block table.mpf-table th,
.mpf-block table.mpf-table td { text-align: left; padding: 0.5em 0.75em; border: 0; border-bottom: 1px solid var(--mpf-color-border); vertical-align: top; font-size: inherit; background: none; }
.mpf-block table.mpf-table th { font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mpf-color-muted); vertical-align: bottom; }
.mpf-block table.mpf-table tbody tr:last-child td { border-bottom: 0; }
.mpf-table caption { text-align: left; font-weight: 600; padding-bottom: var(--mpf-space-sm); }
.mpf-block table.mpf-table th .mpf-table__sort { display: inline-flex; align-items: center; gap: 0.35em; color: inherit; text-decoration: none; }
.mpf-block table.mpf-table th .mpf-table__sort:hover,
.mpf-block table.mpf-table th .mpf-table__sort:focus-visible { color: var(--mpf-color-text); text-decoration: underline; }
.mpf-table__sort-icon::after { content: "\2195"; opacity: 0.5; }
.mpf-block table.mpf-table th[aria-sort="ascending"] .mpf-table__sort-icon::after { content: "\2191"; opacity: 1; }
.mpf-block table.mpf-table th[aria-sort="descending"] .mpf-table__sort-icon::after { content: "\2193"; opacity: 1; }

@media (max-width: 599px) {
	.mpf-block table.mpf-table thead { display: none; }
	.mpf-block table.mpf-table tr { display: block; border-bottom: 1px solid var(--mpf-color-border); padding: var(--mpf-space-sm) 0; }
	.mpf-block table.mpf-table tbody tr:last-child { border-bottom: 0; }
	.mpf-block table.mpf-table td { display: flex; gap: var(--mpf-space-md); border: 0; padding: var(--mpf-space-xs) 0; }
	.mpf-block table.mpf-table td::before { content: attr(data-label); flex: 0 0 35%; font-weight: 600; color: var(--mpf-color-muted); }
}

/* ---------- Chart ---------- */

.mpf-chart__figure { margin: 0 0 var(--mpf-space-sm); }
.mpf-chart__title { font-weight: 600; margin-bottom: var(--mpf-space-xs); }
.mpf-chart__svg { display: block; width: 100%; height: auto; max-height: 26rem; font-family: var(--mpf-font-body); }
.mpf-chart--pie .mpf-chart__figure { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mpf-space-md); }
.mpf-chart--pie .mpf-chart__svg { flex: 0 1 16rem; max-width: 16rem; }
.mpf-chart__grid { stroke: var(--mpf-color-border); stroke-width: 1; }
.mpf-chart__axis { stroke: var(--mpf-color-muted); stroke-width: 1; }
.mpf-chart__tick,
.mpf-chart__label,
.mpf-chart__value { fill: var(--mpf-color-muted); font-size: 12px; }
.mpf-chart__value { fill: var(--mpf-color-text); font-weight: 600; }
.mpf-chart__bar { fill: var(--mpf-color-primary); transition: opacity var(--mpf-transition); }
.mpf-chart__bar:hover { opacity: 0.8; }
.mpf-chart__line { fill: none; stroke: var(--mpf-color-primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mpf-chart__area { fill: var(--mpf-color-primary); opacity: 0.08; }
.mpf-chart__dot { fill: var(--mpf-color-surface); stroke: var(--mpf-color-primary); stroke-width: 2.5; }
.mpf-chart__slice { stroke: var(--mpf-color-surface); stroke-width: 2; }
.mpf-chart__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mpf-space-xs); flex: 1 1 12rem; font-size: 0.875em; }
.mpf-chart__key { display: flex; align-items: center; gap: var(--mpf-space-xs); }
.mpf-chart__swatch { display: inline-block; flex: none; width: 0.8em; height: 0.8em; border-radius: 3px; }
.mpf-chart__key-value { margin-left: auto; color: var(--mpf-color-muted); }
.mpf-chart__table { margin-top: var(--mpf-space-sm); }

/* ---------- Filter bar ---------- */

.mpf-filter__form { display: flex; flex-direction: column; gap: var(--mpf-space-md); }
.mpf-filter__controls { display: flex; flex-wrap: wrap; gap: var(--mpf-space-md); }
.mpf-filter--stacked .mpf-filter__controls { flex-direction: column; }
.mpf-filter__control { display: flex; flex-direction: column; gap: var(--mpf-space-xs); min-width: 0; flex: 1 1 200px; }
.mpf-filter--stacked .mpf-filter__control { flex-basis: auto; }
/* Controls with a width sit on a 12-column grid, like layout columns; full-width on small screens. */
.mpf-filter--grid .mpf-filter__controls { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.mpf-filter--grid .mpf-filter__control { grid-column: span 12; }
.mpf-filter--grid .mpf-filter__control--checkbox { justify-content: end; }
@media (min-width: 782px) {
	.mpf-filter--grid .mpf-filter__control--span-1 { grid-column: span 1; }
	.mpf-filter--grid .mpf-filter__control--span-2 { grid-column: span 2; }
	.mpf-filter--grid .mpf-filter__control--span-3 { grid-column: span 3; }
	.mpf-filter--grid .mpf-filter__control--span-4 { grid-column: span 4; }
	.mpf-filter--grid .mpf-filter__control--span-5 { grid-column: span 5; }
	.mpf-filter--grid .mpf-filter__control--span-6 { grid-column: span 6; }
	.mpf-filter--grid .mpf-filter__control--span-7 { grid-column: span 7; }
	.mpf-filter--grid .mpf-filter__control--span-8 { grid-column: span 8; }
	.mpf-filter--grid .mpf-filter__control--span-9 { grid-column: span 9; }
	.mpf-filter--grid .mpf-filter__control--span-10 { grid-column: span 10; }
	.mpf-filter--grid .mpf-filter__control--span-11 { grid-column: span 11; }
	.mpf-filter--grid .mpf-filter__control--span-12 { grid-column: span 12; }
}
.mpf-filter__label { font-size: 0.85em; font-weight: 600; color: var(--mpf-color-muted); }

/* "More filters": controls behind a toggle (the script adds `mpf-js`; without it they stay shown). */
.mpf-filter__more { flex: 1 1 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--mpf-space-md); min-width: 0; }
.mpf-filter__more-body { display: flex; flex-wrap: wrap; gap: var(--mpf-space-md); align-self: stretch; }
.mpf-filter--stacked .mpf-filter__more-body { flex-direction: column; }
.mpf-filter .mpf-filter__more-toggle { display: none; }
.mpf-filter__more-toggle[aria-expanded="true"] { color: inherit; }
.mpf-filter__more-count { display: inline-block; min-width: 1.5em; margin-inline-start: 0.4em; padding: 0 0.4em; border-radius: 1em; background: var(--mpf-color-primary); color: #fff; font-size: 0.85em; text-align: center; }
.mpf-js .mpf-filter__more--always > .mpf-filter__more-toggle { display: inline-block; }
.mpf-js .mpf-filter__more--always:not(.is-open) > .mpf-filter__more-body { display: none; }
@media (min-width: 782px) {
	/* On desktop the controls join the others in the same row. */
	.mpf-filter__more--mobile,
	.mpf-filter__more--mobile > .mpf-filter__more-body { display: contents; }
}
@media (max-width: 781px) {
	.mpf-js .mpf-filter__more--mobile > .mpf-filter__more-toggle { display: inline-block; }
	.mpf-js .mpf-filter__more--mobile:not(.is-open) > .mpf-filter__more-body { display: none; }
}
/* On the grid, the "More filters" controls keep their widths (on desktop the mobile toggle's are already in the row). */
.mpf-filter--grid .mpf-filter__more { grid-column: 1 / -1; }
.mpf-filter--grid .mpf-filter__more--always > .mpf-filter__more-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
@media (max-width: 781px) {
	.mpf-filter--grid .mpf-filter__more--mobile > .mpf-filter__more-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Three classes deep so theme rules such as `.container-wrap input[type="text"]` don't restyle the controls. */
.mpf-block .mpf-filter__control .mpf-filter__input,
.mpf-block .mpf-filter__control .mpf-filter__select {
	width: 100%;
	height: auto;
	min-height: 2.6em;
	margin: 0;
	padding: 0.55em 0.75em;
	border: 1px solid var(--mpf-color-border);
	border-radius: var(--mpf-radius-control);
	background-color: var(--mpf-color-surface);
	box-shadow: none;
	color: var(--mpf-color-text);
	font: inherit;
	line-height: 1.3;
}
.mpf-block .mpf-filter__control .mpf-filter__input { -webkit-appearance: none; appearance: none; }

/* A control's icon sits inside its input or select. */
.mpf-filter__field { position: relative; display: block; }
.mpf-filter__field > .mpf-filter__icon { position: absolute; top: 50%; inset-inline-start: 0.8em; transform: translateY(-50%); color: var(--mpf-color-muted); pointer-events: none; }
.mpf-block .mpf-filter__control .mpf-filter__field > .mpf-filter__input,
.mpf-block .mpf-filter__control .mpf-filter__field > .mpf-filter__select { padding-inline-start: 2.3em; }

.mpf-block .mpf-filter__control .mpf-filter__input:focus,
.mpf-block .mpf-filter__control .mpf-filter__select:focus { background-color: var(--mpf-color-surface); border-color: var(--mpf-color-accent); box-shadow: none; }
.mpf-block .mpf-filter__control .mpf-filter__input:focus-visible,
.mpf-block .mpf-filter__control .mpf-filter__select:focus-visible { outline: 2px solid var(--mpf-color-accent); outline-offset: 1px; }

.mpf-filter__choices { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mpf-space-xs); }
.mpf-filter__choices legend { padding: 0; margin-bottom: var(--mpf-space-xs); }
.mpf-choice { display: inline-flex; }
.mpf-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mpf-choice span {
	display: inline-block;
	padding: 0.35em 0.85em;
	border: 1px solid var(--mpf-color-border);
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.9em;
	transition: background var(--mpf-transition), color var(--mpf-transition);
}
.mpf-choice.is-selected span,
.mpf-choice input:checked + span { background: var(--mpf-color-primary); border-color: var(--mpf-color-primary); color: #fff; }
.mpf-choice input:focus-visible + span { outline: 2px solid var(--mpf-color-accent); outline-offset: 2px; }

.mpf-filter__check { display: inline-flex; align-items: center; gap: var(--mpf-space-sm); cursor: pointer; }
.mpf-filter__check input[type="checkbox"] { width: 1.15em; height: 1.15em; margin: 0; flex: 0 0 auto; accent-color: var(--mpf-color-primary); }
.mpf-filter__actions { display: flex; align-items: center; gap: var(--mpf-space-sm); }
.mpf-filter__count { margin: 0; color: var(--mpf-color-muted); font-size: 0.9em; }

.mpf-block[aria-busy="true"] .mpf-module:not(.mpf-module--filter_bar) { opacity: 0.55; transition: opacity var(--mpf-transition); pointer-events: none; }

.mpf-result-count { color: var(--mpf-color-muted); font-size: 0.9em; }

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

.mpf-pager,
.mpf-load-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--mpf-space-sm) var(--mpf-space-md); margin-top: var(--mpf-space-lg); }
.mpf-load-more { flex-direction: column; }
.mpf-pager__status,
.mpf-load-more__status { margin: 0; color: var(--mpf-color-muted); font-size: 0.9em; }
.mpf-load-more[aria-busy="true"] .mpf-load-more__button { opacity: 0.55; pointer-events: none; cursor: progress; }
.mpf-module[data-mpf-paginate]:focus { outline: none; }
.mpf-module[data-mpf-paginate]:focus-visible { outline: 2px solid var(--mpf-color-accent); outline-offset: 4px; }

/* ---------- Single record ---------- */

.mpf-hero {
	position: relative;
	display: grid;
	border-radius: var(--mpf-radius-card);
	overflow: hidden;
	background: var(--mpf-color-surface-alt);
	min-height: 220px;
}
.mpf-hero--md { min-height: 320px; }
.mpf-hero--lg { min-height: 440px; }
/* The image fills the hero behind the content, so the hero's height comes from
   min-height and the content, never from the photo's own size. */
.mpf-hero__media { position: absolute; inset: 0; }
/* The overlay covers the whole photo, so a light image still carries white text. */
.mpf-hero--overlay .mpf-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.2));
}
.mpf-block .mpf-module.mpf-hero .mpf-hero__media img { width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; display: block; border-radius: 0; }
.mpf-hero__content { grid-area: 1 / 1; align-self: end; padding: var(--mpf-space-xl) var(--mpf-space-lg); display: flex; flex-direction: column; gap: var(--mpf-space-sm); position: relative; }
.mpf-hero--has-image.mpf-hero--overlay .mpf-hero__content { color: #fff; --mpf-pill-outline-color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.mpf-hero--has-image.mpf-hero--overlay .mpf-pill,
.mpf-hero--has-image.mpf-hero--overlay .mpf-button { text-shadow: none; }
.mpf-hero--has-image.mpf-hero--overlay .mpf-hero__content :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
.mpf-hero__badges { display: flex; flex-wrap: wrap; gap: var(--mpf-space-xs); }
.mpf-hero__badges > .mpf-pill { margin-right: 0; }
/* Un-colored pills over a hero image read as translucent white; explicitly colored pills keep their color. */
.mpf-hero--has-image.mpf-hero--overlay .mpf-pill:not([class*="mpf-pill--"]) { background: rgba(255, 255, 255, 0.2); color: #fff; }
.mpf-hero__heading { font-size: clamp(1.6rem, 4vw, 2.5rem); line-height: 1.1; }
.mpf-hero__subheading { margin: 0; opacity: 0.9; }
.mpf-hero__actions { margin-top: var(--mpf-space-sm); }

.mpf-detail { display: grid; gap: var(--mpf-space-lg); }
@media (min-width: 782px) {
	.mpf-detail--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mpf-detail--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mpf-detail__section { display: flex; flex-direction: column; gap: var(--mpf-space-sm); }
.mpf-detail__section-title { font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mpf-color-muted); }

.mpf-field-list__items { margin: 0; display: grid; gap: var(--mpf-space-sm) var(--mpf-space-lg); }
.mpf-field-list--inline .mpf-field-list__items { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.mpf-field-list__item dt { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mpf-color-muted); font-weight: 600; }
.mpf-field-list__item dd { margin: 0; }

/* ---------- States ---------- */

.mpf-empty-state,
.mpf-state {
	padding: var(--mpf-space-lg);
	border: 1px dashed var(--mpf-color-border);
	border-radius: var(--mpf-radius-card);
	color: var(--mpf-color-muted);
	text-align: center;
	background: var(--mpf-color-surface-alt);
}
/* With administrator details shown, the whole box reads in full color. */
.mpf-state:has(> .mpf-state__details) { color: inherit; }

.mpf-empty-state__icon { display: block; margin: 0 auto var(--mpf-space-sm); --mpf-icon-size: 2em; font-size: var(--mpf-icon-size); opacity: 0.7; }
.mpf-empty-state__icon.mpf-icon { --mpf-icon-line-height: 1; --mpf-icon-align: baseline; line-height: 1; vertical-align: baseline; } /* A sized icon on its own line. */

.mpf-state--error,
.mpf-state--configuration_error { border-color: color-mix(in srgb, var(--mpf-color-primary) 40%, transparent); }
.mpf-state__details { margin-top: var(--mpf-space-sm); font-size: 0.85em; text-align: left; word-break: break-word; }
.mpf-state__action { display: inline-block; margin-left: var(--mpf-space-xs); font-weight: 600; }

.mpf-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Admin diagnostics panel ---------- */

.mpf-debug { margin-top: var(--mpf-space-md); font-size: 0.8rem; border: 1px solid var(--mpf-color-border); border-radius: var(--mpf-radius-card); padding: var(--mpf-space-sm) var(--mpf-space-md); background: var(--mpf-color-surface-alt); color: var(--mpf-color-text); }
.mpf-debug summary { cursor: pointer; font-weight: 600; }
.mpf-debug table { width: 100%; border-collapse: collapse; margin: var(--mpf-space-sm) 0; }
.mpf-debug th, .mpf-debug td { text-align: left; padding: 2px 6px; border-bottom: 1px solid var(--mpf-color-border); }
.mpf-debug pre { white-space: pre-wrap; background: #fff; padding: var(--mpf-space-sm); border-radius: 4px; overflow: auto; }

/* ---------- Motion & print ---------- */

/* Respect a visitor's reduced-motion preference: no card lifts or fades. */
@media (prefers-reduced-motion: reduce) {
	.mpf-block *,
	.mpf-block *::before,
	.mpf-block *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
	.mpf-card:has(.mpf-card__link):hover,
	.mpf-card:has(.mpf-card__link:focus-visible) { transform: none; }
}

/* Printing a directory or listing: drop the interactive filter chrome and card
   hover shadows, and make sure card links don't print as bare URLs. */
@media print {
	.mpf-filter,
	.mpf-filter__form,
	.mpf-pager,
	.mpf-load-more { display: none !important; }
	.mpf-card { box-shadow: none; border-color: #999; break-inside: avoid; }
	.mpf-card__link { position: static; }
	.mpf-block { color: #000; }
}

/* --------------------------------------------------------------------------
 * Style classes: ready-made looks for modules, layout rows and columns,
 * components and whole blocks, picked in the editor (or typed as classes).
 * A surface (card, callout, glass, solid) takes its color from an optional
 * mpf-style-color-* class.
 * ----------------------------------------------------------------------- */

.mpf-style-color-primary { --mpf-style-color: var(--mpf-color-primary); }
.mpf-style-color-secondary { --mpf-style-color: var(--mpf-color-secondary); }
.mpf-style-color-accent { --mpf-style-color: var(--mpf-color-accent); }
.mpf-style-color-success { --mpf-style-color: var(--mpf-color-success); }
.mpf-style-color-warning { --mpf-style-color: var(--mpf-color-warning); }
.mpf-style-color-danger { --mpf-style-color: var(--mpf-color-danger); }
.mpf-style-color-info { --mpf-style-color: var(--mpf-color-info); }
.mpf-style-color-neutral { --mpf-style-color: var(--mpf-color-muted); }

.mpf-style-card,
.mpf-style-card-flat,
.mpf-style-callout,
.mpf-style-glass,
.mpf-style-glass-dark,
.mpf-style-solid {
	padding: var(--mpf-space-lg);
	border-radius: var(--mpf-radius-card);
}

.mpf-style-card {
	background: var(--mpf-color-surface);
	border: 1px solid var(--mpf-color-border);
	box-shadow: var(--mpf-shadow-card);
}
.mpf-style-card-flat {
	background: var(--mpf-color-surface-alt);
	border: 1px solid var(--mpf-color-border);
}
/* A color tints a card and its border. */
.mpf-style-card[class*="mpf-style-color-"],
.mpf-style-card-flat[class*="mpf-style-color-"] {
	background: var(--mpf-color-surface-alt);
	background: color-mix(in srgb, var(--mpf-style-color) 8%, var(--mpf-color-surface));
	border-color: var(--mpf-style-color);
	border-color: color-mix(in srgb, var(--mpf-style-color) 35%, var(--mpf-color-border));
}

.mpf-style-callout {
	background: var(--mpf-color-surface-alt);
	background: color-mix(in srgb, var(--mpf-style-color, var(--mpf-color-primary)) 7%, var(--mpf-color-surface));
	border-left: 4px solid var(--mpf-style-color, var(--mpf-color-primary));
	border-radius: 0 var(--mpf-radius-card) var(--mpf-radius-card) 0;
}

/* Semi-transparent, for blocks over a photo or colored section. */
.mpf-style-glass {
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: var(--mpf-shadow-card);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.mpf-style-glass-dark {
	--mpf-color-text: #fff;
	--mpf-color-muted: rgba(255, 255, 255, 0.78);
	--mpf-color-border: rgba(255, 255, 255, 0.25);
	--mpf-color-surface-alt: rgba(255, 255, 255, 0.12);
	color: #fff;
	background: rgba(16, 24, 40, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.18);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.mpf-style-glass[class*="mpf-style-color-"] {
	background: rgba(255, 255, 255, 0.72);
	background: color-mix(in srgb, var(--mpf-style-color) 18%, rgba(255, 255, 255, 0.7));
}

/* A solid colored panel; text inside turns white. */
.mpf-style-solid {
	--mpf-color-text: #fff;
	--mpf-color-muted: rgba(255, 255, 255, 0.82);
	--mpf-color-border: rgba(255, 255, 255, 0.3);
	--mpf-color-surface-alt: rgba(255, 255, 255, 0.14);
	color: #fff;
	background: var(--mpf-style-color, var(--mpf-color-primary));
}
.mpf-style-solid.mpf-style-color-neutral { background: #3c434a; }
.mpf-style-solid a:not(.mpf-button),
.mpf-style-glass-dark a:not(.mpf-button) { color: inherit; }

/*
 * Outlines: a ring in the style color (primary without one), drawn just
 * inside the edge so a scrolling carousel or table can't clip it. Added to
 * any surface, or to a card or row through a record style.
 */
.mpf-style-outline,
.mpf-style-outline-thick,
.mpf-style-outline-dashed,
.mpf-style-outline-glow {
	outline: 2px solid var(--mpf-style-color, var(--mpf-color-primary));
	outline-offset: -2px;
}
.mpf-style-outline-thick {
	outline-width: 4px;
	outline-offset: -4px;
}
.mpf-style-outline-dashed { outline-style: dashed; }
.mpf-style-outline-glow {
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08), var(--mpf-shadow-card);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--mpf-style-color, var(--mpf-color-primary)) 25%, transparent), var(--mpf-shadow-card);
}

/* Spacing, alignment, width, behavior. */
.mpf-style-pad-none { padding: 0; }
.mpf-style-pad-sm { padding: var(--mpf-space-md); }
.mpf-style-pad-lg { padding: var(--mpf-space-xl); }
.mpf-style-center { text-align: center; }
.mpf-style-center .mpf-filter__controls,
.mpf-style-center .mpf-filter__actions,
.mpf-style-center .mpf-group--row,
.mpf-style-center .mpf-hero__badges { justify-content: center; }
.mpf-style-narrow { max-width: 44rem; margin-left: auto; margin-right: auto; }
.mpf-style-sticky { position: -webkit-sticky; position: sticky; top: var(--mpf-sticky-top, 1rem); z-index: 5; }
.mpf-style-shadow { box-shadow: var(--mpf-shadow-card-hover); }
.mpf-style-rounded { border-radius: calc(var(--mpf-radius-card) * 2); overflow: hidden; }

/* Text size and weight. Sizes are relative to the surrounding text, so they follow
   the theme's base size; on a container they reach every child that inherits it. */
.mpf-style-text-xs { font-size: var(--mpf-text-xs); }
.mpf-style-text-sm { font-size: var(--mpf-text-sm); }
.mpf-style-text-lg { font-size: var(--mpf-text-lg); }
.mpf-style-text-xl { font-size: var(--mpf-text-xl); }
.mpf-style-text-2xl { font-size: var(--mpf-text-2xl); }
.mpf-style-text-3xl { font-size: var(--mpf-text-3xl); }
.mpf-style-weight-light { font-weight: 300; }
.mpf-style-weight-normal { font-weight: 400; }
.mpf-style-weight-medium { font-weight: 500; }
.mpf-style-weight-semibold { font-weight: 600; }
.mpf-style-weight-bold { font-weight: 700; }

/* Visibility: the same 782 px breakpoint at which layout columns stack. */
@media (max-width: 781px) {
	.mpf-style-hide-mobile { display: none !important; }
}
@media (min-width: 782px) {
	.mpf-style-hide-desktop { display: none !important; }
}

@media print {
	.mpf-style-glass, .mpf-style-glass-dark, .mpf-style-solid { background: none; color: inherit; box-shadow: none; }
	.mpf-style-sticky { position: static; }
}