/* ======================================
   MOBILE HERO — CLEAN SYSTEM
====================================== */

@media (max-width:768px){

/* ========== ROOT ========== */

.hero-cinematic{
  height:100vh;
  min-height:100vh;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  position:relative;
}


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

.hero-content{
  position:relative;

  width:100%;

  margin-top:auto;

  padding:0 16px 90px;

  display:flex;
  flex-direction:column;
  gap:10px;
}


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

.hero-box{
  max-width:100%;
}

.hero-title{
  font-size:30px;
  line-height:1.05;
}

.hero-big{
  font-size:14px;
}

.hero-cinematic .hero-address{
    color: rgba(255,255,255,.95) !important;
    opacity:1 !important;

    text-shadow:
      0 2px 6px rgba(0,0,0,.55),
      0 0 12px rgba(0,0,0,.35);
  }



/* ========== FEATURES ========== */

.hero-features{
  margin:6px 0 0;
}

.hero-feature{
  font-size:13px;
  padding:6px 10px;
}


/* ========== BUTTONS ========== */

.hero-buttons{
  position:relative;

  display:flex;
  flex-direction:column;

  gap:10px;

  width:100%;

  margin-top:10px;
}

.hero-buttons a{
  width:100%;
  height:46px;

  border-radius:999px;

  font-size:13px;
  font-weight:700;
}


/* ========== BADGE ========== */

.hero-energy-badge{
  top:74px;
  right:14px;
}

.hero-energy-badge img{
  width:90px;
}


/* ========== SCROLL ARROW ========== */

.hero-scroll{
  position:absolute;

  left:50%;
  bottom:16px;

  transform:translateX(-50%);
  z-index:30;
}


/* ========== CLEANUP ========== */

.hero-separator,
.hero-spacer{
  display:none;
}

}

/* ======================================
   MOBILE FIX PACK (HEADER + HERO)
====================================== */
@media (max-width: 768px){

  /* ---------- HEADER ---------- */

  /* näita telefon (sest ta on primary-nav sees) */
  .primary-nav{ display:flex; align-items:center; gap:10px; }

  /* peida ainult menüü lingid logo kõrval */
  .primary-nav .primary-menu{ display:none; }

  /* telefon 1 real; kui ei mahu, peida TEKST (ikoon jääb) */
  .header-phone{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
  .phone-text{ white-space:nowrap; }
  @media (max-width: 380px){
    .phone-text{ display:none; }
  }

  /* mobiilis ainult 3 punkti, ära näita teist nuppu */
  .menu-secondary{ display:none !important; }

  /* kui menu-secondary ära kaob, tee dots nupp normaalseks */
  .menu-group{ border-radius:10px; }
  .menu-toggle{ width:56px; }

  /* ---------- HERO VARIABLES (reguleeritav) ---------- */
  :root{
    --m-cta-h: 40px;     /* NUPU KÕRGUS -> muuda seda */
    --m-badge-w: 90px;   /* BADGE SUURUS -> muuda seda */
    --m-bottom-pad: 78px;/* ruum noole jaoks */
  }

  /* ---------- HERO LAYOUT (force override) ---------- */

  /* content alla, noole kohale */
  .hero-cinematic .hero-content{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    padding:0 16px var(--m-bottom-pad) !important;
    width:100% !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    gap:10px !important;
  }

  .hero-cinematic .hero-box{ max-width:100% !important; }

  .hero-cinematic .hero-title{ font-size:36px !important; line-height:1.05 !important; }
  .hero-cinematic .hero-big{ font-size:18px !important; }
  .hero-cinematic .hero-address{ font-size:13px !important; }

  /* ---------- TICKER: sinu HTML-is pole track'i, seega animeerime INNER-i ---------- */
  .hero-cinematic .hero-features{ overflow:hidden !important; margin-top:8px !important; }
  .hero-cinematic .hero-features-inner{
    display:flex !important;
    align-items:center !important;
    gap:0 !important;

    width:max-content !important;
    animation: mobileTicker 18s linear infinite !important;

    padding:0 16px !important; /* mobiili edge */
  }
  .hero-cinematic .hero-feature{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    font-size:13px !important;
    padding:3px 14px !important;
  }
  @keyframes mobileTicker{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }


  /* ---------- ARROW jääb alla ---------- */
  .hero-scroll{
    position:absolute !important;
    left:50% !important;
    bottom:16px !important;
    transform:translateX(-50%) !important;
    z-index:50 !important;
  }

  /* spacer/separator ära sega mobiilis */
  .hero-separator,
  .hero-spacer{ display:none !important; }
}

/* ======================================
   MOBILE CTA — FINAL CLEAN SYSTEM
====================================== */

@media (max-width:768px){

  /* Wrapper */
  .hero-buttons{
    width:100%;

    margin:10px 0 0;

    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    gap:10px;
  }

  /* Button */
  .hero-buttons a{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    max-width:100%;

    height:var(--m-cta-h,46px);

    padding:0 0px;

    border-radius:999px;

    font-size:13px;
    font-weight:700;
    line-height:1;

    box-sizing:border-box;

    margin:0;

    overflow:hidden;
  }

}

/* ======================================
   MOBILE CTA — ALIGN WITH HERO CONTENT
====================================== */

@media (max-width:768px){

  /* Nupud kasutavad hero-content paddingut */
  .hero-buttons{
    width:100%;
    margin-top:10px;

    display:flex;
    flex-direction:column;
    gap:10px;

    box-sizing:border-box;
  }

  .hero-buttons a{
    width:100%;
    max-width:100%;

    height:46px;

    padding:0 12px;

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

    font-size:13px;
    font-weight:700;

    box-sizing:border-box;

    margin:0;
  }

}

/* ======================================
   MOBILE — REMOVE DESKTOP CENTERING
====================================== */

@media (max-width:768px){

  .hero-buttons{
    position:relative;   /* mitte absolute */
    left:auto;
    bottom:auto;
    transform:none;      /* KRIITILINE */

    width:100%;
  }

}

/* ======================================
   MOBILE — SAFE EDGE SYSTEM
   (1 number controls padding)
====================================== */

@media (max-width:768px){

  /* REGULEERI SIIT */
  :root{
    --m-edge: 16px;   /* ← MUUDA SEDA (12–20) */
  }

  /* HERO CONTAINER */
  .hero-content{
    left:0;
    right:0;

    padding-left:var(--m-edge);
    padding-right:var(--m-edge);

    box-sizing:border-box;
    overflow:hidden;
  }

  /* BUTTON WRAPPER */
  .hero-buttons{
    width:100%;

    padding-left:0;
    padding-right:0;

    margin:0;

    box-sizing:border-box;

    gap:10px;   /* kontrollitud vahe */
  }

  /* BUTTON */
  .hero-buttons a,
  .hero-buttons .btn-primary,
  .hero-buttons .btn-outline{

    width:100%;
    max-width:100%;

    min-width:0;

    padding-left:var(--m-edge);
    padding-right:var(--m-edge);

    box-sizing:border-box;

    margin:0;

    left:auto;
    right:auto;
    transform:none;
  }

}

/* ======================================
   MOBILE HERO — COMPACT BOTTOM PACK
====================================== */

@media (max-width:768px){

  /* CONTENT MADALAMAKS */
  .hero-content{
    padding-bottom:0px !important; /* enne 90 */
  }

  /* TICKER EI LÜKKA ÜLES */
  .hero-features{
    padding:5px 0 18px;
    margin-top:4px !important;
  }

  /* NUPUD LÄHEMALE */
  .hero-buttons{
    margin-top:6px !important;
    gap:8px !important;
  }

}

/* ======================================
   MOBILE — STACK TIGHT SYSTEM
====================================== */
@media (max-width:768px){

  /* kogu hero sisu tihedamaks */
  .hero-content{
    gap:6px !important; /* üldine vahe */
  }

  /* TICKER → NUPUD vahe */
  .hero-features{
    margin-bottom:6px !important; /* ↓ reguleeri siit */
  }

  


}

/* ======================================
   MOBILE — HIDE FEATURE TICKER
====================================== */
@media (max-width:768px){

  .hero-cinematic .hero-features{
    display:none !important;
  }

}