/* -------------------------------------------*\
    Oreneta Video

    Fills the space it is given rather than dictating it. The box reserves its
    size before the file arrives — either from a ratio or from the parent's
    height — so nothing on the page moves when the video loads.

    Everything here hangs off classes on the widget's own element, never off
    classes on Elementor's wrapper. The wrapper is built by PHP on the site and
    by JavaScript in the editor, so a class added to it exists in one place and
    not the other, and the widget would look right on the page and wrong on the
    canvas.
\*------------------------------------------- */

/* stylelint-disable no-descending-specificity -- Elementor supports two
   wrapper shapes, and fill/background variants intentionally follow ratio. */

.oreneta-video {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;

	/* Kills the descender gap a replaced inline element leaves underneath. */
	line-height: 0;
}

.oreneta-video--ratio {
	--oreneta-video-default-ratio: var(--oreneta-video-ratio, 16 / 9);

	height: var(--oreneta-video-height, auto);
	aspect-ratio: var(--oreneta-video-aspect, var(--oreneta-video-default-ratio));
}

.oreneta-video--ratio-16-9 {
	--oreneta-video-ratio: 16 / 9;
}

.oreneta-video--ratio-4-3 {
	--oreneta-video-ratio: 4 / 3;
}

.oreneta-video--ratio-1-1 {
	--oreneta-video-ratio: 1 / 1;
}

.oreneta-video--ratio-4-5 {
	--oreneta-video-ratio: 4 / 5;
}

.oreneta-video--ratio-3-4 {
	--oreneta-video-ratio: 3 / 4;
}

.oreneta-video--ratio-9-16 {
	--oreneta-video-ratio: 9 / 16;
}

.oreneta-video__media {
	display: block;
	width: 100%;
	height: 100%;

	/* Both are overridden per device by the widget's controls: the fit as a
     declaration of its own, the framing through these two properties so that
     choosing a horizontal edge on one breakpoint does not wipe out the vertical
     one inherited from the breakpoint above. */
	object-fit: cover;
	object-position: var(--oreneta-video-align-x, center) var(--oreneta-video-align-y, center);
}

/* ── Responsive height: use the format or fill the container ── */

.elementor-widget:has(> .elementor-widget-container > .oreneta-video--ratio),
.elementor-widget:has(> .oreneta-video--ratio) {
	align-self: stretch;
	flex-grow: var(--oreneta-video-grow, 0);
	min-height: 0;
}

.elementor-widget:has(> .elementor-widget-container > .oreneta-video--ratio) > .elementor-widget-container {
	height: var(--oreneta-video-height, auto);
}

/* ── Backdrop: behind everything else in the container ── */

.oreneta-video--backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	height: 100%;

	/* Nothing here is interactive, and swallowing clicks meant for the buttons
     drawn on top of it would be the obvious way to get this wrong. */
	pointer-events: none;
}

/* The widget itself must stop taking up a row, or the container reserves space
   for a video that is no longer in the flow. */

.elementor-widget:has(> .elementor-widget-container > .oreneta-video--backdrop),
.elementor-widget:has(> .oreneta-video--backdrop) {
	position: static;
	height: 0;
	min-height: 0;
	margin: 0;
	flex: 0 0 auto;
}

/* A backdrop covers the container's corners, so it has to be clipped to the
   same shape or a rounded hero ends up with square video corners poking out.

   The radius is Elementor's, set on the container, and there is no way to read
   another element's value in CSS. `inherit` can carry it though — so each
   wrapper between the container and the video passes it down, and the video's
   own overflow:hidden does the clipping. Only the chains that actually hold a
   backdrop are touched. */

.e-con:has(.oreneta-video--backdrop) > .e-con-inner,
.e-con:has(.oreneta-video--backdrop) > .elementor-element:has(.oreneta-video--backdrop),
.e-con-inner:has(.oreneta-video--backdrop) > .elementor-element:has(.oreneta-video--backdrop),
.elementor-widget:has(.oreneta-video--backdrop) > .elementor-widget-container,
.oreneta-video--backdrop {
	border-radius: inherit;
}

/* Siblings need a stacking context of their own to land above it. Without this
   the video would cover the very content it is meant to sit behind. */

.e-con:has(.oreneta-video--backdrop) > .elementor-element:not(:has(.oreneta-video--backdrop)),
.e-con-inner:has(.oreneta-video--backdrop) > .elementor-element:not(:has(.oreneta-video--backdrop)) {
	position: relative;
	z-index: 1;
}

/* stylelint-enable no-descending-specificity */