/* Thrillophilia-style Hero Image Strip
 * All sizing controlled via CSS custom properties set inline by Elementor controls.
 */

.ths-hero-strip-outer {
	overflow: hidden;
	width: 100%;
}

.ths-hero-strip-outer.ths-full-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.ths-hero-strip {
	--ths-img-size: 110px;
	--ths-img-radius: 8px;
	--ths-img-gap: 8px;
	--ths-row-gap: 10px;
	--ths-row-overlap: 0px;
	--ths-peek-pct: 50;
	--ths-grayscale: 0%;
	--ths-grayscale-hover: 0%;
	--ths-hover-duration: 500ms;
	--ths-hover-easing: ease-in-out;
	--ths-hover-scale: 1;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 20px 0;
}

.ths-hero-strip * {
	box-sizing: border-box;
}

/* ---------- Side clusters ---------- */
.ths-side {
	display: flex;
	flex-direction: column;
	gap: var(--ths-row-gap);
	flex: 0 0 auto;
	min-width: 0;
}

.ths-row {
	display: flex;
	gap: var(--ths-img-gap);
}

/* Left side rows pack from the left (default) so a narrower row's outer
   edge still sits flush at the true left edge. Right side rows must pack
   from the right instead, so a narrower row's outer edge sits flush at
   the true right edge — otherwise a shorter row leaves an ugly gap before
   the screen edge instead of reaching it. */
.ths-side-right .ths-row {
	justify-content: flex-end;
}

/* Top row's tiles sit flush against their bottom edge; bottom row's tiles
   sit flush against their top edge — so the two rows "meet" cleanly along
   the middle gap regardless of each tile's crescendo size. */
.ths-row-top {
	align-items: flex-end;
}

.ths-row-bottom {
	align-items: flex-start;
	margin-top: var(--ths-row-overlap);
}

/* ---------- Image wrap (square tiles, with per-position crescendo scale) ----------
 * --ths-scale defaults to 1 and is overridden per nth-child below, so the
 * tiles get progressively bigger the further they sit from the center text
 * (matching the reference layout), while a single "Image Size" control
 * still scales the whole crescendo proportionally.
 */
.ths-img-wrap {
	--ths-scale: 1;
	position: relative;
	width: calc(var(--ths-img-size) * var(--ths-scale));
	height: calc(var(--ths-img-size) * var(--ths-scale));
	overflow: hidden;
	border-radius: var(--ths-img-radius);
	flex: 0 0 auto;
	perspective: 900px;
}

/* ---------- Flip-card structure (no mirrored end result) ----------
 * Two identical copies of the photo are stacked: front (normal) and back
 * (pre-rotated 180deg on itself). The wrapper rotates the whole inner unit
 * on hover; once it passes 90deg the back face becomes visible, and
 * because that face was already counter-rotated, it displays the SAME,
 * non-mirrored photo — so the motion is a genuine flip, but the resting
 * hover state looks identical to the resting state, just "flipped".
 */
.ths-flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform: rotateY(0deg) scale(1);
	transition: transform var(--ths-hover-duration) var(--ths-hover-easing);
	will-change: transform;
}

.ths-hero-strip.ths-hover-enabled .ths-img-wrap:hover .ths-flip-inner {
	transform: rotateY(180deg) scale(var(--ths-hover-scale)) !important;
}

.ths-flip-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.ths-flip-back {
	transform: rotateY(180deg);
}

.ths-flip-face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(var(--ths-grayscale));
	transition: filter var(--ths-hover-duration) var(--ths-hover-easing);
}

.ths-hero-strip.ths-hover-enabled .ths-img-wrap:hover .ths-flip-face img {
	filter: grayscale(var(--ths-grayscale-hover)) !important;
}

/* ---------- Crescendo: tiles grow larger the further from the center ----------
 * LEFT rows are written outer-edge-first in the repeater, so nth-child(1) is
 * the outermost (largest) tile, shrinking toward the last child (nearest
 * the heading). RIGHT rows are mirrored: nth-child(1) is nearest the
 * heading (smallest), growing toward the last child (outermost/peek).
 */
.ths-side-left .ths-row-top .ths-img-wrap:nth-child(1) { --ths-scale: 1.05; }
.ths-side-left .ths-row-top .ths-img-wrap:nth-child(2) { --ths-scale: 0.92; }
.ths-side-left .ths-row-top .ths-img-wrap:nth-child(3) { --ths-scale: 0.8; }

.ths-side-left .ths-row-bottom .ths-img-wrap:nth-child(1) { --ths-scale: 1.2; }
.ths-side-left .ths-row-bottom .ths-img-wrap:nth-child(2) { --ths-scale: 1.0; }
.ths-side-left .ths-row-bottom .ths-img-wrap:nth-child(3) { --ths-scale: 0.85; }
.ths-side-left .ths-row-bottom .ths-img-wrap:nth-child(4) { --ths-scale: 0.72; }

.ths-side-right .ths-row-top .ths-img-wrap:nth-child(1) { --ths-scale: 0.72; }
.ths-side-right .ths-row-top .ths-img-wrap:nth-child(2) { --ths-scale: 0.85; }
.ths-side-right .ths-row-top .ths-img-wrap:nth-child(3) { --ths-scale: 1.0; }
.ths-side-right .ths-row-top .ths-img-wrap:nth-child(4) { --ths-scale: 1.2; }

.ths-side-right .ths-row-bottom .ths-img-wrap:nth-child(1) { --ths-scale: 0.8; }
.ths-side-right .ths-row-bottom .ths-img-wrap:nth-child(2) { --ths-scale: 0.92; }
.ths-side-right .ths-row-bottom .ths-img-wrap:nth-child(3) { --ths-scale: 1.05; }

/* ---------- Peek / edge-crop effect ---------- */
.ths-side-left .ths-peek-start .ths-img-wrap.ths-peek-img {
	margin-left: calc(var(--ths-img-size) * var(--ths-scale) * -1 * var(--ths-peek-pct) / 100);
}

.ths-side-right .ths-peek-end .ths-img-wrap.ths-peek-img {
	margin-right: calc(var(--ths-img-size) * var(--ths-scale) * -1 * var(--ths-peek-pct) / 100);
}

/* ---------- Center text ---------- */
.ths-center {
	flex: 1 1 auto;
	text-align: center;
	min-width: 260px;
	padding: 0 20px;
}

.ths-heading {
	margin: 0 0 16px 0;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.15;
	color: #1a1a1a;
}

.ths-highlight {
	color: #F5831F;
}

.ths-subheading {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	color: #5a5a5a;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.ths-hero-strip {
		--ths-img-size: 80px;
		gap: 20px;
	}
	.ths-heading {
		font-size: 32px;
	}
}

/* Tablet-only "hide completely" toggle (768px–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
	.ths-hero-strip.ths-tablet-hide .ths-side {
		display: none;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.ths-heading {
		font-size: 24px;
	}
	.ths-subheading {
		font-size: 14px;
	}

	/* MODE: compact (default) — keep the exact same left/center/right
	   horizontal layout as desktop, just smaller and with fewer tiles per
	   row so it doesn't get cramped on a narrow screen. */
	.ths-hero-strip.ths-mobile-compact {
		--ths-img-size: 46px;
		--ths-img-gap: 5px;
		--ths-row-gap: 6px;
		gap: 8px;
		padding: 12px 0;
	}
	.ths-hero-strip.ths-mobile-compact .ths-side {
		max-width: 26%;
	}
	.ths-hero-strip.ths-mobile-compact .ths-center {
		min-width: 0;
		padding: 0 6px;
	}
	/* Left side: peek tile is the FIRST child — keep it + 1 more, hide rest */
	.ths-hero-strip.ths-mobile-compact .ths-side-left .ths-img-wrap:nth-child(n+3) {
		display: none;
	}
	/* Right side: peek tile is the LAST child — keep it + 1 more, hide the rest */
	.ths-hero-strip.ths-mobile-compact .ths-side-right .ths-img-wrap:nth-last-child(n+3) {
		display: none;
	}

	/* MODE: stack — all images dumped in a wrapped grid below the text */
	.ths-hero-strip.ths-mobile-stack {
		flex-direction: column;
	}
	.ths-hero-strip.ths-mobile-stack .ths-side {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		max-width: 100%;
	}
	.ths-hero-strip.ths-mobile-stack .ths-row {
		flex-wrap: wrap;
		justify-content: center;
	}
	.ths-hero-strip.ths-mobile-stack .ths-peek-img {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* MODE: hide — images removed entirely, text only */
	.ths-hero-strip.ths-mobile-hide .ths-side {
		display: none;
	}
}