/*
 * Shared placeholder-media styling. aspegon_media() (inc/helpers.php) renders
 * a .aspegon-media element that either wraps a real <img> or gets the
 * .is-placeholder class with a data-gradient value from the image registry.
 * Real photos and placeholders share the same box so layout never shifts
 * once a real file is dropped into assets/images/.
 */

.aspegon-media {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.aspegon-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aspegon-media.is-placeholder {
	background-color: var(--color-navy);
}

.aspegon-media.is-placeholder[data-gradient="teal-dark"] {
	background:
		radial-gradient(circle at 25% 25%, rgba(var(--color-teal-rgb), 0.55) 0%, transparent 45%),
		radial-gradient(circle at 75% 70%, rgba(var(--color-teal-rgb), 0.35) 0%, transparent 50%),
		linear-gradient(135deg, #0F1720 0%, #182634 100%);
}

.aspegon-media.is-placeholder[data-gradient="warm"] {
	background:
		radial-gradient(circle at 30% 30%, rgba(214, 158, 92, 0.35) 0%, transparent 45%),
		radial-gradient(circle at 70% 75%, rgba(180, 130, 70, 0.25) 0%, transparent 50%),
		linear-gradient(135deg, #2A2420 0%, #3A322A 100%);
}