/**
 * Event Collage Widget Styles
 *
 * Triangle-motif art for TRANSFORM conference landing pages.
 * Depends on shared/event.css (registered dependency) for the
 * .zededa-event-triangle outline decoration (spring-green stroked
 * left-pointing equilateral triangle SVG, intrinsic 316x364).
 *
 * Two presets (BEM modifiers on the root):
 * - .zededa-event-collage--about-collage : triangle-clipped photo + decorations
 * - .zededa-event-collage--outlines-only : decorative outlines, no photo
 *
 * All composition sizing is percentage-based so the art scales fluidly
 * with its column. Decoration positions are preset values tuned to the
 * Figma comp — geometry percentages are layout ratios, not design tokens.
 *
 * NOTE: No inter-widget margins here — container-styles.css owns those.
 *
 * @package Zededa
 */

/* ==========================================================================
   Root
   ========================================================================== */

.zededa-event-collage {
	position: relative;
	width: 100%;
}

/* ==========================================================================
   Preset A: About Collage (photo + triangles)
   "About The Event" 2-col section, left column (~670x680 desktop, fluid).
   ========================================================================== */

/* Photo wrapper: matches the outline SVG's intrinsic aspect so the
   stroke overlay registers with the clipped photo edges.
   86% width keeps the ~670-wide column's composition near the comp's
   ~680px height (0.86 * 670 * 364/316 ≈ 663) and leaves room for the
   decorations to overlap on the right. */
.zededa-event-collage--about-collage .zededa-event-collage__photo-wrap {
	position: relative;
	width: 86%;
	aspect-ratio: 316 / 364;
}

/* Photo clipped to a LEFT-pointing equilateral triangle (apex at left
   midpoint, vertical edge on the right) — mirrors the outline SVG shape. */
.zededa-event-collage--about-collage .zededa-event-collage__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
}

/* Spring "stroke" around the clipped photo: the outline SVG rendered as
   an overlay sized slightly larger (102%) and centered over the photo.
   (A clip-path on a padded parent would clip the padding too, so an
   overlay is the robust way to get a stroke around a clip-path shape.) */
.zededa-event-collage--about-collage .zededa-event-collage__photo-outline {
	width: 102%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1; /* above the clipped img (shared class defaults to 0) */
}

/* Decoration: outline triangle overlapping the photo's top-right,
   flipped to point right. Position values are comp-tuned ratios. */
.zededa-event-collage--about-collage .zededa-event-collage__deco--top-right {
	width: 48%;
	top: -6%;
	right: 0;
	transform: rotate(180deg);
	z-index: 1;
}

/* Decoration: smaller outline triangle at the bottom-right. */
.zededa-event-collage--about-collage .zededa-event-collage__deco--bottom-right {
	width: 30%;
	bottom: -2%;
	right: 4%;
	z-index: 1;
}

/* ==========================================================================
   Preset B: Outlines Only (Call For Speakers dark section, right column)
   Transparent root — the dark section supplies the background.
   ========================================================================== */

/* Outlines-only is a non-interactive seam overlay: it fills its host section
   without taking layout space, so it can be dropped into any section and the
   triangles overflow past the seam without disturbing content. */
.zededa-event-collage--outlines-only {
	position: absolute;
	top: 0;
	bottom: 0;
	/* Inset the horizontal edges by the DECORATION frame gutter so the whole
	   decoration field centers within the 1440 deco frame (tighter than the hero's
	   1645). Past 1440 this freezes the percentage-based curated cluster
	   (__deco-image --deco-w / __deco-tri) which would otherwise scale with the
	   full-bleed (100vw) section and read as oversized next to the 1280 content on
	   very wide / zoomed-out viewports. Gutter is 0 at/below 1440, so the field still
	   spans the section there. (Hero collage keeps the wider 1645 frame.) */
	left: var(--zededa-deco-frame-gutter, 0px);
	right: var(--zededa-deco-frame-gutter, 0px);
	/* Override the .zededa-event-collage base width:100% so the left+right gutters
	   actually size the overlay (width:100% would ignore the right inset and keep
	   it full-bleed, merely shifted). auto lets it become 1440 centered past the
	   frame width, and full-section below it. */
	width: auto;
	min-height: 0;
	pointer-events: none;
	/* The overlay is the 1440 SIZING frame (its width drives the percentage-based
	   decorations) but it must NOT clip them: a decoration that bleeds past the
	   1440 frame should stay fully visible, overlaying the section out to the
	   viewport edge — only the hero photo collage is allowed to crop. So overflow
	   is visible here; the page-widening guard lives on the full-width widget
	   wrapper below (which clips at the VIEWPORT, not at this 1440 frame). */
	overflow: visible;
}

.elementor-widget-zededa_event_collage:has(.zededa-event-collage--outlines-only) {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	pointer-events: none;
	/* Above the section background, behind in-flow content (pills/cards).
	   Negative z-index is scoped by the host section's stacking context below. */
	z-index: -1;
}

/* Page-widening guard for the floating decorations. They overlay freely (the
   overlay above is overflow:visible) so they never crop mid-section — but a
   decoration that bleeds past the viewport must not add a horizontal scrollbar.
   Clipping on the overlay/wrapper/section is unreliable: those can be the 1440
   frame or a BOXED (content-width) container, which would crop the decoration
   mid-section (the very bug this avoids). The viewport is the only correct clip
   boundary, so clip horizontal overflow once on the body — scoped via :has so
   only pages carrying these decorations are affected (same pattern as
   body:has(.zededa-hero--has-overflow) in hero-widget.css). */
body:has(.zededa-event-collage--outlines-only) {
	overflow-x: clip;
}

/* Shared sizing for the two decorative triangles (large + small). The overlay
   fills the full-width section, so sizes are capped (not a % of the section)
   to stay close to the comp regardless of viewport. The corner modifiers below
   anchor them and push them to overflow past the section seam. */
.zededa-event-collage--outlines-only .zededa-event-collage__deco--outline-top {
	/* Cap = 22vw at the 1645 frame width, so the triangle freezes at its Figma
	   size at 1645 rather than ~1545px (the old 340px cap). */
	width: clamp(200px, 22vw, 362px);
}

.zededa-event-collage--outlines-only .zededa-event-collage__deco--outline-bottom {
	/* Cap = 13vw at the 1645 frame width. */
	width: clamp(120px, 13vw, 214px);
}

/* --------------------------------------------------------------------------
   Corner variants. The large triangle crosses the section edge (seam) by the
   standard inter-section spacing; the small triangle sits inset alongside it.
   "top-*" variants cross UP into the preceding section and are the seam-safe
   choice (the hosting section paints after the one above, so the overflow is
   visible over it). "bottom-*" variants spill DOWN and are only visible when
   the following section is transparent.
   -------------------------------------------------------------------------- */

.zededa-event-collage--deco-top-left .zededa-event-collage__deco--outline-top {
	top: calc(-1 * var(--spacing-4xl) * 3);
	left: 6%;
	transform: rotate(180deg);
}
.zededa-event-collage--deco-top-left .zededa-event-collage__deco--outline-bottom {
	top: calc(-1 * var(--spacing-4xl) * 1.7);
	left: 19%;
	transform: rotate(180deg);
}

.zededa-event-collage--deco-top-right .zededa-event-collage__deco--outline-top {
	top: calc(-1 * var(--spacing-4xl) * 3);
	right: 6%;
	transform: rotate(180deg);
}
.zededa-event-collage--deco-top-right .zededa-event-collage__deco--outline-bottom {
	top: calc(-1 * var(--spacing-4xl) * 1.7);
	right: 19%;
	transform: rotate(180deg);
}

.zededa-event-collage--deco-bottom-left .zededa-event-collage__deco--outline-top {
	bottom: calc(-1 * var(--spacing-4xl) * 3);
	left: 6%;
	transform: rotate(180deg);
}
.zededa-event-collage--deco-bottom-left .zededa-event-collage__deco--outline-bottom {
	bottom: calc(-1 * var(--spacing-4xl) * 1.7);
	left: 19%;
	transform: rotate(180deg);
}

.zededa-event-collage--deco-bottom-right .zededa-event-collage__deco--outline-top {
	bottom: calc(-1 * var(--spacing-4xl) * 3);
	right: 6%;
	transform: rotate(180deg);
}
.zededa-event-collage--deco-bottom-right .zededa-event-collage__deco--outline-bottom {
	bottom: calc(-1 * var(--spacing-4xl) * 1.7);
	right: 19%;
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Image decoration mode (pixel-exact Figma export). Anchored to the corner set
   by the position modifier; width + horizontal inset + vertical seam-crossing
   offset come from per-instance inline custom properties. Aspect ratio is
   preserved (height:auto) so the exported cluster matches the comp 1:1.
   -------------------------------------------------------------------------- */
.zededa-event-collage__deco-image {
	position: absolute;
	/* display:block so the wrapper variant (a <span> holding split shape
	   layers, see __deco-shape below) sizes from width + aspect-ratio exactly
	   like the <img> variant does. */
	display: block;
	width: var(--deco-w, 44%);
	/* Explicit aspect ratio (from the SVG viewBox, emitted by render() as
	   --deco-ar) so width drives a correct height — Chrome reports naturalWidth
	   0 for these SVGs, so height:auto alone would collapse to 0. The 0.95
	   fallback (rather than `auto`) keeps the decoration visible even if
	   --deco-ar is ever absent (e.g. the editor live-preview, which can't read
	   the SVG viewBox) instead of collapsing to nothing. */
	aspect-ratio: var(--deco-ar, 0.95);
	height: auto;
	pointer-events: none;
}

/* Curated triangle-cluster layers. render() emits the wrapper above as a <span>
   containing one <svg> per triangle — each a scaled / positioned / rotated
   instance of the single base triangle (set via the --tri-* custom properties),
   composing the cluster. Each layer is its own parallax target, so the triangles
   drift at different speeds for a sense of depth. The CSS transform is left free
   for the parallax script (translate3d); any orientation flip is baked into the
   SVG path (a rotate() transform attribute), not here. */
.zededa-event-collage__deco-tri {
	position: absolute;
	left: var(--tri-x, 0%);
	top: var(--tri-y, 0%);
	width: var(--tri-w, 50%);
	/* The base triangle's intrinsic ratio (316×364) drives each layer's height
	   from its width, so the equilateral shape is preserved at any size. */
	aspect-ratio: 316 / 364;
	height: auto;
	/* overflow:visible so a drifting triangle isn't clipped by its layer box. */
	overflow: visible;
	pointer-events: none;
}

/* Uniform outline weight across every triangle regardless of its size:
   non-scaling-stroke keeps the stroke a constant width even though instances are
   scaled to different sizes (the original cluster art used one fixed stroke width
   for both triangles). No stroke-width token exists at this value, so the Figma
   weight is set directly. */
.zededa-event-collage__deco-tri path {
	fill: none;
	stroke: var(--color-brand-spring);
	stroke-width: 2.3px;
	vector-effect: non-scaling-stroke;
}

/* Top-anchored decorations cross UP through the seam into the section above.
   Anchor them by their BOTTOM edge a fixed distance below the seam (the host
   section's top) rather than by `top`: bottom-anchoring is independent of the
   decoration's rendered height AND the viewport width, so the tip can never
   reach the section's content (pills/cards) at any breakpoint — the overlap
   failure mode a top/percentage offset cannot avoid. The decoration extends
   upward from this anchor. --deco-dip is the gap below the seam; the legacy
   --deco-y is intentionally no longer used for top-anchored decorations. */
.zededa-event-collage--deco-top-right .zededa-event-collage__deco-image,
.zededa-event-collage--deco-top-left .zededa-event-collage__deco-image {
	top: auto;
	bottom: calc(100% - var(--deco-dip, 130px));
}
.zededa-event-collage--deco-top-right .zededa-event-collage__deco-image {
	right: var(--deco-x, 4%);
}
.zededa-event-collage--deco-top-left .zededa-event-collage__deco-image {
	left: var(--deco-x, 4%);
}
.zededa-event-collage--deco-bottom-right .zededa-event-collage__deco-image {
	bottom: var(--deco-y, -12%);
	right: var(--deco-x, 4%);
}
.zededa-event-collage--deco-bottom-left .zededa-event-collage__deco-image {
	bottom: var(--deco-y, -12%);
	left: var(--deco-x, 4%);
}

/* The host section becomes the positioning context for the overlay and stops
   clipping the overflowing decoration at the seam. :has tests descendants, so
   the section (and any intermediate container) matches. */
.e-con:has(.zededa-event-collage--outlines-only) {
	position: relative;
	/* Decorations are tuned with negative --deco-x to bleed off the left/right
	   edges. The section spans the full viewport width, so an unconstrained
	   horizontal bleed creates a page-wide horizontal scrollbar. Clip the
	   HORIZONTAL bleed at the section (= viewport) edge while still letting the
	   decoration bleed VERTICALLY across the section seam. `overflow-x: clip`
	   pairs with `overflow-y: visible` (clip is the one non-visible value that
	   does not force the other axis to auto). */
	overflow-x: clip;
	overflow-y: visible;
	/* Establish a stacking context so the decoration's negative z-index is
	   scoped here — above this section's background, below its content — rather
	   than leaking to an ancestor context. */
	isolation: isolate;
}

/* ==========================================================================
   Mobile (≤767px)
   About-collage already scales fluidly via % sizing; outlines-only
   shrinks its canvas and triangles so the decoration doesn't dominate.
   ========================================================================== */

@media (max-width: 767px) {
	.zededa-event-collage--outlines-only {
		/* 240px: reduced art-column height on mobile per design. */
		min-height: 240px;
	}

	.zededa-event-collage--outlines-only .zededa-event-collage__deco--outline-top {
		width: 60%;
		/* Smaller seam-crossing overlap on mobile — still intentional. */
		top: calc(-1 * var(--spacing-4xl));
	}

	.zededa-event-collage--outlines-only .zededa-event-collage__deco--outline-bottom {
		width: 38%;
	}
}