/**
 * AS Num Card — grain SVG default, solid sharpened on hover.
 */

.as-num-card {
	--as-num-card-bg: var(--as-btn-primary-bg, #ff6154);
	--as-num-card-pad: 32px;
	--as-num-card-min-h: 320px;
	--as-num-card-radius: 16px;
	--as-num-card-bleed: 20px;
	--as-num-card-title-size: 48px;
	--as-num-card-subtitle-size: 20px;
	--as-num-card-desc-size: 16px;
	--as-num-card-gap-main: 48px;
	--as-num-card-gap-meta: 8px;
	--as-num-card-bg-transition: 0.28s ease;

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	min-height: var(--as-num-card-min-h);
	padding: var(--as-num-card-pad);
	position: relative;
	width: 100%;
}

.as-num-card__bg {
	border-radius: var(--as-num-card-radius);
	pointer-events: none;
	position: absolute;
	transition: opacity var(--as-num-card-bg-transition);
}

.as-num-card__bg--grain {
	height: calc(100% + (var(--as-num-card-bleed) * 2));
	left: calc(var(--as-num-card-bleed) * -1);
	opacity: 1;
	top: calc(var(--as-num-card-bleed) * -1);
	width: calc(100% + (var(--as-num-card-bleed) * 2));
}

.as-num-card__grain-svg {
	display: block;
	height: 100%;
	width: 100%;
}

.as-num-card__bg--solid {
	background-color: var(--as-num-card-bg);
	inset: 0;
	opacity: 0;
}

.as-num-card__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--as-num-card-gap-main);
	justify-content: space-between;
	min-height: calc(var(--as-num-card-min-h) - (var(--as-num-card-pad) * 2));
	position: relative;
	z-index: 1;
}

.as-num-card__title {
	color: #ffffff;
	font-family: inherit;
	font-size: clamp(32px, 5vw, var(--as-num-card-title-size)) !important;
	font-weight: 600 !important;
	letter-spacing: -0.03em;
	line-height: 1.3 !important;
	margin: 0;
	min-height: 124px;
	word-break: break-word;
}

.as-num-card__meta {
	display: flex;
	flex-direction: column;
	gap: var(--as-num-card-gap-meta);
}

.as-num-card__subtitle {
	color: #ffffff;
	font-family: inherit;
	font-size: var(--as-num-card-subtitle-size) !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	margin: 0;
	padding-bottom: 0 !important;
}

.as-num-card__description {
	color: #ffffff;
	font-family: inherit;
	font-size: var(--as-num-card-desc-size) !important;
	font-weight: 400 !important;
	letter-spacing: -0.01em;
	line-height: 1.5 !important;
	margin: 0;
	opacity: 0.95;
}

@media (hover: hover) {
	.as-num-card:hover .as-num-card__bg--grain,
	.as-num-card:focus-within .as-num-card__bg--grain {
		opacity: 0;
	}

	.as-num-card:hover .as-num-card__bg--solid,
	.as-num-card:focus-within .as-num-card__bg--solid {
		opacity: 1;
	}
}

@media (hover: none) {
	.as-num-card__bg--grain {
		opacity: 0;
	}

	.as-num-card__bg--solid {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.as-num-card__bg {
		transition-duration: 0.01ms;
	}

	.as-num-card__bg--grain {
		opacity: 0;
	}

	.as-num-card__bg--solid {
		opacity: 1;
	}
}

@media (max-width: 999px) {
	.as-num-card {
		--as-num-card-pad: 24px;
		--as-num-card-min-h: 280px;
		--as-num-card-gap-main: 32px;
	}
}