/* ===========================================================================
   Nurtured By Nature — Blog index + single post (editorial)
   Scoped under .nbn-blog / .nbn-single so it can't collide with Astra core.
   Brand tokens come from style.css (:root --nbn-*); local aliases below.
   =========================================================================== */

.nbn-blog,
.nbn-single {
	--cream:     var(--nbn-cream, #fafdfd);
	--ivory:     var(--nbn-ivory, #e7f4f5);
	--paper:     var(--nbn-paper, #ffffff);
	--teal:      var(--nbn-teal, #15b4d7);
	--teal-deep: var(--nbn-teal-deep, #007e9b);
	--teal-ink:  var(--nbn-teal-ink, #06414f);
	--gold:      var(--nbn-gold, #c89a3f);
	--coral:     var(--nbn-coral, #ff6a44);
	--ink:       var(--nbn-ink, #14272d);
	--muted:     var(--nbn-muted, #56676d);
	--line:      var(--nbn-line, #d4e6e6);
	--display:   var(--nbn-font-display, 'Archivo', sans-serif);
	--body:      var(--nbn-font-body, 'Mulish', sans-serif);
	--wrap: 1180px;
	--narrow: 760px;

	font-family: var(--body);
	color: var(--ink);
	background: var(--cream);
	font-size: 17px;
	line-height: 1.7;
}

.nbn-blog *, .nbn-single * { box-sizing: border-box; }
.nbn-blog img, .nbn-single img { max-width: 100%; height: auto; display: block; }

.nbn-blog__wrap,
.nbn-single__wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 24px;
}
.nbn-single__wrap--narrow { max-width: var(--narrow); }

/* ---------------------------------------------------------------------------
   BLOG MASTHEAD
   --------------------------------------------------------------------------- */
.nbn-blog__masthead {
	background:
		radial-gradient(900px 380px at 50% -40%, rgba(21, 180, 215, .14), transparent 70%),
		var(--ivory);
	border-bottom: 1px solid var(--line);
	padding: 72px 0 56px;
	text-align: center;
}
.nbn-blog__eyebrow {
	font-family: var(--display);
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 14px;
}
.nbn-blog__title {
	font-family: var(--display) !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.5px;
	line-height: 1.02;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	color: var(--ink);
	margin: 0;
}
.nbn-blog__lead {
	max-width: 640px;
	margin: 16px auto 0;
	color: var(--muted);
	font-size: 1.12rem;
}

/* ---------------------------------------------------------------------------
   POST GRID
   --------------------------------------------------------------------------- */
.nbn-posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px 30px;
	padding: 56px 0 16px;
}

.nbn-postcard {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 14px 36px -26px rgba(6, 65, 79, .5);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nbn-postcard:hover {
	transform: translateY(-4px);
	border-color: #bfe2e8;
	box-shadow: 0 26px 54px -28px rgba(6, 65, 79, .55);
}
.nbn-postcard__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ivory);
}
.nbn-postcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.nbn-postcard:hover .nbn-postcard__media img { transform: scale(1.05); }
.nbn-postcard__ph {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(120px 120px at 70% 20%, rgba(21, 180, 215, .25), transparent 70%),
		linear-gradient(135deg, var(--ivory), #d4ecef);
}
.nbn-postcard__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px 24px 26px;
}
.nbn-postcard__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: .76rem;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 12px;
}
.nbn-postcard__cat {
	font-family: var(--display);
	font-weight: 700;
	color: var(--teal-deep);
}
.nbn-postcard__title {
	font-family: var(--display) !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.3px;
	line-height: 1.12;
	font-size: 1.28rem;
	margin: 0 0 12px;
}
.nbn-postcard__title a { color: var(--ink); text-decoration: none; transition: color .15s ease; }
.nbn-postcard__title a:hover { color: var(--teal-deep); }
.nbn-postcard__excerpt { color: var(--muted); font-size: .98rem; margin: 0 0 18px; }
.nbn-postcard__more {
	margin-top: auto;
	align-self: flex-start;
	font-family: var(--display);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--teal-deep);
	text-decoration: none;
}
.nbn-postcard__more span { transition: transform .15s ease; display: inline-block; }
.nbn-postcard__more:hover span { transform: translateX(4px); }

/* Featured first card on page one: full-width horizontal split. */
.nbn-posts--featured .nbn-postcard:first-child {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: stretch;
}
.nbn-posts--featured .nbn-postcard:first-child .nbn-postcard__media {
	flex: 0 0 56%;
	aspect-ratio: auto;
	min-height: 340px;
}
.nbn-posts--featured .nbn-postcard:first-child .nbn-postcard__body {
	justify-content: center;
	padding: 40px 44px;
}
.nbn-posts--featured .nbn-postcard:first-child .nbn-postcard__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.nbn-posts--featured .nbn-postcard:first-child .nbn-postcard__excerpt { font-size: 1.06rem; }

/* ---------------------------------------------------------------------------
   PAGINATION
   --------------------------------------------------------------------------- */
.nbn-blog .pagination,
.nbn-blog .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 40px 0 80px;
}
.nbn-blog .page-numbers {
	font-family: var(--display);
	font-weight: 700;
	font-size: .9rem;
	min-width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nbn-blog .page-numbers:hover { border-color: var(--teal); color: var(--teal-deep); }
.nbn-blog .page-numbers.current {
	background: var(--teal-deep);
	border-color: var(--teal-deep);
	color: #fff;
}
.nbn-blog .page-numbers.dots { border: 0; background: transparent; }

.nbn-blog__empty { text-align: center; padding: 80px 0 100px; }
.nbn-blog__empty h2 { font-family: var(--display); text-transform: uppercase; margin: 0 0 10px; }
.nbn-blog__empty a { color: var(--teal-deep); font-weight: 700; }

/* ---------------------------------------------------------------------------
   SINGLE POST
   --------------------------------------------------------------------------- */
.nbn-single__hero {
	background:
		radial-gradient(800px 340px at 50% -50%, rgba(21, 180, 215, .12), transparent 70%),
		var(--ivory);
	border-bottom: 1px solid var(--line);
	padding: 40px 0 48px;
	text-align: center;
}
.nbn-single__back {
	display: inline-block;
	font-family: var(--display);
	font-weight: 700;
	font-size: .74rem;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--teal-deep);
	text-decoration: none;
	margin-bottom: 22px;
}
.nbn-single__back:hover { color: var(--teal); }
.nbn-single__eyebrow {
	font-family: var(--display);
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 14px;
}
.nbn-single__title {
	font-family: var(--display) !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.5px;
	line-height: 1.05;
	font-size: clamp(2rem, 4.6vw, 3.1rem);
	color: var(--ink);
	margin: 0 auto;
	max-width: 16ch;
}
.nbn-single__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
	font-size: .86rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .6px;
}
.nbn-single__author { font-family: var(--display); font-weight: 700; color: var(--ink); }
.nbn-single__dot { color: var(--line); }

.nbn-single__feature {
	margin: -28px auto 0;
	max-width: 1080px;
	padding-inline: 24px;
}
.nbn-single__feature img {
	width: 100%;
	border-radius: 8px;
	box-shadow: 0 30px 70px -34px rgba(6, 65, 79, .55);
}
.nbn-single__feature figcaption {
	text-align: center;
	font-size: .82rem;
	color: var(--muted);
	margin-top: 12px;
}

/* Article body — readable measure + editorial typography. */
.nbn-single__content { padding-top: 48px; padding-bottom: 8px; }
.nbn-single__content > * { margin-bottom: 1.4rem; }
.nbn-single__content p { font-size: 1.12rem; line-height: 1.78; margin: 0 0 1.4rem; }
.nbn-single__content h2 {
	font-family: var(--display) !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.3px;
	font-size: 1.7rem;
	margin: 2.4rem 0 1rem;
}
.nbn-single__content h3 {
	font-family: var(--display) !important;
	font-weight: 700;
	font-size: 1.32rem;
	margin: 2rem 0 .8rem;
}
.nbn-single__content a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.nbn-single__content a:hover { color: var(--teal); }
.nbn-single__content img { border-radius: 8px; margin: 1.6rem auto; }
.nbn-single__content ul,
.nbn-single__content ol { padding-left: 1.3em; margin: 0 0 1.4rem; }
.nbn-single__content li { margin-bottom: .5rem; }
.nbn-single__content blockquote {
	margin: 2rem 0;
	padding: 6px 0 6px 26px;
	border-left: 4px solid var(--gold);
	font-family: var(--display);
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 1.4;
	text-transform: none;
	color: var(--teal-ink);
}
.nbn-single__content blockquote p { font-size: inherit; }
.nbn-single__content figure { margin: 1.8rem 0; }
.nbn-single__content code {
	background: var(--ivory);
	padding: 2px 7px;
	border-radius: 4px;
	font-size: .92em;
}

/* Footer: tags + prev/next. */
.nbn-single__foot { padding-top: 8px; padding-bottom: 40px; }
.nbn-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 26px 0;
	border-top: 1px solid var(--line);
}
.nbn-single__tags a {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--teal-deep);
	background: var(--ivory);
	border: 1px solid var(--line);
	padding: 6px 14px;
	border-radius: 999px;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nbn-single__tags a:hover { background: var(--teal-deep); color: #fff; border-color: var(--teal-deep); }

.nbn-single__pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 26px 0;
}
.nbn-single__pager a {
	display: block;
	padding: 18px 22px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.3;
	transition: border-color .15s ease, transform .15s ease;
}
.nbn-single__pager a:hover { border-color: var(--teal); transform: translateY(-2px); }
.nbn-single__pager a small {
	display: block;
	font-size: .68rem;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 6px;
}
.nbn-single__pager-next a { text-align: right; }

.nbn-single__all {
	display: inline-block;
	font-family: var(--display);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--teal-deep);
	text-decoration: none;
}
.nbn-single__all:hover { color: var(--teal); }

.nbn-single__comments { padding-top: 8px; padding-bottom: 64px; }

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 960px) {
	.nbn-posts { grid-template-columns: repeat(2, 1fr); }
	.nbn-posts--featured .nbn-postcard:first-child { flex-direction: column; }
	.nbn-posts--featured .nbn-postcard:first-child .nbn-postcard__media { flex-basis: auto; aspect-ratio: 16 / 10; min-height: 0; }
	.nbn-posts--featured .nbn-postcard:first-child .nbn-postcard__body { padding: 26px 24px; }
}
@media (max-width: 600px) {
	.nbn-posts { grid-template-columns: 1fr; padding-top: 40px; }
	.nbn-blog__masthead { padding: 52px 0 40px; }
	.nbn-single__pager { grid-template-columns: 1fr; }
	.nbn-single__pager-next a { text-align: left; }
}