/**
 * Custom Image Component
 *
 * @package Celeste_Theme
 */

 .celeste-image {
	display: block;
	width: 100%;
	position: relative;
}

.celeste-image--align-left {
	text-align: left;
}

.celeste-image--align-center {
	text-align: center;
}

.celeste-image--align-right {
	text-align: right;
}

.celeste-image__inner {
	display: block;
}

.celeste-image__inner > a {
	display: block;
	max-width: 100%;
}

.celeste-image-wrapper {
	aspect-ratio: var(--c-img-aspect-desktop, auto);
	overflow: hidden;
	position: relative;
	display: inline-block;
	max-width: 100%;
	width: var(--c-img-width, max-content);
	height: var(--c-img-height, auto);
}

.celeste-image-wrapper picture {
	display: block;
}

.celeste-image-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--c-img-fit, cover);
	object-position: var(--c-img-pos, 50% 50%);
}

.celeste-image-wrapper--native-ratio img {
	width: auto;
	max-width: 100%;
	height: auto;
}

/* SVG-specific rendering: preserve aspect ratio and prevent distortion */
.celeste-image-wrapper img[src$=".svg"],
.celeste-image-wrapper img[src*=".svg?"],
.celeste-image-wrapper img[src*=".svg#"] {
	height: auto;
	max-height: 100%;
	width: auto;
}

/* When wrapper has explicit dimensions set via custom sizing */
.celeste-image-wrapper[style*="width"] img[src$=".svg"],
.celeste-image-wrapper[style*="width"] img[src*=".svg?"],
.celeste-image-wrapper[style*="width"] img[src*=".svg#"] {
	width: 100%;
	height: auto;
}

.celeste-image-wrapper[style*="height"] img[src$=".svg"],
.celeste-image-wrapper[style*="height"] img[src*=".svg?"],
.celeste-image-wrapper[style*="height"] img[src*=".svg#"] {
	height: 100%;
	width: auto;
}

.celeste-image-wrapper[style*="width"][style*="height"] img[src$=".svg"],
.celeste-image-wrapper[style*="width"][style*="height"] img[src*=".svg?"],
.celeste-image-wrapper[style*="width"][style*="height"] img[src*=".svg#"] {
	width: 100%;
	height: 100%;
}

.celeste-image-wrapper--forced-ratio img[src$=".svg"],
.celeste-image-wrapper--forced-ratio img[src*=".svg?"],
.celeste-image-wrapper--forced-ratio img[src*=".svg#"] {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.celeste-image-wrapper--forced-ratio picture {
	display: block;
	width: 100%;
	height: 100%;
}

.celeste-image-wrapper--forced-ratio img {
	width: 100%;
	height: 100%;
}

.celeste-image__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	pointer-events: none; /* Clicks pass through to the image/link below */
}

.celeste-image-title,
.celeste-image-caption {
	display: block;
	width: 100%;
}

.celeste-image-title + .celeste-image__inner,
.celeste-image-caption + .celeste-image__inner {
	margin-top: 0.75rem;
}

.celeste-image__inner + .celeste-image-title,
.celeste-image__inner + .celeste-image-caption {
	margin-top: 0.75rem;
}

.celeste-image--style-rounded .celeste-image-wrapper {
	border-radius: 8px;
}

.celeste-image--style-border .celeste-image-wrapper {
	border: 2px solid #000;
}

.celeste-image--style-outline .celeste-image-wrapper {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.celeste-image--style-shadow .celeste-image-wrapper {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.celeste-image--style-border-shadow .celeste-image-wrapper {
	border: 2px solid #000;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.celeste-image--style-3d-shadow .celeste-image-wrapper {
	box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
}

.celeste-image--style-circle .celeste-image-wrapper {
	border-radius: 50%;
}

.celeste-image--style-circle-border .celeste-image-wrapper {
	border-radius: 50%;
	border: 2px solid #000;
}

.celeste-image--style-circle-outline .celeste-image-wrapper {
	border-radius: 50%;
	outline: 2px solid #000;
	outline-offset: 2px;
}

.celeste-image--style-circle-shadow .celeste-image-wrapper {
	border-radius: 50%;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.celeste-image--style-circle-border-shadow .celeste-image-wrapper {
	border-radius: 50%;
	border: 2px solid #000;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Force GPU compositing layer for parallax images */
.celeste-image--parallax-vertical .celeste-image-wrapper img,
.celeste-image--parallax-horizontal .celeste-image-wrapper img {
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Use translate3d to bypass CPU rendering on scrollbar scrub. Translate MUST precede Scale. */
/* 20% multiplier limits max travel to 10% of the image size per unit of speed. */
.celeste-image--parallax-vertical .celeste-image-wrapper img {
	transform: translate3d(0, calc((var(--scroll-progress, 0) - 0.5) * var(--c-img-parallax-speed, -1) * 20%), 0) scale(var(--c-img-scale, 1.1));
}

.celeste-image--parallax-horizontal .celeste-image-wrapper img {
	transform: translate3d(calc((var(--scroll-progress, 0) - 0.5) * var(--c-img-parallax-speed, -1) * 20%), 0, 0) scale(var(--c-img-scale, 1.1));
}

@media (max-width: 767px) {
	.celeste-image-wrapper {
		aspect-ratio: var(--c-img-aspect-mobile, var(--c-img-aspect-desktop, auto));
		width: var(--c-img-width-mob, var(--c-img-width, max-content));
		height: var(--c-img-height-mob, var(--c-img-height, auto));
	}

	.celeste-image-wrapper img {
		object-position: var(--c-img-pos-mob, var(--c-img-pos, 50% 50%));
	}

	/* Mobile ratio-mode overrides: mobile's aspect-ratio mode can differ from desktop's.
	   !important is required here, not just source order — the desktop rule (--native-ratio /
	   --forced-ratio img) has identical specificity, and relying on "this block comes later in
	   the file" is fragile (CSS aggregation/minification tooling can reorder equal-specificity
	   rules). !important guarantees the mobile mode wins regardless. */
	.celeste-image-wrapper--native-ratio-mob img {
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
	}

	.celeste-image-wrapper--native-ratio-mob img[src$=".svg"],
	.celeste-image-wrapper--native-ratio-mob img[src*=".svg?"],
	.celeste-image-wrapper--native-ratio-mob img[src*=".svg#"] {
		height: auto !important;
		max-height: 100% !important;
		width: auto !important;
	}

	.celeste-image-wrapper--forced-ratio-mob picture {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
	}

	.celeste-image-wrapper--forced-ratio-mob img {
		width: 100% !important;
		height: 100% !important;
	}

	.celeste-image-wrapper--forced-ratio-mob img[src$=".svg"],
	.celeste-image-wrapper--forced-ratio-mob img[src*=".svg?"],
	.celeste-image-wrapper--forced-ratio-mob img[src*=".svg#"] {
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
	}

	/* Mobile memory optimization - strip hardware acceleration */
	.celeste-image--parallax-vertical .celeste-image-wrapper img,
	.celeste-image--parallax-horizontal .celeste-image-wrapper img {
		will-change: auto;
		-webkit-backface-visibility: visible;
		backface-visibility: visible;
	}

	.celeste-image--parallax-vertical:not(.celeste-image--parallax-mobile-enabled) .celeste-image-wrapper img,
	.celeste-image--parallax-horizontal:not(.celeste-image--parallax-mobile-enabled) .celeste-image-wrapper img {
		transform: none;
	}

	.celeste-image--mobile-align-left {
		text-align: left;
	}

	.celeste-image--mobile-align-center {
		text-align: center;
	}

	.celeste-image--mobile-align-right {
		text-align: right;
	}
}