/* Shared editorial design for the blog index, topics, and category archives. */

.octa-blog-topic-hero { padding: clamp(40px, 6vw, 80px) 0; background: #f5f3ea; }
.octa-blog-topic-hero h1 { max-width: 940px; margin: 0; color: #102725; font: 400 clamp(40px, 5vw, 68px)/1.08 Georgia, serif; letter-spacing: -.035em; overflow-wrap: anywhere; }
.octa-blog-topic-hero .octa-blog-section-label { color: #347c70; }
.octa-blog-topic-hero > div > p:not(.octa-blog-section-label) { max-width: 760px; margin: 24px 0 0; color: #50625f; font-size: 19px; line-height: 1.65; }
.octa-blog .octa-blog-breadcrumb, .octa-article .octa-blog-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 28px; font: 13px/1.7 Arial, sans-serif; }
.octa-blog-breadcrumb a { color: #347c70; text-underline-offset: 4px; }
.octa-blog-breadcrumb > span { color: #60706c; }
.octa-blog-search { max-width: 660px; margin-top: 28px; }
.octa-blog-search label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.octa-blog-search > div { display: flex; gap: 8px; }
.octa-blog-search input[type=search] { flex: 1; width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid #aabdb5; border-radius: 0; background: #fff; color: #102725; font: 16px Arial, sans-serif; }
.octa-blog-search button { border: 1px solid #144f48; border-radius: 0; padding: 12px 22px; background: #144f48; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.octa-blog-hero .octa-blog-search button { background: #d9f77e; color: #102725; border-color: #d9f77e; }
.octa-blog :is(a, input, button):focus-visible { outline: 3px solid #347c70; outline-offset: 4px; }
.octa-blog-hero :is(a, input, button):focus-visible { outline-color: #d9f77e; }
.octa-blog-topic-content { padding-block: 48px 80px; }
.octa-blog .octa-blog-topics { margin-bottom: 48px; }
.octa-blog-topics h2 { margin: 0 0 18px; font: 400 28px/1.2 Georgia, serif; color: #102725; }
.octa-blog-topics ul { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.octa-blog-topics a { display: block; padding: 12px 16px; border: 1px solid #d8ded7; color: #144f48; background: #fff; font-size: 14px; line-height: 1.5; text-decoration: none; }
.octa-blog-topics a:hover { background: #edf3e8; }
.octa-blog-results-title { margin: 0 0 30px; font: 400 36px/1.2 Georgia, serif; color: #102725; }
.octa-blog-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.octa-blog-pagination > * { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid #d8ded7; color: #144f48; text-decoration: none; }
.octa-blog-pagination .current { background: #144f48; color: #fff; }
.octa-blog-no-results { padding: 32px; background: #f5f3ea; }
.octa-blog-no-results a { display: inline-block; margin: 12px 24px 0 0; color: #144f48; }
.octa-blog-card-placeholder { display: grid; place-items: center; aspect-ratio: 16 / 9; background: #e5eee4; color: #347c70; font: 400 30px Georgia, serif; }
.octa-blog .octa-blog-curated { padding-block: 55px; border-bottom: 1px solid #d8ded7; }
.octa-blog-curated .octa-blog-section-label { color: #347c70; }
@media (max-width: 600px) {
 .octa-blog-search button { padding-inline: 15px; }
 .octa-blog-topic-content { padding-top: 32px; }
 .octa-blog-topics a { padding: 10px 12px; }
}

.octa-blog {
	--ob-ink: #102725;
	--ob-green: #144f48;
	--ob-green-hover: #1c665d;
	--ob-mint: #b8ead5;
	--ob-lime: #d9f77e;
	--ob-cream: #f5f3ea;
	--ob-line: #d8ded7;
	--ob-muted: #64736f;

	background: #fafaf7;
	color: var(--ob-ink);
}

.octa-blog-shell {
	width: min(calc(100% - 48px), 1240px);
	margin-inline: auto;
}

.octa-blog-hero {
	padding: clamp(40px, 5vw, 72px) 0 56px;
	background:
		radial-gradient(circle at 88% 10%, rgba(184, 234, 213, .18), transparent 34%),
		var(--ob-green);
	color: #fff;
}

.octa-blog-eyebrow,
.octa-blog-section-label {
	margin: 0 0 14px;
	color: var(--ob-lime);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.octa-blog-hero h1 {
	color: #fff;
	max-width: 820px;
	margin: 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(42px, 5.5vw, 72px);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.045em;
}

.octa-blog-intro {
	max-width: 720px;
	margin: 26px 0 0;
	color: #d5e0dc;
	font-size: clamp(17px, 1.7vw, 21px);
	line-height: 1.65;
}

.octa-blog-pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin-top: 32px;
	background: rgba(255, 255, 255, .22);
	border: 1px solid rgba(255, 255, 255, .22);
}

.octa-blog-pillar {
	display: flex;
	min-height: 170px;
	padding: clamp(24px, 3vw, 38px);
	background: rgba(16, 39, 37, .72);
	color: #fff;
	flex-direction: column;
	text-decoration: none;
}

.octa-blog-pillar strong {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(21px, 2.2vw, 29px);
	font-weight: 400;
	line-height: 1.2;
}

.octa-blog-pillar > span {
	margin-top: 12px;
	color: #bdd0cc;
	font-size: 14px;
	line-height: 1.6;
}

.octa-blog-pillar small {
	margin-top: auto;
	padding-top: 24px;
	color: var(--ob-lime);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.octa-blog-pillar:hover,
.octa-blog-pillar:focus-visible {
	background: var(--ob-green-hover);
	outline: 0;
}

.octa-blog-pillar:hover > span,
.octa-blog-pillar:focus-visible > span,
.octa-blog-pillar:hover small,
.octa-blog-pillar:focus-visible small {
	color: #fff;
}

.octa-blog-featured,
.octa-blog-latest,
.octa-blog-empty {
	padding-block: clamp(58px, 7vw, 96px);
}

.octa-blog-featured {
	background: var(--ob-cream);
}

.octa-blog-featured .octa-blog-section-label,
.octa-blog-latest .octa-blog-section-label {
	color: #347c70;
}

.octa-featured-card {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
	min-height: 460px;
	background: #fafaf7;
	border: 1px solid var(--ob-line);
	box-shadow: 0 22px 55px rgba(23, 73, 65, .10);
}

.octa-featured-media {
	display: block;
	min-height: 360px;
	overflow: hidden;
}

.octa-featured-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.octa-featured-body {
	display: flex;
	padding: clamp(30px, 4.5vw, 62px);
	flex-direction: column;
	justify-content: center;
}

.octa-featured-body h2,
.octa-blog-section-heading h2,
.octa-blog-card h3 {
	margin: 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.025em;
}

.octa-featured-body h2 {
	font-size: clamp(28px, 3.1vw, 43px);
}

.octa-featured-body h2 a,
.octa-blog-card h3 a {
	color: inherit;
	text-decoration: none;
}

.octa-featured-body h2 a:hover,
.octa-featured-body h2 a:focus-visible,
.octa-blog-card h3 a:hover,
.octa-blog-card h3 a:focus-visible {
	color: var(--ob-green-hover);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.octa-featured-body > p,
.octa-blog-card-body > p {
	color: var(--ob-muted);
}

.octa-featured-body > p {
	margin: 20px 0 24px;
	font-size: 16px;
}

.octa-blog-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	margin-bottom: 16px;
	color: #5f7d77;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .035em;
	text-transform: uppercase;
}

.octa-blog-meta a {
	color: #347c70;
	text-decoration: none;
}

.octa-blog-meta a:hover,
.octa-blog-meta a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.octa-blog-read {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	width: fit-content;
	color: #347c70;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
}

.octa-blog-read:hover,
.octa-blog-read:focus-visible {
	color: var(--ob-green-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.octa-blog-latest {
	background: #fafaf7;
}

.octa-blog-section-heading {
	display: flex;
	gap: 36px;
	align-items: end;
	justify-content: space-between;
	margin-bottom: clamp(34px, 5vw, 58px);
	padding-bottom: 24px;
	border-bottom: 1px solid var(--ob-line);
}

.octa-blog-section-heading h2 {
	font-size: clamp(32px, 4vw, 50px);
}

.octa-blog-section-heading > p {
	max-width: 450px;
	margin: 0;
	color: var(--ob-muted);
}

.octa-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 42px) clamp(20px, 2.5vw, 32px);
}

.octa-blog-card {
	display: flex;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--ob-line);
	flex-direction: column;
}

.octa-blog-card-media {
	display: block;
	overflow: hidden;
	background: #e9f7ef;
	aspect-ratio: 16 / 9;
}

.octa-blog-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.octa-blog-card-body {
	display: flex;
	padding: 24px;
	flex: 1;
	flex-direction: column;
}

.octa-blog-card h3 {
	font-size: clamp(21px, 2vw, 27px);
}

.octa-blog-card-body > p {
	margin: 16px 0 22px;
}

.octa-blog-card .octa-blog-read {
	margin-top: auto;
}

.octa-blog-latest .pagination {
	width: 100%;
}

@media (max-width: 920px) {
	.octa-blog-pillars,
	.octa-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.octa-blog-pillar:last-child {
		grid-column: 1 / -1;
	}

	.octa-featured-card {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	.octa-blog-shell {
		width: min(calc(100% - 32px), 1240px);
	}

	.octa-blog-hero {
		padding-top: 50px;
	}

	.octa-blog-pillars,
	.octa-blog-grid {
		grid-template-columns: 1fr;
	}

	.octa-blog-pillar:last-child {
		grid-column: auto;
	}

	.octa-blog-pillar {
		min-height: 178px;
	}

	.octa-featured-media {
		min-height: 220px;
	}

	.octa-blog-section-heading {
		align-items: start;
		flex-direction: column;
	}
}