/*
 * Luminary — blog & single styles
 * Polished blog with featured hero, category pills, author cards,
 * reading progress, related posts, single-post full-bleed hero.
 * Shares the landing's dark + Montserrat + grain aesthetic.
 */

/* ── Reading progress (fixed top) ─────────────────────── */
.reading-bar {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: transparent;
	z-index: 800;
	pointer-events: none;
}
.reading-bar-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--silver), var(--ivory));
	transition: width 0.06s linear;
}

/* ── Shared blog wrapper ─────────────────────────────── */
.blog-archive {
	padding: 180px 40px 120px;
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.blog-archive .section-tag,
.blog-archive .section-title,
.blog-archive .section-body { text-align: center; }
.blog-archive .section-title { max-width: 760px; margin-left: auto; margin-right: auto; }
.blog-archive .section-body { max-width: 580px; margin: 16px auto 0; }

/* ── Category pills (filters) ────────────────────────── */
.blog-filters {
	display: flex; justify-content: center; flex-wrap: wrap;
	gap: 10px;
	margin: 56px 0 64px;
}
.blog-filter {
	font-size: 10px; font-weight: 500; letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--slate-warm);
	padding: 10px 18px;
	border: 1px solid var(--panel-border);
	border-radius: 100px;
	text-decoration: none;
	transition: color 0.6s var(--silk-ease), border-color 0.6s var(--silk-ease), background 0.6s var(--silk-ease);
	white-space: nowrap;
}
.blog-filter:hover { color: var(--ivory); border-color: rgba(156, 163, 175, 0.22); }
.blog-filter.is-active {
	color: var(--base-deep);
	background: var(--ivory);
	border-color: var(--ivory);
}
.blog-filter-count {
	margin-left: 6px;
	color: var(--slate-warm);
	font-size: 9px;
	opacity: 0.8;
}
.blog-filter.is-active .blog-filter-count { color: var(--graphite); opacity: 1; }

/* ── Featured post (hero card) ────────────────────────── */
.blog-featured {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 0;
	margin-bottom: 80px;
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	min-height: 460px;
	transition: border-color 0.6s var(--silk-ease);
}
.blog-featured:hover { border-color: rgba(156, 163, 175, 0.2); }
.blog-featured-visual {
	position: relative;
	background: var(--base-mid);
	overflow: hidden;
}
.blog-featured-visual img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.8s var(--silk-ease);
}
.blog-featured:hover .blog-featured-visual img { transform: scale(1.04); }
.blog-featured-visual::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(95deg, transparent 65%, rgba(15, 17, 21, 0.4) 100%);
	pointer-events: none;
}
.blog-featured-body {
	padding: 56px 56px 56px 48px;
	display: flex; flex-direction: column; justify-content: center;
}
.blog-featured-label {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--silver); margin-bottom: 20px;
	width: fit-content;
}
.blog-featured-label::before {
	content: ''; width: 24px; height: 1px;
	background: var(--silver); opacity: 0.6;
}
.blog-featured-title {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--ivory);
	margin-bottom: 20px;
}
.blog-featured-title a { color: inherit; text-decoration: none; transition: color 0.6s var(--silk-ease); }
.blog-featured-title a:hover { color: #fff; }
.blog-featured-excerpt {
	font-size: 15px; line-height: 1.75; color: var(--ivory-muted);
	margin-bottom: 32px;
	max-width: 480px;
}
.blog-featured-meta {
	display: flex; align-items: center; gap: 16px;
	font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--slate-light);
	margin-top: auto;
}
.blog-featured-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--graphite-soft); }
.blog-featured-cta {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--ivory); text-decoration: none;
	margin-top: 24px;
	transition: gap 0.6s var(--silk-ease);
	width: fit-content;
}
.blog-featured-cta::after {
	content: '→'; transition: transform 0.6s var(--silk-ease);
}
.blog-featured-cta:hover { gap: 14px; }
.blog-featured-cta:hover::after { transform: translateX(4px); }

/* ── Blog grid (regular cards) ────────────────────────── */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 28px;
}

.blog-card {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 18px;
	overflow: hidden;
	transition: transform 0.6s var(--silk-ease), border-color 0.6s var(--silk-ease), background 0.6s var(--silk-ease);
	position: relative;
	display: flex; flex-direction: column;
}
.blog-card:hover {
	transform: translateY(-4px);
	border-color: rgba(156, 163, 175, 0.2);
	background: rgba(28, 33, 40, 0.7);
}
.blog-card-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; flex: 1; }
.blog-card-visual {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--base-mid);
	position: relative;
}
.blog-card-visual img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.6s var(--silk-ease);
}
.blog-card:hover .blog-card-visual img { transform: scale(1.06); }
.blog-card-cat-badge {
	position: absolute;
	top: 14px; left: 14px;
	font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--ivory);
	padding: 6px 12px;
	background: rgba(15, 17, 21, 0.72);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 100px;
	z-index: 2;
}
.blog-card-body {
	padding: 26px 28px 28px;
	display: flex; flex-direction: column; flex: 1;
}
.blog-card-meta {
	font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--slate-light); display: flex; align-items: center; gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.blog-card-meta time { color: var(--slate-warm); }
.blog-card-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--graphite-soft); }
.blog-card-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 21px; line-height: 1.3; font-weight: 600;
	color: var(--ivory); margin-bottom: 12px;
	letter-spacing: -0.005em;
}
.blog-card-excerpt {
	font-size: 14px; line-height: 1.7; color: var(--ivory-muted);
	margin-bottom: 22px;
	flex: 1;
}
.blog-card-author {
	display: flex; align-items: center; gap: 12px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--panel-border);
}
.blog-card-author-avatar {
	width: 32px; height: 32px; border-radius: 50%;
	background: linear-gradient(135deg, var(--graphite) 0%, var(--graphite-soft) 100%);
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
	color: var(--ivory); flex-shrink: 0;
	overflow: hidden;
}
.blog-card-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-author-name {
	font-size: 12px; font-weight: 500;
	color: var(--ivory-muted);
	letter-spacing: 0.02em;
}
.blog-card-author-role {
	font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--slate-warm);
}

.blog-empty {
	margin-top: 80px;
	text-align: center;
	color: var(--slate-light);
	font-size: 14px;
}

/* ── Pagination ───────────────────────────────────────── */
.blog-pagination {
	margin-top: 96px;
	display: flex; justify-content: center;
}
.blog-pagination .nav-links {
	display: flex; gap: 8px; list-style: none;
}
.blog-pagination .page-numbers {
	font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
	color: var(--slate-warm);
	padding: 12px 18px; border-radius: 100px;
	border: 1px solid var(--panel-border);
	text-decoration: none;
	transition: color 0.6s var(--silk-ease), border-color 0.6s var(--silk-ease), background 0.6s var(--silk-ease);
}
.blog-pagination .page-numbers:hover { color: var(--ivory); border-color: rgba(156, 163, 175, 0.22); }
.blog-pagination .page-numbers.current {
	background: var(--ivory); color: var(--base-deep); border-color: var(--ivory);
}
.blog-pagination .page-numbers.dots { border-color: transparent; }

/* ── Single post — full-bleed hero ────────────────────── */
.single-post, .single-page {
	position: relative; z-index: 2;
}
.single-hero-cover {
	position: relative;
	min-height: 60vh;
	display: flex; align-items: flex-end;
	padding: 200px 40px 80px;
	overflow: hidden;
	margin: 0;
	background: var(--base-mid);
}
.single-hero-cover .single-hero-bg {
	position: absolute; inset: 0;
	background-position: center; background-size: cover;
	opacity: 0.35;
	filter: saturate(0.7) contrast(1.05);
}
.single-hero-cover::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(15, 17, 21, 0.35) 0%, rgba(15, 17, 21, 0.7) 50%, var(--base-deep) 100%);
	pointer-events: none;
}
.single-hero-cover .single-hero-inner {
	position: relative; z-index: 2;
	max-width: 920px; margin: 0 auto;
	width: 100%;
}

/* Fallback for posts without featured image */
.single-hero-simple {
	padding: 200px 40px 80px;
	max-width: 920px; margin: 0 auto;
}

.single-hero-cat {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--silver);
	margin-bottom: 24px;
	padding: 8px 16px;
	background: rgba(15, 17, 21, 0.55);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 100px;
	text-decoration: none;
}
.single-hero-cat:hover { color: var(--ivory); }

.single-title {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(32px, 5.5vw, 64px);
	line-height: 1.05; font-weight: 700;
	color: var(--ivory); letter-spacing: -0.02em;
	margin: 12px 0 28px;
	max-width: 880px;
}

.single-meta {
	font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--slate-light);
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.single-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--graphite-soft); }
.single-meta-author {
	display: flex; align-items: center; gap: 10px;
}
.single-meta-author-avatar {
	width: 28px; height: 28px; border-radius: 50%;
	background: linear-gradient(135deg, var(--graphite) 0%, var(--graphite-soft) 100%);
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 700; color: var(--ivory);
	overflow: hidden;
}
.single-meta-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.single-meta-author-name { color: var(--ivory-muted); font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-size: 13px; }

/* ── Single content ───────────────────────────────────── */
.single-content {
	max-width: 720px; margin: 0 auto;
	padding: 64px 40px 96px;
	font-size: 17px; line-height: 1.85;
	color: var(--ivory-muted);
}
.single-content > p:first-of-type {
	font-size: 19px; line-height: 1.7;
	color: var(--ivory);
	margin-bottom: 32px;
}
.single-content h2, .single-content h3, .single-content h4 {
	font-family: 'Montserrat', sans-serif; color: var(--ivory); font-weight: 600;
	margin: 56px 0 18px; letter-spacing: -0.01em; line-height: 1.25;
}
.single-content h2 { font-size: 30px; }
.single-content h3 { font-size: 23px; }
.single-content h4 { font-size: 18px; }
.single-content p { margin-bottom: 24px; }
.single-content a { color: var(--ivory); border-bottom: 1px solid var(--graphite-soft); text-decoration: none; transition: border-color 0.4s var(--silk-ease); }
.single-content a:hover { border-color: var(--ivory); }
.single-content strong { color: var(--ivory); font-weight: 600; }
.single-content em { color: var(--silver); font-style: italic; }
.single-content blockquote {
	border-left: 2px solid var(--silver);
	padding: 4px 0 4px 28px;
	margin: 40px 0;
	color: var(--ivory); font-style: italic; font-size: 20px; line-height: 1.55;
}
.single-content blockquote p:last-child { margin-bottom: 0; }
.single-content code, .single-content pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
}
.single-content code { background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; }
.single-content pre {
	background: var(--base-mid);
	padding: 22px 26px; border-radius: 12px;
	border: 1px solid var(--panel-border);
	overflow-x: auto; margin: 28px 0;
	line-height: 1.6;
}
.single-content pre code { background: transparent; padding: 0; }
.single-content ul, .single-content ol { padding-left: 24px; margin-bottom: 28px; }
.single-content li { margin-bottom: 10px; }
.single-content li::marker { color: var(--slate-warm); }
.single-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 28px 0; }
.single-content hr { border: none; border-top: 1px solid var(--panel-border); margin: 56px 0; }

/* ── Tags ─────────────────────────────────────────────── */
.single-tags {
	max-width: 720px; margin: 0 auto;
	padding: 0 40px 24px;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.single-tag {
	font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--slate-warm); padding: 7px 14px; border-radius: 100px;
	border: 1px solid var(--panel-border);
	text-decoration: none;
	transition: color 0.6s var(--silk-ease), border-color 0.6s var(--silk-ease);
}
.single-tag:hover { color: var(--ivory); border-color: rgba(156, 163, 175, 0.22); }

/* ── Author bio box ───────────────────────────────────── */
.single-authorbox {
	max-width: 720px; margin: 56px auto 0;
	padding: 36px 40px;
	border: 1px solid var(--panel-border);
	border-radius: 18px;
	background: var(--panel-bg);
	display: grid; grid-template-columns: 64px 1fr;
	gap: 24px; align-items: center;
}
.single-authorbox-avatar {
	width: 64px; height: 64px; border-radius: 50%;
	background: linear-gradient(135deg, var(--graphite) 0%, var(--graphite-soft) 100%);
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; font-weight: 700; color: var(--ivory);
	overflow: hidden;
}
.single-authorbox-avatar img { width: 100%; height: 100%; object-fit: cover; }
.single-authorbox-name {
	font-size: 16px; font-weight: 600; color: var(--ivory);
	font-family: 'Montserrat', sans-serif; letter-spacing: -0.005em;
}
.single-authorbox-role {
	font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--slate-warm); margin-top: 4px;
}
.single-authorbox-bio {
	font-size: 13px; line-height: 1.7; color: var(--ivory-muted);
	margin-top: 10px;
}

/* ── Single pager (prev/next) ─────────────────────────── */
.single-pager {
	max-width: 920px; margin: 80px auto 0;
	padding: 32px 40px 0;
	border-top: 1px solid var(--panel-border);
	display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.single-pager a {
	display: block; padding: 24px 28px;
	border-radius: 14px;
	border: 1px solid var(--panel-border);
	color: var(--ivory-muted); text-decoration: none;
	font-size: 14px; line-height: 1.45;
	transition: border-color 0.6s var(--silk-ease), color 0.6s var(--silk-ease), background 0.6s var(--silk-ease);
}
.single-pager a:hover { border-color: rgba(156, 163, 175, 0.22); color: var(--ivory); background: rgba(28, 33, 40, 0.5); }
.single-pager-label {
	font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--slate-warm); margin-bottom: 8px;
}
.single-pager > div:last-child a { text-align: right; }

/* ── Related posts ────────────────────────────────────── */
.related-posts {
	max-width: 1280px; margin: 96px auto 0;
	padding: 0 40px 96px;
}
.related-posts-label {
	text-align: center;
	font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--silver); margin-bottom: 12px;
}
.related-posts-title {
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 600; letter-spacing: -0.015em;
	color: var(--ivory); margin-bottom: 56px;
}
.related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

/* ── Comments hardly used but worth styling ──────────── */
.single-comments {
	max-width: 720px; margin: 56px auto 0;
	padding: 32px 40px 0;
	border-top: 1px solid var(--panel-border);
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 980px) {
	.blog-featured { grid-template-columns: 1fr; min-height: 0; }
	.blog-featured-visual { aspect-ratio: 16 / 9; }
	.blog-featured-body { padding: 40px 32px; }
}
@media (max-width: 768px) {
	.blog-archive { padding: 120px 24px 80px; }
	.blog-featured-body { padding: 32px 24px; }
	.blog-featured-title { font-size: 24px; }
	.single-hero-cover, .single-hero-simple { padding: 140px 24px 60px; }
	.single-content { padding: 48px 24px 80px; font-size: 16px; }
	.single-content > p:first-of-type { font-size: 17px; }
	.single-tags { padding: 0 24px 24px; }
	.single-authorbox { margin: 40px 24px 0; padding: 28px 24px; grid-template-columns: 48px 1fr; gap: 16px; }
	.single-authorbox-avatar { width: 48px; height: 48px; font-size: 15px; }
	.single-pager { grid-template-columns: 1fr; padding: 32px 24px 0; }
	.related-posts { padding: 0 24px 80px; }
}