/* =========================
HERO BASE — 2026
========================= */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh; /* iOS fix */

  display:flex;
  align-items:flex-end; /* ⭐ bottom-left */

  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;

  color:#fff;
  overflow:hidden;
}


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

.hero-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.2),
      rgba(0,0,0,.45)
    );

  z-index:1;
}


/* =========================
CONTENT
========================= */

.hero-content{
  position:absolute; /* ⭐ oluline */
  left:50%;
  bottom:140px; /* ⭐ SIIT kontrollid kõrgust */

  transform:translateX(-50%);

  z-index:2;
  width:100%;
  max-width:1280px;

  padding:clamp(40px,6vw,120px);

  display:flex;
  flex-direction:column;
  align-items:flex-start;
}


/* =========================
FONT SYSTEM — 2026
========================= */

.hero,
.hero *{
  font-family:"Inter",sans-serif;
}


/* =========================
EYEBROW (pill inside)
========================= */

.hero-eyebrow{
  font-family:"Space Grotesk",sans-serif;
  font-size:12px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:#fff;
}

/* scrolling pill wrapper (sinu PHP kasutab) */

.vl24-eyebrow-pill{
  display:inline-flex;
  align-items:center;

  padding:6px 14px; /* ⭐ väiksem */
  border-radius:999px;

  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);

  max-width:140px; /* ⭐ kontrollib laiust */
  overflow:hidden;

  margin-bottom:16px;
}





/* =========================
TITLE — 2026 LUXURY
========================= */

.hero-title{
  font-family:"Fraunces",serif; /* ⭐ uus */
  font-size:clamp(42px,6vw,96px);
  font-weight:600;
  line-height:1.05;

  margin:0 0 8px;

  letter-spacing:-0.02em;
  text-wrap:balance;

  color:#fff;

  /* eemaldab vanad efektid */
  text-shadow:none;
  filter:none;
}


/* =========================
TEXT
========================= */

.hero-text{
  max-width:640px;

  font-size:18px;
  line-height:1.6;

  color:rgba(255,255,255,.85);
}


/* =========================
HERO ACTIONS
========================= */

.hero-actions{
  display:flex;
  gap:22px;
  margin-top:40px;
  align-items:center;
  flex-wrap:wrap;
}


/* =========================
SCROLL BUTTON
========================= */

.hero-scroll{
  position:absolute;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);

  border:none;
  background:none;
  color:#fff;

  opacity:.7;
  cursor:pointer;
  transition:.3s ease;
}

.hero-scroll:hover{
  opacity:1;
  transform:translateX(-50%) translateY(4px);
}


/* =========================
MOBILE
========================= */

@media(max-width:768px){

  .hero{
    min-height:100svh;
    align-items:flex-end;
  }

  .hero-content{
    padding:40px 24px 60px;
  }

  .hero-title{
    font-size:38px;
    margin-bottom:6px !important;
  }

  .hero-text{
    font-size:16px;
    margin-top:0 !important;
    line-height:1.5;
  }

  .hero-actions{
    flex-direction:column;
    align-items:flex-start;
  }

}


/* =================================
HERO CONTENT POSITION — FORCE FIX
(override main.css)
================================= */

.hero{
  position:relative !important;
}

/* force override core main.css */

.hero .hero-content{
  position:absolute !important;

  left:50% !important;
  bottom:160px !important; /* ⭐ siin reguleerid */

  transform:translateX(-50%) !important;

  width:100%;
  max-width:1280px;

  z-index:10 !important;
}


/* device control */

@media(max-width:1024px){
  .hero .hero-content{
    bottom:120px !important;
  }
}

@media(max-width:768px){
  .hero .hero-content{
    bottom:80px !important;
  }
}


/* =================================
HERO TITLE — CINEMATIC DEPTH
================================= */

.hero .hero-title{
  font-family:"Outfit", sans-serif !important;

  font-weight:600 !important;
  font-size:clamp(30px,7vw,70px) !important;

  letter-spacing:-0.03em !important;
  line-height:1 !important;

  text-shadow:
    0 20px 60px rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.25);
}

/* =================================
EYEBROW PILL — GREEN BORDER
================================= */

.hero .vl24-eyebrow-pill{
  border:1px solid var(--brand-primary) !important;
}

/* =================================
HERO FINAL TYPO SPACING (DESKTOP + MOBILE)
PASTE THIS AS LAST RULES IN FILE
================================= */

.hero .hero-title{
  margin:0 0 6px !important;       /* title ↔ text */
}

.hero .hero-text{
  margin:0 !important;              /* removes <p> default margins */
  line-height:1.5 !important;
}

/* MOBILE — force override */
@media (max-width:768px){
  .hero .hero-title{
    
    margin:0 0 6px !important;
    line-height:1.05 !important;
  }

  .hero .hero-text{
    font-size:16px !important;
    margin:0 !important;
    line-height:1.5 !important;
  }
}

.hero-actions{
  display:flex;
  gap:12px;
  margin-top:20px;
  align-items:left;
  flex-wrap:wrap;
}

/* =================================
VL24 TRUE MARQUEE — NEVER JUMPS
================================= */

.vl24-eyebrow-track{
  display:flex;
  width:max-content;
  white-space:nowrap;
  animation:vl24InfiniteScroll 14s linear infinite;
}

.hero-eyebrow{
  padding-right:10px;
}

/* seamless loop */
@keyframes vl24InfiniteScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}