/**
 * LOVSETTI Journal (Blog) styles. Enqueued only on Journal contexts --
 * the posts page, category archives and single articles (see
 * lovsetti_theme_blog_assets() in functions.php).
 *
 * Every selector is scoped under .ls-blog so nothing here can reach Home,
 * Furniture, Outdoor, Projects, About, Contact or Get a Quote. No new
 * design system is introduced: colors, spacing, containers, buttons and
 * type all come from the existing tokens in base.css / components.css.
 * Consistent with the rest of the site there are no rounded corners, no
 * box-shadows, no card borders and no scroll animations.
 */

.ls-blog {
	--ls-blog-measure: 820px;
	--ls-blog-hero-space: clamp(72px, 40px + 6vw, 140px);
	--ls-blog-rule: var(--ls-border-light);

	/* Warm charcoal used by the archive hero and the closing CTA -- the same
	 * dark tone the Contact hero falls back to, so the two read as one
	 * family rather than a Blog-only colour. */
	--ls-blog-dark: #201F1F;
	--ls-blog-dark-grad: linear-gradient(180deg, #33302B 0%, #201F1F 100%);
	--ls-blog-on-dark: #F7F5F1;

	/* Tinted band behind the filter + article grid, which is what separates
	 * the archive from the featured section above it. */
	--ls-blog-band-bg: var(--ls-surface-soft);
	--ls-blog-card-bg: var(--ls-surface);
	--ls-blog-card-radius: 2px;

	background: var(--ls-bg);
	overflow-x: hidden;
}

/* The one ratio the existing set doesn't cover, kept scoped to .ls-blog so
 * it stays a Journal detail rather than a new sitewide primitive.
 * .ls-ratio itself (position/overflow/soft background) and .ls-ratio img
 * (absolute + object-fit: cover) already come from components.css. */
.ls-blog .ls-ratio-16-10 {
	aspect-ratio: 16 / 10;
}

/* ===== Shared meta line (category / month year) ===== */
.ls-blog-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ls-space-2);
	margin: 0 0 var(--ls-space-3);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ls-text-soft);
}

.ls-blog-meta__category {
	color: var(--ls-text);
	border-bottom: 1px solid transparent;
	transition: border-color var(--ls-transition-fast);
}

.ls-blog-meta__category:hover,
.ls-blog-meta__category:focus-visible {
	border-bottom-color: var(--ls-text);
}

.ls-blog-meta__sep {
	color: var(--ls-border);
}

/* ===== Hero =====
 * Compact full-width charcoal band (~240px desktop, not a tall photographic
 * hero), centred, giving a hard contrast edge against the warm body below. */
.ls-blog-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	padding-block: var(--ls-space-7);
	background: var(--ls-blog-dark-grad);
	overflow: hidden;
	text-align: center;
}

.ls-blog-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.ls-blog-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ls-blog-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(24, 24, 24, 0.48) 0%, rgba(24, 24, 24, 0.68) 100%);
}

.ls-blog-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 780px;
}

.ls-blog-hero__eyebrow {
	margin-bottom: var(--ls-space-3);
	color: rgba(247, 245, 241, 0.62);
}

.ls-blog-hero__title {
	font-size: clamp(26px, 16px + 1.9vw, 44px);
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--ls-blog-on-dark);
	margin: 0 0 var(--ls-space-4);
	overflow-wrap: break-word;
}

.ls-blog-hero__text {
	max-width: 620px;
	margin-inline: auto;
	margin-bottom: 0;
	font-size: clamp(15px, 14px + 0.3vw, 17px);
	line-height: 1.65;
	color: rgba(247, 245, 241, 0.8);
}

/* ===== Featured band ===== */
.ls-blog-featured {
	/* ~56px under the hero, ~72px before the tinted band -- the content
	 * starts soon after the hero rather than after a large gap. */
	padding-top: var(--ls-space-7);
	padding-bottom: 72px;
}

.ls-blog-featured__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ls-space-6);
}

/* The featured article is a real card here so it dominates the section. */
.ls-blog-featured__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--ls-blog-card-bg);
	border: 1px solid var(--ls-border-light);
	border-radius: var(--ls-blog-card-radius);
	overflow: hidden;
}

.ls-blog-featured__media {
	display: block;
	margin-bottom: 0;
}

.ls-blog-featured__body {
	padding: var(--ls-space-6);
}

.ls-blog-featured__title {
	font-size: clamp(24px, 14px + 1.9vw, 40px);
	line-height: 1.14;
	letter-spacing: -0.01em;
	margin: 0 0 var(--ls-space-4);
}

.ls-blog-featured__title a {
	border-bottom: 1px solid transparent;
	transition: border-color var(--ls-transition-fast);
}

.ls-blog-featured__title a:hover,
.ls-blog-featured__title a:focus-visible {
	border-bottom-color: var(--ls-text);
}

.ls-blog-featured__excerpt {
	max-width: 560px;
	margin: 0 0 var(--ls-space-5);
	color: var(--ls-text-muted);
	line-height: 1.7;
}

/* ===== Latest articles list (no cards, simple rules) ===== */
.ls-blog-latest__title,
.ls-blog-related__title {
	font-size: 12px;
	font-weight: var(--ls-font-weight-medium);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ls-text);
	margin: 0 0 var(--ls-space-5);
	padding-bottom: var(--ls-space-3);
	border-bottom: 1px solid var(--ls-border);
}

.ls-blog-latest__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ls-blog-latest__item {
	padding-block: var(--ls-space-4);
	border-bottom: 1px solid var(--ls-blog-rule);
}

.ls-blog-latest__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ls-blog-latest__date {
	display: block;
	margin-bottom: var(--ls-space-2);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ls-text-soft);
}

.ls-blog-latest__headline {
	font-size: 17px;
	font-weight: var(--ls-font-weight-light);
	line-height: 1.35;
	margin: 0;
}

.ls-blog-latest__headline a {
	border-bottom: 1px solid transparent;
	transition: border-color var(--ls-transition-fast);
}

.ls-blog-latest__headline a:hover,
.ls-blog-latest__headline a:focus-visible {
	border-bottom-color: var(--ls-text);
}

/* ===== Tinted archive band (filter + grid + pagination) ===== */
.ls-blog-band {
	background: var(--ls-blog-band-bg);
	padding-block: var(--ls-space-7);
}

/* ===== Category filter =====
 * The one place on the site that uses pills, deliberately: it reads as a
 * control row rather than as content. Active is the brand charcoal.
 */
.ls-blog-filter__list {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--ls-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
	/* Small screens scroll horizontally rather than wrapping into a block. */
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ls-blog-filter__list::-webkit-scrollbar {
	display: none;
}

.ls-blog-filter__item {
	flex: 0 0 auto;
}

.ls-blog-filter__link {
	display: inline-block;
	padding: var(--ls-space-2) var(--ls-space-4);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ls-text-muted);
	background: var(--ls-surface);
	border: 1px solid var(--ls-border-light);
	border-radius: 999px;
	transition: color var(--ls-transition-fast), background var(--ls-transition-fast),
		border-color var(--ls-transition-fast);
}

.ls-blog-filter__link:hover,
.ls-blog-filter__link:focus-visible {
	color: var(--ls-text);
	border-color: var(--ls-border);
}

.ls-blog-filter__link.is-current {
	color: var(--ls-white);
	background: var(--ls-blog-dark);
	border-color: var(--ls-blog-dark);
}

/* ===== Article grid ===== */
.ls-blog-list {
	padding-top: var(--ls-space-6);
}

.ls-blog-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ls-space-5);
	/* Equal-height cards across each row; content aligns from the top and
	 * Read More is pinned to the bottom (see .ls-blog-card__link). */
	align-items: stretch;
}

.ls-blog-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	background: var(--ls-blog-card-bg);
	border: 1px solid var(--ls-border-light);
	border-radius: var(--ls-blog-card-radius);
	overflow: hidden;
}

.ls-blog-card__media {
	display: block;
	margin-bottom: 0;
}

.ls-blog-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--ls-space-5);
}

.ls-blog-card__title {
	font-size: clamp(19px, 15px + 0.5vw, 23px);
	font-weight: var(--ls-font-weight-light);
	line-height: 1.25;
	margin: 0 0 var(--ls-space-3);
	overflow-wrap: break-word;
}

.ls-blog-card__title a {
	border-bottom: 1px solid transparent;
	transition: border-color var(--ls-transition-fast);
}

.ls-blog-card__title a:hover,
.ls-blog-card__title a:focus-visible {
	border-bottom-color: var(--ls-text);
}

.ls-blog-card__excerpt {
	margin: 0 0 var(--ls-space-4);
	font-size: 15px;
	color: var(--ls-text-muted);
	line-height: 1.65;
	/* Keeps every card's excerpt to a comparable block so the Read More
	 * links line up across a row. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ls-blog-card__link {
	margin-top: auto;
	align-self: flex-start;
}

.ls-blog-card--compact .ls-blog-card__title {
	font-size: 18px;
}

/* ===== Empty state =====
 * Sized so the "just getting started" message sits in a compact band rather
 * than a tall empty one: its own padding is the entire gap on both sides
 * (the CTA's usual top margin is removed directly below it, see the CTA
 * section), so the space under the text does not stack up twice. */
.ls-blog-empty {
	padding-block: 76px;
}

.ls-blog-empty__title {
	font-size: clamp(20px, 16px + 0.6vw, 26px);
	font-weight: var(--ls-font-weight-light);
	margin-bottom: var(--ls-space-3);
}

.ls-blog-empty__text {
	margin: 0;
	color: var(--ls-text-muted);
}

/* ===== Pagination ===== */
.ls-blog-pagination {
	padding-top: var(--ls-space-6);
}

.ls-blog-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ls-space-4);
	list-style: none;
	margin: 0;
	padding-top: var(--ls-space-5);
	border-top: 1px solid var(--ls-border-light);
}

.ls-blog-pagination__item .page-numbers {
	display: inline-block;
	padding-block: var(--ls-space-1);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ls-text-muted);
	border-bottom: 1px solid transparent;
	transition: color var(--ls-transition-fast), border-color var(--ls-transition-fast);
}

.ls-blog-pagination__item a.page-numbers:hover,
.ls-blog-pagination__item a.page-numbers:focus-visible {
	color: var(--ls-text);
	border-bottom-color: var(--ls-text);
}

.ls-blog-pagination__item .page-numbers.current {
	color: var(--ls-text);
	border-bottom-color: var(--ls-text);
}

.ls-blog-pagination__item .page-numbers.dots {
	letter-spacing: 0.08em;
}

/* ===== Single article ===== */
.ls-article__measure {
	max-width: calc(var(--ls-blog-measure) + (var(--ls-container-padding) * 2));
	margin-inline: auto;
}

.ls-article__header {
	padding-top: var(--ls-blog-hero-space);
	padding-bottom: var(--ls-space-6);
}

.ls-article__title {
	font-size: clamp(30px, 19px + 2.6vw, 54px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 var(--ls-space-5);
	overflow-wrap: break-word;
}

.ls-article__intro {
	margin: 0;
	font-size: clamp(17px, 15px + 0.4vw, 20px);
	line-height: 1.65;
	color: var(--ls-text-muted);
}

.ls-article__figure {
	margin: 0 0 var(--ls-space-8);
}

/* The image runs wider than the reading measure, which is the usual
 * editorial relationship -- but still inside the site container. */
.ls-article__figure-inner {
	max-width: 1100px;
}

/* ===== Long-form content ===== */
.ls-article__content {
	padding-bottom: var(--ls-space-8);
	font-size: clamp(16px, 15px + 0.35vw, 18px);
	line-height: 1.85;
	color: var(--ls-text);
}

.ls-article__content > * {
	max-width: 100%;
}

.ls-article__content p {
	margin: 0 0 var(--ls-space-5);
}

.ls-article__content h2 {
	font-size: clamp(23px, 17px + 1.1vw, 32px);
	line-height: 1.2;
	margin: var(--ls-space-8) 0 var(--ls-space-4);
}

.ls-article__content h3 {
	font-size: clamp(19px, 16px + 0.6vw, 24px);
	line-height: 1.25;
	margin: var(--ls-space-7) 0 var(--ls-space-3);
}

.ls-article__content h2:first-child,
.ls-article__content h3:first-child {
	margin-top: 0;
}

.ls-article__content ul,
.ls-article__content ol {
	margin: 0 0 var(--ls-space-5);
	padding-left: var(--ls-space-5);
}

.ls-article__content li {
	margin-bottom: var(--ls-space-2);
}

.ls-article__content a:not(.ls-btn) {
	border-bottom: 1px solid var(--ls-border);
	transition: border-color var(--ls-transition-fast);
}

.ls-article__content a:not(.ls-btn):hover,
.ls-article__content a:not(.ls-btn):focus-visible {
	border-bottom-color: var(--ls-text);
}

.ls-article__content blockquote {
	margin: var(--ls-space-7) 0;
	padding-left: var(--ls-space-5);
	border-left: 1px solid var(--ls-border);
	font-size: clamp(19px, 16px + 0.7vw, 26px);
	font-weight: var(--ls-font-weight-light);
	line-height: 1.4;
	color: var(--ls-text);
}

.ls-article__content blockquote p:last-child {
	margin-bottom: 0;
}

.ls-article__content img,
.ls-article__content figure {
	margin-block: var(--ls-space-6);
	height: auto;
}

.ls-article__content figcaption,
.ls-article__content .wp-caption-text {
	margin-top: var(--ls-space-2);
	font-size: 13px;
	color: var(--ls-text-soft);
}

.ls-article__content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--ls-space-5);
}

.ls-article__content th,
.ls-article__content td {
	padding: var(--ls-space-3);
	border-bottom: 1px solid var(--ls-blog-rule);
	text-align: left;
}

/* ===== Previous / next ===== */
.ls-article__nav {
	padding-block: var(--ls-space-6);
}

.ls-article__nav-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ls-space-5);
	padding-top: var(--ls-space-6);
	border-top: 1px solid var(--ls-blog-rule);
}

.ls-article__nav-link {
	display: block;
	min-width: 0;
}

.ls-article__nav-label {
	display: block;
	margin-bottom: var(--ls-space-2);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ls-text-soft);
}

.ls-article__nav-title {
	display: block;
	font-size: 17px;
	font-weight: var(--ls-font-weight-light);
	line-height: 1.35;
	border-bottom: 1px solid transparent;
	transition: border-color var(--ls-transition-fast);
}

.ls-article__nav-link:hover .ls-article__nav-title,
.ls-article__nav-link:focus-visible .ls-article__nav-title {
	border-bottom-color: var(--ls-text);
}

/* ===== Related articles ===== */
.ls-blog-related {
	padding-block: var(--ls-space-8);
}

/* ===== Closing CTA =====
 * Reuses the shared catalog-cta block markup, restyled to a wide charcoal
 * panel. Every rule is scoped under .ls-blog and blog.css only loads on
 * Journal pages, so Furniture / Outdoor / Products keep the soft CTA
 * exactly as it was.
 */
/* The section itself becomes the container, so the dark panel's edges line
 * up exactly with the article grid above it at every width rather than
 * running edge-to-edge below 1320px. */
.ls-blog .ls-catalog-cta {
	max-width: var(--ls-container-max);
	margin-inline: auto;
	margin-top: 80px;
	margin-bottom: var(--ls-space-8);
	padding-block: 0;
	padding-inline: var(--ls-container-padding);
}

/* Directly after the empty state the CTA drops its top margin, so the gap
 * there is the empty state's padding alone rather than padding + margin
 * stacked. The populated archive keeps the full 80px margin above. */
.ls-blog .ls-blog-empty + .ls-catalog-cta {
	margin-top: 0;
}

.ls-blog .ls-catalog-cta--soft {
	background: transparent;
}

.ls-blog .ls-catalog-cta__inner {
	position: relative;
	z-index: 1;
	max-width: none;
	padding: var(--ls-space-6);
	background: var(--ls-blog-dark-grad);
	border-radius: var(--ls-blog-card-radius);
}

.ls-blog .ls-blog-cta--has-image {
	position: relative;
	overflow: hidden;
}

.ls-blog .ls-blog-cta--has-image .ls-catalog-cta__inner {
	background: transparent;
}

.ls-blog-cta__media {
	position: absolute;
	inset: 0 var(--ls-container-padding);
	z-index: 0;
	pointer-events: none;
	border-radius: var(--ls-blog-card-radius);
	overflow: hidden;
}

.ls-blog-cta__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ls-blog-cta__overlay {
	position: absolute;
	inset: 0;
	background: rgba(24, 24, 24, 0.68);
}

.ls-blog .ls-catalog-cta .ls-section-heading {
	color: var(--ls-blog-on-dark);
	font-size: clamp(24px, 16px + 1.4vw, 36px);
	line-height: 1.15;
	margin-bottom: var(--ls-space-4);
}

.ls-blog .ls-catalog-cta__text {
	max-width: 620px;
	margin-inline: auto;
	margin-bottom: var(--ls-space-6);
	color: rgba(247, 245, 241, 0.8);
}

/* Inverted button: the shared primary is charcoal-on-white, which would
 * disappear against this panel. */
.ls-blog .ls-catalog-cta .ls-btn-primary {
	background: var(--ls-blog-on-dark);
	color: var(--ls-blog-dark);
	border-color: var(--ls-blog-on-dark);
}

.ls-blog .ls-catalog-cta .ls-btn-primary:hover,
.ls-blog .ls-catalog-cta .ls-btn-primary:focus-visible {
	opacity: 0.88;
}

/* ===== Responsive ===== */

/* Two columns from just above the 768px breakpoint, so 768 itself stays
 * single-column as specified. */
@media (min-width: 769px) {
	.ls-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ls-article__nav-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ls-article__nav-link--next {
		text-align: right;
	}
}

@media (min-width: 1024px) {
	.ls-blog-hero {
		min-height: 260px;
	}

	.ls-blog-featured__inner {
		/* ~64 / ~36 editorial split. */
		grid-template-columns: minmax(0, 64fr) minmax(0, 36fr);
		gap: var(--ls-space-7);
	}

	.ls-blog-featured__body {
		padding: var(--ls-space-7);
	}

	.ls-blog-related .ls-blog-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ls-blog-band {
		padding-block: var(--ls-space-8);
	}

	.ls-blog .ls-catalog-cta__inner {
		/* Vertical padding kept tight so the panel lands around 220-240px
		 * tall; the content stays vertically centred because the padding is
		 * equal top and bottom. */
		padding: var(--ls-space-6) var(--ls-space-8);
	}
}

@media (min-width: 1200px) {
	.ls-blog-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--ls-space-6);
	}
}

/* Mobile: the filter row keeps its container padding as scroll inset so the
 * first and last pills are never clipped against the viewport edge. */
@media (max-width: 768px) {
	.ls-blog-filter__list {
		padding-inline: 0;
	}

	.ls-blog .ls-catalog-cta {
		margin-top: 64px;
	}

	.ls-blog .ls-catalog-cta__inner {
		padding: var(--ls-space-6) var(--ls-space-5);
	}
}