/* 1. VARIABLES AND PAGE WRAPPER */
body.blog {
	--dm-primary: #38bdf8;
	--dm-primary-strong: #006688;
	--dm-secondary: #0f172a;
	--dm-tertiary: #e0f2fe;
	--dm-neutral: #64748b;
	--dm-bg: #faf9f6;
	--dm-border: #e8e6e1;
	background: var(--dm-bg) !important;
}
body.blog .page_content_wrap {
	background: var(--dm-bg) !important;
	padding: 0 0 96px !important;
	overflow-x: clip;
	container-type: inline-size;
}
body.blog .page_content_wrap .content_wrap {
	width: min(1240px, calc(100% - 48px)) !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* 2. HERO (printed by PHP) */
body.blog .dm-hero {
	grid-column: 1 / -1;
	width: 100vw !important;
	max-width: none !important;
	margin: 0 0 56px calc(50% - 50vw) !important;
	padding: 80px 24px 104px;
	background: var(--dm-secondary);
	border-radius: 0 0 64px 64px;
	text-align: center;
	box-sizing: border-box;
}
@supports (width: 1cqw) {
	body.blog .dm-hero {
		width: calc(100cqw + 30px) !important;
		margin-left: calc(50% - 50cqw - 15px) !important;
	}
}
body.blog .dm-eyebrow {
	margin: 0 0 16px;
	font: 700 12px/1 "Space Grotesk", sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dm-primary);
}
body.blog .dm-hero__title {
	margin: 0 auto;
	max-width: 820px;
	font: 800 clamp(32px, 5vw, 56px)/1.1 "Plus Jakarta Sans", sans-serif;
	letter-spacing: -.02em;
	color: #fff;
	text-decoration: none;
}

/* 3. POST GRID AND CARD */
body.blog .posts_container {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
body.blog .posts_container > .post_item {
	display: flex !important;
	flex-direction: column;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 8px !important;
	background: #fff !important;
	border: 1px solid var(--dm-border) !important;
	border-radius: 24px !important;
	box-shadow: none !important;
	overflow: hidden;
}

/* 4. CARD IMAGE */
body.blog .post_item .post_featured {
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	aspect-ratio: 16 / 10 !important;
	border-radius: 36px 14px 14px 14px !important;
	overflow: hidden;
}
body.blog .post_item .post_featured img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* 5. CARD BODY */
body.blog .post_item .post_content_wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	flex: 1;
	width: 100% !important;
	padding: 18px 14px 14px !important;
}
body.blog .post_item .post_header { margin: 0; }

/* 6. CATEGORY BADGE */
body.blog .post_item .post_category a {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--dm-tertiary) !important;
	color: var(--dm-secondary) !important;
	font: 700 11px/1.4 "Space Grotesk", sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* 7. POST TITLE */
body.blog .post_item .post_title {
	margin: 10px 0 0;
	font: 800 18px/1.25 "Plus Jakarta Sans", sans-serif;
	letter-spacing: -.01em;
}
body.blog .post_item .post_title a { color: var(--dm-secondary) !important; text-decoration: none; }
body.blog .post_item .post_title a:hover { color: var(--dm-primary-strong) !important; }

/* 8. EXCERPT */
body.blog .post_item .post_content,
body.blog .post_item .post_content * {
	margin: 0;
	font-family: "Inter", sans-serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.65 !important;
	color: var(--dm-neutral) !important;
}
body.blog .post_item .post_content { flex: 1; }
body.blog .post_item .post_content *::before,
body.blog .post_item .post_content::before,
body.blog .post_item .post_content p::before,
body.blog .post_item .post_content::after,
body.blog .post_item .post_content_wrap > .post_meta::before { display: none !important; content: none !important; }

/* 9. META (DATE, COMMENTS) */
body.blog .post_item .post_content_wrap > .post_meta {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--dm-border);
	font: 400 12px/1.4 "Inter", sans-serif;
	color: var(--dm-neutral);
}
body.blog .post_item .post_meta a,
body.blog .post_item .post_meta span { color: var(--dm-neutral) !important; }

/* 10. FIRST POST = FEATURED (PAGE 1 ONLY) */
body.blog:not(.paged) .posts_container > .post_item:first-of-type {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;
	gap: 40px;
	padding: 10px !important;
}
body.blog:not(.paged) .posts_container > .post_item:first-of-type .post_featured {
	flex: 1.15 1 0;
	width: auto !important;
	aspect-ratio: 4 / 3 !important;
	border-radius: 64px 16px 16px 16px !important;
}
body.blog:not(.paged) .posts_container > .post_item:first-of-type .post_content_wrap {
	flex: 1 1 0;
	gap: 14px;
	padding: 24px 32px 24px 0 !important;
}
body.blog:not(.paged) .posts_container > .post_item:first-of-type .post_title {
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.15;
}
body.blog:not(.paged) .posts_container > .post_item:first-of-type .post_content,
body.blog:not(.paged) .posts_container > .post_item:first-of-type .post_content * {
	font-size: 14px !important;
	line-height: 1.7 !important;
}
body.blog:not(.paged) .posts_container > .post_item:first-of-type .post_content { flex: 0 0 auto; }
body.blog:not(.paged) .posts_container > .post_item:first-of-type .post_content_wrap > .post_meta {
	border-top: 0;
	padding-top: 0;
}

/* 11. RESPONSIVE: <= 1100px */
@media (max-width: 1100px) {
	body.blog:not(.paged) .posts_container > .post_item:first-of-type { gap: 28px; }
	body.blog:not(.paged) .posts_container > .post_item:first-of-type .post_content_wrap { padding: 20px 24px 20px 0 !important; }
	body.blog:not(.paged) .posts_container > .post_item:first-of-type .post_featured { border-radius: 48px 16px 16px 16px !important; }
}

/* 12. RESPONSIVE: <= 1024px (TABLET) */
@media (max-width: 1024px) {
	body.blog .posts_container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 13. RESPONSIVE: <= 700px (MOBILE) */
@media (max-width: 700px) {
	body.blog .posts_container { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; width: 100%; max-width: 100%; }
	body.blog .posts_container > .post_item { padding: 12px !important; min-width: 0; max-width: 100% !important; }
	body.blog:not(.paged) .posts_container > .post_item:first-of-type {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px !important;
	}

	body.blog .post_item .post_featured,
	body.blog:not(.paged) .posts_container > .post_item:first-of-type .post_featured {
		position: relative;
		flex: 0 0 auto !important;
		width: 100% !important;
		height: 0 !important;
		min-height: 0 !important;
		padding: 0 0 42% !important;
		aspect-ratio: auto !important;
		align-self: auto;
		border-radius: 36px 14px 14px 14px !important;
	}
	body.blog .post_item .post_featured img {
		position: absolute;
		inset: 0;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
	}

	body.blog .post_item .post_content_wrap,
	body.blog:not(.paged) .posts_container > .post_item:first-of-type .post_content_wrap {
		flex: 1 1 auto !important;
		height: auto !important;
		gap: 12px;
		padding: 20px 8px 8px !important;
	}
	body.blog .post_item .post_title,
	body.blog:not(.paged) .posts_container > .post_item:first-of-type .post_title {
		font-size: 22px;
		line-height: 1.2;
	}
	body.blog .post_item .post_content,
	body.blog .post_item .post_content *,
	body.blog:not(.paged) .posts_container > .post_item:first-of-type .post_content,
	body.blog:not(.paged) .posts_container > .post_item:first-of-type .post_content * {
		font-size: 15px !important;
		line-height: 1.65 !important;
	}
	body.blog .post_item .post_content_wrap > .post_meta,
	body.blog .post_item .post_content_wrap > .post_meta * { font-size: 13px !important; }

	body.blog .dm-hero { border-radius: 0 0 40px 40px; padding: 56px 20px 72px; }
}