/**
 * Pretpot Multidirection Media Reveal
 * css: multidirection-media-reveal.css
 *
 * The reveal works by positioning a solid .pretpot-mmr-overlay on top of the
 * media.  JavaScript shrinks it (via width/height + left/top) so the media
 * "grows in" from the chosen edge — exactly like a loading progress-bar filling
 * in to 100%, then the overlay is gone and the full media is visible.
 *
 * Compatible with Elementor Classic Columns/Sections AND Flexbox Containers.
 */

/* ── Outer alignment shell ─────────────────────────────────────────────── */
.pretpot-mmr-outer {
	display: flex;
	width: 100%;
}

/* ── Main wrapper ───────────────────────────────────────────────────────── */
.pretpot-mmr-wrapper {
	position: relative;
	display: block;
	width: 100%;          /* overridden by responsive control if set */
	overflow: hidden;
	line-height: 0;       /* remove inline-block gap under image */
}

/* ── Media container — this element clips the overlay ─────────────────── */
.pretpot-mmr-media-wrap {
	position: relative;
	width: 100%;
	height: 400px;        /* default; overridden by responsive control */
	overflow: hidden;
	display: block;
}

/* ── Actual media ───────────────────────────────────────────────────────── */
.pretpot-mmr-media-wrap img,
.pretpot-mmr-media-wrap video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.pretpot-mmr-media-wrap a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.pretpot-mmr-media-wrap a img {
	width: 100%;
	height: 100%;
}

/* ── Overlay — covers media before reveal; JS animates it away ─────────── */
.pretpot-mmr-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #111;     /* overridden by Elementor color control */
	z-index: 2;
	pointer-events: none;
	/* 'will-change' set by JS just before animation starts, removed after */
}

/*
 * Direction-specific initial states are set inline by JS via data-attributes
 * (width/height/left/top) so they work correctly for all four directions.
 * This avoids needing 4 separate CSS rules that can conflict.
 */

/* ── Progress bar ───────────────────────────────────────────────────────── */
.pretpot-mmr-progress-track {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;              /* overridden by Elementor slider control  */
	background: rgba(255,255,255,0.25);
	z-index: 3;
	overflow: hidden;
}

.pretpot-mmr-progress--top    { top: 0;    }
.pretpot-mmr-progress--bottom { bottom: 0; }

.pretpot-mmr-progress-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0%;
	background: #fff;         /* overridden by Elementor color control   */
	z-index: 4;
	transition: none;         /* JS controls width via requestAnimationFrame */
}

/* ── Elementor editor placeholder ──────────────────────────────────────── */
.elementor-editor-active .pretpot-mmr-overlay {
	/* Show a faint hint so the designer knows the overlay is there */
	background: rgba(0, 0, 0, 0.45) !important;
}

/* ── Flexbox/Container compatibility ───────────────────────────────────── */
/*
 * Elementor Flexbox Containers set display:flex on .elementor-widget-wrap.
 * .pretpot-mmr-outer already uses display:flex internally, so it integrates
 * cleanly.  No extra overrides needed; just ensure the widget wrapper doesn't
 * constrain us.
 */
.elementor-widget-pretpot-multidirection-media-reveal {
	width: 100%;
}

/* ── Responsive overrides ───────────────────────────────────────────────── */
@media (max-width: 767px) {
	.pretpot-mmr-media-wrap {
		height: 250px;   /* sensible mobile fallback if no responsive control set */
	}
}