/* ============================================================
   adaptive.css — адаптивный слой для страниц NewsMe (index / news / fuel ...).
   Подключать ПОСЛЕ родного style.css страницы (чтобы переопределять).
   Стратегия: десктоп (≥981px) = оригинал 1:1 (никаких правил),
   адаптив только в медиазапросах ниже.
   ============================================================ */

/* Лупа - только для телефона: на десктопе поиск живёт в шапке строкой. */
.search_toggle { display: none; }

/* ===== ОБЩЕЕ для планшета и телефона (≤980px) ===== */
@media (max-width: 980px) {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { max-width: 100%; }
  body { margin: 0 !important; padding: 6px !important; border: 0 !important; overflow-x: hidden; }
  img, video, iframe, embed, object { max-width: 100% !important; height: auto !important; }

  /* контейнеры — резиновые на всю ширину окна */
  .pw, .iefixb, .pw2, .pw3 { width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding-left: 8px; padding-right: 8px; }
  .toplit { width: auto !important; max-width: 100% !important; height: auto !important; }

  /* Меню категорий: на узком экране пункты переносятся на новые строки.
     Родная лента считана под 960px - у .menu фиксированная высота 27px, ссылки float:left
     в одну строку. Снимаем высоту и float, иначе вторая строка вылезает из блока. */
  .menu { float: none !important; width: auto !important; height: auto !important; background: none !important; padding-left: 0 !important; }
  .menu_in { float: none !important; width: auto !important; display: block !important; background: none !important; padding-right: 0 !important; }
  .menu a, .menu a:visited { float: none !important; display: inline-block !important; vertical-align: top; margin-bottom: 1px; }

  /* Пункт из двух слов ("Другие виды") иначе рвётся посередине на переносе строки. */
  .menu a, .submenu a { white-space: nowrap; }


  /* широкие виджет-обёртки — в ширину своей колонки */
  .iefix, .iefix2, .iefix21, .iefix22, .iefix3, .scell570, .bcolAll { width: 100% !important; max-width: 100% !important; }
  .imgborderr, .iwidth, .iwidthb, .search_input { max-width: 100%; }
  .search_input { width: auto !important; max-width: 50vw; }
  table { max-width: 100% !important; }

  /* форма комментариев (страница статьи): textarea фикс. ширины → резиновая */
  textarea { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; }

  /* Лента знаков зодиака (гороскоп): таблица из 12 колонок не ужимается ниже
     ~560px, а колонка на планшете бывает и 370px — иконки со знаками вылезали
     за рамку блока. max-width:100% таблицу уже min-content не сжимает, поэтому
     даём прокрутку самой ленте, рамку блока это не рвёт. */
  .round_info .hl_tr { display: block; overflow-x: auto; }
  .round_info .hl_tr tbody { display: table; min-width: 100%; }
}

/* ===== ПЛАНШЕТ (701–980px): сохраняем ДВЕ колонки ===== */
@media (min-width: 701px) and (max-width: 980px) {
  /* правый сайдбар — РОДНАЯ фикс. ширина 320px: виджеты рендерятся как в оригинале */
  .bcolRight { width: 320px !important; }
  /* главная колонка занимает остаток */
  .bcolLeft, .bcolLeft2 { width: calc(100% - 340px) !important; }

  /* tplHoro, tplImena, tplSport, tplTaxi, tplWeather заворачивают левую колонку
     в обёртку .bcolWrap, а ширину мы задаём внутреннему .bcolLeft. Обёртка при этом
     остаётся float без ширины (shrink-to-fit) и забирает всю доступную ширину -
     правый сайдбар не влезает рядом и падает под левую колонку, оставляя пустоту
     справа сверху. Ширину задаём самой обёртке, внутренние - на 100%.
     Только .bcolWrap: в остальных шаблонах внутри #main есть ещё один голый .fl
     под phLeft2, ему ширину давать нельзя - иначе сайдбар уронит уже он. */
  #main > .fl.bcolWrap { width: calc(100% - 340px) !important; }
  #main > .fl.bcolWrap > .bcolLeft,
  #main > .fl.bcolWrap > .bcolLeft2 { width: 100% !important; }
  /* парные ячейки в главной колонке — две в ряд (родной 35px-отступ → %) */
  .bcolLeft .scell285, .bcolLeft .scell290 { width: 47% !important; margin-left: 0 !important; margin-right: 2% !important; }
}

/* ===== ТЕЛЕФОН (≤700px): одна колонка, аккуратный список ===== */
@media (max-width: 700px) {

  /* Техника скруглённых рамок использует отрицательные margin-left на РАЗНЫХ слоях.
     Обнуляем их ВСЕ (вкл. round_into/round_info) + убираем левый паддинг колонки —
     иначе слои рамки разъезжаются и появляется белая полоса слева / рвётся окантовка. */
  .round, .round2, .round3, .round4, .round5, .round6, .round_into, .round_info { margin-left: 0 !important; }
  .round6 { padding-left: 0 !important; }
  .bcolLeft, .bcolLeft2 { padding-left: 0 !important; }

  /* обёртка левой колонки (tplHoro, tplImena, tplSport, tplTaxi, tplWeather) - тоже в один столбец */
  #main > .fl.bcolWrap { float: none !important; width: 100% !important; clear: both !important; }

  /* всё в один столбец, каждая ячейка с новой строки (margin НЕ трогаем — иначе ломаются рамки) */
  .bcolLeft, .bcolLeft2, .bcolRight, .bcolAll, .al, .pw2, .pw3,
  .scell285, .scell290, .scell570,
  .iefix, .iefix2, .iefix21, .iefix22, .iefix3 {
    float: none !important;
    width: 100% !important;
    clear: both !important;
  }

  /* Шапка блока (:is(h1,h5).hfnill): слева рубрики, справа RSS и «новые | популярные».
     Флоаты на телефоне наезжали друг на друга и уходили за край. Раскладываем
     flex-строкой: рубрики переносятся внутри себя, переключатель прижат вправо
     и стоит на одной высоте с названием блока. */
  :is(h1,h5).hfnill {
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: 6px; row-gap: 2px;
    padding-left: 6px !important; padding-right: 6px;
  }
  :is(h1,h5).hfnill > .fl, :is(h1,h5).hfnill > .fr { float: none !important; }
  :is(h1,h5).hfnill > .fl { flex: 1 1 auto; min-width: 0; }
  :is(h1,h5).hfnill > .fr { flex: none; }

  /* переключатель у правого края строки */
  :is(h1,h5).hfnill:has(> .fr) { justify-content: flex-end; }


  /* сама лупа: flex, иначе svg сидит на базовой линии и уезжает вниз */
  .search_toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    margin-top: 0;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    background: #fff;
    color: #444;
  }
  .search_toggle svg { display: block; }
  .search_toggle:hover { border-color: #9db8d8; color: #1a5f80; }
  .search.search_open .search_toggle { border-color: #9db8d8; color: #1a5f80; }

  /* строка ввода прячется, по тапу выпадает панелью под шапкой */
  .search .search_box { display: none; }

  .search.search_open .search_box {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 1000;
    margin-top: 4px;
    padding: 6px;
    background: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
  }


  /* родная кнопка - картинка submit.gif 65x22, рядом с полем в 30px она мелкая */
  .search .search_box .submit {
    flex: 0 0 auto;
    align-self: center;
    vertical-align: middle;
    width: auto;
    height: 32px;
    padding: 0 14px;
    border: 1px solid #b9b9b9;
    border-radius: 3px;
    background: #ececec;
    color: #333;
    font-weight: 700;
  }
  .search .search_box .submit:hover { border-color: #9db8d8; color: #1a5f80; background: #f2f7fb; }

  /* поле рисуем сами: родное - это фоновая картинка фиксированных 249px */
  .search_input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    max-width: none !important;
    margin: 0 !important;
    height: 32px;
    padding: 0 8px !important;
    border: 1px solid #c9c9c9 !important;
    border-radius: 3px;
    background: #fff !important;
    color: #333 !important;
    font-size: 14px;
  }

  /* лид-фото (240×180) — крупное, на всю ширину, сверху */
  .bcolLeft img[width="240"] {
    float: none !important; display: block !important;
    width: 100% !important; height: auto !important; margin: 0 0 10px 0 !important;
  }

  /* тумбнейлы новостей — компактные слева */
  .bcolLeft .imgborder, .bcolRight .imgborder {
    float: left !important; margin: 2px 10px 4px 0 !important; max-height: none !important;
  }

  /* дата/источник — под заголовком слева */
  .bcolLeft .small.gray.fr, .bcolRight .small.gray.fr,
  .bcolLeft span.fr, .bcolRight span.fr {
    float: none !important; display: inline-block !important;
  }

  /* текстовые виджеты-списки (напр. «Толкование снов») — голые div.fl-ячейки на всю ширину */
  .bcolRight .iefix3 div.fl, .bcolRight .iefix2 div.fl {
    float: none !important; width: 100% !important; margin-right: 0 !important;
  }

  /* Рекламный блок из правого сайдбара — поднять сразу под меню (порядок: реклама → статья → остальное).
     #main делаем flex-колонкой; сайдбар «распластываем» (display:contents), чтобы его прямые
     дети стали flex-элементами #main; самому блоку рекламы даём отрицательный order. Разметку не трогаем. */
/*  #main { display: flex !important; flex-direction: column !important; }
  #main .bcolRight { display: contents !important; }
  #main .bcolRight > noindex:has(script[src*="googlesyndication.com"]) { order: -1 !important; }*/
}

/* ===== Узкие телефоны (≤420px) ===== */
@media (max-width: 420px) {
  .pw, .iefixb, .bcolAll { padding-left: 4px; padding-right: 4px; }
}

/* ===== Шапка разделов на телефоне ===== */
/* Логотип, поиск раздела и знаки зодиака идут колонкой во всю ширину:
   на десктопе они стоят в строку, а тут строка не помещается. */
@media (max-width: 700px) {
}

/* Логотип раздела: "memax" + "(НАРОДНАЯ МУДРОСТЬ)" не влезали в 420px и распирали
   страницу - на телефоне название переносится под логотип и уменьшается. */
@media (max-width: 700px) {
}

/* Меню разделов (Гороскоп / Сонник / Тайна имени / Народная мудрость):
   четыре пункта в строку шире телефона - разрешаем перенос и снимаем фон-ленту. */
@media (max-width: 700px) {
  .toplit .menu, .toplit .menu_in { max-width: 100%; float: none !important; }
  .toplit .menu a { white-space: normal; }
  .submenu { max-width: 100%; }
  .submenu .fl { float: none !important; }
}

/* На телефоне ячейка шапки перестаёт быть flex-строкой: логотип, поиск и знаки
   идут потоком сверху вниз, иначе ячейка не сжимается ниже своего содержимого. */
@media (max-width: 700px) {
}

/* Лента знаков зодиака: на телефоне 12 крупных иконок не помещаются даже
   с прокруткой - уменьшаем их, чтобы ряд влезал целиком. */
@media (max-width: 700px) {
  .round_info .hl_tr img { max-width: 27px; height: auto; }
  .round_info .hl_tr td { padding: 2px 1px !important; }
  .round_info .hl_tr a { font-size: 10px; }
}

/* ===== Шапка новостного сайта на телефоне: логотип и лупа одной строкой ===== */

/* ===== Разделы на телефоне: бургер вместо ленты ===== */
/* Лента занимала две строки и съедала экран до первой новости. Теперь в шапке
   стоит бургер, а список разделов выпадает панелью поверх страницы.
   Пункты в панель складывает скрипт ucNavToggle - это те же ссылки ленты. */
@media (max-width: 700px) {
  .toplit_news, .toplit_max {
    width: auto !important; max-width: 100% !important;
    padding: 0 !important; position: relative !important;
    background: #fff; border-top: 0;
  }

  .toplit_news, .toplit_max { display: none; }

  /* кнопка превращается в бургер: подпись на узком экране не нужна */
  .nav_all, .nav_all:visited {
    float: none !important;
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 38px; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important;
    background: none !important;
  }
  .nav_all_text { display: none; }
  .nav_all_icon, .nav_all_icon:before, .nav_all_icon:after {
    width: 18px; height: 2px; margin: 0; border-radius: 2px; background: #59616b !important;
  }
  .nav_all_icon:before { top: -6px; }
  .nav_all_icon:after { top: 6px; }

  /* открытая панель: крестик вместо бургера, список строками во всю ширину */
  .nav_open .nav_all_icon { background: transparent !important; }
  .nav_open .nav_all_icon:before { top: 0; transform: rotate(45deg); }
  .nav_open .nav_all_icon:after { top: 0; transform: rotate(-45deg); }

  .nav_panel { padding: 0; max-height: 72vh; overflow-y: auto; }
  .nav_panel .nav_panel_item, .nav_panel .nav_panel_item:visited {
    display: block; margin: 0; padding: 12px 14px;
    border: 0; border-bottom: 1px solid #eef1f4; border-radius: 0;
    color: #2f3a44; font-size: 15px; font-weight: 700;
  }
  .nav_panel .nav_panel_item:hover { background: #f2f7fb; }
}

/* ===== Каталог разделов на телефоне: аккордеон ===== */
/* Колонки схлопываются в один столбец, подпункты открывает стрелка рядом
   с названием - сам заголовок остаётся ссылкой на раздел. */
@media (max-width: 700px) {
  /* nav_cat_2 и nav_cat_3 ставит скрипт по числу разделов - на телефоне они не в счёт */
  .nav_cat, .nav_cat.nav_cat_2, .nav_cat.nav_cat_3 { column-count: 1; }

  .nav_cat_group {
    position: relative;
    margin: 0;
    border-bottom: 1px solid #eef1f4;
  }

  .nav_cat_title, .nav_cat_title:visited {
    margin: 0; padding: 13px 50px 13px 14px;
    color: #2f3a44; font-size: 15px; text-transform: none; letter-spacing: 0;
  }
  .nav_cat_on .nav_cat_title { padding-left: 14px; color: #16537a; box-shadow: inset 3px 0 0 #4a90d9; }

  /* стрелка - отдельная кнопка справа, чтобы тап по названию вёл в раздел */
  .nav_cat_chev {
    display: block; position: absolute; right: 0; top: 0;
    width: 46px; height: 46px; cursor: pointer;
  }
  .nav_cat_chev:before {
    content: ""; position: absolute; left: 17px; top: 18px;
    width: 8px; height: 8px;
    border-right: 2px solid #9aa3ad; border-bottom: 2px solid #9aa3ad;
    transform: rotate(45deg);
  }
  .nav_cat_open .nav_cat_chev:before { top: 21px; transform: rotate(-135deg); border-color: #4a90d9; }

  .nav_cat_list { display: none; padding-bottom: 6px; }
  .nav_cat_open .nav_cat_list { display: block; }
  .nav_cat_list li { padding: 0; }
  .nav_cat_list a, .nav_cat_list a:visited {
    display: block; padding: 10px 14px 10px 26px;
    border-top: 1px solid #f3f5f8; color: #5b6470; font-size: 14px;
  }

  /* проекты MeMax под списком разделов: плашки в несколько рядов */
  .nav_projects { margin: 0; padding: 12px 14px; border-top: 1px solid #eef1f4; background: #fafbfc; }
}

/* ===== Новая шапка на телефоне ===== */
/* Логотип и лупа одной строкой; дата, языки и rss на узком экране только мешают. */
@media (max-width: 700px) {
  .nmHead {
    position: relative;
    padding: 8px 10px; gap: 8px;
    border-left: 0; border-right: 0; border-radius: 0;
  }
  .nmHeadDate, .nmHeadLang, .nmHead .nmRss, .nmHeadTag span, .toplit_news .nmStripDate { display: none; }
  .nmHeadLogo img { max-width: 150px; height: auto; }

  .nmHead .search_toggle ~ .search_box { display: none; }
  .nmHead .search.search_open .search_toggle ~ .search_box {
    display: flex;
    position: absolute; left: 0; right: 0; top: 100%;
    z-index: 1000;
    margin-top: 4px; padding: 6px;
    background: #fff; border: 1px solid #c9c9c9; border-radius: 3px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
  }
  .nmHead .search_input { flex: 1 1 auto; min-width: 0; width: auto !important; }
  .nmHead .submit { flex: 0 0 auto; }

  .nmHead .search_toggle {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid #dfe3e8; border-radius: 6px;
    background: #fff; color: #59616b;
  }
  .nmHead .search_toggle:hover,
  .nmHead .search.search_open .search_toggle { border-color: #9db8d8; color: #1a5f80; }
}

/* Инструменты раздела (поиск сна, имена, города, знаки зодиака) - строкой
   под логотипом: рядом с ним они сжимались до нечитаемого. */
@media (max-width: 700px) {
  .nmHead { flex-wrap: wrap; }
  .nmHeadBrand { flex: 1 1 auto; }
  /* переносим вниз только настоящие инструменты раздела: лупа и rss остаются
     справа от логотипа, как в макете */
  .nmHeadTools:has(.nmHeadSearch),
  .nmHeadTools:has(.nmHeadSigns),
  .nmHeadTools:has(.nmHeadCount) { flex: 1 1 100%; justify-content: flex-start; gap: 8px; }
  .nmHead .nmHeadCount { display: block; margin-bottom: 4px; }
  .nmHead .search { flex: 1 1 auto; min-width: 0; }
  .nmHead .search_box { width: 100%; }
}

/* Знаки зодиака и поиск раздела на телефоне: одна строка с прокруткой,
   поле ввода во всю ширину. */
@media (max-width: 700px) {
  .nmHeadSearch { flex: 1 1 100%; text-align: left; }
  .nmHeadSearchBox, .nmHeadSearch .nmSonSearchBox { width: 100%; margin-left: 0; }

  .nmHeadSigns {
    flex: 1 1 100%; max-width: none;
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .nmHeadSigns a { flex: none; }
  .nmHeadSignsLabel { display: none; }
}

/* Бургер стоит слева от логотипа, панель разделов выпадает из шапки.
   Кнопку туда переносит скрипт: в ленте на телефоне её не видно. */
@media (max-width: 700px) {
  .nmHead > .nav_all {
    float: none; order: -1;
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-right: 4px; padding: 0;
    border: 1px solid #dfe3e8; border-radius: 6px; background: #fff;
  }
  .nmHead > .nav_all .nav_all_icon,
  .nmHead > .nav_all .nav_all_icon:before,
  .nmHead > .nav_all .nav_all_icon:after { width: 18px; margin: 0; background: #59616b; }
  .nmHead > .nav_all .nav_all_text { display: none; }

  .nmHead > .nav_panel { top: 100%; }
  .nmHead.nav_open > .nav_panel { display: block; }
}

/* Шапка на телефоне: бургер, логотип и лупа по одной линии.
   Правила без дочернего селектора: кнопку в шапку переносит скрипт, и до
   его срабатывания она лежит в ленте. */
@media (max-width: 700px) {
  .nmHead { align-items: center; }
  .nmHead .nmHeadBrand { align-items: center; }
  .nmHead .nmHeadLogo { display: flex; align-items: center; }
  .nmHead .nmHeadLogo img { display: block; }

  .nmHead .nav_all {
    float: none !important;
    display: flex !important; align-items: center; justify-content: center;
    align-self: center;
    width: 38px !important; height: 38px !important;
    margin: 0 0 0 6px !important; padding: 0 !important;
    border: 1px solid #dfe3e8 !important; border-left: 1px solid #dfe3e8 !important;
    border-radius: 6px !important; background: #fff !important;
  }
  .nmHead .nav_all:hover { border-color: #9db8d8 !important; }
  .nmHead .nav_all_text { display: none; }
  .nmHead .nav_all_icon,
  .nmHead .nav_all_icon:before,
  .nmHead .nav_all_icon:after { width: 18px; margin: 0; background: #59616b; }

  /* поля по бокам: шапка, лента и подменю не должны липнуть к краю экрана */
  .bg_header .pw, .subnav .pw { padding-left: 8px; padding-right: 8px; }
  .nmHead, .subnav .submenu_bord > .pw { max-width: 100%; }
  .nmHead .nmHeadTools { flex-wrap: wrap; }
}

/* Блоки не должны выходить за экран: слои скруглённой рамки считаны под 960px,
   и на телефоне их правый край уезжал за границу окна. */
@media (max-width: 700px) {
  .round, .round2, .round3, .round4, .round5, .round6,
  .round_into, .round_info, .round_info table { max-width: 100%; }
}

/* Широкие таблицы внутри блоков (прогноз погоды, курсы) прокручиваются,
   а не распирают страницу. */
@media (max-width: 700px) {
  .round_info > table,
  .round_info > div > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* display:block отнимает у таблицы width:100% - строки курсов тянем на всю ширину блока,
     а календарь всегда помещается, прокрутка ему не нужна. */
  table.c_t_cell > tbody { display: table; min-width: 100%; }
  .round_info > table.nmArchCal { display: table; }
  .c_t_cell td, .c_t_cell th { padding: 7px 6px; }
}

/* Прилипшая шапка на телефоне: занимает всю ширину окна, поэтому свои поля
   ей задавать не нужно - их даёт .pw, из которого она выехала. */
@media (max-width: 700px) {
  .nmHead.nav_fixed { top: 0; z-index: 1002; box-shadow: 0 3px 10px rgba(30, 60, 100, .14); }
  .subnav.nav_fixed { z-index: 999; }

  /* Скрипт закрепления (ucNavToggle) ставит прилипшим блокам left и width колонки сайта - на ПК
     это нужно, а на телефоне по бокам оставались полосы, в которых проезжал текст страницы.
     Здесь - на всю ширину экрана, без боковых рамок и скруглений. */
  .nmHead.nav_fixed,
  .subnav.nav_fixed { left: 0 !important; right: 0; width: auto !important; border-radius: 0; border-left: 0; border-right: 0; }
  .subnav.nav_fixed .submenu_bord { border-radius: 0; }

  /* Закреплённое подменю - одной строкой с прокруткой: в три строки оно закрывало треть экрана. */
  .subnav.nav_fixed .submenu > .fl {
    float: none; white-space: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .subnav.nav_fixed .submenu > .fl::-webkit-scrollbar { display: none; }

  /* Результаты поиска на телефоне - по ширине экрана, а не 616px колонки ПК. */
  .fl:has(> .nmSearchResults) { float: none; width: auto; }
  .nmSearchResults { width: auto; }
}

/* Бургер стоит последним в правой группе; логотип newsme приподнят -
   у его букв нет нижних выносных элементов, и он казался просевшим. */
@media (max-width: 700px) {
  /* порядок в шапке: логотип, поиск, бургер.
     Инструменты раздела (поиск сна, знаки, счётчик) уезжают строкой ниже,
     бургер при этом остаётся справа в первой строке. */
  /* логотип начинает с нулевой ширины и берёт только остаток после лупы и бургера:
     с flex-basis auto он мерился по логотипу и подписи раздела в одну строку (до 304px
     из 332 на экране 360px), и бургер уезжал второй строкой под лупу. */
  .nmHeadBrand { order: 0; flex: 1 1 0; min-width: 0; }
  .nmHead .nmHeadLogo { min-width: 0; }
  .nmHead .nmHeadLogo img { max-width: 100%; height: auto; }
  .nmHead .nmHeadTools { order: 2; margin-left: auto; }
  .nmHead .nav_all { order: 3; margin-left: auto !important; }
  .nmHeadTools:has(.nmHeadSearch),
  .nmHeadTools:has(.nmHeadSigns),
  .nmHeadTools:has(.nmHeadCount) { order: 4; margin-left: 0; }
  .nmHeadLogo img[alt="newsme"] { position: relative; top: -3px; }
}

/* Карточки лент на телефоне: список в одну колонку. */
@media (max-width: 700px) {
  /* лид на телефоне становится колонкой: рядом с картинкой заголовок
     рвётся на одно-два слова в строке. */
  .nmLead { flex-direction: column; align-items: stretch; gap: 8px; }
  .nmLeadImage { width: 100%; }
  .nmLeadImage img { width: 100%; height: auto; }

  /* картинка в карточке - flex-элемент, старый флоат и его поля лишние. */
  .nmLead .imgborder, .nmListItem .imgborder { float: none !important; margin: 0 !important; }
  .round_info a.nmLeadTitle, .round_info a.nmLeadTitle:visited { font-size: 16px; line-height: 1.3; }
  .nmList_two .nmListItem { flex: 0 0 100%; }
  .nmList_two .nmListItem:nth-child(2) { padding-top: 12px; border-top: 1px solid #eef2f6; }
  .nmList .nmListItem:first-child { padding-top: 0; border-top: 0; }
  /* главный блок: полоса складывается в колонку - заголовок, фото, анонс, потом столбик. */
  .nmMainBody { grid-template-columns: 1fr; gap: 12px; }
  .round_info h2.nmMainTitle { font-size: 20px; }
  .bcolLeft .nmMainImage img[width="240"], .nmMainImage img { width: auto !important; max-width: 100% !important; margin: 0 auto !important; }
  .nmMainSide { padding-left: 0; border-left: 0; padding-top: 10px; border-top: 1px solid #e4ebf2; }
  /* страница новости: фото над текстом по центру, врезка во всю ширину, всплывашка слева */
  h1.nmArticleTitle { font-size: 22px; }
  .nmArticleText { font-size: 15px; }
  .nmArticlePhoto { float: none; width: auto; max-width: 240px; margin: 0 auto 12px; }
  .nmAlso, .adtext { float: none; width: auto; margin: 12px 0; }
  .nmShare { right: auto; left: 0; }
  .nmShare:before { right: auto; left: 26px; }

  /* лента времени: ось ближе к краю */
  .nmTlGroup { padding-left: 56px; }
  .nmTlGroup:before { left: 46px; }
  .nmTlTime { left: -56px; width: 34px; }
  /* страница рубрики: карточка ложится строкой - фото слева не шире 40% и не шире 240, текст справа */
  .nmDuo { grid-template-columns: 1fr; gap: 12px; }
  .nmDuoCard { display: flex; gap: 12px; align-items: flex-start; }
  .nmDuoImage { flex: none; width: 40%; max-width: 240px; }
  .nmDuoImage img { max-width: 100%; }
  .nmDuoBody { flex: 1 1 auto; }
  .round_info h3.nmDuoHead { margin-top: 0; font-size: 16px; }
  /* блок рубрик: две карточки в ряд, третья - строкой с фото слева, без анонса */
  .nmCards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .nmCard:nth-child(3) { grid-column: 1 / -1; display: flex; gap: 12px; }
  .nmCard:nth-child(3) .nmCardPic { flex: none; width: 120px; }
  .nmCard:nth-child(3) .nmCardHead { margin-top: 0; }
  .nmCard:nth-child(3) .nmCardText { display: none; }
  .nmRow { flex-direction: column; gap: 2px; }
  .nmRowDate { width: auto; padding-top: 0; }
  /* сетка 3x2: две в ряд */
  .nmGrid { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  .nmChips { gap: 6px; }
  .nmFilter { padding: 10px; }
  .nmFilter select { flex: 1 1 140px; min-width: 0; }
}

/* Плитка внизу страницы: три в ряд, на узком телефоне две. */
@media (max-width: 980px) {
  .nmTiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
}
@media (max-width: 420px) {
  .nmTiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .nmPhotoGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
  .round_info .nmPhotoTile_big h3.nmPhotoTileHead { font-size: 15px; }
  .nmGalleryLead { font-size: 14px; }
  .nmGalleryCaption { flex-direction: column; gap: 2px; }
  .nmGalleryNav { width: 34px; height: 48px; line-height: 46px; margin-top: -24px; font-size: 26px; }
  .nmGalleryPrev { left: 6px; }
  .nmGalleryNext { right: 6px; }
}
@media (max-width: 700px) {
  .nmVideoLead { gap: 12px; }
  .nmVideoLead .nmVideoPic { width: 40%; max-width: 300px; }
  .round_info h2.nmVideoLeadHead { font-size: 17px; }
  .nmVideoAlsoGrid { grid-template-columns: 1fr 1fr; }
  .nmVideoAlsoItem:nth-child(3) { display: none; }
}
@media (max-width: 420px) {
  .nmVideoLead { display: block; }
  .nmVideoLead .nmVideoPic { width: auto; max-width: 100%; margin-bottom: 8px; }
  .nmVideoRow .nmVideoPic { width: 40%; max-width: 240px; }
  .nmVideoRow p.nmVideoText { display: none; }
}

/* пейджер: на телефоне только ±2 страницы от текущей (дальние помечены .navigation_far), кружки ближе */
@media (max-width: 700px) {
  .navigation a.navigation_far { display: none; }
  .navigation .navigation_prev, .navigation .navigation_next { margin: 0 4px; }
}

/* «Это комментируют»: шапка с подписью и периодом переносится, таблетки уходят под подпись */
@media (max-width: 700px) {
  .round_into :is(h1,h5).hfnill.nmSideHead { flex-wrap: wrap; row-gap: 6px; }
  .nmSideTabsLabel { display: none; }
}

/* «Многие пишут»: лид - картинка слева не шире своих 240px, справа заголовок и мета; анонс и лента источников на всю ширину */
@media (max-width: 700px) {
  .nmSimLead { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; gap: 0 12px; }
  .nmSimLeadImage { grid-column: 1; grid-row: 1 / 3; }
  .nmSimLeadBody { display: contents; }
  .round_info h3.nmSimLeadHead { grid-column: 2; grid-row: 1; font-size: 16px; }
  .nmSimLead .nmMeta { grid-column: 2; grid-row: 2; align-self: start; }
  .nmSimLeadText { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
  .nmSimLine { grid-column: 1 / -1; grid-row: 4; }
  .nmSimRow { gap: 10px; }
  .nmSimNum { width: 48px; }
}

/* комментарии: форма ответа без отступа, поле имени на всю ширину; низ формы - вместо сетки строки:
   картинка + ответ, под ними Turnstile + кнопка (сетке с Turnstile в 300px тут тесно) */
@media (max-width: 700px) {
  .nmThreadForm_reply { margin-left: 0; }
  .nmThreadForm input.nmThreadName { width: 100%; }
  .nmThreadFormFoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .nmThreadForm textarea.nmThreadCode { width: auto !important; flex: 1 1 110px; }
  .nmThreadCaptcha .cf-turnstile { order: 1; }
  .nmThreadForm input.nmThreadSubmit { order: 2; margin-left: auto; }
  .nmThreadErrors { order: 3; flex-basis: 100%; }
}