/**
 * Editorial media — Chronicles single posts + the Concept page.
 *
 * Both are text-column layouts: a narrow label/date column on the left, the
 * reading column on the right. Images already sit inside that reading column
 * (theme-post-content / text editor), so they inherit its width and keep their
 * natural ratio. Video did not, for two reasons:
 *
 *   1. Elementor's video widget forces `aspect-ratio: var(--video-aspect-ratio)`
 *      (16:9) on the wrapper and `object-fit: cover` on the <video>, so a
 *      portrait clip is cropped to landscape.
 *   2. On Concept the video widgets are siblings of the section containers,
 *      not children of the reading column, so they spanned the full row —
 *      label column included.
 *
 * Both are corrected here. Widths are expressed from the layout's own numbers
 * (label column %, container gap) so the video's left edge lines up with the
 * text above it.
 */

/* -------------------------------------------------------------------------
   1. Media inside the reading column: full column width, natural ratio.
   ------------------------------------------------------------------------- */

.p-cont img,
.p-cont video,
.p-cont iframe,
.elementor-widget-text-editor img,
.elementor-widget-text-editor video,
.elementor-widget-text-editor iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: auto;
}

/* WP's [video] shortcode wraps the player in fixed inline pixel dimensions. */
.p-cont .wp-video,
.p-cont .wp-video-shortcode,
.p-cont .mejs-container,
.elementor-widget-text-editor .wp-video,
.elementor-widget-text-editor .wp-video-shortcode,
.elementor-widget-text-editor .mejs-container {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
}

/* -------------------------------------------------------------------------
   2. Elementor video widget: keep the file's own ratio instead of 16:9 crop.
   ------------------------------------------------------------------------- */

.elementor-widget-video .elementor-wrapper {
	aspect-ratio: auto;
}

.elementor-widget-video .elementor-wrapper video,
.elementor-widget-video .e-hosted-video .elementor-video {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Embeds (YouTube/Vimeo) have no intrinsic size — they still need a ratio box. */
.elementor-widget-video:not(:has(.e-hosted-video)) .elementor-wrapper {
	aspect-ratio: var(--video-aspect-ratio, 1.77777);
}

.elementor-widget-video:not(:has(.e-hosted-video)) .elementor-wrapper iframe {
	height: 100%;
}

/* -------------------------------------------------------------------------
   3. Concept: full-row video widgets align to the reading column.

   Each section row is [ label column ][ gap ][ reading column ], but the label
   column's rendered width is not its declared 26% — it is a flex item that
   shrinks against the reading column's content, landing near 20% and drifting
   with viewport width. So the offset cannot be written as a constant here:
   editorial-media.js measures the real reading column and sets these two
   custom properties. Without JS the videos stay full width, as before.
   ------------------------------------------------------------------------- */

.page-id-602 .elementor-element-e0e1669 > .elementor-widget-video {
	width: var(--ck-text-col-width, 100%);
	margin-left: var(--ck-text-col-offset, 0px);
}

/* -------------------------------------------------------------------------
   4. Softened edges — the same treatment as the last tile on the home page
   (the ABOUT panel in inc/elementor-widgets/collection-grid-widget.php).
   Edge softening only: no panel background, no padding, square corners.

   That tile masks its video with a Gaussian-blurred rect — edge inset 3 units,
   stdDeviation 1.5, in a viewBox scaled to the media. What reads as "soft"
   there is the Gaussian S-curve: alpha eases in slowly, steepens mid-fade,
   then eases out. A plain `transparent → #000` gradient is linear and lands
   visibly harder at the same width, which is why the first pass here did not
   match.

   CSS cannot reproduce that mask directly: the tile's SVG carries the media's
   intrinsic ratio (known in PHP, not here), and stretching one fixed SVG over
   images of arbitrary ratios would skew the blur per axis. So the curve is
   sampled instead — the stops below are the Gaussian CDF of that exact blur,
   at 1px intervals, which is per-axis exact at any ratio.

   Also note the tile shows NO shadow: a mask clips the element's whole
   rendering, box-shadow included, so the tile's shadow setting is dead. None
   here either, so the two match.
   ------------------------------------------------------------------------- */

.p-cont,
.elementor-widget-image,
.elementor-widget-text-editor,
.elementor-widget-video {
	/* Same Gaussian CDF as the tile, expressed in PERCENT — this is the part
	   that matters. The tile's fade is not a fixed width: its SVG mask is
	   stretched over the media, so the blur scales with it (measured: ~5px
	   fade on a 1057px video at a 1440 viewport, ~8.5px on a 1500px one at
	   2560). A px ramp here stayed put while the tile's grew, so the two
	   drifted apart on wider screens — the tile read soft, this read as a cut.
	   Percent stops resolve against the element's own box, so the ramp now
	   scales the same way and the two match at any size.

	   Positions are the tile's geometry normalised: edge inset 3/1000 = 0.3%,
	   sigma 1.5/1000 = 0.15%, ramp complete at 0.75%. */
	--ck-fade-h: linear-gradient(to right,
		rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.07) 0.075%, rgba(0, 0, 0, 0.16) 0.15%,
		rgba(0, 0, 0, 0.31) 0.225%, rgba(0, 0, 0, 0.50) 0.30%, rgba(0, 0, 0, 0.69) 0.375%,
		rgba(0, 0, 0, 0.84) 0.45%, rgba(0, 0, 0, 0.93) 0.525%, rgba(0, 0, 0, 0.98) 0.60%,
		#000 0.75%,
		#000 99.25%,
		rgba(0, 0, 0, 0.98) 99.40%, rgba(0, 0, 0, 0.93) 99.475%, rgba(0, 0, 0, 0.84) 99.55%,
		rgba(0, 0, 0, 0.69) 99.625%, rgba(0, 0, 0, 0.50) 99.70%, rgba(0, 0, 0, 0.31) 99.775%,
		rgba(0, 0, 0, 0.16) 99.85%, rgba(0, 0, 0, 0.07) 99.925%, rgba(0, 0, 0, 0.02) 100%);
	--ck-fade-v: linear-gradient(to bottom,
		rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.07) 0.075%, rgba(0, 0, 0, 0.16) 0.15%,
		rgba(0, 0, 0, 0.31) 0.225%, rgba(0, 0, 0, 0.50) 0.30%, rgba(0, 0, 0, 0.69) 0.375%,
		rgba(0, 0, 0, 0.84) 0.45%, rgba(0, 0, 0, 0.93) 0.525%, rgba(0, 0, 0, 0.98) 0.60%,
		#000 0.75%,
		#000 99.25%,
		rgba(0, 0, 0, 0.98) 99.40%, rgba(0, 0, 0, 0.93) 99.475%, rgba(0, 0, 0, 0.84) 99.55%,
		rgba(0, 0, 0, 0.69) 99.625%, rgba(0, 0, 0, 0.50) 99.70%, rgba(0, 0, 0, 0.31) 99.775%,
		rgba(0, 0, 0, 0.16) 99.85%, rgba(0, 0, 0, 0.07) 99.925%, rgba(0, 0, 0, 0.02) 100%);
}

.p-cont img,
.p-cont video,
.elementor-widget-image img,
.elementor-widget-text-editor img,
.elementor-widget-text-editor video,
.elementor-widget-video .elementor-wrapper video,
.elementor-widget-video .e-hosted-video .elementor-video {
	-webkit-mask-image: var(--ck-fade-h), var(--ck-fade-v);
	mask-image: var(--ck-fade-h), var(--ck-fade-v);
	-webkit-mask-composite: source-in;   /* WebKit's older keyword for "intersect" */
	mask-composite: intersect;
}