/*
 * Первый экран главной.
 *
 * На доноре это Slider Revolution 7 с одним статичным слайдом: модуль весит
 * ~534 КБ JS и рисует слои скриптом. Здесь тот же слайд собран вёрсткой.
 * Значения взяты из конфига слайдера (SR7.JSON): размеры, начертания, цвета
 * и контрольные ширины 1300 / 1100 / 900 / 500.
 */

.home-hero {
    position: relative;
    width: 100%;
    height: 700px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Слой затемнения поверх фотографии (donor: слой Dark-overlay) */
.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.home-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    /* по той же сетке, что и остальной контент (см. site.css) */
    max-width: var(--wf-wrap-max, 1400px);
    margin: 0 auto;
    padding: 0 var(--wf-wrap-gutter, 40px);
}

/* «Билеты ГИМС» — надзаголовок */
.home-hero__title {
    font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 38px;
    color: #148ba9;
    padding-bottom: 30px;
}

/* «Для управления маломерным судном» — с бирюзовой линией слева */
.home-hero__subtitle {
    font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 42px;
    color: #ffffff;
    border-left: 3px solid #148ba9;
    padding-left: 25px;
}

/* «ПРОЙДИТЕ ТЕСТ» — крупная надпись-ссылка */
.home-hero__btn {
    display: inline-block;
    font-family: 'Ubuntu Condensed', Helvetica, Arial, Verdana, sans-serif;
    font-weight: 400;
    font-size: 110px;
    line-height: 110px;
    color: #ffffff;
    text-transform: uppercase;
    padding-bottom: 25px;
    text-decoration: none;
}

.home-hero__btn:hover,
.home-hero__btn:focus {
    color: #148ba9;
}

@media (max-width: 1299px) {
    .home-hero__title    { font-size: 30px; line-height: 34px; color: #2a8f9e; padding-bottom: 15px; }
    .home-hero__subtitle { font-size: 22px; line-height: 34px; }
    .home-hero__btn      { font-size: 90px;  line-height: 90px; }
}

@media (max-width: 1099px) {
    .home-hero__btn { font-size: 80px; line-height: 80px; }
}

@media (max-width: 899px) {
    .home-hero           { height: 800px; }
    .home-hero__title    { font-size: 24px; line-height: 28px; }
    .home-hero__subtitle { font-size: 20px; line-height: 32px; }
    .home-hero__btn      { font-size: 60px; line-height: 60px; }
}