/* Likinova hero slider — hand-rolled replacement for Slider Revolution.
   Only targets the >=1024px layout; below that the theme already swaps in
   a static mobile hero image, so no responsive rules are needed here.

   Real Slider Revolution fluidly scales font-size/image dimensions with
   viewport width (measured on cz.likinova.cz: continuous interpolation
   from 1025px up to a 1600px cap, flat outside that range) while leaving
   every layer's anchor offset constant. --lik-h/--lik-s below are
   precomputed CSS clamp() expressions (built in PHP) that reproduce that
   curve; --lik-x/--lik-y are plain constants.

   Every selector below is prefixed with `.lik-hero` (not just the bare
   `.lik-hero__*` class) purely for specificity: Elementor ships a global
   `.elementor img { height: auto; max-width: 100% }` rule, and a
   class+tag selector like that outranks a single class selector, which
   silently broke height/aspect-ratio on the image layers. Two classes
   beats it reliably. */

/* Elementor puts the shortcode widget inside a flex container as the
   sole flex item. Every child of .lik-hero below is position:absolute,
   so .lik-hero itself has no intrinsic content width — left to its
   default (shrink-to-fit) sizing, that flex item collapses to 0 and
   width:100% on .lik-hero then resolves against a 0 containing block.
   Forcing the flex item to grow/stretch fixes the true root cause,
   unlike `width:100vw` (which overflows the viewport by the width of
   the scrollbar and causes horizontal scrolling). */
.elementor-widget-shortcode:has(.lik-hero) {
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch;
}

.lik-hero {
	/* Every image layer's size is (its own reference size at the 1600px
	   width cap) × this one shared scale factor — confirmed by measuring
	   cz.likinova.cz at a shorter viewport (850px tall): every layer
	   shrank by the *same* ratio, not independently. The factor is the
	   smaller of: how far width has progressed from 1025px to the
	   1600px cap (0.652 → 1), and how the viewport height compares to
	   the reference 900px used when that cap was measured. */
	--lik-scale: min(
		clamp(0.652, calc(0.652 + 0.348 * (100vw - 1025px) / 575px), 1),
		calc(100vh / 900px)
	);
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #fff;
}

.lik-hero .lik-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms linear;
	pointer-events: none;
}

.lik-hero .lik-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

.lik-hero .lik-hero__layer {
	position: absolute;
	opacity: 0;
	transform: var(--lik-rest, none);
	will-change: transform, opacity;
}

/* Entrance animation only applies while the ancestor slide carries
   .is-active — adding/removing that class starts/stops the keyframes,
   so JS never has to reset anything to replay it on the next cycle. */
.lik-hero .lik-hero__slide.is-active .lik-hero__layer {
	animation-name: lik-layer-in;
	animation-duration: 800ms;
	animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	animation-fill-mode: forwards;
	animation-delay: var(--lik-delay, 0ms);
}

@keyframes lik-layer-in {
	from {
		opacity: 0;
		transform: var(--lik-rest, none) translate(var(--lik-from-x, 0px), var(--lik-from-y, 0px));
	}
	to {
		opacity: 1;
		transform: var(--lik-rest, none);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lik-hero .lik-hero__slide.is-active .lik-hero__layer {
		animation: none;
		opacity: 1;
	}
}

/* -- image layers -- */

.lik-hero .lik-hero__img {
	right: var(--lik-x);
	height: calc(var(--lik-h1) * var(--lik-scale));
	aspect-ratio: var(--lik-ratio);
	width: auto;
	object-fit: cover;
	max-width: none;
}

.lik-hero .lik-hero__img--big {
	top: 50%;
	--lik-rest: translateY(calc(-50% + var(--lik-y)));
}

.lik-hero .lik-hero__img--strip,
.lik-hero .lik-hero__img--portrait {
	bottom: var(--lik-y);
}

/* -- text layers -- */

.lik-hero .lik-hero__heading,
.lik-hero .lik-hero__sub {
	left: var(--lik-x);
	top: 50%;
	width: var(--lik-w, auto);
	margin: var(--lik-y) 0 0;
	--lik-rest: translateY(-50%);
}

.lik-hero .lik-hero__heading {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: var(--lik-s);
	line-height: var(--lik-s);
	color: #1d3a77;
}

.lik-hero .lik-hero__sub {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: var(--lik-s);
	line-height: var(--lik-s);
	color: #ff7d43;
}

/* -- button layer -- */

.lik-hero .lik-hero__btn {
	left: var(--lik-x);
	top: 50%;
	margin: var(--lik-y) 0 0;
	--lik-rest: translateY(-50%);
	display: inline-block;
	padding: 8px 44px;
	border: 1px solid #ff7d44;
	color: #ff7d44;
	background: transparent;
	font-family: 'Cormorant Garamond', serif;
	font-size: 20px;
	line-height: 32px;
	letter-spacing: 2px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 200ms, color 200ms, border-color 200ms;
}
.lik-hero .lik-hero__btn:hover,
.lik-hero .lik-hero__btn:focus-visible {
	background-color: #ff8a56;
	border-color: #ff8a56;
	color: #fff;
}

/* -- arrows -- */

.lik-hero .lik-hero__arrows {
	position: absolute;
	left: 122px;
	bottom: 81px;
	z-index: 2;
	display: flex;
	gap: 8px;
}

.lik-hero .lik-hero__arrow {
	width: 50px;
	height: 50px;
	border: 0;
	background: transparent;
	color: #ff7d43;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	outline: none;
}
.lik-hero .lik-hero__arrow:focus-visible {
	outline: 2px solid #ff7d43;
	outline-offset: -4px;
}

.lik-hero .lik-hero__arrow svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}