/* Critical above-the-fold styles for homepage hero (mobile LCP + CLS) */
.underheader {
    position: relative;
    clear: both;
}

.underheader .slider,
.underheader .slider.init-homeslider {
    width: 100%;
    overflow: hidden;
}

/* Hero height breakpoints — single source of truth (was resizeMainSlider in banner.php) */
@media (min-width: 569px) and (max-width: 768px) {
    .underheader .slider,
    .underheader .slider.init-homeslider {
        height: 300px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .underheader .slider,
    .underheader .slider.init-homeslider {
        height: 400px;
    }
}

@media (min-width: 1025px) {
    .underheader .slider,
    .underheader .slider.init-homeslider {
        height: calc(100vh - 112px - 200px - 8px);
        height: calc(100svh - 112px - 200px - 8px);
        min-height: 300px;
    }
}

.underheader .slide {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    background-size: cover !important;
    background-position: center center !important;
}

@media (min-width: 569px) {
    .underheader .slide {
        height: 100%;
    }
}

/* До инициализации fotorama показываем только первый слайд.
   Иначе браузер качает фоны ВСЕХ слайдов (~1.5 МБ) одновременно с LCP.
   После init fotorama переносит .slide внутрь .fotorama__html и добавляет контейнеру класс .fotorama —
   селектор перестаёт совпадать, слайды показываются как раньше. */
.underheader .slider.init-homeslider:not(.fotorama) > .slide:not(:first-child) {
    display: none;
}

/* Fotorama internals follow container — overrides inline height from init (height: 600) */
.underheader .slider.init-homeslider .fotorama,
.underheader .slider.init-homeslider .fotorama__wrap,
.underheader .slider.init-homeslider .fotorama__stage,
.underheader .slider.init-homeslider .fotorama__stage__shaft,
.underheader .slider.init-homeslider .fotorama__stage__frame {
    height: 100% !important;
}

.banner-slide-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Desktop LCP: фон первого слайда здесь, чтобы banner.css можно было грузить async */
@media (min-width: 569px) {
  .dorozhno-stroitelnaya-tekhnika {
    background-image: url(../images/slider/dorozhno-stroitelnaya-tekhnika.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
}

@media (max-width: 568px) {
  .underheader .slider,
  .underheader .slider.init-homeslider {
    aspect-ratio: 480 / 320;
    height: auto !important;
    overflow: hidden;
  }

  .underheader .slide {
    height: 100%;
    min-height: 0;
  }

  .dorozhno-stroitelnaya-tekhnika {
    background-image: url(../images/slider/dorozhno-stroitelnaya-tekhnika-mob.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: left bottom !important;
    background-size: cover !important;
  }
}

/* Нижняя мобильная панель — критичный каркас, пока footer.css грузится async */
.mobile-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
@media (min-width: 769px) {
    .mobile-menu {
        display: none;
    }
}
.mobile-menu .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 12px;
    position: relative;
}