/* ==========================================================================
   Single Blog Article — Locality
   ========================================================================== */

.locality-blog-article {
	--lba-navy: #001B54;
	--lba-lime: #CDFF3F;
	--lba-cyan: #60E3E8;
	--lba-border: #e2e6ea;
	--lba-muted: #6b7280;
	--lba-max-width: 1200px;
	--lba-gutter: 1.5em;
	--lba-radius-img: 16px;
	background: var(--lba-white, #ffffff);
	color: var(--lba-navy);
	padding-bottom: 4em;
}
.locality-blog-article *,
.locality-blog-article *::before,
.locality-blog-article *::after {
	box-sizing: border-box;
}


/* ── Hero Featured Image ── */
.lba-hero {
	position: relative;
	padding: 120px var(--lba-gutter) 0;
}
.lba-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
	background: var(--lba-navy);
	/* Height = half the rendered image height (image is 16:9 within a
	   1200px-max, gutter-padded container: 0.5625 / 2 = 0.28125), so this
	   stays accurate from mobile widths up to the 1200px cap. */
	height: clamp(80px, calc((100vw - 48px) * 0.28125), 338px);
}
.lba-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--lba-max-width);
	margin: 0 auto;
	border-radius: var(--lba-radius-img);
	overflow: hidden;
	aspect-ratio: 16 / 9; /* featured images are 1920x1080 */
	background: #f3f4f6;
}
.lba-hero__inner img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	display: block;
}


/* ── Layout: Main + Sidebar ── */

.lba-layout {
	padding: 0 var(--lba-gutter);
}
.lba-layout__inner {
	max-width: var(--lba-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 3.5em;
	align-items: start;
	padding-top: 2.5em;
}

.lba-sidebar {
	align-self: stretch; /* span the full article height so the sticky list can travel with it */
}


/* ── Main Content ── */
.lba-main {
	min-width: 0;
}

.lba-meta {
	display: flex;
	align-items: center;
	gap: 0.9em;
	flex-wrap: wrap;
	margin-bottom: 1em;
}
.lba-date,
.lba-readtime {
	font-family: 'Neue Helvetica Lt Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: var(--lba-muted);
}
.lba-readtime::before {
	content: '·';
	margin-right: 0.9em;
}

.lba-title {
	font-family: 'Midnight Sans ST 24', sans-serif;
	font-size: 36px; /* article H1 — same on all screen sizes */
	line-height: 1.1;
	color: var(--lba-navy);
	margin: 0 0 1.2em;
}

.lba-content {
	font-family: 'Neue Helvetica Lt Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.75;
	color: #29334a;
}
.lba-content p {
	margin: 0 0 1.3em;
}
.lba-content h2 {
	font-family: 'Midnight Sans ST 24', sans-serif;
	font-size: 26px;
	color: var(--lba-navy);
	margin: 1.8em 0 0.7em;
}
.lba-content h3 {
	font-family: 'Midnight Sans ST 24', sans-serif;
	font-size: 21px;
	color: var(--lba-navy);
	margin: 1.6em 0 0.6em;
}
/* All headings inside the article body are 26px. The extra .locality-blog-article
   prefix outranks the theme-wide h1/h3/h4 sizes in style.css (which went up to 75px). */
.locality-blog-article .lba-content :is(h1, h2, h3, h4, h5, h6) {
	font-family: 'Midnight Sans ST 24', sans-serif;
	font-size: 26px;
	line-height: 1.25;
	color: var(--lba-navy);
}
.lba-content img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	margin: 1em 0;
}
.lba-content a {
	color: var(--lba-navy);
	text-decoration: underline;
	text-decoration-color: var(--lba-cyan);
	text-underline-offset: 2px;
}
.lba-content blockquote {
	margin: 1.5em 0;
	padding: 1.2em 1.5em;
	background: #f7f9fc;
	border-left: 4px solid var(--lba-lime);
	font-style: italic;
	color: var(--lba-navy);
}
.lba-content blockquote > :last-child {
	margin-bottom: 0;
}

/* Unordered lists: plain bullets */
.lba-content ul {
	list-style: disc;
	margin: 0 0 1.3em;
	padding-left: 1.4em;
}
.lba-content ul li {
	margin-bottom: 0.5em;
}

/* Ordered lists: boxed panel with numbered navy markers */
.lba-content ol {
	margin: 0 0 1.5em;
	padding: 1.3em 1.3em 1.3em 1.1em;
	background: #f6f9fc;
	border-radius: 12px;
	border: 1px solid var(--lba-border);
}
.lba-content ol {
	list-style: none;
	counter-reset: lba-steps;
}
.lba-content ol li {
	position: relative;
	padding-left: 2.4em;
	margin-bottom: 0.9em;
	counter-increment: lba-steps;
}
.lba-content ol li:last-child {
	margin-bottom: 0;
}
.lba-content ol li::before {
	content: counter(lba-steps);
	position: absolute;
	left: 0;
	top: -0.05em;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	background: var(--lba-navy);
	color: var(--lba-lime);
	font-family: 'Midnight Sans ST 12', sans-serif;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}


/* ── Sidebar ── */
/* Native sticky: rests at its load position (below the banner), pins
   110px from the viewport top (clears the fixed header) while scrolling,
   and stops at the end of the article. Scrolling back up returns it to
   exactly where it started. */
.lba-sidebar__sticky {
	position: sticky;
	top: 110px;
	margin-top: 110px;
}

.locality-blog-article .lba-sidebar__heading { /* prefix outranks the theme-wide h3 size */
	font-family: 'Midnight Sans ST 24', sans-serif;
	font-size: 26px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--lba-navy);
	margin: 0 0 1em;
	padding-bottom: 0.7em;
	border-bottom: 2px solid var(--lba-navy);
}

.lba-sidebar__list {
	display: flex;
	flex-direction: column;
	gap: 1.2em;
}

.lba-sidebar__item {
	display: flex;
	gap: 0.9em;
	text-decoration: none;
	align-items: flex-start;
}

.lba-sidebar__thumb {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	border-radius: 10px;
	overflow: hidden;
	background: #f3f4f6;
}
.lba-sidebar__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
.lba-sidebar__item:hover .lba-sidebar__thumb img {
	transform: scale(1.05);
}

.lba-sidebar__body {
	flex: 1;
	min-width: 0;
}
.lba-sidebar__cat {
	display: block;
	font-family: 'Midnight Sans ST 12', sans-serif;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lba-navy);
	margin-bottom: 0.3em;
}
.lba-sidebar__title {
	font-family: 'Neue Helvetica Lt Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.35;
	color: var(--lba-navy);
	margin: 0 0 0.35em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lba-sidebar__date {
	font-family: 'Neue Helvetica Lt Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: var(--lba-muted);
}


/* ── Responsive ── */
@media (max-width: 900px) {
	.lba-layout__inner {
		/* minmax(0, …): a plain 1fr can't shrink below the side-scrolling
		   "Latest posts" row (~1000px), which widened the whole page on phones. */
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5em;
	}
	.lba-sidebar {
		order: 2;
	}
	.lba-sidebar__sticky {
		position: static;
		margin-top: 0;
	}
	.lba-hero {
		padding-top: 90px;
	}
}

@media (max-width: 600px) {
	.lba-content {
		font-size: 16px;
	}
	.lba-hero__inner {
		border-radius: 10px;
	}
}

/* ==========================================================================
   Variant: "New Blog" (new-blog.php)
   No navy banner; featured image sits in the content column above the
   title; sidebar top-aligns with the image.
   ========================================================================== */

.locality-blog-article--inline .lba-layout__inner {
	padding-top: 150px; /* clears the fixed site header (the banner used to provide this) */
}
.locality-blog-article--inline .lba-sidebar__sticky {
	margin-top: 0; /* start level with the featured image */
	top: 150px;    /* pinned offset while scrolling */
}

.lba-media {
	border-radius: var(--lba-radius-img);
	overflow: hidden;
	aspect-ratio: 16 / 9; /* featured images are 1920x1080 */
	background: #f3f4f6;
	margin-bottom: 1.5em;
}
.lba-media img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	display: block;
}

@media (max-width: 900px) {
	.locality-blog-article--inline .lba-layout__inner {
		padding-top: 90px;
	}
}
@media (max-width: 600px) {
	.lba-media {
		border-radius: 10px;
	}
}