/**
 * Work single — project detail page layout and typography.
 * Figma node 1053:2.
 */

:root {
	--sp-work-detail-pad-top: clamp(72px, calc(160 / var(--spaciefy-artboard) * 100vw), 160px);
	--sp-work-detail-pad-bottom: clamp(64px, calc(150 / var(--spaciefy-artboard) * 100vw), 150px);
	--sp-work-detail-hero-gap: clamp(24px, calc(130 / var(--spaciefy-artboard) * 100vw), 130px);
	--sp-work-detail-info-width: 480px;
	--sp-work-detail-right-content-max: calc(
		var(--spaciefy-container) - var(--sp-work-detail-info-width) - var(--sp-work-detail-hero-gap)
	);
	--sp-work-detail-banner-max: var(--sp-work-detail-right-content-max);
	--sp-work-detail-image-radius: 12px;

	--sp-work-detail-title-size: clamp(32px, calc(75.373 / var(--spaciefy-artboard) * 100vw), 75.373px);
	--sp-work-detail-title-lh: 1.11;
	--sp-work-detail-title-bottom: 14px;

	--sp-work-detail-excerpt-size: clamp(14px, calc(18.597 / var(--spaciefy-artboard) * 100vw), 18.597px);
	--sp-work-detail-excerpt-lh: 1.43;
	--sp-work-detail-excerpt-tracking: clamp(0.3px, calc(0.558 / var(--spaciefy-artboard) * 100vw), 0.558px);
	--sp-work-detail-excerpt-opacity: 0.9;
	--sp-work-detail-excerpt-bottom: clamp(32px, calc(56 / var(--spaciefy-artboard) * 100vw), 56px);

	--sp-work-detail-meta-title-size: clamp(20px, calc(28 / var(--spaciefy-artboard) * 100vw), 28px);
	--sp-work-detail-meta-title-lh: 1.11;
	--sp-work-detail-meta-title-bottom: 16px;
	--sp-work-detail-meta-section-gap: clamp(28px, calc(40 / var(--spaciefy-artboard) * 100vw), 40px);

	--sp-work-detail-service-size: clamp(12px, calc(14.49 / var(--spaciefy-artboard) * 100vw), 14.49px);
	--sp-work-detail-service-lh: 1.11;
	--sp-work-detail-service-pad-y: 11px;
	--sp-work-detail-service-pad-x: clamp(16px, calc(22 / var(--spaciefy-artboard) * 100vw), 22px);
	--sp-work-detail-service-radius: clamp(40px, calc(53.72 / var(--spaciefy-artboard) * 100vw), 53.72px);
	--sp-work-detail-service-border: clamp(1px, calc(0.724 / var(--spaciefy-artboard) * 100vw), 0.724px);
	--sp-work-detail-service-gap: 8px;

	--sp-work-detail-tech-size: clamp(12px, calc(14.49 / var(--spaciefy-artboard) * 100vw), 14.49px);
	--sp-work-detail-tech-lh: 1.43;
	--sp-work-detail-tech-width: 220px;
	--sp-work-detail-tech-gap: 8px;

	--sp-work-detail-website-url-size: clamp(14px, calc(18.597 / var(--spaciefy-artboard) * 100vw), 18.597px);
	--sp-work-detail-website-url-lh: 1.43;
	--sp-work-detail-website-url-tracking: clamp(0.3px, calc(0.558 / var(--spaciefy-artboard) * 100vw), 0.558px);

	--sp-work-detail-cta-size: clamp(13px, calc(15.739 / var(--spaciefy-artboard) * 100vw), 15.739px);
	--sp-work-detail-cta-pad-y: 11px;
	--sp-work-detail-cta-pad-x: clamp(28px, calc(38 / var(--spaciefy-artboard) * 100vw), 38px);
	--sp-work-detail-cta-gap: clamp(8px, calc(12 / var(--spaciefy-artboard) * 100vw), 12px);
	--sp-work-detail-cta-icon-min: clamp(40px, calc(48 / var(--spaciefy-artboard) * 100vw), 48px);
	--sp-work-detail-cta-icon-svg: clamp(12px, calc(12.5 / var(--spaciefy-artboard) * 100vw), 12.5px);

	--sp-work-detail-logo-max-height: clamp(28px, calc(42 / var(--spaciefy-artboard) * 100vw), 42px);
	--sp-work-detail-logo-max-width: clamp(80px, calc(160 / var(--spaciefy-artboard) * 100vw), 160px);

	--sp-work-detail-hero-bottom: clamp(32px, calc(60 / var(--spaciefy-artboard) * 100vw), 60px);
	--sp-work-detail-overview-to-blocks: clamp(32px, calc(70 / var(--spaciefy-artboard) * 100vw), 70px);
	--sp-work-detail-paragraph-line-gap: clamp(32px, calc(70 / var(--spaciefy-artboard) * 100vw), 70px);

	--sp-work-detail-section-label-size: clamp(16px, calc(24 / var(--spaciefy-artboard) * 100vw), 24px);
	--sp-work-detail-section-label-lh: 1.11;
	--sp-work-detail-section-label-tracking: clamp(2px, calc(3.12 / var(--spaciefy-artboard) * 100vw), 3.12px);
	--sp-work-detail-section-label-width: 480px;
	--sp-work-detail-section-layout-gap: clamp(24px, calc(40 / var(--spaciefy-artboard) * 100vw), 40px);

	--sp-work-detail-overview-size: clamp(16px, calc(25.479 / var(--spaciefy-artboard) * 100vw), 25.479px);
	--sp-work-detail-overview-lh: 1.43;
	--sp-work-detail-overview-tracking: clamp(0.4px, calc(0.764 / var(--spaciefy-artboard) * 100vw), 0.764px);
	--sp-work-detail-overview-opacity: 0.9;

	--sp-work-detail-block-pad-top: clamp(72px, calc(140 / var(--spaciefy-artboard) * 100vw), 140px);
	--sp-work-detail-block-pad-bottom: clamp(80px, calc(150 / var(--spaciefy-artboard) * 100vw), 150px);

	--sp-work-detail-body-size: clamp(16px, calc(25.479 / var(--spaciefy-artboard) * 100vw), 25.479px);
	--sp-work-detail-body-lh: 1.43;
	--sp-work-detail-body-tracking: clamp(0.4px, calc(0.764 / var(--spaciefy-artboard) * 100vw), 0.764px);
	--sp-work-detail-body-weight: 400;
	--sp-work-detail-paragraph-gap: clamp(18px, calc(28 / var(--spaciefy-artboard) * 100vw), 28px);

	--sp-work-detail-h2-size: clamp(28px, calc(44 / var(--spaciefy-artboard) * 100vw), 44px);
	--sp-work-detail-h2-lh: 1.11;
	--sp-work-detail-h2-bottom: clamp(20px, calc(35 / var(--spaciefy-artboard) * 100vw), 35px);
	--sp-work-detail-h2-top: clamp(28px, calc(45 / var(--spaciefy-artboard) * 100vw), 45px);

	--sp-work-detail-h3-size: clamp(22px, calc(30 / var(--spaciefy-artboard) * 100vw), 30px);
	--sp-work-detail-h3-lh: 1.11;
	--sp-work-detail-h3-bottom: 24px;
	--sp-work-detail-h3-top: clamp(24px, calc(38 / var(--spaciefy-artboard) * 100vw), 38px);

	--sp-work-detail-h4-size: clamp(20px, calc(26 / var(--spaciefy-artboard) * 100vw), 26px);
	--sp-work-detail-h4-lh: 1.11;
	--sp-work-detail-h4-bottom: clamp(18px, calc(24 / var(--spaciefy-artboard) * 100vw), 24px);
	--sp-work-detail-h4-top: clamp(22px, calc(34 / var(--spaciefy-artboard) * 100vw), 34px);

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

	--sp-work-detail-h6-size: clamp(16px, calc(22 / var(--spaciefy-artboard) * 100vw), 22px);
	--sp-work-detail-h6-lh: 1.15;
	--sp-work-detail-h6-bottom: clamp(14px, calc(18 / var(--spaciefy-artboard) * 100vw), 18px);
	--sp-work-detail-h6-top: clamp(18px, calc(28 / var(--spaciefy-artboard) * 100vw), 28px);

	--sp-work-detail-gallery-gap: clamp(16px, calc(27 / var(--spaciefy-artboard) * 100vw), 27px);
	--sp-work-detail-gallery-top: clamp(72px, calc(140 / var(--spaciefy-artboard) * 100vw), 140px);
}

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

.sp-work-detail__container {
	width: var(--spaciefy-container-width);
	max-width: var(--spaciefy-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spaciefy-container-pad-x);
	padding-right: var(--spaciefy-container-pad-x);
	padding-top: var(--sp-work-detail-pad-top);
	padding-bottom: var(--sp-work-detail-pad-bottom);
}

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

/* ─── Hero ─────────────────────────────────────── */

.sp-work-detail__hero {
	margin-bottom: var(--sp-work-detail-hero-bottom);
}

.sp-work-detail__hero-grid {
	display: grid;
	grid-template-columns: minmax(0, var(--sp-work-detail-info-width)) minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: var(--sp-work-detail-hero-gap);
	row-gap: 0;
	align-items: start;
	justify-content: stretch;
}

.sp-work-detail__title-row {
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, calc(40 / var(--spaciefy-artboard) * 100vw), 40px);
	margin-bottom: 14px;
	min-width: 0;
	width: 100%;
}

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

.sp-work-detail__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	max-width: var(--sp-work-detail-logo-max-width);
}

.sp-work-detail__logo-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--sp-work-detail-logo-max-height);
	object-fit: contain;
}

.sp-work-detail__info {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
}

.sp-work-detail__banner {
	grid-column: 2;
	grid-row: 2;
	align-self: stretch;
	justify-self: stretch;
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.sp-work-detail__banner-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-work-detail__excerpt {
	margin: 0 0 var(--sp-work-detail-excerpt-bottom);
	max-width: 36em;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-work-detail-excerpt-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--sp-work-detail-excerpt-lh);
	letter-spacing: var(--sp-work-detail-excerpt-tracking);
	color: #ffffff;
	opacity: var(--sp-work-detail-excerpt-opacity);
}

.sp-work-detail__meta-title {
	margin: 0 0 var(--sp-work-detail-meta-title-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-work-detail-meta-title-size);
	font-style: normal;
	font-weight: 300;
	line-height: var(--sp-work-detail-meta-title-lh);
	color: #ffffff;
}

.sp-work-detail__services,
.sp-work-detail__technologies,
.sp-work-detail__website {
	margin-bottom: var(--sp-work-detail-meta-section-gap);
}

.sp-work-detail__service-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-work-detail-service-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-work-detail__service-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	padding: var(--sp-work-detail-service-pad-y) var(--sp-work-detail-service-pad-x);
	border: var(--sp-work-detail-service-border) solid #ffffff;
	border-radius: var(--sp-work-detail-service-radius);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-work-detail-service-size);
	font-style: normal;
	font-weight: 300;
	line-height: var(--sp-work-detail-service-lh);
	color: #ffffff;
	white-space: nowrap;
}

.sp-work-detail__technology-list {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: var(--sp-work-detail-tech-gap);
	width: var(--sp-work-detail-tech-width);
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-work-detail__technology-item {
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-work-detail-tech-size);
	font-style: normal;
	font-weight: 300;
	line-height: var(--sp-work-detail-tech-lh);
	color: #ffffff;
}

.sp-work-detail__technology-text {
	width: var(--sp-work-detail-tech-width);
	max-width: 100%;
	margin: 0;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-work-detail-tech-size);
	font-style: normal;
	font-weight: 300;
	line-height: var(--sp-work-detail-tech-lh);
	color: #ffffff;
}

.sp-work-detail__website-url {
	position: relative;
	display: inline-block;
	min-width: 24px;
	min-height: 24px;
	padding: 4px 6px;
	margin-bottom: 0;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-work-detail-website-url-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--sp-work-detail-website-url-lh);
	letter-spacing: var(--sp-work-detail-website-url-tracking);
	color: #ffffff;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.sp-work-detail__website-url::after {
	content: "";
	position: absolute;
	inset: 0;
	min-width: 24px;
	min-height: max(24px, var(--sp-tap-min));
}

.sp-work-detail__website-url:hover,
.sp-work-detail__website-url:focus-visible {
	opacity: 0.75;
}

.sp-work-detail__cta {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--sp-work-detail-cta-gap);
	max-width: 100%;
}

.sp-work-detail__cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 24px;
	padding: var(--sp-work-detail-cta-pad-y) var(--sp-work-detail-cta-pad-x);
	border: 0;
	border-radius: var(--sp-hero-cta-radius);
	font-family: var(--spaciefy-font-manrope);
	font-size: var(--sp-work-detail-cta-size);
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	color: #000000;
	background-color: #ffffff;
	text-decoration: none;
	transition: opacity 0.2s ease;
	white-space: nowrap;
}

.sp-work-detail__cta-button:hover,
.sp-work-detail__cta-button:focus-visible {
	opacity: 0.9;
}

.sp-work-detail__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--sp-work-detail-cta-icon-min);
	height: var(--sp-work-detail-cta-icon-min);
	border-radius: var(--sp-cta-icon-radius);
	color: var(--spaciefy-black);
	background-color: var(--spaciefy-yellow);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.sp-work-detail__cta-icon:hover,
.sp-work-detail__cta-icon:focus-visible {
	opacity: 0.9;
}

.sp-work-detail__cta-icon svg {
	width: var(--sp-work-detail-cta-icon-svg);
	height: var(--sp-work-detail-cta-icon-svg);
}

/* ─── Overview ─────────────────────────────────── */

.sp-work-detail__overview {
	margin-bottom: var(--sp-work-detail-overview-to-blocks);
}

.sp-work-detail__section-layout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-work-detail-section-layout-gap);
}

.sp-work-detail__section-label {
	flex: 0 0 var(--sp-work-detail-section-label-width);
	width: var(--sp-work-detail-section-label-width);
	margin: 0;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-work-detail-section-label-size);
	font-style: normal;
	font-weight: 500;
	line-height: var(--sp-work-detail-section-label-lh);
	letter-spacing: var(--sp-work-detail-section-label-tracking);
	text-transform: uppercase;
	color: #ffffff;
}

.sp-work-detail__overview-content {
	flex: 1 1 auto;
	width: 100%;
	max-width: var(--sp-work-detail-right-content-max);
	min-width: 0;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-work-detail-overview-size);
	font-style: normal;
	font-weight: 300;
	line-height: var(--sp-work-detail-overview-lh);
	letter-spacing: var(--sp-work-detail-overview-tracking);
	color: #ffffff;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.sp-work-detail__overview-content :where(
	p,
	li,
	blockquote,
	.wp-block-paragraph,
	.wp-block-list-item
) {
	opacity: var(--sp-work-detail-overview-opacity);
}

.sp-work-detail__overview-content p {
	margin: 0;
}

.sp-work-detail__overview-content p + p::before {
	content: "";
	display: block;
	height: 1px;
	margin-top: var(--sp-work-detail-paragraph-line-gap);
	margin-bottom: var(--sp-work-detail-paragraph-line-gap);
	background-color: #ffffff;
}

.sp-work-detail__overview-content > :first-child {
	margin-top: 0;
}

.sp-work-detail__overview-content > :last-child {
	margin-bottom: 0;
}

.sp-work-detail__overview-content a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

/* ─── Content blocks loop ──────────────────────── */

.sp-work-detail__blocks {
	display: flex;
	flex-direction: column;
}

.sp-work-detail__block-section {
	padding-top: var(--sp-work-detail-block-pad-top);
	padding-bottom: var(--sp-work-detail-block-pad-bottom);
}

.sp-work-detail__block-figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--sp-work-detail-image-radius);
}

.sp-work-detail__block-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sp-work-detail-image-radius);
}

.sp-work-detail__block-content {
	flex: 1 1 auto;
	width: 100%;
	max-width: var(--sp-work-detail-right-content-max);
	min-width: 0;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-work-detail-body-size);
	font-style: normal;
	font-weight: var(--sp-work-detail-body-weight);
	line-height: var(--sp-work-detail-body-lh);
	letter-spacing: var(--sp-work-detail-body-tracking);
	color: #ffffff;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.sp-work-detail__block-content p {
	margin: 0 0 var(--sp-work-detail-paragraph-gap);
}

.sp-work-detail__block-content > :last-child {
	margin-bottom: 0;
}

.sp-work-detail__block-content a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

.sp-work-detail__block-content :is(figure, .wp-block-image) {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 var(--sp-work-detail-paragraph-gap);
}

.sp-work-detail__block-content img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Shared rich-text headings inside block content */

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

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

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

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

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

.sp-work-detail__block-content h2:first-child,
.sp-work-detail__block-content h3:first-child,
.sp-work-detail__block-content h4:first-child,
.sp-work-detail__block-content h5:first-child,
.sp-work-detail__block-content h6:first-child {
	margin-top: 0;
}

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

.sp-work-detail__block-content li {
	margin-bottom: 0.45em;
}

.sp-work-detail__block-content strong,
.sp-work-detail__block-content b {
	font-weight: 500;
}

/* ─── Final gallery grid ───────────────────────── */

.sp-work-detail__gallery {
	padding-top: var(--sp-work-detail-gallery-top);
}

.sp-work-detail__gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-work-detail-gallery-gap);
}

.sp-work-detail__gallery-item {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--sp-work-detail-image-radius);
}

.sp-work-detail__gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--sp-work-detail-image-radius);
}

.sp-work-detail__gallery--stacked .sp-work-detail__gallery-item:nth-child(n + 3) {
	grid-column: 1 / -1;
}

.sp-work-detail__gallery--stacked .sp-work-detail__gallery-item:only-child {
	grid-column: 1 / -1;
}

@media (prefers-reduced-motion: reduce) {
	.sp-work-detail__website-url,
	.sp-work-detail__cta-button,
	.sp-work-detail__cta-icon {
		transition: none;
	}
}