/* Framed Hero Carousel
 * Values set in the Elementor panel override these defaults.
 */

.fhc {
	--fhc-slide-width: 25%;
	--fhc-ratio: 126;
	--fhc-side-offset: 131%;
	--fhc-side-shift-y: 12%;
	--fhc-side-rotate: 14deg;
	--fhc-side-scale: 1;
	--fhc-side-opacity: 1;
	--fhc-stage-pad: 30px;
	--fhc-frame-color: #ef4836;
	--fhc-frame-top: 28px;
	--fhc-frame-side: 6px;
	--fhc-frame-bottom: 6px;
	--fhc-caption-gap: 24px;
	--fhc-title-gap: 8px;
	--fhc-speed: 700ms;
	--fhc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--fhc-arrow-size: 48px;
	--fhc-arrow-color: #fff;
	--fhc-arrow-bg: #ef4836;
	--fhc-dot-color: #e3d9d2;
	--fhc-dot-active: #ef4836;

	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Clip sideways only, so tilted corners are never cut off at the top or bottom. */
@supports (overflow: clip) {
	.fhc {
		overflow-x: clip;
		overflow-y: visible;
	}
}

.fhc:focus-visible {
	outline: 2px solid var(--fhc-frame-color);
	outline-offset: 4px;
}

@media (max-width: 1024px) {
	.fhc {
		--fhc-slide-width: 42%;
		--fhc-ratio: 135;
		--fhc-side-offset: 115%;
		--fhc-side-shift-y: 8%;
		--fhc-side-rotate: 12deg;
		--fhc-frame-top: 24px;
	}
}

@media (max-width: 767px) {
	.fhc {
		--fhc-slide-width: 69%;
		--fhc-ratio: 163;
		--fhc-side-offset: 125%;
		--fhc-side-shift-y: 4%;
		--fhc-side-rotate: 10deg;
		--fhc-side-scale: 0.95;
		--fhc-frame-top: 20px;
		--fhc-frame-side: 4px;
		--fhc-frame-bottom: 4px;
		--fhc-caption-gap: 32px;
	}
}

/* ---------- Stage: every slide sits in the same grid cell ---------- */

.fhc-stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	align-items: center;
	padding-top: var(--fhc-stage-pad);
	padding-bottom: var(--fhc-stage-pad);
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.fhc-slide {
	grid-area: 1 / 1;
	position: relative;
	box-sizing: border-box;
	width: var(--fhc-slide-width);
	max-width: 100%;
	aspect-ratio: 100 / var(--fhc-ratio);
	background-color: transparent;
	transform-origin: 50% 50%;
	cursor: pointer;
	will-change: transform, opacity;
	transition:
		transform var(--fhc-speed) var(--fhc-ease),
		opacity var(--fhc-speed) var(--fhc-ease),
		background-color var(--fhc-speed) var(--fhc-ease);
}

.fhc-media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	transition:
		top var(--fhc-speed) var(--fhc-ease),
		right var(--fhc-speed) var(--fhc-ease),
		bottom var(--fhc-speed) var(--fhc-ease),
		left var(--fhc-speed) var(--fhc-ease);
}

.fhc-media a,
.fhc-media img {
	display: block;
	width: 100%;
	height: 100%;
}

.fhc .fhc-media img {
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: center;
	-webkit-user-drag: none;
	pointer-events: none;
}

/* Center slide */
.fhc-slide[data-pos="0"] {
	z-index: 3;
	transform: translate(0, 0) rotate(0deg) scale(1);
	background-color: var(--fhc-frame-color);
	cursor: default;
}

.fhc-slide[data-pos="0"] .fhc-media,
.fhc--frame-all .fhc-slide[data-pos="-1"] .fhc-media,
.fhc--frame-all .fhc-slide[data-pos="1"] .fhc-media {
	top: var(--fhc-frame-top);
	right: var(--fhc-frame-side);
	bottom: var(--fhc-frame-bottom);
	left: var(--fhc-frame-side);
}

.fhc--frame-all .fhc-slide[data-pos="-1"],
.fhc--frame-all .fhc-slide[data-pos="1"] {
	background-color: var(--fhc-frame-color);
}

/* Side slides */
.fhc-slide[data-pos="-1"],
.fhc-slide[data-pos="1"] {
	z-index: 2;
	opacity: var(--fhc-side-opacity);
}

.fhc-slide[data-pos="-1"] {
	transform:
		translate(calc(-1 * var(--fhc-side-offset)), var(--fhc-side-shift-y))
		rotate(calc(-1 * var(--fhc-side-rotate)))
		scale(var(--fhc-side-scale));
}

.fhc-slide[data-pos="1"] {
	transform:
		translate(var(--fhc-side-offset), var(--fhc-side-shift-y))
		rotate(var(--fhc-side-rotate))
		scale(var(--fhc-side-scale));
}

/* Waiting slides, parked just past each side */
.fhc-slide[data-pos="-2"],
.fhc-slide[data-pos="2"] {
	z-index: 1;
	opacity: 0;
	pointer-events: none;
}

.fhc-slide[data-pos="-2"] {
	transform:
		translate(calc(-1.7 * var(--fhc-side-offset)), var(--fhc-side-shift-y))
		rotate(calc(-1.5 * var(--fhc-side-rotate)))
		scale(calc(var(--fhc-side-scale) * 0.85));
}

.fhc-slide[data-pos="2"] {
	transform:
		translate(calc(1.7 * var(--fhc-side-offset)), var(--fhc-side-shift-y))
		rotate(calc(1.5 * var(--fhc-side-rotate)))
		scale(calc(var(--fhc-side-scale) * 0.85));
}

/* A short nudge the first time the carousel is seen, so it reads as swipeable.
   It pulls to the left, is released, and snaps back to where it started.
   --fhc-hint-accel decides how hard it snaps back: higher is sharper. */
@keyframes fhc-hint {
	0%   { transform: translateX(0); animation-timing-function: cubic-bezier(0.25, 0.75, 0.35, 1); }
	42%  { transform: translateX(calc(-1 * var(--fhc-hint-shift, 60px))); animation-timing-function: cubic-bezier(var(--fhc-hint-accel, 0.6), 0, 0.22, 1); }
	100% { transform: translateX(0); }
}

.fhc-stage.is-hinting {
	animation: fhc-hint var(--fhc-hint-speed, 700ms) linear both;
}

/* With the bounce on, its starting position acts like a wall: it snaps back,
   hits home, and rebounds past it once before settling. --fhc-hint-bounce is
   how far it rebounds, as a percentage of the nudge distance. */
@keyframes fhc-hint-bounce {
	0%   { transform: translateX(0); animation-timing-function: cubic-bezier(0.16, 0.84, 0.34, 1); }
	26%  { transform: translateX(calc(-1 * var(--fhc-hint-shift, 60px))); animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1); }
	62%  { transform: translateX(calc(var(--fhc-hint-bounce, 15) / 100 * var(--fhc-hint-shift, 60px))); }
	80%  { transform: translateX(calc(var(--fhc-hint-bounce, 15) / -263 * var(--fhc-hint-shift, 60px))); }
	92%  { transform: translateX(calc(var(--fhc-hint-bounce, 15) / 714 * var(--fhc-hint-shift, 60px))); }
	100% { transform: translateX(0); }
}

.fhc--hint-bounce .fhc-stage.is-hinting {
	animation: fhc-hint-bounce var(--fhc-hint-speed, 700ms) linear both;
}

@media (prefers-reduced-motion: reduce) {
	.fhc-stage.is-hinting {
		animation: none;
	}
}

/* Used by the script to jump without animating */
.fhc.fhc-instant .fhc-slide,
.fhc.fhc-instant .fhc-media,
.fhc.fhc-instant .fhc-caption,
.fhc-slide.fhc-instant,
.fhc-slide.fhc-instant .fhc-media {
	transition: none !important;
}

/* ---------- Arrows ---------- */

.fhc .fhc-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--fhc-arrow-size);
	height: var(--fhc-arrow-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fhc-arrow-bg);
	color: var(--fhc-arrow-color);
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
	transform: translateY(-50%);
	transition: transform 150ms ease, filter 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.fhc .fhc-arrow:hover,
.fhc .fhc-arrow:focus {
	background: var(--fhc-arrow-bg);
	color: var(--fhc-arrow-color);
	filter: brightness(0.9);
}

.fhc .fhc-arrow:active {
	transform: translateY(-50%) scale(0.94);
}

.fhc .fhc-arrow:focus-visible,
.fhc .fhc-dot:focus-visible,
.fhc .fhc-button:focus-visible,
.fhc .fhc-media-link:focus-visible {
	outline: 2px solid var(--fhc-frame-color);
	outline-offset: 3px;
}

.fhc .fhc-arrow svg {
	width: 50%;
	height: 50%;
}

.fhc-arrow--prev { left: 12px; }
.fhc-arrow--next { right: 12px; }

/* ---------- Which screens show the arrows and dots ---------- */

/* Elementor's own breakpoints: phones end at 767px, tablets at 1024px. */
@media (max-width: 1024px) {
	.fhc--arrows-desktop .fhc-arrow,
	.fhc--dots-desktop .fhc-dots {
		display: none;
	}
}

@media (max-width: 767px) {
	.fhc--arrows-tablet .fhc-arrow,
	.fhc--dots-tablet .fhc-dots {
		display: none;
	}
}

@media (min-width: 768px) {
	.fhc--arrows-mobile .fhc-arrow,
	.fhc--dots-mobile .fhc-dots {
		display: none;
	}
}

/* ---------- Captions: stacked, only the current one shows ---------- */

.fhc-captions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-top: var(--fhc-caption-gap);
	text-align: center;
}

.fhc-caption {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition:
		opacity calc(var(--fhc-speed) * 0.5) ease,
		transform calc(var(--fhc-speed) * 0.5) ease,
		visibility 0s linear calc(var(--fhc-speed) * 0.5);
}

.fhc-caption.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity calc(var(--fhc-speed) * 0.6) ease calc(var(--fhc-speed) * 0.35),
		transform calc(var(--fhc-speed) * 0.6) var(--fhc-ease) calc(var(--fhc-speed) * 0.35),
		visibility 0s;
}

.fhc .fhc-title {
	margin: 0;
	padding: 0;
	line-height: 1.1;
}

.fhc .fhc-title-highlight {
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.1em 0.3em 0.05em;
	background-color: #ef4836;
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
}

.fhc .fhc-title-plain {
	display: block;
	margin-top: var(--fhc-title-gap);
	color: #ef4836;
	font-weight: 800;
	text-transform: uppercase;
}

.fhc .fhc-title-highlight:only-child {
	margin-bottom: 0;
}

.fhc .fhc-desc {
	display: inline-block;
	max-width: 560px;
	margin-top: 14px;
	line-height: 1.55;
}

.fhc .fhc-desc p:last-child {
	margin-bottom: 0;
}

.fhc .fhc-button-wrap {
	margin: 0;
}

.fhc .fhc-button {
	display: inline-block;
	margin-top: 20px;
	padding: 12px 26px;
	background-color: #ef4836;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 150ms ease, color 150ms ease;
}

.fhc .fhc-button:hover {
	background-color: #c8321f;
	color: #fff;
}

/* ---------- Dots ---------- */

.fhc-dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.fhc .fhc-dot {
	width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fhc-dot-color);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.fhc .fhc-dot:hover,
.fhc .fhc-dot:focus {
	background: var(--fhc-dot-color);
}

.fhc .fhc-dot[aria-current="true"] {
	background: var(--fhc-dot-active);
	transform: scale(1.25);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.fhc .fhc-slide,
	.fhc .fhc-media,
	.fhc .fhc-caption,
	.fhc .fhc-caption.is-active {
		transition-duration: 1ms !important;
		transition-delay: 0s !important;
	}
}