/**
 * Divi Motion Extended — Image Reveal. Layout only; typography, sizing and colours
 * come from the Design tab, motion from assets/script.min.js.
 * `.min` is a filename convention — this file is not minified.
 */
.dmoe-image-reveal-wrap {
	position: relative;
}
/* Positioning context for the row's own revealed image. */
.dmoe-image-reveal-row {
	position: relative;
}
/* Undo Divi's `z-index: 9` so rows share one stacking context. */
.dmoe-image-reveal-inner .et_pb_module {
	z-index: auto;
}
/* The revealed image, lifted out of the row's flow and kept under the text. */
.dmoe-image-reveal-visual {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	width: 200px;
	height: 250px;
	will-change: transform, opacity, clip-path, filter;
	z-index: 0;
}
/* Fills the figure; the background doubles as the letterbox for Fit Inside. */
.dmoe-image-reveal-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: #e4e4e4;
}
/* Placeholder while a row has no image, hung off the missing `src`. */
.dmoe-image-reveal-image:not([src]) {
	background-image: url( ../../../../../../assets/images/dmoe-image-placeholder.svg );
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* Readability tint over the image, coloured from the Design tab. */
.dmoe-image-reveal-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}
/* Row parts as columns. Row Layout generates flex-direction and align-items per
   breakpoint; `nowrap` keeps a part from dropping out of line with the rows above. */
.dmoe-image-reveal-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.35em 1em;
}
/* Hold the Design tab width instead of growing; shrink only when space runs out. */
.dmoe-image-reveal-content > *,
.dmoe-image-reveal-title-wrapper > * {
	flex: 0 1 auto;
	min-width: 0;
}
/* The title column, which absorbs whatever the sized columns leave. */
.dmoe-image-reveal-content > .dmoe-image-reveal-title-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	flex: 1 1 auto;
}
/* Size the button wrapper to its button, and never shrink it. */
.dmoe-image-reveal-content > .et_pb_button_wrapper {
	flex: 0 0 auto;
	width: auto;
}
/* Nothing on the page makes the button a block box, and an inline one ignores
   width and height and lets the hover icon escape its background. */
.dmoe-image-reveal-content .et_pb_button {
	display: inline-block;
}
.dmoe-image-reveal-title,
.dmoe-image-reveal-subtitle,
.dmoe-image-reveal-description {
	margin: 0;
}
/* Fixed Frame: centre the image on the row and pin it to one side. Follow Cursor
   needs no rules — the runtime positions the visual itself. */
.dmoe-image-reveal--fixedFrame .dmoe-image-reveal-visual {
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
}
.dmoe-image-reveal--fixedFrame .dmoe-image-reveal-wrap[data-frame_position="left"] .dmoe-image-reveal-visual {
	left: 0;
	right: auto;
}
.dmoe-image-reveal--fixedFrame .dmoe-image-reveal-wrap[data-frame_position="center"] .dmoe-image-reveal-visual {
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.dmoe-image-reveal--fixedFrame .dmoe-image-reveal-wrap[data-frame_position="right"] .dmoe-image-reveal-visual {
	left: auto;
	right: 0;
}
/* Background Fill: hide the per-row visuals and use the shared layer instead. */
.dmoe-image-reveal-bg {
	display: none;
}
.dmoe-image-reveal--backgroundFill .dmoe-image-reveal-row .dmoe-image-reveal-visual {
	display: none;
}
/* Three classes, to beat Divi's two-class sizing rule without `!important`. */
.dmoe-image-reveal--backgroundFill .dmoe-image-reveal-wrap .dmoe-image-reveal-bg {
	display: block;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}