/**
 * Services page — Services Detail section.
 * Figma: alternating rows with image left and content right.
 */

:root {
	--sp-svc-detail-image-col: 51.15%;
	--sp-svc-detail-row-gap: 90px;
	--sp-svc-detail-image-pad-y: 115px;
	--sp-svc-detail-image-pad-x: 90px;
	--sp-svc-detail-image-radius: 12px;
	--sp-svc-detail-image-bg: rgba(217, 217, 217, 0.2);
	--sp-svc-detail-content-pad-left: 88px;
	--sp-svc-detail-content-pad-top: 0;
	--sp-svc-detail-content-pad-y: 0;
	--sp-svc-detail-title-size: 52px;
	--sp-svc-detail-title-lh: 1.03;
	--sp-svc-detail-title-bottom: 12px;
	--sp-svc-detail-desc-size: 22px;
	--sp-svc-detail-desc-lh: 1.3;
	--sp-svc-detail-desc-bottom: 68px;
	--sp-svc-detail-caps-label-size: 17px;
	--sp-svc-detail-caps-label-lh: 1.43;
	--sp-svc-detail-caps-label-tracking: 4.25px;
	--sp-svc-detail-caps-label-bottom: 38px;
	--sp-svc-detail-caps-item-size: 28px;
	--sp-svc-detail-caps-item-pad-top: 25px;
	--sp-svc-detail-caps-item-pad-bottom: 20px;
	--sp-svc-detail-placeholder-bg: rgba(217, 217, 217, 0.2);
	--sp-svc-detail-border-color: rgba(0, 0, 0, 0.12);
	--sp-svc-detail-container-offset: calc((100vw - min(96vw, var(--spaciefy-container))) / 2);
}

.sp-svc-detail {
	background-color: var(--spaciefy-white);
	color: var(--spaciefy-black);
	overflow-x: clip;
}

.sp-svc-detail__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sp-svc-detail-row-gap);
	width: var(--spaciefy-container-width);
	max-width: var(--spaciefy-container);
	margin-left: auto;
	margin-right: auto;
	overflow: visible;
}

/* Each service row — image + text inside main container */
.sp-svc-detail__row {
	display: grid;
	grid-template-columns: var(--sp-svc-detail-image-col) minmax(0, 1fr);
	align-items: stretch;
	min-width: 0;
	width: 100%;
}

/* Left: Image column — gray bg bleeds to viewport left via pseudo-element */
.sp-svc-detail__image-col {
	position: relative;
	padding: var(--sp-svc-detail-image-pad-y) var(--sp-svc-detail-image-pad-x) var(--sp-svc-detail-image-pad-y) 0;
	min-height: 100%;
}

.sp-svc-detail__image-col::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: calc(-1 * var(--sp-svc-detail-container-offset));
	background-color: var(--sp-svc-detail-image-bg);
	z-index: 0;
}

.sp-svc-detail__image-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

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

.sp-svc-detail__image-placeholder {
	width: 100%;
	min-height: 320px;
	background-color: var(--sp-svc-detail-placeholder-bg);
	border-radius: var(--sp-svc-detail-image-radius);
	background-image:
		linear-gradient(
			-45deg,
			rgba(0, 0, 0, 0.04) 25%,
			transparent 25%,
			transparent 50%,
			rgba(0, 0, 0, 0.04) 50%,
			rgba(0, 0, 0, 0.04) 75%,
			transparent 75%,
			transparent
		);
	background-size: 24px 24px;
}

/* Right: Content column — inside main container */
.sp-svc-detail__content-col {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-width: 0;
	padding: var(--sp-svc-detail-content-pad-top) 0 0 var(--sp-svc-detail-content-pad-left);
}

.sp-svc-detail__title {
	margin: 0 0 var(--sp-svc-detail-title-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-svc-detail-title-size);
	font-weight: 400;
	line-height: var(--sp-svc-detail-title-lh);
	color: #000;
}

.sp-svc-detail__description {
	margin: 0 0 var(--sp-svc-detail-desc-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-svc-detail-desc-size);
	font-weight: 300;
	line-height: var(--sp-svc-detail-desc-lh);
	color: #000;
}

/* Capabilities sub-section */
.sp-svc-detail__caps {
	width: 100%;
	min-width: 0;
}

.sp-svc-detail__caps-label {
	margin: 0 0 var(--sp-svc-detail-caps-label-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-svc-detail-caps-label-size);
	font-weight: 400;
	line-height: var(--sp-svc-detail-caps-label-lh);
	letter-spacing: var(--sp-svc-detail-caps-label-tracking);
	text-transform: uppercase;
	color: #000;
	opacity: 0.5;
}

.sp-svc-detail__caps-list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	border-top: 1px solid var(--sp-svc-detail-border-color);
}

.sp-svc-detail__caps-item {
	padding: var(--sp-svc-detail-caps-item-pad-top) 0 var(--sp-svc-detail-caps-item-pad-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-svc-detail-caps-item-size);
	font-weight: 400;
	line-height: normal;
	color: #000;
	border-bottom: 1px solid var(--sp-svc-detail-border-color);
}

.sp-svc-detail__caps-item:last-child {
	border-bottom: none;
}