/* ===============================
   Переменные (учтены твои значения)
   =============================== */
:root{
  --header-h: 96px;     /* десктопная высота шапки */
  --inner-gap: 64px;    /* базовый зазор от шапки до контента */
}
@media (max-width: 991.98px){
  :root{
    --header-h: 72px;   /* планшетная высота шапки */
    --inner-gap: 300px; /* планшет: сильнее опускаем контент (как у тебя) */
  }
}
@media (max-width: 575.98px){
  :root{
    --header-h: 72px;  /* мобильная высота шапки */
    --inner-gap: 250px; /* мобильный: опускаем, но меньше чем на планшете */
  }
}

/* ======================
   Контейнер и фоновая картинка
   ====================== */
.slide--inner .home_slider_container{
  position: relative;
  min-height: max(
    clamp(260px, 45svh, 480px),
    calc(var(--header-h) + var(--inner-gap) + 20px)  /* запас под контент */
  ); /* стабильная высота на мобилках */
}
@media (min-width: 1600px){
  .slide--inner .home_slider_container{ min-height: clamp(260px, 40svh, 480px); }
}

.slide--inner .background_image{
  position: absolute;
  inset: 0;
  background: center top / cover no-repeat;
  z-index: 0; /* фон под контентом */
}
.slide--inner .background_image::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
}
@media (min-width:1600px){
  .slide--inner .background_image::after{
    background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.28));
  }
}

/* ======================
   Контент как оверлей (не влияет на высоту)
   ====================== */
.slide--inner .home_slider_content_container{
  position: absolute;   /* ключевой момент: не растягиваем родителя */
  inset: 0;
  z-index: 1;
}

/* ======================
   Сетка и отступы
   ====================== */
.slide--inner .hero--inner{
  height: 100%;
  display: flex;
}

.slide--inner .hero__grid{
  position: absolute;                       /* плавающий слой */
  left: 0; right: 0;
  top: calc(var(--header-h) + var(--inner-gap)); /* «спускаем» контент */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 0 0 22px;                        /* нижний внутренний зазор */
}

@media (max-width: 991.98px){
  .slide--inner .hero__grid{ gap: 20px; }
}
@media (max-width: 575.98px){
  .slide--inner .hero__grid{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 0 0 16px;                      /* компактнее снизу на мобилке */
  }
}

/* =============
   Типографика и кнопки
   ============= */
.slide--inner .hero-left{ color:#fff; max-width: 820px; }

.slide--inner .hero-title{
  margin:0 0 8px;
  color:#fff;
  font-weight:800;
  font-size: clamp(22px, 4.2vw, 40px);
  line-height:1.15;
}
.slide--inner .hero-sub{
  margin:0;
  color:#fff;
  opacity:.95;
  font-size: clamp(14px, 2.2vw, 16px);
}

.slide--inner .hero-right{ display:flex; align-items:flex-end; }
/* .slide--inner .btn-hero styles are now handled by buttons.css */

@media (max-width: 767.98px){
  .slide--inner .hero-title{ font-size: clamp(20px, 5vw, 32px); }
  .slide--inner .hero-sub{   font-size: clamp(13px, 2.6vw, 15px); }
}
@media (max-width: 359.98px){
  .slide--inner .home_slider_container{ min-height: 240px; }
}

.slide--inner.home {
  height: auto !important;
}