/* ============================================
   HERO SECTION STYLES — KudrovoCity (Final)
   ============================================ */

/* Базовая секция */
.hero-section {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
}

/* Фоновые изображения */
.hero-home {
    background-image: url('/images/hero/hero-home.webp');
}

.hero-news {
    background-image: url('/images/hero/hero-news.webp');
}

.hero-map {
    background-image: url('/images/hero/hero-map.webp');
}

/* Контент */
.hero-content {
    position: relative;
    z-index: 2;
    color: white;
    padding: 20px;
}

    .hero-content h1 {
        font-size: 2.5rem;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 1rem;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }

    .hero-content p {
        font-size: 1.25rem;
        margin-bottom: 1.2rem;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

/* ============================================
   TABLET 768px-1023px — как на втором скриншоте
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {

    .hero-section {
        padding-top: 1rem;
        padding-bottom: 1rem;
        min-height: 280px;
    }

        /* Общий контейнер — две колонки в строку */
        .hero-section .row {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
        }

        /* Левая колонка: заголовок + кнопки */
        .hero-section .col-lg-6:first-child {
            width: 50% !important;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 0.5rem;
        }

        /* Блок с заголовком - ОБЯЗАТЕЛЬНО ПОКАЗЫВАЕМ */
        .hero-section .d-flex.align-items-center.gap-3.mb-3 {
            display: flex !important;
            visibility: visible !important;
            margin-bottom: 0.5rem !important;
        }

        /* Убираем иконку слева от заголовка (первый div) */
        .hero-section .d-flex.align-items-center.gap-3.mb-3 > div:first-child {
            display: none !important;
        }

        /* Второй div с заголовком - ОБЯЗАТЕЛЬНО ПОКАЗЫВАЕМ */
        .hero-section .d-flex.align-items-center.gap-3.mb-3 > div:last-child {
            display: block !important;
            visibility: visible !important;
        }

        /* Заголовок "Добро пожаловать в Кудрово" для 768px-1023px */
        .hero-section .display-4,
        .hero-section h1.display-4 {
            font-size: 1.4rem !important;
            line-height: 1.3;
            margin-bottom: 0.5rem !important;
            display: block !important;
            visibility: visible !important;
            color: white !important;
            opacity: 1 !important;
        }

        /* Убираем подзаголовки */
        .hero-section .lead,
        .hero-section p.lead {
            display: none !important;
        }

        /* Кнопки — строго вертикально */
        .hero-section .d-flex.flex-wrap.gap-3 {
            flex-direction: column !important;
            gap: 0.8rem !important;
            flex-wrap: nowrap !important;
            margin-top: 1rem !important;
            align-items: flex-start !important;
        }

        /* Правая колонка — только погода */
        .hero-section .weather-column {
            width: 50% !important;
            display: flex;
            justify-content: center !important;
            align-items: center !important;
        }

            /* Карточка погоды — как на втором скриншоте */
            .hero-section .weather-column .card {
                width: 180px !important;
                height: 180px !important;
                padding: 1.5rem !important;
                border-radius: 25px !important;
                -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
            }

                /* Температура крупнее */
                .hero-section .weather-column .card .h5 {
                    font-size: 1.8rem !important;
                    margin-bottom: 0;
                }

        /* Убираем дополнительную информацию погоды (Ощущается, Влажность, Восход, Закат) */
        .hero-section .weather-column .card .row.g-2 {
            display: none !important;
        }
}


/* ============================================
   1024px - Убираем подзаголовок
   ============================================ */
@media (min-width: 1024px) and (max-width: 1279px) {

    .hero-section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        min-height: 300px;
    }

        .hero-section .col-lg-6:first-child {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .hero-section .weather-column {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

            .hero-section .weather-column .card {
                max-width: 350px;
                width: 100%;
            }

        /* Скрываем подзаголовок "Современный город..." для 1024px */
        .hero-section .lead,
        .hero-section p.lead {
            display: none !important;
        }

        /* Увеличиваем заголовок, так как места больше */
        .hero-section .display-4 {
            font-size: 2.2rem !important;
            line-height: 1.3;
            margin-bottom: 1rem;
        }
}

/* ============================================
   DESKTOP (>= 1280px)
   ============================================ */
@media (min-width: 1280px) {

    .hero-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
        min-height: 320px;
    }

        .hero-section .col-lg-6:first-child {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .hero-section .weather-column {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

            .hero-section .weather-column .card {
                max-width: 380px;
                width: 100%;
            }
}

/* ============================================
   MOBILE (<= 767px)
   ============================================ */
@media (max-width: 767px) {

    .hero-section {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        min-height: 160px;
    }

        .hero-section .col-12:first-child {
            width: calc(100% - 130px);
            padding-right: 0.5rem;
        }

        .hero-section .col-12:last-child {
            width: 130px;
            display: flex;
            justify-content: flex-end;
            padding: 0;
        }

        .hero-section .card {
            max-width: 120px;
        }

        /* Заголовок */
        .hero-section .display-4 {
            font-size: 1.2rem;
            line-height: 1.25;
            margin-bottom: 0.25rem;
        }

        /* Подзаголовок */
        .hero-section .lead {
            font-size: 0.7rem;
            line-height: 1.2;
            margin-bottom: 0.5rem;
        }

        /* Урезаем погоду на мобильных */
        .hero-section .card .row.g-2,
        .hero-section .card .small.text-white-50 {
            display: none;
        }

        .hero-section .card .d-flex.align-items-center.gap-3 {
            flex-direction: column;
            text-align: center;
            gap: 0.3rem;
        }

            .hero-section .card .d-flex.align-items-center.gap-3 > div:first-child {
                width: 40px;
                height: 40px;
            }

            .hero-section .card .d-flex.align-items-center.gap-3 i {
                font-size: 1.5rem;
            }

        .hero-section .card .h5 {
            font-size: 1.2rem;
            margin-bottom: 0;
        }
}

/* ============================================
   SMALL PHONES 400px–480px
   ============================================ */
@media (max-width: 480px) and (min-width: 400px) {

    .hero-section {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

        .hero-section .display-4 {
            font-size: 1.05rem;
            line-height: 1.18;
            margin-bottom: 0.2rem;
        }

        .hero-section .lead {
            font-size: 0.65rem;
            margin-bottom: 0.35rem;
        }

        .hero-section .container-fluid {
            padding-left: 0.3rem;
            padding-right: 0.3rem;
        }
}

/* ============================================
   VERY SMALL PHONES (<= 399px) включая 320px
   ============================================ */
@media (max-width: 399px) {

    .hero-section {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        min-height: 150px;
    }

        /* Заголовок "Добро пожаловать в Кудрово" для 320px */
        .hero-section .display-4 {
            font-size: 0.75rem !important;
            line-height: 1.1 !important;
        }

        .hero-section .lead {
            font-size: 0.6rem;
            line-height: 1.1;
        }

        .hero-section .col-12:first-child {
            width: calc(100% - 105px);
        }

        .hero-section .col-12:last-child {
            width: 105px;
        }

        .hero-section .card {
            max-width: 100px;
        }
}


/* Скрываем только текст, оставляем кнопки и погоду */
@media (max-width: 767px) {

    /* Скрываем текстовый блок */
    .hero-section .lead,
    .hero-section p.lead {
        display: none !important;
    }

    /* Колонка с кнопками остаётся */
    .hero-section .col-12:first-child {
        display: block !important;
        width: calc(100% - 130px);
        padding-right: .5rem;
    }

    /* Погода справа как раньше */
    .hero-section .col-12:last-child {
        width: 130px;
        display: flex;
        justify-content: flex-end;
    }
}