/*
 * Blog listing page (templates/page-blog.php).
 * Loaded render-blocking on this template only (inc/blog-listing.php), so the
 * first viewport is styled before main.css/responsive.css arrive async.
 * Everything is scoped under .lars-blog; sizes follow the theme's vw scale
 * (1vw = 14.4px at the 1440 reference) with px floors for phones.
 */

.lars-blog {
	--lb-red: #a11d20;
	--lb-ink: #0f0f0f;
	--lb-muted: #5f5f5f;
	--lb-line: #e3e3e3;
	--lb-soft: #f6f6f6;
	color: #000;
}

.lars-blog ::selection {
	background: var(--lb-red);
	color: #fff;
}

.lars-blog a:focus-visible {
	outline: 2px solid var(--lb-red);
	outline-offset: 3px;
}

.lars-blog .lb-acc {
	display: block;
	color: var(--lb-red);
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
}

.lars-blog .lb-acc--inline {
	display: inline;
}

.lars-blog .lb-date {
	display: block;
	margin: 0 0 0.69vw;
	color: #000;
	font-size: max(14px, 0.97vw);
	font-weight: 500;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.lars-blog .lb-date--muted {
	color: var(--lb-muted);
	font-size: max(13px, 0.9vw);
	font-weight: 400;
}

/*
 * Hero: the shared .hero-section.inner-hero-section shell supplies header
 * clearance, the breadcrumb/title inset and the split-heading styles. Only the
 * vertical gaps are tightened here, so the lead guide and most-read list fit in
 * the first viewport, and the content column is widened since there is no image.
 */
.lars-blog .lb-hero.inner-hero-section {
	padding-bottom: max(20px, 1.39vw);
}

.lars-blog .lb-hero .hero-content {
	width: 80%;
}

.lars-blog .lb-hero .hero-title-lg {
	padding-top: max(12px, 1.39vw);
}

.lars-blog .lb-hero .hero-title-lg > p {
	max-width: 92ch;
}

/* Lead guide + most-read rail */
.lars-blog .lb-lead .container > .lb-lead__grid {
	border-top: 1px solid var(--lb-ink);
	padding-top: max(20px, 1.67vw);
}

/* Image beside the text, so the lead and the most-read list share one screen. */
.lars-blog .lb-lead__story {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 2.22vw;
	align-items: stretch;
}

.lars-blog .lb-lead__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 3.33vw;
}

.lars-blog .lb-lead__grid--solo {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Every photo frame owns its aspect ratio and the image fills it. Sizing the
 * <img> itself breaks: WordPress adds sizes="auto" to lazy images, and Chrome
 * then gives an unloaded image a 1500px intrinsic height.
 */
.lars-blog .lb-lead__img,
.lars-blog .lb-card__ph,
.lars-blog .lb-proj__ph,
.lars-blog .lb-row__ph {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--lb-soft);
}

.lars-blog .lb-lead__img {
	aspect-ratio: 4 / 3;
}

.lars-blog .lb-lead__img img,
.lars-blog .lb-lead__img picture,
.lars-blog .lb-card__ph img,
.lars-blog .lb-card__ph picture,
.lars-blog .lb-proj__ph img,
.lars-blog .lb-proj__ph picture,
.lars-blog .lb-row__ph img,
.lars-blog .lb-row__ph picture {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	contain-intrinsic-size: none;
}

.lars-blog .lb-card__ph img,
.lars-blog .lb-proj__ph img {
	transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lars-blog .lb-lead__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: max(20px, 1.67vw);
}

.lars-blog .lb-lead__title {
	max-width: 22ch;
	margin: 0;
	font-size: max(24px, 1.94vw);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.01em;
}

.lars-blog .lb-lead__title a {
	color: #000;
}

.lars-blog .lb-lead__summary {
	max-width: 58ch;
	margin: max(12px, 1.11vw) 0 0;
	color: #000;
	font-size: max(16px, 1.11vw);
	font-weight: 300;
	line-height: 1.6;
}

.lars-blog .lb-rail__title {
	margin: 0 0 0.42vw;
	font-size: max(22px, 1.67vw);
	font-weight: 500;
	line-height: 1.2;
}

.lars-blog .lb-rail__sub {
	margin: 0 0 max(12px, 0.97vw);
	color: #000;
	font-size: max(14px, 0.97vw);
	font-weight: 400;
	line-height: 1.5;
}

.lars-blog .lb-rail__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lars-blog .lb-rail__list li {
	margin: 0;
	border-top: 1px solid var(--lb-line);
}

.lars-blog .lb-rail__list li:last-child {
	border-bottom: 1px solid var(--lb-line);
}

.lars-blog .lb-rail__list a {
	display: grid;
	grid-template-columns: max(30px, 2.22vw) max(84px, 6.25vw) minmax(0, 1fr);
	gap: max(12px, 0.83vw);
	padding: max(12px, 0.83vw) 0;
	align-items: center;
	color: #000;
}

.lars-blog .lb-rail__n {
	color: var(--lb-red);
	font-family: Georgia, "Times New Roman", serif;
	font-size: max(24px, 1.81vw);
	font-style: italic;
	line-height: 1;
}

.lars-blog .lb-rail__ph {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--lb-soft);
}

.lars-blog .lb-rail__ph img,
.lars-blog .lb-rail__ph picture {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	contain-intrinsic-size: none;
}

.lars-blog .lb-rail__txt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.lars-blog .lb-rail__d {
	display: block;
	margin-top: 2px;
	color: var(--lb-muted);
	font-size: max(13px, 0.9vw);
	font-weight: 400;
}

.lars-blog .lb-rail__t {
	display: block;
	font-size: max(15px, 1.11vw);
	font-weight: 500;
	line-height: 1.3;
}

.lars-blog .lb-rail__list a:hover .lb-rail__t,
.lars-blog .lb-card:hover .lb-card__t,
.lars-blog .lb-row:hover .lb-row__t,
.lars-blog .lb-proj__main:hover .lb-proj__t {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}


/* Educate Before You Renovate band (red stays a fill on black, never type) */
.lars-blog .lb-ebyr {
	margin-top: max(56px, 6.11vw);
	background: var(--lb-ink);
	color: #fff;
}

.lars-blog .lb-ebyr__in {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 3.33vw;
	align-items: center;
	padding-top: max(36px, 2.78vw);
	padding-bottom: max(36px, 2.78vw);
}

.lars-blog .lb-ebyr__mark {
	display: block;
	width: 12px;
	height: 12px;
	margin-bottom: 14px;
	background: var(--lb-red);
}

.lars-blog .lb-ebyr__title {
	margin: 0;
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: max(28px, 2.5vw);
	font-style: italic;
	font-weight: 400;
	line-height: 1.15;
}

.lars-blog .lb-ebyr__text {
	max-width: 52ch;
	margin: 0;
	color: #dcdcdc;
	font-size: max(16px, 1.18vw);
	font-weight: 300;
	line-height: 1.6;
}

/* The next-session date gets its own line so it reads as a separate sentence. */
.lars-blog .lb-ebyr__text strong {
	display: block;
	margin-top: 4px;
	color: #fff;
	font-weight: 500;
}

.lars-blog .lb-ebyr__btn:hover {
	border-color: #fff !important;
}

/* Section heads: step numeral, heading + accent line, description below */
.lars-blog .lb-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: max(12px, 1.25vw);
	margin-bottom: max(24px, 2.5vw);
}

.lars-blog .lb-head__step {
	color: var(--lb-red);
	font-family: Georgia, "Times New Roman", serif;
	font-size: max(20px, 1.53vw);
	font-style: italic;
	line-height: 1;
}

.lars-blog .lb-head__title {
	margin: 0;
	color: #000;
	font-size: max(32px, 2.92vw);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.lars-blog .lb-head__title .lb-acc {
	margin-top: 2px;
	font-size: max(28px, 2.64vw);
	line-height: 1.2;
}

.lars-blog .lb-head__blurb {
	max-width: 62ch;
	margin: 0;
	color: #000;
	font-size: max(16px, 1.18vw);
	font-weight: 400;
	line-height: 1.6;
}

/* Shelves */
.lars-blog .lb-shelf {
	padding-top: max(64px, 7.22vw);
}

.lars-blog .lb-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.22vw;
}

.lars-blog .lb-card {
	display: block;
	color: #000;
}

.lars-blog .lb-card:hover img,
.lars-blog .lb-proj__main:hover img {
	transform: scale(1.04);
}

.lars-blog .lb-card .lb-date {
	margin: max(12px, 1.11vw) 0 6px;
}

.lars-blog .lb-card__t {
	margin: 0;
	color: #000;
	font-size: max(18px, 1.39vw);
	font-weight: 500;
	line-height: 1.32;
}

/* Real Projects band */
.lars-blog .lb-proj {
	margin-top: max(64px, 7.22vw);
	padding: max(64px, 6.67vw) 0;
	background: var(--lb-soft);
}

.lars-blog .lb-proj__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 3.33vw;
}

.lars-blog .lb-proj__grid--solo {
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}

.lars-blog .lb-proj__main {
	display: block;
	color: #000;
}

.lars-blog .lb-proj__t {
	margin: max(16px, 1.53vw) 0 0;
	color: #000;
	font-size: max(22px, 1.94vw);
	font-weight: 500;
	line-height: 1.22;
}

.lars-blog .lb-where {
	display: block;
	margin-top: 6px;
	color: var(--lb-red);
	font-family: Georgia, "Times New Roman", serif;
	font-size: max(15px, 1.18vw);
	font-style: italic;
	line-height: 1.4;
}

.lars-blog .lb-proj__list {
	display: flex;
	flex-direction: column;
}

/* Index rows: Real Projects list and the archive */
.lars-blog .lb-row {
	display: grid;
	grid-template-columns: max(112px, 12.5vw) minmax(0, 1fr);
	gap: max(16px, 1.67vw);
	align-items: center;
	padding: max(18px, 1.67vw) 0;
	border-top: 1px solid var(--lb-line);
	color: #000;
}

.lars-blog .lb-proj__list .lb-row {
	border-top-color: #d8d8d8;
}

.lars-blog .lb-proj__list .lb-row:first-child {
	padding-top: 0;
	border-top: 0;
}

.lars-blog .lb-row .lb-date {
	margin: 0 0 6px;
}

.lars-blog .lb-row__t {
	margin: 0;
	color: #000;
	font-size: max(16px, 1.32vw);
	font-weight: 500;
	line-height: 1.35;
}

/* Archive */
.lars-blog .lb-archive {
	padding-top: max(64px, 7.22vw);
}

.lars-blog .lb-archive--paged {
	padding-top: 0;
}

.lars-blog .lb-archive__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 4.44vw;
}

.lars-blog .lb-archive .pagination-data {
	margin-top: max(32px, 3.33vw);
	padding-top: max(28px, 2.78vw);
	border-top: 1px solid var(--lb-line);
}

.lars-blog .connect-call-section {
	margin-top: max(72px, 7.78vw);
}

/*
 * Desktop: the lead row takes the viewport height left under the hero (the
 * hero is vw-sized, about 31vw tall, plus a small bottom margin), so the lead
 * guide and the whole most-read list sit above the fold. minmax() keeps the row
 * at least as tall as its content on short screens, so nothing is clipped.
 */
@media (min-width: 1100px) {
	.lars-blog .lb-lead__grid {
		grid-template-rows: minmax(min-content, calc(100svh - 35vw));
	}

	.lars-blog .lb-lead__img {
		aspect-ratio: auto;
		min-height: 18vw;
	}

	.lars-blog .lb-rail {
		display: flex;
		flex-direction: column;
	}

	.lars-blog .lb-rail__list {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.lars-blog .lb-rail__list li {
		display: flex;
		flex: 1;
		align-items: center;
	}

	/* Rows share the column height; each thumbnail grows to fill its row. */
	.lars-blog .lb-rail__list li {
		align-items: stretch;
	}

	.lars-blog .lb-rail__list a {
		width: 100%;
		padding: max(6px, 0.42vw) 0;
		align-items: stretch;
	}

	.lars-blog .lb-lead__summary {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.lars-blog .lb-rail__n {
		align-self: center;
	}

	.lars-blog .lb-rail__ph {
		aspect-ratio: auto;
		min-height: max(52px, 3.89vw);
	}
}

@media (max-width: 1099px) {
	.lars-blog .lb-lead__grid,
	.lars-blog .lb-proj__grid,
	.lars-blog .lb-proj__grid--solo {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.lars-blog .lb-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}

	.lars-blog .lb-ebyr__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.lars-blog .lb-lead__story {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.lars-blog .lb-lead__btn,
	.lars-blog .lb-ebyr__btn {
		width: 100%;
	}

	.lars-blog .lb-lead__img {
		aspect-ratio: 3 / 2;
	}

	/* Shelves scroll sideways so each one stays one screen tall. */
	.lars-blog .lb-cards {
		display: flex;
		gap: 16px;
		margin: 0 calc(-1 * var(--lb-gutter, 20px));
		padding: 0 var(--lb-gutter, 20px) 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--lb-gutter, 20px);
		scrollbar-width: none;
	}

	.lars-blog .lb-cards::-webkit-scrollbar {
		display: none;
	}

	.lars-blog .lb-card {
		flex: 0 0 76%;
		scroll-snap-align: start;
	}

	.lars-blog .lb-proj__list .lb-row:first-child {
		padding-top: 18px;
		border-top: 1px solid #d8d8d8;
	}

	.lars-blog .lb-archive__list {
		grid-template-columns: minmax(0, 1fr);
	}
}