/* Blog Detail — scoped to .blog-single */

.blog-single {
	/*
	 * Alignment model (large desktop with side TOC):
	 *   .blog-single__hero-shell  = fixed reference (site shell, centered)
	 *   .blog-single__main        = same left edge as hero-shell
	 *   .blog-single__toc-rail    = sits in the left page fringe, outside hero-shell
	 *
	 * Side TOC needs fringe >= toc + gap:
	 *   (viewport - 1180) / 2 >= 260 + 48  →  viewport ≳ 1796px
	 */
	--blog-hero-shell-width: 1180px;
	--blog-toc-width: 260px;
	--blog-body-gap: 48px;
	--blog-main-width: 1100px;
	--blog-measure: 900px;
	--blog-page-gutter: 48px;
	/* Related / CTA sections */
	--blog-shell: 1180px;
	/* Back-compat aliases */
	--blog-shell-width: var(--blog-hero-shell-width);
	--blog-body-shell: var(--blog-hero-shell-width);
	--blog-toc: var(--blog-toc-width);
	--blog-content: var(--blog-main-width);
	--blog-toc-gap: var(--blog-body-gap);
	color: var(--brem-text, #132b40);
}

.blog-single .shell {
	width: min(var(--blog-shell), calc(100% - var(--blog-page-gutter)));
	margin-inline: auto;
}

.blog-single .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 19px;
	border: 1px solid var(--brem-blue, #0873ba);
	background: var(--brem-blue, #0873ba);
	color: #fff;
	font: 700 14px var(--brem-font, Arial, Helvetica, sans-serif);
	text-decoration: none;
}

.blog-single .btn:hover,
.blog-single .btn:focus-visible {
	color: #fff;
}

/* —— Hero (baseline — do not shift for TOC) —— */
.blog-single__hero {
	padding: clamp(2.5rem, 5vw, 4.5rem) 0;
	border-bottom: 1px solid var(--brem-line, #d6e3eb);
	background: linear-gradient(180deg, #f5f9fc 0%, #fff 72%);
}

.blog-single__hero-shell {
	width: min(var(--blog-hero-shell-width), calc(100% - var(--blog-page-gutter)));
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

.blog-single__hero--text .blog-single__hero-shell {
	grid-template-columns: minmax(0, 1fr);
	max-width: none;
}

.blog-single__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin: 0 0 1rem;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--brem-muted, #5c7388);
}

.blog-single__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.blog-single__breadcrumb a:hover,
.blog-single__breadcrumb a:focus-visible {
	color: var(--brem-blue, #0873ba);
}

.blog-single__breadcrumb-sep {
	opacity: 0.55;
}

.blog-single__category {
	margin: 0 0 0.65rem;
	color: var(--brem-blue, #0873ba);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.blog-single__title {
	margin: 0 0 1rem;
	color: var(--brem-navy, #072d51);
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	line-height: 1.12;
	font-weight: 700;
	max-width: 18ch;
}

.blog-single__hero--text .blog-single__title {
	max-width: 22ch;
}

.blog-single__excerpt {
	margin: 0 0 1.25rem;
	max-width: 38rem;
	color: var(--brem-muted, #5c7388);
	font-size: 1.05rem;
	line-height: 1.65;
}

.blog-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.55rem;
	margin: 0;
	color: var(--brem-muted, #5c7388);
	font-size: 0.86rem;
}

.blog-single__meta time {
	color: var(--brem-text, #132b40);
}

.blog-single__meta-sep {
	opacity: 0.5;
}

.blog-single__featured {
	margin: 0;
	overflow: hidden;
	background: #e8f0f6;
	aspect-ratio: 16 / 10;
}

.blog-single__featured-img,
.blog-single__featured img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* —— Body ——
 * Default (most viewports): TOC stacked above; body shell == hero shell.
 * Wide desktop (≥1800px): page grid places TOC in left fringe so
 *   main.left === hero-shell.left
 *   while TOC sits outside to the left.
 */
.blog-single__body {
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
}

.blog-single__body-shell {
	width: min(var(--blog-hero-shell-width), calc(100% - var(--blog-page-gutter)));
	margin-inline: auto;
	display: block;
}

.blog-single__toc-rail {
	min-width: 0;
	margin: 0 0 2rem;
}

.blog-single__toc {
	position: static;
}

.blog-single__main {
	width: 100%;
	min-width: 0;
	max-width: var(--blog-main-width);
}

.blog-single__content.brem-prose {
	max-width: none;
	width: 100%;
}

/* Wide desktop: side TOC in left fringe; main shares hero-shell left edge */
@media (min-width: 1800px) {
	.blog-single__body-shell:not(.blog-single__body-shell--solo) {
		/* Full-bleed row: left fringe | hero-aligned center | right fringe */
		width: 100%;
		max-width: none;
		margin: 0;
		display: grid;
		grid-template-columns:
			minmax(0, 1fr)
			min(var(--blog-hero-shell-width), calc(100% - var(--blog-page-gutter)))
			minmax(0, 1fr);
		column-gap: 0;
		align-items: start;
	}

	.blog-single__body-shell:not(.blog-single__body-shell--solo) .blog-single__toc-rail {
		grid-column: 1;
		justify-self: end;
		width: var(--blog-toc-width);
		max-width: 100%;
		box-sizing: content-box;
		padding-right: var(--blog-body-gap);
		margin: 0;
	}

	.blog-single__body-shell:not(.blog-single__body-shell--solo) .blog-single__toc {
		position: sticky;
		top: calc(var(--brem-site-chrome-height, 112px) + 32px);
	}

	.blog-single__body-shell:not(.blog-single__body-shell--solo) .blog-single__main {
		grid-column: 2;
		max-width: var(--blog-main-width);
	}

	.blog-single__body-shell:not(.blog-single__body-shell--solo) .blog-single__toc-panel {
		display: block;
	}

	.blog-single__body-shell:not(.blog-single__body-shell--solo) .blog-single__toc-panel .blog-single__toc {
		display: block !important;
	}

	.blog-single__body-shell:not(.blog-single__body-shell--solo) .blog-single__toc-summary {
		cursor: default;
		pointer-events: none;
	}

	.blog-single__body-shell:not(.blog-single__body-shell--solo) .blog-single__toc-summary::after {
		display: none;
	}
}

.blog-single__toc-panel {
	margin: 0;
	border: 0;
	background: transparent;
	padding: 0;
}

.blog-single__toc-summary {
	cursor: default;
	list-style: none;
	margin: 0 0 0.85rem;
	padding: 0 0 0.55rem;
	border-bottom: 1px solid var(--brem-line, #d6e3eb);
	color: var(--brem-navy, #072d51);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.blog-single__toc-summary::-webkit-details-marker {
	display: none;
}

.blog-single__toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-single__toc-item {
	margin: 0;
}

.blog-single__toc-item a {
	display: block;
	padding: 0.45rem 0 0.45rem 0.85rem;
	border-left: 2px solid transparent;
	color: var(--brem-muted, #5c7388);
	font-size: 0.86rem;
	line-height: 1.4;
	text-decoration: none;
}

.blog-single__toc-item--h3 a {
	padding-left: 1.4rem;
	font-size: 0.82rem;
}

.blog-single__toc-item a:hover,
.blog-single__toc-item a:focus-visible {
	color: var(--brem-blue, #0873ba);
}

.blog-single__toc-item.is-active a {
	border-left-color: var(--brem-blue, #0873ba);
	color: var(--brem-blue, #0873ba);
	font-weight: 600;
}

.blog-single__topics-label {
	margin: 0 0 0.65rem;
	color: var(--brem-navy, #072d51);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.blog-single__topics-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-single__topics-list a {
	color: var(--brem-blue, #0873ba);
	font-size: 0.86rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.blog-single__topics-list a:hover,
.blog-single__topics-list a:focus-visible {
	border-bottom-color: currentColor;
}

/* —— Editorial content —— */
.blog-single__content {
	font-size: 1.0625rem;
	line-height: 1.78;
	color: var(--brem-text, #132b40);
}

.blog-single__content > *:first-child {
	margin-top: 0;
}

/* Keep long-form text readable; tables/figures use full 1100px article width */
.blog-single__content > p,
.blog-single__content > ul,
.blog-single__content > ol,
.blog-single__content > blockquote {
	max-width: var(--blog-measure);
}

.blog-single__content h2,
.blog-single__content h3,
.blog-single__content h4 {
	color: var(--brem-navy, #072d51);
	scroll-margin-top: calc(var(--brem-site-chrome-height, 112px) + 24px);
}

.blog-single__content h2 {
	margin: 2.4rem 0 0.85rem;
	font-size: clamp(1.45rem, 2.4vw, 1.85rem);
	line-height: 1.25;
}

.blog-single__content h3 {
	margin: 1.8rem 0 0.65rem;
	font-size: 1.2rem;
}

.blog-single__content h4 {
	margin: 1.4rem 0 0.5rem;
	font-size: 1.05rem;
}

.blog-single__content p {
	margin: 0 0 1.15rem;
}

.blog-single__content a {
	color: var(--brem-blue, #0873ba);
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-word;
}

.blog-single__content ul,
.blog-single__content ol {
	margin: 0 0 1.25rem;
	padding-left: 1.35rem;
}

.blog-single__content li {
	margin: 0 0 0.45rem;
	padding-left: 0.15rem;
}

.blog-single__content li > ul,
.blog-single__content li > ol {
	margin-top: 0.45rem;
	margin-bottom: 0;
}

.blog-single__content blockquote {
	margin: 1.5rem 0;
	padding: 0.35rem 0 0.35rem 1.1rem;
	border-left: 3px solid var(--brem-blue, #0873ba);
	color: var(--brem-navy, #072d51);
	font-size: 1.05rem;
}

.blog-single__content blockquote p:last-child {
	margin-bottom: 0;
}

.blog-single__content figure {
	margin: 1.75rem 0;
}

.blog-single__content figcaption {
	margin-top: 0.55rem;
	color: var(--brem-muted, #5c7388);
	font-size: 0.86rem;
}

.blog-single__content img {
	height: auto;
	border-radius: 0;
}

.blog-single__content .wp-block-table,
.blog-single__content .brem-table {
	display: block;
	width: 100%;
	overflow-x: auto;
	margin: 1.5rem 0;
	-webkit-overflow-scrolling: touch;
}

.blog-single__content table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
}

.blog-single__content th {
	background: #e2eff7;
	color: var(--brem-navy, #072d51);
	text-align: left;
}

.blog-single__content th,
.blog-single__content td {
	padding: 0.8rem;
	border-bottom: 1px solid var(--brem-line, #d6e3eb);
	vertical-align: top;
}

.blog-single__content hr {
	margin: 2rem 0;
	border: 0;
	border-top: 1px solid var(--brem-line, #d6e3eb);
}

.blog-single__content pre,
.blog-single__content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.blog-single__content pre {
	overflow-x: auto;
	padding: 1rem;
	background: var(--brem-soft, #eff6fa);
}

/* Inline CTA */
.blog-single__inline-cta {
	margin: 2rem 0;
	padding: 1.35rem 1.4rem;
	border: 1px solid var(--brem-line, #d6e3eb);
	background: var(--brem-soft, #eff6fa);
}

.blog-single__inline-cta-title {
	margin: 0 0 0.45rem;
	color: var(--brem-navy, #072d51);
	font-size: 1.1rem;
	font-weight: 700;
}

.blog-single__inline-cta-text {
	margin: 0 0 1rem;
	color: var(--brem-muted, #5c7388);
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 40rem;
}

.blog-single__inline-cta-action {
	margin: 0;
}

/* Article footer */
.blog-single__article-footer {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--brem-line, #d6e3eb);
}

.blog-single__article-updated {
	margin: 0 0 1rem;
	color: var(--brem-muted, #5c7388);
	font-size: 0.86rem;
}

/* Shared section heads */
.blog-single__section-head {
	margin: 0 0 1.75rem;
	max-width: 40rem;
}

.blog-single__section-kicker {
	margin: 0 0 0.45rem;
	color: var(--brem-blue, #0873ba);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.blog-single__section-head h2 {
	margin: 0 0 0.55rem;
	color: var(--brem-navy, #072d51);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.blog-single__section-head p {
	margin: 0;
	color: var(--brem-muted, #5c7388);
	font-size: 0.98rem;
	line-height: 1.6;
}

.blog-single__text-link {
	color: var(--brem-blue, #0873ba);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
}

.blog-single__text-link:hover,
.blog-single__text-link:focus-visible {
	text-decoration: underline;
}

/* Related commercial */
.blog-single__commercial-related {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	background: var(--brem-soft, #eff6fa);
	border-top: 1px solid var(--brem-line, #d6e3eb);
}

.blog-single__commercial-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.blog-single__commercial-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--brem-line, #d6e3eb);
}

.blog-single__commercial-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #e8f0f6;
}

.blog-single__commercial-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-single__commercial-body {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 1.1rem 1.15rem 1.25rem;
	flex: 1;
}

.blog-single__commercial-type {
	margin: 0;
	color: var(--brem-muted, #5c7388);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.blog-single__commercial-title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}

.blog-single__commercial-title a {
	color: var(--brem-navy, #072d51);
	text-decoration: none;
}

.blog-single__commercial-title a:hover,
.blog-single__commercial-title a:focus-visible {
	color: var(--brem-blue, #0873ba);
}

.blog-single__commercial-text {
	margin: 0;
	color: var(--brem-muted, #5c7388);
	font-size: 0.88rem;
	line-height: 1.55;
	flex: 1;
}

/* Related articles */
.blog-single__related-posts {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	border-top: 1px solid var(--brem-line, #d6e3eb);
}

.blog-single__related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.blog-single__related-card {
	display: flex;
	flex-direction: column;
}

.blog-single__related-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	margin-bottom: 0.9rem;
	background: #e8f0f6;
}

.blog-single__related-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-single__related-category {
	margin: 0 0 0.35rem;
	color: var(--brem-blue, #0873ba);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.blog-single__related-title {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	line-height: 1.3;
}

.blog-single__related-title a {
	color: var(--brem-navy, #072d51);
	text-decoration: none;
}

.blog-single__related-title a:hover,
.blog-single__related-title a:focus-visible {
	color: var(--brem-blue, #0873ba);
}

.blog-single__related-date {
	margin: 0 0 0.45rem;
	color: var(--brem-muted, #5c7388);
	font-size: 0.82rem;
}

.blog-single__related-excerpt {
	margin: 0;
	color: var(--brem-muted, #5c7388);
	font-size: 0.88rem;
	line-height: 1.55;
}

/* —— Responsive —— */

/* Stacked TOC accordion controls (default below wide side-TOC breakpoint) */
@media (max-width: 1799px) {
	.blog-single__toc-summary {
		cursor: pointer;
		pointer-events: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.85rem 0;
		border-bottom: 1px solid var(--brem-line, #d6e3eb);
	}

	.blog-single__toc-summary::after {
		content: "+";
		display: inline;
		font-size: 1.1rem;
		line-height: 1;
		color: var(--brem-muted, #5c7388);
	}

	.blog-single__toc-panel[open] .blog-single__toc-summary::after {
		content: "–";
	}
}

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

@media (max-width: 768px) {
	.blog-single {
		--blog-page-gutter: 40px;
	}

	.blog-single__hero-shell {
		grid-template-columns: 1fr;
	}

	.blog-single__title {
		max-width: none;
		font-size: clamp(1.85rem, 7vw, 2.4rem);
	}

	.blog-single .shell {
		width: min(var(--blog-shell), calc(100% - 40px));
	}

	.blog-single__content > p,
	.blog-single__content > ul,
	.blog-single__content > ol,
	.blog-single__content > blockquote {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.blog-single__commercial-grid,
	.blog-single__related-grid {
		grid-template-columns: 1fr;
	}

	.blog-single__toc-panel:not([open]) .blog-single__toc {
		display: none;
	}
}