/* =============================================================
   HERO.CSS
   Главный блок на первом экране: фон, заголовок, подпись,
   кнопка, подложка под текст.
   -------------------------------------------------------------
   ВАЖНО (см. ошибку в разборе): у .hero сейчас min-height: 80vh.
   В SUMMARY записано "900px десктоп / 500px мобильные".
   Если визуально нужно ровно 900px — поменяй здесь 80vh → 900px.
   ============================================================= */


/* -------------------------------------------------------------
   КОРНЕВОЙ БЛОК HERO
   Растягивается на всю ширину, центрирует содержимое
   по вертикали и горизонтали.
   ------------------------------------------------------------- */
.hero {
    width               : 100%;
    min-height          : 80vh;          /* ← см. примечание выше: 80vh vs 900px */
    display             : flex;
    flex-direction      : column;
    align-items         : center;
    justify-content     : center;
    gap                 : 20px;
    text-align          : center;
    color               : #fff;
    background-size     : cover;
    background-position : center 100%;
    background-repeat   : no-repeat;
    padding             : 0 20px;
    box-sizing          : border-box;
}


/* -------------------------------------------------------------
   ВНУТРЕННИЙ КОНТЕЙНЕР HERO
   Выстраивает h1 / p / кнопку в колонку по центру.
   Отдельный max-width, чтобы длинный текст не растягивался на всю ширину.
   ------------------------------------------------------------- */
.hero .container {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 20px;
    max-width       : 900px;
    margin          : 0 auto;
}


/* -------------------------------------------------------------
   ЗАГОЛОВОК H1 В HERO
   Цвет жёстко белый — поверх тёмной подложки.
   Если менять через админку (--heading-color) — учесть, что
   на фоне картинки тёмный текст будет нечитаем.
   ------------------------------------------------------------- */
.hero h1 {
    font-size     : 40px;
    margin-bottom : 15px;
    color         : #ffffff;
}


/* -------------------------------------------------------------
   ПОДПИСЬ ПОД ЗАГОЛОВКОМ В HERO
   ------------------------------------------------------------- */
.hero p {
    font-size     : 20px;
    margin-bottom : 15px;
    color         : #ffffff;
}


/* -------------------------------------------------------------
   КНОПКА В HERO
   Белая кнопка с тёмным текстом поверх тёмной подложки.
   ------------------------------------------------------------- */
.hero-button {
    display         : inline-block;
    margin-top      : 20px;
    padding         : 10px 30px;
    background      : #fff;
    color           : #333;
    border-radius   : 30px;
    text-decoration : none;
    font-weight     : bold;
}


/* -------------------------------------------------------------
   ПОДЛОЖКА ПОД ТЕКСТ В HERO
   Полупрозрачный тёмный прямоугольник, чтобы текст читался
   поверх светлой части фоновой картинки.
   На мобильных переопределяется в responsive.css.
   ------------------------------------------------------------- */
.hero-content {
    background    : rgba(0, 0, 0, 0.45);
    padding       : 30px 40px;
    border-radius : 12px;
    display       : inline-block;
    max-width     : 900px;
    color         : #fff;

    /* Раскомментировать, если нужен эффект "стекла":
       backdrop-filter: blur(2px); */
}