/*
 * Service cards. Figma 1841:47251 (column, 24 gap: header/XL title, 765-wide
 * body/S paragraphs 16 apart; slider of 350x426 cards 16 apart, square
 * arrows right under it) and 1896:36144 (same cards as a list, here a grid).
 * Mobile 963:11021 / 1896:36866: header/L, cards stack 350x250, 16 apart.
 * card/services/image 500:11570: photo r16 + rgba(9,3,19,.6), 20 padding,
 * header/M title, body/XS line (217 max) and a 24px arrow.
 */

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

.service-cards__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 765px;
}

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

/* ---------- card ---------- */
.service-cards__item { display: flex; min-width: 0; }

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

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

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

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

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

.service-cards__title { font: var(--f-header-m); }

.service-cards__sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.service-cards__text { max-width: 217px; font: var(--f-body-xs); }
.service-cards__icon { --icon-size: 24px; transition: transform .2s ease; }
.service-cards__card:hover .service-cards__icon { transform: translateX(4px); }

/* ---------- slider ---------- */
.service-cards__slider {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.service-cards--slider .service-cards__item { width: 350px; }

.service-cards__arrows {
	display: flex;
	justify-content: flex-end;
	gap: 16px;
}

.service-cards__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;
}

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

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

/* ---------- grid ---------- */
.service-cards--grid .service-cards__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
	gap: 16px;
}

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

	.service-cards--slider .service-cards__list,
	.service-cards--grid .service-cards__list {
		display: flex;
		flex-direction: column;
		gap: 16px;
		overflow: visible;
		scroll-snap-type: none;
	}

	.service-cards--slider .service-cards__item { width: auto; }
	.service-cards__card { height: 250px; }
	.service-cards__arrows { display: none; }
}