/*
 * Blog — index, archives, single post.
 * Loaded only on blog contexts (inc/blog.php → fns_blog_enqueue). Colour + type
 * come from the scheme / kit tokens so Branding re-skins it and dark schemes just
 * work; never hardcode brand values here. The container reset comes from the
 * global `fns-fullbleed` class (functions.php → fns_body_classes).
 *
 * Tiers follow the kit: band + post titles are DISPLAY (uppercase via the
 * --fnkit-display-* tokens); card titles are ITEM titles (as typed, Title Case).
 */

/* One page ground = the scheme bg (GeneratePress paints #f7f8f9 otherwise). */
body.fns-blog {
	background: var(--wp--preset--color--bg, #ffffff) !important;
	color: var(--wp--preset--color--text, #14181f);
}

/* Transparent header has no hero to sit over here — fall back to a solid bar
 * (same treatment as the 404) so the nav stays readable. */
.fns-blog.fns-header-transparent .site-header,
.fns-blog.fns-header-transparent.fns-header-sticky .site-header {
	position: static;
	background: var(--wp--preset--color--text, #14181f);
}
.fns-scheme-dark.fns-blog.fns-header-transparent .site-header {
	background: var(--wp--preset--color--surface, #161b22);
}

.fns-blog-page {
	width: 100%;
	--fns-blog-muted: var(--wp--preset--color--muted, #5b5e66);
	--fns-blog-card: color-mix(in srgb, currentColor 5%, transparent);
	--fns-blog-line: color-mix(in srgb, currentColor 14%, transparent);
}

/* The page sits inside GeneratePress' .site container (max 1200px), so every
 * row breaks out to the viewport with calc(50% - 50vw), exactly like the section
 * blocks. Clip horizontal overflow at the ROOT (as the kit does) — clipping the
 * page wrapper instead would cut the breakout off at the container edge. */
html { overflow-x: clip; }

/* Same width + gutter formula as the section blocks and the header/footer bars,
 * so the blog's edges line up with every other page. */
.fns-blog-wrap {
	margin-inline: calc(50% - 50vw);
	padding-inline: max(1.5rem, calc((100vw - var(--fnkit-content, 1240px)) / 2));
}
/* Full-bleed bands: the band itself spans the viewport; its inner wrap is then
 * already viewport-wide, so it only needs the gutter (no second breakout). */
.fns-blog-band,
.fns-blog-more {
	margin-inline: calc(50% - 50vw);
}
.fns-blog-band > .fns-blog-wrap,
.fns-blog-more > .fns-blog-wrap {
	margin-inline: 0;
}

/* --- Band header ----------------------------------------------------------- */
.fns-blog-band {
	background: var(--wp--preset--color--text, #14181f);
	color: var(--wp--preset--color--bg, #ffffff);
	padding-block: clamp(3rem, 7vw, 5.5rem);
}
.fns-scheme-dark .fns-blog-band {
	background: var(--wp--preset--color--surface, #161b22);
	color: var(--wp--preset--color--text, #f0f3f6);
}
.fns-blog-band__eyebrow {
	margin: 0 0 0.85rem;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-on-dark, var(--wp--preset--color--accent, #c8102e));
}
.fns-blog-band__eyebrow a { color: inherit; text-decoration: none; }
.fns-blog-band__eyebrow a:hover { text-decoration: underline; }
.fns-blog-band__eyebrow span { margin-inline: 0.5em; opacity: 0.6; }
.fns-blog-band__title {
	margin: 0;
	max-width: 22ch;
	color: inherit;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: var(--fnkit-display-weight, 800);
	text-transform: var(--fnkit-display-case, uppercase);
	letter-spacing: var(--fnkit-display-tracking, -0.01em);
	line-height: 1.02;
	font-size: calc(clamp(2.4rem, 1.4rem + 4vw, 4.5rem) * var(--fns-display-scale, 1));
}
.fns-blog-band__text {
	margin-top: 1.25rem;
	max-width: 60ch;
	font-size: 1.1rem;
	line-height: 1.6;
	opacity: 0.82;
}
.fns-blog-band__text > :last-child { margin-bottom: 0; }

/* --- Listing --------------------------------------------------------------- */
.fns-blog-main { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem); }

.fns-blog-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2.5rem;
}
.fns-blog-cats a {
	padding: 0.45em 1.1em;
	border: 1px solid var(--fns-blog-line);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.fns-blog-cats a:hover { border-color: var(--fnkit-accent-text, var(--wp--preset--color--accent, #c8102e)); }
.fns-blog-cats a[aria-current] {
	background: var(--fnkit-cta-bg, var(--wp--preset--color--accent, #c8102e));
	border-color: transparent;
	color: var(--fnkit-cta-label, #ffffff);
}

.fns-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 960px) { .fns-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fns-post-grid { grid-template-columns: 1fr; } }

/* Card */
.fns-post-card { display: flex; flex-direction: column; margin: 0; }
.fns-post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 6px;
	background: var(--fns-blog-card);
}
.fns-post-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.fns-post-card:hover .fns-post-card__img { transform: scale(1.04); }
.fns-post-card__body { padding-top: 1.1rem; }
.fns-post-card__eyebrow {
	margin: 0 0 0.45rem;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fnkit-accent-text, var(--wp--preset--color--accent, #c8102e));
}
.fns-post-card__title {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0;
}
.fns-post-card__title a { color: var(--fnkit-heading, inherit); text-decoration: none; }
.fns-post-card__title a:hover { color: var(--fnkit-accent-text, var(--wp--preset--color--accent, #c8102e)); }
.fns-post-card__excerpt {
	margin: 0 0 0.9rem;
	line-height: 1.6;
	color: var(--fns-blog-muted);
}
.fns-post-card__meta {
	margin: 0;
	font-size: 0.85rem;
	color: var(--fns-blog-muted);
}
.fns-post-card__meta span { margin-inline: 0.35em; }

/* Featured (latest post, page 1 of the index) — wide split card. */
.fns-post-card--featured {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid var(--fns-blog-line);
}
.fns-post-card--featured .fns-post-card__body { padding-top: 0; }
.fns-post-card--featured .fns-post-card__title {
	font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
	line-height: 1.12;
}
.fns-post-card--featured .fns-post-card__excerpt { font-size: 1.08rem; }
@media (max-width: 800px) {
	.fns-post-card--featured { grid-template-columns: 1fr; }
	.fns-post-card--featured .fns-post-card__body { padding-top: 0.25rem; }
}

/* Pagination */
.fns-blog-pagination { margin-top: clamp(2.5rem, 5vw, 4rem); }
.fns-blog-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}
.fns-blog-pagination .page-numbers {
	min-width: 2.6rem;
	padding: 0.55em 0.9em;
	border: 1px solid var(--fns-blog-line);
	border-radius: 4px;
	text-align: center;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}
.fns-blog-pagination .page-numbers.current {
	background: var(--fnkit-cta-bg, var(--wp--preset--color--accent, #c8102e));
	border-color: transparent;
	color: var(--fnkit-cta-label, #ffffff);
}
.fns-blog-pagination .page-numbers.dots { border-color: transparent; }

/* Empty state */
.fns-blog-empty {
	padding: clamp(3rem, 8vw, 5rem) 1rem;
	text-align: center;
	color: var(--fns-blog-muted);
}
.fns-blog-empty__title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 800;
	font-size: 1.6rem;
	text-transform: uppercase;
	color: var(--fnkit-heading, inherit);
}

/* --- Single post ----------------------------------------------------------- */
.fns-post__band.has-image { padding-bottom: clamp(7rem, 16vw, 13rem); }
.fns-post__title { max-width: 26ch; }
.fns-post__meta {
	margin: 1.4rem 0 0;
	font-size: 0.95rem;
	opacity: 0.8;
}
.fns-post__meta span[aria-hidden] { margin-inline: 0.45em; }

/* Featured image — always a cropped 16:9 frame, pulled up over the band. */
.fns-post__hero {
	margin-block: calc(-1 * clamp(5.5rem, 13vw, 11rem)) 0;
	position: relative;
}
.fns-post__hero-img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.fns-post__hero figcaption {
	margin-top: 0.75rem;
	font-size: 0.85rem;
	color: var(--fns-blog-muted);
}

/* Reading column. Core blocks sit at 720px; wide/full alignments break out. */
/* body.… beats the global .fns-fullbleed .entry-content reset. */
body.fns-blog .fns-post__content {
	max-width: calc(720px + 3rem);
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4rem) 1.5rem 0;
	font-size: 1.125rem;
	line-height: 1.75;
}
.fns-post__content > * { margin-block: 0 1.4em; }
.fns-post__content > :first-child.is-style-default,
.fns-post__content > p:first-child { font-size: 1.25rem; line-height: 1.65; }
.fns-post__content h2,
.fns-post__content h3,
.fns-post__content h4 {
	margin-block: 1.9em 0.6em;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 800;
	line-height: 1.15;
	color: var(--fnkit-heading, inherit);
}
.fns-post__content h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); text-transform: var(--fnkit-heading-case, uppercase); }
.fns-post__content h3 { font-size: 1.4rem; }
.fns-post__content h4 { font-size: 1.15rem; }
.fns-post__content a { color: var(--fnkit-accent-text, var(--wp--preset--color--accent, #c8102e)); text-underline-offset: 0.18em; }
.fns-post__content ul,
.fns-post__content ol { padding-left: 1.3em; }
.fns-post__content li { margin-bottom: 0.4em; }
.fns-post__content blockquote,
.fns-post__content .wp-block-quote {
	margin-inline: 0;
	padding: 0.2em 0 0.2em 1.4em;
	border-left: 4px solid var(--wp--preset--color--accent, #c8102e);
	font-size: 1.3rem;
	font-style: normal;
	font-weight: 600;
	line-height: 1.5;
	background: none;
}
.fns-post__content blockquote cite { display: block; margin-top: 0.6em; font-size: 0.9rem; font-weight: 400; opacity: 0.7; }
.fns-post__content .wp-block-pullquote { border-color: var(--wp--preset--color--accent, #c8102e); }
.fns-post__content img { max-width: 100%; height: auto; border-radius: 6px; }
.fns-post__content figcaption,
.fns-post__content .wp-element-caption {
	margin-top: 0.6em;
	font-size: 0.85rem;
	color: var(--fns-blog-muted);
}
.fns-post__content hr { border: 0; border-top: 1px solid var(--fns-blog-line); margin-block: 2.5em; }
.fns-post__content .alignwide {
	width: min(var(--fnkit-content, 1240px), 100vw - 3rem);
	max-width: none;
	margin-inline: calc(50% - min(var(--fnkit-content, 1240px), 100vw - 3rem) / 2);
}
.fns-post__content .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}
.fns-post__content .alignfull img { border-radius: 0; }
.fns-post__content .alignleft { float: left; margin: 0.3em 1.5em 1em 0; max-width: 50%; }
.fns-post__content .alignright { float: right; margin: 0.3em 0 1em 1.5em; max-width: 50%; }

.fns-post__tags,
.fns-post__nav {
	max-width: 720px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	box-sizing: content-box;
}
.fns-post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-top: 2rem;
}
.fns-post__tags a {
	font-weight: 600;
	color: var(--fns-blog-muted);
	text-decoration: none;
}
.fns-post__tags a:hover { color: var(--fnkit-accent-text, var(--wp--preset--color--accent, #c8102e)); }

.fns-post__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 3rem;
	margin-bottom: clamp(3.5rem, 7vw, 5.5rem);
	padding-top: 2rem;
	border-top: 1px solid var(--fns-blog-line);
}
.fns-post__nav-link {
	display: block;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 700;
	line-height: 1.3;
	color: var(--fnkit-heading, inherit);
	text-decoration: none;
}
.fns-post__nav-link span {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fnkit-accent-text, var(--wp--preset--color--accent, #c8102e));
}
.fns-post__nav-link:hover { color: var(--fnkit-accent-text, var(--wp--preset--color--accent, #c8102e)); }
.fns-post__nav-link.is-next { grid-column: 2; text-align: right; }
@media (max-width: 600px) {
	.fns-post__nav { grid-template-columns: 1fr; }
	.fns-post__nav-link.is-next { grid-column: 1; text-align: left; }
}

/* More posts */
.fns-blog-more {
	padding-block: clamp(3rem, 6vw, 5rem);
	background: var(--fns-blog-card);
}
.fns-blog-more__title {
	margin: 0 0 2rem;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: var(--fnkit-heading-weight, 900);
	text-transform: var(--fnkit-heading-case, uppercase);
	letter-spacing: var(--fnkit-heading-tracking, -0.01em);
	font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem);
	color: var(--fnkit-heading, inherit);
}

/* ---------------------------------------------------------------------------
 * Branding → Base theme. Mirrors what the section blocks do on block pages
 * (style.css body.fns-blocks.fns-base-* + the plugin's .fnkit-mode-* tokens):
 *  - fns-base-dark      (light scheme, Dark base)   → ground = text, ink = bg
 *  - fns-base-filnation (Fil-Nation base)            → charcoal ground, white
 *                        ink, blue gradient band + red gradient "More posts"
 *  - fns-base-light     (dark scheme, Light base)    → ground = text, ink = bg
 * The ground-aware --fnkit-* tokens are re-pointed here so headings, chips,
 * CTAs and accents resolve exactly as they do in a dark/light section.
 * ------------------------------------------------------------------------- */

/* Dark base + Fil-Nation base share the dark token set. */
body.fns-blog.fns-base-dark,
body.fns-blog.fns-base-filnation {
	--fnkit-heading: var(--wp--preset--color--bg, #ffffff);
	--fnkit-cta-bg: var(--wp--preset--color--accent, #c8102e);
	--fnkit-cta-label: var(--wp--preset--color--accent-contrast, #ffffff);
	--fnkit-accent-text: var(--wp--preset--color--accent-on-dark, var(--wp--preset--color--accent, #c8102e));
}
body.fns-blog.fns-base-dark {
	background: var(--wp--preset--color--text, #14181f) !important;
	color: var(--wp--preset--color--bg, #ffffff);
}
.fns-base-dark .fns-blog-page { --fns-blog-muted: color-mix(in srgb, var(--wp--preset--color--bg, #ffffff) 68%, transparent); }
/* Band a step darker than the page so it still reads as a header band. */
.fns-base-dark .fns-blog-band {
	background: color-mix(in srgb, var(--wp--preset--color--text, #14181f) 75%, #000);
}
.fns-base-dark .fns-post__hero-img { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }

/* Fil-Nation base: brand charcoal page, gradients on the two "section" bands. */
body.fns-blog.fns-base-filnation {
	background: #1c1c1c !important;
	color: #ffffff;
	--fnkit-heading: #ffffff;
}
.fns-base-filnation .fns-blog-page { --fns-blog-muted: rgba(255, 255, 255, 0.68); }
.fns-base-filnation .fns-blog-band {
	background: #1c1c1c url( "backgrounds/blue-gradient-bg.webp" ) center / cover no-repeat;
	color: #ffffff;
}
.fns-base-filnation .fns-blog-more {
	background: #1c1c1c url( "backgrounds/red-gradient-bg.webp" ) center / cover no-repeat;
}
.fns-base-filnation .fns-post__hero-img { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }

/* Light base on a DARK scheme: invert to a light ground (scheme text token is
 * the light colour there), ink = the scheme's dark bg. */
body.fns-blog.fns-base-light {
	background: var(--wp--preset--color--text, #f0f3f6) !important;
	color: var(--wp--preset--color--bg, #0d1117);
	--fnkit-heading: var(--wp--preset--color--accent-2-ink, #1d4486);
	--fnkit-cta-bg: var(--wp--preset--color--accent-2, #1d4486);
	--fnkit-cta-label: var(--wp--preset--color--accent-2-contrast, #ffffff);
	--fnkit-accent-text: var(--wp--preset--color--accent, #c8102e);
}
.fns-base-light .fns-blog-page { --fns-blog-muted: color-mix(in srgb, var(--wp--preset--color--bg, #0d1117) 68%, transparent); }
.fns-scheme-dark.fns-base-light .fns-blog-band {
	background: var(--wp--preset--color--bg, #0d1117);
	color: var(--wp--preset--color--text, #f0f3f6);
}