/*
 * Service overview. Figma 2204:45772 desktop: left side 765 wide (intro:
 * header/XL title, body/S paragraphs 16 apart; 24 below, feature boxes
 * 375x105 in 2 columns 16 apart; 84 below, services header + card grid
 * 2 columns, 16/20 apart), right side 391 wide 64 to the right (banner/default
 * 282 tall, 32 gap, section/costcalculator small). Mobile 2204:45887: header/L,
 * feature boxes stacked 350x97, cards stacked 350x153, no sidebar.
 *
 * card/servicedetail: white card r16 with a tab hanging under its bottom
 * right corner that holds "Learn More" (Figma draws it as one Union shape).
 */

.service-overview {
	--so-calc-bg: #ede7fc;      /* cost calculator pattern (Figma shader) */
	--so-calc-line: #e1d5ff;
}

.service-overview__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 64px;
}

.service-overview__grid--side {
	grid-template-columns: minmax(0, 765fr) minmax(0, 391fr);
	align-items: start;
	gap: clamp(32px, 4.5vw, 64px);
}

.service-overview__main {
	display: flex;
	flex-direction: column;
	gap: 84px;
	min-width: 0;
}

.service-overview__intro,
.service-overview__apps {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.service-overview__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.service-overview__heading { font: var(--f-header-xl); color: var(--c-text-dark); }
.service-overview__text { font: var(--f-body-s); color: var(--c-text-dark); }
.service-overview__text > * + * { margin-top: 16px; }

/* ---------- container/highlight boxes ---------- */
.service-overview__features {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 16px;
}

.service-overview__feature {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 105px;
	padding: 20px;
	border-radius: var(--r-m);
	background: var(--c-bg-grey);
}

.service-overview__feature-icon { --icon-size: 65px; color: var(--c-secondary); }

.service-overview__feature-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	max-width: 260px;
}

.service-overview__feature-title { font: var(--f-header-2xs); color: var(--c-text-dark); }
.service-overview__feature-sub { font: var(--f-body-xs); color: var(--c-text-dark); }

/* ---------- card/servicedetail ---------- */
.service-overview__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 20px 16px;
}

.service-overview__item {
	display: flex;
	padding-bottom: 20px;            /* room for the tab */
	filter: drop-shadow(2px 8px 8px rgba(0, 0, 0, .05));
}

.service-overview__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	min-height: 133px;
	padding: 20px 20px 36px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-m);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
}

.service-overview__card-title { font: var(--f-header-s); transition: color .15s ease; }
.service-overview__card-text { font: var(--f-body-xs); color: var(--c-text-grey); }
.service-overview__card:hover .service-overview__card-title { color: var(--c-primary); }

/* The tab: 22px tall below the card (covers its bottom border); the label
   overflows upwards into the card. Concave corners join it to the card. */
.service-overview__more {
	--r: 8px;
	position: absolute;
	right: 19px;
	bottom: -21px;
	display: flex;
	align-items: flex-end;
	height: 22px;
	padding: 0 17px 15px;
	border: 1px solid var(--c-border-light);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	background: var(--c-bg-white);
}

.service-overview__more::before,
.service-overview__more::after {
	content: "";
	position: absolute;
	top: 1px;                        /* level with the card's bottom border */
	width: var(--r);
	height: var(--r);
}

.service-overview__more::before {
	left: calc(-1 * var(--r));
	background: radial-gradient(circle at 0 100%, transparent calc(var(--r) - 1px), var(--c-border-light) calc(var(--r) - 1px), var(--c-border-light) var(--r), var(--c-bg-white) var(--r));
}

.service-overview__more::after {
	right: calc(-1 * var(--r));
	background: radial-gradient(circle at 100% 100%, transparent calc(var(--r) - 1px), var(--c-border-light) calc(var(--r) - 1px), var(--c-border-light) var(--r), var(--c-bg-white) var(--r));
}

.service-overview__more-label {
	--icon-size: 12px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--c-primary);
	font: var(--f-header-2xs);
	white-space: nowrap;
}

.service-overview__card:hover .service-overview__more-label { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- sidebar ---------- */
.service-overview__side { min-width: 0; height: 100%; }

.service-overview__sticky {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* banner/default */
.service-overview__banner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 282px;
	padding: 32px 20px;
	overflow: hidden;
	border-radius: var(--r-l);
	background: var(--c-text-dark);
	color: var(--c-text-white);
	isolation: isolate;
}

.service-overview__banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(9, 3, 19, .75);
}

.service-overview__banner-image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-overview__banner-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.service-overview__banner-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.service-overview__banner-title { font: var(--f-header-l); }
.service-overview__banner-sub { font: var(--f-body-xs); }

/* section/costcalculator, small */
.service-overview__calc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 32px 20px;
	overflow: hidden;
	border-radius: var(--r-l);
	background-color: var(--so-calc-bg);
	background-image:
		repeating-linear-gradient(45deg, var(--so-calc-line) 0 1px, transparent 1px 29px),
		repeating-linear-gradient(-45deg, var(--so-calc-line) 0 1px, transparent 1px 29px);
}

.service-overview__calc > .tag .icon { --icon-size: 12px; }

.service-overview__calc-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.service-overview__calc-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.service-overview__calc-title { font: var(--f-header-l); color: var(--c-text-dark); }
.service-overview__calc-text { font: var(--f-body-xs); color: var(--c-text-grey); }

.service-overview__calc-ask {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.service-overview__calc-question { font: var(--f-header-s); color: var(--c-text-dark); }

.service-overview__calc-buttons {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.service-overview__calc-btn { min-height: 63px; }

@media (max-width: 1023px) {
	.service-overview__grid--side { grid-template-columns: minmax(0, 1fr); }
	.service-overview__sticky { position: static; }
}

@media (max-width: 767px) {
	.service-overview__heading { font: var(--f-header-l); }

	.service-overview__features { grid-template-columns: minmax(0, 1fr); }
	.service-overview__feature { min-height: 97px; padding: 16px; }

	.service-overview__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }

	/* Mobile shows the sticky banner and the full Cost calculator section ("Mobile only") instead. */
	.service-overview__side { display: none; }
}