/**
 * Moduł: karta wartości.
 * Figma: 551×310, wnętrze 511×270 z marginesem 20, nagłówek 32/38, opis 18/27
 * przyklejony do dołu karty, badge ikony 42×42 w prawym górnym rogu,
 * w tle trzy koncentryczne okręgi obcięte krawędzią karty.
 */

.card-value {
	position: relative;
	overflow: hidden;
	min-height: 310px;
	padding: 20px;
	border-radius: var(--radius-sm);
	isolation: isolate;
}

.card-value--dark {
	background-color: var(--color-navy-light);
	color: var(--color-white);
}

.card-value--light {
	background-color: var(--color-surface-soft);
	color: var(--color-ink);
}

/* Dekoracja (Figma 14557:2114): trzy pierścienie 316 px (#30ca81),
   wyśrodkowane w ramkach 447 px i obcięte górną krawędzią karty.
   Pozycje to lewy górny róg samego okręgu (ramka 447 minus (447−316)/2).
   2115: left 204.58 / top −157.19 → 270.06 / −91.71 (ciągły)
   2116: left 69.62 / top −292.14 → 135.10 / −226.66 (ciągły, ::before)
   2117: left 101.46 / top −189.02 → 166.94 / −123.54 (przerywany, ::after) */
.card-value--dark .card-value__glow {
	position: absolute;
	left: 270.06px;
	top: -91.71px;
	box-sizing: border-box;
	width: 316.16px;
	height: 316.16px;
	border: 1px solid var(--color-primary-bright);
	border-radius: 50%;
	pointer-events: none;
}

.card-value--dark .card-value__glow::before,
.card-value--dark .card-value__glow::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	width: 316.16px;
	height: 316.16px;
	border-radius: 50%;
}

.card-value--dark .card-value__glow::before {
	left: -134.96px;
	top: -134.95px;
	border: 1px solid var(--color-primary-bright);
}

.card-value--dark .card-value__glow::after {
	left: -103.12px;
	top: -31.83px;
	border: 1px dashed var(--color-primary-bright);
}

.card-value__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	min-height: 270px;
}

.card-value__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-md);
}

.card-value__title {
	margin: 0;
	max-width: 18ch;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--ls-heading);
}

.card-value__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-sm);
	background-color: var(--color-primary-bright);
}

.card-value__icon-img {
	width: 24px;
	height: 24px;
}

.card-value__text {
	margin: auto 0 0;
	max-width: 40ch;
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: var(--lh-body);
}