.cl-fih {
	position: relative;
	min-height: var(--cl-fih-min-height, 720px);
	background-color: var(--cl-fih-bg, #14151a);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 24px;
}

/* Subtle dot-grid texture, matching the reference design's faint
   background pattern. Drawn as a repeating radial-gradient rather than
   an image so it scales cleanly at any size with no asset to manage. */
.cl-fih__dot-grid {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 22px 22px;
	pointer-events: none;
}

.cl-fih__images {
	position: absolute;
	inset: 0;
}

.cl-fih__image {
	position: absolute;
	overflow: hidden;
	border-radius: var(--cl-fih-image-radius, 4px);
	will-change: transform;
}

/**
 * !important is required on all three here: the theme's own global
 * image rules — `.row .col img { max-width: 100%; height: auto; }` and
 * `.row .col img:not([srcset]) { width: auto; }` — carry higher CSS
 * specificity (two classes + element) than a plain `.cl-fih__image img`
 * (one class + element), so they silently win without it. When they
 * win, the <img> falls back to its natural/auto size instead of filling
 * the box, which — since the container clips with `overflow: hidden` +
 * `border-radius` — makes the rounding look like it's "too big": it's
 * rounding the corners of a mostly-empty container while the actual
 * (smaller, unclipped) photo floats inside it.
 */
.cl-fih__image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.cl-fih__content {
	position: relative;
	z-index: 2;
	max-width: var(--cl-fih-heading-max-width, 640px);
	text-align: center;
}

.cl-fih__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cl-fih-eyebrow-color, #9a9a9e);
	margin-bottom: 18px;
}

.cl-fih__eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--cl-fih-eyebrow-dot, #c6ff3d);
	flex-shrink: 0;
}

.cl-fih__heading {
	margin: 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	/* No font-size here on purpose — see the element's own inline
	   <style> block (floating-images-hero.php), which emits a real,
	   separate font-size rule per breakpoint only when a value is
	   actually configured, so a blank field genuinely leaves the
	   heading tag's own default size untouched. */
	line-height: 1.2;
	color: var(--cl-fih-heading-color, #f5f4f0);
}

/* Images keep position: absolute at every breakpoint — nothing here
   switches them to a stack or grid. Each image's tablet/mobile
   position and size (when configured) is emitted as its own real CSS
   rule in this element's inline <style> block (floating-images-hero.php),
   targeting that specific image via its data-parallax-index, so photos
   can be hand-placed — including deliberately overlapping the heading,
   as the reference design does — independently at every breakpoint. */

/**
 * Automatic scaling, for when those per-image mobile fields have NOT been
 * filled in.
 *
 * Every position and size is an absolute pixel value measured against a
 * desktop-width composition, so on a phone they were simply applied
 * unchanged: images several hundred pixels wide, laid out for a canvas
 * three or four times the width they now had. Hand-placing eight images
 * across two more breakpoints is a lot of work to ask before the element
 * is usable on a phone at all.
 *
 * So the whole layer is scaled about its centre by (container width /
 * design width). The composition is preserved exactly — the same
 * arrangement, proportionally identical to the desktop — and because the
 * parallax transforms sit on the individual images, they compose with this
 * and keep working, scaled with everything else.
 *
 * scale() on this layer is safe where a transform on .cl-fih__images'
 * ancestors would not be: nothing inside it is position: fixed.
 */
.cl-fih--autofit .cl-fih__images {
	transform: scale(var(--cl-fih-fit, 1));
	transform-origin: 50% 50%;
}

/**
 * Legibility. Once scaled, images sit closer together around the heading
 * and can still land behind it, so the layer dims and a soft scrim is laid
 * over it — under the content, which is z-index 2.
 */
.cl-fih--dim .cl-fih__images { opacity: var(--cl-fih-mobile-opacity, 1); }

.cl-fih__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: none;
	background: radial-gradient(
		ellipse at 50% 50%,
		var(--cl-fih-bg, #14151a) 0%,
		rgba(0, 0, 0, 0) 72%
	);
	opacity: var(--cl-fih-scrim, 0.72);
	pointer-events: none;
}

.cl-fih--dim .cl-fih__scrim { display: block; }

@media (prefers-reduced-motion: reduce) {
	.cl-fih__image {
		transition: none !important;
	}
}