/**
 * Shared Decomposed-Triangle Decoration
 *
 * One independently-parallaxing triangle layer, used by any widget that splits
 * a baked triangle composition into separate elements (Transform hero cluster,
 * image-text "About" composition, …). The shared parallax engine
 * (assets/js/event-collage-widget.js) writes `transform` on the `.zededa-tri`
 * wrapper, so all visual shaping (clip-path photo/video, outline overlay flip)
 * lives on the children to avoid clobbering.
 *
 * Markup contract (emitted by the Decomposed_Triangles PHP trait):
 *   <span class="zededa-tri zededa-tri--{dir}" style="--tri-x;--tri-y;--tri-w"
 *         data-parallax="1" data-parallax-speed="…">
 *     [<video class="zededa-tri__media zededa-tri__video">]  (feature video only)
 *     <svg class="zededa-tri__shape">                        (photo fill + stroke,
 *        <image clip-path>?  <polygon stroke>                 or stroke-only)
 *     </svg>
 *   </span>
 * The positioning container (e.g. .zededa-hero-cluster) is owned by the widget.
 *
 * @package Zededa
 */

/* A single triangle layer: positioned within its container, width-sized with
   height following the equilateral aspect. */
.zededa-tri {
	position: absolute;
	left: var(--tri-x, 0%);
	top: var(--tri-y, 0%);
	width: var(--tri-w, 40%);
	/* Left/right-pointing equilateral (apex on a horizontal axis). */
	aspect-ratio: 316 / 364;
	pointer-events: none;
}

/* Up/down-pointing equilateral is the rotated footprint (wider than tall). */
.zededa-tri--up,
.zededa-tri--down {
	aspect-ratio: 364 / 316;
}

/* Feature-VIDEO fill — clipped to the triangle. Photos no longer use this; they
   render as an SVG <image> inside .zededa-tri__shape (below). Only the looping
   feature video still needs a clip-path'd media element, and .zededa-tri__shape
   supplies its green stroke on top.

   The `.zededa-tri` ancestor in the selector is REQUIRED, not cosmetic: Elementor
   ships `.elementor img { height: auto }` (specificity 0,1,1), which outranks a
   bare `.zededa-tri__media` (0,1,0) and collapses the media to its intrinsic
   aspect height. Scoping to `.zededa-tri .zededa-tri__media` (0,2,0) wins the
   cascade so height:100% sticks and the video fills the box. */
.zededa-tri .zededa-tri__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: polygon(99.46% 0.42%, 99.46% 99.56%, 0.56% 50%);
}

.zededa-tri--right .zededa-tri__media {
	clip-path: polygon(0.54% 0.42%, 0.54% 99.56%, 99.44% 50%);
}

.zededa-tri--up .zededa-tri__media {
	clip-path: polygon(50% 0.56%, 0.42% 99.46%, 99.58% 99.46%);
}

.zededa-tri--down .zededa-tri__media {
	clip-path: polygon(0.42% 0.54%, 99.58% 0.54%, 50% 99.44%);
}

/* Single-SVG triangle shape (rendered by the Decomposed_Triangles trait): the
   clipped photo <image> and the spring-green stroke share ONE <polygon>, so the
   stroke always sits exactly on the photo edge — no separate overlay to keep in
   manual alignment. Outline-only triangles use the same SVG with no <image>; the
   feature-video triangle uses it for the stroke only, over the clip-path'd video.
   The trait emits the per-direction polygon points + matching viewBox, so the
   apex direction needs no CSS flip/rotate here (which would mirror the photo).
   preserveAspectRatio="none" is safe because .zededa-tri sets the matching
   316:364 / 364:316 aspect-ratio, keeping the map uniform and the stroke even. */
.zededa-tri .zededa-tri__shape {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Video fades in once lazy-loaded (mirrors .zededa-hero-video behaviour). */
.zededa-tri__video {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.zededa-tri__video.is-video-ready {
	opacity: 1;
}