/*
 * ARN Hero shared styles: tokens, frame, media, buttons, the play / pause
 * button, corner links and their dialogs, helpers. Every ARN Hero widget
 * (Story, Panels and the designs that follow) builds on this file; a design
 * stylesheet only adds its own layout.
 *
 * Colours come from the Vendix palette (--vendix-color-*, with the palette
 * value as fallback). The widget's Elementor colour controls start empty and
 * set the --vdx-* tokens below only when the editor picks a colour.
 *
 * Frame tokens set by the widget controls:
 * --vdx-hero-height  height (empty: the full screen)
 * --vdx-safe-top     room kept free for a transparent header over the widget
 * --vdx-speed-user   transition duration
 *
 * Element rules carry two classes, so theme rules such as ".entry-content p",
 * "[type=button]:hover" or Elementor's ".elementor img" do not change them.
 */

.vdx-hero {
	--vdx-gutter: clamp(20px, 4.4vw, 64px);
	--vdx-speed: var(--vdx-speed-user, 900ms);
	--vdx-ease: cubic-bezier(0.22, 0.7, 0.18, 1);
	--vdx-tracking-tight: -0.02em;
	--vdx-tracking-wide: 0.16em;
	--vdx-title-leading: 1.04;
	--vdx-sign: 1;
	--vdx-on-media: #ffffff;
	--vdx-on-media-soft: color-mix(in srgb, #ffffff 80%, transparent);
	--vdx-accent: var(--vendix-color-accent, var(--vt-accent, #d8b25b));
	--vdx-primary: var(--vendix-color-primary, var(--vt-accent, #d71920));
	--vdx-ink: var(--vendix-color-secondary, #111827);
	--vdx-shade: var(--vendix-color-secondary, #111827);
	--vdx-shade-opacity: 1;
	--vdx-focus-ring: var(--vdx-accent);

	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	inline-size: 100%;
	block-size: var(--vdx-hero-height, 100svh);
	min-block-size: 520px;
	color: var(--vdx-on-media);
	isolation: isolate;
}

/* Outside an Elementor page (Full Modal content, a template) the box model stays the same. */
.vdx-hero *,
.vdx-hero *::before,
.vdx-hero *::after {
	box-sizing: border-box;
}

.vdx-hero.vdx-hero--rtl {
	--vdx-sign: -1;
}

/* Arabic joins letters: no extra tracking, more line height. */
.vdx-hero:lang(ar) {
	--vdx-tracking-tight: normal;
	--vdx-tracking-wide: normal;
	--vdx-title-leading: 1.3;
}

@media (prefers-reduced-motion: reduce) {
	.vdx-hero {
		--vdx-speed: 200ms;
	}
}

/* ------------------------------------------------------------------ */
/* Media: the customer's image or video fills its box                  */
/* ------------------------------------------------------------------ */

.vdx-hero .vdx-hero-media__el {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: var(--vdx-focus, 50% 50%);
}

/* Ken Burns: a slow drift on the active image (the design adds the trigger). */
@keyframes vdx-hero-drift {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.07);
	}
}

/* ------------------------------------------------------------------ */
/* Controls: theme button rules do not reach the widget's own buttons  */
/* ------------------------------------------------------------------ */

.vdx-hero .vdx-control {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-align: inherit;
	text-decoration: none;
	text-transform: none;
	white-space: normal;
	cursor: pointer;
}

.vdx-hero .vdx-control:is(:hover, :focus) {
	background: none;
	color: inherit;
}

.vdx-hero .vdx-control:focus-visible {
	outline: 2px solid var(--vdx-focus-ring);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Buttons (slide links)                                               */
/* ------------------------------------------------------------------ */

.vdx-hero .vdx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 48px;
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: var(--vdx-btn-radius, 999px);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.vdx-hero .vdx-btn:focus-visible {
	outline: 2px solid var(--vdx-focus-ring);
	outline-offset: 3px;
}

.vdx-hero .vdx-btn--primary {
	background-color: var(--vdx-primary);
	color: #ffffff;
}

.vdx-hero .vdx-btn--primary:hover {
	background-color: color-mix(in srgb, var(--vdx-primary) 84%, #000000);
	color: #ffffff;
	text-decoration: none;
}

/*
 * Second and third buttons: a white outline on media. Light surfaces (Story
 * split panel, a white card) set the --vdx-btn-line tokens to the dark colour.
 */
.vdx-hero .vdx-btn--secondary {
	border-color: var(--vdx-btn-line, color-mix(in srgb, #ffffff 65%, transparent));
	background-color: transparent;
	color: var(--vdx-btn-ink, #ffffff);
}

.vdx-hero .vdx-btn--secondary:hover {
	border-color: var(--vdx-btn-line, color-mix(in srgb, #ffffff 65%, transparent));
	background-color: var(--vdx-btn-hover-bg, color-mix(in srgb, #ffffff 14%, transparent));
	color: var(--vdx-btn-hover-ink, #ffffff);
	text-decoration: none;
}

/* Directional icons (arrows) point the other way in RTL. */
.vdx-hero.vdx-hero--rtl .vdx-flip-rtl {
	transform: scaleX(-1);
}

/* ------------------------------------------------------------------ */
/* Play / pause button                                                 */
/* ------------------------------------------------------------------ */

.vdx-hero .vdx-hero-toggle {
	display: inline-grid;
	flex: none;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid color-mix(in srgb, #ffffff 55%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--vdx-ink) 35%, transparent);
	color: #ffffff;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease;
}

.vdx-hero .vdx-hero-toggle:is(:hover, :focus) {
	background: color-mix(in srgb, var(--vdx-ink) 60%, transparent);
	color: #ffffff;
}

.vdx-hero .vdx-hero-toggle svg {
	inline-size: 16px;
	block-size: 16px;
}

.vdx-hero .vdx-hero-toggle .vdx-icon-play,
.vdx-hero .vdx-hero-toggle[data-state="paused"] .vdx-icon-pause {
	display: none;
}

.vdx-hero .vdx-hero-toggle[data-state="paused"] .vdx-icon-play {
	display: block;
}

/* Variant for light surfaces (Story split panel). */
.vdx-hero .vdx-hero-toggle--on-light {
	border-color: var(--vendix-color-border, #d9dde5);
	background: #ffffff;
	color: var(--vendix-color-heading, #111827);
}

.vdx-hero .vdx-hero-toggle--on-light:is(:hover, :focus) {
	background: var(--vendix-color-bg-light, #f7f8fa);
	color: var(--vendix-color-heading, #111827);
}

/* ------------------------------------------------------------------ */
/* Corner links                                                        */
/* ------------------------------------------------------------------ */

/*
 * Designs move the links clear of their own navigation with
 * --vdx-links-top and --vdx-links-bottom.
 */
.vdx-hero-links {
	position: absolute;
	z-index: 6;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	inset-block-start: var(--vdx-links-top, calc(var(--vdx-safe-top, 0px) + 16px));
	inset-inline-start: var(--vdx-gutter);
	max-inline-size: calc(50% - var(--vdx-gutter));
}

.vdx-hero-links--top-end {
	justify-content: flex-end;
	inset-inline: auto var(--vdx-gutter);
}

.vdx-hero-links--bottom-start,
.vdx-hero-links--bottom-end {
	inset-block: auto var(--vdx-links-bottom, 20px);
}

.vdx-hero-links--bottom-end {
	justify-content: flex-end;
	inset-inline: auto var(--vdx-gutter);
}

.vdx-hero .vdx-hero-link {
	position: relative;
	min-block-size: 40px;
	padding-block: 10px;
	color: var(--vdx-link-color, var(--vdx-on-media));
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--vdx-tracking-wide);
	text-transform: uppercase;
}

.vdx-hero .vdx-hero-link::after {
	content: "";
	position: absolute;
	inset-block-end: 6px;
	inset-inline: 0;
	block-size: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.vdx-hero.vdx-hero--rtl .vdx-hero-link::after {
	transform-origin: right;
}

.vdx-hero .vdx-hero-link:is(:hover, :focus) {
	color: var(--vdx-link-hover-color, var(--vdx-link-color, var(--vdx-on-media)));
}

.vdx-hero .vdx-hero-link:hover::after,
.vdx-hero .vdx-hero-link[aria-expanded="true"]::after {
	transform: scaleX(1);
}

/* ------------------------------------------------------------------ */
/* Dialogs: side panel or modal inside the widget                      */
/* ------------------------------------------------------------------ */

.vdx-hero .vdx-hero-popup {
	--vdx-popup-speed: calc(var(--vdx-speed) * 0.4);

	position: absolute;
	z-index: 30;
	inset: 0;
	display: flex;
	color: var(--vdx-popup-color, var(--vendix-color-text, #374151));
}

.vdx-hero .vdx-hero-popup[hidden] {
	display: none;
}

.vdx-hero .vdx-hero-popup__backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--vdx-ink) 55%, transparent);
	opacity: 0;
	transition: opacity var(--vdx-popup-speed) ease;
}

.vdx-hero .vdx-hero-popup.is-open .vdx-hero-popup__backdrop {
	opacity: 1;
}

.vdx-hero .vdx-hero-popup__surface {
	position: relative;
	display: flex;
	flex-direction: column;
	inline-size: var(--vdx-popup-width, min(440px, 100%));
	max-inline-size: 100%;
	max-block-size: 100%;
	overflow: auto;
	background: var(--vdx-popup-bg, #ffffff);
	box-shadow: 0 24px 60px color-mix(in srgb, var(--vdx-ink) 30%, transparent);
	outline: none;
	overscroll-behavior: contain;
	transition:
		transform var(--vdx-popup-speed) var(--vdx-ease),
		opacity var(--vdx-popup-speed) ease;
}

/* Side panel: full height at the start or end edge; it slides in from that edge. */
.vdx-hero .vdx-hero-popup--panel {
	--vdx-popup-from: 1;

	justify-content: flex-end;
}

.vdx-hero .vdx-hero-popup--panel.vdx-hero-popup--start {
	--vdx-popup-from: -1;

	justify-content: flex-start;
}

.vdx-hero .vdx-hero-popup--panel .vdx-hero-popup__surface {
	block-size: 100%;
	padding-block-start: var(--vdx-safe-top, 0px);
	transform: translateX(calc(var(--vdx-popup-from) * var(--vdx-sign) * 100%));
}

/* Modal: a centred card. */
.vdx-hero .vdx-hero-popup--modal {
	align-items: center;
	justify-content: center;
	padding: calc(var(--vdx-safe-top, 0px) + 16px) 16px 16px;
}

.vdx-hero .vdx-hero-popup--modal .vdx-hero-popup__surface {
	--vdx-popup-width: min(640px, 100%);

	border-radius: 18px;
	opacity: 0;
	transform: translateY(18px) scale(0.98);
}

.vdx-hero .vdx-hero-popup.is-open .vdx-hero-popup__surface {
	opacity: 1;
	transform: none;
}

.vdx-hero .vdx-hero-popup__head {
	position: sticky;
	z-index: 1;
	inset-block-start: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 12px;
	background: inherit;
}

.vdx-hero .vdx-hero-popup__title {
	margin: 0;
	color: var(--vdx-popup-title-color, var(--vendix-color-heading, #111827));
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.25;
}

.vdx-hero .vdx-hero-popup__close {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	margin-inline-start: auto;
	border-radius: 50%;
	color: var(--vendix-color-heading, #111827);
}

.vdx-hero .vdx-hero-popup__close:is(:hover, :focus) {
	background: var(--vendix-color-bg-light, #f7f8fa);
	color: var(--vendix-color-heading, #111827);
}

.vdx-hero .vdx-hero-popup__close:focus-visible {
	outline-color: var(--vendix-color-secondary, #111827);
}

.vdx-hero .vdx-hero-popup__close svg {
	inline-size: 18px;
	block-size: 18px;
}

.vdx-hero .vdx-hero-popup__body {
	padding: 4px 24px 28px;
	font-size: 1rem;
	line-height: 1.65;
}

.vdx-hero .vdx-hero-popup__body > :first-child {
	margin-block-start: 0;
}

.vdx-hero .vdx-hero-popup__body > :last-child {
	margin-block-end: 0;
}

.vdx-hero .vdx-hero-popup__body a:focus-visible {
	outline: 2px solid var(--vendix-color-secondary, #111827);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.vdx-hero-links {
		gap: 0 16px;
	}

	.vdx-hero .vdx-hero-popup__head {
		padding: 18px 18px 10px;
	}

	.vdx-hero .vdx-hero-popup__body {
		padding: 4px 18px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vdx-hero .vdx-hero-popup__backdrop,
	.vdx-hero .vdx-hero-popup__surface {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Helpers                                                             */
/* ------------------------------------------------------------------ */

.vdx-hero .vdx-sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.vdx-hero .is-dragging {
	cursor: grabbing;
	user-select: none;
}

/* Editor message when the widget has nothing to show. */
.vdx-hero-empty {
	padding: 24px;
	border: 1px dashed var(--vendix-color-border, #d9dde5);
	background: var(--vendix-color-bg-light, #f7f8fa);
	color: var(--vendix-color-text, #374151);
	font-size: 14px;
	text-align: center;
}