/**
 * Cresset Hero Media — scoped styles (handle: cr-hero-media).
 * Loaded only on pages where the widget renders (get_style_depends).
 */

/* Default: a self-sizing block. It gets a real height from its aspect-ratio, so it
   renders correctly wherever it is dropped — no 0x0, no positioned-parent ritual. */
.cr-hero {
	position: relative;
	width: 100%;
	aspect-ratio: var(--cr-ar, 1.6/1);
	overflow: hidden;
	background: #0b1f2a;              /* brand dark; avoids a flash before the image paints */
}

/* Fill mode (opt-in): a background layer that fills a position:relative parent which
   already has its own height (e.g. an existing hero container holding heading/CTA).
   Turn on "Fill parent container" in the widget for this. */
.cr-hero--fill {
	position: absolute;
	inset: 0;
	z-index: 0;
	aspect-ratio: auto;              /* the parent's height governs instead */
}

/* Elementor renders the widget inside two wrappers. In fill mode those wrappers must
   stretch to the hero Container too, otherwise the fill layer's parent is 0-tall and
   nothing shows. Scoped to fill mode via :has(), so self-sizing mode is unaffected. */
.elementor-widget-cresset-hero-media:has(.cr-hero--fill) {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.elementor-widget-cresset-hero-media:has(.cr-hero--fill) > .elementor-widget-container {
	height: 100%;
}

/* Scoped under .cr-hero so these win over Elementor's `.elementor img { height:auto }`
   (0-1-1) — otherwise the image sizes by its aspect-ratio instead of filling, leaving a
   gap below it. */
.cr-hero .cr-hero__pic,
.cr-hero .cr-hero__img,
.cr-hero .cr-hero__video,
.cr-hero .cr-hero__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.cr-hero__img,
.cr-hero__video {
	object-fit: cover;
	object-position: center;
	display: block;
}

.cr-hero__img {
	z-index: 1;
}

.cr-hero__video {
	z-index: 2;
	border: 0;
	opacity: 0;                       /* hidden until it can actually play */
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.cr-hero.is-playing .cr-hero__video {
	opacity: 1;
}

.cr-hero__overlay {
	z-index: 3;
	background: #000;
	opacity: var(--cr-overlay, 0);
	pointer-events: none;
}

/* Motion-averse users never get the video (belt-and-braces with the JS guard). */
@media (prefers-reduced-motion: reduce) {
	.cr-hero__video {
		display: none !important;
	}
}