/*
 * Blog: index (journal hero + featured post + grid), category
 * archive, single post (meta, sharing, prev/next, related), search
 * results. post-card / archive-header base styles live in layout.css
 * (used site-wide); this file covers everything blog-specific.
 */

/* ---- Journal hero (blog index header — breadcrumb + title only) ---- */
.journal-hero {
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-8);
}

.journal-hero__inner .breadcrumbs {
	margin-bottom: var(--space-2);
}

.journal-hero__title {
	font-size: var(--fs-3xl);
	margin: 0;
}

/* ---- Category filter pills ---- */
.blog-categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
}

.blog-categories__link {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-full);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-ink-muted);
	transition: border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard);
}

.blog-categories__link:hover {
	border-color: var(--color-ink);
	color: var(--color-ink);
}

.blog-categories__link.is-active {
	background: var(--color-ink-solid);
	border-color: var(--color-ink-solid);
	color: #fff;
}

/* ---- Featured post (magazine-cover hero card) ---- */
.featured-post {
	margin-bottom: var(--space-10);
}

.featured-post__link {
	position: relative;
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.featured-post__media {
	position: relative;
	aspect-ratio: 21 / 10;
	background: var(--color-bg-alt);
}

.featured-post__media--no-image {
	background: linear-gradient(135deg, var(--color-ink-solid), var(--color-accent-dark));
}

.featured-post__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-standard);
}

.featured-post__link:hover .featured-post__media img {
	transform: scale(1.05);
}

.featured-post__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.82) 100%);
}

.featured-post__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--space-8);
	max-width: 720px;
	color: #fff;
}

.featured-post__badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background: var(--color-accent);
	color: var(--color-accent-ink);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: var(--space-3);
}

.featured-post__meta .post-meta {
	color: rgba(255, 255, 255, 0.78);
	margin-bottom: var(--space-2);
}

.featured-post__meta .post-meta__dot {
	color: rgba(255, 255, 255, 0.4);
}

.featured-post__title {
	font-size: var(--fs-3xl);
	color: #fff;
	margin: 0 0 var(--space-3);
}

.featured-post__excerpt {
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: var(--space-4);
	line-height: var(--lh-relaxed);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.featured-post__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding-bottom: 2px;
}

.featured-post__cta svg {
	width: 16px;
	height: 16px;
	transition: transform var(--duration-fast) var(--ease-standard);
}

.featured-post__link:hover .featured-post__cta svg {
	transform: translateX(4px);
}

.blog-grid {
	margin-bottom: var(--space-8);
}

/* ---- Pagination (WP default markup from the_posts_pagination() /
   the_comments_pagination()) ---- */
.pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-10);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-ink-muted);
	transition: border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard);
}

a.page-numbers:hover {
	border-color: var(--color-ink);
	color: var(--color-ink);
}

.page-numbers.current {
	background: var(--color-ink-solid);
	border-color: var(--color-ink-solid);
	color: #fff;
}

.page-numbers.dots {
	border-color: transparent;
	color: var(--color-ink-faint);
}

.page-numbers.prev,
.page-numbers.next {
	padding-inline: var(--space-5);
	font-weight: var(--fw-semibold);
}

/* ---- Empty state ----
   Moved to components.css (sitewide) — the Wishlist page reuses this
   same component but is a plain WP Page, so it never enqueues this
   stylesheet. */

/* ---- Post meta (shared partial) ---- */
.post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-ink-muted);
	margin-bottom: var(--space-2);
}

.post-meta__category {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-right: var(--space-2);
}

.post-meta__dot {
	color: var(--color-border-strong);
}

/* ---- Single post ---- */
/* No extra max-width here — like every other template (shop, product,
   homepage sections), this rides on .container's own unconstrained
   width (--container-max: 100%) rather than adding a second, narrower
   cap on top of it. */

.single-post__header {
	margin-bottom: var(--space-6);
}

.single-post__header .breadcrumbs {
	margin-bottom: var(--space-4);
}

.single-post__header .post-meta {
	margin-bottom: 0;
}

.single-post__title {
	font-size: var(--fs-4xl);
}

.single-post__thumbnail {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.single-post__thumbnail img {
	/* The 'sls-hero' size isn't a hard crop, so a tall source photo used
	   to render at its full natural height (a huge banner dominating
	   the page). Framing it to a fixed blog-header ratio keeps every
	   post's hero a consistent, sane height regardless of the source
	   image's own proportions. */
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.single-post__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--space-10);
	align-items: start;
}

.single-post__body {
	/* Fills the full available width of its 1fr grid track (overrides
	   the generic .single-post__body/.page-content__body 72ch cap in
	   layout.css, which is tuned for a sidebar-free page). */
	max-width: 100%;
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
}

.single-post__body > * + * {
	margin-top: var(--space-4);
}

/* Content headings read one step down from the sitewide h1-h6 scale
   (base.css) — that scale is tuned for display/marketing headlines,
   which reads oversized for in-article headings at this column width. */
.single-post__body h2 {
	margin-top: var(--space-8);
	font-size: var(--fs-2xl);
}

.single-post__body h3 {
	margin-top: var(--space-6);
	font-size: var(--fs-xl);
}

.single-post__body h4 {
	margin-top: var(--space-5);
	font-size: var(--fs-lg);
}

.single-post__body h5,
.single-post__body h6 {
	margin-top: var(--space-5);
	font-size: var(--fs-md);
}

/* ---- Lists ---- */
.single-post__body ul,
.single-post__body ol {
	margin: var(--space-4) 0;
	padding-left: var(--space-6);
}

.single-post__body ul {
	list-style: disc;
}

.single-post__body ol {
	list-style: decimal;
}

.single-post__body ul ul,
.single-post__body ol ol,
.single-post__body ul ol,
.single-post__body ol ul {
	margin: var(--space-2) 0 0;
}

.single-post__body li + li {
	margin-top: var(--space-2);
}

.single-post__body li {
	padding-left: var(--space-1);
}

/* ---- Links (base.css resets `a` to invisible sitewide; content links
   need to read as links) ---- */
.single-post__body a:not(.btn):not(.icon-btn) {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--duration-fast) var(--ease-standard);
}

.single-post__body a:not(.btn):not(.icon-btn):hover {
	color: var(--color-accent-dark);
}

.single-post__body blockquote {
	margin: var(--space-6) 0;
	padding-left: var(--space-5);
	border-left: 3px solid var(--color-accent);
	font-style: italic;
	color: var(--color-ink-muted);
}

.single-post__body img {
	border-radius: var(--radius-md);
}

.single-post__body figure {
	margin: var(--space-6) 0;
}

.single-post__body figcaption {
	margin-top: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-ink-faint);
	text-align: center;
}

/* ---- Tables ---- */
.single-post__body table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--space-6) 0;
	font-size: var(--fs-sm);
}

.single-post__body th,
.single-post__body td {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	text-align: left;
}

.single-post__body th {
	background: var(--color-bg-alt);
	font-weight: var(--fw-semibold);
}

/* ---- Inline code / code blocks ---- */
.single-post__body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--color-bg-alt);
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
}

.single-post__body pre {
	margin: var(--space-6) 0;
	padding: var(--space-5);
	background: var(--color-ink-solid);
	color: #fff;
	border-radius: var(--radius-md);
	overflow-x: auto;
}

.single-post__body pre code {
	background: none;
	padding: 0;
	color: inherit;
}

.single-post__body hr {
	margin: var(--space-8) 0;
	border: none;
	border-top: 1px solid var(--color-border);
}

.single-post__aside {
	position: sticky;
	top: calc(var(--header-height) + var(--space-4));
}

/* ---- Share row (end of post content, left column) ---- */
.post-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-10);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.post-share__label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-ink-faint);
}

.post-share__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.post-share .icon-btn.is-copied {
	color: var(--color-success);
}

/* ---- Sidebar (Search / Recent Posts / Categories / CTA) ---- */
.blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.blog-sidebar__widget {
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.blog-sidebar__title {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-ink-faint);
	margin-bottom: var(--space-4);
}

.blog-sidebar .search-form__row {
	gap: var(--space-2);
}

.blog-sidebar__recent-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.blog-sidebar__recent-item + .blog-sidebar__recent-item {
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.blog-sidebar__recent-link {
	display: flex;
	gap: var(--space-3);
	align-items: center;
}

.blog-sidebar__recent-media {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-alt);
}

.blog-sidebar__recent-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-sidebar__recent-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.blog-sidebar__recent-title {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-ink);
	line-height: var(--lh-snug);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color var(--duration-fast) var(--ease-standard);
}

.blog-sidebar__recent-link:hover .blog-sidebar__recent-title {
	color: var(--color-accent);
}

.blog-sidebar__recent-date {
	font-size: var(--fs-xs);
	color: var(--color-ink-faint);
}

.blog-sidebar__cat-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.blog-sidebar__cat-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding-block: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-ink-muted);
	border-bottom: 1px solid var(--color-border);
	transition: color var(--duration-fast) var(--ease-standard);
}

.blog-sidebar__cat-list li:last-child .blog-sidebar__cat-link {
	border-bottom: none;
}

.blog-sidebar__cat-link:hover {
	color: var(--color-ink);
}

.blog-sidebar__cat-count {
	font-size: var(--fs-xs);
	color: var(--color-ink-faint);
}

.blog-sidebar__widget--cta {
	padding: 0;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.blog-sidebar__cta {
	padding: var(--space-6) var(--space-5);
}

.blog-sidebar__cta-eyebrow {
	display: block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-2);
}

.blog-sidebar__cta-title {
	font-size: var(--fs-lg);
	margin-bottom: var(--space-2);
}

.blog-sidebar__cta-text {
	font-size: var(--fs-sm);
	color: var(--color-ink-muted);
	margin-bottom: var(--space-5);
	line-height: var(--lh-relaxed);
}

/* ---- Prev/Next nav ---- */
.single-post__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	margin-top: var(--space-10);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.single-post__nav-next {
	text-align: right;
}

.single-post__nav a {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-ink-muted);
}

.single-post__nav a:hover {
	color: var(--color-ink);
}

/* ---- Related posts ---- */
.related-posts {
	margin-top: var(--space-10);
	padding-top: var(--space-10);
	border-top: 1px solid var(--color-border);
}

.related-posts__title {
	margin-bottom: var(--space-6);
}

/* ---- Search page ---- */
.search-page-form {
	max-width: 480px;
	margin-top: var(--space-5);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.featured-post__content {
		max-width: none;
		padding: var(--space-6);
	}

	.featured-post__title {
		font-size: var(--fs-2xl);
	}

	.single-post__layout {
		grid-template-columns: 1fr;
	}

	.single-post__body {
		max-width: none;
	}

	.single-post__aside {
		position: static;
		order: 1;
	}

	.blog-sidebar {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.blog-sidebar__widget {
		flex: 1 1 260px;
	}

	.single-post__title {
		font-size: var(--fs-3xl);
	}
}

@media (max-width: 560px) {
	.blog-sidebar {
		flex-direction: column;
	}
}

@media (max-width: 640px) {
	.blog-grid,
	.related-posts .grid--3 {
		grid-template-columns: 1fr;
	}

	.single-post__nav {
		grid-template-columns: 1fr;
	}

	.single-post__nav-next {
		text-align: left;
	}

	.featured-post__media {
		aspect-ratio: 4 / 5;
	}

	.featured-post__content {
		padding: var(--space-5);
	}

	.featured-post__excerpt {
		-webkit-line-clamp: 3;
	}

	/* Edge-to-edge horizontal scroll instead of wrapping into several
	   rows of pills, which eats a lot of vertical space on a phone. */
	.blog-categories {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(var(--container-padding) * -1);
		padding-inline: var(--container-padding);
		padding-bottom: var(--space-2);
		scrollbar-width: none;
	}

	.blog-categories::-webkit-scrollbar {
		display: none;
	}

	.blog-categories__link {
		flex-shrink: 0;
	}
}