/***********************************************************************
   МОБИЛЬНАЯ ВЕРСИЯ САЙТА (телефоны и маленькие планшеты)

   Включается скриптом в index.php: если короткая сторона экрана <= 800 px,
   в страницу добавляется <meta name="viewport"> и класс "m" у <html>.
   Все правила ниже - только для html.m, на компьютере ничего не меняется.

   Таблицы-контейнеры из container.php помечены data-box="h" (ряд колонок)
   или data-box="v" (столбец строк). На телефоне колонки ряда встают
   друг под другом.
***********************************************************************/

html.m body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.m, html.m body { overflow-x: hidden; }

/* то, что и раньше пряталось на телефоне (правила из стилей сайта действуют
   только в вертикальной ориентации - здесь то же самое и в горизонтальной) */
html.m .mobil, html.m .blocklinem, html.m .bibliom { display: none !important; }

/* ---------- раскладка: колонки друг под другом ----------
   все контейнеры становятся обычными блоками: таблица не растягивается
   под самое широкое содержимое, и страница остаётся шириной с экран */
html.m table[data-box],
html.m table[data-box] > tbody,
html.m table[data-box] > tbody > tr,
html.m table[data-box] > tbody > tr > td {
  display: block; width: auto !important; height: auto !important; box-sizing: border-box;
}
html.m table[data-box="h"] > tbody > tr > td { padding-left: 6px !important; padding-right: 6px !important; }
html.m table[data-box] > tbody > tr > td > br { display: none; }
/* открыта отдельная страница/файл (index.php ставит <body data-page>): ниже содержимого
   ничего не показываем - колонки рядом с основной ячейкой (data-main) скрыты */
html.m body[data-page] tr:has(> td[data-main]) > td:not([data-main]) { display: none !important; }
html.m table[data-box] > tbody > tr > td > table { margin-bottom: 12px; }

/* ---------- шапка ---------- */
html.m .grad font[style*="32pt"] { font-size: 25px !important; line-height: 1.15; }
html.m .grad font[style*="20pt"] { font-size: 18px !important; }
html.m .grad font[style*="14pt"] { font-size: 14px !important; }
html.m .grad font[style*="10pt"] { font-size: 13px !important; }
html.m .grad > tbody > tr > td { padding-top: 4px !important; padding-bottom: 4px !important; }

/* ---------- меню ----------
   На телефоне показывается то же меню, что на компьютере (.menustr / ul.menu).
   Чтобы вернуть сокращённое мобильное меню (.menustr_m / ul.menu_m),
   поменяйте местами "table" и "none" в двух строках ниже. */
html.m table.menustr   { display: table !important; }
html.m table.menustr_m { display: none !important; }
html.m td.menustr, html.m td.menustr_m { display: table-cell !important; }  /* правила сайта прячут и ячейки меню */

html.m table.menustr, html.m table.menustr_m, html.m table.menustr_m table {
  width: 100% !important; height: auto !important;
}
html.m ul.menu, html.m ul.menu_m { display: flex; flex-wrap: wrap; justify-content: center; padding: 2px 0; }
html.m .menu:after, html.m .menu_m:after { display: none; }
html.m .menu > li, html.m .menu_m > li { float: none; position: relative; }
html.m .menu a, html.m .menu_m a {
  display: block !important; float: none; height: auto;
  padding: 9px 8px; font: bold 15px/20px Arial, Helvetica, sans-serif;
}
@media (max-width: 360px) {
  html.m .menu > li > a, html.m .menu_m > li > a { padding: 9px 6px; font-size: 14px; }
}
html.m .menu ul, html.m .menu_m ul { top: 100%; left: 0; padding: 4px 0; min-width: 230px; max-width: 92vw; }
html.m .menu ul a, html.m .menu_m ul a {
  font-size: 15px; font-weight: normal; line-height: 20px; padding: 9px 14px; white-space: normal;
}
html.m .menu ul ul, html.m .menu_m ul ul {
  position: static; display: block; box-shadow: none; padding: 0 0 0 14px; min-width: 0; background: transparent;
}
/* подменю открываются касанием (mobile.js), а не "наведением" */
html.m .menu li:hover > ul, html.m .menu_m li:hover > ul { display: none; }
html.m .menu li.open > ul, html.m .menu_m li.open > ul,
html.m .menu ul ul, html.m .menu_m ul ul { display: block; }

/* ---------- блоки и новости: нормальные размеры шрифта вместо 20-22pt ---------- */
html.m .biblio, html.m .bibliom, html.m .linkstd,
html.m .litebox, html.m .greennews, html.m .bluenews, html.m .pasha { font-size: 15px; }
html.m .pasha td { font-size: 15px; }
html.m .biblio th, html.m .litebox th, html.m .greennews th, html.m .bluenews th, html.m .pasha th {
  font-size: 16px; line-height: 1.25; text-align: center;
}
html.m .linkstd { text-align: left; }
/* одиночная картинка в блоке (газета, расписание) - по центру */
html.m .biblio td > a > img:only-child { display: block; margin: 0 auto; }
/* выравнивание "по ширине" на узком экране даёт большие пробелы - по левому краю */
html.m [style*="justify"], html.m [align="justify"] { text-align: left !important; }
/* таблицы блоков и новостей - по ширине экрана; картинки внутри сжимаются */
html.m table.litebox, html.m table.pasha, html.m table.bluenews, html.m table.greennews,
html.m table.biblio, html.m table.bibliom { table-layout: fixed; width: 100% !important; }

/* ---------- картинки, видео, таблицы в тексте ---------- */
html.m img { max-width: 100%; }
html.m img[width] { height: auto; }
html.m img[hspace] { margin-left: 0; margin-right: 0; }
/* картинки с обтеканием - не шире 45%, чтобы текст рядом не превращался в узкую колонку;
   в новостях - по центру во всю ширину */
html.m img[align="left"], html.m img[align="right"] { max-width: 45%; }
html.m .litebox img[align], html.m .greennews img[align],
html.m .bluenews img[align], html.m .pasha img[align] {
  float: none; display: block; margin: 6px auto 10px !important; max-width: 100%;
}
html.m iframe, html.m video, html.m embed, html.m object { max-width: 100%; }
html.m iframe[src*="youtube"], html.m iframe[src*="rutube"], html.m iframe[src*="vk.com/video"] {
  width: 100% !important; height: auto !important; aspect-ratio: 16 / 9;
}
/* таблицы в тексте (часто вставлены из Word с ширинами в пикселях) */
html.m table:not([data-box])[width]:not([width$="%"]),
html.m table:not([data-box])[style*="width"] {
  width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; float: none;
}
html.m table:not([data-box]) { max-width: 100%; }
/* height="100%" у таблиц блоков: страница без DOCTYPE растягивает их на высоту экрана */
html.m table:not([data-box])[height] { height: auto !important; }
html.m table:not([data-box]) td[width]:not([width$="%"]),
html.m table:not([data-box]) td[style*="width"],
html.m table:not([data-box]) th[style*="width"] { width: auto !important; }
html.m td, html.m th { overflow-wrap: anywhere; word-wrap: break-word; }
html.m .m-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ---------- альбомы: сплошная сетка по 2 фото в ряд ---------- */
html.m table.lb-album { display: block; width: 100% !important; }
html.m table.lb-album > tbody { display: flex; flex-wrap: wrap; align-items: flex-start; }
html.m table.lb-album > tbody > tr { display: contents; }
html.m table.lb-album > tbody > tr > td {
  display: block; flex: 0 0 50%; width: 50% !important; box-sizing: border-box; padding: 4px 4px 10px;
}