/*
 * Service (ADR 0048): a photo card in one of seven arrangements, with an optional number in the size
 * and color its arrangement gives it (no size setting). The card's box, corners and hover are a
 * column's (sv-card-*, sv-round-*, sv-cardhover-*). On the photo arrangements "Accent color" tints
 * the photo or fills the white box instead of the card. A linked card shows the Image element's
 * arrow (image/style.css): white, when pointed at; on Text only always, in the accent color.
 */
/* Height Fill unless set (ADR 0098): cards side by side are as tall as each other. */
:where(.sv-service-card) {
	--sv-col-grow: 1;
	--sv-h-self: stretch;
}

.sv-service-card {
	--sv-service-card-inset: 0.4rem;
	--sv-service-card-radius: var(--sv-radius-md);
	--sv-service-card-pale: color-mix(in srgb, var(--sv-accent, var(--sv-color-primary)) 24%, transparent);
	position: relative;
	display: grid;
	grid-template-areas: "media media" "body number";
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: start;
	margin: 0;
	isolation: isolate;
}

.sv-service-card.sv-round-none {
	--sv-service-card-radius: 0px;
}

.sv-service-card.sv-round-sm {
	--sv-service-card-radius: var(--sv-radius-sm);
}

.sv-service-card:is(.sv-round-lg, .sv-round-full) {
	--sv-service-card-radius: var(--sv-radius-lg);
}

.sv-service-card.sv-round-custom {
	--sv-service-card-radius: var(--sv-custom-round);
}

.sv-service-card__media {
	position: relative;
	grid-area: media;
	overflow: hidden;
	border-radius: max(0px, calc(var(--sv-service-card-radius) - var(--sv-service-card-inset)));
	background-color: var(--sv-color-surface);
	aspect-ratio: 6 / 5;
}

/* No photo yet on the site: no empty frame (the editor shows its "choose an image" box). */
.sv-service-card__media:empty {
	display: none;
}

.sv-service-card__photo {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	object-fit: cover;
}

/* The accent tint some arrangements put over the photo when pointed at. */
.sv-service-card__media::after {
	position: absolute;
	inset: 0;
	background-color: var(--sv-color-primary);
	content: "";
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.sv-service-card__number {
	grid-area: number;
	align-self: start;
	margin-inline-start: 1rem;
	color: var(--sv-accent, var(--sv-color-link));
	font-family: var(--sv-font-heading);
	font-weight: 400;
	font-synthesis-weight: none;
	letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1));
	font-size: var(--sv-size-h3);
	line-height: 1;
	unicode-bidi: isolate;
	transition: color 0.25s ease;
}

.sv-service-card__body {
	display: grid;
	grid-area: body;
	gap: 0.5rem;
	align-content: start;
	min-inline-size: 0;
}

.sv-service-card__title {
	margin: 0;
	color: var(--sv-color-text);
	font-family: var(--sv-font-heading);
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1));
	font-size: var(--sv-size-h4);
	line-height: calc(1.3 * var(--sv-leading, 1));
}

/* Title size (ADR 0052): Medium is a Heading 4's size, as on Feature and Team member. */
.sv-service-card--title-size-sm .sv-service-card__title {
	font-size: calc(var(--sv-size-body) * 1.1);
}

.sv-service-card--title-size-lg .sv-service-card__title {
	font-size: var(--sv-size-h3);
	line-height: calc(1.2 * var(--sv-leading, 1));
}

.sv-service-card--title-size-xl .sv-service-card__title {
	font-size: var(--sv-size-h2);
	line-height: calc(1.15 * var(--sv-leading, 1));
}

.sv-service-card__text {
	margin: 0;
	color: var(--sv-color-muted);
	font-size: var(--sv-size-small);
}

/* Text only: a large pale number at the top, the text under it; no photo. */
.sv-service-card--look-text {
	grid-template-areas: "number" "body";
	grid-template-columns: minmax(0, 1fr);
	row-gap: 1rem;
}

.sv-service-card--look-text .sv-service-card__media {
	display: none;
}

.sv-service-card--look-text .sv-service-card__number {
	margin: 0;
	color: var(--sv-service-card-pale);
	font-weight: 300;
	font-size: var(--sv-size-display);
}

/* Photo above, open: the photo, then the title with the number beside it; no card. */
.sv-service-card.sv-service-card--look-top-open[class] {
	--sv-service-card-inset: 0px;
	row-gap: 1rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* Photo above, in a card: the photo just inside the card's edge, the text under it. */
.sv-service-card.sv-service-card--look-top-card[class] {
	row-gap: 1rem;
	margin: 0;
	padding: var(--sv-service-card-inset) var(--sv-service-card-inset) 1.25rem;
}

/* Photo below: the text at the top, the photo just inside the card's lower edge. */
.sv-service-card.sv-service-card--look-bottom[class] {
	grid-template-areas: "body number" "media media";
	grid-template-rows: 1fr auto;
	row-gap: 1.25rem;
	margin: 0;
	padding: 1.25rem var(--sv-service-card-inset) var(--sv-service-card-inset);
}

:is(.sv-service-card--look-top-card, .sv-service-card--look-bottom) :is(.sv-service-card__body, .sv-service-card__number) {
	padding-inline: 0.85rem;
}

:is(.sv-service-card--look-top-card, .sv-service-card--look-bottom) .sv-service-card__number {
	margin: 0;
	padding-inline-start: 0;
}

/*
 * Shape: the photo's, or on the photo arrangements the whole card's (Side by side: the photo's, which
 * sets the card's height). Automatic is each arrangement's own (a 6:5 photo, a 4:5 card).
 */
.sv-service-card--shape-square {
	--sv-service-card-shape: 1 / 1;
}

.sv-service-card--shape-landscape {
	--sv-service-card-shape: 4 / 3;
}

.sv-service-card--shape-wide {
	--sv-service-card-shape: 16 / 9;
}

.sv-service-card--shape-portrait {
	--sv-service-card-shape: 3 / 4;
}

:is(.sv-service-card--shape-square, .sv-service-card--shape-landscape, .sv-service-card--shape-wide, .sv-service-card--shape-portrait):not(.sv-service-card--look-overlay-box, .sv-service-card--look-overlay-shade) .sv-service-card__media {
	aspect-ratio: var(--sv-service-card-shape);
}

/* On the photo: the photo fills the card; the text sits in a white box, or on a dark shade. */
.sv-service-card.sv-service-card[class]:is(.sv-service-card--look-overlay-box, .sv-service-card--look-overlay-shade) {
	grid-template-areas: "number" "." "body";
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--sv-service-card-radius);
	background-color: var(--sv-color-inverse);
	box-shadow: none;
	aspect-ratio: 4 / 5;
}

:is(.sv-service-card--look-overlay-box, .sv-service-card--look-overlay-shade) .sv-service-card__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 0;
	background-color: transparent;
	aspect-ratio: auto;
}

.sv-service-card--look-overlay-box .sv-service-card__number {
	margin: 1rem 1.15rem;
	color: rgb(255 255 255 / 62%);
}

.sv-service-card--look-overlay-box .sv-service-card__body {
	--sv-color-text: var(--sv-ink);
	--sv-color-muted: var(--sv-ink-muted);
	margin: var(--sv-service-card-inset);
	padding: 1rem 1.1rem 1.1rem;
	border-radius: max(0px, calc(var(--sv-service-card-radius) - var(--sv-service-card-inset)));
	background-color: var(--sv-color-background);
	transition: background-color 0.25s ease;
}

.sv-service-card.sv-service-card[class].sv-service-card--look-overlay-shade {
	grid-template-areas: "." "number" "body";
	grid-template-rows: 1fr auto auto;
	row-gap: 0.4rem;
}

.sv-service-card--look-overlay-shade .sv-service-card__media::before {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgb(0 0 0 / 82%) 0%, rgb(0 0 0 / 48%) 32%, rgb(0 0 0 / 0%) 62%);
	content: "";
	transition: opacity 0.3s ease;
}

.sv-service-card--look-overlay-shade :is(.sv-service-card__number, .sv-service-card__body) {
	--sv-color-text: #fff;
	--sv-color-muted: rgb(255 255 255 / 84%);
	padding-inline: 1.4rem;
}

.sv-service-card--look-overlay-shade .sv-service-card__number {
	margin: 0;
	color: color-mix(in oklab, var(--sv-color-primary) 72%, #fff);
	font-size: calc(var(--sv-size-h4) * 1.15);
}

.sv-service-card--look-overlay-shade .sv-service-card__body {
	padding-block-end: 1.4rem;
}

.sv-service-card.sv-service-card[class]:is(.sv-service-card--look-overlay-box, .sv-service-card--look-overlay-shade):is(.sv-service-card--shape-square, .sv-service-card--shape-landscape, .sv-service-card--shape-wide, .sv-service-card--shape-portrait) {
	aspect-ratio: var(--sv-service-card-shape);
}

/* Side by side: a large pale number, the text, and the photo at the end; on phones the photo on top. */
.sv-service-card.sv-service-card--look-side[class] {
	grid-template-areas: "number body media";
	grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.85fr);
	align-items: center;
	column-gap: 1.5rem;
	margin: 0;
	padding: var(--sv-service-card-inset);
	padding-inline-start: 1.5rem;
}

.sv-service-card.sv-service-card--look-side:not(:has(.sv-service-card__number)) {
	grid-template-areas: "body media";
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
}

.sv-service-card--look-side .sv-service-card__media {
	align-self: stretch;
	min-block-size: 8.5rem;
	aspect-ratio: auto;
}

/* With a shape, the photo keeps it and the card follows its height. */
.sv-service-card--look-side:is(.sv-service-card--shape-square, .sv-service-card--shape-landscape, .sv-service-card--shape-wide, .sv-service-card--shape-portrait) .sv-service-card__media {
	align-self: center;
	min-block-size: 0;
}

/* The photo fills the card's height, whatever its own shape. */
.sv-service-card--look-side .sv-service-card__photo {
	position: absolute;
	inset: 0;
}

.sv-service-card--look-side .sv-service-card__number {
	align-self: center;
	margin: 0;
	color: var(--sv-service-card-pale);
	font-weight: 300;
	font-size: var(--sv-size-h1);
}

@media (max-width: 767px) {
	.sv-service-card.sv-service-card--look-side[class] {
		grid-template-areas: "media media" "number body";
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: 1rem;
		padding: var(--sv-service-card-inset) var(--sv-service-card-inset) 1.25rem;
	}

	.sv-service-card.sv-service-card--look-side[class]:not(:has(.sv-service-card__number)) {
		grid-template-areas: "media" "body";
		grid-template-columns: minmax(0, 1fr);
	}

	.sv-service-card--look-side :is(.sv-service-card__number, .sv-service-card__body) {
		padding-inline: 0.85rem 0;
	}

	.sv-service-card--look-side .sv-service-card__media {
		aspect-ratio: 6 / 5;
	}
}

/*
 * "Accent color" when pointed at: the card arrangements fill with it (the column's hover); the
 * photo arrangements keep their own colors and tint the photo, or fill the white box.
 */
:is(.sv-service-card--look-top-open, .sv-service-card--look-overlay-box, .sv-service-card--look-overlay-shade):is(.sv-cardhover-primary, .sv-cardhover-secondary):is(:hover, :focus-within) {
	--sv-color-text: inherit;
	--sv-color-muted: inherit;
	--sv-accent: inherit;
	--sv-accent-dark: inherit;
	--sv-button-main-bg: inherit;
	--sv-button-main-text: inherit;
	color: inherit;
}

.sv-service-card--look-top-open:is(.sv-cardhover-primary, .sv-cardhover-secondary):is(:hover, :focus-within) {
	background-color: transparent;
}

.sv-service-card.sv-service-card[class]:is(.sv-service-card--look-overlay-box, .sv-service-card--look-overlay-shade):is(.sv-cardhover-primary, .sv-cardhover-secondary):is(:hover, :focus-within) {
	background-color: var(--sv-color-inverse);
}

:is(.sv-service-card--look-top-open, .sv-service-card--look-overlay-shade).sv-cardhover-primary:is(:hover, :focus-within) .sv-service-card__media::after {
	opacity: 0.5;
}

.sv-service-card--look-overlay-shade.sv-cardhover-primary:is(:hover, :focus-within) .sv-service-card__media::after {
	opacity: 0.62;
}

.sv-service-card--look-overlay-shade.sv-cardhover-primary:is(:hover, :focus-within) .sv-service-card__media::before {
	opacity: 0.35;
}

.sv-service-card--look-overlay-shade.sv-cardhover-primary:is(:hover, :focus-within) .sv-service-card__number {
	color: #fff;
}

.sv-service-card--look-overlay-box.sv-cardhover-primary:is(:hover, :focus-within) .sv-service-card__body {
	--sv-color-text: var(--sv-color-on-primary);
	--sv-color-muted: var(--sv-color-on-primary);
	background-color: var(--sv-color-primary);
}

/* In a card filled with the accent, a number in the accent turns pale white. */
:is(.sv-service-card--look-top-card, .sv-service-card--look-bottom).sv-cardhover-primary:is(:hover, :focus-within) .sv-service-card__number {
	color: color-mix(in srgb, var(--sv-color-on-primary) 80%, transparent);
}

/* Shadow, on the open arrangement: the photo lifts, not the empty space around the text. */
.sv-service-card.sv-service-card--look-top-open.sv-cardhover-lift:is(:hover, :focus-within) {
	box-shadow: none;
}

.sv-service-card__media {
	transition: box-shadow 0.25s ease;
}

.sv-service-card--look-top-open.sv-cardhover-lift:is(:hover, :focus-within) .sv-service-card__media {
	box-shadow: 0 18px 40px -16px rgb(16 24 40 / 35%);
}

/*
 * The whole card as a link, laid over it (out of the card's grid, so it adds no row); its title is
 * read by screen readers.
 */
.sv-service-card__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: var(--sv-service-card-radius);
}

.sv-service-card__link:focus-visible {
	outline: 2px solid var(--sv-focus, var(--sv-color-text));
	outline-offset: 3px;
}

.sv-service-card__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The arrow: on the photo's top corner (below it, at the bottom corner), shown when pointed at. */
.sv-service-card .sv-service-card__arrow {
	z-index: 2;
	border-color: #fff;
	background-color: #fff;
	box-shadow: 0 4px 14px rgb(0 0 0 / 14%);
	color: var(--sv-color-primary);
	opacity: 0;
	backdrop-filter: none;
	scale: 0.85;
	transition: opacity 0.3s ease, scale 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.sv-service-card:is(:hover, :focus-within) .sv-service-card__arrow {
	opacity: 1;
	scale: 1;
}

.sv-service-card:is(:hover, :focus-within) .sv-service-card__arrow::before {
	translate: 0.1rem -0.1rem;
}

[dir="rtl"] .sv-service-card:is(:hover, :focus-within) .sv-service-card__arrow::before {
	translate: -0.1rem -0.1rem;
}

.sv-service-card--look-top-card .sv-service-card__arrow {
	inset-block-start: calc(var(--sv-service-card-inset) + 0.75rem);
	inset-inline-end: calc(var(--sv-service-card-inset) + 0.75rem);
}

:is(.sv-service-card--look-bottom, .sv-service-card--look-side) .sv-service-card__arrow {
	inset-block: auto calc(var(--sv-service-card-inset) + 0.75rem);
	inset-inline-end: calc(var(--sv-service-card-inset) + 0.75rem);
}

/* Text only: the arrow always shows, filled with the accent; white when the card fills with it. */
.sv-service-card--look-text .sv-service-card__arrow {
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-color: var(--sv-color-primary);
	background-color: var(--sv-color-primary);
	box-shadow: none;
	color: var(--sv-color-on-primary);
	opacity: 1;
	scale: 1;
}

.sv-service-card--look-text.sv-cardhover-primary:is(:hover, :focus-within) .sv-service-card__arrow {
	border-color: var(--sv-color-on-primary);
	background-color: var(--sv-color-on-primary);
	color: var(--sv-color-primary);
}

@media (prefers-reduced-motion: reduce) {
	.sv-service-card :is(.sv-service-card__media, .sv-service-card__media::after, .sv-service-card__media::before, .sv-service-card__body, .sv-service-card__number, .sv-service-card__arrow) {
		transition: none;
	}
}