/**
 * Moduł: kafel usługi.
 * Figma: 238×292, tytuł 24/33,6 wyśrodkowany z marginesem 23.
 * Aktywny (14559:9704): gradient + cień 0 51px 62.1px -26px rgba(133,216,176,.37),
 * ikona #30ca81. Nieaktywne (14559:9536…): tło #f2f4f7 i rozmyta elipsa
 * 302×183 w prawym dolnym rogu (fill #30ca81 / 35%, blur 45).
 *
 * Ikony przychodzą jako maski alfa (DEV-08), więc kolor bierze się z tokenu,
 * nie z pliku PNG — jeden plik obsługuje kafel jasny i ciemny.
 * Rozmiar pudła = viewBox maski (91×88, 75×86, 85×85, 74×83, 107×106).
 */

.card-service {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 292px;
	padding: 23px 19px 28px;
	border-radius: var(--radius-sm);
	text-align: center;
	text-decoration: none;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card-service--tile {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* #f2f4f7 nie ma tokenu — literał z Figmy (14559:9536). */
	background-color: #f2f4f7;
	color: var(--color-ink);
}

/* Elipsa 14559:9547: pudło 302×183, right -140, bottom -80, blur stdDeviation 45. */
.card-service--tile::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -140px;
	bottom: -80px;
	width: 302px;
	height: 183px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--color-primary-bright) 35%, transparent);
	filter: blur(45px);
	pointer-events: none;
}

.card-service--tile-active {
	background: var(--gradient-tile-active);
	color: var(--color-white);
	box-shadow: 0 51px 62.1px -26px color-mix(in srgb, var(--color-border-mint-strong) 37%, transparent);
}

.card-service__title {
	margin: 0;
	max-width: 200px;
	font-family: var(--font-display);
	font-size: var(--fs-h5);
	font-weight: 400;
	line-height: var(--lh-h5);
	letter-spacing: var(--ls-heading);
}

.card-service--tile .card-service__title {
	color: var(--color-navy);
}

.card-service__excerpt {
	margin: var(--space-sm) 0 0;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body);
}

.card-service__icon {
	display: block;
	width: 96px;
	height: 92px;
	margin: auto 0 0;
	background-color: currentColor;
	mask-image: var(--card-service-icon);
	mask-repeat: no-repeat;
	mask-position: center bottom;
	mask-size: contain;
	-webkit-mask-image: var(--card-service-icon);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center bottom;
	-webkit-mask-size: contain;
}

.card-service--tile .card-service__icon {
	color: var(--color-primary);
}

.card-service--tile-active .card-service__icon {
	color: var(--color-primary-bright);
}

.card-service__icon[style*="icon-1-mask"] {
	width: 91px;
	height: 88px;
}

.card-service__icon[style*="icon-2-mask"] {
	width: 75px;
	height: 86px;
}

.card-service__icon[style*="icon-3-mask"] {
	width: 85px;
	height: 85px;
}

.card-service__icon[style*="icon-4-mask"] {
	width: 74px;
	height: 83px;
}

.card-service__icon[style*="icon-5-mask"] {
	width: 107px;
	height: 106px;
}

/* --- photo: karta usługi na listingu (Figma 14557:2989) ---
   Zdjęcie 360×400 u góry, pod nim tytuł 32/41,6 i link „Sprawdź ofertę ↗".
   Kolejność DOM zostaje (tytuł → opis → media), wizualną daje `order`,
   żeby wariant `tile` na home nie zmienił znaczników. */

.card-service--photo {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 0;
	padding: 0;
	background: none;
	color: var(--color-ink);
	text-align: left;
}

.card-service--photo .card-service__media {
	order: -1;
	margin: 0 0 20px;
	aspect-ratio: 9 / 10;
}

.card-service--photo .card-service__img {
	height: 100%;
}

.card-service--photo .card-service__title {
	max-width: none;
	padding-inline: var(--space-xs);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

.card-service--photo .card-service__excerpt {
	padding-inline: var(--space-xs);
	margin-top: 12px;
	color: var(--color-muted);
}

/* Kolor linku bierze się ze zmiennej, żeby sekcja mogła wyróżnić jedną kartę
   (makieta: „Dokumenty elektroniczne") bez wchodzenia w znaczniki modułu. */
.card-service--photo .card-service__action {
	margin-top: 25px;
	padding-inline: var(--space-xs);
}

.card-service--photo .card-service__action .btn--text {
	color: var(--card-service-link-color, var(--color-ink));
}

.card-service--photo .card-service__action .btn--text:hover {
	color: var(--color-primary-bright);
}

.card-service__media {
	display: block;
	width: 100%;
	margin: auto 0 0;
}

.card-service__img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	object-fit: cover;
}

a.card-service:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-tile);
}

a.card-service:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

a.card-service:active {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.card-service {
		transition: none;
	}

	a.card-service:hover {
		transform: none;
	}
}