/* Solution card — Figma: Card (Three Ways 46:707 / Solutions 80:958) */
.solution-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(20px, 2.43vw, 35px);
	width: 100%;
}

.solution-card {
	display: flex;
	flex-direction: column;
}

.solution-card__image {
	width: 100%;
	height: 219px;
	object-fit: cover;
	border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.solution-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	min-height: 249px;
	padding: 30px 28px;
	border-radius: 0 0 var(--radius-card) var(--radius-card);
	background: var(--color-light);
}

/* On light sections the card body is the paler card colour */
.solution-card--soft .solution-card__body {
	background: var(--color-card);
}

.solution-card__heading {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.solution-card__label--amber { color: var(--color-primary); }
.solution-card__label--green { color: var(--color-secondary); }
.solution-card__label--dark { color: var(--color-dark); }

.solution-card__title {
	color: var(--color-dark);
}

.solution-card__text {
	color: var(--color-neutral-1);
}

.solution-card__btn {
	min-width: 215px;
}

/* Tablet: two columns (an odd last card leaves the second cell empty) */
@media (min-width: 768px) and (max-width: 1023px) {
	.solution-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.solution-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Whole card is clickable through the title link (same pattern as the resource card) */
.solution-card--link {
	position: relative;
}

.solution-card__link {
	color: inherit;
	text-decoration: none;
}

.solution-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-card);
}

.solution-card__link:focus-visible {
	outline: none;
}

.solution-card--link:has(.solution-card__link:focus-visible) {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: var(--radius-card);
}

.solution-card--link .solution-card__btn {
	position: relative;
	z-index: 1;
}

.solution-card--link .solution-card__image {
	transition: opacity var(--duration) var(--ease);
}

.solution-card--link:hover .solution-card__image {
	opacity: 0.9;
}

.solution-card--link:hover .solution-card__link {
	color: var(--color-secondary);
}