/* =====================================================================
   mozgi.io — единая система дизайна для мобильных (≤900px).
   Основана на модуле 8px (Контур.Гайды: "Отступы и выравнивание", "Модуль").
   Разрешённые отступы: 8, 16, 24, 32, 48, 64. Минимум разных на экран.
   Один файл — подключается на всех трёх страницах ПОСЛЕ inline <style>.
   Правки — только здесь.
   ===================================================================== */

/* Модуль 8px как CSS-переменные (можно ссылаться из inline-стилей) */
:root {
  --m: 8px;         /* 1 модуль */
  --m2: 16px;       /* 2 модуля — до заголовка / внутри блока */
  --m4: 32px;       /* 4 модуля */
  --m6: 48px;       /* 6 модулей — высота тач-цели */
  --m8: 64px;       /* 8 модулей — между блоками */
}

@media (max-width: 900px) {

  /* ─── HEADER (topbar / brand-row) — 64px, sticky top, полупрозрачный blur ─── */
  .topbar,
  .brand-row {
    min-height: var(--m8) !important;         /* 64 = 8m */
    height: auto !important;
    padding: var(--m) var(--m2) !important;   /* 8 × 16 */
    background: rgba(10,10,10,.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--m) !important;                 /* 8 */
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
  }
  /* Sidebar на /news/: brand-row закрепляем FIXED к вьюпорту (sticky внутри
     sidebar не работает — как только sidebar-контейнер сам уходит за экран,
     sticky-child уходит вместе с ним). Компенсируем `padding-top` у sidebar
     чтобы hero не подъехал под шапку. Фон приравниваем к --bg (иначе на
     мобилке остаётся --panel из десктопных стилей и /news/ выглядит светлее). */
  .sidebar {
    overflow: visible !important;
    padding-top: var(--m8) !important;
    background: var(--bg) !important;
  }
  .sidebar .brand-row {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    padding: var(--m) var(--m2) !important;   /* 8 × 16 — как у общего правила */
    z-index: 50 !important;
  }

  /* ─── БРЕНД ─── */
  .topbar .brand,
  .brand-row .brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--m2) !important;                /* 16 (было 10 — не по модулю) */
    font: 700 16px var(--font) !important;
    letter-spacing: -0.015em !important;
    color: var(--ink) !important;
    padding: 0 !important;
    text-decoration: none !important;
  }
  .brand-mark {
    width: 24px !important; height: 24px !important; flex: 0 0 24px !important;
    border-radius: 7px !important;
    background: var(--ink) !important;
    -webkit-mask: radial-gradient(circle at 30% 30%, transparent 4px, #000 5px) 0 0 / 6px 6px !important;
            mask: radial-gradient(circle at 30% 30%, transparent 4px, #000 5px) 0 0 / 6px 6px !important;
  }
  /* На мобиле убираем ".io" суффикс — оставляем короткое "mozgi" */
  .brand em { display: none !important; }

  /* Desktop-навигация в топбаре — скрыта */
  .top-links { display: none !important; }
  /* Кнопка «свернуть сайдбар» на мобилке не нужна */
  .toggle-icon[aria-label="Свернуть меню"],
  #sbToggle { display: none !important; }
  /* Селектор модели в /Prompt/ на мобилке — переносится JS-ом в .feed
     и стилизуется как .genre-btn (см. правила ниже). */
  .topbar .model-wrap,
  .brand-row .model-wrap { display: none !important; }
  /* Внутри .feed селектор моделей выглядит как большая кнопка «Жанры» */
  .feed .model-wrap { display: block !important; position: relative !important; }
  .feed .model-wrap #modelBtn {
    width: 100% !important;
    min-height: 48px !important;
    padding: 10px 16px !important;
    justify-content: space-between !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    background: var(--panel-2) !important;
    box-shadow: inset 0 0 0 .5px var(--hairline) !important;
    color: var(--ink) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .feed .model-wrap #modelBtn svg { width: 9px !important; height: 6px !important; }
  .feed .model-wrap #modelMenu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important; right: 0 !important;
    width: auto !important;
    max-height: 50vh !important;
    background: var(--panel-2) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.5), inset 0 0 0 1px var(--hairline) !important;
    padding: 6px !important;
    overflow: hidden auto !important;
    z-index: 40 !important;
  }

  /* ─── ИКОНКА ПОИСКА — 48×48 (6m), radius 8 (1m) ─── */
  .toggle-icon,
  #sbSearch,
  .mob-icon {
    width: var(--m6) !important;              /* 48 */
    height: var(--m6) !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: var(--m) !important;       /* 8 */
    background: transparent !important;
    box-shadow: none !important;
    color: var(--soft) !important;
    border: 0 !important;
  }
  .toggle-icon svg,
  #sbSearch svg,
  .mob-icon svg { width: 20px !important; height: 20px !important; }
  .toggle-icon:hover,
  #sbSearch:hover,
  .mob-icon:hover { background: var(--fill-3) !important; color: var(--ink) !important; }

  /* ─── CHIP BUTTONS — 40h (5m), radius 999 ─── */
  .chip-btn {
    min-height: 40px !important;              /* 5m — стандарт для pill-кнопок */
    padding: var(--m) var(--m2) !important;   /* 8 × 16 */
    border-radius: 999px !important;
    background: var(--panel-2) !important;
    box-shadow: inset 0 0 0 .5px var(--hairline) !important;
    color: var(--soft) !important;
    font: 500 13px var(--font) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--m) !important;                 /* 8 */
    border: 0 !important;
    cursor: pointer !important;
  }
  .chip-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    color: var(--soft) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }
  /* Для svg с fill="none" (globe) — вернём fill:none, чтобы был только stroke */
  .chip-btn svg[stroke]:not([stroke="none"]) { fill: none !important; }
  .chip-btn:hover { background: var(--panel-3) !important; color: var(--ink) !important; }
  .chip-btn:hover svg { color: var(--ink) !important; }
  .lang-icon-btn {
    min-width: var(--m6) !important;          /* 48 */
    padding: var(--m) !important;             /* 8 */
    justify-content: center !important;
  }
  .lang-icon-btn svg { width: 20px !important; height: 20px !important; }

  /* Правая группа кнопок */
  .mob-chips,
  .topbar-tools,
  .brand-tools {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--m) !important;                 /* 8 */
  }

  /* ─── HERO (первый блок) — 400px, без обводки ─── */
  .hero,
  .hero-card {
    height: 400px !important;                 /* 400 = 50m; фиксированная витрина */
    min-height: 0 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;              /* убираем hairline-обводку в /Prompt/ */
    border: 0 !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     СИСТЕМА ОТСТУПОВ МОБИЛЬНОЙ ВЕРСИИ (утверждена пользователем):
       ① Верх экрана → hero              : 20px
       ② Hero → заголовок блока          : 100px
       ③ Заголовок блока → первая карточка: 45px
       ④ Между карточками                : 30px
       ⑤ Внутри карточки: медиа → название: 10px
     ═══════════════════════════════════════════════════════════════ */

  /* ① Верх → hero */
  main { padding-top: 20px !important; }
  .hero-wrap { padding: 20px var(--m2) 0 !important; }
  .sidebar .hero { margin: 20px 0 100px !important; }

  /* ② Hero → заголовок блока = 100px */
  main > section:not(:first-child),
  main > .hero + section { margin-top: 100px !important; }
  .content {
    padding: 100px var(--m2) 48px !important;
    gap: 100px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* ③ Заголовок блока → первая карточка = 45px */
  .trending, .feed { display: flex !important; flex-direction: column !important; gap: 45px !important; }
  .side-group  { display: flex !important; flex-direction: column !important; gap: 45px !important; }
  .feed-head   { margin: 0 !important; }
  .section-head { margin: 0 0 45px !important; }

  /* ④ Между карточками = 30px */
  .grid { gap: 30px !important; }
  .news-grid { column-gap: 30px !important; }
  .news-grid > .news-card { margin-bottom: 30px !important; }

  /* ⑤ Внутри карточки: медиа → название = 10px */
  .card { gap: 10px !important; }

  /* /Prompt/: hero-медиа увеличено (scale 1.70),
     выровнено по правому краю контейнера. */
  .hero-video,
  .hero-media img,
  .hero-media video {
    transform: scale(1.70) !important;
    transform-origin: right center !important;
    object-position: right center !important;
  }

  /* /Prompt/: локальные корректировки поверх общей схемы (общий gap = 45).
       "Все промпты" → "Модели"     = 40px  (45 - 5)
       "Модели"      → "Жанры"       = 20px  (45 - 25)
       "Жанры"       → сетка карточек = 30px  (45 - 15, kind-chips-wrap скрыт)
       Между карточками промптов     = 10px
     Обнуляем margin-bottom секции внутри .feed — чтобы он не складывался с gap. */
  .feed > .section-head { margin: 0 !important; }
  .feed .kind-chips-wrap { display: none !important; }
  .feed > .model-wrap { margin-top: -5px !important; }
  .feed > .genre-wrap { margin-top: -25px !important; }
  .feed > .grid { margin-top: -15px !important; gap: 10px !important; }

  /* стрип избранного — без верхнего padding'a (ритм задаёт gap родителя) */
  .side-pin-list { padding: 0 0 6px !important; }

  /* /news/: hero перемещается в sidebar через JS; 16 сверху, 64 снизу */
  .sidebar .hero { margin: var(--m2) 0 var(--m8) !important; }

  /* ─── ТИПОГРАФИКА HERO (единая на всех страницах, эталон — /) ─── */
  .hero h1,
  .hero-card h1 {
    font: 800 32px/1.1 var(--font) !important;   /* 32 = 4m */
    letter-spacing: -0.02em !important;
    color: var(--ink) !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  .hero p,
  .hero-card .subhead {
    font: 400 16px/1.5 var(--font) !important;   /* 16 = 2m — минимум по ТЗ */
    color: var(--soft) !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  /* Заголовки hero — целиком белые (без оранжевого акцента em) */
  .hero h1 em,
  .hero-card h1 em { color: var(--ink) !important; font-style: normal !important; }

  /* ─── ТИПОГРАФИКА (утверждена пользователем) ─── */
  /* ① Hero заголовок : 32/800  — задано выше в .hero h1 */
  /* ② Hero подзаголовок : 16/400 — .hero p */

  /* ③ Заголовок блока = 24px/700 */
  .section-head h2,
  .trend-head h2,
  .feed-head h2,
  .side-title-static {
    font: 700 24px/1.2 var(--font) !important;
    letter-spacing: -0.015em !important;
    color: var(--ink) !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--m2) !important;
  }
  .side-title-static { justify-content: space-between !important; }

  /* ④ Название карточки на / = 18px/600 (медиа → название) */
  .card-title { font: 600 18px/1 var(--font) !important; }

  /* ⑤ Заголовок новости = 18px/700 */
  .nc-title { font: 700 18px/1.25 var(--font) !important; letter-spacing: -0.015em !important; }

  /* ⑥ Excerpt в карточке новости = 16px/400 */
  .nc-excerpt { font: 400 16px/1.45 var(--font) !important; }

  /* ⑦ Метки / теги / дата */
  .nc-tag  { font: 600 11px/1 var(--mono) !important; }
  .nc-date { font: 500 11px/1 var(--mono) !important; }

  /* ─── LANG MENU только (не трогаем tools/model dropdowns) ───
     Селектор через #langMenu — id-уровень, чтобы НЕ задеть #toolsMenu
     (у которого совпадает класс .lang-menu).
     На мобиле — на всю ширину экрана, единый вид на /, /Prompt/, /news/. */
  #langMenu {
    position: fixed !important;
    top: 72px !important;                     /* 64 хэдер + 8 воздух */
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(60vh, 520px) !important;
    background: var(--panel-2) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,.7), inset 0 0 0 1px var(--hairline) !important;
    padding: 8px !important;
    overflow: hidden auto !important;
    z-index: 60 !important;
    margin: 0 !important;
  }
  #langMenu ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
  /* Одинаковый вертикальный ритм: 12px по бокам, 10px сверху/снизу — расстояние
     между строками ≈ 4px внутренних + 20px «дыхания» строк. Как в /Prompt/. */
  #langMenu li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    margin: 2px 0 !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    font: 500 14.5px/1.5 var(--font) !important;
    color: var(--soft) !important;
    cursor: pointer !important;
    letter-spacing: -0.005em !important;
  }
  #langMenu li:hover { background: var(--fill-3) !important; color: var(--ink) !important; }
  #langMenu li.on { color: var(--ink) !important; font-weight: 600 !important; }
  /* Галочка справа у выбранного — единый маркер во всех трёх меню */
  #langMenu li.on::after {
    content: "";
    width: 14px; height: 14px; margin-left: auto;
    background-color: var(--ink);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>") center/contain no-repeat;
  }
  #langMenu li .lc {
    font: 600 10.5px var(--mono) !important;
    color: var(--dim) !important;
    width: 26px !important; flex: 0 0 26px !important;
    letter-spacing: .08em !important;
    text-align: left !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    background: var(--fill) !important;
  }
}