/* ==========================================================================
   Blog: single.php (.wf-blog--single), home.php (.wf-blog--home),
   archive.php / author.php (.wf-blog--archive).

   Loaded after industry.css (see inc/blog.php), so <main> always carries BOTH
   .wf-industry and .wf-blog -- the hero, section rhythm, card grid and
   .wf-ind-more primitives come from industry.css; everything scoped .wf-blog
   below is this template family's own.

   page.css is added as a dependency only on the posts page and archives, where
   inc/page.php already registers it (the pagination styling comes from there).
   A single post never registers it, so the `.wf-prose` rules this family needs
   are repeated here under .wf-blog -- higher specificity than page.css's own
   bare .wf-prose, so the two never fight where both load.

   SPECIFICITY NOTE -- same as industry.css: Elementor's kit stylesheet ships
   element rules at 0-1-1 (.elementor-kit-6 a / img), so the `body .wf-blog`
   prefix on the resets below is load-bearing, not cosmetic.
   ========================================================================== */

/* ---------- Scope resets ---------- */
body .wf-blog a {
	color: inherit;
	text-decoration: none;
}

body .wf-blog img {
	border-radius: 0;
	max-width: 100%;
	height: auto;
}

.wf-blog [hidden] {
	display: none !important;
}

/* ---------- Prose column (the_content()) ---------- */
.wf-blog .wf-prose {
	max-width: 780px;
}

.wf-blog .wf-prose > :first-child {
	margin-top: 0;
}

.wf-blog .wf-prose > :last-child {
	margin-bottom: 0;
}

.wf-blog .wf-prose p,
.wf-blog .wf-prose li {
	font: 400 1.0625rem/1.7 var(--wf-font-body);
	color: var(--wf-text);
}

.wf-blog .wf-prose p {
	margin: 0 0 1.25em;
}

.wf-blog .wf-prose h2 {
	font: 700 clamp(1.5rem, 3vw, 2rem)/1.15 var(--wf-font-display);
	color: var(--wf-text-dark);
	margin: 1.8em 0 .6em;
	scroll-margin-top: 120px;
}

.wf-blog .wf-prose h3 {
	font: 700 1.375rem/1.25 var(--wf-font-display);
	color: var(--wf-text-dark);
	margin: 1.5em 0 .5em;
	scroll-margin-top: 120px;
}

.wf-blog .wf-prose h4 {
	font: 700 1.125rem/1.3 var(--wf-font-body);
	color: var(--wf-text-dark);
	margin: 1.4em 0 .5em;
}

.wf-blog .wf-prose ul,
.wf-blog .wf-prose ol {
	margin: 0 0 1.25em;
	padding-left: 1.5em;
}

.wf-blog .wf-prose li + li {
	margin-top: .4em;
}

body .wf-blog .wf-prose a {
	color: var(--wf-blue);
	text-decoration: underline;
}

body .wf-blog .wf-prose a:hover,
body .wf-blog .wf-prose a:focus-visible {
	color: var(--wf-cyan);
}

.wf-blog .wf-prose blockquote,
.wf-blog .wf-prose .wp-block-quote {
	margin: 1.75em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--wf-blue);
	font-style: italic;
	color: var(--wf-text-dark);
}

.wf-blog .wf-prose hr {
	margin: 2.5em 0;
	border: 0;
	border-top: 1px solid var(--wf-border);
}

.wf-blog .wf-prose img,
.wf-blog .wf-prose .wp-block-image img {
	display: block;
	border-radius: var(--wf-radius-md);
}

.wf-blog .wf-prose figure {
	margin: 1.75em 0;
}

.wf-blog .wf-prose figcaption {
	margin-top: .6em;
	font: 400 .875rem/1.5 var(--wf-font-body);
	color: var(--wf-text-mute);
	text-align: center;
}

.wf-blog .wf-prose table {
	width: 100%;
	border-collapse: collapse;
	font: 400 .9375rem/1.6 var(--wf-font-body);
}

.wf-blog .wf-prose th,
.wf-blog .wf-prose td {
	padding: 10px 14px;
	border: 1px solid var(--wf-border);
	text-align: left;
	vertical-align: top;
}

.wf-blog .wf-prose th {
	background: var(--wf-bg);
	color: var(--wf-text-dark);
	font-weight: 700;
}

/* ---------- 1. Byline (single) ---------- */
.wf-blog .wf-blog__meta-wrap {
	padding-block: 24px;
	background: var(--wf-white);
	border-bottom: 1px solid var(--wf-border);
}

.wf-blog .wf-blog__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.wf-blog .wf-blog__meta-avatar {
	display: block;
	width: 44px;
	height: 44px;
	flex: none;
	overflow: hidden;
	border-radius: 50%;
	background: var(--wf-bg-blue);
}

.wf-blog .wf-blog__meta-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.wf-blog .wf-blog__meta-text {
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font: 400 .9375rem/1.4 var(--wf-font-body);
	color: var(--wf-text-mute);
}

.wf-blog .wf-blog__meta-by {
	color: var(--wf-text);
}

body .wf-blog .wf-blog__meta-author {
	color: var(--wf-text-dark);
	font-weight: 600;
}

body .wf-blog .wf-blog__meta-author:hover,
body .wf-blog .wf-blog__meta-author:focus-visible {
	color: var(--wf-blue);
}

.wf-blog .wf-blog__meta-date,
.wf-blog .wf-blog__meta-read {
	font-family: var(--wf-font-mono);
	font-size: .8125rem;
	letter-spacing: .02em;
}

.wf-blog .wf-blog__meta-sep {
	color: var(--wf-border);
}

/* ---------- 2. Inline Howler (single) ---------- */
.wf-blog .wf-blog__howler-inline {
	padding-block: clamp(32px, 4vw, 48px);
	background: var(--wf-white);
}

/* ---------- 3. Body: TOC + article ---------- */
.wf-blog .wf-blog__body {
	background: var(--wf-white);
	padding-block: clamp(40px, 5vw, 72px);
}

.wf-blog .wf-blog__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

.wf-blog .wf-blog__layout--no-toc .wf-blog__content {
	margin-inline: auto;
}

.wf-blog .wf-blog__toc-inner {
	padding: 20px;
	background: var(--wf-bg);
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius-md);
}

.wf-blog .wf-blog__toc-label {
	margin: 0 0 12px;
	color: var(--wf-text-mute);
}

.wf-blog .wf-blog__toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.wf-blog .wf-blog__toc-item--h3 {
	padding-left: 14px;
}

body .wf-blog .wf-blog__toc-link {
	font: 500 .875rem/1.4 var(--wf-font-body);
	color: var(--wf-text);
	transition: color var(--wf-dur) var(--wf-ease);
}

body .wf-blog .wf-blog__toc-link:hover,
body .wf-blog .wf-blog__toc-link:focus-visible {
	color: var(--wf-blue);
}

@media (min-width: 1024px) {
	.wf-blog .wf-blog__layout {
		grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
		gap: 56px;
	}

	.wf-blog .wf-blog__layout--no-toc {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Clear the sticky header at whatever height it currently has (the
	   announcement bar collapses/reveals on scroll; header.js keeps
	   --wf-nav-h in step frame by frame). */
	.wf-blog .wf-blog__toc {
		align-self: stretch;
		min-width: 0;
	}

	.wf-blog .wf-blog__toc-inner {
		position: sticky;
		top: calc(var(--wf-nav-h, 76px) + 20px);
		max-height: calc(100dvh - var(--wf-nav-h, 76px) - 40px);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

/* ---------- 4. Share row ---------- */
.wf-blog .wf-blog__share-wrap {
	padding-block: 28px;
	background: var(--wf-white);
}

.wf-blog .wf-blog__share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	max-width: 780px;
	margin-inline: auto;
	padding-block: 20px;
	border-top: 1px solid var(--wf-border);
	border-bottom: 1px solid var(--wf-border);
}

.wf-blog .wf-blog__share-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: 600 .8125rem/1 var(--wf-font-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wf-text-dark);
}

.wf-blog .wf-blog__share-icon {
	width: 1rem;
	height: 1rem;
	color: var(--wf-blue);
}

.wf-blog .wf-blog__share-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .wf-blog .wf-blog__share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 38px;
	min-width: 38px;
	padding: 0 14px;
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius-sm);
	background: var(--wf-white);
	font: 600 .8125rem/1 var(--wf-font-body);
	color: var(--wf-text);
	cursor: pointer;
	transition: border-color var(--wf-dur) var(--wf-ease), color var(--wf-dur) var(--wf-ease), background var(--wf-dur) var(--wf-ease);
}

body .wf-blog .wf-blog__share-btn:hover,
body .wf-blog .wf-blog__share-btn:focus-visible {
	border-color: var(--wf-blue);
	color: var(--wf-blue);
	background: var(--wf-bg);
}

.wf-blog .wf-blog__share-btn-icon {
	width: 1rem;
	height: 1rem;
}

/* ---------- 5. Author box ---------- */
.wf-blog .wf-blog__author-section {
	background: var(--wf-white);
	padding-block: clamp(40px, 5vw, 64px);
}

.wf-blog .wf-blog__author-intro {
	padding-block: clamp(28px, 4vw, 40px);
	background: var(--wf-white);
}

.wf-blog .wf-blog-author {
	max-width: 780px;
	margin-inline: auto;
}

.wf-blog .wf-blog-author__eyebrow {
	margin: 0 0 14px;
}

.wf-blog .wf-blog-author__card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 24px;
	background: var(--wf-bg);
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius-md);
}

.wf-blog .wf-blog-author__media {
	display: block;
	width: 72px;
	height: 72px;
	flex: none;
	overflow: hidden;
	border-radius: 50%;
	background: var(--wf-bg-blue);
}

.wf-blog .wf-blog-author__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.wf-blog .wf-blog-author__body {
	min-width: 0;
}

.wf-blog .wf-blog-author__name {
	margin: 0;
	font: 700 1.125rem/1.3 var(--wf-font-display);
	color: var(--wf-text-dark);
}

body .wf-blog .wf-blog-author__name a {
	color: var(--wf-text-dark);
}

body .wf-blog .wf-blog-author__name a:hover,
body .wf-blog .wf-blog-author__name a:focus-visible {
	color: var(--wf-blue);
}

.wf-blog .wf-blog-author__role {
	margin: 4px 0 0;
	font: 500 .8125rem/1.2 var(--wf-font-mono);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wf-blue);
}

.wf-blog .wf-blog-author__bio {
	margin: 12px 0 0;
	font: 400 .9375rem/1.65 var(--wf-font-body);
	color: var(--wf-text);
}

.wf-blog .wf-blog-author__count {
	margin: 12px 0 0;
	font: 400 .8125rem/1.2 var(--wf-font-body);
	color: var(--wf-text-mute);
}

@media (max-width: 599px) {
	.wf-blog .wf-blog-author__card {
		flex-direction: column;
	}
}

/* ---------- 6. Featured article (posts page) ---------- */
.wf-blog .wf-blog__featured-section {
	background: var(--wf-bg);
	padding-block: clamp(40px, 5vw, 72px);
}

.wf-blog .wf-blog__featured {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	overflow: hidden;
	background: var(--wf-white);
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius-md);
}

.wf-blog .wf-blog__featured-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--wf-navy);
}

.wf-blog .wf-blog__featured-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.wf-blog .wf-blog__featured-body {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 3vw, 40px);
}

.wf-blog .wf-blog__featured-eyebrow {
	margin: 0 0 12px;
}

.wf-blog .wf-blog__featured-cat {
	margin: 0 0 10px;
}

body .wf-blog .wf-blog__featured-cat a {
	color: var(--wf-blue);
}

body .wf-blog .wf-blog__featured-cat a:hover,
body .wf-blog .wf-blog__featured-cat a:focus-visible {
	color: var(--wf-cyan);
}

.wf-blog .wf-blog__featured-title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--wf-text-dark);
}

body .wf-blog .wf-blog__featured-title a {
	color: var(--wf-text-dark);
	transition: color var(--wf-dur) var(--wf-ease);
}

body .wf-blog .wf-blog__featured-title a:hover,
body .wf-blog .wf-blog__featured-title a:focus-visible {
	color: var(--wf-blue);
}

.wf-blog .wf-blog__featured-excerpt {
	margin: 16px 0 0;
	font: 400 1.0625rem/1.7 var(--wf-font-body);
	color: var(--wf-text);
}

.wf-blog .wf-blog__featured-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	font: 400 .875rem/1.2 var(--wf-font-body);
	color: var(--wf-text-mute);
}

body .wf-blog .wf-blog__featured-author {
	color: var(--wf-text-dark);
	font-weight: 600;
}

body .wf-blog .wf-blog__featured-author:hover,
body .wf-blog .wf-blog__featured-author:focus-visible {
	color: var(--wf-blue);
}

.wf-blog .wf-blog__featured-meta time {
	font-family: var(--wf-font-mono);
	font-size: .8125rem;
}

@media (min-width: 860px) {
	.wf-blog .wf-blog__featured {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.wf-blog .wf-blog__featured-media {
		height: 100%;
		aspect-ratio: auto;
		min-height: 320px;
	}

	.wf-blog .wf-blog__featured-body {
		justify-content: center;
	}
}

/* ---------- 7. Category filter ---------- */
.wf-blog .wf-blog__list {
	background: var(--wf-white);
}

.wf-blog .wf-blog__filters {
	margin-bottom: clamp(28px, 3vw, 40px);
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wf-border);
}

.wf-blog .wf-blog__filters-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .wf-blog .wf-blog__filter {
	font: 500 .9375rem/1.3 var(--wf-font-body);
	color: var(--wf-text);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wf-border);
	transition: color var(--wf-dur) var(--wf-ease), text-decoration-color var(--wf-dur) var(--wf-ease);
}

body .wf-blog .wf-blog__filter:hover,
body .wf-blog .wf-blog__filter:focus-visible {
	color: var(--wf-blue);
	text-decoration-color: var(--wf-blue);
}

body .wf-blog .wf-blog__filter.is-current {
	font-weight: 800;
	color: var(--wf-navy);
	text-decoration-color: var(--wf-navy);
	text-decoration-thickness: 2px;
}

/* ---------- 8. Card grid ---------- */
.wf-blog .wf-blog-card__excerpt {
	margin: 12px 0 0;
	font: 400 .9375rem/1.65 var(--wf-font-body);
	color: var(--wf-text);
}

body .wf-blog .wf-ind-blog__cat a {
	color: var(--wf-blue);
}

body .wf-blog .wf-ind-blog__cat a:hover,
body .wf-blog .wf-ind-blog__cat a:focus-visible {
	color: var(--wf-cyan);
}

/* ---------- 9. Empty state ---------- */
.wf-blog .wf-blog__empty {
	max-width: 780px;
	padding-block: 24px;
}

.wf-blog .wf-blog__empty-text {
	margin: 0 0 20px;
	font: 400 1.0625rem/1.7 var(--wf-font-body);
	color: var(--wf-text);
}

/* ---------- 10. Author cards (posts page) ---------- */
.wf-blog .wf-blog__authors-section {
	background: var(--wf-bg);
}

.wf-blog .wf-blog__authors {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wf-blog .wf-blog__author-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 28px 24px;
	background: var(--wf-white);
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius-md);
}

.wf-blog .wf-blog__author-media {
	display: block;
	width: 88px;
	height: 88px;
	margin-bottom: 16px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--wf-bg-blue);
}

.wf-blog .wf-blog__author-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.wf-blog .wf-blog__author-name {
	margin: 0;
	font: 700 1.125rem/1.3 var(--wf-font-display);
	color: var(--wf-text-dark);
}

body .wf-blog .wf-blog__author-name a {
	color: var(--wf-text-dark);
}

body .wf-blog .wf-blog__author-name a:hover,
body .wf-blog .wf-blog__author-name a:focus-visible {
	color: var(--wf-blue);
}

.wf-blog .wf-blog__author-role {
	margin: 6px 0 0;
	font: 500 .75rem/1.2 var(--wf-font-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wf-blue);
}

.wf-blog .wf-blog__author-bio {
	margin: 14px 0 0;
	font: 400 .9375rem/1.6 var(--wf-font-body);
	color: var(--wf-text);
}

.wf-blog .wf-blog__author-count {
	margin: 14px 0 0;
	font: 400 .8125rem/1.2 var(--wf-font-body);
	color: var(--wf-text-mute);
}

@media (max-width: 899px) {
	.wf-blog .wf-blog__authors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.wf-blog .wf-blog__authors {
		grid-template-columns: minmax(0, 1fr);
	}
}