/* ============================================================
   VIMAB Hero Video — variant E (full-bleed med gradient-overlay)

   Aktiveras genom .vimab-hero-row på en Beaver Builder-rad.
   Innehållet (BB-moduler) ligger på z-index 3, lagret med film
   och pil-prickar bakom det.
   ============================================================ */

:root {
	--vh-darkblue:    #073555;
	--vh-darker:      #052944;
	--vh-yellow:      #FDC600;
	--vh-yellow-50:   rgba(253, 198, 0, 0.5);
	--vh-glow-yellow: 0 0 16px rgba(253, 198, 0, 0.4), 0 0 30px rgba(253, 198, 0, 0.15);
}


/* ----------- Raden i sig ----------- */
.fl-row.vimab-hero-row {
	position: relative;
	background-color: var(--vh-darkblue);
	color: #fff;
	overflow: hidden;
	isolation: isolate; /* z-index ska bara gälla inom denna rad */
}

/* Säkerställ att radens normala innehåll ligger ovanför film-lagren */
.fl-row.vimab-hero-row > .fl-row-content-wrap,
.fl-row.vimab-hero-row .fl-row-content,
.fl-row.vimab-hero-row .fl-row-content-wrap > .fl-row-content {
	position: relative;
	z-index: 3;
}


/* ----------- Lager 1: filmen + gradient-overlays ----------- */
.vimab-hero-layer {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 68%;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.vimab-hero-layer .vimab-hero-video,
.vimab-hero-layer .vimab-hero-still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-size: cover;
	background-position: center;
	filter: contrast(1.08) saturate(0.95);
}

/* Lodrät gradient: mörkblå vänster → genomskinlig höger.
   Smälter filmen mot textsidan. */
.vimab-hero-layer .vimab-hero-gradient-h {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--vh-darkblue) 0%,
		rgba(7, 53, 85, 0.92) 18%,
		rgba(7, 53, 85, 0.55) 50%,
		rgba(7, 53, 85, 0.25) 85%,
		rgba(7, 53, 85, 0.15) 100%
	);
}

/* Topp/botten-fade så ramen inte uppfattas som en hård rektangel. */
.vimab-hero-layer .vimab-hero-gradient-v {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(7, 53, 85, 0.7) 0%,
		transparent 18%,
		transparent 82%,
		rgba(5, 41, 68, 0.6) 100%
	);
}


/* ----------- Lager 2: pil-prickar + callout ----------- */
.vimab-hero-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 68%;
	z-index: 2;
	pointer-events: none;
}

.vimab-hero-overlay .vh-dot {
	position: absolute;
	width: 22px;
	height: 22px;
	background: var(--vh-yellow);
	border-radius: 50%;
	box-shadow: var(--vh-glow-yellow);
}

.vimab-hero-overlay .vh-dot.echo {
	background: transparent;
	border: 2px solid var(--vh-yellow);
	box-shadow: none;
	animation: vh-echo-pulse 3.6s ease-out infinite;
	animation-delay: 1.8s;
}

@keyframes vh-echo-pulse {
	0%   { transform: scale(1);    opacity: 0.8; }
	100% { transform: scale(2.6);  opacity: 0;   }
}

.vimab-hero-overlay .vh-od-1 { top: 20%;    left: 18%; }
.vimab-hero-overlay .vh-od-3 { top: 55%;    right: 22%; }
.vimab-hero-overlay .vh-od-4 { bottom: 18%; left: 38%; }


/* Callout-grupp (leader-line + tagg) */
.vimab-hero-overlay .vh-leader {
	position: absolute;
	top: 56%;
	right: 18%;
	width: 30px;
	height: 1px;
	background: var(--vh-yellow-50);
}

.vimab-hero-overlay .vh-callout {
	position: absolute;
	top: 52%;
	right: 6%;
	font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vh-yellow);
	padding: 0.3rem 0.55rem;
	background: rgba(7, 53, 85, 0.85);
	border: 1px solid var(--vh-yellow-50);
	white-space: nowrap;
}


/* ----------- Responsive ----------- */
@media (max-width: 900px) {

	.fl-row.vimab-hero-row .vimab-hero-layer {
		/* Filmen täcker hela bredden men dämpas så texten är läsbar */
		width: 100%;
		opacity: 0.45;
	}

	.fl-row.vimab-hero-row .vimab-hero-overlay {
		width: 100%;
	}

	.fl-row.vimab-hero-row .vimab-hero-overlay .vh-od-3 {
		right: 10%;
	}

	.fl-row.vimab-hero-row .vimab-hero-overlay .vh-callout {
		right: 4%;
	}
}


/* ----------- A11y ----------- */
@media (prefers-reduced-motion: reduce) {
	.vimab-hero-overlay .vh-dot.echo {
		animation: none;
	}
}