/* Blog index, article, author ============================================== */

.blog__head { padding-top: clamp(28px, 5vw, 56px); padding-bottom: clamp(24px, 4vw, 36px); }
.blog__head .eyebrow { margin-bottom: 18px; }
.blog__crumbs .breadcrumbs ol { margin-bottom: 12px; }
.blog__title { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.2; font-weight: 700; letter-spacing: -.025em; margin-bottom: 16px; max-width: 820px; }
.blog__lead { max-width: 640px; }
.blog__count { font-size: 14px; font-weight: 600; color: var(--hl-muted); }
.blog__lead + .blog__count { margin-top: 12px; }

/* Phones stack search/topics above the list and the rest of the sidebar below it; from 1024px both sit in a right column. */
.blog__layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "filters" "main" "aside"; gap: 28px; padding-bottom: clamp(56px, 8vw, 96px); }
.blog__filters { grid-area: filters; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.blog__main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.blog__aside { grid-area: aside; min-width: 0; }
.blog__aside-inner { display: flex; flex-direction: column; gap: 20px; }
.post-grid.blog__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .post-grid.blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.blog__layout { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto 1fr; grid-template-areas: "main filters" "main aside"; column-gap: 48px; row-gap: 20px; }
	.blog__aside-inner { position: sticky; top: calc(var(--hl-header-h) + 24px); }
	.admin-bar .blog__aside-inner { top: calc(var(--hl-header-h) + 56px); }
}

.blog-search .card__label { display: block; }
.blog-search__field { position: relative; }
.blog-search__input { min-height: 48px; padding-right: 52px; background: #fff; }
.blog-search__btn { position: absolute; top: 2px; right: 2px; bottom: 2px; width: 46px; border: 0; border-radius: 10px; background: none; color: var(--hl-primary); display: flex; align-items: center; justify-content: center; }
.blog-search__btn:hover { background: var(--hl-tint-blue); }
.blog-search__btn .icon { width: 20px; height: 20px; }

.topics__list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.topics__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 16px; border: 1px solid var(--hl-border); border-radius: 999px; background: #fff; color: var(--hl-text); font-size: 14px; font-weight: 500; }
.topics__link:hover { border-color: var(--hl-primary); color: var(--hl-text); text-decoration: none; }
.topics__link[aria-current] { border-color: var(--hl-primary); background: var(--hl-primary); color: #fff; }
.topics__count { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: var(--hl-tint); font-size: 12px; line-height: 1.4; font-weight: 600; text-align: center; color: var(--hl-muted); }
.topics__link[aria-current] .topics__count { background: rgba(255, 255, 255, .2); color: #fff; }
@media (min-width: 1024px) {
	.topics { padding: 18px 12px 12px; background: #fff; border: 1px solid var(--hl-border); border-radius: var(--hl-radius-lg); }
	.topics .card__label { padding: 0 8px; }
	.topics__list { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
	.topics__link { display: flex; justify-content: space-between; padding: 0 8px; border: 0; border-radius: var(--hl-radius-sm); background: none; font-size: 15px; }
	.topics__link:hover { background: var(--hl-tint-select); color: var(--hl-primary); }
	.topics__link[aria-current] { background: var(--hl-tint-blue); color: var(--hl-primary); font-weight: 600; }
	.topics__link[aria-current] .topics__count { background: #fff; color: var(--hl-primary); }
}

.side-latest { padding: 18px 20px 6px; background: #fff; border: 1px solid var(--hl-border); border-radius: var(--hl-radius-lg); }
.side-latest .card__label { margin-bottom: 4px; }
.side-latest__list { list-style: none; }
.side-latest__list li + li { border-top: 1px solid var(--hl-border-soft); }
.side-latest__link { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; color: var(--hl-text); }
.side-latest__link:hover { text-decoration: none; color: var(--hl-primary); }
.side-latest__title { font-size: 15px; line-height: 1.45; font-weight: 600; }
.side-latest__date { font-size: 13px; line-height: 1.4; color: var(--hl-muted); }

.blog__empty { text-align: center; padding: 48px 20px; border: 1px dashed var(--hl-border-strong); border-radius: var(--hl-radius-lg); color: var(--hl-muted); }
.blog__empty-title { margin-bottom: 6px; font-size: 17px; font-weight: 600; color: var(--hl-text); }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.post-card { background: #fff; border: 1px solid var(--hl-border); border-radius: var(--hl-radius-lg); overflow: hidden; }
.post-card:hover { border-color: var(--hl-primary); }
.post-card__link { display: flex; flex-direction: column; height: 100%; color: var(--hl-text); }
.post-card__link:hover { text-decoration: none; color: var(--hl-text); }
.post-card__media { aspect-ratio: 16 / 9; background: var(--soft); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--hl-muted); }
.post-card__badge { padding: 6px 10px; border-radius: var(--hl-radius-sm); background: var(--hl-tint-blue); color: var(--hl-primary); }
.post-card__title { font-size: 21px; line-height: 1.25; font-weight: 700; }
.post-card__title--lg { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.25; letter-spacing: -.015em; }
.post-card__excerpt { font-size: 15px; line-height: 1.6; color: var(--hl-muted); }
.post-card__byline { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--hl-muted); }
.post-card--featured { border-radius: var(--hl-radius-xl); }
.post-card--featured .post-card__body { padding: clamp(20px, 3vw, 32px); gap: 12px; }
.post-card--featured .post-card__excerpt { font-size: 16px; }
.post-card--compact .post-card__body { padding: 18px 20px 22px; gap: 8px; }
.post-card--compact .post-card__title { font-size: 19px; line-height: 1.3; }

.pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 36px; }
.page-numbers { min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--hl-radius); display: flex; align-items: center; justify-content: center; border: 1px solid var(--hl-border); background: #fff; font-weight: 600; font-size: 15px; color: var(--hl-text); }
.page-numbers.current { background: var(--hl-primary); border-color: var(--hl-primary); color: #fff; }
.page-numbers.dots { border: 0; background: none; }

/* Article: one reading column (title, cover and body share its left edge); from 1024px a sticky rail on the right holds the TOC and a test CTA. */
.article__grid {
	max-width: 1160px; margin: 0 auto; padding: 0 var(--hl-gutter) clamp(56px, 8vw, 96px);
	display: grid; grid-template-columns: minmax(0, 720px); justify-content: center;
	grid-template-areas: "crumbs" "head" "cover" "toc" "body" "end";
}
.article__crumbs { grid-area: crumbs; min-width: 0; }
.article__crumbs .breadcrumbs ol { margin: 20px 0 0; }
/* The current title is already the h1, so its crumb stays on one line and is cut short. */
.article__grid .breadcrumbs ol { flex-wrap: nowrap; }
.article__grid .breadcrumbs li { flex: none; white-space: nowrap; }
.article__grid .breadcrumbs li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.article__head { grid-area: head; padding: clamp(12px, 3vw, 32px) 0 28px; }
.article__cat { display: inline-flex; align-items: center; min-height: 32px; margin-bottom: 8px; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--hl-primary); }
.article__cat:hover { color: var(--hl-navy); }
.article__title { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin-bottom: 16px; }
.article__lead { font-size: clamp(17px, 1.8vw, 19px); line-height: 1.6; color: var(--hl-muted); margin-bottom: 24px; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 12px 0; border-top: 1px solid var(--hl-border); border-bottom: 1px solid var(--hl-border); }
.article__facts { font-size: 14px; line-height: 1.5; color: var(--hl-muted); }
.byline { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--hl-text); }
.byline:hover { text-decoration: none; color: var(--hl-primary); }
.byline__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.byline__avatar--mark, .author-box__avatar--mark { background: #fff; border: 1px solid var(--hl-border); padding: 5px; }
.byline__text { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.35; }
.byline__text b { font-weight: 600; }
.byline__job { font-size: 13px; color: var(--hl-muted); }

.article__cover { grid-area: cover; margin: 0 0 clamp(28px, 4vw, 40px); }
/* A hairline keeps light cover art from dissolving into the page background. */
.article__cover img { width: 100%; height: auto; border-radius: var(--hl-radius-lg); box-shadow: 0 0 0 1px var(--hl-border-soft); }

.article-toc { list-style: none; border-left: 2px solid var(--hl-border); display: flex; flex-direction: column; }
.article-toc__link { display: block; margin-left: -2px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.45; color: var(--hl-muted); }
.article-toc__link:hover { color: var(--hl-text); text-decoration: none; }
.article-toc__link.is-active { border-left-color: var(--hl-primary); color: var(--hl-text); font-weight: 600; }

.toc-box { grid-area: toc; margin-bottom: 32px; background: #fff; border: 1px solid var(--hl-border); border-radius: var(--hl-radius-lg); }
.toc-box__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px; font-weight: 600; font-size: 16px; }
.toc-box__summary::-webkit-details-marker { display: none; }
.toc-box__summary::after { content: ""; flex: none; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--hl-primary); border-bottom: 2px solid var(--hl-primary); transform: translateY(-3px) rotate(45deg); transition: transform .15s ease; }
.toc-box[open] > .toc-box__summary::after { transform: translateY(2px) rotate(-135deg); }
.toc-box__count { font-size: 14px; font-weight: 500; color: var(--hl-muted); }
.toc-box .article-toc { margin: 0 18px 16px; }
.toc-box .article-toc__link { display: flex; align-items: center; min-height: 44px; }

.article__body { grid-area: body; min-width: 0; }
.article__body a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
.article__body li::marker { color: var(--hl-primary); }
/* Tables in posts: theme borders instead of the block library's heavy defaults; wide tables scroll inside the figure. */
.article__body .wp-block-table { margin: 24px 0; overflow-x: auto; }
.article__body .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.article__body .wp-block-table th,
.article__body .wp-block-table td { border: 1px solid var(--hl-border); padding: 10px 14px; text-align: left; vertical-align: top; }
.article__body .wp-block-table thead { border-bottom: 0; }
.article__body .wp-block-table thead th { background: var(--hl-tint); border-bottom: 1px solid var(--hl-border-strong); font-weight: 700; color: var(--hl-navy); }
.article__body .wp-block-table tbody tr:nth-child(even) td { background: var(--hl-bg); }

.article__end { grid-area: end; margin-top: clamp(40px, 6vw, 56px); display: flex; flex-direction: column; gap: 28px; }
.article__cta { padding: clamp(20px, 3vw, 28px); border-radius: var(--hl-radius-lg); background: var(--hl-navy); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.article__cta-copy { flex: 1 1 260px; }
.article__cta-title { font-size: 20px; line-height: 1.35; font-weight: 700; margin-bottom: 4px; }
.article__cta-text { font-size: 15px; line-height: 1.5; color: var(--hl-on-navy-muted); }
.article__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.article__foot-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.article__foot-label { font-size: 14px; font-weight: 600; color: var(--hl-muted); }
.article__foot .chip { font-weight: 500; }
.share { display: flex; gap: 8px; flex-wrap: wrap; }
.share__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hl-border); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--hl-text); flex: none; }
.share__btn svg { width: 18px; height: 18px; }
.share__btn--text { font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.share__copy { height: 44px; padding: 0 16px 0 14px; border-radius: 999px; border: 1px solid var(--hl-border); background: #fff; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.share__btn:hover, .share__copy:hover { border-color: var(--hl-primary); color: var(--hl-primary); background: var(--hl-tint-select); text-decoration: none; }
.share__copy.is-copied { border-color: var(--hl-primary); background: var(--hl-primary); color: #fff; }

.author-box { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border-radius: var(--hl-radius-lg); background: #fff; border: 1px solid var(--hl-border); color: var(--hl-text); }
.author-box:hover { border-color: var(--hl-primary); text-decoration: none; color: var(--hl-text); }
.author-box__avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.author-box__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.author-box__label { font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--hl-muted); }
.author-box__name { font-size: 19px; line-height: 1.3; font-weight: 700; }
.author-box__job { font-size: 14px; line-height: 1.45; color: var(--hl-muted); }
.author-box__bio { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--hl-muted); }
@media (max-width: 479.98px) {
	.author-box { padding: 18px; gap: 14px; }
	.author-box__avatar { width: 48px; height: 48px; }
}

.article__rail { display: none; }
.rail-cta { flex: none; padding: 20px; border-radius: var(--hl-radius-lg); background: var(--hl-tint-blue); }
.rail-cta__title { font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--hl-navy); margin-bottom: 4px; }
.rail-cta__text { font-size: 14px; line-height: 1.5; color: var(--hl-muted); margin-bottom: 14px; }

@media (min-width: 1024px) {
	/* space-between pins the reading column to the container edge, so it lines up with the related posts below. */
	.article__grid {
		grid-template-columns: minmax(0, 720px) 272px; column-gap: 48px; justify-content: space-between;
		grid-template-areas: "crumbs crumbs" "head rail" "cover rail" "body rail" "end rail";
	}
	.toc-box { display: none; }
	.article__rail { display: block; grid-area: rail; }
	.article__rail-inner {
		position: sticky; top: calc(var(--hl-header-h) + 24px); padding-top: clamp(12px, 3vw, 32px);
		display: flex; flex-direction: column; gap: 24px; max-height: calc(100vh - var(--hl-header-h) - 48px);
	}
	.admin-bar .article__rail-inner { top: calc(var(--hl-header-h) + 56px); max-height: calc(100vh - var(--hl-header-h) - 80px); }
	/* On short screens the TOC scrolls inside the rail and the CTA stays in view. */
	.article__toc { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
	.article__toc .card__label { letter-spacing: .08em; margin-bottom: 12px; }
}

.article__related { background: #fff; border-top: 1px solid var(--hl-border); padding: clamp(48px, 7vw, 80px) 0; }
.article__related .post-card { background: var(--hl-bg); }

/* Author */
.author-hero { padding-top: clamp(28px, 5vw, 56px); padding-bottom: clamp(32px, 5vw, 48px); display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: center; }
.author-hero__avatar { width: clamp(120px, 16vw, 168px); height: auto; aspect-ratio: 1 / 1; border-radius: 50%; flex: none; }
.author-hero__copy { flex: 1 1 420px; }
.author-hero__copy .eyebrow { margin-bottom: 12px; }
.author-hero__name { font-size: clamp(34px, 5vw, 52px); line-height: 1.2; font-weight: 700; letter-spacing: -.025em; margin-bottom: 10px; }
.author-hero__job { font-size: 16px; color: var(--hl-muted); margin-bottom: 16px; }
.author-hero__bio { font-size: 17px; line-height: 1.65; margin-bottom: 18px; max-width: 640px; }
.author-facts { padding-bottom: clamp(32px, 5vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.author-facts .card { padding: 24px; }
.author-facts .card__label { margin-bottom: 14px; }
.author-facts__list { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.55; }
.author-posts { padding-bottom: clamp(56px, 8vw, 96px); }
.author-posts__count { font-size: 14px; font-weight: 600; color: var(--hl-muted); }
.author-list { list-style: none; border-top: 1px solid var(--hl-border); }
.author-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 18px 0; border-bottom: 1px solid var(--hl-border); }
.author-list a { display: flex; flex-direction: column; gap: 4px; color: var(--hl-text); flex: 1 1 420px; }
.author-list a:hover { text-decoration: none; color: var(--hl-primary); }
.author-list b { font-size: 18px; line-height: 1.35; }
.author-list a span { font-size: 15px; color: var(--hl-muted); }
.author-list__meta { font-size: 14px; color: var(--hl-muted); white-space: nowrap; }