/**
 * N-03 Tip BS — Governed visual card family chrome.
 * Depends on csn-ui base card layer. Does not rewire App Blocks.
 */

:root {
	--csn-ui-card-ratio-people: 1 / 1;
	--csn-ui-card-ratio-circle: 4 / 3;
	--csn-ui-card-ratio-city: 2 / 1;
	--csn-ui-card-ratio-event: 16 / 9;
	--csn-ui-card-ratio-pathway: 4 / 3;
	--csn-ui-card-ratio-project: 3 / 2;
	--csn-ui-card-ratio-devotional: 16 / 9;
	--csn-ui-card-ratio-sponsor: 3 / 2;
	--csn-ui-card-ratio-responsibility: 1 / 1;
	--csn-ui-card-ratio-membership: 4 / 3;
}

.csn-ui-card__reason {
	margin: 0.35rem 0 0;
	font-size: 0.85em;
	line-height: 1.35;
	color: var(--csn-ui-muted, #6b6560);
}

.csn-ui-card__progress {
	display: block;
	height: 0.25rem;
	margin: 0.5rem 0 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--csn-ui-gold, #c4a35a) 35%, transparent);
	overflow: hidden;
}

.csn-ui-card__progress > span {
	display: block;
	height: 100%;
	background: var(--csn-ui-gold, #c4a35a);
}

.csn-ui-card__media--avatar {
	aspect-ratio: var(--csn-ui-card-ratio-people);
	object-fit: cover;
}

.csn-ui-card__media--map {
	aspect-ratio: var(--csn-ui-card-ratio-city);
	object-fit: cover;
}

.csn-ui-card__media--chart,
.csn-ui-card__media--icon {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.csn-ui-card--people_introduction .csn-ui-card__media {
	aspect-ratio: var(--csn-ui-card-ratio-people);
}

.csn-ui-card--circle_community .csn-ui-card__media {
	aspect-ratio: var(--csn-ui-card-ratio-circle);
}

.csn-ui-card--city_local .csn-ui-card__media {
	aspect-ratio: var(--csn-ui-card-ratio-city);
}

.csn-ui-card--event_together_plan .csn-ui-card__media {
	aspect-ratio: var(--csn-ui-card-ratio-event);
}

.csn-ui-card--pathway_discoveries .csn-ui-card__media {
	aspect-ratio: var(--csn-ui-card-ratio-pathway);
}

.csn-ui-card--project_opportunity .csn-ui-card__media {
	aspect-ratio: var(--csn-ui-card-ratio-project);
}

.csn-ui-card--devotional_watch .csn-ui-card__media {
	aspect-ratio: var(--csn-ui-card-ratio-devotional);
}

.csn-ui-card--sponsor_impact .csn-ui-card__media {
	aspect-ratio: var(--csn-ui-card-ratio-sponsor);
}

.csn-ui-card--responsibility_alert {
	border-color: color-mix(in srgb, var(--csn-ui-danger, #b33) 35%, var(--csn-ui-border, #ddd));
}

.csn-ui-card--responsibility_alert .csn-ui-card__media {
	aspect-ratio: var(--csn-ui-card-ratio-responsibility);
}

.csn-ui-card--membership_benefit .csn-ui-card__media {
	aspect-ratio: var(--csn-ui-card-ratio-membership);
}

.csn-ui-card.is-skeleton .csn-ui-card__title,
.csn-ui-card.is-skeleton .csn-ui-card__meta,
.csn-ui-card.is-skeleton .csn-ui-card__reason {
	color: transparent;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--csn-ui-beige, #f0ebe3) 80%, #fff) 25%,
		color-mix(in srgb, var(--csn-ui-beige, #f0ebe3) 40%, #fff) 50%,
		color-mix(in srgb, var(--csn-ui-beige, #f0ebe3) 80%, #fff) 75%
	);
	background-size: 200% 100%;
	border-radius: 0.25rem;
}

.csn-ui-card.is-empty,
.csn-ui-card.is-unavailable,
.csn-ui-card.is-error {
	opacity: 0.92;
}

.csn-ui-card__media-fallback {
	display: block;
	width: 100%;
	aspect-ratio: inherit;
	min-height: 6rem;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--csn-ui-beige, #f0ebe3) 85%, #fff) 0%,
		color-mix(in srgb, var(--csn-ui-beige, #f0ebe3) 55%, var(--csn-ui-gold, #c4a35a)) 100%
	);
	border-radius: inherit;
}

@media (prefers-contrast: more) {
	.csn-ui-card {
		border-width: 2px;
		border-style: solid;
		border-color: currentColor;
	}

	.csn-ui-card__reason {
		color: inherit;
		font-weight: 600;
	}

	.csn-ui-card--responsibility_alert {
		outline: 2px solid currentColor;
	}
}