/*
 * Services: the heading and the grid of cards. Each card's look (style, icons, hover) is the
 * Service element's (service/style.css, "requires": ["service"], ADR 0026).
 */
.sv-services {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Space between cards (ADR 0054, 0187): the same between rows as between columns. */
	gap: var(--sv-colgap, var(--sv-space-element, var(--sv-space-md)));
}

.sv-services--columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sv-services--columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.sv-services--columns-3,
	.sv-services--columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.sv-services[class] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The room inside each card (ADR 0197): Numbers' boxes' room, the same for every card look. */
.sv-services__item:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary) {
	padding: var(--sv-space-sm) calc(var(--sv-space-sm) * 1.25);
}

/* Card height (ADR 0197, as Numbers' Box height): each card's least height. */
.sv-services--box-height-sm .sv-services__item {
	min-block-size: 16rem;
}

.sv-services--box-height-md .sv-services__item {
	min-block-size: 20rem;
}

.sv-services--box-height-lg .sv-services__item {
	min-block-size: 24rem;
}

.sv-services--box-height-custom .sv-services__item {
	min-block-size: var(--sv-custom-box-height);
}

/*
 * Vertical (ADR 0197, Numbers' Top · Middle · Bottom · Split): where each card's words sit in a card taller than them
 * (a Card height, or a taller card beside it). Top is the usual: the words from the top, the link at the bottom
 * (ADR 0098). Middle and Bottom keep the link under the words; Split puts the icon or number at the top and the
 * title, words and link at the bottom. Each choice sets every variable, so a tablet or phone choice replaces the
 * desktop's; not set = Top.
 */
.sv-services .sv-services__item:not(.sv-service--arrange-row) {
	justify-content: var(--sv-features-place, flex-start);
}

.sv-services .sv-services__item:not(.sv-service--arrange-row) > .sv-service__link:not(.sv-service__link--silent) {
	margin-block-start: var(--sv-features-link, auto);
}

.sv-services .sv-services__item > .sv-service__title {
	margin-block-start: var(--sv-features-title, 0);
}

/* Side by side: the same through the card's rows (the icon spans them, at their top). */
.sv-services .sv-services__item.sv-service--arrange-row {
	grid-template-rows: var(--sv-features-rows, auto auto 1fr);
	align-content: var(--sv-features-place, start);
}

.sv-services.sv-valign-start {
	--sv-features-place: flex-start;
	--sv-features-link: auto;
	--sv-features-title: 0;
	--sv-features-rows: auto auto 1fr;
}

.sv-services.sv-valign-center {
	--sv-features-place: center;
	--sv-features-link: 0.25rem;
	--sv-features-title: 0;
	--sv-features-rows: auto auto auto;
}

.sv-services.sv-valign-end {
	--sv-features-place: flex-end;
	--sv-features-link: 0.25rem;
	--sv-features-title: 0;
	--sv-features-rows: auto auto auto;
}

.sv-services.sv-valign-between {
	--sv-features-place: flex-start;
	--sv-features-link: 0.25rem;
	--sv-features-title: auto;
	--sv-features-rows: 1fr auto auto;
}

@media (max-width: 1024px) {
	.sv-services.sv-t-valign-start {
		--sv-features-place: flex-start;
		--sv-features-link: auto;
		--sv-features-title: 0;
		--sv-features-rows: auto auto 1fr;
	}

	.sv-services.sv-t-valign-center {
		--sv-features-place: center;
		--sv-features-link: 0.25rem;
		--sv-features-title: 0;
		--sv-features-rows: auto auto auto;
	}

	.sv-services.sv-t-valign-end {
		--sv-features-place: flex-end;
		--sv-features-link: 0.25rem;
		--sv-features-title: 0;
		--sv-features-rows: auto auto auto;
	}

	.sv-services.sv-t-valign-between {
		--sv-features-place: flex-start;
		--sv-features-link: 0.25rem;
		--sv-features-title: auto;
		--sv-features-rows: 1fr auto auto;
	}
}

@media (max-width: 767px) {
	.sv-services.sv-m-valign-start {
		--sv-features-place: flex-start;
		--sv-features-link: auto;
		--sv-features-title: 0;
		--sv-features-rows: auto auto 1fr;
	}

	.sv-services.sv-m-valign-center {
		--sv-features-place: center;
		--sv-features-link: 0.25rem;
		--sv-features-title: 0;
		--sv-features-rows: auto auto auto;
	}

	.sv-services.sv-m-valign-end {
		--sv-features-place: flex-end;
		--sv-features-link: 0.25rem;
		--sv-features-title: 0;
		--sv-features-rows: auto auto auto;
	}

	.sv-services.sv-m-valign-between {
		--sv-features-place: flex-start;
		--sv-features-link: 0.25rem;
		--sv-features-title: auto;
		--sv-features-rows: 1fr auto auto;
	}
}

/*
 * Carousel (ADR 0047, motion/style.css): as many cards in view as the columns on each screen size;
 * on phones one card and a glimpse of the next, so visitors see they can slide.
 */
.sv-services .sv-carousel {
	--sv-carousel-per: 3;
}

.sv-services--columns-2 .sv-carousel {
	--sv-carousel-per: 2;
}

.sv-services--columns-4 .sv-carousel {
	--sv-carousel-per: 4;
}

@media (max-width: 1024px) {
	:is(.sv-services--columns-3, .sv-services--columns-4) .sv-carousel {
		--sv-carousel-per: 2;
	}
}

@media (max-width: 767px) {
	.sv-services .sv-carousel[class] {
		--sv-carousel-per: 1.15;
	}
}