/*
 * Services tabs. Figma 2016:60456 desktop (column, 32 gap, centred: header
 * 790 wide, segmented control, container/services 2048:47144: pill row 16
 * apart, then text 480 + photo 580x387 r16, 64 apart, 1124 wide), mobile
 * 500:11607 (column, 24 gap: left header/L, full-width segmented control with
 * 18px labels, slider of card/services/image 289x420, counter + progress
 * line + square arrows).
 */

.services-tabs__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.services-tabs__head { max-width: 790px; }

/* Figma: the two 160px controls sit 20 apart in a 356 track. */
.services-tabs__switch { gap: 20px; }

.services-tabs__panel {
	align-self: stretch;
	min-width: 0;
}

/* ---------- Desktop: pills + detail ---------- */
.services-tabs__picker {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.services-tabs__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.services-tabs__pill { padding-inline: 16px; }
.services-tabs__pill-check { display: none; }
.services-tabs__pill[aria-selected="true"] .services-tabs__pill-check { display: inline-block; }

.services-tabs__detail {
	display: flex;
	align-items: center;
	gap: clamp(32px, 5vw, 64px);
	width: 100%;
	max-width: 1124px;
}

.services-tabs__detail[hidden] { display: none; }

.services-tabs__text {
	display: flex;
	flex: 0 1 480px;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.services-tabs__title { font: var(--f-header-l); color: var(--c-text-dark); }
.services-tabs__para { margin-top: -4px; font: var(--f-body-s); color: var(--c-text-dark); }

.services-tabs__media {
	flex: 0 1 580px;
	min-width: 0;
	margin-left: auto;
	aspect-ratio: 580 / 387;
	overflow: hidden;
	border-radius: var(--r-m);
}

/* ---------- Mobile: card slider ---------- */
.services-tabs__slider { display: none; }

.services-tabs__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 289px;
	height: 420px;
	padding: 20px;
	overflow: hidden;
	border-radius: var(--r-m);
	background: var(--c-text-dark);
	color: var(--c-text-white);
	isolation: isolate;
}

.services-tabs__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(9, 3, 19, .6);
	transition: background-color .2s ease;
}

.services-tabs__card:hover::after { background: rgba(9, 3, 19, .45); }

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

.services-tabs__card-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.services-tabs__card-title { font: var(--f-header-m); }

.services-tabs__card-sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.services-tabs__card-text { max-width: 217px; font: var(--f-body-xs); }
.services-tabs__card-icon { --icon-size: 24px; }

.services-tabs__nav {
	display: flex;
	align-items: center;
	gap: 19px;
	margin-top: 24px;
}

.services-tabs__counter {
	font: var(--f-subtitle-m);
	color: var(--c-text-grey);
	white-space: nowrap;
}

.services-tabs__counter::first-letter { color: var(--c-text-dark); }

.services-tabs__progress {
	position: relative;
	flex: 1;
	height: 1px;
	background: var(--c-border-light);
}

.services-tabs__progress::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--progress, 0) * 100%);
	background: var(--c-border-dark);
	transition: width .2s ease;
}

.services-tabs__arrows {
	display: flex;
	gap: 16px;
}

.services-tabs__arrow {
	--icon-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-border-dark);
	border-radius: var(--r-xs);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
	transition: background-color .15s ease, color .15s ease;
}

.services-tabs__arrow:hover { background: var(--c-border-dark); color: var(--c-text-white); }

.services-tabs__arrow[aria-disabled="true"] {
	border-color: var(--c-border-light);
	color: var(--c-border-light);
	pointer-events: none;
}

@media (max-width: 1023px) {
	.services-tabs__detail { flex-direction: column; align-items: stretch; }
	.services-tabs__text { flex-basis: auto; }
	.services-tabs__media { flex-basis: auto; margin-left: 0; }
}

@media (max-width: 767px) {
	.services-tabs__inner { align-items: stretch; gap: 24px; }

	.services-tabs__switch { gap: 0; }
	.services-tabs__switch .segmented__item { font: var(--f-body-m); }
	.services-tabs__switch .segmented__item[aria-selected="true"] { font: var(--f-subtitle-xl); }

	.services-tabs__picker { display: none; }
	.services-tabs__slider { display: block; }
	.services-tabs__track { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
}