/* ═══════════════════════════════════════════════════════════════════════
   ESI Single Blog Post — single-post.css
   Follows the same design system as service pages and blog listing.
   Reuses :root tokens from header.css.
   Mobile-first, responsive at 768 / 1200.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Single-post tokens ───────────────────────────────────────────── */
:root {
	--post-blue: #1b4d5c;
	--post-dark: #1f1f1f;
	--post-body: #5f6368;
	--post-border: #e8eaed;
	--post-prose-max: 800px;
	--post-wide-max: 1200px;
}


/* ── Main wrapper ─────────────────────────────────────────────────── */
main.single-post {
	background: #fff;
	overflow: hidden;
}


/* ══════════════════════════════════════════════════════════════════════
   HERO — full-width featured image with overlay title
   ══════════════════════════════════════════════════════════════════════ */
.post-hero {
	position: relative;
	width: 100%;
	height: 360px;
	overflow: hidden;
	background: var(--post-dark);
}
@media (min-width: 768px) {
	.post-hero { height: 440px; }
}
@media (min-width: 1200px) {
	.post-hero { height: 500px; max-height: 500px; }
}

.post-hero__image {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.post-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Gradient overlay for text legibility */
.post-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		to top,
		rgba(31, 31, 31, 0.85) 0%,
		rgba(31, 31, 31, 0.4) 50%,
		rgba(31, 31, 31, 0.15) 100%
	);
}

/* Fallback when no featured image */
.post-hero--no-image {
	background: var(--h-accent, #ff4a34);
}
.post-hero--no-image .post-hero__overlay {
	background: linear-gradient(
		to top,
		rgba(31, 31, 31, 0.3) 0%,
		transparent 100%
	);
}

/* Hero content — sits at bottom */
.post-hero__content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	padding: 32px var(--h-pad, 20px);
}
@media (min-width: 1200px) {
	.post-hero__content {
		max-width: var(--post-wide-max);
		margin: 0 auto;
		left: 50%;
		transform: translateX(-50%);
		padding: 48px 0;
	}
}

/* Category pills on hero */
.post-hero__categories {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.post-hero__category {
	display: inline-block;
	background: var(--post-blue);
	color: #fff;
	font-family: var(--h-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 12px;
	padding: 6px 14px;
	border-radius: 50px;
	text-decoration: none;
}
.post-hero__category:hover {
	opacity: 0.85;
}

/* Hero title */
.post-hero__title {
	font-family: var(--h-font);
	font-weight: 500;
	font-size: 32px;
	line-height: 1.15;
	color: #fff;
	margin: 0 0 16px;
	max-width: 900px;
}
@media (min-width: 768px) {
	.post-hero__title { font-size: 44px; line-height: 1.1; }
}
@media (min-width: 1200px) {
	.post-hero__title { font-size: 52px; }
}

/* Hero meta (date + reading time) */
.post-hero__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--h-font);
	font-size: 14px;
	font-weight: 500;
}
.post-hero__meta-sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
}


/* ══════════════════════════════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════════════════════════════ */
.post-breadcrumbs {
	padding: 16px var(--h-pad, 20px);
	font-family: var(--h-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}
@media (min-width: 1200px) {
	.post-breadcrumbs {
		max-width: var(--post-wide-max);
		margin: 0 auto;
		padding: 16px 0;
	}
}
.post-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.post-breadcrumbs a {
	color: var(--post-body);
	text-decoration: none;
}
.post-breadcrumbs a:hover {
	text-decoration: underline;
}
.post-breadcrumbs__sep {
	display: inline-block;
	vertical-align: middle;
}
.post-breadcrumbs span[aria-current] {
	color: var(--post-dark);
}


/* ══════════════════════════════════════════════════════════════════════
   ARTICLE LAYOUT — centered prose column
   ══════════════════════════════════════════════════════════════════════ */
.post-article {
	max-width: var(--post-wide-max);
	margin: 0 auto;
	padding: 0 var(--h-pad, 20px) 48px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
@media (min-width: 1200px) {
	.post-article {
		flex-direction: row;
		gap: 80px;
		padding: 0 0 64px;
	}
}


/* ══════════════════════════════════════════════════════════════════════
   ARTICLE SIDEBAR — sticky meta on desktop
   ══════════════════════════════════════════════════════════════════════ */
.post-sidebar {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--post-border);
}
@media (min-width: 1200px) {
	.post-sidebar {
		flex-direction: column;
		flex-wrap: nowrap;
		width: 220px;
		flex-shrink: 0;
		position: sticky;
		top: 140px;
		align-self: flex-start;
		padding-top: 40px;
		border-top: none;
		border-right: 1px solid var(--post-border);
		padding-right: 40px;
	}
}

.post-sidebar__section {
	flex: 0 0 auto;
}
.post-sidebar__label {
	display: block;
	font-family: var(--h-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--post-body);
	margin-bottom: 6px;
}
.post-sidebar__value {
	font-family: var(--h-font);
	font-size: 15px;
	font-weight: 500;
	color: var(--post-dark);
	line-height: 1.4;
}
.post-sidebar__value a {
	color: var(--post-blue);
	text-decoration: none;
}
.post-sidebar__value a:hover {
	text-decoration: underline;
}

/* Share links */
.post-sidebar__share {
	display: flex;
	gap: 12px;
	margin-top: 4px;
}
.post-sidebar__share-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--post-border);
	color: var(--post-dark);
	transition: background 0.2s ease, color 0.2s ease;
}
.post-sidebar__share-link:hover {
	background: var(--post-dark);
	color: #fff;
}
.post-sidebar__share-link svg {
	width: 16px;
	height: 16px;
}


/* ══════════════════════════════════════════════════════════════════════
   ARTICLE PROSE — the_content() output
   ══════════════════════════════════════════════════════════════════════ */
.post-prose {
	flex: 1;
	min-width: 0;
	padding-top: 40px;
}

/* Scope all WP content output */
.post-prose h1,
.post-prose h2,
.post-prose h3,
.post-prose h4,
.post-prose h5,
.post-prose h6 {
	font-family: var(--h-font);
	font-weight: 500;
	color: var(--post-dark);
	line-height: 1.2;
	margin: 2em 0 0.6em;
}
.post-prose h1 { font-size: 36px; }
.post-prose h2 { font-size: 30px; }
.post-prose h3 { font-size: 24px; }
.post-prose h4 { font-size: 20px; }
.post-prose h5 { font-size: 18px; }
.post-prose h6 { font-size: 16px; }

.post-prose h2:first-child,
.post-prose h3:first-child {
	margin-top: 0;
}

.post-prose p {
	font-family: var(--h-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 30px;
	color: var(--post-dark);
	margin: 0 0 1.5em;
	max-width: var(--post-prose-max);
}

.post-prose a {
	color: var(--post-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.post-prose a:hover {
	color: var(--h-accent, #ff4a34);
}

.post-prose ul,
.post-prose ol {
	font-family: var(--h-font);
	font-size: 17px;
	line-height: 30px;
	color: var(--post-dark);
	margin: 0 0 1.5em;
	padding-left: 1.5em;
	max-width: var(--post-prose-max);
}
.post-prose li {
	margin-bottom: 0.4em;
}

.post-prose blockquote {
	margin: 2em 0;
	padding: 20px 24px;
	border-left: 4px solid var(--h-accent, #ff4a34);
	background: #fafafa;
	font-family: var(--h-font);
	font-size: 18px;
	font-style: italic;
	line-height: 30px;
	color: var(--post-body);
	max-width: var(--post-prose-max);
}
.post-prose blockquote p {
	margin: 0;
	color: inherit;
}

.post-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--blog-card-radius, 4px);
	margin: 2em 0;
	display: block;
}

.post-prose figure {
	margin: 2em 0;
	max-width: 100%;
}
.post-prose figcaption {
	font-family: var(--h-font);
	font-size: 14px;
	color: var(--post-body);
	margin-top: 8px;
	text-align: center;
}

.post-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
	font-family: var(--h-font);
	font-size: 15px;
}
.post-prose th,
.post-prose td {
	border: 1px solid var(--post-border);
	padding: 10px 14px;
	text-align: left;
}
.post-prose th {
	background: #f8f9fa;
	font-weight: 500;
	color: var(--post-dark);
}

.post-prose hr {
	border: none;
	border-top: 1px solid var(--post-border);
	margin: 2.5em 0;
}

/* Video / embed containers */
.post-prose iframe,
.post-prose video {
	max-width: 100%;
	border-radius: 4px;
	margin: 2em 0;
}

/* WP gallery override */
.post-prose .wp-block-gallery {
	margin: 2em 0;
}


/* ══════════════════════════════════════════════════════════════════════
   POST TAGS — below article body
   ══════════════════════════════════════════════════════════════════════ */
.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 32px 0;
	border-top: 1px solid var(--post-border);
	margin-top: 16px;
}
.post-tags__label {
	font-family: var(--h-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--post-body);
	line-height: 32px;
	margin-right: 4px;
}
.post-tags__link {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid var(--post-border);
	border-radius: 50px;
	font-family: var(--h-font);
	font-size: 13px;
	font-weight: 500;
	color: var(--post-body);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.post-tags__link:hover {
	background: var(--post-dark);
	color: #fff;
	border-color: var(--post-dark);
}


/* ══════════════════════════════════════════════════════════════════════
   POST NAVIGATION — prev / next links
   ══════════════════════════════════════════════════════════════════════ */
.post-nav {
	max-width: var(--post-wide-max);
	margin: 0 auto;
	padding: 0 var(--h-pad, 20px) 48px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 768px) {
	.post-nav {
		grid-template-columns: 1fr 1fr;
		padding: 0 0 64px;
	}
}

.post-nav__item {
	padding: 24px;
	border: 1px solid var(--post-border);
	border-radius: 8px;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.post-nav__item:hover {
	border-color: var(--post-dark);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.post-nav__item--next {
	text-align: right;
}
.post-nav__direction {
	display: block;
	font-family: var(--h-font);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--post-body);
	margin-bottom: 8px;
}
.post-nav__title {
	font-family: var(--h-font);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--post-dark);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


/* ══════════════════════════════════════════════════════════════════════
   RELATED POSTS — 3 or 4 card grid
   ══════════════════════════════════════════════════════════════════════ */
.post-related {
	background: #f8f9fa;
	padding: 64px var(--h-pad, 20px);
}
@media (min-width: 1200px) {
	.post-related { padding: 80px 47px; }
}

.post-related__inner {
	max-width: var(--post-wide-max);
	margin: 0 auto;
}

.post-related__heading {
	font-family: var(--h-font);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.2;
	color: var(--post-dark);
	margin: 0 0 32px;
}
@media (min-width: 1200px) {
	.post-related__heading { font-size: 36px; }
}

.post-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 768px) {
	.post-related__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
	.post-related__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Reuse .blog-card styles from blog.css — we include blog-card classes in the markup.
   These overrides handle the different background context (gray bg). */
.post-related .blog-card {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.post-related .blog-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.post-related .blog-card__body {
	padding: 12px 16px 16px;
}


/* ══════════════════════════════════════════════════════════════════════
   TRUST BAR (same wrapper as blog listing)
   ══════════════════════════════════════════════════════════════════════ */
.post-trust {
	padding: 40px var(--h-pad, 20px) 48px;
	border-top: 1px solid var(--post-border);
}
@media (min-width: 1200px) {
	.post-trust { padding: 40px 47px 48px; }
}
/* Badge layout handled by trust-bar.css */