/* =========================================================
   HERO SLIDE COUNTER
   ========================================================= */

.hero-counter{
  margin-top:var(--space-4);

  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;

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

.hero-counter-current{
  font-weight:600;
}

.hero-counter-sep{
  margin:0 2px;
  opacity:.6;
}

.hero-counter-total{
  opacity:.6;
}




/* =========================================================
   HERO — HOME PAGE (CANON)
   Фикс геометрии + LCP + центр
   ========================================================= */


   
.hero-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;

  width:auto;
  height:auto;

  font-size:72px;
  font-weight:300;
  line-height:1;
  color:#fff;

  background:transparent;
  border:0;
  padding:0;
  margin:0;

  cursor:pointer;
  opacity:.75;
  text-shadow:0 2px 12px rgba(0,0,0,.45);

  /* 🔥 УБИЙСТВО НАТИВНОЙ КНОПКИ */
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  outline:none;
  box-shadow:none;
}

.hero-nav:focus,
.hero-nav:focus-visible,
.hero-nav:active{
  outline:none !important;
  box-shadow:none !important;
}


.hero-nav::-moz-focus-inner{
  border:0;
  padding:0;
}



.hero-nav:hover{
  opacity:1;
}


.hero-nav:focus{
  outline:none;
  box-shadow:none;
}

.hero-nav:focus-visible{
  outline:none;
  box-shadow:none;
}

.hero-nav--prev::before{
  content:'‹';   /* или ⟨ */
}

.hero-nav--next::before{
  content:'›';   /* или ⟩ */
}




/* левая */
.hero-nav--prev{
  left:var(--space-6);
}

/* правая */
.hero-nav--next{
  right:var(--space-6);
}



/* =========================================================
   SECTION — FULL BLEED
   ========================================================= */

.section-hero{
  position:relative;
  display:flex;
  align-items:center;

  min-height:75vh;
   max-height:none;
  
  padding:var(--space-12) 0;

  /* 🔑 FULL BLEED — КЛЮЧ */
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;

  overflow:hidden;
}




/* =========================================================
   LCP IMAGE — ЕДИНСТВЕННЫЙ ФОН (НЕ В ПОТОКЕ)
   ========================================================= */

.hero-lcp-img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;
  object-fit:cover;

  z-index:0;
  pointer-events:none;
}


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

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:linear-gradient(
    to bottom,
    var(--hero-overlay-top),
    var(--hero-overlay-bottom)
  );
}


/* =========================================================
   HERO BACKGROUND SLIDES (SECONDARY, НЕ LCP)
   ========================================================= */

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

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

  opacity:0;
  transition:opacity 1.2s ease;

  pointer-events:none;
  z-index:0;
}

.hero-bg.is-active{
  opacity:1;
}


/* =========================================================
   CONTAINER — ПОВЕРХ ФОНА
   ========================================================= */

.section-hero > .container{
  position:relative;
  z-index:2;
}


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

.home_hero_wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  gap:var(--space-4);

  max-width:520px;
  margin:0 auto;
}

@media (min-width: 768px){
  .home_hero_wrap{
    transform: translateY(6vh);
  }
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.home_hero_title{
  margin:0;
}

.home_hero_subtitle{
  font-size:1.15rem;
  line-height:1.4;
}


/* =========================================================
   CTA
   ========================================================= */

.home_hero_wrap .button--banner{
  margin-top:var(--space-6);
}


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

@media (max-width:640px){

  .home_hero_title{
    font-size:1.7rem;
    line-height:1.15;
  }

  .home_hero_subtitle{
    font-size:1rem;
  }

}

/* =========================================================
   HERO — MOBILE OFFSET CONTENT
   ========================================================= */

@media (max-width: 640px){

  .section-hero{
    align-items:flex-start; /* ⬅️ не по центру */
  }

  .section-hero > .container{
    margin-top: 28vh; /* ⬅️ опускаем блок ниже центра */
  }

}