/* S04 card grid, shared card and the "service" variant. */

/* stylelint-disable no-descending-specificity -- section rules are grouped by section, not by specificity */

.nbt-card-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--grid-gap);
	margin-block-start: var(--space-10);
}

.nbt-card {
	--nbt-card-pad: var(--space-6);

	position: relative;
	display: grid;
	align-content: start;
	gap: var(--space-3);
	padding: var(--nbt-card-pad);
	border: var(--border);
	border-radius: var(--radius-sm);
	background: var(--c-paper);
	transition: border-color var(--dur-1) var(--ease-standard), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.nbt-card > * {
	margin: 0;
}

/* Icon tile: two pseudo elements, the mask would clip the background. */
.nbt-card[class*="nbt-i-"]::before {
	content: "";
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	background: var(--c-brand-tint);
	transition: background-color var(--dur-1) var(--ease-standard);
}

.nbt-card[class*="nbt-i-"]::after {
	content: "";
	position: absolute;
	top: calc(var(--nbt-card-pad) + 12px);
	left: calc(var(--nbt-card-pad) + 12px);
	width: 32px;
	height: 32px;
	background: var(--c-brand);
	mask: var(--nbt-icon) center / contain no-repeat;
	transition: background-color var(--dur-1) var(--ease-standard);
}

.nbt-card-title {
	font-size: var(--text-xl);
	font-weight: 600;
}

.nbt-card-title a {
	color: var(--c-ink);
	text-decoration: none;
}

/* The whole card is the link: one tab stop per card. */
.nbt-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* One ring per card: it is drawn on the stretched ::after, so the link's own outline is switched off. */
.nbt-card-title a:focus-visible {
	outline: none;
}

.nbt-card-title a:focus-visible::after {
	outline: 3px solid var(--c-focus);
	outline-offset: 3px;
}

.nbt-card-text {
	color: var(--c-ink-2);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.nbt-card-more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--c-brand);
	font-weight: 600;
}

.nbt-card-more::after {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentcolor;
	mask: url(../icons/arrow-right.svg) center / contain no-repeat;
	transition: transform var(--dur-2) var(--ease-out);
}

@media (hover: hover) {

	.nbt-card:has(.nbt-card-title a):hover {
		border-color: var(--c-brand);
		box-shadow: var(--shadow-2);
		transform: translateY(-2px);
	}

	.nbt-card[class*="nbt-i-"]:has(.nbt-card-title a):hover::before {
		background: var(--c-brand);
	}

	.nbt-card[class*="nbt-i-"]:has(.nbt-card-title a):hover::after {
		background: #fff;
	}

	.nbt-card:hover .nbt-card-more::after {
		transform: translateX(4px);
	}
}

@media (min-width: 48rem) {

	.nbt-card {
		--nbt-card-pad: var(--space-8);
	}

	.nbt-card-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {

	.nbt-card-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}