/* ==========================================================================
   SS Hero Block — уникальные стили, адаптированные из слайдера smartsklad.com
   Все классы имеют префикс .ss-hero для изоляции от темы
   ========================================================================== */

/* --------------------------------------------------------------------------
   Переменные (локальные для блока, не конфликтуют с темой)
   -------------------------------------------------------------------------- */
   .ss-hero {
    --ss-hero-orange:      #FA6E09;
    --ss-hero-black:       #000000;
    --ss-hero-white:       #ffffff;
    --ss-hero-font:        'Roboto', sans-serif;

    /* Desktop: минимальная высота. Максимум — по контенту. */
    --ss-hero-min-height:  578px;

    /* Desktop: внутренние отступы Hero (для свободного роста по контенту) */
    --ss-hero-pt:          120px;
    --ss-hero-pb:          60px;

    /* Desktop: ширина контента — до 700px */
    --ss-hero-content-w:   700px;

    /* Desktop: размеры заголовка */
    --ss-hero-fs:          62px;
    --ss-hero-lh:          75px;

    /* Кнопка */
    --ss-hero-btn-width:   208px;
}

/* --------------------------------------------------------------------------
   Обёртка (.banner аналог)
   Оригинал: .banner { padding: var(--h-elem-indent) }; main > div { margin-bottom: var(--mb-block) }
   -------------------------------------------------------------------------- */
.ss-hero-wrapper {
    padding-right: 30px;
    padding-left:  30px;
    margin-bottom: 120px;
}

/* --------------------------------------------------------------------------
   Основной блок
   -------------------------------------------------------------------------- */
.ss-hero {
    position:        relative;
    width:           100%;
    min-height:      var(--ss-hero-min-height);
    display:         flex;
    align-items:     center;
    padding-top:     var(--ss-hero-pt);
    padding-bottom:  var(--ss-hero-pb);
    overflow:        hidden;
    font-family:     var(--ss-hero-font);
}

/* --------------------------------------------------------------------------
   Фоновое изображение
   Оригинал: .tp-bgimg { background-size: cover; background-position: center center }
   -------------------------------------------------------------------------- */
.ss-hero__bg {
    position:            absolute;
    inset:               0;
    background-repeat:   no-repeat;
    background-size:     cover;
    background-position: center center;
    z-index:             0;
}

/* Placeholder в редакторе при отсутствии изображения */
.ss-hero__bg-placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    min-height:      var(--ss-hero-min-height);
    background:      #ccc;
}

/* --------------------------------------------------------------------------
   Контейнер (Bootstrap .container)
   -------------------------------------------------------------------------- */
.ss-hero__container {
    position: relative;
    z-index:  5;
    width:    100%;
}

/* --------------------------------------------------------------------------
   Контент-область (до 700px на ПК)
   -------------------------------------------------------------------------- */
.ss-hero__content {
    width:     100%;
    max-width: var(--ss-hero-content-w);
}

/* --------------------------------------------------------------------------
   Заголовок
   Оригинал: .tp-caption { font-size: 62px; line-height: 75px; font-weight: 700; color: #fff; font-family: Roboto }
   -------------------------------------------------------------------------- */
.ss-hero__heading {
    font-family:   var(--ss-hero-font);
    font-size:     var(--ss-hero-fs);
    line-height:   var(--ss-hero-lh);
    font-weight:   700;
    color:         var(--ss-hero-white);
    letter-spacing: 0;
    margin:        0 0 24px 0;
    padding:       0;
    white-space:   normal;
}

/* --------------------------------------------------------------------------
   Подзаголовок
   -------------------------------------------------------------------------- */
.ss-hero__subheading {
    font-family:   var(--ss-hero-font);
    font-size:     22px;
    line-height:   1.4;
    font-weight:   400;
    color:         var(--ss-hero-white);
    margin:        0 0 20px 0;
}

/* --------------------------------------------------------------------------
   Описание (HTML)
   -------------------------------------------------------------------------- */
.ss-hero__description {
    font-family:   var(--ss-hero-font);
    font-size:     16px;
    line-height:   1.6;
    color:         var(--ss-hero-white);
    margin:        0 0 28px 0;
}

.ss-hero__description p {
    margin: 0 0 12px 0;
}

.ss-hero__description p:last-child {
    margin-bottom: 0;
}

.ss-hero__description a {
    color: var(--ss-hero-orange);
}

/* --------------------------------------------------------------------------
   Кнопка
   Оригинал: .btn.btn-orange + .banner .btn { width: 208px; padding: 14px 0; text-align: center }
             .btn-orange { background: #FA6E09; color: #fff }
             .btn { border-radius: 0; text-transform: uppercase; font-weight: 300 }
   -------------------------------------------------------------------------- */
.ss-hero__btn {
    display:         inline-block;
    width:           var(--ss-hero-btn-width);
    padding:         14px 0;
    background:      var(--ss-hero-orange);
    color:           var(--ss-hero-white);
    font-family:     var(--ss-hero-font);
    font-size:       16px;
    font-weight:     300;
    line-height:     1.5;
    letter-spacing:  0.02em;
    text-align:      center;
    text-transform:  uppercase;
    text-decoration: none;
    border:          1px solid transparent;
    border-radius:   0;
    cursor:          pointer;
    transition:      background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    outline:         none;
    box-shadow:      none;
    max-width:       100%;
}

.ss-hero__btn:hover,
.ss-hero__btn:focus {
    background: var(--ss-hero-black);
    color:      var(--ss-hero-white);
    outline:    none;
    box-shadow: none;
}

/* Подсказка в редакторе */
.ss-hero__btn-hint {
    color:      rgba(255, 255, 255, 0.7);
    font-size:  14px;
    font-style: italic;
    margin:     0 0 12px 0;
}


/* ==========================================================================
   АДАПТИВНЫЕ СТИЛИ
   RS breakpoints из data-* атрибутов слайдера:
     [desktop ≥1240, large 1024-1239, tablet 778-1023, mobile ≤777]
   Сопоставление с Bootstrap-брейкпоинтами темы:
     tablet  → max-width: 991px   (≈ RS 778-1023)
     mobile  → max-width: 575px   (≈ RS ≤480)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Планшет: max-width 991px
   На планшете и ниже контент занимает всю доступную ширину
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .ss-hero-wrapper {
        padding-right: 10px;
        padding-left:  10px;
        margin-bottom: 60px;
    }

    .ss-hero {
        --ss-hero-min-height:    400px;
        --ss-hero-pt:            60px;
        --ss-hero-pb:            40px;
        --ss-hero-content-w:     100%;   /* на планшете и ниже — вся ширина */
        --ss-hero-fs:            36px;
        --ss-hero-lh:            48px;
        --ss-hero-btn-width:     180px;
    }

    .ss-hero__subheading {
        font-size:   18px;
    }

    .ss-hero__bg::after {
        content: "";
        inset: 0;
        position: absolute;
        background: black;
        opacity: .3;
    }
}

/* --------------------------------------------------------------------------
   Мобильный: max-width 575px
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .ss-hero-wrapper {
        padding-right: 0;
        padding-left:  0;
        margin-bottom: 60px;
    }

    .ss-hero {
        --ss-hero-min-height:    320px;
        --ss-hero-pt:            40px;
        --ss-hero-pb:            30px;
        --ss-hero-fs:            28px;
        --ss-hero-lh:            36px;
        --ss-hero-btn-width:     160px;
    }

    .ss-hero__heading {
        margin-bottom: 16px;
    }

    .ss-hero__subheading {
        font-size:     16px;
        margin-bottom: 14px;
    }

    .ss-hero__description {
        font-size:     14px;
        margin-bottom: 20px;
    }

    .ss-hero__btn {
        font-size: 14px;
        padding:   10px 0;
    }
}

/* --------------------------------------------------------------------------
   Очень маленькие экраны: max-width 360px
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
    .ss-hero {
        --ss-hero-min-height:   280px;
        --ss-hero-fs:           24px;
        --ss-hero-lh:           32px;
    }
}

/* --------------------------------------------------------------------------
   Стили для редактора Gutenberg (editor-only overrides)
   -------------------------------------------------------------------------- */
.block-editor .ss-hero {
    min-height: var(--ss-hero-min-height);
}

.block-editor .ss-hero__bg-placeholder {
    min-height: var(--ss-hero-min-height);
}