/* =========================================================================
   tpl-post.css — Blog index, article, archive, search and 404 templates.

   0.5-N.1 / SITE_PLAN §4.1: these are TEMPLATE styles, so every selector is
   GLOBAL (`body.vv …`) and never `.vvpage-*`. A post the client creates in
   wp-admin has no per-page stylesheet — it must inherit this design as is.

   This file is auto-enqueued site-wide by the functions.php glob, so every
   selector below is namespaced (`.vv-blog`, `.vv-featured`, `.vv-post-*`,
   `.vv-article`, `.vv-pagination`, `.vv-404`) and cannot leak into a page.

   Design source: design/Blog.dc.html (index + featured card + teaser grid).
   Article layout, pagination, archive/search headings and 404 are NOT drawn
   in the prototypes — derived from the tokens in style.css (flagged).
   ========================================================================= */

/* =========================================================================
   1. BLOG INDEX — intro  (design/Blog.dc.html, block 1)
   ========================================================================= */
body.vv .vv-blog__intro {
	padding-block: 88px 56px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
body.vv .vv-blog__intro > * { margin: 0; }

body.vv .vv-blog__title,
body.vv h1.vv-blog__title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: clamp(2.2rem, 4.4vw, 52px);
	line-height: 1.1;
	max-width: 680px;
	text-wrap: balance;
	overflow-wrap: break-word;
}
body.vv .vv-blog__title em { font-style: italic; color: var(--sage); }

body.vv .vv-blog__lead,
body.vv .vv-blog__lead p {
	margin: 0;
	font-size: 15.5px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--ink-2);
	max-width: 560px;
}

/* =========================================================================
   2. BLOG INDEX — featured sage card  (design/Blog.dc.html, block 2)
   Fed by the sticky Query Loop; the stat panel comes from the post meta
   _vv_featured_stat_label / _value / _note and is hidden when empty.
   ========================================================================= */
body.vv .vv-featured { padding-bottom: 40px; }
body.vv .vv-featured__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
body.vv .vv-featured__items > li { margin: 0; }

body.vv .vv-featured__card {
	background: var(--sage);
	border-radius: 20px;
	padding: 48px;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 48px;
	align-items: center;
	transition: box-shadow .3s, transform .3s;
}
body.vv .vv-featured__card:hover { box-shadow: 0 24px 60px rgba(79, 117, 88, .3); }
body.vv .vv-featured__card > * { margin-block: 0; }

body.vv .vv-featured__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}
body.vv .vv-featured__body > * { margin: 0; }

body.vv .vv-featured__badge {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink);
	background: var(--sage-lt);
	padding: 5px 12px;
	border-radius: 100px;
}

body.vv .vv-featured__title,
body.vv h2.vv-featured__title {
	margin: 0;
	font-family: var(--font-d);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sand);
	overflow-wrap: break-word;
}
body.vv .vv-featured__title a { color: var(--sand); text-decoration: none; }
body.vv .vv-featured__title a:hover { color: var(--sage-lt); }

body.vv .vv-featured__excerpt,
body.vv .vv-featured__excerpt p {
	margin: 0;
	font-size: 15.5px;
	font-weight: 300;
	line-height: 1.85;
	color: rgba(247, 243, 238, .8);
}

body.vv a.vv-featured__more,
body.vv .vv-featured__more {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sage-lt);
}
body.vv a.vv-featured__more:hover { color: var(--sand); }

/* Stat panel — right-hand column */
body.vv .vv-featured__panel {
	background: rgba(247, 243, 238, .1);
	border: 1px solid rgba(247, 243, 238, .15);
	border-radius: var(--radius-mock);
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
body.vv .vv-featured__panel > * { margin: 0; }

body.vv .vv-featured__stat-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sage-lt);
}
body.vv .vv-featured__stat-value {
	font-family: var(--font-d);
	font-size: 38px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--sand);
	overflow-wrap: break-word;
}
body.vv .vv-featured__stat-note {
	font-size: 13px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(247, 243, 238, .75);
}

/* Hidden when the meta is empty (post-meta binding renders an empty string). */
body.vv .vv-featured__stat-label:empty,
body.vv .vv-featured__stat-value:empty,
body.vv .vv-featured__stat-note:empty { display: none; }
body.vv .vv-featured__panel:not(:has(p:not(:empty))) { display: none; }
body.vv .vv-featured__card:not(:has(.vv-featured__panel p:not(:empty))) {
	grid-template-columns: 1fr;
}

/* =========================================================================
   3. TEASER CARD GRID — blog index, archive, search, "Meer artikels"
   (design/Blog.dc.html, block 3)
   ========================================================================= */
body.vv .vv-blog .vv-post-grid { padding-bottom: 96px; }

/* Card metrics track the site's other card families (`.vv-service-card`
   42px/35px padding, 22px Lora title, 14px/1.8 body): the teaser cards used to
   run 30px / 19px / 13.5px, which read tight and small next to them. */
body.vv .vv-post-grid__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.vv .vv-post-grid__items > li { margin: 0; }

body.vv .vv-post-card {
	height: 100%;
	background: #fff;
	border: 1px solid rgba(44, 36, 32, .08);
	border-radius: var(--radius-card);
	padding: 34px 32px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: box-shadow .25s, transform .25s;
}
body.vv .vv-post-card > * { margin-block: 0; }
body.vv .vv-post-card:hover {
	box-shadow: var(--shadow-card);
	transform: translateY(-3px);
}

body.vv .vv-post-card__kicker,
body.vv .vv-post-card__kicker a {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--terra-a11y);
	text-decoration: none;
}
body.vv .vv-post-card__kicker a:hover { color: var(--terra); }
body.vv .vv-post-card__kicker .wp-block-post-terms__separator { color: var(--terra-a11y); }

body.vv .vv-post-card__title,
body.vv h2.vv-post-card__title,
body.vv h3.vv-post-card__title {
	margin: 0;
	font-family: var(--font-d);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: break-word;
}
body.vv .vv-post-card__title a { color: var(--ink); text-decoration: none; }
body.vv .vv-post-card__title a:hover { color: var(--sage); }

body.vv .vv-post-card__teaser,
body.vv .vv-post-card__teaser p {
	margin: 0;
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--ink-2);
}

/* "Binnenkort online" — shown only when the _vv_coming_soon meta is set.
   .vv-post-card__flag is an invisible state carrier bound to that meta. */
body.vv .vv-post-card__flag { display: none; }
body.vv .vv-post-card__soon {
	display: none;
	margin-top: auto;
	padding-top: 12px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}
body.vv .vv-post-card:has(.vv-post-card__flag:not(:empty)) .vv-post-card__soon {
	display: block;
}
body.vv .vv-post-card:has(.vv-post-card__flag:not(:empty)) .vv-post-card__title a {
	pointer-events: none;
	color: var(--ink);
	cursor: default;
}

/* Empty-state copy (query-no-results) */
body.vv .vv-empty {
	margin: 0 0 20px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--ink-2);
}
body.vv .vv-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

/* =========================================================================
   4. PAGINATION — not drawn in the design, derived from the button tokens
   ========================================================================= */
body.vv .vv-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 48px;
}
body.vv .vv-pagination .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
body.vv .vv-pagination a,
body.vv .vv-pagination .page-numbers,
body.vv .vv-pagination .wp-block-query-pagination-previous,
body.vv .vv-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 10px 16px;
	font-family: var(--font-b);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink-2);
	border: 1.5px solid var(--rule);
	border-radius: var(--radius-pill);
	transition: border-color .25s, color .25s, background .25s;
}
body.vv .vv-pagination a:hover,
body.vv .vv-pagination .wp-block-query-pagination-previous:hover,
body.vv .vv-pagination .wp-block-query-pagination-next:hover {
	border-color: var(--sage);
	color: var(--sage);
}
body.vv .vv-pagination .page-numbers.current {
	background: var(--sage);
	border-color: var(--sage);
	color: var(--sand);
}
body.vv .vv-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 0;
	padding-inline: 4px;
}

/* =========================================================================
   5. ARCHIVE / SEARCH headings — derived
   ========================================================================= */
body.vv .vv-blog--archive .vv-blog__intro,
body.vv .vv-blog--search .vv-blog__intro { padding-block: 72px 40px; }

body.vv .vv-searchform { max-width: 480px; width: 100%; }
body.vv .vv-searchform .wp-block-search__inside-wrapper {
	border: 1.5px solid var(--rule);
	border-radius: var(--radius-pill);
	background: #fff;
	padding: 4px 4px 4px 18px;
	gap: 8px;
}
body.vv .vv-searchform .wp-block-search__input {
	border: 0;
	background: transparent;
	font-family: var(--font-b);
	font-size: 14.5px;
	color: var(--ink);
	padding: 10px 0;
}
body.vv .vv-searchform .wp-block-search__input:focus { outline: none; }
body.vv .vv-searchform .wp-block-search__button {
	margin: 0;
	border: 0;
	background: var(--sage);
	color: var(--sand);
	font-family: var(--font-b);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 12px 22px;
	min-height: 44px;
	border-radius: var(--radius-pill);
	cursor: pointer;
}
body.vv .vv-searchform .wp-block-search__button:hover { background: var(--sage-hover); }

/* =========================================================================
   6. ARTICLE (single.html) — derived from the tokens
   ========================================================================= */
body.vv .vv-article__head {
	padding-block: 72px 8px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
body.vv .vv-article__head > * { margin: 0; }

body.vv .vv-article__kicker,
body.vv .vv-article__kicker a {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--terra-a11y);
	text-decoration: none;
}
body.vv .vv-article__kicker a:hover { color: var(--terra); }

body.vv .vv-article__title,
body.vv h1.vv-article__title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: clamp(2rem, 3.8vw, 44px);
	line-height: 1.15;
	color: var(--ink);
	text-wrap: balance;
	overflow-wrap: break-word;
}

body.vv .vv-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--muted);
}
body.vv .vv-article__meta > * { margin-block: 0; }
body.vv .vv-article__date,
body.vv .vv-article__date time { color: var(--muted); }

/* The featured image shares the prose wrapper (single.html), so the article is
   ONE column: kicker, title, image, prose and tags all start on the same left
   edge. It used to sit in `vv-wrap--narrow` (1140px) above a 696px text column,
   which read as a misalignment rather than as a deliberate wide break. */
body.vv .vv-article__figure { padding-block: 36px 12px; }
body.vv .vv-article__image { margin: 0; }
body.vv .vv-article__image img {
	width: 100%;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	object-position: top;
	border-radius: 20px;
}
/* No featured image → collapse the wrapper instead of leaving 44px of white. */
body.vv .vv-article__figure:not(:has(img)) { display: none; }

/* -------------------------------------------------------------------------
   6a. PROSE RHYTHM
   ⚠ LESSON (the defect this section was rewritten for). Core used to inject
   `:root :where(.is-layout-flow) > * { margin-block-start: 24px }`, which gave
   EVERY block inside the post content its top gap for free. `theme.json`
   `settings.spacing.blockGap: null` switched that injection off (it was causing
   24px seams at the header/footer and a misaligned header row), and the rules
   below only replaced it for the direct `h2` / `h3` children — so an `h4`, an
   image, a separator, a table, a buttons row, a columns block, and every block
   nested one level deeper computed `margin-block-start: 0px` and the article
   ran together. Prose spacing is now stated EXHAUSTIVELY here, as bottom
   margins on the flow plus explicit top margins on the heading levels, and a
   nested fallback for content the client groups or columns.

   Scope note: only children of `.wp-block-post-content` are touched, so the
   ROI calculator's own `wp:html` markup (tpl-roi.css) and any `vv-` component
   a client drops into a post keep their own spacing. ------------------------ */
body.vv .vv-article__body { padding-block: 28px 8px; }

body.vv .vv-article__body .wp-block-post-content > * { margin-block: 0 1.5em; }
body.vv .vv-article__body .wp-block-post-content > :last-child { margin-bottom: 0; }

body.vv .vv-article__body .wp-block-post-content > p {
	font-size: 17.5px;
	font-weight: 400;
	line-height: 1.8;
	color: var(--ink-2);
}
/* A lead paragraph directly under the title reads one step up. */
body.vv .vv-article__body .wp-block-post-content > p:first-child {
	font-size: 19px;
	line-height: 1.75;
	color: var(--ink);
}

/* Heading rhythm: a heading owes its space to what comes BEFORE it, so the top
   margin is large and the bottom margin small — the section reads as a unit. */
body.vv .vv-article__body .wp-block-post-content > h2 {
	margin-block: 2em .55em;
	font-size: clamp(1.65rem, 3vw, 2.05rem);
	line-height: 1.2;
}
body.vv .vv-article__body .wp-block-post-content > h3 {
	margin-block: 1.9em .5em;
	font-size: 1.32rem;
	line-height: 1.3;
}
body.vv .vv-article__body .wp-block-post-content > h4,
body.vv .vv-article__body .wp-block-post-content > h5,
body.vv .vv-article__body .wp-block-post-content > h6 {
	margin-block: 1.7em .45em;
	line-height: 1.35;
}
body.vv .vv-article__body .wp-block-post-content > h4 { font-size: 1.12rem; }
body.vv .vv-article__body .wp-block-post-content > h5 { font-size: 1rem; }
body.vv .vv-article__body .wp-block-post-content > h6 {
	font-size: .82rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-2);
}
body.vv .vv-article__body .wp-block-post-content > :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

body.vv .vv-article__body .wp-block-post-content > ul,
body.vv .vv-article__body .wp-block-post-content > ol {
	margin-block: 0 1.6em;
	padding-left: 1.35em;
	font-size: 17.5px;
	font-weight: 400;
	line-height: 1.8;
	color: var(--ink-2);
}
body.vv .vv-article__body .wp-block-post-content > ul li,
body.vv .vv-article__body .wp-block-post-content > ol li { margin-bottom: .6em; }
body.vv .vv-article__body .wp-block-post-content > ul li:last-child,
body.vv .vv-article__body .wp-block-post-content > ol li:last-child { margin-bottom: 0; }
body.vv .vv-article__body .wp-block-post-content > ul li::marker { color: var(--sage); }
body.vv .vv-article__body .wp-block-post-content > ol li::marker {
	color: var(--sage);
	font-weight: 700;
}
/* Nested list: tighter, no double gap. */
body.vv .vv-article__body .wp-block-post-content > :is(ul, ol) :is(ul, ol) {
	margin-block: .55em 0;
	padding-left: 1.2em;
}

/* Quote — a real pull-quote, not a hairline note. */
body.vv .vv-article__body .wp-block-post-content > blockquote {
	margin-block: 2.1em;
	margin-inline: 0;
	padding: 6px 0 6px 30px;
	border-left: 3px solid var(--sage-2);
	font-family: var(--font-d);
	font-size: 1.32rem;
	font-style: italic;
	line-height: 1.55;
	color: var(--ink);
}
body.vv .vv-article__body .wp-block-post-content > blockquote p { margin-bottom: .5em; }
body.vv .vv-article__body .wp-block-post-content > blockquote p:last-child { margin-bottom: 0; }
body.vv .vv-article__body .wp-block-post-content > blockquote cite {
	display: block;
	margin-top: 14px;
	font-family: var(--font-b);
	font-size: 12.5px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Media, rules and tables all get room to breathe. */
body.vv .vv-article__body .wp-block-post-content > :is(figure, .wp-block-image, .wp-block-embed, .wp-block-gallery, .wp-block-video) {
	margin-block: 2.2em;
}
body.vv .vv-article__body .wp-block-post-content > figure img,
body.vv .vv-article__body .wp-block-post-content > .wp-block-image img { border-radius: var(--radius-card); }
body.vv .vv-article__body .wp-block-post-content > figure figcaption {
	margin-top: 12px;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--muted);
}
body.vv .vv-article__body .wp-block-post-content > .wp-block-separator {
	margin-block: 2.6em;
	border: 0;
	border-top: 1px solid var(--rule);
	background: none;
	opacity: 1;
}
body.vv .vv-article__body .wp-block-post-content > .wp-block-table {
	margin-block: 2.2em;
	overflow-x: auto;
	font-size: 15.5px;
}
body.vv .vv-article__body .wp-block-post-content > .wp-block-table :is(th, td) {
	padding: 12px 14px;
	border-color: var(--rule);
}
body.vv .vv-article__body .wp-block-post-content > .wp-block-buttons { margin-block: 2em; }
body.vv .vv-article__body .wp-block-post-content > :is(pre, .wp-block-code) {
	margin-block: 2em;
	padding: 18px 20px;
	background: var(--sand-2);
	border-radius: var(--radius-card);
	font-size: 14px;
	overflow-x: auto;
}

/* Nested fallback — a client who groups or columns their prose still gets the
   gap core used to inject. Design components own their spacing, so they are
   excluded: `vv-` (covered by `body.vv [class*="vv-"] > *` in style.css) AND
   `ww-` (the ROI article's own flex/grid sections — e.g. `.ww-hero__stats`,
   which manages its columns with a flex gap; without this exclusion the
   `> * + *` rule added 1.4em to the 2nd/3rd stat, knocking the numbers out of
   line). */
body.vv .vv-article__body .wp-block-post-content :where(.wp-block-group, .wp-block-column, .wp-block-quote):not([class*="vv-"]):not([class*="ww-"]) > * + * {
	margin-block-start: 1.4em;
}

/* Links in prose read as links, without shouting. A `.vv-btn` is not prose: it
   carries its own colour pair (sand text on the sage pill), and this rule is more
   specific than `.vv-btn--primary`, so without the `:not()` the primary button in a
   landing-style post rendered sage-on-sage — invisible label. */
body.vv .vv-article__body .wp-block-post-content a:not(.vv-btn) {
	color: var(--sage);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: var(--sage-2);
	transition: color .2s, text-decoration-color .2s;
}
body.vv .vv-article__body .wp-block-post-content a:not(.vv-btn):hover {
	color: var(--sage-hover);
	text-decoration-color: currentColor;
}
/* …except inside a `vv-` component (buttons, cards), which styles its own. */
body.vv .vv-article__body .wp-block-post-content [class*="vv-"] a,
body.vv .vv-article__body .wp-block-post-content a.vv-btn { text-decoration: none; }

/* -------------------------------------------------------------------------
   6b. LANDING-STYLE POST CONTENT  ← the "very cramped article" defect
   A post may hold a full page wrapper (`.vvpage …`, e.g. /waarom-een-website/
   with the ROI calculator): bands designed for the 1140px content width. The
   prose wrapper clamped them to 696px — every grid, the calculator and the
   comparison table were squeezed to 61% of their width. When the content IS a
   page wrapper, the prose column steps aside and `.vvpage` lays itself out
   exactly as it does through templates/page.html (style.css §3.6).
   ------------------------------------------------------------------------- */
body.vv .vv-article__body:has(> .wp-block-post-content > .vvpage),
body.vv .vv-article__body:has(> .wp-block-post-content > .alignfull) {
	max-width: none;
	width: auto;
	padding: 0;
}
body.vv .vv-article__body > .wp-block-post-content > .vvpage { margin-block: 0; }

/* Tags & categories */
body.vv .vv-article__terms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-block: 36px 0;
}
body.vv .vv-article__terms > * { margin-block: 0; }
body.vv .vv-article__terms .wp-block-post-terms { display: contents; }
body.vv .vv-article__terms a {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--terra-a11y);
	background: var(--terra-lt);
	padding: 8px 16px;
	border-radius: var(--radius-pill);
}
body.vv .vv-article__terms a:hover { background: var(--sage-lt); color: var(--ink); }
body.vv .vv-article__terms .wp-block-post-terms__separator { display: none; }

/* "Meer artikels" — a wider card band after the article column. The hairline
   makes the change of measure read as a deliberate section break instead of a
   misalignment with the prose above it. */
body.vv .vv-more { padding-block: 72px 96px; }
body.vv .vv-more__title {
	margin: 0 0 32px;
	padding-top: 40px;
	border-top: 1px solid var(--rule);
	font-family: var(--font-d);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}

/* =========================================================================
   7. 404 — derived
   ========================================================================= */
body.vv .vv-404__intro {
	padding-block: 96px 112px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
body.vv .vv-404__intro > * { margin: 0; }
body.vv .vv-404__title,
body.vv h1.vv-404__title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: clamp(2.1rem, 4vw, 44px);
	line-height: 1.12;
}
body.vv .vv-404__lead {
	font-size: 15.5px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--ink-2);
	max-width: 560px;
}
body.vv .vv-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 8px 0 0;
}
body.vv .vv-404__links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 12px 0 0;
	padding: 0;
}
body.vv .vv-404__links a {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-2);
	text-decoration: none;
}
body.vv .vv-404__links a:hover { color: var(--sage); }

/* =========================================================================
   8. RESPONSIVE — stack everything, zero horizontal overflow
   ========================================================================= */
@media (max-width: 900px) {
	body.vv .vv-blog__intro { padding-block: 56px 32px; gap: 12px; }
	body.vv .vv-blog--archive .vv-blog__intro,
	body.vv .vv-blog--search .vv-blog__intro { padding-block: 48px 28px; }

	body.vv .vv-featured { padding-bottom: 32px; }
	body.vv .vv-featured__card {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 30px;
		border-radius: var(--radius-card);
	}
	body.vv .vv-featured__title,
	body.vv h2.vv-featured__title { font-size: 25px; }
	body.vv .vv-featured__panel { padding: 22px; }
	body.vv .vv-featured__stat-value { font-size: 30px; }

	body.vv .vv-post-grid__items { grid-template-columns: 1fr; gap: 20px; }
	body.vv .vv-blog .vv-post-grid { padding-bottom: 64px; }
	body.vv .vv-post-card { padding: 28px 26px 26px; }
	body.vv .vv-post-card__title,
	body.vv h2.vv-post-card__title,
	body.vv h3.vv-post-card__title { font-size: 19.5px; }

	body.vv .vv-pagination { margin-top: 32px; gap: 8px; }

	body.vv .vv-article__head { padding-block: 48px 4px; }
	body.vv .vv-article__figure { padding-block: 26px 6px; }
	body.vv .vv-article__image img { aspect-ratio: 3 / 2; border-radius: var(--radius-card); }
	body.vv .vv-article__body { padding-block: 22px 8px; }
	body.vv .vv-article__body .wp-block-post-content > p,
	body.vv .vv-article__body .wp-block-post-content > ul,
	body.vv .vv-article__body .wp-block-post-content > ol { font-size: 16.5px; }
	body.vv .vv-article__body .wp-block-post-content > p:first-child { font-size: 17.5px; }
	body.vv .vv-article__body .wp-block-post-content > blockquote {
		padding-left: 20px;
		font-size: 1.2rem;
	}
	body.vv .vv-more { padding-block: 48px 64px; }
	body.vv .vv-more__title { padding-top: 32px; margin-bottom: 24px; font-size: 24px; }

	body.vv .vv-404__intro { padding-block: 64px 80px; }
	body.vv .vv-404__actions .vv-btn { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
	body.vv .vv-featured__card { padding: 24px; }
	body.vv .vv-featured__stat-value { font-size: 26px; }
	body.vv .vv-pagination a,
	body.vv .vv-pagination .page-numbers,
	body.vv .vv-pagination .wp-block-query-pagination-previous,
	body.vv .vv-pagination .wp-block-query-pagination-next { padding: 10px 12px; font-size: 11.5px; }
}