/* Services hub S15: ServiceCard drawings, goal chooser, four steps (COMPONENTS 14). Plate, pbar, part, pfoot and go live in ui-showcase.css. */

[data-s="sw"] {
	--pa: var(--blue-500);
	--pt: var(--blue-300);
}

[data-s="mk"] {
	--pa: var(--gold-500);
	--pt: var(--gold-300);
}

[data-s="sc"] {
	--pa: var(--svc-teal);
	--pt: var(--svc-teal-t);
}

[data-s="sa"] {
	--pa: var(--svc-violet);
	--pt: var(--svc-violet-t);
}

[data-s="th"] {
	--pa: var(--svc-pink);
	--pt: var(--svc-pink-t);
}

[data-s="ds"] {
	--pa: var(--svc-coral);
	--pt: var(--svc-coral-t);
}

[data-s="av"] {
	--pa: var(--svc-lime);
	--pt: var(--svc-lime-t);
}

[data-s="ai"] {
	--pa: var(--svc-green);
	--pt: var(--svc-green-t);
}

[data-s="co"] {
	--pa: var(--gray-600);
	--pt: var(--gray-100);
}

[data-s="g"] {
	--pa: var(--blue-500);
	--pt: var(--gold-300);
}

/* ---------- cards ---------- */
.pcat {
	padding-block: var(--sp-48) var(--sec);
}

.sgrp + .sgrp {
	margin-block-start: var(--sp-64);
}

.sgh {
	margin: 0 0 var(--sp-16);
	font-size: var(--fs-s);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--acc-t);
}

.pgrid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.pgrid > .s7 {
	grid-column: span 7;
}

.pgrid > .s6 {
	grid-column: span 6;
}

.pgrid > .s5 {
	grid-column: span 5;
}

.pgrid > .s12 {
	grid-column: 1 / -1;
}

.scard {
	min-width: 0;
}

.scard:hover,
.scard:focus-within {
	border-color: var(--pt);
}

.scard .part {
	block-size: clamp(220px, 22vw, 310px);
	place-items: center;
	padding: 14px;
	background: radial-gradient(60% 70% at 50% 50%, color-mix(in srgb, var(--pa) 14%, transparent), transparent 70%);
}

.scard .pbar .tag {
	border-color: var(--pa);
	color: var(--pt);
}

.scard .pfoot {
	align-content: start;
	gap: 8px;
}

.scard .pfoot h3 strong {
	font-weight: 800;
}

.scard .go {
	color: var(--pt);
}

.sl {
	list-style: none;
	display: grid;
	gap: 6px;
	margin: 6px 0 0;
	padding: 0;
	color: var(--gray-300);
	font-size: 14.5px;
}

.sl li {
	display: flex;
	gap: 10px;
	align-items: baseline;
}

.sl li::before {
	content: "";
	flex: none;
	inline-size: 10px;
	block-size: var(--hairline);
	background: var(--pt);
	transform: translateY(-4px);
}

.scard.wide {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
}

.scard.wide .pbar {
	grid-column: 1 / -1;
}

.scard.wide .part {
	block-size: auto;
	min-block-size: clamp(240px, 24vw, 320px);
}

.scard.wide .pfoot {
	align-content: center;
	border-block-start: 0;
	border-inline-start: var(--hairline) solid var(--ln);
}

@media (max-width: 1000px) {
	.pgrid {
		grid-template-columns: 1fr;
	}

	.pgrid > * {
		grid-column: auto !important;
	}

	.scard.wide {
		grid-template-columns: 1fr;
	}

	.scard.wide .pfoot {
		border-inline-start: 0;
		border-block-start: var(--hairline) solid var(--ln);
	}
}