/* ============================================================
   MOBILE.CSS — правила ТОЛЬКО для мобильной версии.

   Файл подключён с media="(max-width: 900px)": на компьютере он
   не применяется вообще, поэтому что бы здесь ни было написано —
   компьютерную версию это не заденет.

   Подключается последним, после styles.css, styles-pro.css и
   встроенных стилей страницы, поэтому перебивает их без !important.

   ПРАВИЛО РАБОТЫ: любая правка, которая нужна только на телефоне,
   пишется сюда. В общие файлы больше не лезем.
   ============================================================ */

/* сюда — правки внешнего вида мобильной версии */

/* ── карточка «смотреть» в панели зоны ────────────────────────
   Заголовки роликов берутся с YouTube и бывают длинными. Карточка
   тянулась по тексту и на телефоне уезжала за край экрана (662px
   при ширине 390). Ограничиваем ширину и заставляем заголовок
   ужиматься многоточием.                                          */
.zone-preview {
  /* 100% не помогает: родитель сам растягивается по содержимому.
     Привязываемся к ширине экрана. */
  max-width: calc(100vw - 44px);
  box-sizing: border-box;
}
.zone-preview-meta { min-width: 0; flex: 1 1 auto; }
.zone-preview-meta h4 { min-width: 0; max-width: 100%; }