/* ==========================================================
   KOSMODRIFT
   HOME MOBILE FLOW V18.1

   MOBILE:
   HEADER
   ↓
   HERO / MAIN SPLASH
   ↓
   LIVE
   ↓
   DASHBOARD CARDS

   DESKTOP:
   NO CHANGES
   ========================================================== */


/* ==========================================================
   ПЛАНШЕТ / МОБИЛЬНЫЙ РЕЖИМ САЙТА
   ========================================================== */

@media (max-width: 820px) {


    /* ======================================================
       HERO БОЛЬШЕ НЕ ИМЕЕТ ФИКСИРОВАННОЙ ВЫСОТЫ.

       Теперь он становится нормальным вертикальным
       контейнером:

       1. заставка;
       2. LIVE.
       ====================================================== */

    main > .hero.hero--single-banner {

        position: relative !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        justify-content: flex-start !important;

        gap: 0 !important;

        overflow: visible !important;

        border-bottom: 0 !important;

        background:
            #04131f !important;

        isolation: isolate !important;
    }


    /* ======================================================
       ОСНОВНАЯ ЗАСТАВКА KOSMODRIFT.

       Показываем ВСЮ картинку.
       Никакого cover и никакого вертикального обрезания.
       ====================================================== */

    main > .hero.hero--single-banner
    > .hero__banner {

        position: relative !important;

        inset: auto !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        z-index: 1 !important;

        order: 1 !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        flex:
            0 0 auto !important;

        object-fit: contain !important;

        object-position:
            center center !important;

        border-bottom:
            1px solid
            rgba(
                72,
                198,
                239,
                .24
            ) !important;
    }


    /* ======================================================
       LIVE.

       КЛЮЧЕВОЕ ИЗМЕНЕНИЕ:
       position absolute -> normal document flow.

       Поэтому LIVE физически занимает своё место
       и больше не может накрыть заставку.
       ====================================================== */

    main > .hero.hero--single-banner
    > #kdb-live-v18 {

        position: relative !important;

        inset: auto !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        z-index: 3 !important;

        order: 2 !important;

        display: block !important;

        /* The LIVE panel is a full-width track block on phones.  The old
           9px gutters made it visibly narrower than the blocks below. */
        width: 100% !important;

        max-width: none !important;

        margin:
            9px auto 9px !important;

        padding: 0 !important;

        flex:
            0 0 auto !important;

        transform: none !important;
    }


    /* ======================================================
       LIVE НЕ ДОЛЖЕН НАСЛЕДОВАТЬ НИКАКИЕ FLOAT/FIXED
       ЭКСПЕРИМЕНТЫ ИЗ ПРЕЖНИХ МОБИЛЬНЫХ ВЕРСИЙ.
       ====================================================== */

    main > .hero.hero--single-banner
    > #kdb-live-v18[style] {

        top: auto !important;

        right: auto !important;

        bottom: auto !important;

        left: auto !important;

        transform: none !important;
    }


    /* ======================================================
       СТАРАЯ ПОГОДНАЯ БАШНЯ НА МОБИЛЬНОМ НЕ НУЖНА.

       Актуальная информация уже отображается
       в новом верхнем LIVE.
       ====================================================== */

    main > .hero.hero--single-banner
    > .weather-tower,

    main > .hero.hero--single-banner
    > .weather-tower--on-banner {

        display: none !important;
    }


    /* ======================================================
       Псевдооверлей старой HERO не должен закрывать
       новую заставку.
       ====================================================== */

    main > .hero.hero--single-banner::before,
    main > .hero.hero--single-banner::after {

        pointer-events: none !important;
    }

}


/* ==========================================================
   ТЕЛЕФОН
   ========================================================== */

@media (max-width: 520px) {

    main > .hero.hero--single-banner {

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;
    }


    main > .hero.hero--single-banner
    > .hero__banner {

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        object-fit: contain !important;

        object-position:
            center center !important;
    }


    main > .hero.hero--single-banner
    > #kdb-live-v18 {

        width: 100% !important;

        margin:
            9px auto 9px !important;

        transform: none !important;
    }

}


/* ==========================================================
   УЗКИЕ ТЕЛЕФОНЫ.

   Старый LIVE V18 имел отдельное правило до 390px,
   которое снова уменьшало его ширину.
   Здесь намеренно фиксируем единое выравнивание
   с остальными карточками.
   ========================================================== */

@media (max-width: 390px) {

    main > .hero.hero--single-banner
    > #kdb-live-v18 {

        width: 100% !important;
    }

}

/* Compact weather stays readable even when the phone LIVE bar is narrow. */
@media (max-width: 820px) {
    main > .hero.hero--single-banner > #kdb-live-v18 .kdb-live-v2__weather-copy {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    main > .hero.hero--single-banner > #kdb-live-v18 .kdb-live-v2__weather-copy small {
        display: block !important;
        white-space: nowrap !important;
    }

    main > .hero.hero--single-banner > #kdb-live-v18 .kdb-live-v2__weather-reading {
        display: flex !important;
        align-items: baseline !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    main > .hero.hero--single-banner > #kdb-live-v18 .kdb-live-v2__weather-temperature,
    main > .hero.hero--single-banner > #kdb-live-v18 .kdb-live-v2__weather-label {
        display: block !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
}