/**
 * Blog single — detail page layout and typography.
 * Figma node 890:219.
 */

:root {
	/* Layout — Figma 1580px inner + 70px; content 934.218px + sidebar 510px (+40) scaled proportionally */
	--sp-blog-detail-inner-base: 1580;
	--sp-blog-detail-inner-extra: 70;
	--sp-blog-detail-inner: calc(var(--sp-blog-detail-inner-base) + var(--sp-blog-detail-inner-extra));
	--sp-blog-detail-content-design: 934.218;
	--sp-blog-detail-sidebar-design: 510;
	--sp-blog-detail-sidebar-max: calc(var(--sp-blog-detail-sidebar-design) * var(--sp-blog-detail-inner) / var(--sp-blog-detail-inner-base) * 1px);
	--sp-blog-detail-content-pct: calc(var(--sp-blog-detail-content-design) / var(--sp-blog-detail-inner) * 100%);
	--sp-blog-detail-sidebar-pct: calc(var(--sp-blog-detail-sidebar-design) / var(--sp-blog-detail-inner) * 100%);
	--sp-blog-detail-sidebar-min: clamp(260px, calc(280 / var(--spaciefy-artboard) * 100vw), 320px);

	--sp-blog-detail-pad-top: clamp(80px, calc(260 / var(--spaciefy-artboard) * 100vw), 260px);
	--sp-blog-detail-pad-bottom: clamp(64px, calc(150 / var(--spaciefy-artboard) * 100vw), 150px);
	--sp-blog-detail-layout-container: clamp(320px, calc(var(--sp-blog-detail-inner) / var(--spaciefy-artboard) * 100vw), calc(var(--sp-blog-detail-inner) * 1px));
	--sp-blog-detail-layout-gap: clamp(24px, calc(40 / var(--spaciefy-artboard) * 100vw), 40px);

	--sp-blog-detail-breadcrumb-size: clamp(14px, calc(21.232 / var(--spaciefy-artboard) * 100vw), 21.232px);
	--sp-blog-detail-breadcrumb-lh: 1.62;
	--sp-blog-detail-breadcrumb-bottom: clamp(12px, calc(15 / var(--spaciefy-artboard) * 100vw), 15px);

	--sp-blog-detail-title-size: clamp(28px, calc(50.957 / var(--spaciefy-artboard) * 100vw), 50.957px);
	--sp-blog-detail-title-lh: 1.11;
	--sp-blog-detail-title-bottom: 13px;

	--sp-blog-detail-meta-size: clamp(14px, calc(21.232 / var(--spaciefy-artboard) * 100vw), 21.232px);
	--sp-blog-detail-meta-lh: 1.62;
	--sp-blog-detail-meta-bottom: 24px;

	--sp-blog-detail-avatar-size: clamp(36px, calc(47.773 / var(--spaciefy-artboard) * 100vw), 47.773px);
	--sp-blog-detail-author-name-size: clamp(14px, calc(21.232 / var(--spaciefy-artboard) * 100vw), 21.232px);
	--sp-blog-detail-author-designation-size: clamp(12px, calc(15.924 / var(--spaciefy-artboard) * 100vw), 15.924px);
	--sp-blog-detail-author-bottom: clamp(24px, calc(58 / var(--spaciefy-artboard) * 100vw), 58px);
	--sp-blog-detail-author-gap: 12px;

	--sp-blog-detail-tag-size: clamp(12px, calc(14 / var(--spaciefy-artboard) * 100vw), 14px);
	--sp-blog-detail-tag-lh: 1.11;
	--sp-blog-detail-tag-tracking: clamp(1.2px, calc(1.894 / var(--spaciefy-artboard) * 100vw), 1.894px);
	--sp-blog-detail-tag-pad-y: 6px;
	--sp-blog-detail-tag-pad-x: 11px;
	--sp-blog-detail-tag-radius: clamp(10px, calc(13.903 / var(--spaciefy-artboard) * 100vw), 13.903px);
	--sp-blog-detail-tag-border-width: clamp(1px, calc(1.324 / var(--spaciefy-artboard) * 100vw), 1.324px);
	--sp-blog-detail-tags-gap: 14px;
	--sp-blog-detail-tags-bottom: clamp(28px, calc(46 / var(--spaciefy-artboard) * 100vw), 46px);

	--sp-blog-detail-toc-heading-size: clamp(14px, calc(21.186 / var(--spaciefy-artboard) * 100vw), 21.186px);
	--sp-blog-detail-toc-heading-lh: 1.62;
	--sp-blog-detail-toc-heading-bottom: clamp(16px, calc(28 / var(--spaciefy-artboard) * 100vw), 28px);
	--sp-blog-detail-toc-item-size: clamp(14px, calc(19.862 / var(--spaciefy-artboard) * 100vw), 19.862px);
	--sp-blog-detail-toc-item-lh: 1.62;
	--sp-blog-detail-toc-line-color: #494949;
	--sp-blog-detail-toc-line-gap: 32px;
	--sp-blog-detail-toc-item-gap: 12px;

	--sp-blog-detail-body-size: clamp(16px, calc(22 / var(--spaciefy-artboard) * 100vw), 22px);
	--sp-blog-detail-body-lh: 1.43;
	--sp-blog-detail-body-tracking: clamp(0.4px, calc(0.764 / var(--spaciefy-artboard) * 100vw), 0.764px);
	--sp-blog-detail-body-opacity: 0.9;
	--sp-blog-detail-paragraph-gap: clamp(18px, calc(28 / var(--spaciefy-artboard) * 100vw), 28px);
	--sp-blog-detail-image-bottom: clamp(24px, calc(50 / var(--spaciefy-artboard) * 100vw), 50px);
	--sp-blog-detail-image-width: 100%;

	--sp-blog-detail-h2-size: clamp(24px, calc(44 / var(--spaciefy-artboard) * 100vw), 44px);
	--sp-blog-detail-h2-lh: 1.11;
	--sp-blog-detail-h2-bottom: 35px;
	--sp-blog-detail-h2-top: clamp(35px, calc(55 / var(--spaciefy-artboard) * 100vw), 55px);

	--sp-blog-detail-h3-size: clamp(20px, calc(33 / var(--spaciefy-artboard) * 100vw), 33px);
	--sp-blog-detail-h3-lh: 1.15;
	--sp-blog-detail-h3-bottom: 28px;
	--sp-blog-detail-h3-top: clamp(28px, calc(45 / var(--spaciefy-artboard) * 100vw), 45px);

	--sp-blog-detail-h4-size: clamp(18px, calc(28 / var(--spaciefy-artboard) * 100vw), 28px);
	--sp-blog-detail-h4-lh: 1.2;
	--sp-blog-detail-h4-bottom: 24px;
	--sp-blog-detail-h4-top: clamp(24px, calc(38 / var(--spaciefy-artboard) * 100vw), 38px);

	--sp-blog-detail-h5-size: clamp(16px, calc(24 / var(--spaciefy-artboard) * 100vw), 24px);
	--sp-blog-detail-h5-lh: 1.25;
	--sp-blog-detail-h5-bottom: 21px;
	--sp-blog-detail-h5-top: clamp(21px, calc(31 / var(--spaciefy-artboard) * 100vw), 31px);

	--sp-blog-detail-h6-size: clamp(15px, calc(22 / var(--spaciefy-artboard) * 100vw), 22px);
	--sp-blog-detail-h6-lh: 1.3;
	--sp-blog-detail-h6-bottom: 17px;
	--sp-blog-detail-h6-top: clamp(17px, calc(28 / var(--spaciefy-artboard) * 100vw), 28px);

	--sp-blog-detail-sidebar-top: calc(var(--sp-header-min-height) + 24px);
}

.site-main--blog-single {
	background-color: var(--spaciefy-black);
	color: var(--spaciefy-white);
	overflow-x: clip;
}

.sp-blog-detail__container {
	padding-top: max(
		var(--sp-blog-detail-pad-top),
		calc(var(--sp-header-offset, 0px) + clamp(24px, 4vw, 48px))
	);
	padding-bottom: var(--sp-blog-detail-pad-bottom);
}

.sp-blog-detail {
	background-color: var(--spaciefy-black);
}

.sp-blog-detail__layout-container {
	width: 100%;
	max-width: var(--sp-blog-detail-layout-container);
	margin-left: auto;
	margin-right: 0;
}

.sp-blog-detail__layout {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--sp-blog-detail-layout-gap);
	width: 100%;
}

.sp-blog-detail__main {
	flex: 1 1 var(--sp-blog-detail-content-pct);
	width: var(--sp-blog-detail-content-pct);
	min-width: 0;
}

.sp-blog-detail__breadcrumb {
	margin-bottom: var(--sp-blog-detail-breadcrumb-bottom);
}

.sp-blog-detail__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-blog-detail__breadcrumb-item {
	display: inline-flex;
	align-items: center;
	font-family: var(--spaciefy-font-manrope);
	font-size: var(--sp-blog-detail-breadcrumb-size);
	font-style: normal;
	font-weight: 500;
	line-height: var(--sp-blog-detail-breadcrumb-lh);
	color: #ffffff;
}

.sp-blog-detail__breadcrumb-item:not(:last-child)::after {
	content: "/";
	margin-left: 8px;
	color: #ffffff;
}

.sp-blog-detail__breadcrumb-link,
.sp-blog-detail__breadcrumb-current {
	color: inherit;
	text-decoration: none;
}

.sp-blog-detail__breadcrumb-link {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 2px 0;
}

.sp-blog-detail__breadcrumb-link:hover,
.sp-blog-detail__breadcrumb-link:focus-visible {
	opacity: 0.75;
}

.sp-blog-detail__title {
	margin: 0 0 var(--sp-blog-detail-title-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-blog-detail-title-size);
	font-style: normal;
	font-weight: 300;
	line-height: var(--sp-blog-detail-title-lh);
	color: #ffffff;
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
}

.sp-blog-detail__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--sp-blog-detail-meta-bottom);
}

.sp-blog-detail__date,
.sp-blog-detail__reading-time {
	font-family: var(--spaciefy-font-manrope);
	font-size: var(--sp-blog-detail-meta-size);
	font-style: normal;
	font-weight: 500;
	line-height: var(--sp-blog-detail-meta-lh);
	color: #ffffff;
}

.sp-blog-detail__meta-separator {
	font-family: var(--spaciefy-font-manrope);
	font-size: var(--sp-blog-detail-meta-size);
	line-height: var(--sp-blog-detail-meta-lh);
	color: #ffffff;
}

.sp-blog-detail__author {
	display: flex;
	align-items: center;
	gap: var(--sp-blog-detail-author-gap);
	margin-bottom: var(--sp-blog-detail-author-bottom);
}

.sp-blog-detail__author-avatar {
	flex: 0 0 auto;
	width: var(--sp-blog-detail-avatar-size);
	height: var(--sp-blog-detail-avatar-size);
	overflow: hidden;
	border-radius: 50%;
	background-color: #2c2c2c;
}

.sp-blog-detail__author-avatar-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-blog-detail__author-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sp-blog-detail__author-name {
	margin: 0;
	font-family: var(--spaciefy-font-manrope);
	font-size: var(--sp-blog-detail-author-name-size);
	font-style: normal;
	font-weight: 500;
	line-height: 1.62;
	color: #ffffff;
}

.sp-blog-detail__author-designation {
	margin: 0;
	font-family: var(--spaciefy-font-manrope);
	font-size: var(--sp-blog-detail-author-designation-size);
	font-style: normal;
	font-weight: 500;
	line-height: 1.62;
	color: #ffffff;
}

.sp-blog-detail__sidebar {
	position: sticky;
	top: var(--sp-blog-detail-sidebar-top);
	align-self: flex-start;
	flex: 0 0 clamp(var(--sp-blog-detail-sidebar-min), var(--sp-blog-detail-sidebar-pct), var(--sp-blog-detail-sidebar-max));
	width: clamp(var(--sp-blog-detail-sidebar-min), var(--sp-blog-detail-sidebar-pct), var(--sp-blog-detail-sidebar-max));
	min-width: var(--sp-blog-detail-sidebar-min);
	max-width: var(--sp-blog-detail-sidebar-max);
}

.sp-blog-detail__tags {
	margin-bottom: var(--sp-blog-detail-tags-bottom);
}

.sp-blog-detail__tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-blog-detail-tags-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-blog-detail__tag {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: var(--sp-blog-detail-tag-pad-y) var(--sp-blog-detail-tag-pad-x);
	border: var(--sp-blog-detail-tag-border-width) solid #2c2c2c;
	border-radius: var(--sp-blog-detail-tag-radius);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-blog-detail-tag-size);
	font-style: normal;
	font-weight: 500;
	line-height: var(--sp-blog-detail-tag-lh);
	letter-spacing: var(--sp-blog-detail-tag-tracking);
	text-transform: uppercase;
	color: #ffffff;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.sp-blog-detail__toc-heading {
	margin: 0 0 var(--sp-blog-detail-toc-heading-bottom);
	font-family: var(--spaciefy-font-manrope);
	font-size: var(--sp-blog-detail-toc-heading-size);
	font-style: normal;
	font-weight: 500;
	line-height: var(--sp-blog-detail-toc-heading-lh);
	color: #ffffff;
}

.sp-blog-detail__toc-list {
	margin: 0;
	padding: 0 0 0 var(--sp-blog-detail-toc-line-gap);
	border-left: 1px solid var(--sp-blog-detail-toc-line-color);
	list-style: none;
}

.sp-blog-detail__toc-item + .sp-blog-detail__toc-item {
	margin-top: var(--sp-blog-detail-toc-item-gap);
}

.sp-blog-detail__toc-link {
	display: block;
	max-width: 100%;
	min-height: 24px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-family: var(--spaciefy-font-manrope);
	font-size: var(--sp-blog-detail-toc-item-size);
	font-style: normal;
	font-weight: 500;
	line-height: var(--sp-blog-detail-toc-item-lh);
	color: #ffffff;
	text-decoration: none;
	opacity: 0.65;
	overflow-wrap: break-word;
	word-wrap: break-word;
	transition: opacity 0.2s ease;
}

.sp-blog-detail__toc-link:hover,
.sp-blog-detail__toc-link:focus-visible,
.sp-blog-detail__toc-link.is-active {
	opacity: 1;
}

.sp-blog-detail__toc-item--level-3 .sp-blog-detail__toc-link {
	padding-left: 12px;
}

.sp-blog-detail__toc-item--level-4 .sp-blog-detail__toc-link {
	padding-left: 24px;
}

.sp-blog-detail__toc-item--level-5 .sp-blog-detail__toc-link,
.sp-blog-detail__toc-item--level-6 .sp-blog-detail__toc-link {
	padding-left: 36px;
}

.sp-blog-detail__content {
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-blog-detail-body-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--sp-blog-detail-body-lh);
	letter-spacing: var(--sp-blog-detail-body-tracking);
	color: #ffffff;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.sp-blog-detail__content :where(
	p,
	li,
	blockquote,
	.wp-block-paragraph,
	.wp-block-list-item
) {
	opacity: var(--sp-blog-detail-body-opacity);
}

.sp-blog-detail__content p {
	margin: 0 0 var(--sp-blog-detail-paragraph-gap);
}

.sp-blog-detail__content a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

.sp-blog-detail__content a:hover,
.sp-blog-detail__content a:focus-visible {
	opacity: 1;
}

.sp-blog-detail__content > :first-child {
	margin-top: 0;
}

.sp-blog-detail__content > :last-child {
	margin-bottom: 0;
}

.sp-blog-detail__content ul,
.sp-blog-detail__content ol {
	margin: 0 0 var(--sp-blog-detail-paragraph-gap);
	padding-left: 1.2em;
}

.sp-blog-detail__content ul {
	list-style: disc;
}

.sp-blog-detail__content li {
	margin-bottom: 0.45em;
}

.sp-blog-detail__content li::marker {
	color: #ffffff;
}

.sp-blog-detail__content :is(figure, .wp-block-image) {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 var(--sp-blog-detail-image-bottom);
}

.sp-blog-detail__content img,
.sp-blog-detail__content-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 0 var(--sp-blog-detail-image-bottom);
}

.sp-blog-detail__content figure img,
.sp-blog-detail__content .wp-block-image img {
	margin-bottom: 0;
}

.sp-blog-detail__content blockquote {
	margin: 0 0 var(--sp-blog-detail-paragraph-gap);
	padding: 0;
	border: 0;
	font: inherit;
	color: inherit;
}

.sp-blog-detail__content h2 {
	margin: var(--sp-blog-detail-h2-top) 0 var(--sp-blog-detail-h2-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-blog-detail-h2-size);
	font-style: normal;
	font-weight: 300;
	line-height: var(--sp-blog-detail-h2-lh);
	letter-spacing: 0;
	color: #ffffff;
}

.sp-blog-detail__content h3 {
	margin: var(--sp-blog-detail-h3-top) 0 var(--sp-blog-detail-h3-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-blog-detail-h3-size);
	font-style: normal;
	font-weight: 300;
	line-height: var(--sp-blog-detail-h3-lh);
	letter-spacing: 0;
	color: #ffffff;
}

.sp-blog-detail__content h4 {
	margin: var(--sp-blog-detail-h4-top) 0 var(--sp-blog-detail-h4-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-blog-detail-h4-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--sp-blog-detail-h4-lh);
	letter-spacing: 0;
	color: #ffffff;
}

.sp-blog-detail__content h5 {
	margin: var(--sp-blog-detail-h5-top) 0 var(--sp-blog-detail-h5-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-blog-detail-h5-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--sp-blog-detail-h5-lh);
	letter-spacing: 0;
	color: #ffffff;
}

.sp-blog-detail__content h6 {
	margin: var(--sp-blog-detail-h6-top) 0 var(--sp-blog-detail-h6-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-blog-detail-h6-size);
	font-style: normal;
	font-weight: 500;
	line-height: var(--sp-blog-detail-h6-lh);
	letter-spacing: var(--sp-blog-detail-body-tracking);
	color: #ffffff;
}

.sp-blog-detail__content h2:first-child,
.sp-blog-detail__content h3:first-child,
.sp-blog-detail__content h4:first-child,
.sp-blog-detail__content h5:first-child,
.sp-blog-detail__content h6:first-child {
	margin-top: 0;
}

/* Rich content — prevent overflow on narrow viewports */
.sp-blog-detail__content :is(
	iframe,
	video,
	embed,
	object
) {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 0 0 var(--sp-blog-detail-image-bottom);
	border: 0;
}

.sp-blog-detail__content .wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 0 var(--sp-blog-detail-image-bottom);
	overflow: hidden;
}

.sp-blog-detail__content .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	aspect-ratio: auto;
}

.sp-blog-detail__content .wp-block-embed__wrapper::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}

.sp-blog-detail__content :is(pre, code) {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sp-blog-detail__content pre {
	margin: 0 0 var(--sp-blog-detail-paragraph-gap);
	padding: 1em;
	background-color: #1a1a1a;
	border-radius: 4px;
}

.sp-blog-detail__content table {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 var(--sp-blog-detail-paragraph-gap);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
}

.sp-blog-detail__content :is(th, td) {
	padding: 0.5em 0.75em;
	border: 1px solid #2c2c2c;
	text-align: left;
}

.sp-blog-detail__content .alignwide,
.sp-blog-detail__content .alignfull {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sp-blog-detail__toc-link {
		transition: none;
	}
}