/* =========================================================
   NovaFolio – HERO SLIDER (Bloc Gutenberg)
   Version définitive clean + robuste
   - Width = pilotée par layout (full/card)
   - Presets = mood only (ne touchent pas à la largeur)
   - Vertical spacing = GAP only (nvf-space-*)
   - Full layout = titre peut prendre très grande largeur
   ========================================================= */

/* ===================================
   WRAPPER GENERAL + TOKENS
   =================================== */

.nvf-hero-slider {
  position: relative;
  width: 100%;
  /*
    IMPORTANT:
    We keep slide/media clipping on .nvf-hero-slider-inner.
    The wrapper must NOT clip shadows (e.g. CTA glow hover).
  */
  overflow: visible;

  /* Width tokens (default fallback, overridden by layout) */
  --nvf-hero-content-max-width: clamp(46ch, 62vw, 78ch);

  /* Palette locale (n'affecte pas le reste du thème) */
  --nvf-hero-title-color: #ffffff;
  --nvf-hero-subtitle-color: #e5e7eb;

  --nvf-hero-btn-bg: #ffffff;
  --nvf-hero-btn-text: #0f172a;
  --nvf-hero-btn-border: transparent;
  --nvf-hero-btn-border-hover: transparent;
  --nvf-hero-btn-bg-hover: #0f172a;
  --nvf-hero-btn-text-hover: #ffffff;

  /* CTA sizing */
  --nvf-hero-btn-py: 10px;
  --nvf-hero-btn-px: 20px;
  --nvf-hero-btn-font-size: 0.92rem;
  --nvf-hero-btn-min-width: auto;
  --nvf-hero-btn-width: auto;
  --nvf-hero-btn-max-width: none;

  /* CTA responsive guardrails */
  --nvf-hero-btn-min: 0.78rem;
  --nvf-hero-btn-max: 0.95rem;
  --nvf-hero-btn-fluid: 1vw;

  /* Border radius CTA (fallback) */
  --nvf-hero-btn-radius: 999px;

  /* Button shadow (global)
     - Controlled by classes: nvf-btn-shadow-none / soft / strong
     - No filter / no animation
  */
  --nvf-hero-btn-shadow: 0 10px 22px rgba(15, 23, 42, 0.25);
  --nvf-hero-btn-shadow-hover: var(--nvf-hero-btn-shadow);

  /* Focus ring */
  --nvf-hero-focus-ring: rgba(255, 255, 255, 0.55);
  --nvf-hero-focus-ring-outer: rgba(15, 23, 42, 0.35);

  /* Overlay levers */
  --nvf-hero-overlay-mult: 1;

  /* Transition driven by JS */
  --nvf-transition-ms: 450ms;

  /* Step 4: scene/motion multipliers (set by JS/attrs) */
  --nvf-scene-mult: 1;
  --nvf-motion-amp: 1;

  /* Derived durations */
  --nvf-transition-dur-base: var(--nvf-transition-ms, 650ms);
  --nvf-transition-dur: calc(var(--nvf-transition-dur-base) * var(--nvf-scene-mult, 1));
}

/* Button shadow selector (global) */
.nvf-hero-slider.nvf-btn-shadow-none {
  --nvf-hero-btn-shadow: none;
  --nvf-hero-btn-shadow-hover: none;
  --nvf-glow-shadow: none;
}

.nvf-hero-slider.nvf-btn-shadow-soft {
  --nvf-hero-btn-shadow: 0 10px 22px rgba(15, 23, 42, 0.25);
  --nvf-hero-btn-shadow-hover: var(--nvf-hero-btn-shadow);
}

.nvf-hero-slider.nvf-btn-shadow-strong {
  --nvf-hero-btn-shadow: 0 18px 42px rgba(15, 23, 42, 0.35);
  --nvf-hero-btn-shadow-hover: var(--nvf-hero-btn-shadow);
}

/* Motion direction (set by JS via data-motion on slider) */
.nvf-hero-slider[data-motion="fade"] {
  --nvf-modern-shift-x: 0px;
  --nvf-modern-shift-y: 0px;
}

.nvf-hero-slider[data-motion="left"] {
  --nvf-modern-shift-x: -24px;
  --nvf-modern-shift-y: 0px;
}

.nvf-hero-slider[data-motion="right"] {
  --nvf-modern-shift-x: 24px;
  --nvf-modern-shift-y: 0px;
}

.nvf-hero-slider[data-motion="up"] {
  --nvf-modern-shift-x: 0px;
  --nvf-modern-shift-y: -18px;
}

/* ===================================
   LAYOUTS / HAUTEUR
   =================================== */

/* Layout FULL */
.nvf-hero-slider.nvf-hero-layout-full {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  background: #000;

  /* FULL = très large (titre pleine largeur lisible) */
  --nvf-hero-content-max-width: min(1800px, 95vw);

  /* Text on dark */
  --nvf-hero-title-color: #ffffff;
  --nvf-hero-subtitle-color: #e5e7eb;
}

/* Layout CARD */
.nvf-hero-slider.nvf-hero-layout-card {
  max-width: 1360px;
  margin: clamp(48px, 7vw, 96px) auto;
  border-radius: var(--nvf-hero-card-outer-radius, 32px);
  overflow: hidden;
  background: #f8fafc;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);

  --nvf-hero-content-max-width: min(760px, 92vw);

  /* Text on light */
  --nvf-hero-title-color: var(--nvf-color-headings, #0f172a);
  --nvf-hero-subtitle-color: #4b5563;
}

.nvf-hero-slider--small .nvf-hero-slider-inner {
  min-height: clamp(320px, 46vh, 520px);
}

.nvf-hero-slider--medium .nvf-hero-slider-inner {
  min-height: clamp(420px, 62vh, 720px);
}

.nvf-hero-slider--large .nvf-hero-slider-inner {
  min-height: clamp(520px, 78vh, 880px);
}

.nvf-hero-slider-inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* Clip slides/media (keeps rounded corners in card layout) */
  overflow: hidden;
  border-radius: inherit;
}

/* ===================================
   SLIDES (structure only)
   =================================== */

.nvf-hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  /* IMPORTANT (perf): do NOT keep will-change on every slide.
     Enable it only on the active/leaving slide and on the Ken Burns target.
     Persistent will-change can keep too many GPU layers alive and cause
     stutter / flashes / even freezes on some devices. */
}

.nvf-hero-slide.is-active,
.nvf-hero-slide.is-leaving {
  will-change: transform, opacity;
}

.nvf-hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.nvf-hero-slide.is-leaving {
  z-index: 3;
}

.nvf-hero-slide-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.nvf-hero-slide-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

/* Image default = cover */
.nvf-hero-slide-img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* imageSize */
.nvf-hero-img-cover .nvf-hero-slide-img {
  object-fit: cover !important;
}

/* Image fit preset: Cover — Safe Hero
   Still uses cover, but slightly biases framing upward to reduce top/bottom subject clipping
   on common hero heights. Users can still override with Image vertical position. */
/* Safe Hero should behave like "Center", but with a slightly safer Y framing.
   If user chooses Top/Bottom, those should win. */
.nvf-hero-img-cover-safe.nvf-hero-image-pos-center .nvf-hero-slide-img {
  object-fit: cover !important;
  object-position: 50% 42% !important;
}

.nvf-hero-img-contain .nvf-hero-slide-img {
  object-fit: contain !important;
  background-color: #000;
}

.nvf-hero-img-auto .nvf-hero-slide-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nvf-hero-img-auto .nvf-hero-slide-img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* imagePosition */
.nvf-hero-image-pos-top .nvf-hero-slide-img {
  object-position: top center !important;
}

.nvf-hero-image-pos-center .nvf-hero-slide-img {
  object-position: center center !important;
}

.nvf-hero-image-pos-bottom .nvf-hero-slide-img {
  object-position: bottom center !important;
}

/* ===================================
   PARALLAX (optional)
   =================================== */

/* Parallax must NOT fight Ken Burns (which animates transform on the img).
   So: parallax translate on .nvf-hero-slide-media via CSS var, scale/kenburns on .nvf-hero-slide-img. */
.nvf-hero-parallax .nvf-hero-slide-media {
  transform-origin: center;
  /* Translate + overscale on the SAME element so we never fight Ken Burns
     (which animates transform on the img). */
  /*
    Premium stability:
    Parallax translation can reveal empty bands at the top/bottom of the hero
    if the overscale is too small for the chosen travel distance.
    We slightly increase overscale and clamp travel in JS based on hero height.
  */
  transform: translate3d(0, var(--nvf-parallax-y, 0px), 0) scale(1.18);
  will-change: transform;
}

/* ===================================
   OVERLAY
   =================================== */

.nvf-hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: calc(var(--nvf-hero-overlay-opacity, 0) * var(--nvf-hero-overlay-mult, 1));
  /* Allows visual styles/templates to provide a richer overlay without extra markup. */
  background: var(--nvf-hero-overlay-bg, none);
}

/* ===================================
   VIGNETTE (per-slide)
   - CSS-only radial gradient
   - No blur/filter/animation
   - Per-slide via .nvf-vignette + CSS variables on the slide element:
       --nvf-vignette-strength: 0..0.6
       --nvf-vignette-focus: "50% 50%" | "50% 35%" | "50% 65%"
   =================================== */

.nvf-hero-slide.nvf-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Default strength = 0.25 (25%) */
  background: radial-gradient(circle at var(--nvf-vignette-focus, 50% 50%),
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, var(--nvf-vignette-strength, 0.25)) 100%);
}

.nvf-hero-overlay-none .nvf-hero-slide::before {
  --nvf-hero-overlay-opacity: 0;
  --nvf-hero-overlay-bg: none;
}

.nvf-hero-overlay-light .nvf-hero-slide::before {
  --nvf-hero-overlay-opacity: 0.45;
  --nvf-hero-overlay-bg: linear-gradient(to bottom, rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0.35));
}

.nvf-hero-overlay-strong .nvf-hero-slide::before {
  --nvf-hero-overlay-opacity: 0.68;
  --nvf-hero-overlay-bg: linear-gradient(to bottom, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.78));
}

/* ===================================
   CONTENT (title/subtitle/cta)
   =================================== */

.nvf-hero-slide-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  /* Ensure correct stacking: image (0) < overlay (1) < content (2)
     Some third-party plugins inject z-index on media elements; this keeps overlays reliable. */
  z-index: 2;
  padding: 26px 32px 32px;
  color: var(--nvf-hero-title-color);
  text-align: left;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nvf-hero-content-gap, 1rem);

  /* IMPORTANT: ensure width actually expands */
  width: 100%;
  max-width: var(--nvf-hero-content-max-width);
  margin-inline: auto;
}

.nvf-hero-slider.nvf-hero-layout-full .nvf-hero-slide-content {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  background: none;
}

.nvf-hero-slider.nvf-hero-layout-card .nvf-hero-slide-content {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);

  width: 100%;
  max-width: var(--nvf-hero-content-max-width-card, var(--nvf-hero-content-max-width));
  margin-inline: auto;

  padding: 24px 32px;
  border-radius: var(--nvf-hero-card-radius, 18px);
  background: none !important;
}

.nvf-hero-slider.nvf-hero-layout-card {
  --nvf-hero-content-max-width-card: none;
}


/* Alignments */
.nvf-hero-align-center .nvf-hero-slide-content {
  text-align: center;
  align-items: center;
}

.nvf-hero-align-left .nvf-hero-slide-content {
  text-align: left;
  align-items: flex-start;
}

.nvf-hero-align-right .nvf-hero-slide-content {
  text-align: right;
  align-items: flex-end;
}

/* Reset margins (spacing = gap only) */
.nvf-hero-slide-title,
.nvf-hero-slide-subtitle,
.nvf-hero-cta-wrapper {
  margin: 0;
}

/* Title/subtitle base (typo overrides are below) */
.nvf-hero-slide-title {
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--nvf-hero-title-color);

  /* allow full width wrapping */
  max-width: none;
}

.nvf-hero-slide-subtitle {
  color: var(--nvf-hero-subtitle-color);
  opacity: 0.9;
  line-height: 1.5;
  max-width: none;
}

/* CTA */
.nvf-hero-cta-wrapper {
  display: block;
}

.nvf-hero-cta-inner {
  display: inline-flex;
}

.nvf-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: var(--nvf-hero-btn-bg-image, none);
  padding: var(--nvf-hero-btn-py) var(--nvf-hero-btn-px);

  /*
    Button font-size:
    - If user provided an explicit size (e.g. 34px), we must NOT clamp it.
    - Otherwise we fall back to the responsive clamp tokens.
  */
  /*
    Elementor UX:
    Do not force !important here; Elementor Typography outputs inline styles.
    Keeping this non-important lets Elementor control font-size when used.
  */
  font-size: var(--nvf-hero-btn-font-size,
      clamp(var(--nvf-hero-btn-min, 0.78rem),
        calc(0.92rem + var(--nvf-hero-btn-fluid, 0.4vw)),
        var(--nvf-hero-btn-max, 0.95rem)));

  min-width: var(--nvf-hero-btn-min-width);
  width: var(--nvf-hero-btn-width);
  max-width: var(--nvf-hero-btn-max-width);

  border-radius: var(--nvf-hero-btn-radius, 999px);

  /* Typography
     - Default: Elementor Typography should control font-family/weight/style.
     - Custom override: only when wrapper has .nvf-hero-typo-custom.
  */
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: var(--nvf-hero-btn-tracking, 0.06em);
  text-transform: var(--nvf-hero-btn-transform, uppercase);
  /* Force against theme link styles (Elementor/themes often add underline on a:hover) */
  text-decoration: none !important;

  transform: translateY(-1px);
  /* Button shadow is global (slider-level) and controlled by classes:
     .nvf-btn-shadow-none / .nvf-btn-shadow-soft / .nvf-btn-shadow-strong */
  box-shadow: var(--nvf-hero-btn-shadow, 0 10px 22px rgba(15, 23, 42, 0.25));
  background-color: var(--nvf-hero-btn-bg);
  color: var(--nvf-hero-btn-text);
  border: 1px solid var(--nvf-hero-btn-border, transparent);
  will-change: transform;
  /* No animated shadow: keep transitions to non-shadow properties only. */
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, background-image .18s ease;
}

.nvf-hero-slider.nvf-hero-typo-custom .nvf-hero-cta {
  font-family: var(--nvf-slide-btn-ff,
      var(--nvf-hero-btn-ff, var(--nvf-body-font, "Inter", system-ui, sans-serif)));
  font-weight: var(--nvf-slide-btn-fw, var(--nvf-hero-btn-fw, 500));
  font-style: var(--nvf-slide-btn-style, var(--nvf-hero-btn-style, normal));
}

.nvf-hero-slider .nvf-hero-cta:hover,
.nvf-hero-slider .nvf-hero-cta:focus-visible {
  text-decoration: none !important;
}

/* Only show content for active or leaving (anti-snap) */
.nvf-hero-slide:not(.is-active):not(.is-leaving) .nvf-hero-slide-content {
  display: none;
}

/* Hover/focus only on active */
.nvf-hero-slide.is-active .nvf-hero-cta:hover,
.nvf-hero-slide.is-active .nvf-hero-cta:focus-visible {
  background-color: var(--nvf-hero-btn-bg-hover, var(--nvf-hero-btn-bg));
  color: var(--nvf-hero-btn-text-hover, var(--nvf-hero-btn-text));
  border-color: var(--nvf-hero-btn-border-hover, var(--nvf-hero-btn-border, transparent));
  background-image: var(--nvf-hero-btn-bg-image-hover, var(--nvf-hero-btn-bg-image, none));
}

/* Button hover effects */
.nvf-hero-slider.nvf-btn-hover-lift {
  --nvf-hero-btn-shadow-hover: 0 18px 40px rgba(15, 23, 42, 0.25);
}

.nvf-hero-slider.nvf-btn-hover-lift .nvf-hero-slide.is-active .nvf-hero-cta:hover,
.nvf-hero-slider.nvf-btn-hover-lift .nvf-hero-slide.is-active .nvf-hero-cta:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--nvf-hero-btn-shadow-hover, var(--nvf-hero-btn-shadow, none));
}

.nvf-hero-slider.nvf-btn-hover-glow .nvf-hero-slide.is-active .nvf-hero-cta {
  /* Fallback glow for browsers without color-mix() */
  --nvf-glow-color: rgba(255, 255, 255, .6);
  --nvf-glow-shadow: 0 0 38px rgba(255, 255, 255, .55);
}

@supports (color: color-mix(in srgb, #fff 50%, transparent)) {
  .nvf-hero-slider.nvf-btn-hover-glow .nvf-hero-slide.is-active .nvf-hero-cta {
    --nvf-glow-color: var(--nvf-hero-btn-bg, rgba(255, 255, 255, .6));
    --nvf-glow-shadow: 0 0 38px color-mix(in srgb, var(--nvf-glow-color) 70%, transparent);
  }
}

.nvf-hero-slider.nvf-btn-hover-glow .nvf-hero-slide.is-active .nvf-hero-cta:hover,
.nvf-hero-slider.nvf-btn-hover-glow .nvf-hero-slide.is-active .nvf-hero-cta:focus-visible {
  box-shadow: var(--nvf-hero-btn-shadow, none), var(--nvf-glow-shadow);
}

.nvf-hero-slider.nvf-btn-hover-underline .nvf-hero-slide.is-active .nvf-hero-cta:hover,
.nvf-hero-slider.nvf-btn-hover-underline .nvf-hero-slide.is-active .nvf-hero-cta:focus-visible {
  text-decoration: underline !important;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}

/* Ensure CTA alignment follows text alignment */
.nvf-hero-align-left .nvf-hero-cta-wrapper {
  align-self: flex-start;
}

.nvf-hero-align-center .nvf-hero-cta-wrapper {
  align-self: center;
}

.nvf-hero-align-right .nvf-hero-cta-wrapper {
  align-self: flex-end;
}

/* ===================================
   NAV (arrows) + DOTS
   =================================== */

.nvf-hero-nav {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(14px);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: #f9fafb;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.18s ease,
    box-shadow 0.25s ease;
  z-index: 3;
}

.nvf-hero-nav--prev {
  left: 32px;
}

.nvf-hero-nav--next {
  right: 32px;
}

.nvf-hero-nav:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  transform: translateY(calc(-50% - 2px));
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.45);
}

/*
  Prevent theme "tap/active" highlight backgrounds.
  Some themes inject a blue/primary background on button:focus/:active.
  We keep an accessible focus style via :focus-visible further below.
*/
.nvf-hero-slider .nvf-hero-nav:focus,
.nvf-hero-slider .nvf-hero-toggle:focus,
.nvf-hero-slider .nvf-hero-dot:focus {
  background-image: none;
  background-color: rgba(15, 23, 42, 0.18);
  color: inherit;
}

.nvf-hero-slider .nvf-hero-nav:active,
.nvf-hero-slider .nvf-hero-toggle:active,
.nvf-hero-slider .nvf-hero-dot:active {
  background-color: rgba(15, 23, 42, 0.18);
}

.nvf-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
  pointer-events: auto;
}

/* Pause/Play toggle (accessible control) */
.nvf-hero-toggle {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  position: absolute;
  right: 20px;
  bottom: 16px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(14px);
  color: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 11;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.18s ease,
    box-shadow 0.25s ease;
}

.nvf-hero-toggle:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.45);
}

.nvf-hero-slider .nvf-hero-toggle:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.75);
  outline-offset: 2px;
}

.nvf-hero-toggle-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nvf-hero-toggle-icon .nvf-hero-icon {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.nvf-hero-dot {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transform: scale(1);
  transition: background-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.nvf-hero-dot.is-active {
  background: #ffffff;
  transform: scale(1.6);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}

.nvf-hero-slider .nvf-hero-dot:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.3);
}

/* Card layout arrows closer */
.nvf-hero-slider.nvf-hero-layout-card .nvf-hero-nav--prev {
  left: 24px;
}

.nvf-hero-slider.nvf-hero-layout-card .nvf-hero-nav--next {
  right: 24px;
}

/* ===================================
   ACCESSIBILITY – focus states
   =================================== */

.nvf-hero-slider .nvf-hero-nav:focus-visible,
.nvf-hero-slider .nvf-hero-dot:focus-visible,
.nvf-hero-slider .nvf-hero-cta:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--nvf-hero-focus-ring),
    0 0 0 6px var(--nvf-hero-focus-ring-outer);
}

.nvf-hero-slider .nvf-hero-dot:focus-visible {
  transform: scale(1.6);
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 1024px) {
  .nvf-hero-slider.nvf-hero-layout-card {
    border-radius: 26px;
    margin: 32px auto 60px;
  }

  .nvf-hero-slider--small .nvf-hero-slider-inner,
  .nvf-hero-slider--medium .nvf-hero-slider-inner,
  .nvf-hero-slider--large .nvf-hero-slider-inner {
    min-height: clamp(320px, 58vh, 560px);
  }

  .nvf-hero-slide-content {
    padding: 20px 22px 26px;
    max-width: min(92vw, var(--nvf-hero-content-max-width));
  }

  /* Sensible typography guardrails for preset mode on tablet */
  .nvf-hero-slider {
    --nvf-hero-title-min: 1.75rem;
    --nvf-hero-title-fluid: 7vw;
    --nvf-hero-title-max: 3.8rem;
    --nvf-hero-subtitle-min: 0.98rem;
    --nvf-hero-subtitle-fluid: 2.8vw;
    --nvf-hero-subtitle-max: 1.55rem;
  }

  .nvf-hero-nav {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .nvf-hero-nav--prev {
    left: 18px;
  }

  .nvf-hero-nav--next {
    right: 18px;
  }

  .nvf-hero-dots {
    bottom: 14px;
  }
}

@media (max-width: 640px) {
  .nvf-hero-slider.nvf-hero-layout-card {
    border-radius: 22px;
    margin: 24px auto 40px;
  }

  /* Mobile CTA */
  .nvf-hero-slider {
    --nvf-hero-btn-min: 0.72rem;
    --nvf-hero-btn-max: 0.86rem;
    --nvf-hero-btn-fluid: 0.2vw;
    --nvf-hero-btn-py: 9px;
    --nvf-hero-btn-px: 16px;
  }

  .nvf-hero-slider--small .nvf-hero-slider-inner,
  .nvf-hero-slider--medium .nvf-hero-slider-inner,
  .nvf-hero-slider--large .nvf-hero-slider-inner {
    min-height: clamp(280px, 60vh, 480px);
  }

  .nvf-hero-slide-content {
    padding: 18px 18px 22px;
    max-width: min(94vw, var(--nvf-hero-content-max-width));
  }

  /* More compact typography guardrails for preset mode on mobile */
  .nvf-hero-slider {
    --nvf-hero-title-min: 1.55rem;
    --nvf-hero-title-fluid: 9.5vw;
    --nvf-hero-title-max: 2.9rem;
    --nvf-hero-subtitle-min: 0.95rem;
    --nvf-hero-subtitle-fluid: 3.4vw;
    --nvf-hero-subtitle-max: 1.28rem;
  }

  .nvf-hero-nav {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    width: 32px;
    height: 32px;
  }

  .nvf-hero-nav--prev {
    left: 14px;
  }

  .nvf-hero-nav--next {
    right: 14px;
  }
}

/* ===================================
   VERTICAL SPACING (GAP) — single source of truth
   =================================== */

.nvf-hero-slider.nvf-space-tight {
  --nvf-hero-content-gap: 14px;
}

.nvf-hero-slider.nvf-space-normal {
  --nvf-hero-content-gap: 24px;
}

/* Standard */
.nvf-hero-slider.nvf-space-loose {
  --nvf-hero-content-gap: 44px;
}

/* Large */

@media (max-width: 768px) {
  .nvf-hero-slider.nvf-space-loose {
    --nvf-hero-content-gap: 28px;
  }
}

/* ===================================
   TYPO SCALE — guardrails (defaults)
   =================================== */

.nvf-hero-slider {
  /* Title guardrails */
  --nvf-hero-title-min: 1.9rem;
  --nvf-hero-title-fluid: 5.8vw;
  --nvf-hero-title-fs: clamp(2.4rem, 5vw, 4.8rem);

  /* Subtitle guardrails */
  --nvf-hero-subtitle-min: 1rem;
  --nvf-hero-subtitle-fluid: 2.1vw;
  --nvf-hero-subtitle-fs: clamp(1.05rem, 1.6vw, 1.35rem);
}

/* ===================================
   SIZE PRESETS (title/subtitle/button)
   - These classes are emitted by the renderer (Gutenberg + Elementor).
   - Previously they existed in markup but had no CSS, which made presets feel broken.
   - They only adjust CSS variables; explicit custom sizes still win via inline vars.
   =================================== */

/* Title scale */
.nvf-hero-slider.nvf-title-sm {
  --nvf-hero-title-min: 1.6rem;
  --nvf-hero-title-fluid: 4.4vw;
  --nvf-hero-title-fs: clamp(2.0rem, 3.8vw, 3.0rem);
}

.nvf-hero-slider.nvf-title-md {
  --nvf-hero-title-min: 1.85rem;
  --nvf-hero-title-fluid: 5.0vw;
  --nvf-hero-title-fs: clamp(2.2rem, 4.4vw, 3.6rem);
}

.nvf-hero-slider.nvf-title-lg {
  --nvf-hero-title-min: 2.1rem;
  --nvf-hero-title-fluid: 5.6vw;
  --nvf-hero-title-fs: clamp(2.5rem, 4.9vw, 4.2rem);
}

.nvf-hero-slider.nvf-title-xl {
  --nvf-hero-title-min: 2.4rem;
  --nvf-hero-title-fluid: 6.2vw;
  --nvf-hero-title-fs: clamp(2.8rem, 5.4vw, 5.0rem);
}

/* Subtitle scale */
.nvf-hero-slider.nvf-subtitle-sm {
  --nvf-hero-subtitle-min: 0.95rem;
  --nvf-hero-subtitle-fluid: 1.7vw;
  --nvf-hero-subtitle-fs: clamp(1.0rem, 1.4vw, 1.12rem);
}

.nvf-hero-slider.nvf-subtitle-md {
  --nvf-hero-subtitle-min: 1.0rem;
  --nvf-hero-subtitle-fluid: 2.1vw;
  --nvf-hero-subtitle-fs: clamp(1.05rem, 1.6vw, 1.35rem);
}

.nvf-hero-slider.nvf-subtitle-lg {
  --nvf-hero-subtitle-min: 1.05rem;
  --nvf-hero-subtitle-fluid: 2.4vw;
  --nvf-hero-subtitle-fs: clamp(1.12rem, 1.9vw, 1.55rem);
}

/* Button size */
.nvf-hero-slider.nvf-btn-sm {
  --nvf-hero-btn-min: 0.74rem;
  --nvf-hero-btn-max: 0.9rem;
  --nvf-hero-btn-fluid: 0.3vw;
  --nvf-hero-btn-py: 9px;
  --nvf-hero-btn-px: 16px;
}

.nvf-hero-slider.nvf-btn-md {
  --nvf-hero-btn-min: 0.78rem;
  --nvf-hero-btn-max: 0.95rem;
  --nvf-hero-btn-fluid: 0.4vw;
  --nvf-hero-btn-py: 10px;
  --nvf-hero-btn-px: 20px;
}

.nvf-hero-slider.nvf-btn-lg {
  --nvf-hero-btn-min: 0.84rem;
  --nvf-hero-btn-max: 1.05rem;
  --nvf-hero-btn-fluid: 0.55vw;
  --nvf-hero-btn-py: 12px;
  --nvf-hero-btn-px: 24px;
}

/* Full-width CTA (useful for mobile-first/ecommerce) */
.nvf-hero-slider.nvf-btn-full {
  --nvf-hero-btn-min-width: 12rem;
  /*
    UX fix:
    A full-width button with centered content makes horizontal padding appear to do nothing
    (the centering cancels out symmetric padding changes).
    In "Full", we therefore keep a full-width *area* (wrapper) but allow the CTA itself to size
    to its content + padding.
  */
  --nvf-hero-btn-width: auto;
  --nvf-hero-btn-max-width: 520px;
}

.nvf-hero-slider.nvf-btn-full .nvf-hero-cta-wrapper {
  width: 100%;
  display: flex;
}

/* Full must follow content alignment */
.nvf-hero-slider.nvf-btn-full.nvf-hero-align-center .nvf-hero-cta-wrapper {
  justify-content: center;
}

.nvf-hero-slider.nvf-btn-full.nvf-hero-align-left .nvf-hero-cta-wrapper {
  justify-content: flex-start;
}

.nvf-hero-slider.nvf-btn-full.nvf-hero-align-right .nvf-hero-cta-wrapper {
  justify-content: flex-end;
}


/* ===================================
   TYPOGRAPHY OVERRIDES (Global + per-slide)
   - Slide vars override global vars
   - Must beat theme styles
   =================================== */

.nvf-hero-slider .nvf-hero-slide-title {
  /*
    IMPORTANT (Elementor UX):
    - By default, Elementor's Typography control should be the single source of truth.
    - We only force font-family/weight/style when the wrapper has .nvf-hero-typo-custom.
  */

  /*
    Elementor UX:
    Do not force !important here; Elementor Typography may output inline font-size.
    We keep our responsive clamp as a default fallback.
  */
  font-size: clamp(var(--nvf-hero-title-min, 2.1rem),
      var(--nvf-hero-title-fluid, 6.2vw),
      var(--nvf-slide-title-max,
        var(--nvf-hero-title-max,
          var(--nvf-slide-title-fs, var(--nvf-hero-title-fs, clamp(2.4rem, 5vw, 4.8rem))))));

  line-height: 1.05;
}

/*
  Elementor compatibility:
  Some themes force heading weights with !important (e.g. h2 { font-weight: 700 !important; }).
  Elementor's Typography control can then fail to change the title weight while the subtitle works.
  When the wrapper has .nvf-hero-el-typo, we apply the chosen weight via a CSS variable and !important
  to reliably override theme rules, without affecting non-Elementor usages.

  IMPORTANT:
  This override must be DISABLED inside the Elementor editor so that the live preview typography
  controls (font-weight) work correctly.
  Elementor marks the editor with .elementor-editor-active on <body> or <html> depending on context.
  We therefore require BOTH html and body to NOT have the class before applying overrides.
*/

html:not(.elementor-editor-active) body:not(.elementor-editor-active) .nvf-hero-slider.nvf-hero-el-typo .nvf-hero-slide-title {
  font-weight: var(--nvf-el-title-fw, inherit) !important;
  /* Help variable fonts react to weight changes */
  font-variation-settings: "wght" var(--nvf-el-title-fw, 400);
}

html:not(.elementor-editor-active) body:not(.elementor-editor-active) .nvf-hero-slider.nvf-hero-el-typo .nvf-hero-slide-subtitle {
  font-weight: var(--nvf-el-subtitle-fw, inherit) !important;
  font-variation-settings: "wght" var(--nvf-el-subtitle-fw, 400);
}

html:not(.elementor-editor-active) body:not(.elementor-editor-active) .nvf-hero-slider.nvf-hero-el-typo .nvf-hero-cta {
  font-weight: var(--nvf-el-btn-fw, inherit) !important;
  font-variation-settings: "wght" var(--nvf-el-btn-fw, 400);
}

/*
  Responsive safety rails (Elementor typography mode)
  Many users set a large desktop font-size in Elementor and forget to define
  tablet/mobile responsive values, resulting in huge text on small screens.
  These caps apply only in .nvf-hero-el-typo mode and can still be overridden
  by Elementor responsive rules (which are typically more specific).
*/
@media (max-width: 1024px) {
  html:not(.elementor-editor-active) body:not(.elementor-editor-active) .nvf-hero-slider.nvf-hero-el-typo .nvf-hero-slide-title {
    /* Hard cap when Elementor responsive typography is not configured */
    font-size: clamp(1.85rem, 7.2vw, 3.25rem) !important;
    line-height: 1.10 !important;
  }

  html:not(.elementor-editor-active) body:not(.elementor-editor-active) .nvf-hero-slider.nvf-hero-el-typo .nvf-hero-slide-subtitle {
    font-size: clamp(1.00rem, 4.0vw, 1.45rem) !important;
    line-height: 1.28 !important;
  }

  html:not(.elementor-editor-active) body:not(.elementor-editor-active) .nvf-hero-slider.nvf-hero-el-typo .nvf-hero-cta {
    font-size: clamp(0.88rem, 3.0vw, 1.02rem) !important;
    line-height: 1.12 !important;
  }
}

@media (max-width: 767px) {
  html:not(.elementor-editor-active) body:not(.elementor-editor-active) .nvf-hero-slider.nvf-hero-el-typo .nvf-hero-slide-title {
    font-size: clamp(1.60rem, 8.8vw, 2.55rem) !important;
    line-height: 1.12 !important;
  }

  html:not(.elementor-editor-active) body:not(.elementor-editor-active) .nvf-hero-slider.nvf-hero-el-typo .nvf-hero-slide-subtitle {
    font-size: clamp(0.98rem, 4.6vw, 1.20rem) !important;
    line-height: 1.32 !important;
  }

  html:not(.elementor-editor-active) body:not(.elementor-editor-active) .nvf-hero-slider.nvf-hero-el-typo .nvf-hero-cta {
    font-size: clamp(0.86rem, 3.9vw, 0.98rem) !important;
    line-height: 1.14 !important;
  }
}

/*
  Responsive defaults (non-Elementor typography mode)
  Keep the slider looking sane on tablet/mobile even when using presets.
*/
@media (max-width: 1024px) {
  .nvf-hero-slider:not(.nvf-hero-el-typo) .nvf-hero-slide-title {
    font-size: clamp(1.85rem, 7.0vw, 3.1rem);
    line-height: 1.10;
  }

  .nvf-hero-slider:not(.nvf-hero-el-typo) .nvf-hero-slide-subtitle {
    font-size: clamp(1.00rem, 3.9vw, 1.40rem);
    line-height: 1.30;
  }

  .nvf-hero-slider:not(.nvf-hero-el-typo) .nvf-hero-cta {
    font-size: clamp(0.88rem, 2.9vw, 1.00rem);
    line-height: 1.12;
  }
}

@media (max-width: 767px) {
  .nvf-hero-slider:not(.nvf-hero-el-typo) .nvf-hero-slide-title {
    font-size: clamp(1.60rem, 8.3vw, 2.45rem);
    line-height: 1.12;
  }

  .nvf-hero-slider:not(.nvf-hero-el-typo) .nvf-hero-slide-subtitle {
    font-size: clamp(0.98rem, 4.5vw, 1.18rem);
    line-height: 1.34;
  }

  .nvf-hero-slider:not(.nvf-hero-el-typo) .nvf-hero-cta {
    font-size: clamp(0.86rem, 3.8vw, 0.96rem);
    line-height: 1.14;
  }
}

.nvf-hero-slider.nvf-hero-typo-custom .nvf-hero-slide-title {
  font-family: var(--nvf-slide-title-ff,
      var(--nvf-hero-title-ff, var(--nvf-headings-font-family, "Inter", system-ui, sans-serif)));
  font-weight: var(--nvf-slide-title-fw, var(--nvf-hero-title-fw, 700));
  font-style: var(--nvf-slide-title-style, var(--nvf-hero-title-style, normal));
}

.nvf-hero-slider .nvf-hero-slide-subtitle {
  /* Same rationale as title (Elementor inline size must win). */
  font-size: clamp(var(--nvf-hero-subtitle-min, 1rem),
      var(--nvf-hero-subtitle-fluid, 2.1vw),
      var(--nvf-slide-subtitle-max,
        var(--nvf-hero-subtitle-max,
          var(--nvf-slide-subtitle-fs, var(--nvf-hero-subtitle-fs, clamp(1.05rem, 1.6vw, 1.35rem))))));

  line-height: 1.35;
}

.nvf-hero-slider.nvf-hero-typo-custom .nvf-hero-slide-subtitle {
  font-family: var(--nvf-slide-subtitle-ff,
      var(--nvf-hero-subtitle-ff, var(--nvf-body-font, "Inter", system-ui, sans-serif)));
  font-weight: var(--nvf-slide-subtitle-fw, var(--nvf-hero-subtitle-fw, 400));
  font-style: var(--nvf-slide-subtitle-style, var(--nvf-hero-subtitle-style, normal));
}

/* CTA typography is handled in the base .nvf-hero-cta rules above */

/* ===================================
   TRANSITIONS (cinematic / modern) + content reveal
   - depends on hero-slider.js:
     - adds .is-leaving on outgoing slide
     - sets --nvf-transition-ms on slider
   =================================== */

.nvf-hero-slider {
  --nvf-ease-cinematic: cubic-bezier(.15, 1, .18, 1);
  --nvf-ease-modern: cubic-bezier(.2, .9, .2, 1);

  --nvf-cine-scale-in: 1.012;
  --nvf-cine-scale-out: 1.02;
  --nvf-cine-shift-y: 2px;

  /*
    Modern transition blur can feel “premium”, but filters are a common source
    of stutter on mid-range devices and inside editors/iframes.
    Keep it extremely subtle by default (can be overridden by presets).
  */
  --nvf-blur-modern: 0px;

  /* content reveal */
  --nvf-content-shift-y: 10px;
  --nvf-content-d1: 140ms;
  --nvf-content-d2: 240ms;
  --nvf-content-d3: 340ms;
}

/* Base transitions */
.nvf-hero-slider .nvf-hero-slide {
  transition:
    opacity var(--nvf-transition-dur) linear,
    transform calc(var(--nvf-transition-dur) * 1.6) var(--nvf-ease-cinematic);
}

/* CINEMATIC */
.nvf-hero-slider.nvf-transition-cinematic .nvf-hero-slide {
  transform: scale(var(--nvf-cine-scale-in)) translateY(var(--nvf-cine-shift-y));
  filter: none;
}

.nvf-hero-slider.nvf-transition-cinematic .nvf-hero-slide.is-active {
  transform: scale(1) translateY(0);
}

.nvf-hero-slider.nvf-transition-cinematic .nvf-hero-slide.is-leaving {
  opacity: 0;
  pointer-events: none;
  transform: scale(var(--nvf-cine-scale-out)) translateY(calc(var(--nvf-cine-shift-y) * -1));
  transition:
    opacity calc(var(--nvf-transition-dur) * 1.6) linear,
    transform calc(var(--nvf-transition-dur) * 2.2) var(--nvf-ease-cinematic);
}

/* MODERN */
.nvf-hero-slider.nvf-transition-modern .nvf-hero-slide {
  transform: translate3d(calc(var(--nvf-modern-shift-x, 18px) * var(--nvf-motion-amp)),
      calc(var(--nvf-modern-shift-y, 0px) * var(--nvf-motion-amp)),
      0);
  /* Filters (blur) are a common source of stutter; keep modern transitions GPU-friendly */
  filter: none;
  transition:
    opacity var(--nvf-transition-dur) linear,
    transform calc(var(--nvf-transition-dur) * 1.4) var(--nvf-ease-modern);
  transition-timing-function: var(--nvf-ease-modern);
}

.nvf-hero-slider.nvf-transition-modern .nvf-hero-slide.is-active {
  transform: translate3d(0, 0, 0);
  filter: none;
}

.nvf-hero-slider.nvf-transition-modern .nvf-hero-slide.is-leaving {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--nvf-modern-shift-x, 18px) * -1),
      0,
      0);
  filter: none;
  transition:
    opacity calc(var(--nvf-transition-dur) * 1.2) linear,
    transform calc(var(--nvf-transition-dur) * 1.6) var(--nvf-ease-modern);
}

/* Content reveal */
.nvf-hero-slider .nvf-hero-slide-content>* {
  opacity: 0;
  transform: translateY(var(--nvf-content-shift-y));
  will-change: transform, opacity;
  transition:
    opacity calc(var(--nvf-transition-dur) * 0.9) linear,
    transform calc(var(--nvf-transition-dur) * 1.2) var(--nvf-ease-cinematic);
}

.nvf-hero-slider .nvf-hero-slide.is-active .nvf-hero-slide-content>* {
  opacity: 1;
  transform: translateY(0);
}

.nvf-hero-slider .nvf-hero-slide.is-leaving .nvf-hero-slide-content>* {
  opacity: 0;
  transform: translateY(calc(var(--nvf-content-shift-y) * 0.6));
  transition:
    opacity calc(var(--nvf-transition-dur) * 1.1) linear,
    transform calc(var(--nvf-transition-dur) * 1.1) var(--nvf-ease-cinematic);
}

/* Stagger */
.nvf-hero-slider .nvf-hero-slide.is-active .nvf-hero-slide-title {
  transition-delay: var(--nvf-content-d1);
}

.nvf-hero-slider .nvf-hero-slide.is-active .nvf-hero-slide-subtitle {
  transition-delay: var(--nvf-content-d2);
}

.nvf-hero-slider .nvf-hero-slide.is-active .nvf-hero-cta-wrapper {
  transition-delay: var(--nvf-content-d3);
}

.nvf-hero-slider.nvf-transition-modern .nvf-hero-slide-content>* {
  transition-timing-function: var(--nvf-ease-modern);
}

.nvf-hero-slider .nvf-hero-slide.is-leaving .nvf-hero-slide-img {
  animation: none;
}

/* ===================================
   KEN BURNS (CSS-first, production-safe)
   Goals:
   - Subtle (editorial/cinematic), not aggressive
   - Never "snaps" back on slide change
   - Gated (in view + multi slides) for performance
   - Disabled in Elementor editor + reduced motion
   Notes:
   - Animation duration is provided by JS via --nvf-kenburns-duration-ms
     so it can match (autoplayDelay - transitionSpeed).
   - We only animate IMG by default for GPU safety.
   =================================== */

.nvf-hero-slider {
  /* JS sets this to (speedMs - transitionMs). Fallback is safe. */
  --nvf-kenburns-duration-ms: 9000;
  --nvf-kenburns-ease: cubic-bezier(.25, .1, .25, 1);

  /* Subtle defaults (amp is user-controlled; clamp in JS) */
  --nvf-kenburns-pan-base: 3%;
  --nvf-kenburns-pan: calc(var(--nvf-kenburns-pan-base) * var(--nvf-motion-amp, 1));
  --nvf-kenburns-min-scale: calc(1.02 + (0.00 * var(--nvf-motion-amp, 1)));
  --nvf-kenburns-max-scale: calc(1.04 + (0.02 * var(--nvf-motion-amp, 1)));
}

/* Gate: only run when explicitly enabled by JS */
.nvf-hero-slider.nvf-motion-kenburns.nvf-kenburns-enabled .nvf-hero-slide.is-active .nvf-hero-slide-media img {
  transform-origin: center;
  animation-duration: calc(var(--nvf-kenburns-duration-ms) * 1ms);
  animation-timing-function: var(--nvf-kenburns-ease);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

/* Only apply will-change while running (JS toggles this class on the active slide) */
.nvf-hero-slider.nvf-motion-kenburns.nvf-kenburns-enabled .nvf-hero-slide.is-active.nvf-kenburns-running .nvf-hero-slide-media img {
  will-change: transform;
}

/* Directions / variants */
@keyframes nvf-kenburns-in-right {
  from {
    transform: translateX(calc(-1 * var(--nvf-kenburns-pan))) scale(var(--nvf-kenburns-min-scale));
  }

  to {
    transform: translateX(var(--nvf-kenburns-pan)) scale(var(--nvf-kenburns-max-scale));
  }
}

@keyframes nvf-kenburns-in-left {
  from {
    transform: translateX(var(--nvf-kenburns-pan)) scale(var(--nvf-kenburns-min-scale));
  }

  to {
    transform: translateX(calc(-1 * var(--nvf-kenburns-pan))) scale(var(--nvf-kenburns-max-scale));
  }
}

@keyframes nvf-kenburns-in-up {
  from {
    transform: translateY(var(--nvf-kenburns-pan)) scale(var(--nvf-kenburns-min-scale));
  }

  to {
    transform: translateY(calc(-1 * var(--nvf-kenburns-pan))) scale(var(--nvf-kenburns-max-scale));
  }
}

@keyframes nvf-kenburns-in-down {
  from {
    transform: translateY(calc(-1 * var(--nvf-kenburns-pan))) scale(var(--nvf-kenburns-min-scale));
  }

  to {
    transform: translateY(var(--nvf-kenburns-pan)) scale(var(--nvf-kenburns-max-scale));
  }
}

/* Choose animation by class (set by PHP / Elementor)
   (gated by .nvf-kenburns-enabled) */
.nvf-hero-slider.nvf-motion-kenburns.nvf-kenburns-enabled.nvf-kenburns-right .nvf-hero-slide.is-active .nvf-hero-slide-media img {
  animation-name: nvf-kenburns-in-right;
}

.nvf-hero-slider.nvf-motion-kenburns.nvf-kenburns-enabled.nvf-kenburns-left .nvf-hero-slide.is-active .nvf-hero-slide-media img {
  animation-name: nvf-kenburns-in-left;
}

.nvf-hero-slider.nvf-motion-kenburns.nvf-kenburns-enabled.nvf-kenburns-up .nvf-hero-slide.is-active .nvf-hero-slide-media img {
  animation-name: nvf-kenburns-in-up;
}

.nvf-hero-slider.nvf-motion-kenburns.nvf-kenburns-enabled.nvf-kenburns-down .nvf-hero-slide.is-active .nvf-hero-slide-media img {
  animation-name: nvf-kenburns-in-down;
}

/* Optional: Pause on hover (desktop only) */
@media (hover:hover) and (pointer:fine) {
  .nvf-hero-slider.nvf-hover-pauses-motion.nvf-motion-kenburns.nvf-kenburns-enabled:hover .nvf-hero-slide.is-active .nvf-hero-slide-media img {
    animation-play-state: paused;
  }
}

/* Editor & reduced motion: disable */
html.elementor-editor-active .nvf-hero-slider.nvf-motion-kenburns .nvf-hero-slide-media img,
html.elementor-editor-active .nvf-hero-slider.nvf-motion-kenburns .nvf-hero-slide-media video {
  animation: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {

  .nvf-hero-slider.nvf-motion-kenburns .nvf-hero-slide-media img,
  .nvf-hero-slider.nvf-motion-kenburns .nvf-hero-slide-media video {
    animation: none !important;
    transform: none !important;
  }
}

/* Extra safety: do not animate videos by default (can be enabled later if desired) */
.nvf-hero-slider.nvf-motion-kenburns.nvf-kenburns-enabled .nvf-hero-slide.is-active .nvf-hero-slide-media video {
  animation: none !important;
}

/* ===================================
   PRESETS — mood only (NO WIDTH HERE)
   =================================== */

.nvf-hero-slider {
  --nvf-hero-ui-opacity: 0.85;
  --nvf-hero-ui-blur: 14px;
  --nvf-hero-title-tracking: -0.01em;
  /*
    IMPORTANT:
    The main typography rules use --nvf-hero-title-fw.
    We keep --nvf-hero-title-weight as a legacy alias but ensure presets set --nvf-hero-title-fw
    so the effect is not overridden by later !important rules.
  */
  --nvf-hero-title-weight: 600;
  /* legacy */
  --nvf-hero-title-fw: 600;
}

.nvf-hero-slider .nvf-hero-slide-title {
  letter-spacing: var(--nvf-hero-title-tracking);
  font-weight: var(--nvf-hero-title-fw, var(--nvf-hero-title-weight, 600));
}

.nvf-hero-slider .nvf-hero-nav,
.nvf-hero-slider .nvf-hero-dots {
  opacity: var(--nvf-hero-ui-opacity);
}

.nvf-hero-slider .nvf-hero-nav {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  backdrop-filter: blur(var(--nvf-hero-ui-blur));
}

/* Editorial */
.nvf-hero-slider.nvf-hero-preset-editorial {
  --nvf-hero-overlay-mult: 1.0;
  --nvf-hero-title-tracking: -0.015em;
  --nvf-hero-title-fw: 600;
  --nvf-hero-ui-opacity: 0.78;

  --nvf-hero-overlay-bg:
    radial-gradient(900px 600px at 18% 10%,
      rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.0) 60%),
    radial-gradient(1200px 900px at 50% 45%,
      rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.40), rgba(15, 23, 42, 0.32));

  --nvf-hero-btn-radius: 14px;
  --nvf-hero-btn-bg: rgba(255, 255, 255, 0.16);
  --nvf-hero-btn-border: rgba(255, 255, 255, 0.22);
  --nvf-hero-btn-bg-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%);
}

.nvf-hero-slider.nvf-hero-preset-editorial .nvf-hero-slide-subtitle {
  font-style: italic;
}

/* Minimal */
.nvf-hero-slider.nvf-hero-preset-minimal {
  --nvf-hero-overlay-mult: 0.78;
  --nvf-hero-title-tracking: -0.005em;
  --nvf-hero-title-fw: 500;
  --nvf-hero-ui-opacity: 0.62;
  --nvf-hero-ui-blur: 10px;

  --nvf-hero-overlay-bg:
    radial-gradient(1200px 800px at 50% 35%,
      rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.0) 55%),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.35), rgba(15, 23, 42, 0.25));

  --nvf-hero-btn-radius: 999px;
  --nvf-hero-btn-bg: rgba(255, 255, 255, 0.08);
  --nvf-hero-btn-border: rgba(255, 255, 255, 0.38);
  --nvf-hero-btn-bg-image: none;

  --nvf-hero-btn-bg-hover: rgba(255, 255, 255, 0.14);
  --nvf-hero-btn-border-hover: rgba(255, 255, 255, 0.52);
}

/* Bold */
.nvf-hero-slider.nvf-hero-preset-bold {
  --nvf-hero-overlay-mult: 1.12;
  --nvf-hero-title-tracking: -0.02em;
  --nvf-hero-title-fw: 700;
  --nvf-hero-ui-opacity: 0.90;

  --nvf-hero-overlay-bg:
    radial-gradient(950px 650px at 70% 18%,
      rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.0) 58%),
    linear-gradient(to bottom, rgba(2, 6, 23, 0.72), rgba(2, 6, 23, 0.62));

  --nvf-hero-btn-radius: 12px;
  --nvf-hero-btn-bg: rgba(255, 255, 255, 0.18);
  --nvf-hero-btn-border: rgba(255, 255, 255, 0.14);
  --nvf-hero-btn-bg-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 55%);
}

/* Cinematic */
.nvf-hero-slider.nvf-hero-preset-cinematic {
  --nvf-hero-overlay-mult: 1.05;
  --nvf-hero-title-tracking: -0.02em;
  --nvf-hero-title-fw: 650;
  --nvf-hero-ui-opacity: 0.74;
  --nvf-hero-ui-blur: 16px;

  --nvf-hero-overlay-bg:
    radial-gradient(1200px 900px at 50% 38%,
      rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.45) 72%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(to bottom, rgba(2, 6, 23, 0.62), rgba(2, 6, 23, 0.68));

  --nvf-hero-btn-radius: 999px;
  --nvf-hero-btn-bg: rgba(255, 255, 255, 0.10);
  --nvf-hero-btn-border: rgba(255, 255, 255, 0.26);
  --nvf-hero-btn-bg-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%);
}

/* ===================================
   VISUAL PRESETS (V1.0) — layout/scale defaults
   - Adds quick, commercial-looking baselines
   - Never overrides explicit user choices:
     - Typography overrides (inline vars) still win
     - Spacing/overlay choices are only auto-adjusted in PHP when user kept defaults
   =================================== */

.nvf-hero-slider.nvf-hero-style-clean {
  --nvf-hero-content-max-width: clamp(46ch, 62vw, 78ch);
  --nvf-hero-ui-opacity: 0.85;
  /* Scale baseline (still overridden by explicit user sizes) */
  --nvf-hero-title-fs: clamp(2.5rem, 4.9vw, 4.2rem);
  --nvf-hero-subtitle-fs: clamp(1.05rem, 1.6vw, 1.35rem);
  --nvf-hero-overlay-bg: linear-gradient(to bottom, rgba(15, 23, 42, 0.35), rgba(15, 23, 42, 0.25));
}

.nvf-hero-slider.nvf-hero-style-editorial {
  --nvf-hero-content-max-width: clamp(54ch, 68vw, 92ch);
  --nvf-hero-title-tracking: -0.015em;
  --nvf-hero-title-weight: 600;
  --nvf-hero-ui-opacity: 0.82;
  --nvf-hero-title-fs: clamp(2.8rem, 5.4vw, 5.0rem);
  --nvf-hero-subtitle-fs: clamp(1.12rem, 1.9vw, 1.55rem);
  --nvf-hero-content-gap: 44px;
  --nvf-hero-overlay-bg:
    radial-gradient(1200px 700px at 20% 10%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.0) 55%),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.42), rgba(15, 23, 42, 0.32));
}

.nvf-hero-slider.nvf-hero-style-dark {
  --nvf-hero-content-max-width: clamp(48ch, 64vw, 84ch);
  --nvf-hero-ui-opacity: 0.9;
  --nvf-hero-ui-blur: 16px;
  --nvf-hero-title-fs: clamp(2.8rem, 5.4vw, 5.0rem);
  --nvf-hero-subtitle-fs: clamp(1.05rem, 1.6vw, 1.35rem);
  --nvf-hero-overlay-bg:
    radial-gradient(900px 600px at 80% 15%, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.0) 60%),
    linear-gradient(to bottom, rgba(2, 6, 23, 0.78), rgba(2, 6, 23, 0.70));
}

.nvf-hero-slider.nvf-hero-style-nature {
  --nvf-hero-content-max-width: clamp(50ch, 66vw, 88ch);
  --nvf-hero-title-tracking: -0.012em;
  --nvf-hero-title-weight: 600;
  --nvf-hero-ui-opacity: 0.82;
  --nvf-hero-title-fs: clamp(2.5rem, 4.9vw, 4.2rem);
  --nvf-hero-subtitle-fs: clamp(1.12rem, 1.9vw, 1.55rem);
  --nvf-hero-content-gap: 44px;
  --nvf-hero-overlay-bg:
    radial-gradient(1000px 650px at 25% 15%, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.0) 55%),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.48), rgba(15, 23, 42, 0.38));
}

.nvf-hero-slider.nvf-hero-style-ecommerce {
  --nvf-hero-content-max-width: clamp(40ch, 54vw, 64ch);
  --nvf-hero-ui-opacity: 0.92;
  --nvf-hero-title-fs: clamp(2.2rem, 4.4vw, 3.6rem);
  --nvf-hero-subtitle-fs: clamp(1.0rem, 1.4vw, 1.12rem);
  --nvf-hero-btn-py: 12px;
  --nvf-hero-btn-px: 24px;
  --nvf-hero-overlay-bg:
    radial-gradient(900px 600px at 70% 12%, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.0) 58%),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.50), rgba(15, 23, 42, 0.36));
}

/* ===================================
   EDITOR ONLY (Gutenberg)
   =================================== */

.editor-styles-wrapper .nvf-hero-manual-slides {
  margin-top: 12px;
}

.editor-styles-wrapper .nvf-hero-slide-editor {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
}

.editor-styles-wrapper .nvf-hero-slide-editor__thumb {
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editor-styles-wrapper .nvf-hero-slide-editor__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.editor-styles-wrapper .nvf-hero-slide-editor__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 8px;
}

.editor-styles-wrapper .nvf-hero-slide-editor__subtitle {
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .editor-styles-wrapper .nvf-hero-slide-editor {
    grid-template-columns: 1fr;
  }
}

/* FULL layout: content can be very wide */
.nvf-hero-slider.nvf-hero-layout-full .nvf-hero-slide-content {
  max-width: none;
  width: min(1800px, 95vw);
  margin-inline: auto;
}

/* ===================================
   NAVIGATION STYLES (V1.1.11)
   - purely visual, no behavior change
   =================================== */

/* Dots spacing for styled variants */
.nvf-dots-line .nvf-hero-dots,
.nvf-dots-progress .nvf-hero-dots,
.nvf-dots-numeric .nvf-hero-dots {
  gap: 12px;
}

/* --- Arrows: Minimal chevrons (like modern references) --- */
.nvf-arrows-line .nvf-hero-nav {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  box-shadow: none;
  font-size: 0;
  /* hide ‹ › */
  color: rgba(255, 255, 255, .85);
}

.nvf-arrows-line .nvf-hero-nav:hover {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 1);
  box-shadow: none;
}

.nvf-arrows-line .nvf-hero-nav::before {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nvf-arrows-line .nvf-hero-nav--prev::before {
  transform: translate(-50%, -50%) rotate(135deg);
}

/* --- Arrows: Circle outline --- */
.nvf-arrows-circle .nvf-hero-nav {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  background: rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(255, 255, 255, .55);
}

/* --- Arrows: Filled (premium soft) --- */
.nvf-arrows-filled .nvf-hero-nav {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  background: rgba(15, 23, 42, .72);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

.nvf-arrows-filled .nvf-hero-nav:hover {
  background: rgba(15, 23, 42, .88);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}

/* --- Arrows: Corner placement --- */
.nvf-arrows-corner .nvf-hero-nav--prev {
  left: 20px;
  bottom: 20px;
  top: auto;
  transform: none;
}

.nvf-arrows-corner .nvf-hero-nav--next {
  right: 20px;
  bottom: 20px;
  top: auto;
  transform: none;
}

.nvf-arrows-corner .nvf-hero-nav:hover {
  transform: translateY(-2px);
}

/* When arrows are placed in bottom corners, lift the Pause/Play toggle to avoid overlap */
.nvf-arrows-corner .nvf-hero-toggle {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  bottom: 64px;
}

/* --- Dots: Line --- */
.nvf-dots-line .nvf-hero-dot {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  transform: none;
}

.nvf-dots-line .nvf-hero-dot.is-active {
  width: 36px;
  transform: none;
}

/* --- Dots: Progress (visual only in V1) --- */
.nvf-dots-progress .nvf-hero-dot {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  width: 22px;
  height: 4px;
  border-radius: 999px;
  transform: none;
}

.nvf-dots-progress .nvf-hero-dot.is-active {
  width: 34px;
  transform: none;
}

/* --- Dots: Rectangles (numeric option but visual pills) --- */
.nvf-dots-numeric .nvf-hero-dot {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  width: 18px;
  height: 8px;
  border-radius: 3px;
  transform: none;
}

.nvf-dots-numeric .nvf-hero-dot.is-active {
  width: 28px;
  transform: none;
}

/* -------------------------------------------
   Elementor editor UX (preview-only styling)
   ------------------------------------------- */
body.elementor-editor-active .nvf-hero-slider,
body.elementor-editor .nvf-hero-slider {
  /* Avoid weird tap/drag selection while editing */
  -webkit-user-select: none;
  user-select: none;
}

/* Make controls visible in editor, but non-interactive */
body.elementor-editor-active .nvf-hero-dots,
body.elementor-editor-active .nvf-hero-nav--prev,
body.elementor-editor-active .nvf-hero-nav--next,
body.elementor-editor .nvf-hero-dots,
body.elementor-editor .nvf-hero-nav--prev,
body.elementor-editor .nvf-hero-nav--next {
  display: flex !important;
  opacity: 0.75;
  pointer-events: none;
}

/* Ensure dots layout doesn’t collapse (Elementor sometimes resets flex) */
body.elementor-editor-active .nvf-hero-dots,
body.elementor-editor .nvf-hero-dots {
  gap: 8px;
  align-items: center;
  justify-content: center;
}

/* Make dots easier to read in preview */
body.elementor-editor-active .nvf-hero-dot,
body.elementor-editor .nvf-hero-dot {
  transform: none !important;
  filter: none !important;
}

/* Prevent transition flicker in editor preview */
body.elementor-editor-active .nvf-hero-slide,
body.elementor-editor .nvf-hero-slide,
body.elementor-editor-active .nvf-hero-slide *,
body.elementor-editor .nvf-hero-slide * {
  transition: none !important;
}

/* Optional: show a subtle "Preview" badge (only if the slider supports :before without conflicts) */
body.elementor-editor-active .nvf-hero-slider::after,
body.elementor-editor .nvf-hero-slider::after {
  content: "Preview";
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 50;
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* Make sure the badge doesn't break layouts where slider isn't positioned */
body.elementor-editor-active .nvf-hero-slider,
body.elementor-editor .nvf-hero-slider {
  position: relative;
}

body.elementor-editor-active .nvf-hero-slider[data-hide-editor-badge]::after,
body.elementor-editor .nvf-hero-slider[data-hide-editor-badge]::after {
  display: none;
}

body.elementor-editor-active .nvf-hero-slide {
  cursor: default;
}

/* Nova Hero Slider — force button shadow (Elementor reset override) */
.nvf-hero-slider .nvf-hero-cta {
  box-shadow: var(--nvf-hero-btn-shadow, none) !important;
}

.nvf-hero-slider .nvf-hero-slide.is-active .nvf-hero-cta:hover,
.nvf-hero-slider .nvf-hero-slide.is-active .nvf-hero-cta:focus-visible {
  box-shadow: var(--nvf-hero-btn-shadow-hover, var(--nvf-hero-btn-shadow, none)) !important;
}

/* =========================================================
   Nova Hero Slider — Title shadow (readability)
   - Global (slider-level)
   - CSS-only
   - No animation / no filter
   ========================================================= */

.nvf-hero-slider.nvf-title-shadow-none {
  --nvf-hero-title-shadow: none;
}

.nvf-hero-slider.nvf-title-shadow-soft {
  --nvf-hero-title-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.nvf-hero-slider.nvf-title-shadow-strong {
  --nvf-hero-title-shadow: 0 3px 22px rgba(0, 0, 0, 0.55);
}

.nvf-hero-slider .nvf-hero-slide-title {
  text-shadow: var(--nvf-hero-title-shadow, none);
}