/* ==========================================================================
   18.09.2026 — адаптив шапки и узких экранов, new.utgard.tv
   1) Бургер включался только с ≤900px, а горизонтальное меню перестаёт
      влезать уже к ~1100px (там же html font-size переключается с 1.04vw
      на фиксированные 12px). В зазоре 901–1100 колонка переключателя языка
      вылезала за правый край (до +23px, горизонтальная прокрутка).
   2) На ≤900 переключатель языка скрывался целиком (.hide-1000) —
      на планшетах и телефонах сменить язык было нельзя.
   3) Мелочи узких экранов: .about .flex (страница «Статьи») и длинные
      ссылки в новостях давали горизонтальную прокрутку.
   Откат: убрать подключение этого файла из layouts/app.blade.php.
   ========================================================================== */

/* ---------- 1. Бургер-режим уже с 1100px (копия поведения ≤900 из media.css) ---------- */
@media screen and (min-width:901px) and (max-width:1100px){
    .header .menu-burger{position:relative;display:block;cursor:pointer}
    .header .menu-burger svg{fill:#dbdbdb;transition:.2s}
    .header_black .menu-burger svg{fill:rgb(58,64,70)}
    .header .menu-burger span{color:#dbdbdb;font-size:1.67em;line-height:1em;text-transform:uppercase;transition:.2s}
    .header_black .menu-burger span{color:#3a4046}
    .header .menu-burger:hover span{color:#ff5400}
    .header .menu-burger:hover svg{fill:#ff5400}
    .header .menu-wrap{position:fixed;display:none;background:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.4);
        padding:4rem;right:0;top:0;bottom:0;overflow:auto;z-index:20}
    .header .menu-wrap li{display:block}
    .header .menu-close{display:block;position:absolute;right:3rem;top:3rem;cursor:pointer;
        background:url("../img/mn_close.svg") no-repeat center/contain;height:3rem;width:3rem}
    .header .menu-wrap .header__menu{display:block;margin:0;align-items:stretch}
    .header .menu-wrap .header__menu li a{color:#262b2f;font-size:2em}
    .header .menu-wrap .header__menu li,
    .header .menu-wrap .header__menu li+li{margin:0 0 4rem}
    .header .menu-wrap .header__menu li:last-child,
    .header .menu-wrap .header__menu2 li:last-child{margin:0}
    .header .menu-wrap-inner{display:flex}
    .header .menu-wrap-part2{display:block;padding:0 5rem 0 4rem;margin-left:4rem;border-left:.1rem solid #111}
    .header .header__menu2-header{font-size:2em;text-transform:uppercase;color:#899199;font-weight:600;margin:0 0 4rem}
    .header .header__menu2 li{margin:0 0 3.1rem}
    .header .header__menu2 li a{font-size:1.67em;color:#3a4046;text-transform:uppercase;font-weight:600;transition:.2s}
    .header .header__menu2 li a:hover{color:#ff5400}
    /* кнопка IPTV в белой панели — как в мобильном бургере */
    .header .menu-wrap .header__menu .iptv-pill{background:linear-gradient(180deg,#4de3b4,#2ecc9a 55%,#1faa7d);
        border-color:transparent;height:auto;padding:.55em 1.1em;
        box-shadow:0 .2em .6em rgba(46,204,154,.35),inset 0 1px 0 rgba(255,255,255,.45)}
    .header .menu-wrap .header__menu .iptv-pill b{color:#06231a;font-size:.8em}
    .header .menu-wrap .header__menu .iptv-pill b:before{background:#06231a;width:.35em;height:.35em;
        box-shadow:0 0 0 .2em rgba(6,35,26,.12);margin-right:.45em}
    .header .menu-wrap .header__menu .iptv-pill span{display:inline-block;color:#0a3327;font-size:.7em;font-weight:700}
    .header .menu-wrap .header__menu-featured{display:block !important}
}

/* ---------- 2. Раскладка шапки в бургер-режиме: логотип … язык, бургер ---------- */
@media screen and (max-width:1100px){
    .header > .flex.flex-v-end{align-items:center;flex-wrap:nowrap}
    .header > .flex.flex-v-end > .col0:first-child{order:1;margin-right:auto;flex:0 1 auto;min-width:0}
    .header > .flex.flex-v-end > .col0.lang-col{order:2;display:block;flex:0 0 auto;padding-bottom:0}
    .header > .flex.flex-v-end > .col0.flex-full{order:3;flex:0 0 auto;display:flex;justify-content:flex-end;padding-bottom:0}
    /* «Войти/Регистрация» остаются только внутри панели бургера */
    .header > .flex.flex-v-end > .col0.hide-1000:not(.lang-col){display:none}
    .header .header__logo{width:11.4rem;min-width:0}
}

/* ---------- 3. Компактный переключатель языка на узких экранах ---------- */
@media screen and (max-width:600px){
    .header .lang-switcher{gap:2px;padding:2px}
    .header .lang-switcher__item{padding:4px 6px;gap:0;font-size:0}
    .header .lang-switcher__item span{display:none}
    .header .lang-switcher__flag{width:22px;height:15px}
    .header .menu-burger span{font-size:1.3em}
    .header .menu-burger svg{width:28px;height:16px}
}
@media screen and (max-width:420px){
    .header{padding-left:.75rem;padding-right:.75rem}
    .header .header__logo{width:9rem}
    .header .menu-burger span{display:none}
    .header .menu-burger svg{width:30px;height:18px}
}

/* ---------- 4. «Статьи»: .about .flex тянет -1.25rem против .container-big .75rem ---------- */
@media screen and (max-width:1030px){
    .about .container-big{padding-left:1.25rem;padding-right:1.25rem}
}

/* ---------- 5. Новости: длинные ссылки в тексте не должны распирать страницу ---------- */
.news-card__body,.news-card__body p,.news-card__body a{overflow-wrap:anywhere;word-break:break-word}

/* ---------- 6. Панель бургера: планшеты — компактнее, телефоны — в одну колонку ---------- */
@media screen and (min-width:601px) and (max-width:1100px){
    .header .menu-wrap{padding:5rem 3rem 3rem 3.5rem}
    .header .menu-wrap-part2{padding:0 0 0 2.5rem;margin-left:2.5rem;border-left:.1rem solid #e2e5e8}
    .header .menu-wrap .header__menu li,.header .menu-wrap .header__menu li+li{margin:0 0 2.6rem}
    .header .menu-wrap .header__menu li a{font-size:1.6em}
    .header .header__menu2-header{font-size:1.4em;margin:0 0 2.6rem}
    .header .header__menu2 li{margin:0 0 2.2rem}
    .header .header__menu2 li a{font-size:1.35em}
    .header .menu-close{right:1.4rem;top:1.4rem;height:2.2rem;width:2.2rem}
}
/* телефоны: двухколоночная панель не влезала — на 375/360/320 её левый край
   уходил за экран и пункты обрезались. Колонки в столбик, панель по ширине экрана.
   Заодно крестик закрытия был 1rem (12px) — мелковат для пальца. */
@media screen and (max-width:600px){
    .header .menu-wrap{left:0;right:0;width:auto;max-width:100%;padding:4.5rem 2rem 3rem;box-sizing:border-box}
    .header .menu-wrap-inner{display:block}
    .header .menu-wrap-part2{display:block;margin:3.4rem 0 0;padding:3rem 0 0;border-left:0;border-top:.1rem solid #e2e5e8}
    .header .menu-wrap .header__menu li,.header .menu-wrap .header__menu li+li{margin:0 0 3rem}
    .header .header__menu2-header{margin:0 0 2.4rem}
    .header .header__menu2 li{margin:0 0 2.4rem}
    .header .menu-close{right:1.2rem;top:1.2rem;height:2rem;width:2rem}
}