/*
Theme Name: wp-cmod
Description: A WordPress theme with a React administration panel and a progressively enhanced front-end.
Version: 1.1.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: wp-cmod
*/

/*
 * ── 响应式断点阶梯（四档）────────────────────────────────────────────
 *
 * CSS 媒体查询读不到自定义属性，所以这里固定四个字面量，全站只允许用它们：
 *   手机  phone   max-width: 599px
 *   平板  tablet  min-width: 600px  且 max-width: 899px
 *   桌面  desktop min-width: 900px  且 max-width: 1279px
 *   宽屏  wide    min-width: 1280px
 *
 * 多栏布局（侧栏、首页分类导航 rail）自 900px 起生效，782px 不再是主断点。
 * 卡片网格不靠断点：配置的列数当作「桌面最大列数」，容器变窄时自动减列，
 * 见 `.wp-cmod-post-list` 的 fluid-to-capped 轨道写法。
 */

/*
 * Colours and sizes always come from the custom properties generated out of
 * `theme.json`, which the admin panel feeds through `inc/theme/theme-json.php`.
 * The literal values below are only fallbacks for the rare case the global
 * styles are not printed, and `inc/theme/dark-mode.php` overrides the colour
 * properties when the site runs in dark mode.
 */
:root {
	color-scheme: light;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	color: var(--wp--preset--color--contrast, #20262b);
	background: var(--wp--preset--color--muted, #f5f6f6);
	font-family: var(--wp--preset--font-family--system-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
	line-height: 1.7;
	/* A `full` home module breaks out to the viewport width. Clipping at the
	   body — not at an inner wrapper — keeps its band visible while the
	   `100vw`/scrollbar rounding can never add a horizontal scrollbar. */
	overflow-x: clip;
}

a { color: var(--wp--preset--color--link, #0064fa); }

/*
 * 「滚动条」：Firefox 走 `scrollbar-width` / `scrollbar-color`，Blink 与 WebKit
 * 走 `::-webkit-scrollbar`。轨道透明、滑块是圆角胶囊，颜色读预设令牌，亮暗模式
 * 因此自动跟随；透明边框把滑块向内收，让它浮在轨道中间而不是贴着边缘一条。
 * 隐藏滚动条的容器（如侧边分类的横向条）用更高的选择器覆盖，不受这里影响。
 */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--tertiary, #dce1e1) transparent;
}

*::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
	background: transparent;
}

*::-webkit-scrollbar-thumb {
	border: 3px solid transparent;
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: var(--wp--preset--color--tertiary, #dce1e1);
	background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--secondary, #59666b);
	background-clip: padding-box;
}

/*
 * 「页面布局」：居中把内容列限制在「内容最大宽度」，宽屏则把同一个 token 指向
 * 「宽屏最大宽度」——铺满视口直到该上限，超出后居中留白，避免超宽屏上行宽过长。
 * 布局、页头、页脚与 `full` 模块都读这一个 token，因此无需额外选择器即可跟随模式。
 * 想恢复真正的通栏，把「宽屏最大宽度」设得比屏幕大即可。
 */
body.wp-cmod-page--wide {
	--wp--custom--cmod--content-width: var(--wp--custom--cmod--wide-width, 1920px);
}

.wp-cmod-layout {
	display: grid;
	gap: 24px;
	width: min(100% - 2 * var(--wp--custom--cmod--gutter, 24px), var(--wp--custom--cmod--content-width, 1280px));
	margin: 48px auto;
}

@media (min-width: 900px) {
	.wp-cmod-layout--right { grid-template-columns: minmax(0, 1fr) var(--wp--custom--cmod--sidebar-width, 280px); }
	.wp-cmod-layout--left { grid-template-columns: var(--wp--custom--cmod--sidebar-width, 280px) minmax(0, 1fr); }
}

/* On a phone the container carries more air than it needs: the side gutter
   drops to 16px and the vertical margin to 24px, so the content reads wider on
   the small screen without touching the shared gutter token. */
@media (max-width: 599px) {
	.wp-cmod-layout {
		width: min(100% - 32px, var(--wp--custom--cmod--content-width, 1280px));
		margin-block: 24px;
	}
}

/* The stacked layout already separates its blocks with their own spacing, so the
   grid gap is dropped on the narrow screens. */
@media (max-width: 899px) {
	.wp-cmod-layout { gap: 0; }
}

.wp-cmod-main { min-width: 0; min-height: 55vh; }
.wp-cmod-sidebar { min-width: 0; }

.wp-cmod-widget {
	padding: var(--wp--custom--cmod--widget-padding, 16px);
	border: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	border-radius: var(--wp--custom--cmod--radius, 8px);
	background: var(--wp--preset--color--base, #fff);
}

.wp-cmod-widget + .wp-cmod-widget { margin-top: 24px; }
.wp-cmod-widget__title { margin: 0 0 12px; font-size: var(--wp--preset--font-size--h5, 16px); }

/*
 * Card grid.
 *
 * The column count configured in the panel is the DESKTOP MAXIMUM, not a fixed
 * count: the track minimum is `max(--wp-cmod-card-min, (container - gaps) / N)`,
 * so a wide container lays out exactly N columns while a narrow one falls back
 * to the 260px floor and shows fewer. That makes the grid responsive without a
 * stack of media queries, and `min(100%, …)` guards the case a content column is
 * narrower than one card. `auto-fill` (not `auto-fit`) keeps N equal tracks even
 * when there are fewer entries, so card widths stay steady across a row.
 */
.wp-cmod-post-list {
	--wp-cmod-card-gap: 24px;
	--wp-cmod-card-min: 260px;
	--wp-cmod-card-cols: var(--wp--custom--cmod--card-columns, 3);
	display: grid;
	gap: var(--wp-cmod-card-gap);
	grid-template-columns:
		repeat(auto-fill,
			minmax(min(100%,
				max(var(--wp-cmod-card-min),
					calc((100% - (var(--wp-cmod-card-cols) - 1) * var(--wp-cmod-card-gap)) / var(--wp-cmod-card-cols)))),
				1fr));
}

/*
 * Waterfall (masonry) list.
 *
 * Used by a search that mixes the posts and the sites: a post card is taller
 * than a site one, and the grid above would stretch every card of a row to the
 * tallest, which is the "stretched" look this avoids. A multi-column flow packs
 * each card under the previous one at its natural height instead.
 *
 * Both `column-width` and `column-count` are set, which behaves like the grid's
 * `auto-fill`: as many columns as fit the card minimum, capped at the configured
 * maximum. The same custom properties that drive the grid therefore drive the
 * waterfall, so no media query is needed.
 */
.wp-cmod-post-list--masonry {
	display: block;
	column-width: var(--wp-cmod-card-min, 260px);
	column-count: var(--wp--custom--cmod--card-columns, 3);
	column-gap: var(--wp-cmod-card-gap, 24px);
}

.wp-cmod-post-list--masonry > .wp-cmod-card {
	/* Never split a card across two columns, and give the stacked cards the
	   vertical rhythm the grid gap provided. */
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin: 0 0 var(--wp-cmod-card-gap, 24px);
}

/*
 * Cards sit on the muted page background as plain white plates — no border and
 * no shadow, the reference look — so the separation comes from the background
 * alone.
 */
.wp-cmod-card {
	position: relative;
	padding: var(--wp--custom--cmod--card-padding, 24px);
	border-radius: var(--wp--custom--cmod--radius, 8px);
	background: var(--wp--preset--color--base, #fff);
}

/*
 * Media plate.
 *
 * The picture heads the card, cropped to one ratio so a grid of cards keeps a
 * steady rhythm whatever the source images are. A site without a featured image
 * falls back to its square logo, centred on the muted plate rather than
 * stretched to the full crop.
 */
.wp-cmod-card__media {
	position: relative;
	margin: 0 0 20px;
	overflow: hidden;
	border-radius: var(--wp--custom--cmod--radius, 8px);
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--muted, #f5f6f6);
}

.wp-cmod-card__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The badge is a tab in the bottom left corner, flush with the plate: the media
   clips its bottom left corner to the plate radius. */
.wp-cmod-card__media-badges {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	max-width: 100%;
}

.wp-cmod-card__media-badges .wp-cmod-card__badge {
	margin: 0;
	padding: 6px 14px;
	border-radius: 0 12px 0 0;
	font-size: var(--wp--preset--font-size--caption, 12px);
	line-height: 1.5;
}

.wp-cmod-card__thumbnail { display: block; margin-bottom: 12px; }
.wp-cmod-card__thumbnail img { display: block; width: 100%; height: auto; border-radius: var(--wp--custom--cmod--radius, 8px); }
.wp-cmod-card__title { margin: 0 0 20px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; }
.wp-cmod-card__title a { color: inherit; text-decoration: none; }
.wp-cmod-card__meta { margin: 0 0 12px; color: var(--wp--preset--color--secondary, #59666b); font-size: var(--wp--preset--font-size--small, 14px); }
.wp-cmod-card__content { line-height: 1.7; }
.wp-cmod-card__content img { max-width: 100%; height: auto; }

.wp-cmod-card__icon { display: block; margin-bottom: 12px; }
.wp-cmod-card__icon img { width: 48px; height: 48px; border-radius: var(--wp--custom--cmod--radius, 8px); object-fit: cover; }
.wp-cmod-card__meta:empty { display: none; }

/*
 * Card footer.
 *
 * The author sits on the left — the writer of a post, the submitter of a site —
 * and the leading term on the right, drawn as a hashtag. The term is lifted
 * above the stretched title link so a tap opens the term archive; the author
 * line stays under it and forwards with the rest of the card.
 */
.wp-cmod-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
	color: var(--wp--preset--color--secondary, #59666b);
	font-size: var(--wp--preset--font-size--caption, 12px);
}

.wp-cmod-card__author { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

/* The mobile meta line pairs the extra label (age / host) with the author. */
.wp-cmod-card__foot-lead { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.wp-cmod-card__avatar { flex: none; width: 28px; height: 28px; border-radius: var(--wp--custom--cmod--radius-full, 999px); object-fit: cover; }
.wp-cmod-card__author-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wp-cmod-card__cat {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	color: inherit;
	text-decoration: none;
}

.wp-cmod-card__cat-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: var(--wp--preset--color--info-soft, #e8f0fe);
	color: var(--wp--preset--color--primary, #0064fa);
	font-weight: var(--wp--custom--cmod--weight-strong, 600);
	line-height: 1;
}

.wp-cmod-card__cat:hover { color: var(--wp--preset--color--primary, #0064fa); }


/*
 * Standard and detailed site card.
 *
 * A site is a directory entry, so it leads with its logo rather than a picture:
 * the icon sits next to the name and the summary runs below, which keeps the
 * card short where a post card leads with a wide plate. The card forwards to
 * the target through the stretched title link; the arrow next to the name stays
 * on top of that overlay and opens the detail page instead. The detailed card
 * shares the layout and only appends the tag row defined further down.
 */
.wp-cmod-card--site:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.wp-cmod-card--site:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__icon {
	flex: none;
	margin: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--cmod--radius, 8px);
	object-fit: cover;
}

.wp-cmod-card--site:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__ident { min-width: 0; flex: 1 1 auto; }

.wp-cmod-card--site:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__title {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: var(--wp--preset--font-size--h5, 16px);
}

.wp-cmod-card--site:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__meta { margin: 6px 0 0; }

/* The site summary stays plain text — a short line under the head — so the card
   keeps the directory feel the post card's boxed summary would not. */
.wp-cmod-card--site:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__excerpt {
	margin: 16px 0 0;
	padding: 0;
	border-radius: 0;
	background: none;
}

/*
 * The name link carries the card-wide hit area: its pseudo element covers the
 * whole article, so a click anywhere forwards to the target. The name itself
 * is clamped to two lines and the detail arrow is lifted above the overlay.
 */
.wp-cmod-card__link {
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	text-decoration: none;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.wp-cmod-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.wp-cmod-card__detail {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	color: var(--wp--preset--color--secondary, #59666b);
	text-decoration: none;
}

.wp-cmod-card__detail:hover { color: var(--wp--preset--color--primary, #0064fa); background: var(--wp--preset--color--muted, #f5f6f6); }

/*
 * List card summary.
 *
 * Both the post and the site lists print the summary inside a muted box instead
 * of the whole body. The text is clamped to two lines so the card heights stay
 * even, and `break-word` keeps a long URL or an unbroken run of CJK from
 * spilling out of the box.
 */
.wp-cmod-card__excerpt {
	margin: 0 0 20px;
	padding: 18px 20px;
	border-radius: var(--wp--custom--cmod--radius, 8px);
	background: var(--wp--preset--color--muted, #f5f6f6);
	color: var(--wp--preset--color--secondary, #59666b);
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1.7;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	word-break: break-word;
}

/*
 * Detailed card tag row.
 *
 * The tags stay on one line and slide sideways, so however many an entry
 * carries the card keeps its height. The row sits above the stretched title
 * link — like the detail arrow — so a tap opens the tag archive instead of
 * forwarding to the target. A `重点` tag is filled with the theme colour, the
 * rest keep the plain outline.
 */
.wp-cmod-card__tags {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	margin-top: 12px;
	padding-bottom: 2px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* The row keeps sliding sideways but shows no bar of its own. */
	scrollbar-width: none;
}

.wp-cmod-card__tags::-webkit-scrollbar { display: none; }

.wp-cmod-card__tag {
	flex: none;
	padding: 2px 10px;
	border: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	color: var(--wp--preset--color--secondary, #59666b);
	font-size: var(--wp--preset--font-size--caption, 12px);
	line-height: 1.6;
	white-space: nowrap;
	text-decoration: none;
}

.wp-cmod-card__tag:hover { border-color: var(--wp--preset--color--primary, #0064fa); color: var(--wp--preset--color--primary, #0064fa); }

.wp-cmod-card__tag--featured {
	border-color: var(--wp--preset--color--primary, #0064fa);
	background: var(--wp--preset--color--primary, #0064fa);
	color: var(--wp--preset--color--on-primary, #fff);
}

.wp-cmod-card__tag--featured:hover { color: var(--wp--preset--color--on-primary, #fff); filter: brightness(0.94); }

.wp-cmod-card__badge {
	display: inline-block;
	margin-right: 6px;
	padding: 2px 8px;
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: var(--wp--preset--color--primary, #0064fa);
	color: var(--wp--preset--color--on-primary, #fff);
	font-size: var(--wp--preset--font-size--caption, 12px);
	line-height: 1.6;
}

/*
 * Compact card.
 *
 * The picture (or the site icon) and the text sit on one line and the excerpt
 * is dropped, so a long list fits many more entries per screen. The grid keeps
 * the same column count, the card only becomes shorter.
 */
.wp-cmod-card--compact {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
}

.wp-cmod-card--compact .wp-cmod-card__icon {
	margin-bottom: 0;
	flex: none;
}

.wp-cmod-card--compact .wp-cmod-card__icon img { width: 32px; height: 32px; }

/* The post thumbnail takes the place of the icon, kept square so a short row
   of cards still lines up. */
.wp-cmod-card--compact .wp-cmod-card__thumbnail { flex: none; width: 64px; margin-bottom: 0; }

.wp-cmod-card--compact .wp-cmod-card__thumbnail img {
	width: 64px;
	height: 64px;
	aspect-ratio: auto;
	border-radius: var(--wp--custom--cmod--radius, 8px);
	object-fit: cover;
}

.wp-cmod-card--compact .wp-cmod-card__body { min-width: 0; }

.wp-cmod-card--compact .wp-cmod-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h5, 16px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wp-cmod-card--compact .wp-cmod-card__meta { margin: 2px 0 0; font-size: 13px; }
.wp-cmod-card--compact .wp-cmod-card__meta:empty { display: none; }

/* The relative age (post card) and the host (site card) only surface in the
   mobile meta line; the desktop card hides them so its footer keeps reading as
   author | term. */
.wp-cmod-card__time,
.wp-cmod-card__host { display: none; color: var(--wp--preset--color--secondary, #59666b); }
.wp-cmod-sites-empty { margin: 0; color: var(--wp--preset--color--secondary, #59666b); }
.pagination { margin-top: 40px; }

.wp-cmod-main__title { margin: 0 0 24px; font-size: clamp(24px, 3vw, 32px); }
.wp-cmod-main__description { margin: -12px 0 24px; color: var(--wp--preset--color--secondary, #59666b); }

/*
 * Site entry page.
 *
 * A directory entry opens on a full width gradient banner — the trail, the name
 * and the counters — and a white card then overlaps the band's bottom edge to
 * hold the body. The page is deliberately not constrained: the banner bleeds to
 * the viewport and only the inner containers (`.wp-cmod-site__overlap` and the
 * areas below it) are centred, so the band reads edge to edge.
 */
.wp-cmod-site {
	padding: 0;
	border: 0;
	background: none;
}

/*
 * Banner band.
 *
 * The shared head of a site entry, a post entry and a term archive: a full
 * width stripe with the entry's artwork on the right, blown up and blurred
 * over a colour gradient that fades into the page. The gradient is a preset
 * chosen per entry and carried in `--wp-cmod-band-tint`, so the artwork
 * dissolves into the theme colour instead of a flat veil; that colour is also
 * the fallback for an entry without artwork. The text uses `on-primary`, which
 * dark mode keeps light.
 */
.wp-cmod-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 64px 0 150px;
	background: linear-gradient(180deg, var(--wp-cmod-band-tint, #a874c1), var(--wp--preset--color--muted, #f5f6f6));
	color: var(--wp--preset--color--on-primary, #fff);
}

/* The artwork occupies the right half, leaving a clear field behind the title. */
.wp-cmod-band__bg {
	position: absolute;
	left: 50%;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 0;
	-webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 0%, #000 25%, transparent 100%);
	mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 0%, #000 25%, transparent 100%);
}

.wp-cmod-band__bg-art {
	position: absolute;
	inset: 0;
	transform: translateX(20%) rotate(30deg);
	filter: blur(12px);
}

.wp-cmod-band__bg-art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp-cmod-band-tint, #a874c1);
	opacity: 0.2;
}

.wp-cmod-band__bg-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.85);
}

/* Plain text over a coloured backdrop needs a soft shadow; the buttons carry
   their own surface and must stay crisp, so the shadow skips the action row. */
.wp-cmod-band .wp-cmod-band__title,
.wp-cmod-band .wp-cmod-band__label,
.wp-cmod-band .wp-cmod-band__meta,
.wp-cmod-band .wp-cmod-band__description,
.wp-cmod-band .wp-cmod-breadcrumb,
.wp-cmod-band .wp-cmod-site__counters {
	text-shadow: 0 1px 3px rgb(0 0 0 / 28%);
}

.wp-cmod-band__inner {
	position: relative;
	z-index: 1;
	width: min(100% - 2 * var(--wp--custom--cmod--gutter, 24px), var(--wp--custom--cmod--content-width, 1280px));
	margin-inline: auto;
}

.wp-cmod-band__label {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--small, 14px);
	letter-spacing: var(--wp--custom--cmod--letter-spacing-caps, 0.08em);
	opacity: 0.85;
}

.wp-cmod-band__title {
	margin: 18px 0 0;
	color: inherit;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.25;
}

.wp-cmod-band__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0;
	font-size: var(--wp--preset--font-size--small, 14px);
	opacity: 0.85;
}

/* The site meta is two phrases with no separator between them, so they take a
   wider gap than the dot-joined meta of a post. */
.wp-cmod-band--site .wp-cmod-band__meta { gap: 8px 20px; }

.wp-cmod-band__meta-sep { opacity: 0.6; }

.wp-cmod-band__meta-link { color: inherit; text-decoration: none; }
.wp-cmod-band__meta-link:hover { color: inherit; text-decoration: underline; opacity: 1; }

/* The category and tag chips ride the meta row, so the taxonomy lists sit in
   the bar with the facts. They are outlined in the band foreground, which stays
   light in dark mode, and tinted on hover instead of taking a link colour that
   would vanish on the coloured backdrop. */
.wp-cmod-band__terms {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.wp-cmod-band__terms-label { opacity: 0.85; }

.wp-cmod-band__term {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	color: inherit;
	font-size: var(--wp--preset--font-size--caption, 12px);
	line-height: 1.6;
	text-decoration: none;
	text-shadow: none;
	opacity: 0.9;
}

.wp-cmod-band__term:hover {
	background: rgb(255 255 255 / 16%);
	opacity: 1;
}

.wp-cmod-band__description {
	max-width: 780px;
	margin: 14px 0 0;
	font-size: var(--wp--preset--font-size--body, 16px);
	opacity: 0.9;
}

.wp-cmod-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 28px;
}

/* The trail sits on the band, so it inherits the band colour instead of the
   page one. Spacing between the band slots is set here rather than as a top
   margin on each, so an empty slot never leaves a gap behind. */
.wp-cmod-band .wp-cmod-breadcrumb { margin-bottom: 0; }
.wp-cmod-band .wp-cmod-breadcrumb__list { color: inherit; font-size: var(--wp--preset--font-size--small, 14px); }
.wp-cmod-band .wp-cmod-breadcrumb__link { color: inherit; opacity: 0.85; }
.wp-cmod-band .wp-cmod-breadcrumb__link:hover { color: inherit; opacity: 1; }
.wp-cmod-band .wp-cmod-breadcrumb__current { color: inherit; }
.wp-cmod-band .wp-cmod-breadcrumb__item + .wp-cmod-breadcrumb__item::before { color: inherit; opacity: 0.5; }
.wp-cmod-band .wp-cmod-breadcrumb + .wp-cmod-band__label,
.wp-cmod-band .wp-cmod-breadcrumb + .wp-cmod-band__title { margin-top: 18px; }
.wp-cmod-band__label + .wp-cmod-band__title { margin-top: 6px; }

/* The term band centres its content, matching the archive header it replaces. */
.wp-cmod-band--term { text-align: center; }
.wp-cmod-band--term .wp-cmod-band__title { font-size: clamp(26px, 3.4vw, 40px); }
.wp-cmod-band--term .wp-cmod-band__description { margin-inline: auto; }

/* Counters live on the band: they inherit the band colour and the like button
   only marks its liked state with the light foreground. */
.wp-cmod-band .wp-cmod-site__counters { gap: 20px; }
.wp-cmod-band .wp-cmod-site__counter-value { color: inherit; }
.wp-cmod-band .wp-cmod-site__counter-label { color: inherit; opacity: 0.85; }
.wp-cmod-band .wp-cmod-site__like:hover,
.wp-cmod-band .wp-cmod-site__like.is-liked { color: var(--wp--preset--color--on-primary, #fff); font-weight: 600; }

/* The primary action inverts on the band so it reads as a button; the surface
   is `on-primary` because it stays light in dark mode too, unlike `base`. */
.wp-cmod-band .wp-cmod-site__visit {
	background: var(--wp--preset--color--on-primary, #fff);
	color: var(--wp--preset--color--primary, #0064fa);
}
.wp-cmod-band .wp-cmod-site__visit:hover { filter: none; opacity: 0.92; }

/* The centred block below the band; the card alone pulls up over it. */
.wp-cmod-site__overlap {
	width: min(100% - 2 * var(--wp--custom--cmod--gutter, 24px), var(--wp--custom--cmod--content-width, 1280px));
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

.wp-cmod-site__card {
	margin-top: -88px;
	padding: var(--wp--custom--cmod--card-padding, 24px);
	border-radius: var(--wp--custom--cmod--radius-lg, 16px);
	background: var(--wp--preset--color--base, #fff);
	box-shadow: var(--wp--custom--cmod--shadow-md, 0 12px 28px rgb(0 0 0 / 10%));
}

.wp-cmod-site__visit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 22px;
	border-radius: var(--wp--custom--cmod--radius-md, 8px);
	background: var(--wp--preset--color--primary, #0064fa);
	color: var(--wp--preset--color--on-primary, #fff);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.wp-cmod-site__visit:hover { filter: brightness(0.94); }

/*
 * Body.
 *
 * The summary fills a muted box — the treatment a card gives it — and the
 * editor content follows at reading rhythm. A site with neither says so.
 */
.wp-cmod-site__content { margin-top: 24px; line-height: 1.8; }
.wp-cmod-site__content img { max-width: 100%; height: auto; }
.wp-cmod-site__content > :first-child { margin-top: 0; }
.wp-cmod-site__content > :last-child { margin-bottom: 0; }

.wp-cmod-site__excerpt {
	margin: 0 0 20px;
	padding: 18px 20px;
	border-radius: var(--wp--custom--cmod--radius, 8px);
	background: var(--wp--preset--color--muted, #f5f6f6);
	color: var(--wp--preset--color--secondary, #59666b);
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1.7;
}

.wp-cmod-site__empty { margin: 0; color: var(--wp--preset--color--secondary, #59666b); }

/* Operational fields, summarised in a muted panel. */
.wp-cmod-site__details {
	display: grid;
	gap: 10px;
	margin: 24px 0 0;
	padding: 16px 20px;
	border-radius: var(--wp--custom--cmod--radius, 8px);
	background: var(--wp--preset--color--muted, #f5f6f6);
	font-size: var(--wp--preset--font-size--small, 14px);
}

.wp-cmod-site__detail { display: flex; gap: 12px; min-width: 0; }
.wp-cmod-site__detail-label { flex: none; min-width: 72px; margin: 0; color: var(--wp--preset--color--secondary, #59666b); }
.wp-cmod-site__detail-value { margin: 0; min-width: 0; word-break: break-all; }

/* Submitter card, set off from the body by a hairline. */
.wp-cmod-site__author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
}

.wp-cmod-site__author-avatar { flex: none; width: 48px; height: 48px; border-radius: var(--wp--custom--cmod--radius-full, 999px); object-fit: cover; }
.wp-cmod-site__author-ident { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.wp-cmod-site__author-name { color: var(--wp--preset--color--contrast, #20262b); font-weight: 600; }
.wp-cmod-site__author-role { color: var(--wp--preset--color--secondary, #59666b); font-size: var(--wp--preset--font-size--caption, 12px); }

.wp-cmod-site__counters { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; list-style: none; }
.wp-cmod-site__counter { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; }
.wp-cmod-site__counter-value { color: var(--wp--preset--color--contrast, #20262b); font-weight: 600; font-size: var(--wp--preset--font-size--body, 16px); }
.wp-cmod-site__counter-label { color: var(--wp--preset--color--secondary, #59666b); font-size: var(--wp--preset--font-size--small, 14px); }

/*
 * The two column layout of the entry: the white card in the main column and an
 * ordinary widget area beside it. The columns align at their top, so the card's
 * negative margin lifts only the card over the band.
 */
.wp-cmod-site-layout { display: grid; gap: 24px; align-items: start; }
.wp-cmod-site__main { min-width: 0; }
.wp-cmod-site__aside { min-width: 0; }

@media (min-width: 900px) {
	.wp-cmod-site-layout--right { grid-template-columns: minmax(0, 1fr) var(--wp--custom--cmod--sidebar-width, 280px); }
	.wp-cmod-site-layout--left { grid-template-columns: var(--wp--custom--cmod--sidebar-width, 280px) minmax(0, 1fr); }
}

/* The site page runs full width, so it skips the shared layout and its 48px
   bottom margin; it keeps the same gap of its own so the last section — the
   related list or the extra area — never butts against the footer. */
.wp-cmod-site-page { padding-bottom: 48px; }

/* The areas below the card share the centred width. */
.wp-cmod-site__extra,
.wp-cmod-site__related {
	width: min(100% - 2 * var(--wp--custom--cmod--gutter, 24px), var(--wp--custom--cmod--content-width, 1280px));
	margin-inline: auto;
}

.wp-cmod-site__extra { margin-top: 24px; }

.wp-cmod-site__related { margin-top: 32px; }
.wp-cmod-site__related-title { margin: 0 0 16px; font-size: var(--wp--preset--font-size--h4, 18px); }

/* Tablet: soften the band and shrink the logo plate, but keep the full width
   hero — the two column body only splits from 900px up. */
@media (max-width: 899px) {
	.wp-cmod-band { padding: 48px 0 120px; }
	.wp-cmod-site__card { margin-top: -72px; }
	.wp-cmod-post__card { margin-top: -48px; }
	.wp-cmod-band__actions { justify-content: flex-start; }
}

@media (max-width: 599px) {
	.wp-cmod-band { padding: 40px 0 104px; }
	.wp-cmod-site__card { margin-top: -60px; }
	.wp-cmod-post__card { margin-top: -40px; }
	.wp-cmod-band__actions { gap: 12px; }
	.wp-cmod-band .wp-cmod-site__visit { flex: 1 1 100%; }
}

@media (max-width: 767px) {
	.wp-cmod-band__bg { left: 0; -webkit-mask-image: none; mask-image: none; }
	.wp-cmod-band__bg-art { height: 20%; transform: none; filter: blur(20px); }
}

/*
 * The post entry.
 *
 * A post wears the same shape a site entry does: a full width band, a white
 * card that overlaps its bottom edge, an optional side column and a related list
 * below. The band is the shared `.wp-cmod-band`; what follows is the card and
 * its layout. The parts inside the card — picture head, terms, body, copyright
 * and writer — come from `inc/post/`.
 */

.wp-cmod-breadcrumb { margin-bottom: 16px; }

.wp-cmod-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--secondary, #59666b);
	font-size: var(--wp--preset--font-size--small, 14px);
}

.wp-cmod-breadcrumb__item + .wp-cmod-breadcrumb__item::before {
	content: "/";
	margin-right: 8px;
	color: var(--wp--preset--color--tertiary, #dce1e1);
}

.wp-cmod-breadcrumb__link { color: inherit; text-decoration: none; }
.wp-cmod-breadcrumb__link:hover { color: var(--wp--preset--color--link-hover, #0064fa); }
.wp-cmod-breadcrumb__current { color: var(--wp--preset--color--contrast, #20262b); }

.wp-cmod-post {
	padding: 0;
	border: 0;
	background: none;
}

/* The centred block below the band; the card alone pulls up over it. */
.wp-cmod-post__overlap {
	position: relative;
	z-index: 1;
	width: min(100% - 2 * var(--wp--custom--cmod--gutter, 24px), var(--wp--custom--cmod--content-width, 1280px));
	margin-inline: auto;
}

.wp-cmod-post__card {
	margin-top: -56px;
	padding: var(--wp--custom--cmod--card-padding, 24px);
	border: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	border-radius: var(--wp--custom--cmod--radius-lg, 16px);
	background: var(--wp--preset--color--base, #fff);
}

/* The picture heads the card, cropped to one ratio so the entry keeps the
   rhythm of the list cards; the first category rides its corner as a tab. */
.wp-cmod-post__head { margin-bottom: 24px; }

.wp-cmod-post__feature {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--cmod--radius, 8px);
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--muted, #f5f6f6);
}

.wp-cmod-post__feature > img { display: block; width: 100%; height: 100%; object-fit: cover; }

.wp-cmod-post__content { line-height: 1.8; }
.wp-cmod-post__content img { max-width: 100%; height: auto; }

.wp-cmod-post__copyright {
	margin-top: 24px;
	padding: 12px 16px;
	border-radius: var(--wp--custom--cmod--radius, 8px);
	background: var(--wp--preset--color--muted, #f5f6f6);
	color: var(--wp--preset--color--secondary, #59666b);
	font-size: var(--wp--preset--font-size--small, 14px);
}

/* Writer card, set off from the body by a hairline. */
.wp-cmod-post__author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
}

.wp-cmod-post__author-avatar { flex: none; width: 48px; height: 48px; border-radius: var(--wp--custom--cmod--radius-full, 999px); object-fit: cover; }
.wp-cmod-post__author-ident { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.wp-cmod-post__author-name { color: var(--wp--preset--color--contrast, #20262b); font-weight: 600; }
.wp-cmod-post__author-role { color: var(--wp--preset--color--secondary, #59666b); font-size: var(--wp--preset--font-size--caption, 12px); }

/*
 * The two column layout of the entry: the white card in the main column and an
 * ordinary widget area beside it. The columns align at their top, so the card's
 * negative margin lifts only the card over the band.
 */
.wp-cmod-post-layout { display: grid; gap: 24px; align-items: start; }
.wp-cmod-post__main { min-width: 0; }
.wp-cmod-post__aside { min-width: 0; }

@media (min-width: 900px) {
	.wp-cmod-post-layout--right { grid-template-columns: minmax(0, 1fr) var(--wp--custom--cmod--sidebar-width, 280px); }
	.wp-cmod-post-layout--left { grid-template-columns: var(--wp--custom--cmod--sidebar-width, 280px) minmax(0, 1fr); }
}

/* The post page runs full width, so it skips the shared layout and its 48px
   bottom margin; it keeps the same gap of its own so the last section — the
   related list or the extra area — never butts against the footer. */
.wp-cmod-post-page { padding-bottom: 48px; }

/* The areas below the card share the centred width. */
.wp-cmod-post__extra,
.wp-cmod-post__related {
	width: min(100% - 2 * var(--wp--custom--cmod--gutter, 24px), var(--wp--custom--cmod--content-width, 1280px));
	margin-inline: auto;
}

.wp-cmod-post__extra { margin-top: 24px; }
.wp-cmod-post__related { margin-top: 32px; }
.wp-cmod-post__related-title { margin: 0 0 16px; font-size: var(--wp--preset--font-size--h4, 18px); }

/* List post cards lead with the picture and a summary: the title is clamped to
   two lines and the thumbnail uses one crop ratio, so a grid of cards keeps a
   steady rhythm whatever the source images are. */
.wp-cmod-card--post:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.wp-cmod-card--post:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__thumbnail img { aspect-ratio: 16 / 9; object-fit: cover; }

/*
 * Search results.
 *
 * A search is not an archive: it opens on a box of its own — the query in the
 * title, a large form, the hot words — then the type filter and the card grid.
 * Everything is plain HTML: the filter and the hot words are links, so the page
 * works without JavaScript and a crawler can follow every scope.
 */

.wp-cmod-search-head { margin: 0 0 24px; }

.wp-cmod-search-head__title { margin: 0 0 16px; font-size: clamp(24px, 3vw, 32px); }

.wp-cmod-search-head__form .search-form { display: flex; gap: 8px; max-width: 560px; }
.wp-cmod-search-head__form .search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 16px;
	border: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	border-radius: var(--wp--custom--cmod--radius-md, 8px);
	background: var(--wp--preset--color--base, #fff);
}
.wp-cmod-search-head__form .search-field:focus-visible { outline: 2px solid var(--wp--preset--color--primary, #0064fa); outline-offset: 1px; }
.wp-cmod-search-head__form .search-submit {
	flex: none;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--wp--custom--cmod--radius-md, 8px);
	background: var(--wp--preset--color--primary, #0064fa);
	color: var(--wp--preset--color--on-primary, #fff);
	cursor: pointer;
}

/* --- Hot words ---------------------------------------------------------- */

.wp-cmod-search-hot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
	margin: 16px 0 0;
}

.wp-cmod-search-hot__label { color: var(--wp--preset--color--secondary, #59666b); font-size: var(--wp--preset--font-size--small, 14px); }
.wp-cmod-search-hot__list { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-cmod-search-hot__link {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: var(--wp--preset--color--base, #fff);
	color: inherit;
	font-size: var(--wp--preset--font-size--small, 14px);
	text-decoration: none;
}
.wp-cmod-search-hot__link:hover { border-color: var(--wp--preset--color--link, #0064fa); color: var(--wp--preset--color--link, #0064fa); }

/* --- Type filter -------------------------------------------------------- */

.wp-cmod-search-types {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}
.wp-cmod-search-types__link {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	border: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: var(--wp--preset--color--base, #fff);
	color: inherit;
	text-decoration: none;
}
.wp-cmod-search-types__link:hover { border-color: var(--wp--preset--color--link, #0064fa); color: var(--wp--preset--color--link, #0064fa); }
.wp-cmod-search-types__link.is-current {
	border-color: var(--wp--preset--color--primary, #0064fa);
	background: var(--wp--preset--color--primary, #0064fa);
	color: var(--wp--preset--color--on-primary, #fff);
}

/* --- Result count ------------------------------------------------------- */

.wp-cmod-search-count {
	margin: 0 0 16px;
	color: var(--wp--preset--color--secondary, #59666b);
	font-size: var(--wp--preset--font-size--small, 14px);
}

@media (max-width: 599px) {
	.wp-cmod-search-head__form .search-form { max-width: none; }
	.wp-cmod-search-head__form .search-submit { padding: 12px 18px; }
}

/*
 * Taxonomy archives.
 *
 * A category or tag page opens on the shared banner (`.wp-cmod-band--term`,
 * printed above the layout so it bleeds to the viewport), then a directory card
 * listing the terms around the current one, a sort and count bar, and the card
 * grid. Posts and sites share every band — only the labels and the sort links
 * differ. Colours and sizes come from the custom properties generated out of
 * `theme.json`.
 */

/* --- Archive header (non-term) ------------------------------------------ */

.wp-cmod-archive-head {
	margin-bottom: 24px;
}

.wp-cmod-archive-head .wp-cmod-main__title { margin-bottom: 8px; }

.wp-cmod-archive-head .wp-cmod-main__description { margin: 12px 0 0; }

/* --- Directory card ----------------------------------------------------- */

.wp-cmod-taxdir {
	display: grid;
	gap: 18px;
	margin-bottom: 24px;
	padding: clamp(20px, 3vw, 32px);
	border: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	border-radius: var(--wp--custom--cmod--radius-lg, 16px);
	background: var(--wp--preset--color--base, #fff);
}

.wp-cmod-taxdir__group { display: grid; gap: 10px; }

.wp-cmod-taxdir__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h5, 16px);
}

.wp-cmod-taxdir__title a { color: inherit; text-decoration: none; }
.wp-cmod-taxdir__title a:hover { color: var(--wp--preset--color--link-hover, #0064fa); }

.wp-cmod-taxdir__links { display: flex; flex-wrap: wrap; gap: 8px; }

.wp-cmod-taxdir__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: var(--wp--preset--color--base, #fff);
	color: inherit;
	font-size: var(--wp--preset--font-size--small, 14px);
	text-decoration: none;
}

.wp-cmod-taxdir__link:hover { border-color: var(--wp--preset--color--link, #0064fa); color: var(--wp--preset--color--link, #0064fa); }

.wp-cmod-taxdir__link.is-current {
	border-color: var(--wp--preset--color--link, #0064fa);
	background: var(--wp--preset--color--primary, #0064fa);
	color: var(--wp--preset--color--on-primary, #fff);
}

.wp-cmod-taxdir__count { color: inherit; font-size: var(--wp--preset--font-size--caption, 12px); opacity: 0.75; }

/* --- Sort and count bar ------------------------------------------------- */

.wp-cmod-archive-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.wp-cmod-archive-menu__lead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.wp-cmod-archive-menu__lead .wp-cmod-sort { margin-bottom: 0; }

.wp-cmod-archive-menu__filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.wp-cmod-archive-menu__filter-label {
	color: var(--wp--preset--color--secondary, #59666b);
	font-size: var(--wp--preset--font-size--small, 14px);
}

.wp-cmod-archive-menu__filter-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: var(--wp--preset--color--base, #fff);
	color: inherit;
	font-size: var(--wp--preset--font-size--small, 14px);
	text-decoration: none;
}

.wp-cmod-archive-menu__filter-link:hover {
	border-color: var(--wp--preset--color--link, #0064fa);
	color: var(--wp--preset--color--link, #0064fa);
}

.wp-cmod-archive-menu__filter-count {
	color: inherit;
	font-size: var(--wp--preset--font-size--caption, 12px);
	opacity: 0.75;
}

.wp-cmod-archive-menu__count {
	margin: 0;
	color: var(--wp--preset--color--secondary, #59666b);
	font-size: var(--wp--preset--font-size--small, 14px);
}

/*
 * The sort row, shared by the sites and the posts.
 *
 * Plain links, one current state, no script: the order is carried by the URL so
 * a shared link opens the same list. It lives in the always loaded stylesheet,
 * because a post archive never loads the front-end bundle.
 */
.wp-cmod-sort {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.wp-cmod-sort__link {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	border: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: var(--wp--preset--color--base, #fff);
	color: inherit;
	font-size: var(--wp--preset--font-size--small, 14px);
	text-decoration: none;
}

.wp-cmod-sort__link:hover {
	border-color: var(--wp--preset--color--link-hover, #0064fa);
	color: var(--wp--preset--color--link-hover, #0064fa);
}

.wp-cmod-sort__link.is-current {
	border-color: var(--wp--preset--color--link, #0064fa);
	background: var(--wp--preset--color--primary, #0064fa);
	color: var(--wp--preset--color--on-primary, #fff);
}

/* --- Card grid hover ---------------------------------------------------- */

.wp-cmod-post-list .wp-cmod-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-cmod-post-list .wp-cmod-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--cmod--shadow-md, 0 12px 28px rgb(0 0 0 / 10%));
}

@media (prefers-reduced-motion: reduce) {
	.wp-cmod-post-list .wp-cmod-card,
	.wp-cmod-post-list .wp-cmod-card:hover { transform: none; transition: none; }
}

/*
 * Header, home area and footer layout.
 *
 * The header is assembled from parts (brand, navigation, actions), the home
 * area is an editable block region and the footer is a single widget area, so
 * these rules only position them. Colours and sizes come from the custom
 * properties generated out of `theme.json`.
 */

/* --- Header ------------------------------------------------------------- */

.wp-cmod-header {
	background: var(--wp--preset--color--base, #fff);
	border-bottom: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.wp-cmod-header--sticky {
	position: sticky;
	top: 0;
	z-index: 50;
}

.wp-cmod-header--sticky.is-scrolled {
	box-shadow: var(--wp--custom--cmod--shadow-sm, 0 6px 18px rgb(0 0 0 / 8%));
}

/*
 * Frosted glass while scrolled: the bar turns translucent so the cards sliding
 * underneath read through a blur instead of being hidden. `color-mix` keeps the
 * tint tied to the light/dark `base` preset, and the translucency only ships
 * where `backdrop-filter` is supported so the bar stays opaque elsewhere.
 */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wp-cmod-header--sticky.is-scrolled {
		background: color-mix(in srgb, var(--wp--preset--color--base, #fff) 60%, transparent);
		border-bottom-color: color-mix(in srgb, var(--wp--preset--color--tertiary, #dce1e1) 50%, transparent);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		backdrop-filter: blur(20px) saturate(180%);
	}
}

/*
 * Three zones: the brand hugs the left, the menu is centred on the viewport and
 * the actions sit on the right. The bar is full width — the hero below it is
 * full bleed too — so the zones are held by the edge padding, and the equal
 * `1fr` side columns keep the menu on the true centre line whatever the logo or
 * the actions measure. `min-height` ties the bar to the header token the sticky
 * offset and the module `scroll-margin-top` read.
 */
.wp-cmod-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 28px;
	width: 100%;
	min-height: var(--wp--custom--cmod--header-height, 64px);
	padding: 8px clamp(16px, 2.5vw, 32px);
}

.wp-cmod-brand { grid-column: 1; justify-self: start; display: flex; flex-direction: column; min-width: 0; }
.wp-cmod-brand__link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.wp-cmod-brand__logo { display: block; height: 34px; width: auto; }
.wp-cmod-brand__name { font-size: var(--wp--preset--font-size--h3, 22px); font-weight: 700; }
.wp-cmod-brand__description { margin: 4px 0 0; color: var(--wp--preset--color--secondary, #59666b); font-size: 13px; }

.wp-cmod-nav { grid-column: 2; justify-self: center; min-width: 0; }
.wp-cmod-nav__list { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.wp-cmod-nav__list li { position: relative; }

/*
 * Top level items carry an underline bar: the current entry keeps it visible
 * and hover reveals it, so the active page reads as a marked tab instead of the
 * whole menu turning blue. The bar lives on the link and only `> li > a` is
 * styled, so the dropdown entries stay flat.
 */
.wp-cmod-nav__list > li > a {
	position: relative;
	display: inline-block;
	padding: 10px 0;
	color: var(--wp--preset--color--contrast, #20262b);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s;
}
.wp-cmod-nav__list > li > a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: var(--wp--preset--color--primary, #0064fa);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s ease;
}
.wp-cmod-nav__list > li > a:hover { color: var(--wp--preset--color--primary, #0064fa); }
.wp-cmod-nav__list > li > a:hover::after { transform: scaleX(1); }

/* The current entry stays marked. `current_page_*` also covers the fallback pages. */
.wp-cmod-nav__list > li.current-menu-item > a,
.wp-cmod-nav__list > li.current-menu-ancestor > a,
.wp-cmod-nav__list > li.current-menu-parent > a,
.wp-cmod-nav__list > li.current_page_item > a,
.wp-cmod-nav__list > li.current_page_ancestor > a,
.wp-cmod-nav__list > li.current_page_parent > a {
	color: var(--wp--preset--color--primary, #0064fa);
	font-weight: 600;
}
.wp-cmod-nav__list > li.current-menu-item > a::after,
.wp-cmod-nav__list > li.current-menu-ancestor > a::after,
.wp-cmod-nav__list > li.current-menu-parent > a::after,
.wp-cmod-nav__list > li.current_page_item > a::after,
.wp-cmod-nav__list > li.current_page_ancestor > a::after,
.wp-cmod-nav__list > li.current_page_parent > a::after { transform: scaleX(1); }

.wp-cmod-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	min-width: 180px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--wp--preset--color--base, #fff);
	border: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	border-radius: var(--wp--custom--cmod--radius, 8px);
	box-shadow: var(--wp--custom--cmod--shadow-md, 0 12px 28px rgb(0 0 0 / 10%));
}
.wp-cmod-nav__list li:hover > .sub-menu { display: block; }
.wp-cmod-nav__list .sub-menu a {
	display: block;
	padding: 8px 16px;
	color: var(--wp--preset--color--contrast, #20262b);
	font-size: 14px;
	text-decoration: none;
}
.wp-cmod-nav__list .sub-menu a:hover {
	color: var(--wp--preset--color--primary, #0064fa);
	background: var(--wp--preset--color--muted, #f5f6f6);
}

.wp-cmod-header-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.wp-cmod-header-action {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: var(--wp--preset--color--primary, #0064fa);
	color: var(--wp--preset--color--on-primary, #fff);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: filter 0.2s;
}
.wp-cmod-header-action:hover { filter: brightness(0.94); }

/*
 * The header search reads as one rounded field: the input drops its own chrome
 * and the submit shrinks to a quiet text button, so the pair stays narrow enough
 * not to crowd the centred menu.
 */
.wp-cmod-header .search-form {
	display: flex;
	align-items: center;
	gap: 2px;
	width: 190px;
	padding: 2px 4px 2px 12px;
	border: var(--wp--custom--cmod--border-width, 1px) solid transparent;
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: var(--wp--preset--color--muted, #f5f6f6);
	transition: background 0.2s, border-color 0.2s;
}
.wp-cmod-header .search-form:focus-within {
	border-color: var(--wp--preset--color--primary, #0064fa);
	background: var(--wp--preset--color--base, #fff);
}
.wp-cmod-header .search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast, #20262b);
	font-size: 15px;
	line-height: 1.4;
	outline: none;
}
.wp-cmod-header .search-field::placeholder { color: var(--wp--preset--color--secondary, #59666b); }
.wp-cmod-header .search-submit {
	flex: none;
	padding: 5px 8px;
	border: 0;
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: none;
	color: var(--wp--preset--color--secondary, #59666b);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: color 0.2s;
}
.wp-cmod-header .search-submit:hover { color: var(--wp--preset--color--primary, #0064fa); }

/*
 * The bar menu button and the overlay close button belong to the narrow screen:
 * both stay hidden on desktop, where the menu is inline. The close button lives
 * inside the panel, so it only shows with the panel.
 */
.wp-cmod-menu-toggle,
.wp-cmod-menu-close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--cmod--radius-md, 8px);
	background: none;
	color: var(--wp--preset--color--contrast, #20262b);
	cursor: pointer;
}
.wp-cmod-menu-toggle:hover,
.wp-cmod-menu-close:hover { background: var(--wp--preset--color--muted, #f5f6f6); }
.wp-cmod-menu-toggle:focus-visible,
.wp-cmod-menu-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0064fa);
	outline-offset: 1px;
}

/* The open menu is the only thing that scrolls: the page behind is held. */
body.wp-cmod-menu-open { overflow: hidden; }

/* The blurred scrim behind the menu drawer, used on the narrow screen only. */
.wp-cmod-menu-mask { display: none; }

/* --- Home modules ------------------------------------------------------- */

.wp-cmod-module {
	/* Vertical rhythm lives in padding so a background covers the spacing.
	   The panel owns the value, so the first and the last module are not
	   collapsed: an explicit spacing always shows. */
	padding-block: var(--wp--custom--cmod--module-space, 32px);
}

/* Spacing presets. `default` keeps the shared rhythm above. */
.wp-cmod-module--space-none { padding-block: 0; }
.wp-cmod-module--space-sm { padding-block: 16px; }
.wp-cmod-module--space-md { padding-block: 32px; }
.wp-cmod-module--space-lg { padding-block: 56px; }

/* Width presets: `boxed` narrows the content, `full` lets it fill the page. */
.wp-cmod-module--w-boxed > * {
	max-width: var(--wp--custom--cmod--module-boxed, 960px);
	margin-inline: auto;
}

.wp-cmod-module--w-full {
	margin-inline: calc(50% - 50vw);
	padding-inline: max(var(--wp--custom--cmod--gutter, 24px), calc((100vw - var(--wp--custom--cmod--content-width, 1280px)) / 2));
}

/* With a sidebar the viewport bleed would run under it, so `full` only fills
   the main column there. */
.wp-cmod-layout--left .wp-cmod-module--w-full,
.wp-cmod-layout--right .wp-cmod-module--w-full {
	margin-inline: 0;
	padding-inline: 0;
}

/* A background turns the module into its own band, so it gets side padding and
   the panel radius while `full` modules keep their container-aligned padding. */
.wp-cmod-module--has-bg { background: var(--wp-cmod-module-bg); border-radius: var(--wp--custom--cmod--radius, 8px); }
.wp-cmod-module--has-bg:not(.wp-cmod-module--w-full) { padding-inline: var(--wp--custom--cmod--module-padding-x, 24px); }

/* A module prints its own title as a `wp:heading`; the browser default h2
   margin (0.83em) would add to the module padding, so it is reset here. */
.wp-cmod-module > .wp-block-heading { margin-block: 0 16px; }
.wp-cmod-module > .wp-block-heading:last-child { margin-block-end: 0; }
.wp-cmod-module > .wp-block-separator { margin-block: 0; }

/* Below the tablet breakpoint the category rail already labels each section, so
   the module heading would only repeat it — it is dropped on the narrow screens. */
@media (max-width: 899px) {
	.wp-cmod-module > .wp-block-heading { display: none; }

	/* With the heading gone the full module padding left too much air, so the
	   content and the posts modules use the small spacing top and bottom on the
	   narrow screens. */
	.wp-cmod-module--content,
	.wp-cmod-module--posts { padding-block: 16px; }
}

/* --- 首页侧边分类导航 ----------------------------------------------------- */

/* The rail is a column of its own next to the content. The template prints it
   for every page that renders category modules; the links are plain anchors,
   so `sidebar-nav.js` only adds the smooth scroll and the active state. */
@media (min-width: 900px) {
	.wp-cmod-layout--has-nav { grid-template-columns: 200px minmax(0, 1fr); }

	/* The widget sidebar keeps its own column: the rail always comes first. */
	.wp-cmod-layout--has-nav.wp-cmod-layout--right { grid-template-columns: 200px minmax(0, 1fr) var(--wp--custom--cmod--sidebar-width, 280px); }
	.wp-cmod-layout--has-nav.wp-cmod-layout--left { grid-template-columns: 200px var(--wp--custom--cmod--sidebar-width, 280px) minmax(0, 1fr); }
}

/* On the narrower desktop band the rail gives some room back to the content:
   with a 280px sidebar the main column would otherwise be squeezed. */
@media (min-width: 900px) and (max-width: 1279px) {
	.wp-cmod-layout--has-nav { grid-template-columns: 180px minmax(0, 1fr); }
	.wp-cmod-layout--has-nav.wp-cmod-layout--right { grid-template-columns: 180px minmax(0, 1fr) var(--wp--custom--cmod--sidebar-width, 280px); }
	.wp-cmod-layout--has-nav.wp-cmod-layout--left { grid-template-columns: 180px var(--wp--custom--cmod--sidebar-width, 280px) minmax(0, 1fr); }
}

/* The rail is a column beside the content on desktop and a scrollable strip of
   pills above it below the tablet breakpoint, so a phone keeps the category
   shortcuts. */
.wp-cmod-sidebar-nav { min-width: 0; }

.wp-cmod-sidebar-nav__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.wp-cmod-sidebar-nav__list::-webkit-scrollbar { display: none; }

.wp-cmod-sidebar-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	border-radius: var(--wp--custom--cmod--radius-md, 8px);
	color: var(--wp--preset--color--contrast, #20262b);
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.wp-cmod-sidebar-nav__link:hover {
	background: var(--wp--preset--color--muted, #f5f6f6);
	color: var(--wp--preset--color--link-hover, #0064fa);
}

.wp-cmod-sidebar-nav__count {
	color: var(--wp--preset--color--secondary, #59666b);
	font-size: var(--wp--preset--font-size--caption, 12px);
}

/* The active link is a soft primary-tinted pill: no bar, no gray block, just
   the theme colour in the label over a light wash. */
.wp-cmod-sidebar-nav__link.is-active {
	background: var(--wp--preset--color--info-soft, #e8f0fe);
	color: var(--wp--preset--color--link, #0064fa);
	font-weight: 600;
}

.wp-cmod-sidebar-nav__link.is-active .wp-cmod-sidebar-nav__count { color: var(--wp--preset--color--link, #0064fa); }

@media (min-width: 900px) {
	/* The rail follows the page: it sticks right below the sticky header. The
	   header height is a token, so this offset and the module `scroll-margin-top`
	   stay in sync instead of each hard coding 80px. */
	.wp-cmod-sidebar-nav {
		position: sticky;
		top: calc(var(--wp--custom--cmod--header-height, 64px) + 16px);
		align-self: start;
		/* A long category list scrolls inside the rail instead of running past
		   the footer. */
		max-height: calc(100vh - var(--wp--custom--cmod--header-height, 64px) - 32px);
		overflow-y: auto;
	}

	.wp-cmod-sidebar-nav__list { flex-direction: column; gap: 2px; overflow: visible; }
}

/* Below the tablet breakpoint the rail is a single scrollable row of pills: the
   list snap-scrolls sideways while the chips stay whole, and the active one
   keeps the filled look it has in the column. */
@media (max-width: 899px) {
	.wp-cmod-sidebar-nav { margin-bottom: 4px; }

	.wp-cmod-sidebar-nav__list {
		gap: 8px;
		padding-block: 2px;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.wp-cmod-sidebar-nav__link {
		padding: 6px 12px;
		border: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
		border-radius: var(--wp--custom--cmod--radius-full, 999px);
		background: var(--wp--preset--color--base, #fff);
		scroll-snap-align: start;
	}

	.wp-cmod-sidebar-nav__link.is-active {
		border-color: var(--wp--preset--color--link, #0064fa);
		background: var(--wp--preset--color--info-soft, #e8f0fe);
	}
}

/* An anchored module leaves room for the sticky header, so a jump does not
   hide the section title under it. */
.wp-cmod-module[id] { scroll-margin-top: calc(var(--wp--custom--cmod--header-height, 64px) + 16px); }

/* --- 首页轮播 ------------------------------------------------------------- */

/* The band sits above the layout and is printed full bleed, right under the
   header. Its copy, its floating panel and the quick row stay on the content
   column though, so they line up with the modules below — hence the one inset
   token every part reads. The stage holds the slides and the panel; the quick
   row is a sibling so it can overlap the stage bottom. */
.wp-cmod-hero {
	--wp-cmod-hero-inset: max(var(--wp--custom--cmod--gutter, 24px), calc((100vw - var(--wp--custom--cmod--content-width, 1280px)) / 2));
	/* The colour the band edges fade into; each slide overrides it with its own
	   picture's dominant colour. `fade` is how far the picture's own edges melt
	   into that colour on the left and right. */
	--wp-cmod-hero-tint: var(--wp--preset--color--contrast, #20262b);
	--wp-cmod-hero-fade: clamp(80px, 14%, 220px);
	width: 100%;
}

.wp-cmod-hero__stage {
	position: relative;
	height: clamp(440px, 44vw, 660px);
	overflow: hidden;
	background: var(--wp--preset--color--contrast, #20262b);
}

/* `pan-y` keeps the page scrollable vertically while letting the carousel read
   a horizontal drag, which the front-end script turns into a page change. */
.wp-cmod-hero__slides { position: absolute; inset: 0; touch-action: pan-y; }

.wp-cmod-hero__slide {
	position: absolute;
	inset: 0;
	display: block;
	color: #fff;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
}

.wp-cmod-hero__slide.is-active { opacity: 1; visibility: visible; }
.wp-cmod-hero__slide:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* The band is the picture's own colour, with no grey overlay: the strip the
   picture leaves on the left and right is filled with the slide's dominant
   colour, and the picture's own left and right edges melt into it over a wide
   fade. So the band reads as one colour field instead of a hard full-bleed
   picture — the transition is horizontal only. The colour is read on the server
   (`inc/home/hero/color.php`), so it is there without JavaScript; a slide it
   could not read keeps the `.wp-cmod-hero` token. */
.wp-cmod-hero__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp-cmod-hero-tint);
}

.wp-cmod-hero__image {
	position: absolute;
	top: 0;
	left: var(--wp-cmod-hero-inset);
	width: calc(100% - 2 * var(--wp-cmod-hero-inset));
	height: 100%;
	object-fit: cover;
	/* Melt the picture's own left and right edges into the colour behind it over
	   a wide fade, so the two meet on a gradient instead of a seam. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--wp-cmod-hero-fade), #000 calc(100% - var(--wp-cmod-hero-fade)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--wp-cmod-hero-fade), #000 calc(100% - var(--wp-cmod-hero-fade)), transparent 100%);
}

/* The floating panel: a translucent card over the right of the band, aligned
   to the content column. */
.wp-cmod-hero__panel {
	position: absolute;
	top: 50%;
	right: var(--wp-cmod-hero-inset);
	z-index: 3;
	width: min(320px, 30%);
	padding: 20px;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: var(--wp--custom--cmod--radius, 8px);
	background: rgb(18 22 34 / 72%);
	color: #fff;
	/* A long hot list scrolls inside the panel instead of running off the band. */
	max-height: calc(100% - 40px);
	overflow-y: auto;
	transform: translateY(-50%);
}

@supports (backdrop-filter: blur(4px)) {
	.wp-cmod-hero__panel { backdrop-filter: blur(12px) saturate(140%); }
}

/* The panel is dark in both colour modes, so the preset-token slider from the
   global rule would disappear on it in dark mode; it gets a light one instead. */
.wp-cmod-hero__panel { scrollbar-color: rgb(255 255 255 / 32%) transparent; }
.wp-cmod-hero__panel::-webkit-scrollbar-thumb { background-color: rgb(255 255 255 / 32%); }
.wp-cmod-hero__panel::-webkit-scrollbar-thumb:hover { background-color: rgb(255 255 255 / 55%); }

.wp-cmod-hero__panel-title {
	margin: 0 0 12px;
	color: rgb(255 255 255 / 70%);
	font-size: var(--wp--preset--font-size--small, 14px);
	font-weight: var(--wp--custom--cmod--weight-strong, 600);
}

.wp-cmod-hero__hot { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.wp-cmod-hero__hot-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	border-radius: var(--wp--custom--cmod--radius-sm, 4px);
	color: #fff;
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1.5;
	text-decoration: none;
}

.wp-cmod-hero__hot-link:hover { background: rgb(255 255 255 / 10%); color: #fff; }

.wp-cmod-hero__glyph {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}

.wp-cmod-hero__glyph-image { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; }
.wp-cmod-hero__glyph-text { font-size: 16px; line-height: 1; }

.wp-cmod-hero__hot-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The controls cluster — the arrows pill and the dots pill — stays anchored to
   the image: on a phone the track is the only positioned box, so it is nested
   inside it. Each pill carries its own frosted backdrop so the indicator reads
   on a slide whatever its picture is, the reference treatment. */
.wp-cmod-hero__controls {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 8px;
	transform: translateX(-50%);
}

.wp-cmod-hero__arrows,
.wp-cmod-hero__dots {
	display: flex;
	align-items: center;
	height: 36px;
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: rgb(18 22 34 / 45%);
}

.wp-cmod-hero__dots { gap: 8px; padding: 0 16px; }

.wp-cmod-hero__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	color: rgb(255 255 255 / 85%);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.wp-cmod-hero__arrow:first-child { border-radius: var(--wp--custom--cmod--radius-full, 999px) 0 0 var(--wp--custom--cmod--radius-full, 999px); }
.wp-cmod-hero__arrow:last-child { border-radius: 0 var(--wp--custom--cmod--radius-full, 999px) var(--wp--custom--cmod--radius-full, 999px) 0; }
.wp-cmod-hero__arrow:hover { background: rgb(255 255 255 / 12%); color: #fff; }

.wp-cmod-hero__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: rgb(255 255 255 / 45%);
	cursor: pointer;
	transition: width 0.3s, background 0.3s;
}

.wp-cmod-hero__dot.is-active { width: 22px; background: #fff; }

.wp-cmod-hero__arrow:focus-visible,
.wp-cmod-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@supports (backdrop-filter: blur(6px)) {
	.wp-cmod-hero__arrows,
	.wp-cmod-hero__dots { backdrop-filter: blur(8px); }
}

/* The quick row is a card on the content column; it overlaps the band bottom
   so the two read as one block. The desktop grid caps at four columns — the
   track minimum is `max(190px, (container - gaps) / 4)` so a wide row lays out
   four and a narrower one fewer, and `auto-fit` collapses the empty tracks when
   the owner configured fewer entries. */
.wp-cmod-hero__quick {
	--wp-cmod-quick-gap: 4px;
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(190px, calc((100% - 3 * var(--wp-cmod-quick-gap)) / 4)), 1fr));
	gap: var(--wp-cmod-quick-gap);
	margin: 16px var(--wp-cmod-hero-inset) 0;
	padding: 12px;
	border-radius: var(--wp--custom--cmod--radius, 8px);
	background: var(--wp--preset--color--base, #fff);
	box-shadow: var(--wp--custom--cmod--shadow-md, 0 12px 28px rgb(0 0 0 / 10%));
}

.wp-cmod-hero__quick-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var(--wp--custom--cmod--radius, 8px);
	color: var(--wp--preset--color--contrast, #20262b);
	text-decoration: none;
	transition: background 0.2s;
}

.wp-cmod-hero__quick-item:hover { background: var(--wp--preset--color--muted, #f5f6f6); }

.wp-cmod-hero__quick-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--cmod--radius, 8px);
	background: var(--wp--preset--color--muted, #f5f6f6);
	font-size: 20px;
}

.wp-cmod-hero__quick-icon .wp-cmod-hero__glyph-image { width: 24px; height: 24px; }

.wp-cmod-hero__quick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wp-cmod-hero__quick-head { display: flex; align-items: center; gap: 8px; }

.wp-cmod-hero__quick-title {
	font-size: var(--wp--preset--font-size--h6, 15px);
	font-weight: var(--wp--custom--cmod--weight-strong, 600);
	white-space: nowrap;
}

.wp-cmod-hero__quick-go {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 1px 8px;
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: var(--wp--preset--color--primary, #0064fa);
	color: var(--wp--preset--color--on-primary, #fff);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.wp-cmod-hero__quick-desc {
	overflow: hidden;
	color: var(--wp--preset--color--secondary, #59666b);
	font-size: var(--wp--preset--font-size--caption, 12px);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wp-cmod-hero--no-stage .wp-cmod-hero__quick { margin-top: 0; }

@media (min-width: 900px) {
	/* Only overlap when the stage is actually there to overlap. */
	.wp-cmod-hero:not(.wp-cmod-hero--no-stage) .wp-cmod-hero__quick { margin-top: -36px; }
	.wp-cmod-hero:not(.wp-cmod-hero--no-stage) .wp-cmod-hero__controls { bottom: 58px; }
}

@media (max-width: 899px) {
	/* The band stacks: the image keeps its own box, the panel — which only
	   floats over a slider — is dropped so the picture leads on its own. */
	.wp-cmod-hero__stage { height: auto; }
	.wp-cmod-hero__slides { position: relative; aspect-ratio: 4 / 3; }
	.wp-cmod-hero__slide:not(.is-active) { display: none; }
	.wp-cmod-hero--has-slides .wp-cmod-hero__panel { display: none; }

	/* The shortcut row runs edge to edge, drops the card corners and sits flush
	   under the picture, matching the full bleed band. */
	.wp-cmod-hero__quick { margin-top: 0; margin-inline: 0; border-radius: 0; }
}

/* Tablet: the quick row splits into two columns and keeps a light overlap. */
@media (min-width: 600px) and (max-width: 899px) {
	.wp-cmod-hero__quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	.wp-cmod-hero__quick-icon { width: 36px; height: 36px; font-size: 18px; }
	.wp-cmod-hero__quick-icon .wp-cmod-hero__glyph-image { width: 22px; height: 22px; }
	.wp-cmod-hero__quick-title { font-size: var(--wp--preset--font-size--small, 14px); }
	.wp-cmod-hero__quick-title, .wp-cmod-hero__quick-desc { white-space: normal; }
	.wp-cmod-hero:not(.wp-cmod-hero--no-stage) .wp-cmod-hero__quick { margin-top: -28px; }
}

/* Phone: only the icon survives — one row of evenly spaced icon shortcuts
   instead of a stacked list. The `GO ›` badge and description go, and the
   title becomes visually hidden rather than removed: the icon glyph is
   decorative (`alt=""` / `aria-hidden`), so the label has to stay in the
   accessibility tree or each shortcut would be an unlabelled link. */
@media (max-width: 599px) {
	.wp-cmod-hero__quick { display: flex; gap: 4px; }
	.wp-cmod-hero__quick-item { flex: 1 1 0; justify-content: center; padding: 10px 4px; }
	.wp-cmod-hero__quick-icon { width: 40px; height: 40px; }

	.wp-cmod-hero__quick-body {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

/* --- Footer ------------------------------------------------------------- */

.wp-cmod-footer {
	padding: 40px max(var(--wp--custom--cmod--gutter, 24px), calc((100vw - var(--wp--custom--cmod--content-width, 1280px)) / 2));
	background: var(--wp--preset--color--base, #fff);
	border-top: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
}

.wp-cmod-footer--compact { padding-top: 24px; padding-bottom: 24px; }
.wp-cmod-footer__widgets > .wp-cmod-widget + .wp-cmod-widget { margin-top: 24px; }
.wp-cmod-footer .wp-cmod-widget { padding: 0; border: 0; background: none; }
.wp-cmod-footer__social { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.wp-cmod-footer__social a { color: var(--wp--preset--color--secondary, #59666b); text-decoration: none; font-size: var(--wp--preset--font-size--small, 14px); }
.wp-cmod-footer__social a:hover { color: var(--wp--preset--color--link-hover, #0064fa); }
.wp-cmod-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
	padding-top: 20px;
	border-top: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	color: var(--wp--preset--color--secondary, #59666b);
	font-size: var(--wp--preset--font-size--small, 14px);
}
.wp-cmod-footer--compact .wp-cmod-footer__bottom { margin-top: 0; border-top: 0; padding-top: 0; }
.wp-cmod-footer__copyright,
.wp-cmod-footer__icp { margin: 0; }
.wp-cmod-footer__stats { margin-top: 16px; text-align: center; }

/* --- Mobile bottom navigation and back to top --------------------------- */

.wp-cmod-mobile-nav {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	display: none;
	padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
	background: var(--wp--preset--color--base, #fff);
	border-top: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
}
.wp-cmod-mobile-nav--floating {
	right: 12px;
	bottom: 12px;
	left: 12px;
	border: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	border-radius: var(--wp--custom--cmod--radius-md, 8px);
	box-shadow: var(--wp--custom--cmod--shadow-md, 0 10px 30px rgb(0 0 0 / 12%));
}
.wp-cmod-mobile-nav__list { display: flex; justify-content: space-around; margin: 0; padding: 0; list-style: none; }
.wp-cmod-mobile-nav__item a {
	display: block;
	padding: 8px 6px;
	color: var(--wp--preset--color--secondary, #59666b);
	text-decoration: none;
	font-size: 13px;
}

.wp-cmod-go-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 55;
	padding: 10px 14px;
	border-radius: var(--wp--custom--cmod--radius-full, 999px);
	background: var(--wp--preset--color--primary, #0064fa);
	color: var(--wp--preset--color--on-primary, #fff);
	text-decoration: none;
	font-size: 13px;
	box-shadow: var(--wp--custom--cmod--shadow-lg, 0 8px 22px rgb(0 0 0 / 18%));
}
.wp-cmod-go-top[hidden] { display: none; }

@media (max-width: 899px) {
	.wp-cmod-mobile-nav { display: block; }
	.wp-cmod-footer { padding-bottom: 80px; }

	/*
	 * The bar keeps a single line: the logo, the search field and the menu
	 * button. The panel buttons step aside and `display: contents` lets the
	 * search field leave the actions wrapper to take the middle slot.
	 */
	.wp-cmod-header__inner {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
	}
	.wp-cmod-header-actions { display: contents; }
	.wp-cmod-header-action { display: none; }
	.wp-cmod-brand { order: 1; flex: 0 1 auto; min-width: 0; }
	.wp-cmod-brand__description { display: none; }
	.wp-cmod-header .search-form { order: 2; flex: 1 1 auto; width: auto; min-width: 0; max-width: none; padding-block: 4px; }
	.wp-cmod-menu-toggle { order: 3; flex: none; display: inline-flex; }

	/*
	 * The menu leaves the bar as a drawer that slides in from the right edge,
	 * under the bar, over a blurred scrim. The bar height is measured by the
	 * script into `--wp-cmod-header-h`, so the drawer and the scrim start right
	 * below the bar and otherwise fill the viewport; the drawer scrolls on its
	 * own when the list is long.
	 */
	.wp-cmod-nav {
		position: fixed;
		top: var(--wp-cmod-header-h, 64px);
		right: 0;
		left: auto;
		width: min(320px, 84vw);
		height: calc(100dvh - var(--wp-cmod-header-h, 64px));
		z-index: 70;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--base, #fff);
		border-radius: var(--wp--custom--cmod--radius-lg, 16px) 0 0 var(--wp--custom--cmod--radius-lg, 16px);
		box-shadow: var(--wp--custom--cmod--shadow-lg, 0 8px 22px rgb(0 0 0 / 18%));
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.28s ease, visibility 0.28s;
	}
	.wp-cmod-header.is-menu-open .wp-cmod-nav {
		transform: translateX(0);
		visibility: visible;
	}

	/* The scrim hangs from the bar's lower edge, so the bar itself stays crisp. */
	.wp-cmod-menu-mask {
		display: block;
		position: fixed;
		top: var(--wp-cmod-header-h, 64px);
		left: 0;
		width: 100%;
		height: calc(100dvh - var(--wp-cmod-header-h, 64px));
		z-index: 65;
		background: rgb(0 0 0 / 32%);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0.25s;
	}
	.wp-cmod-header.is-menu-open ~ .wp-cmod-menu-mask {
		opacity: 1;
		visibility: visible;
	}

	/* The bar keeps its own layer above the scrim. A plain bar needs a positioned
	   box for the z-index to take; the sticky one already has one. */
	.wp-cmod-header.is-menu-open {
		z-index: 80;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--wp--preset--color--base, #fff);
	}
	.wp-cmod-header.is-menu-open:not(.wp-cmod-header--sticky) { position: relative; }

	.wp-cmod-menu-close { display: inline-flex; align-self: flex-end; margin-bottom: 4px; }

	.wp-cmod-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.wp-cmod-nav__list > li > a {
		display: block;
		padding: 14px 4px;
		font-size: var(--wp--preset--font-size--h5, 16px);
		border-bottom: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
	}
	.wp-cmod-nav__list > li > a::after { display: none; }

	/* A dropdown cannot be hovered on a touch screen, so it is laid out open. */
	.wp-cmod-nav__list .sub-menu {
		position: static;
		display: block;
		min-width: 0;
		padding: 0 0 8px 16px;
		border: 0;
		box-shadow: none;
	}

	/* Lift the back to top button clear of the mobile bottom bar when it shows. */
	.wp-cmod-has-mobile-nav .wp-cmod-go-top { bottom: 76px; }
}

/* Narrow desktop: the centred menu and the 190px search would crowd each other. */
@media (min-width: 900px) and (max-width: 1279px) {
	.wp-cmod-nav__list { gap: 20px; }
	.wp-cmod-header .search-form { width: 160px; }
}

/* Phone: tighten the single row so the logo, the search and the button fit. */
@media (max-width: 599px) {
	.wp-cmod-header__inner { padding-inline: 12px; gap: 8px; }
	.wp-cmod-brand__logo { height: 28px; }
	.wp-cmod-brand__name { font-size: var(--wp--preset--font-size--h4, 18px); }
	.wp-cmod-menu-toggle, .wp-cmod-menu-close { width: 36px; height: 36px; }
	.wp-cmod-footer { padding-top: 28px; }
}

/* --- Mobile list cards (horizontal) ------------------------------------- */

/*
 * On the phone and tablet the list cards follow the reference: a compact
 * horizontal row where the text leads on the left and the plate sits on the
 * right — a square crop of a post picture, or a site logo. The grey summary box
 * is dropped, the meta line reads "age · author" (a post) or the host (a site),
 * and the term becomes an outlined chip. Everything is scoped to ≤899px, so the
 * desktop card at ≥900px keeps its vertical reading layout.
 */
@media (max-width: 899px) {
	/* A horizontal card needs more room per column than the vertical one, so a
	   phone stays single column and only the wider tablets reach two. */
	.wp-cmod-post-list {
		--wp-cmod-card-gap: 12px;
		--wp-cmod-card-min: 320px;
	}

	.wp-cmod-card { padding: 14px; }

	/* Post list card: title over the meta line over the chip, with the square
	   plate beside the whole stack. Grid areas hold that order whatever the
	   entry carries; the entry card is excluded so a singular body is never
	   reshaped. */
	.wp-cmod-card--post:is(.wp-cmod-card--standard, .wp-cmod-card--detailed):not(.wp-cmod-card--entry) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"title media"
			"meta media";
		column-gap: 14px;
		row-gap: 8px;
		align-items: start;
	}

	.wp-cmod-card--post:is(.wp-cmod-card--standard, .wp-cmod-card--detailed):not(.wp-cmod-card--entry) .wp-cmod-card__title {
		grid-area: title;
		margin: 0;
		font-size: var(--wp--preset--font-size--h5, 16px);
	}

	.wp-cmod-card--post:is(.wp-cmod-card--standard, .wp-cmod-card--detailed):not(.wp-cmod-card--entry) .wp-cmod-card__media {
		grid-area: media;
		margin: 0;
		width: 96px;
		height: 96px;
		aspect-ratio: auto;
	}

	.wp-cmod-card--post:is(.wp-cmod-card--standard, .wp-cmod-card--detailed):not(.wp-cmod-card--entry) .wp-cmod-card__foot {
		grid-area: meta;
		margin: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	/* The summary box and the detailed tag row would only repeat what the meta
	   line already carries, so the compact row drops both. */
	.wp-cmod-card--post:is(.wp-cmod-card--standard, .wp-cmod-card--detailed):not(.wp-cmod-card--entry) .wp-cmod-card__excerpt,
	.wp-cmod-card--post:is(.wp-cmod-card--standard, .wp-cmod-card--detailed):not(.wp-cmod-card--entry) .wp-cmod-card__tags { display: none; }

	/* The category badge moves to the plate's top right corner as a small pill,
	   clamped so a long term never spills off the picture. */
	.wp-cmod-card--post:not(.wp-cmod-card--entry) .wp-cmod-card__media-badges {
		top: 6px;
		right: 6px;
		bottom: auto;
		left: auto;
	}

	.wp-cmod-card--post:not(.wp-cmod-card--entry) .wp-cmod-card__media-badges .wp-cmod-card__badge {
		max-width: 92px;
		margin: 0;
		padding: 2px 8px;
		border-radius: var(--wp--custom--cmod--radius-full, 999px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Site list card: the same shape, the logo in the plate's place. The
	   submitter steps aside so the host leads the meta line. */
	.wp-cmod-card--site:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__head {
		flex-direction: row-reverse;
		gap: 12px;
	}

	.wp-cmod-card--site:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__icon {
		width: 64px;
		height: 64px;
	}

	.wp-cmod-card--site:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__title {
		font-size: var(--wp--preset--font-size--h5, 16px);
	}

	.wp-cmod-card--site:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__excerpt,
	.wp-cmod-card--site:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__tags { display: none; }

	.wp-cmod-card--site:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-top: 10px;
	}

	.wp-cmod-card--site:is(.wp-cmod-card--standard, .wp-cmod-card--detailed) .wp-cmod-card__author { display: none; }

	/* Reveal the mobile-only meta labels and turn the term into an outlined
	   chip, matching the reference list. */
	.wp-cmod-card__time,
	.wp-cmod-card__host { display: inline; }

	.wp-cmod-card__foot .wp-cmod-card__cat {
		padding: 2px 10px;
		border: var(--wp--custom--cmod--border-width, 1px) solid var(--wp--preset--color--tertiary, #dce1e1);
		border-radius: var(--wp--custom--cmod--radius-full, 999px);
		font-size: var(--wp--preset--font-size--caption, 12px);
	}

	.wp-cmod-card__foot .wp-cmod-card__cat-mark { display: none; }
}