/* Single Blog Post — matches the real blog-detail-N.html "Variant A" pages
   (no sidebar, category tags + share icons + related-blogs slider), using
   this project's real breakpoints: sm=640, md=769, lg=992, xl=1199,
   1xl=1380, 2xl=1752. */

/* Hero is capped at 1720px (not truly edge-to-edge at very wide
   viewports) — matches the reference's own `.container
   min-[1720px]:max-w-[1720px]` wrapper around the hero image exactly.
   Built as a fully independent class (own complete width schedule)
   rather than combined with the bare `.container` class: this theme's
   style.css sets `.container{max-width:...!important}` at every real
   breakpoint, and `!important` always wins over a plain override
   regardless of selector specificity or source order — the same issue
   already discovered once for `.orion-lb3__inner`. Never pair a custom
   width override with the bare `.container` class in this theme; give
   the override its own full breakpoint schedule instead. */
/* HTML: `.container min-[1720px]:!max-w-[1720px] md:!px-4 !p-0` around hero.
   Must follow the normal container max-width schedule below 1720, then cap. */
.orion-blog-detail__hero {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 210px;
	max-width: none;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}
@media (min-width: 640px)  { .orion-blog-detail__hero { max-width: 640px; height: 450px; } }
@media (min-width: 769px)  { .orion-blog-detail__hero { max-width: 769px; height: 500px; padding: 0 16px; } }
@media (min-width: 992px)  { .orion-blog-detail__hero { max-width: 992px; height: 600px; } }
@media (min-width: 1199px) { .orion-blog-detail__hero { max-width: 1199px; height: 670px; } }
@media (min-width: 1380px) { .orion-blog-detail__hero { max-width: 1380px; height: calc(100vh - 10vh); } }
@media (min-width: 1720px) { .orion-blog-detail__hero { max-width: 1720px; } }

/* Title-first hero uses 12vh offset in HTML blog-detail-3.
   Mobile HTML uses h-full — approximate with a shorter mobile height. */
.orion-blog-detail__title-first-section ~ .orion-blog-detail__hero {
	height: auto;
	aspect-ratio: 390 / 197;
	max-height: 210px;
	margin-bottom: 24px;
}
@media (min-width: 640px) {
	.orion-blog-detail__title-first-section ~ .orion-blog-detail__hero {
		aspect-ratio: auto;
		max-height: none;
		height: 450px;
		margin-bottom: 32px;
	}
}
@media (min-width: 769px) {
	.orion-blog-detail__title-first-section ~ .orion-blog-detail__hero { height: 500px; margin-bottom: 40px; }
}
@media (min-width: 992px) {
	.orion-blog-detail__title-first-section ~ .orion-blog-detail__hero { height: 600px; }
}
@media (min-width: 1199px) {
	.orion-blog-detail__title-first-section ~ .orion-blog-detail__hero { height: 670px; margin-bottom: 60px; }
}
@media (min-width: 1380px) {
	.orion-blog-detail__title-first-section ~ .orion-blog-detail__hero { height: calc(100vh - 12vh); }
}

.orion-blog-detail__hero img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.orion-blog-detail__body-section {
	position: relative;
	overflow: hidden;
	margin-bottom: 40px;
}
@media (min-width: 640px)  { .orion-blog-detail__body-section { margin-bottom: 50px; } }
@media (min-width: 992px)  { .orion-blog-detail__body-section { margin-bottom: 70px; } }
@media (min-width: 1380px) { .orion-blog-detail__body-section { margin-bottom: 80px; } }
@media (min-width: 1752px) { .orion-blog-detail__body-section { margin-bottom: 100px; } }

/* Narrower reading-column container, capped at 1252px from 1220px+ (the
   real reference overrides its normal .container max-width here) — a
   fully independent schedule, not combined with the bare `.container`
   class, for the `!important` reason explained above. */
.orion-blog-detail__container {
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
	padding-top: 24px;
	padding-bottom: 24px;
}
@media (min-width: 640px)  { .orion-blog-detail__container { max-width: 640px; padding-top: 32px; padding-bottom: 32px; } }
@media (min-width: 769px)  { .orion-blog-detail__container { max-width: 769px; padding-top: 40px; padding-bottom: 40px; } }
@media (min-width: 992px)  { .orion-blog-detail__container { max-width: 992px; } }
@media (min-width: 1199px) { .orion-blog-detail__container { max-width: 1199px; padding-top: 50px; padding-bottom: 50px; } }
@media (min-width: 1220px) { .orion-blog-detail__container { max-width: 1252px; } }

/* HTML: `flex items-center sm:gap-[15px] gap-[10px] md:mb-[30px] sm:mb-6 mb-3.5` */
.orion-blog-detail__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
@media (min-width: 640px) {
	.orion-blog-detail__meta { gap: 15px; margin-bottom: 24px; }
}
@media (min-width: 769px) {
	.orion-blog-detail__meta { margin-bottom: 30px; }
}

.orion-blog-detail__author-avatar {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
@media (min-width: 769px) { .orion-blog-detail__author-avatar { width: 40px; height: 40px; } }

/* HTML: `.blog-details-content .author-name` — primary, medium, uppercase.
   Size inherits blog-details p schedule (15→16→18) with max-[767px]:text-sm
   and max-[640px]:text-[13px]. */
.orion-blog-detail__meta p,
.orion-blog-detail__meta .author-name {
	margin: 0;
	color: var(--orion-primary, var(--orion-primary));
	text-transform: uppercase;
	font-family: Lexend, sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 23px;
	padding-top: 6px;
	padding-bottom: 6px;
}
@media (min-width: 641px) {
	.orion-blog-detail__meta p,
	.orion-blog-detail__meta .author-name {
		font-size: 14px;
	}
}
@media (min-width: 768px) {
	.orion-blog-detail__meta p,
	.orion-blog-detail__meta .author-name {
		font-size: 15px;
	}
}
@media (min-width: 992px) {
	.orion-blog-detail__meta p,
	.orion-blog-detail__meta .author-name {
		line-height: 25px;
		padding-top: 8px;
		padding-bottom: 8px;
	}
}
@media (min-width: 1199px) {
	.orion-blog-detail__meta p,
	.orion-blog-detail__meta .author-name {
		font-size: 16px;
		line-height: 26px;
	}
}
@media (min-width: 1380px) {
	.orion-blog-detail__meta p,
	.orion-blog-detail__meta .author-name { line-height: 28px; }
}
@media (min-width: 1752px) {
	.orion-blog-detail__meta p,
	.orion-blog-detail__meta .author-name {
		font-size: 18px;
		line-height: 32px;
	}
}
.orion-blog-detail__meta a {
	color: #000;
	border-bottom: 1px solid var(--orion-primary, var(--orion-primary));
	text-transform: uppercase;
}
.orion-blog-detail__meta a:hover { color: var(--orion-primary, var(--orion-primary)); }

/* Title wrap only provides outer spacing in HTML via sibling structure;
   h2 itself carries bottom padding (pb-3 / 1xl:pb-5 / 2xl:pb-[26px]). */
.orion-blog-detail__title-wrap { padding-bottom: 0; }

/*
 * Content typography — match HTML `h2/.h2`, `h4/.h4`, `.blog-details-content p`.
 * !important beats Flat Global Typography (long h2:not(...) chains + --orion-h2-size).
 */
.orion-blog-detail__content h2,
.orion-blog-detail__main-col > h2,
.orion-blog-detail__title-first-container h2,
.orion-blog-detail__related-header h2,
.orion-blog-detail__hero--toc-content h2,
h2.orion-blog-detail__title {
	font-family: var(--orion-font-heading, "El Messiri", sans-serif) !important;
	font-weight: 500 !important;
	color: #000;
	margin: 0;
	font-size: 26px !important;
	line-height: 36px !important;
}
.orion-blog-detail__content h2 {
	padding-bottom: 12px;
}
.orion-blog-detail__hero--toc-content h2,
.orion-blog-detail__hero--toc-content h2.orion-blog-detail__title { color: #fff; }
@media (min-width: 640px) {
	.orion-blog-detail__content h2,
	.orion-blog-detail__main-col > h2,
	.orion-blog-detail__title-first-container h2,
	.orion-blog-detail__related-header h2,
	.orion-blog-detail__hero--toc-content h2,
	h2.orion-blog-detail__title {
		font-size: 30px !important;
		line-height: 40px !important;
	}
}
@media (min-width: 769px) {
	.orion-blog-detail__content h2,
	.orion-blog-detail__main-col > h2,
	.orion-blog-detail__title-first-container h2,
	.orion-blog-detail__related-header h2,
	.orion-blog-detail__hero--toc-content h2,
	h2.orion-blog-detail__title {
		font-size: 35px !important;
		line-height: 40px !important;
	}
}
@media (min-width: 1199px) {
	.orion-blog-detail__content h2,
	.orion-blog-detail__main-col > h2,
	.orion-blog-detail__title-first-container h2,
	.orion-blog-detail__related-header h2,
	.orion-blog-detail__hero--toc-content h2,
	h2.orion-blog-detail__title {
		font-size: 40px !important;
		line-height: 50px !important;
	}
}
@media (min-width: 1380px) {
	.orion-blog-detail__content h2,
	.orion-blog-detail__main-col > h2,
	.orion-blog-detail__title-first-container h2,
	.orion-blog-detail__related-header h2,
	.orion-blog-detail__hero--toc-content h2,
	h2.orion-blog-detail__title {
		font-size: 46px !important;
		line-height: 55px !important;
	}
	.orion-blog-detail__content h2 { padding-bottom: 20px; }
}
@media (min-width: 1752px) {
	.orion-blog-detail__content h2,
	.orion-blog-detail__main-col > h2,
	.orion-blog-detail__title-first-container h2,
	.orion-blog-detail__related-header h2,
	.orion-blog-detail__hero--toc-content h2,
	h2.orion-blog-detail__title {
		font-size: 60px !important;
		line-height: 70px !important;
	}
	.orion-blog-detail__content h2 { padding-bottom: 26px; }
}

.orion-blog-detail__content h3:not(.orion-blog-detail__comments-heading):not(.orion-blog-detail__leave-title):not(.orion-blog-detail__reply-title) {
	font-family: "El Messiri", sans-serif !important;
	font-weight: 500 !important;
	color: #000;
	font-size: 26px !important;
	line-height: 30px !important;
	margin: 0;
}
@media (min-width: 640px) { .orion-blog-detail__content h3:not(.orion-blog-detail__comments-heading):not(.orion-blog-detail__leave-title):not(.orion-blog-detail__reply-title) { line-height: 32px !important; } }
@media (min-width: 769px) { .orion-blog-detail__content h3:not(.orion-blog-detail__comments-heading):not(.orion-blog-detail__leave-title):not(.orion-blog-detail__reply-title) { font-size: 30px !important; line-height: 38px !important; } }
@media (min-width: 1199px) { .orion-blog-detail__content h3:not(.orion-blog-detail__comments-heading):not(.orion-blog-detail__leave-title):not(.orion-blog-detail__reply-title) { line-height: 40px !important; } }
@media (min-width: 1380px) { .orion-blog-detail__content h3:not(.orion-blog-detail__comments-heading):not(.orion-blog-detail__leave-title):not(.orion-blog-detail__reply-title) { font-size: 36px !important; } }
@media (min-width: 1752px) { .orion-blog-detail__content h3:not(.orion-blog-detail__comments-heading):not(.orion-blog-detail__leave-title):not(.orion-blog-detail__reply-title) { font-size: 45px !important; line-height: 60px !important; } }

/* HTML h4: text-xl md:text-2xl xl:text-[24px] 2xl:text-3xl + blog-details padding */
.orion-blog-detail__content h4 {
	font-family: "El Messiri", sans-serif !important;
	font-weight: 500 !important;
	color: #000;
	font-size: 20px !important;
	line-height: 28px !important;
	margin: 0;
	padding-top: 20px;
	padding-bottom: 4px;
}
@media (min-width: 640px) {
	.orion-blog-detail__content h4 { padding-bottom: 8px; }
}
@media (min-width: 769px) {
	.orion-blog-detail__content h4 { font-size: 22px !important; }
}
@media (min-width: 1199px) {
	.orion-blog-detail__content h4 {
		font-size: 24px !important;
		line-height: 32px !important;
	}
}
@media (min-width: 1380px) {
	.orion-blog-detail__content h4 {
		line-height: 36px !important;
		padding-top: 24px;
		padding-bottom: 10px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__content h4 {
		font-size: 30px !important;
		line-height: 42px !important;
	}
}

/* HTML `.blog-details-content p`: text-[15px] xl:text-base 2xl:text-lg + leading + py
   Exclude author meta line when it sits inside the content column (sidebar layout). */
.orion-blog-detail__content > p,
.orion-blog-detail__content .orion-blog-detail__title-wrap > p,
.orion-blog-detail__content p:not(.author-name) {
	font-family: Lexend, sans-serif !important;
	font-weight: 300 !important;
	color: #000;
	font-size: 15px !important;
	line-height: 23px !important;
	margin: 0;
	padding-top: 6px;
	padding-bottom: 6px;
}
@media (min-width: 992px) {
	.orion-blog-detail__content > p,
	.orion-blog-detail__content .orion-blog-detail__title-wrap > p,
	.orion-blog-detail__content p:not(.author-name) {
		line-height: 25px !important;
		padding-top: 8px;
		padding-bottom: 8px;
	}
}
@media (min-width: 1199px) {
	.orion-blog-detail__content > p,
	.orion-blog-detail__content .orion-blog-detail__title-wrap > p,
	.orion-blog-detail__content p:not(.author-name) {
		font-size: 16px !important;
		line-height: 26px !important;
	}
}
@media (min-width: 1380px) {
	.orion-blog-detail__content > p,
	.orion-blog-detail__content .orion-blog-detail__title-wrap > p,
	.orion-blog-detail__content p:not(.author-name) { line-height: 28px !important; }
}
@media (min-width: 1752px) {
	.orion-blog-detail__content > p,
	.orion-blog-detail__content .orion-blog-detail__title-wrap > p,
	.orion-blog-detail__content p:not(.author-name) {
		font-size: 18px !important;
		line-height: 32px !important;
	}
}

/* Keep author line primary when nested in the content column */
.orion-blog-detail__content .orion-blog-detail__meta p,
.orion-blog-detail__content .orion-blog-detail__meta .author-name,
.orion-blog-detail__meta--accent p,
.orion-blog-detail__meta--accent .author-name {
	color: var(--orion-primary, var(--orion-primary));
	font-weight: 500;
	text-transform: uppercase;
}

.orion-blog-detail__content ul.custom-list,
.orion-blog-detail__content ul {
	margin: 0;
	padding-top: 12px;
	padding-bottom: 12px;
}
@media (min-width: 1199px) {
	.orion-blog-detail__content ul.custom-list,
	.orion-blog-detail__content ul {
		padding-top: 14px;
		padding-bottom: 14px;
	}
}
.orion-blog-detail__content ul.custom-list li,
.orion-blog-detail__content ul li {
	font-family: Lexend, sans-serif !important;
	font-weight: 300 !important;
	color: #000;
	font-size: 15px !important;
	line-height: 23px !important;
	margin-bottom: 10px;
}
@media (min-width: 992px) {
	.orion-blog-detail__content ul.custom-list li,
	.orion-blog-detail__content ul li { line-height: 25px !important; }
}
@media (min-width: 1199px) {
	.orion-blog-detail__content ul.custom-list li,
	.orion-blog-detail__content ul li {
		font-size: 16px !important;
		line-height: 26px !important;
	}
}
@media (min-width: 1380px) {
	.orion-blog-detail__content ul.custom-list li,
	.orion-blog-detail__content ul li {
		line-height: 28px !important;
		margin-bottom: 12px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__content ul.custom-list li,
	.orion-blog-detail__content ul li {
		font-size: 18px !important;
		line-height: 32px !important;
	}
}
.orion-blog-detail__content strong {
	color: #000;
	font-weight: 500;
}

.orion-blog-detail__content blockquote {
	border-left: 5px solid var(--orion-primary);
	background-color: color-mix(in srgb, var(--orion-primary) 12%, transparent);
	padding: 16px;
	margin: 16px 0 8px;
}
@media (min-width: 640px)  { .orion-blog-detail__content blockquote { padding: 24px 32px; margin-top: 24px; } }
@media (min-width: 769px)  { .orion-blog-detail__content blockquote { padding-top: 28px; padding-bottom: 28px; } }
@media (min-width: 992px)  { .orion-blog-detail__content blockquote { margin-bottom: 16px; } }
@media (min-width: 1199px) { .orion-blog-detail__content blockquote { padding-left: 40px; padding-right: 40px; } }
@media (min-width: 1380px) { .orion-blog-detail__content blockquote { margin-top: 30px; } }

.orion-blog-detail__content blockquote p {
	font-family: "El Messiri", sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #000;
	line-height: 24px;
	margin: 0;
	padding: 0;
}
@media (min-width: 992px)  { .orion-blog-detail__content blockquote p { line-height: 30px; } }
@media (min-width: 1199px) {
	.orion-blog-detail__content blockquote p {
		font-size: 18px;
		line-height: 32px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__content blockquote p {
		font-size: 22px;
		line-height: 35px;
	}
}

.orion-blog-detail__quote-client {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
}
@media (min-width: 640px) { .orion-blog-detail__quote-client { margin-top: 32px; } }
.orion-blog-detail__quote-client h6 { margin: 0; font-weight: 500; color: #3E2924; }
.orion-blog-detail__quote-client p { margin: 0; font-weight: 300; color: #464343; }

.orion-blog-detail__content ul.custom-list li { margin-bottom: 8px; }

.orion-blog-detail__image-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 16px 0 8px;
}
@media (min-width: 640px)  { .orion-blog-detail__image-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 24px; } }
@media (min-width: 992px)  { .orion-blog-detail__image-grid { gap: 36px; margin-bottom: 16px; } }
@media (min-width: 1199px) { .orion-blog-detail__image-grid { gap: 40px; margin-top: 30px; } }
@media (min-width: 1752px) { .orion-blog-detail__image-grid { margin-top: 40px; } }

.orion-blog-detail__image-grid > div {
	position: relative;
	overflow: hidden;
}
.orion-blog-detail__image-grid > div::before { content: ''; display: block; padding-top: 65%; }
@media (min-width: 1380px) { .orion-blog-detail__image-grid > div::before { padding-top: 69%; } }
.orion-blog-detail__image-grid img {
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	max-width: none;
}

/* Category tags + Share row */
.orion-blog-detail__tags-share-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-top: 24px;
	margin-bottom: 44px;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
}
@media (min-width: 992px)  { .orion-blog-detail__tags-share-row { padding-top: 30px; margin-bottom: 56px; } }
@media (min-width: 1199px) { .orion-blog-detail__tags-share-row { margin-bottom: 64px; } }
@media (min-width: 1380px) { .orion-blog-detail__tags-share-row { margin-bottom: 72px; } }

.orion-blog-detail__tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
@media (min-width: 769px) { .orion-blog-detail__tags { gap: 12px; } }
@media (min-width: 992px) { .orion-blog-detail__tags { gap: 16px; } }
@media (min-width: 1199px) { .orion-blog-detail__tags { gap: 20px; } }

/* HTML `.sub-title` with `!tracking-[0.8px]` override on category/share labels */
.orion-blog-detail__tags h6,
.orion-blog-detail__share h6,
.orion-blog-detail__share-label,
h6.orion-blog-detail__share-label {
	margin: 0;
	font-family: Lexend, sans-serif !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 14px !important;
	letter-spacing: 0.8px !important;
	text-transform: uppercase;
	color: #000;
}
@media (min-width: 640px) {
	.orion-blog-detail__tags h6,
	.orion-blog-detail__share h6,
	.orion-blog-detail__share-label,
	h6.orion-blog-detail__share-label {
		font-size: 15px !important;
		line-height: 15px !important;
	}
}
@media (min-width: 769px) {
	.orion-blog-detail__tags h6,
	.orion-blog-detail__share h6,
	.orion-blog-detail__share-label,
	h6.orion-blog-detail__share-label {
		font-size: 16px !important;
		line-height: 16px !important;
	}
}
@media (min-width: 992px) {
	.orion-blog-detail__tags h6,
	.orion-blog-detail__share h6,
	.orion-blog-detail__share-label,
	h6.orion-blog-detail__share-label {
		font-size: 17px !important;
		line-height: 17px !important;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__tags h6,
	.orion-blog-detail__share h6,
	.orion-blog-detail__share-label,
	h6.orion-blog-detail__share-label {
		font-size: 20px !important;
		line-height: 20px !important;
	}
}
@media (min-width: 1199px) {
	.orion-blog-detail__tags h6 { margin-right: 10px; }
}

.orion-blog-detail__tag {
	background-color: #f5f6f6;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	padding: 2px 10px;
	line-height: 28px;
	font-size: 14px;
	color: #000;
	transition: background-color 0.2s ease, color 0.2s ease;
}
@media (min-width: 640px)  { .orion-blog-detail__tag { padding: 4px 15px; font-size: 16px; } }
@media (min-width: 769px)  { .orion-blog-detail__tag { padding: 6px 15px; } }
@media (min-width: 1199px) { .orion-blog-detail__tag { padding: 8px 15px; font-size: 18px; } }
.orion-blog-detail__tag:hover { background-color: var(--orion-primary); color: #fff; }

.orion-blog-detail__share {
	display: flex;
	align-items: center;
	gap: 8px;
}
.orion-blog-detail__share h6 { margin-right: 20px; }
.orion-blog-detail__share-icons {
	display: flex;
	align-items: center;
	gap: 15px;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 992px) { .orion-blog-detail__share-icons { gap: 24px; } }

.orion-blog-detail__share-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #f5f6f6;
	color: var(--orion-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}
@media (min-width: 640px)  { .orion-blog-detail__share-btn { width: 40px; height: 40px; } }
@media (min-width: 992px)  { .orion-blog-detail__share-btn { width: 45px; height: 45px; } }
@media (min-width: 1199px) { .orion-blog-detail__share-btn { width: 50px; height: 50px; } }
.orion-blog-detail__share-btn:hover { background-color: var(--orion-primary)!important; color: #fff; }
.orion-blog-detail__share-btn svg { width: 45%; height: 45%; }

/* Comments */
/* -------------------------------------------------------------------------
 * Comments list + Leave a Comment — match blog-detail-1.html exactly.
 * HTML gray-400 is theme-remapped to #464343 (not Tailwind’s #9ca3af).
 * ------------------------------------------------------------------------- */
.orion-blog-detail__comments-section {
	position: relative;
	margin-bottom: 32px;
}
@media (min-width: 769px)  { .orion-blog-detail__comments-section { margin-bottom: 50px; } }
@media (min-width: 992px)  { .orion-blog-detail__comments-section { margin-bottom: 70px; } }
@media (min-width: 1380px) { .orion-blog-detail__comments-section { margin-bottom: 80px; } }

/* HTML wrapper: `2xl:mb-9 1xl:mb-8 lg:mb-7 md:mb-6 sm:mb-5 mb-3` + h3 `m-0 font-normal`. */
.orion-blog-detail__comments-heading {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	font-family: var(--orion-font-heading, "El Messiri", sans-serif) !important;
	font-weight: 400 !important;
	color: #000;
	font-size: 26px !important;
	line-height: 30px !important;
	text-align: start;
}
@media (min-width: 640px) {
	.orion-blog-detail__comments-heading {
		margin-bottom: 20px;
		line-height: 32px !important;
	}
}
@media (min-width: 769px) {
	.orion-blog-detail__comments-heading {
		font-size: 30px !important;
		line-height: 38px !important;
		margin-bottom: 24px;
	}
}
@media (min-width: 992px) {
	.orion-blog-detail__comments-heading { margin-bottom: 28px; }
}
@media (min-width: 1199px) {
	.orion-blog-detail__comments-heading { line-height: 40px !important; }
}
@media (min-width: 1380px) {
	.orion-blog-detail__comments-heading {
		font-size: 36px !important;
		margin-bottom: 32px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__comments-heading {
		font-size: 45px !important;
		line-height: 60px !important;
		margin-bottom: 36px;
	}
}

.orion-blog-detail__comments-list {
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* HTML: `xl:pt-[37px] xl:pb-10 pt-[22px] pb-[30px]` + `md:gap-[35px] sm:gap-[25px] gap-3.5`
 * Separators sit on the top-level <li> (thread), not between parent text and its reply. */
.orion-blog-detail__comment {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 14px;
	padding: 22px 0 30px;
	border-bottom: 0;
}
@media (min-width: 640px)  { .orion-blog-detail__comment { gap: 25px; flex-wrap: nowrap; } }
@media (min-width: 769px)  { .orion-blog-detail__comment { gap: 35px; } }
@media (min-width: 1199px) { .orion-blog-detail__comment { padding-top: 37px; padding-bottom: 40px; } }

.orion-blog-detail__comments-list > .orion-blog-detail__comment-item,
.orion-blog-detail__comments-list > li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.orion-blog-detail__comments-list > .orion-blog-detail__comment-item:last-child,
.orion-blog-detail__comments-list > li:last-child {
	border-bottom: 0;
}
.orion-blog-detail__comments-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Nested reply indent — HTML `sm:ml-6` + left rule. */
.orion-blog-detail__comment.depth-2,
.orion-blog-detail__comment.depth-3 {
	border-bottom: 0;
	margin-top: 22px;
	padding-top: 0;
	padding-bottom: 30px;
}
@media (min-width: 640px) {
	.orion-blog-detail__comment.depth-2,
	.orion-blog-detail__comment.depth-3 {
		margin-left: 24px;
		margin-top: 28px;
		padding-left: 24px;
		border-left: 1px solid rgba(0, 0, 0, 0.15);
	}
}
@media (min-width: 992px) {
	.orion-blog-detail__comment.depth-2,
	.orion-blog-detail__comment.depth-3 { margin-top: 35px; }
}
@media (min-width: 1199px) {
	.orion-blog-detail__comment.depth-2,
	.orion-blog-detail__comment.depth-3 { padding-bottom: 40px; }
}

/* HTML avatar: max-w 80 / sm 100 / md 135, square (no radius). */
.orion-blog-detail__comment-avatar {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
}
@media (min-width: 640px) { .orion-blog-detail__comment-avatar { width: 100px; height: 100px; } }
@media (min-width: 769px) { .orion-blog-detail__comment-avatar { width: 135px; height: 135px; } }
.orion-blog-detail__comment-avatar img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.orion-blog-detail__comment-content { flex: 1; min-width: 0; }

.orion-blog-detail__comment-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}
@media (min-width: 640px)  { .orion-blog-detail__comment-head { margin-bottom: 15px; } }
@media (min-width: 1380px) { .orion-blog-detail__comment-head { margin-bottom: 16px; } }

.orion-blog-detail__comment-name-date {
	display: flex;
	flex-direction: column;
	gap: 0;
}
@media (min-width: 640px) { .orion-blog-detail__comment-name-date { flex-direction: row; align-items: center; gap: 5px; } }
@media (min-width: 769px) { .orion-blog-detail__comment-name-date { gap: 17px; } }

/* HTML h4: text-xl md:text-2xl xl:text-[24px] + font-medium. */
.orion-blog-detail__comment-name-date h4 {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--orion-font-heading, "El Messiri", sans-serif);
	font-weight: 500;
	color: #000;
	font-size: 20px;
	line-height: 28px;
}
@media (min-width: 769px) {
	.orion-blog-detail__comment-name-date h4 {
		font-size: 22px;
		line-height: 32px;
	}
}
@media (min-width: 1199px) {
	.orion-blog-detail__comment-name-date h4 {
		font-size: 24px;
		line-height: 32px;
	}
}
@media (min-width: 1380px) {
	.orion-blog-detail__comment-name-date h4 { line-height: 36px; }
}
@media (min-width: 1752px) {
	.orion-blog-detail__comment-name-date h4 {
		font-size: 30px;
		line-height: 42px;
	}
}

/* Date — HTML `text-[#464343]` + p schedule (light). */
.orion-blog-detail__comment-name-date p {
	margin: 0;
	color: #464343;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
}
@media (min-width: 992px) {
	.orion-blog-detail__comment-name-date p { font-size: 15px; line-height: 25px; }
}
@media (min-width: 1199px) {
	.orion-blog-detail__comment-name-date p { line-height: 26px; }
}
@media (min-width: 1380px) {
	.orion-blog-detail__comment-name-date p { line-height: 28px; }
}
@media (min-width: 1752px) {
	.orion-blog-detail__comment-name-date p { font-size: 18px; line-height: 32px; }
}

/* Body — HTML `text-gray-400` (= #464343) font-normal Lexend. */
.orion-blog-detail__comment-text p {
	margin: 0;
	color: #464343;
	font-family: Lexend, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 23px;
}
@media (min-width: 992px) {
	.orion-blog-detail__comment-text p { font-size: 15px; line-height: 25px; }
}
@media (min-width: 1199px) {
	.orion-blog-detail__comment-text p { line-height: 26px; }
}
@media (min-width: 1380px) {
	.orion-blog-detail__comment-text p { line-height: 28px; }
}
@media (min-width: 1752px) {
	.orion-blog-detail__comment-text p { font-size: 18px; line-height: 32px; }
}

/* Reply — HTML: <a class="flex items-center gap-[7px]"><svg/><p|span>Reply</p></a> */
.orion-blog-detail__comment-reply {
	display: inline-flex;
	align-items: center;
}
.orion-blog-detail__comment-reply a.comment-reply-link,
.orion-blog-detail__comment-reply a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--orion-primary, var(--orion-primary));
	text-decoration: none;
	text-transform: uppercase;
	font-family: "El Messiri", sans-serif;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 2.5px;
	line-height: 28px;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
}
@media (min-width: 640px) {
	.orion-blog-detail__comment-reply a.comment-reply-link,
	.orion-blog-detail__comment-reply a {
		font-size: 15px;
		letter-spacing: 3.6px;
	}
}
.orion-blog-detail__comment-reply-label {
	border-bottom: 1px solid var(--orion-primary, var(--orion-primary));
	line-height: inherit;
}
.orion-blog-detail__comment-reply-icon,
.orion-blog-detail__comment-reply svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	fill: currentColor;
	display: block;
}
@media (min-width: 640px) {
	.orion-blog-detail__comment-reply-icon,
	.orion-blog-detail__comment-reply svg {
		width: 20px;
		height: 20px;
	}
}
.orion-blog-detail__comment-reply a:hover {
	color: #000;
}
.orion-blog-detail__comment-reply a:hover .orion-blog-detail__comment-reply-label {
	border-bottom-color: #000;
}
.orion-blog-detail__comment-reply--desktop { display: none; }
.orion-blog-detail__comment-reply--mobile {
	display: inline-flex;
	margin-top: 14px;
}
@media (min-width: 640px) {
	.orion-blog-detail__comment-reply--desktop { display: inline-flex; }
	.orion-blog-detail__comment-reply--mobile { display: none; margin-top: 0; }
}

/*
 * Inline reply panel (HTML `.reply-sibling`) — #respond moved under the
 * comment by core comment-reply.js once add_below=div-comment is set.
 */
.orion-blog-detail__comments-list #respond.orion-blog-detail__reply-panel,
.orion-blog-detail__comments-list #respond {
	margin: 20px 0 30px 12px;
	padding: 0 0 0 16px;
	border-left: 1px solid rgba(0, 0, 0, 0.15);
}
@media (min-width: 640px) {
	.orion-blog-detail__comments-list #respond {
		margin: 24px 0 30px 24px;
		padding-left: 24px;
	}
}
@media (min-width: 1199px) {
	.orion-blog-detail__comments-list #respond {
		margin-left: 32px;
		padding-left: 32px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__comments-list #respond {
		margin-left: 40px;
		padding-left: 40px;
	}
}

.orion-blog-detail__comments-list .orion-blog-detail__reply-title,
.orion-blog-detail__comments-list .comment-reply-title {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	font-family: var(--orion-font-heading, "El Messiri", sans-serif);
	font-weight: 500;
	color: #000;
	font-size: 26px;
	line-height: 30px;
	text-align: start;
}
@media (min-width: 640px) {
	.orion-blog-detail__comments-list .orion-blog-detail__reply-title,
	.orion-blog-detail__comments-list .comment-reply-title {
		line-height: 32px;
	}
}
@media (min-width: 769px) {
	.orion-blog-detail__comments-list .orion-blog-detail__reply-title,
	.orion-blog-detail__comments-list .comment-reply-title {
		font-size: 30px;
		line-height: 38px;
	}
}
@media (min-width: 1199px) {
	.orion-blog-detail__comments-list .orion-blog-detail__reply-title,
	.orion-blog-detail__comments-list .comment-reply-title {
		line-height: 40px;
	}
}
@media (min-width: 1380px) {
	.orion-blog-detail__comments-list .orion-blog-detail__reply-title,
	.orion-blog-detail__comments-list .comment-reply-title {
		font-size: 36px;
		margin-bottom: 12px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__comments-list .orion-blog-detail__reply-title,
	.orion-blog-detail__comments-list .comment-reply-title {
		font-size: 45px;
		line-height: 60px;
	}
}

/* Reply intro — HTML reply-sibling supporting line under “Leave a Reply”. */
.orion-blog-detail__comments-list .orion-blog-detail__reply-intro {
	margin: 0 0 22px;
	padding: 0;
	color: #000;
	font-family: Lexend, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	text-align: start;
}
@media (min-width: 640px) {
	.orion-blog-detail__comments-list .orion-blog-detail__reply-intro {
		font-size: 15px;
		line-height: 25px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__comments-list .orion-blog-detail__reply-intro {
		margin-bottom: 42px;
		font-size: 18px;
		line-height: 32px;
	}
}

/* Cancel beside submit — matches HTML `.reply-cancel` next to Leave Comment. */
.orion-blog-detail__comments-list .form-submit {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}
.orion-blog-detail__comments-list .orion-blog-detail__reply-cancel-wrap,
.orion-blog-detail__comments-list #cancel-comment-reply-link,
.orion-blog-detail__comments-list .orion-blog-detail__reply-cancel {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	color: #d21c1c;
	font-family: Lexend, sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 28px;
	text-decoration: none;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	cursor: pointer;
	vertical-align: middle;
}
.orion-blog-detail__comments-list #cancel-comment-reply-link:hover,
.orion-blog-detail__comments-list .orion-blog-detail__reply-cancel:hover {
	border-bottom-color: #d21c1c;
	color: #d21c1c;
}
/* Heading no longer holds Cancel while inline. */
.orion-blog-detail__comments-list .comment-reply-title .orion-blog-detail__reply-cancel-wrap {
	display: none;
}

/* Bottom Leave-a-Comment stays empty while #respond is inline — hide it. */
.orion-blog-detail__leave-comment--empty,
.orion-blog-detail__leave-comment:not(:has(#respond)) {
	display: none;
}
/* Bottom form never shows the reply heading / cancel (HTML only shows those inline). */
.orion-blog-detail__leave-comment > #respond > .comment-reply-title,
.orion-blog-detail__leave-comment .orion-blog-detail__reply-intro {
	display: none;
}
.orion-blog-detail__leave-comment #cancel-comment-reply-link,
.orion-blog-detail__leave-comment .orion-blog-detail__reply-cancel-wrap {
	display: none;
}

/* Leave a Comment form — matches HTML blog-detail-1 "Leave a Comment" */
.orion-blog-detail__leave-comment {
	position: relative;
	z-index: 1;
	margin-bottom: 32px;
}
@media (min-width: 640px)  { .orion-blog-detail__leave-comment { margin-bottom: 50px; } }
@media (min-width: 992px)  { .orion-blog-detail__leave-comment { margin-bottom: 60px; } }
@media (min-width: 1380px) { .orion-blog-detail__leave-comment { margin-bottom: 80px; } }
@media (min-width: 1752px) { .orion-blog-detail__leave-comment { margin-bottom: 100px; } }

.orion-blog-detail__leave-comment-heading {
	margin: 0 0 22px;
}
@media (min-width: 1199px) { .orion-blog-detail__leave-comment-heading { margin-bottom: 28px; } }
@media (min-width: 1752px) { .orion-blog-detail__leave-comment-heading { margin-bottom: 42px; } }

/* Same h3 schedule as .orion-blog-detail__content h3 / HTML global h3. */
.orion-blog-detail__leave-comment-heading h3,
h3.orion-blog-detail__leave-title {
	margin: 0 0 8px;
	font-family: var(--orion-font-heading, "El Messiri", sans-serif) !important;
	font-weight: 500 !important;
	color: #000;
	font-size: 26px !important;
	line-height: 30px !important;
	text-align: center;
}
@media (min-width: 640px) {
	.orion-blog-detail__leave-comment-heading h3,
	h3.orion-blog-detail__leave-title {
		line-height: 32px !important;
		text-align: start;
	}
}
@media (min-width: 769px) {
	.orion-blog-detail__leave-comment-heading h3,
	h3.orion-blog-detail__leave-title {
		font-size: 30px !important;
		line-height: 38px !important;
	}
}
@media (min-width: 1199px) {
	.orion-blog-detail__leave-comment-heading h3,
	h3.orion-blog-detail__leave-title { line-height: 40px !important; }
}
@media (min-width: 1380px) {
	.orion-blog-detail__leave-comment-heading h3,
	h3.orion-blog-detail__leave-title {
		font-size: 36px !important;
		margin-bottom: 12px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__leave-comment-heading h3,
	h3.orion-blog-detail__leave-title {
		font-size: 45px !important;
		line-height: 60px !important;
	}
}

.orion-blog-detail__leave-comment-heading p {
	margin: 0;
	color: #000;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
	text-align: center;
}
@media (min-width: 640px) {
	.orion-blog-detail__leave-comment-heading p { text-align: start; }
}
@media (min-width: 992px) {
	.orion-blog-detail__leave-comment-heading p { font-size: 15px; line-height: 25px; }
}
@media (min-width: 1199px) {
	.orion-blog-detail__leave-comment-heading p { line-height: 26px; }
}
@media (min-width: 1380px) {
	.orion-blog-detail__leave-comment-heading p { line-height: 28px; }
}
@media (min-width: 1752px) {
	.orion-blog-detail__leave-comment-heading p { font-size: 18px; line-height: 32px; }
}

/* Hide WP chrome not present in HTML reference (bottom form only). */
.orion-blog-detail__leave-comment .required-fields-notice,
.orion-blog-detail__leave-comment .comment-notes,
.orion-blog-detail__leave-comment .comment-form-cookies-consent {
	display: none;
}

.orion-blog-detail__leave-comment .comment-respond { margin: 0; }

.orion-blog-detail__comment-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
	margin: 0;
}
@media (min-width: 640px)  { .orion-blog-detail__comment-form { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1199px) { .orion-blog-detail__comment-form { gap: 20px; } }
@media (min-width: 1380px) { .orion-blog-detail__comment-form { gap: 24px; } }
@media (min-width: 1752px) { .orion-blog-detail__comment-form { gap: 30px; } }

.orion-blog-detail__comment-form .comment-form-comment,
.orion-blog-detail__comment-form .form-submit,
.orion-blog-detail__comment-form p.form-submit {
	grid-column: 1 / -1;
}

.orion-blog-detail__comment-form label,
.orion-blog-detail__comment-form label.p {
	display: block;
	margin-bottom: 6px;
	color: #000;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
}
@media (min-width: 992px) {
	.orion-blog-detail__comment-form label,
	.orion-blog-detail__comment-form label.p {
		font-size: 15px;
		line-height: 25px;
	}
}
@media (min-width: 1199px) {
	.orion-blog-detail__comment-form label,
	.orion-blog-detail__comment-form label.p { margin-bottom: 12px; line-height: 26px; }
}
@media (min-width: 1380px) {
	.orion-blog-detail__comment-form label,
	.orion-blog-detail__comment-form label.p { line-height: 28px; }
}
@media (min-width: 1752px) {
	.orion-blog-detail__comment-form label,
	.orion-blog-detail__comment-form label.p { font-size: 18px; line-height: 32px; }
}

.orion-blog-detail__comment-form input[type="text"],
.orion-blog-detail__comment-form input[type="email"],
.orion-blog-detail__comment-form input[type="url"],
.orion-blog-detail__comment-form textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 8px;
	border: 1px solid #000;
	border-radius: 0;
	outline: none;
	background: transparent;
	font-family: Lexend, sans-serif;
	font-size: 16px;
	font-weight: 400;
}
@media (min-width: 1199px) {
	.orion-blog-detail__comment-form input[type="text"],
	.orion-blog-detail__comment-form input[type="email"],
	.orion-blog-detail__comment-form input[type="url"],
	.orion-blog-detail__comment-form textarea { padding: 12px; }
}
@media (min-width: 1380px) {
	.orion-blog-detail__comment-form input[type="text"],
	.orion-blog-detail__comment-form input[type="email"],
	.orion-blog-detail__comment-form input[type="url"],
	.orion-blog-detail__comment-form textarea { padding: 14px 12px; }
}
.orion-blog-detail__comment-form input:focus,
.orion-blog-detail__comment-form textarea:focus { border-color: var(--orion-primary); }
.orion-blog-detail__comment-form textarea { min-height: 90px; resize: vertical; }
@media (min-width: 640px)  { .orion-blog-detail__comment-form textarea { min-height: 100px; } }
@media (min-width: 992px)  { .orion-blog-detail__comment-form textarea { min-height: 130px; } }
@media (min-width: 1199px) { .orion-blog-detail__comment-form textarea { min-height: 148px; } }
@media (min-width: 1380px) { .orion-blog-detail__comment-form textarea { min-height: 160px; } }

.orion-blog-detail__comment-form .form-submit {
	margin: 16px 0 0;
	padding: 0;
}
@media (min-width: 1199px) { .orion-blog-detail__comment-form .form-submit { margin-top: 20px; } }
@media (min-width: 1752px) { .orion-blog-detail__comment-form .form-submit { margin-top: 26px; } }

/* Ensure Leave Comment uses theme .btn.btn-primary (HTML reference). */
.orion-blog-detail__comment-form .form-submit .btn.btn-primary,
.orion-blog-detail__comment-form button.btn.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	cursor: pointer;
	border: 1px solid var(--orion-primary, var(--orion-primary));
	background-color: var(--orion-primary, var(--orion-primary));
	color: #fff;
	font-family: Lexend, sans-serif;
	font-weight: 400;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.orion-blog-detail__comment-form .form-submit .btn.btn-primary:hover,
.orion-blog-detail__comment-form button.btn.btn-primary:hover {
	background-color: transparent;
	color: var(--orion-primary, var(--orion-primary));
}

/* Related Blogs (reuses the exact .blog-box/.blogs-2 card markup + CSS
   from widgets/orion-latest-blogs-widget.php via
   Orion_Latest_Blogs_Widget::render_cards_style2()). */
.orion-blog-detail__related {
	position: relative;
}
.orion-blog-detail__related-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}
@media (min-width: 640px) { .orion-blog-detail__related-header { margin-bottom: 34px; } }
@media (min-width: 769px) { .orion-blog-detail__related-header { margin-bottom: 40px; } }
@media (min-width: 992px) { .orion-blog-detail__related-header { margin-bottom: 42px; } }
.orion-blog-detail__related-header h2 { margin: 0; }

.orion-blog-detail__related-nav { display: flex; gap: 8px; position: relative; }
.orion-blog-detail__related-swiper { width: 100%; overflow: hidden; }

/* Related uses HTML `.related-blogs-2` slidesPerView:2 (not homepage 2.5). */
.orion-blog-detail__related .orion-lb2-swiper {
	overflow: hidden;
}

/* ============================================================
   Shared components — "Variant B" (sidebar) and "Variant C" (TOC)
   both use these; "Variant A" (single.php) does not.
   ============================================================ */

/* Wider reading-column container, capped at 1452px from 1500px+ (a
   non-standard breakpoint the reference itself uses here, distinct from
   Variant A's 1252px/1220px). Fully independent schedule — see the
   `!important` note above .orion-blog-detail__hero for why this can't be
   a partial override combined with the bare `.container` class. */
.orion-blog-detail__container--wide {
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 640px)  { .orion-blog-detail__container--wide { max-width: 640px; } }
@media (min-width: 769px)  { .orion-blog-detail__container--wide { max-width: 769px; } }
@media (min-width: 992px)  { .orion-blog-detail__container--wide { max-width: 992px; } }
@media (min-width: 1199px) { .orion-blog-detail__container--wide { max-width: 1199px; } }
@media (min-width: 1380px) { .orion-blog-detail__container--wide { max-width: 1380px; } }
@media (min-width: 1500px) { .orion-blog-detail__container--wide { max-width: 1452px; } }

.orion-blog-detail__columns {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding-top: 0;
	padding-bottom: 0;
}
@media (min-width: 992px)  { .orion-blog-detail__columns { flex-direction: row; gap: 40px; } }
@media (min-width: 1380px) { .orion-blog-detail__columns { gap: 70px; } }

/* Wide container carries the body vertical padding for sidebar layout
   (HTML section has no extra py on the flex row itself). */
.orion-blog-detail__container--wide.orion-blog-detail__columns,
.orion-blog-detail__body-section > .orion-blog-detail__container--wide {
	padding-top: 24px;
	padding-bottom: 24px;
}
@media (min-width: 640px) {
	.orion-blog-detail__container--wide.orion-blog-detail__columns,
	.orion-blog-detail__body-section > .orion-blog-detail__container--wide {
		padding-top: 32px;
		padding-bottom: 32px;
	}
}
@media (min-width: 769px) {
	.orion-blog-detail__container--wide.orion-blog-detail__columns,
	.orion-blog-detail__body-section > .orion-blog-detail__container--wide {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}
@media (min-width: 1199px) {
	.orion-blog-detail__container--wide.orion-blog-detail__columns,
	.orion-blog-detail__body-section > .orion-blog-detail__container--wide {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

.orion-blog-detail__main-col { width: 100%; }
@media (min-width: 992px)  { .orion-blog-detail__main-col { width: 68%; } }
@media (min-width: 1199px) { .orion-blog-detail__main-col { width: 71%; } }

/* Category pills at the TOP (Variant B/C place these before the title;
   Variant A places plain tags at the bottom — different component). */
.orion-blog-detail__pills {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}
@media (min-width: 769px) { .orion-blog-detail__pills { gap: 20px; } }

.orion-blog-detail__pill {
	background-color: color-mix(in srgb, var(--orion-primary) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--orion-primary) 26%, transparent);
	font-family: Lexend, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	padding: 5px 16px;
	color: #000;
	transition: background-color 0.2s ease, color 0.2s ease;
}
@media (min-width: 640px) {
	.orion-blog-detail__pill { padding: 8px 20px; }
}
@media (min-width: 1199px) {
	.orion-blog-detail__pill {
		font-size: 15px;
		padding: 10px 28px;
	}
}
@media (min-width: 1380px) {
	.orion-blog-detail__pill { padding: 10px 34px; }
}
@media (min-width: 1752px) {
	.orion-blog-detail__pill {
		font-size: 18px;
		padding: 12px 40px;
	}
}
.orion-blog-detail__pill:hover { background-color: var(--orion-primary); color: #fff; }

/* Sidebar accent meta — HTML: max-[1199px]:!text-sm max-[640px]:!text-[13px] p-0
   Above xl inherits blog p → 16, then 2xl:text-lg → 18. */
.orion-blog-detail__meta--accent p,
.orion-blog-detail__meta--accent .author-name {
	color: var(--orion-primary, var(--orion-primary));
	text-transform: uppercase;
	font-weight: 500;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 16px;
	line-height: 28px;
}
@media (max-width: 1199px) {
	.orion-blog-detail__meta--accent p,
	.orion-blog-detail__meta--accent .author-name {
		font-size: 14px;
		line-height: 23px;
	}
}
@media (max-width: 640px) {
	.orion-blog-detail__meta--accent p,
	.orion-blog-detail__meta--accent .author-name {
		font-size: 13px;
		line-height: 23px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__meta--accent p,
	.orion-blog-detail__meta--accent .author-name {
		font-size: 18px;
		line-height: 32px;
	}
}

/* Title-first meta — HTML: `font-medium text-primary-900 uppercase` (inherits p sizes) */
.orion-blog-detail__title-first-container .orion-blog-detail__meta p,
.orion-blog-detail__title-first-container .orion-blog-detail__meta .author-name {
	font-size: 14px;
	line-height: 23px;
	padding-top: 0;
	padding-bottom: 0;
}
@media (min-width: 992px) {
	.orion-blog-detail__title-first-container .orion-blog-detail__meta p,
	.orion-blog-detail__title-first-container .orion-blog-detail__meta .author-name {
		font-size: 15px;
		line-height: 25px;
	}
}
@media (min-width: 1380px) {
	.orion-blog-detail__title-first-container .orion-blog-detail__meta p,
	.orion-blog-detail__title-first-container .orion-blog-detail__meta .author-name {
		line-height: 28px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__title-first-container .orion-blog-detail__meta p,
	.orion-blog-detail__title-first-container .orion-blog-detail__meta .author-name {
		font-size: 18px;
		line-height: 32px;
	}
}

/* Prev/Next post navigation box */
.orion-blog-detail__prev-next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #e2e2e2;
	padding: 12px;
	margin: 24px 0;
}
@media (min-width: 640px)  { .orion-blog-detail__prev-next { padding: 24px; } }
@media (min-width: 769px)  { .orion-blog-detail__prev-next { margin: 40px 0; } }
@media (min-width: 1380px) { .orion-blog-detail__prev-next { padding: 30px; margin: 40px 0; } }
@media (min-width: 1752px) { .orion-blog-detail__prev-next { margin: 50px 0 75px; } }

.orion-blog-detail__prev-next-link {
	display: flex;
	align-items: center;
	gap: 8px;
}
@media (min-width: 640px) { .orion-blog-detail__prev-next-link { gap: 12px; } }
@media (min-width: 769px) { .orion-blog-detail__prev-next-link { gap: 20px; } }
.orion-blog-detail__prev-next-link h5 { margin: 0; transition: color 0.2s ease; }
.orion-blog-detail__prev-next-link:hover h5 { color: var(--orion-primary); }

.orion-blog-detail__prev-next-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--orion-primary);
	border: 1px solid var(--orion-primary);
	color: #fff;
	flex-shrink: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}
@media (min-width: 640px)  { .orion-blog-detail__prev-next-arrow { width: 36px; height: 36px; } }
@media (min-width: 769px)  { .orion-blog-detail__prev-next-arrow { width: 44px; height: 44px; } }
@media (min-width: 1380px) { .orion-blog-detail__prev-next-arrow { width: 50px; height: 50px; } }
.orion-blog-detail__prev-next-arrow svg { width: 55%; height: 55%; }
.orion-blog-detail__prev-next-link:hover .orion-blog-detail__prev-next-arrow { background-color: transparent; color: var(--orion-primary); }

.orion-blog-detail__prev-next-divider { flex-shrink: 0; opacity: 0.35; width: 16px; }
@media (min-width: 640px) { .orion-blog-detail__prev-next-divider { width: 28px; } }

/* ============================================================
   Variant B — sidebar layout (blog-detail-2/6/10/14.html)
   ============================================================ */

/* Same 1720px-capped container the reference wraps this mosaic in
   (identical to the Default hero's own .container wrapper) — see the
   `!important` note further up for why this is its own complete
   schedule, not a partial override of the bare `.container` class. */
.orion-blog-detail__hero--mosaic {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-auto-flow: column;
	gap: 6px;
	height: 312px;
	width: 100%;
	max-width: none;
	margin: 0 auto 24px;
	padding: 0;
	box-sizing: border-box;
}
@media (min-width: 640px)  { .orion-blog-detail__hero--mosaic { max-width: 640px; height: 430px; margin-bottom: 32px; } }
@media (min-width: 769px)  { .orion-blog-detail__hero--mosaic { max-width: 769px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px; height: 550px; padding: 0 16px; margin-bottom: 40px; } }
@media (min-width: 992px)  { .orion-blog-detail__hero--mosaic { max-width: 992px; height: 500px; } }
@media (min-width: 1199px) { .orion-blog-detail__hero--mosaic { max-width: 1199px; height: 550px; margin-bottom: 60px; } }
@media (min-width: 1380px) { .orion-blog-detail__hero--mosaic { max-width: 1380px; height: 100vh; } }
@media (min-width: 1720px) { .orion-blog-detail__hero--mosaic { max-width: 1720px; } }

/* Sidebar body: HTML `xl:mb-[50px] md:mb-10 sm:mb-8 mb-6` (not Variant A’s 80px). */
.orion-blog-detail__hero--mosaic ~ .orion-blog-detail__body-section {
	margin-bottom: 24px;
}
@media (min-width: 640px)  { .orion-blog-detail__hero--mosaic ~ .orion-blog-detail__body-section { margin-bottom: 32px; } }
@media (min-width: 769px)  { .orion-blog-detail__hero--mosaic ~ .orion-blog-detail__body-section { margin-bottom: 40px; } }
@media (min-width: 1199px) { .orion-blog-detail__hero--mosaic ~ .orion-blog-detail__body-section { margin-bottom: 50px; } }
@media (min-width: 1380px) { .orion-blog-detail__hero--mosaic ~ .orion-blog-detail__body-section { margin-bottom: 50px; } }
@media (min-width: 1752px) { .orion-blog-detail__hero--mosaic ~ .orion-blog-detail__body-section { margin-bottom: 50px; } }

.orion-blog-detail__hero--mosaic img { width: 100%; height: 100% !important; object-fit: cover; display: block; }
.orion-blog-detail__hero--mosaic .orion-blog-detail__mosaic-lead { grid-column: span 3 / span 3; grid-row: span 2 / span 2; }
@media (min-width: 769px) { .orion-blog-detail__hero--mosaic .orion-blog-detail__mosaic-lead { grid-column: span 2 / span 2; } }
.orion-blog-detail__hero--mosaic .orion-blog-detail__mosaic-tall { grid-row: span 1 / span 1; }
@media (min-width: 769px) { .orion-blog-detail__hero--mosaic .orion-blog-detail__mosaic-tall { grid-row: span 2 / span 2; } }

.orion-blog-detail__sidebar { width: 100%; }
@media (min-width: 992px)  { .orion-blog-detail__sidebar { width: 32%; } }
@media (min-width: 1199px) { .orion-blog-detail__sidebar { width: 29%; } }

/* HTML: category/recent/share blocks use `1xl:mt-6 mt-3` after newsletter. */
.orion-blog-detail__sidebar-widget + .orion-blog-detail__sidebar-widget,
.orion-blog-detail__sidebar-widget + .orion-blog-detail__share,
.orion-blog-detail__category-list + .orion-blog-detail__recent-posts,
.orion-blog-detail__recent-posts + .orion-blog-detail__share {
	margin-top: 12px;
}
@media (min-width: 1380px) {
	.orion-blog-detail__sidebar-widget + .orion-blog-detail__sidebar-widget,
	.orion-blog-detail__sidebar-widget + .orion-blog-detail__share,
	.orion-blog-detail__category-list + .orion-blog-detail__recent-posts,
	.orion-blog-detail__recent-posts + .orion-blog-detail__share {
		margin-top: 24px;
	}
}

.orion-blog-detail__sidebar-widget h5,
.orion-blog-detail__category-list h5,
.orion-blog-detail__tag-list h5,
.orion-blog-detail__recent-posts h5,
h5.orion-blog-detail__widget-title {
	margin: 0;
	font-family: var(--orion-font-heading, "El Messiri", sans-serif) !important;
	font-weight: 500 !important;
	font-size: 19px !important;
	line-height: 26px !important;
	color: #000;
	border: 0;
}
@media (min-width: 640px) {
	.orion-blog-detail__sidebar-widget h5,
	.orion-blog-detail__category-list h5,
	.orion-blog-detail__tag-list h5,
	.orion-blog-detail__recent-posts h5,
	h5.orion-blog-detail__widget-title {
		font-size: 22px !important;
	}
}
@media (min-width: 769px) {
	.orion-blog-detail__sidebar-widget h5,
	.orion-blog-detail__category-list h5,
	.orion-blog-detail__tag-list h5,
	.orion-blog-detail__recent-posts h5,
	h5.orion-blog-detail__widget-title {
		line-height: 30px !important;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__sidebar-widget h5,
	.orion-blog-detail__category-list h5,
	.orion-blog-detail__tag-list h5,
	.orion-blog-detail__recent-posts h5,
	h5.orion-blog-detail__widget-title {
		font-size: 25px !important;
		line-height: 35px !important;
	}
}

/* Newsletter title: HTML `h5.mb-4` — no border. */
.orion-blog-detail__newsletter > h5 {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

/*
 * Newsletter form — HTML: input+btn side-by-side, input has its own black
 * border, btn is btn-dark-reverse with !p-[14px] and border-l-0.
 */
.orion-blog-detail__newsletter-form {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	margin: 0;
	border: 0;
	padding: 0;
	gap: 0;
}
.orion-blog-detail__newsletter-form input[type="hidden"] {
	display: none;
}
.orion-blog-detail__newsletter-form input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #000;
	border-right: 0;
	border-radius: 0;
	outline: none;
	background: transparent;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
	color: #000;
	appearance: none;
}
.orion-blog-detail__newsletter-form input[type="email"]::placeholder {
	color: rgba(0, 0, 0, 0.6);
}
@media (min-width: 1380px) {
	.orion-blog-detail__newsletter-form input[type="email"] {
		padding: 12px 20px;
		font-size: 15px;
		line-height: 28px;
	}
}
.orion-blog-detail__newsletter-form button.btn,
.orion-blog-detail__newsletter-form button.btn-dark-reverse {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 14px;
	border: 1px solid #000;
	border-left: 0;
	border-radius: 0;
	background-color: #000;
	color: #fff;
	cursor: pointer;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.orion-blog-detail__newsletter-form button.btn:hover,
.orion-blog-detail__newsletter-form button.btn-dark-reverse:hover {
	background-color: #fff;
	color: #000;
}
.orion-blog-detail__newsletter-form button svg {
	display: block;
	width: 20px;
	height: 20px;
}
@media (min-width: 1380px) {
	.orion-blog-detail__newsletter-form button svg {
		width: 24px;
		height: 24px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__newsletter-form button.btn,
	.orion-blog-detail__newsletter-form button.btn-dark-reverse {
		padding: 16px;
	}
}
.orion-blog-detail__newsletter-message { margin: 8px 0 0; font-size: 14px; }

/* Category / Recent / Tags headings: HTML `h5.py-4 border-b`. */
.orion-blog-detail__category-list > h5,
.orion-blog-detail__tag-list > h5,
.orion-blog-detail__recent-posts > h5 {
	padding: 16px 0;
	border-bottom: 1px solid #e2e2e2;
	margin: 0;
}

.orion-blog-detail__tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 16px;
}
.orion-blog-detail__tag-chip {
	background-color: #f5f6f6;
	font-weight: 300;
	padding: 4px 14px;
	line-height: 26px;
	font-size: 14px;
	color: #000;
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.orion-blog-detail__tag-chip:hover { background-color: var(--orion-primary); color: #fff; }

/* Category rows use HTML `.p` type schedule:
   14/23 → lg 15/25 → xl 15/26 → 1xl 15/28 → 2xl 18/32 */
.orion-blog-detail__category-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid #e2e2e2;
	font-family: var(--orion-font-body, Lexend, sans-serif);
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
	color: #000;
	text-decoration: none;
	transition: color 0.2s ease;
}
@media (min-width: 640px) {
	.orion-blog-detail__category-row { gap: 24px; }
}
@media (min-width: 992px) {
	.orion-blog-detail__category-row {
		font-size: 15px;
		line-height: 25px;
	}
}
@media (min-width: 1199px) {
	.orion-blog-detail__category-row {
		line-height: 26px;
	}
}
@media (min-width: 1380px) {
	.orion-blog-detail__category-row {
		padding: 18px 0;
		line-height: 28px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__category-row {
		font-size: 18px;
		line-height: 32px;
	}
}
.orion-blog-detail__category-row:hover,
.orion-blog-detail__category-row:hover .orion-blog-detail__category-count { color: var(--orion-primary); }
.orion-blog-detail__category-count {
	color: rgba(0, 0, 0, 0.5);
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.orion-blog-detail__recent-post {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px solid #e2e2e2;
}
@media (min-width: 640px)  { .orion-blog-detail__recent-post { gap: 20px; padding: 14px 0; } }
@media (min-width: 1380px) { .orion-blog-detail__recent-post { padding: 20px 0; } }

.orion-blog-detail__recent-post-thumb {
	position: relative;
	overflow: hidden;
	width: 27%;
	flex-shrink: 0;
	display: block;
}
.orion-blog-detail__recent-post-thumb::before { content: ''; display: block; padding-top: 100%; }
@media (min-width: 640px)  { .orion-blog-detail__recent-post-thumb::before { padding-top: 65%; } }
@media (min-width: 992px)  { .orion-blog-detail__recent-post-thumb::before { padding-top: 100%; } }
@media (min-width: 1380px) { .orion-blog-detail__recent-post-thumb::before { padding-top: 89%; } }
.orion-blog-detail__recent-post-thumb img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }

.orion-blog-detail__recent-post-body { width: 73%; }
.orion-blog-detail__recent-post-date {
	margin: 0 0 4px;
	font-family: Lexend, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--orion-primary);
	text-transform: uppercase;
}
@media (min-width: 640px) { .orion-blog-detail__recent-post-date { font-size: 14px; } }
.orion-blog-detail__recent-post-title {
	display: block;
	color: #000;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s ease;
}
@media (min-width: 992px)  { .orion-blog-detail__recent-post-title { font-size: 14px; } }
@media (min-width: 1199px) { .orion-blog-detail__recent-post-title { font-size: 16px; } }
@media (min-width: 1752px) { .orion-blog-detail__recent-post-title { font-size: 18px; } }
.orion-blog-detail__recent-post:hover .orion-blog-detail__recent-post-title,
.orion-blog-detail__recent-post-title:hover { color: var(--orion-primary); }

/* Share: HTML mt-6 + xl:w-11 (44) / 2xl:w-[50px]. */
.orion-blog-detail__sidebar .orion-blog-detail__share {
	display: flex;
	align-items: center;
	margin-top: 24px;
	width: 100%;
}
.orion-blog-detail__sidebar .orion-blog-detail__share-btn {
	width: 36px;
	height: 36px;
	background-color: #f5f6f6;
}
@media (min-width: 640px) {
	.orion-blog-detail__sidebar .orion-blog-detail__share-btn {
		width: 40px;
		height: 40px;
	}
}
@media (min-width: 1199px) {
	.orion-blog-detail__sidebar .orion-blog-detail__share-btn {
		width: 44px;
		height: 44px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__sidebar .orion-blog-detail__share-btn {
		width: 50px;
		height: 50px;
	}
}

/* ============================================================
   Variant C — sticky table-of-contents layout (blog-detail-4/8/12.html)
   ============================================================ */

.orion-blog-detail__hero--toc {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 320px;
}
@media (min-width: 640px)  { .orion-blog-detail__hero--toc { height: 430px; } }
@media (min-width: 769px)  { .orion-blog-detail__hero--toc { height: 500px; } }
@media (min-width: 992px)  { .orion-blog-detail__hero--toc { height: 600px; } }
@media (min-width: 1199px) { .orion-blog-detail__hero--toc { height: calc(100vh - 12vh); } }

.orion-blog-detail__hero--toc > img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }

.orion-blog-detail__hero--toc-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.orion-blog-detail__hero--toc-content {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: 24px;
	color: #fff;
}
@media (min-width: 640px)  { .orion-blog-detail__hero--toc-content { padding-bottom: 28px; } }
@media (min-width: 769px)  { .orion-blog-detail__hero--toc-content { padding-bottom: 40px; } }
@media (min-width: 992px)  { .orion-blog-detail__hero--toc-content { padding-bottom: 56px; } }
@media (min-width: 1380px) { .orion-blog-detail__hero--toc-content { padding-bottom: 64px; } }

.orion-blog-detail__hero--toc-content h2 { color: #fff; margin: 0; padding-bottom: 0; }
.orion-blog-detail__hero--toc-content .orion-blog-detail__meta { margin-bottom: 12px; }
@media (min-width: 640px)  { .orion-blog-detail__hero--toc-content .orion-blog-detail__meta { margin-bottom: 20px; } }
@media (min-width: 1199px) { .orion-blog-detail__hero--toc-content .orion-blog-detail__meta { margin-bottom: 24px; } }
.orion-blog-detail__hero--toc-content .orion-blog-detail__meta p,
.orion-blog-detail__hero--toc-content .orion-blog-detail__meta a { color: #fff; border-color: #fff; }

/*
 * TOC hero meta — HTML: `max-[1199px]:text-sm max-[640px]:text-[13px] p-0`
 * (no xl:text-base step; padding stays 0).
 */
.orion-blog-detail__hero--toc-content .orion-blog-detail__meta p,
.orion-blog-detail__hero--toc-content .orion-blog-detail__meta .author-name {
	padding-top: 0;
	padding-bottom: 0;
	font-size: 13px;
	line-height: 23px;
}
@media (min-width: 641px) {
	.orion-blog-detail__hero--toc-content .orion-blog-detail__meta p,
	.orion-blog-detail__hero--toc-content .orion-blog-detail__meta .author-name {
		font-size: 14px;
	}
}
@media (min-width: 1200px) {
	.orion-blog-detail__hero--toc-content .orion-blog-detail__meta p,
	.orion-blog-detail__hero--toc-content .orion-blog-detail__meta .author-name {
		font-size: 15px;
		line-height: 28px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__hero--toc-content .orion-blog-detail__meta p,
	.orion-blog-detail__hero--toc-content .orion-blog-detail__meta .author-name {
		font-size: 15px;
		line-height: 28px;
	}
}

/* TOC columns: HTML `xl:gap-16 lg:gap-8 gap-5` (not sidebar’s 70px). */
.orion-blog-detail__columns:has(.orion-blog-detail__toc-sidebar) {
	gap: 20px;
}
@media (min-width: 992px) {
	.orion-blog-detail__columns:has(.orion-blog-detail__toc-sidebar) { gap: 32px; }
}
@media (min-width: 1199px) {
	.orion-blog-detail__columns:has(.orion-blog-detail__toc-sidebar) { gap: 64px; }
}
@media (min-width: 1380px) {
	.orion-blog-detail__columns:has(.orion-blog-detail__toc-sidebar) { gap: 64px; }
}

/* TOC body py — HTML `py-6 sm:py-12` (24 / 48), not the sidebar layout’s 50@xl. */
.orion-blog-detail__container--wide.orion-blog-detail__columns:has(.orion-blog-detail__toc-sidebar) {
	padding-top: 24px;
	padding-bottom: 24px;
}
@media (min-width: 640px) {
	.orion-blog-detail__container--wide.orion-blog-detail__columns:has(.orion-blog-detail__toc-sidebar) {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

.orion-blog-detail__toc-main { width: 100%; }
@media (min-width: 992px) { .orion-blog-detail__toc-main { width: 70%; } }

.orion-blog-detail__toc-sidebar {
	display: none;
	width: 30%;
	height: fit-content;
	position: sticky;
	/* HTML: `lg:sticky top-26` (104px) / `1xl:top-30` (120px) */
	top: 104px;
	align-self: flex-start;
}
@media (min-width: 992px)  { .orion-blog-detail__toc-sidebar { display: block; } }
@media (min-width: 1380px) { .orion-blog-detail__toc-sidebar { top: 120px; } }

/*
 * Sticky TOC needs a visible overflow ancestor. The shared body-section
 * `overflow:hidden` (for other layouts) creates a scroll containment that
 * stops `position:sticky` — HTML has no such clip on the columns wrapper.
 */
.orion-blog-detail__body-section:has(.orion-blog-detail__toc-sidebar) {
	overflow: visible;
}

/* HTML h5 schedule: 19/26 → sm 22/26 → lg 22/30 → 2xl 25/35; xl:mb-2. */
.orion-blog-detail__toc-heading,
.orion-blog-detail__toc-mobile-toggle h5 {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	border: 0;
	padding: 0;
	font-family: var(--orion-font-heading, "El Messiri", sans-serif) !important;
	font-weight: 500 !important;
	font-size: 19px !important;
	line-height: 26px !important;
	color: #000;
}
@media (min-width: 640px) {
	.orion-blog-detail__toc-heading,
	.orion-blog-detail__toc-mobile-toggle h5 {
		font-size: 22px !important;
		line-height: 26px !important;
	}
}
/* HTML h5: md:leading-[30px] — Orion md ≈ 992px. */
@media (min-width: 992px) {
	.orion-blog-detail__toc-heading,
	.orion-blog-detail__toc-mobile-toggle h5 {
		font-size: 22px !important;
		line-height: 30px !important;
	}
}
@media (min-width: 1199px) {
	.orion-blog-detail__toc-heading {
		margin-bottom: 8px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__toc-heading,
	.orion-blog-detail__toc-mobile-toggle h5 {
		font-size: 25px !important;
		line-height: 35px !important;
	}
}

/*
 * Only the list itself scrolls — the "On this page" heading (above) and the
 * Share-icons block (a separate sibling after .orion-blog-detail__toc-inner)
 * must stay fully visible regardless of the list's scroll position, matching
 * blog-detail-4.html's `.insight > div.overflow-y-auto` (list only, not the
 * whole sidebar).
 */
.orion-blog-detail__toc-scroll { max-height: calc(100vh - 21vh); overflow-y: auto; }
@media (min-width: 1752px) { .orion-blog-detail__toc-scroll { max-height: calc(100vh - 17vh); } }

/* Match HTML `.insight h6` / `.insight ul li` schedule. */
.orion-blog-detail__toc-list h6,
.orion-blog-detail__toc-list h6.orion-blog-detail__toc-item,
h6.orion-blog-detail__toc-item {
	display: block;
	margin: 0;
	padding: 8px 0 8px 15px;
	border-left: 1px solid #6b7280;
	color: #000;
	font-family: var(--orion-font-body, Lexend, sans-serif) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 23px !important;
	cursor: pointer;
	transition: color 0.2s ease;
}
@media (min-width: 992px) {
	.orion-blog-detail__toc-list h6,
	.orion-blog-detail__toc-list h6.orion-blog-detail__toc-item,
	h6.orion-blog-detail__toc-item { line-height: 25px !important; }
}
@media (min-width: 1199px) {
	.orion-blog-detail__toc-list h6,
	.orion-blog-detail__toc-list h6.orion-blog-detail__toc-item,
	h6.orion-blog-detail__toc-item {
		padding-left: 20px;
		font-size: 16px !important;
		line-height: 26px !important;
	}
}
@media (min-width: 1380px) {
	.orion-blog-detail__toc-list h6,
	.orion-blog-detail__toc-list h6.orion-blog-detail__toc-item,
	h6.orion-blog-detail__toc-item {
		padding: 10px 0 10px 20px;
		font-size: 17px !important;
		line-height: 28px !important;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__toc-list h6,
	.orion-blog-detail__toc-list h6.orion-blog-detail__toc-item,
	h6.orion-blog-detail__toc-item {
		font-size: 18px !important;
		line-height: 32px !important;
	}
}
.orion-blog-detail__toc-list h6 a { display: block; color: inherit; text-decoration: none; }
.orion-blog-detail__toc-list h6:hover,
.orion-blog-detail__toc-list h6.active,
.orion-blog-detail__toc-list h6.active a {
	color: var(--orion-primary);
}
.orion-blog-detail__toc-list h6.active {
	border-left-width: 2px;
	border-left-color: var(--orion-primary);
}

.orion-blog-detail__toc-list ul { list-style: none; margin: 0; padding: 0; }
.orion-blog-detail__toc-list ul li {
	position: relative;
	padding: 4px 8px 4px 36px;
	border-left: 1px solid #6b7280;
	font-family: var(--orion-font-body, Lexend, sans-serif);
	font-size: 13px;
	font-weight: 300;
	line-height: 150%;
	color: #464343;
	cursor: pointer;
	transition: color 0.2s ease;
}
@media (min-width: 769px) {
	.orion-blog-detail__toc-list ul li { padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
}
@media (min-width: 992px) {
	.orion-blog-detail__toc-list ul li { padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
}
@media (min-width: 1199px) {
	.orion-blog-detail__toc-list ul li {
		padding: 6px 8px 6px 44px;
		font-size: 14px;
	}
}
@media (min-width: 1380px) {
	.orion-blog-detail__toc-list ul li {
		padding: 8px 8px 8px 52px;
	}
}
@media (min-width: 1752px) {
	.orion-blog-detail__toc-list ul li { font-size: 16px; }
}
.orion-blog-detail__toc-list ul li::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 12px;
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: #4e4e4e;
}
@media (min-width: 640px) { .orion-blog-detail__toc-list ul li::before { top: 11px; } }
@media (min-width: 769px) { .orion-blog-detail__toc-list ul li::before { top: 14px; } }
@media (min-width: 992px) { .orion-blog-detail__toc-list ul li::before { top: 12px; } }
@media (min-width: 1199px) {
	.orion-blog-detail__toc-list ul li::before { left: 32px; top: 15px; }
}
@media (min-width: 1380px) {
	.orion-blog-detail__toc-list ul li::before { left: 37px; top: 17px; }
}
@media (min-width: 1752px) {
	.orion-blog-detail__toc-list ul li::before { top: 19px; }
}
.orion-blog-detail__toc-list ul li a { display: block; color: inherit; text-decoration: none; }
.orion-blog-detail__toc-list ul li:hover,
.orion-blog-detail__toc-list ul li.active,
.orion-blog-detail__toc-list ul li.active a {
	color: var(--orion-primary);
}
.orion-blog-detail__toc-list ul li.active {
	border-left-width: 2px;
	border-left-color: var(--orion-primary);
}

.orion-blog-detail__toc-sidebar .orion-blog-detail__share { margin-top: 24px; }

/* TOC share: HTML xl:w-11 (44) / 2xl:w-[50px]; bg-gray-200 → theme #f5f6f6. */
.orion-blog-detail__toc-sidebar .orion-blog-detail__share-btn {
	width: 36px;
	height: 36px;
	background-color: #f5f6f6;
}
@media (min-width: 640px) {
	.orion-blog-detail__toc-sidebar .orion-blog-detail__share-btn { width: 40px; height: 40px; }
}
@media (min-width: 1199px) {
	.orion-blog-detail__toc-sidebar .orion-blog-detail__share-btn { width: 44px; height: 44px; }
}
@media (min-width: 1752px) {
	.orion-blog-detail__toc-sidebar .orion-blog-detail__share-btn { width: 50px; height: 50px; }
}

/* Mobile TOC dropdown (< lg) */
.orion-blog-detail__toc-mobile {
	display: block;
	width: 100%;
	position: sticky;
	top: 52px;
	background: #fff;
	z-index: 20;
	border-bottom: 1px solid #e2e2e2;
	margin-bottom: 20px;
}
@media (min-width: 640px) { .orion-blog-detail__toc-mobile { top: 75px; } }
@media (min-width: 769px) { .orion-blog-detail__toc-mobile { top: 84px; } }
@media (min-width: 992px) { .orion-blog-detail__toc-mobile { display: none; } }

.orion-blog-detail__toc-mobile-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 0;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
}
.orion-blog-detail__toc-mobile-toggle h5 { margin: 0; }
.orion-blog-detail__toc-mobile-arrow { transition: transform 0.2s ease; }
.orion-blog-detail__toc-mobile.is-open .orion-blog-detail__toc-mobile-arrow { transform: rotate(180deg); }

.orion-blog-detail__toc-mobile-panel {
	display: none;
	padding: 8px 0 20px;
	max-height: calc(100vh - 14vh);
	overflow-y: auto;
}
.orion-blog-detail__toc-mobile.is-open .orion-blog-detail__toc-mobile-panel { display: block; }

/* ============================================================
   Variant D — "title-first" layout (blog-detail-3/7/11/15.html):
   structurally identical to the Default layout (single.php) except the
   title + meta render in a narrow container BEFORE the full-bleed hero,
   not after it.
   ============================================================ */

.orion-blog-detail__title-first-section {
	position: relative;
	overflow: hidden;
	margin-top: 30px;
	margin-bottom: 40px;
}
@media (min-width: 640px) { .orion-blog-detail__title-first-section { margin-top: 48px; margin-bottom: 50px; } }
@media (min-width: 992px) { .orion-blog-detail__title-first-section { margin-top: 70px; } }

/* Fully independent schedule — see the `!important` note above
   .orion-blog-detail__hero for why this can't be a partial override
   combined with the bare `.container` class. */
.orion-blog-detail__title-first-container {
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 640px)  { .orion-blog-detail__title-first-container { max-width: 640px; } }
@media (min-width: 769px)  { .orion-blog-detail__title-first-container { max-width: 769px; } }
@media (min-width: 992px)  { .orion-blog-detail__title-first-container { max-width: 992px; } }
@media (min-width: 1199px) { .orion-blog-detail__title-first-container { max-width: 1199px; } }
@media (min-width: 1252px) { .orion-blog-detail__title-first-container { max-width: 1252px; } }

.orion-blog-detail__title-first-container .orion-blog-detail__meta { margin-bottom: 25px; }
@media (min-width: 769px) { .orion-blog-detail__title-first-container .orion-blog-detail__meta { margin-bottom: 30px; } }

/* Title-first body container: HTML has no vertical padding on the content
   container after the hero (spacing comes from section margins). */
.orion-blog-detail__title-first-section ~ .orion-blog-detail__body-section .orion-blog-detail__container {
	padding-top: 24px;
	padding-bottom: 24px;
}
@media (min-width: 640px) {
	.orion-blog-detail__title-first-section ~ .orion-blog-detail__body-section .orion-blog-detail__container {
		padding-top: 32px;
		padding-bottom: 32px;
	}
}
@media (min-width: 769px) {
	.orion-blog-detail__title-first-section ~ .orion-blog-detail__body-section .orion-blog-detail__container {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}
@media (min-width: 1199px) {
	.orion-blog-detail__title-first-section ~ .orion-blog-detail__body-section .orion-blog-detail__container {
		padding-top: 0;
		padding-bottom: 0;
	}
}