/* Reusable Single Image Banner storefront component. */

.ca-image-banner {
	--ca-image-banner-space-top: var(--ca-section-spacing-none);
	--ca-image-banner-space-bottom: var(--ca-section-spacing-none);
	--ca-image-banner-container: var(--ca-section-width-wide);
	--ca-image-banner-desktop-ratio: 21 / 9;
	--ca-image-banner-mobile-ratio: 4 / 5;
	--ca-image-banner-image-position: center;

	width: 100%;
	padding-block: var(--ca-image-banner-space-top) var(--ca-image-banner-space-bottom);
	color: var(--ca-color-text);
}

.ca-image-banner--space-top-small {
	--ca-image-banner-space-top: var(--ca-section-spacing-small);
}

.ca-image-banner--space-top-medium {
	--ca-image-banner-space-top: var(--ca-section-spacing-medium);
}

.ca-image-banner--space-top-large {
	--ca-image-banner-space-top: var(--ca-section-spacing-large);
}

.ca-image-banner--space-top-xlarge {
	--ca-image-banner-space-top: var(--ca-section-spacing-xlarge);
}

.ca-image-banner--space-bottom-small {
	--ca-image-banner-space-bottom: var(--ca-section-spacing-small);
}

.ca-image-banner--space-bottom-medium {
	--ca-image-banner-space-bottom: var(--ca-section-spacing-medium);
}

.ca-image-banner--space-bottom-large {
	--ca-image-banner-space-bottom: var(--ca-section-spacing-large);
}

.ca-image-banner--space-bottom-xlarge {
	--ca-image-banner-space-bottom: var(--ca-section-spacing-xlarge);
}

.ca-image-banner--width-contained {
	--ca-image-banner-container: var(--ca-section-width-contained);
}

.ca-image-banner--width-full {
	--ca-image-banner-container: var(--ca-section-width-full);
}

.ca-image-banner--desktop-ratio-wide {
	--ca-image-banner-desktop-ratio: 16 / 9;
}

.ca-image-banner--desktop-ratio-standard {
	--ca-image-banner-desktop-ratio: 3 / 2;
}

.ca-image-banner--mobile-ratio-square {
	--ca-image-banner-mobile-ratio: 1 / 1;
}

.ca-image-banner--mobile-ratio-inherit {
	--ca-image-banner-mobile-ratio: var(--ca-image-banner-desktop-ratio);
}

.ca-image-banner--position-top {
	--ca-image-banner-image-position: center top;
}

.ca-image-banner--position-right {
	--ca-image-banner-image-position: right center;
}

.ca-image-banner--position-bottom {
	--ca-image-banner-image-position: center bottom;
}

.ca-image-banner--position-left {
	--ca-image-banner-image-position: left center;
}

.ca-image-banner--surface-soft {
	background: var(--ca-color-surface-muted);
}

.ca-image-banner--surface-raised {
	background: var(--ca-color-surface-raised);
	box-shadow: inset 0 var(--ca-border-width) var(--ca-color-border), inset 0 calc(0px - var(--ca-border-width)) var(--ca-color-border);
}

.ca-image-banner__container {
	width: min(calc(100% - (var(--ca-page-gutter) * 2)), var(--ca-image-banner-container));
	margin-inline: auto;
}

.ca-image-banner--width-full .ca-image-banner__container {
	width: 100%;
	max-width: none;
}

.ca-image-banner__frame {
	position: relative;
	aspect-ratio: var(--ca-image-banner-desktop-ratio);
	overflow: hidden;
	background: var(--ca-color-surface-muted);
}

.ca-image-banner--presentation-framed .ca-image-banner__frame {
	border: var(--ca-border-width) solid var(--ca-color-border);
	border-radius: var(--ca-radius-lg);
	box-shadow: var(--ca-shadow-sm);
}

.ca-image-banner--presentation-editorial .ca-image-banner__frame {
	border-radius: var(--ca-radius-lg);
	box-shadow: var(--ca-shadow-lg);
}

.ca-image-banner__link,
.ca-image-banner__picture,
.ca-image-banner__image {
	display: block;
	width: 100%;
	height: 100%;
}

.ca-image-banner__link:focus-visible {
	position: relative;
	z-index: 1;
	outline: 0;
	box-shadow: inset 0 0 0 3px var(--ca-color-primary);
}

.ca-image-banner__image {
	object-fit: cover;
	object-position: var(--ca-image-banner-image-position);
	transition: transform var(--ca-duration-slow) var(--ca-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
	.ca-image-banner__link:hover .ca-image-banner__image {
		transform: scale(1.025);
	}
}

@media (max-width: 40rem) {
	.ca-image-banner__frame {
		aspect-ratio: var(--ca-image-banner-mobile-ratio);
	}

	.ca-image-banner--width-full.ca-image-banner--presentation-edge .ca-image-banner__frame {
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ca-image-banner__image {
		transition: none;
	}
}