/* =========================================================================
   N-HERO – Elementor Widget Styles
   Full-width hero with video background & rotating text
   ========================================================================= */

/* === Container === */
.n-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  background: #000;
}

/* Ensure proper aspect-ratio fallback for older browsers */
@supports not (aspect-ratio: 16/9) {
  .n-hero {
    min-height: 56.25vw; /* 9/16 = 0.5625 */
  }
}

/* === Media Layer (Image + Video) === */
.n-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.n-hero__image,
.n-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
}

/* Image: starts visible, sharp */
.n-hero__image {
  z-index: 2;
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--nhero-crossfade, 1.2s) ease,
    filter var(--nhero-crossfade, 1.2s) ease;
}

/* Video: starts hidden */
.n-hero__video {
  z-index: 1;
  opacity: 0;
  transition: opacity var(--nhero-crossfade, 1.2s) ease;
}

/* === Crossfade: Image → blur → Video === */
.n-hero.is-video-ready .n-hero__image {
  opacity: 0;
  filter: blur(16px);
}

.n-hero.is-video-ready .n-hero__video {
  opacity: 1;
}

/* === Overlay === */
.n-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* === Content === */
.n-hero__content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: var(--vf-hero-content-padding-block, clamp(2rem, 4vw, 3rem))
    var(--vf-section-gutter, clamp(1.5rem, 3vw, 4rem));
  margin: 0 auto;
}

/* === Heading === */
.n-hero__heading {
  font-family: var(--vf-font-heading, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-size: var(--vf-hero-heading-size, clamp(2rem, 5vw, 4.2rem));
  letter-spacing: var(--vf-hero-heading-tracking, 0.18em);
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
}

.n-hero__line1 {
  display: block;
  margin-bottom: 0.1em;
}

/* === Rotating Words === */
.n-hero__rotator {
  display: block;
  position: relative;
  height: 1.35em; /* slightly more than line-height to prevent clip */
  overflow: hidden;
}

.n-hero__word {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(50%);
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.n-hero__word.is-active {
  opacity: 1;
  transform: translateY(0);
}

.n-hero__word.is-leaving {
  opacity: 0;
  transform: translateY(-50%);
}

/* === Subtitle === */
.n-hero__subtitle {
  font-family: var(--vf-font-body, 'Montserrat', sans-serif);
  font-size: var(--vf-hero-subtitle-size, clamp(0.65rem, 1vw, 0.82rem));
  font-weight: 300;
  letter-spacing: var(--vf-tracking-wider, 0.25em);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--vf-hero-subtitle-gap, 1.5rem);
  margin-bottom: 0;
  line-height: 1.8;
}

/* === Entrance animation for full hero content === */
.n-hero__content {
  opacity: 0;
  transform: translateY(20px);
  animation: nheroContentIn 1s ease 0.3s forwards;
}

@keyframes nheroContentIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Responsive === */
@media (max-width: 1024px) {
  .n-hero__heading {
    font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  }
}

@media (max-width: 768px) {
  .n-hero {
    /* On mobile, ensure minimum height for readability */
    min-height: 60vh !important;
  }

  .n-hero__media {
    overflow: hidden;
  }

  .n-hero__heading {
    font-size: clamp(1.5rem, 6vw, 2.4rem);
    letter-spacing: var(--vf-section-heading-tracking, 0.12em);
  }

  .n-hero__subtitle {
    font-size: 0.65rem;
    letter-spacing: var(--vf-tracking-normal, 0.05em);
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .n-hero__content {
    padding: 2rem var(--vf-section-gutter, 1.5rem);
  }
}

@media (max-width: 480px) {
  .n-hero__heading {
    font-size: clamp(1.3rem, 7vw, 2rem);
  }

  .n-hero__rotator {
    height: 1.4em;
  }
}

/* === Elementor Editor: show a subtle indicator === */
.elementor-editor-active .n-hero {
  min-height: 400px;
}