/* mobile.css — мобильная версия главной Магисмо.
   Десктопная вёрстка (фиксированные 1027px) не меняется: всё ниже
   срабатывает только на экранах уже 1027px. */

/* Панель с кнопками меню и входа видна только на мобильных */
.m-bar,
.m-overlay,
.m-drawer-close {
   display: none;
}

@media all and (max-width: 1026px)
{
   /* ---------- Каркас ---------- */
   html, body {
      height: auto;
   }

   body {
      min-width: 0;
      overflow-x: hidden;
   }

   #art-main {
      /* Центральная часть фона (рамка с замком, ~1008px из 1600) растягивается на ширину экрана */
      background-size: 158.73vw auto;
      background-position: center top;
      background-color: #120a05;
   }

   /* Панель навигации сверху экрана */
   .m-bar {
      display: flex;
      position: sticky;
      top: 0;
      z-index: 10000;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 10px;
      background-image: linear-gradient(#52381c, #291c0e);
      border-bottom: 1px solid #7c6b4f;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
      font-family: Magismo;
   }

   .m-bar__btn,
   .m-bar__btn:link,
   .m-bar__btn:visited {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 36px;
      padding: 0 12px;
      border: 1px solid rgba(224, 187, 118, 0.45);
      border-radius: 18px;
      background: rgba(0, 0, 0, 0.25);
      color: #EDCA8C;
      font-family: Magismo;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      text-decoration: none;
      text-shadow: 1px 1px 3px #111;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
   }

   .m-bar__btn:active {
      color: #FCEDC5;
      background: rgba(0, 0, 0, 0.45);
   }

   .m-bar__icon {
      font-size: 18px;
      line-height: 1;
   }

   /* ---------- Шапка с замком ---------- */
   .art-header {
      width: auto;
      height: calc(56vw + 44px);
      margin: 0;
      background-image: none;
   }

   .custom-responsive .art-header {
      background-image: none;
   }

   /* Соцсети опускаются под герб */
   .art-logo-663518551 {
      top: auto;
      bottom: 6px;
      left: 0;
      right: 0;
      width: auto;
      height: auto;
      margin: 0 !important;
      text-align: center;
   }

   .art-logo-663518551 a {
      display: inline-block;
      margin: 0 4px;
   }

   .art-logo-663518551 img {
      height: 30px;
   }

   /* Верхнее меню: табличка во всю ширину, пункты переносятся на вторую строку */
   .topnav {
      top: 4px;
      padding: 0 8px;
   }

   .topnav__plank {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 4px 18px;
      clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
   }

   /* При переносе ромбик оказался бы в начале строки */
   .topnav__plank li + li:before {
      display: none;
   }

   .topnav__plank a,
   .topnav__plank a:link,
   .topnav__plank a:visited {
      padding: 9px 8px 7px;
      font-size: 15px;
   }

   .topnav__seal a,
   .topnav__seal a:link,
   .topnav__seal a:visited {
      margin: 4px 0 4px 4px;
      padding: 7px 12px 5px;
   }

   /* ---------- Лист с контентом ---------- */
   .art-sheet {
      width: auto;
      margin: 0 6px;
      background: url('images/bg.jpg') scroll;
      border: 1px solid #5a3a28;
      box-shadow: 0 0 0 1px #120a05, 0 0 18px rgba(0, 0, 0, 0.8);
   }

   .art-layout-wrapper {
      margin: 0;
   }

   .art-content-layout,
   .art-content-layout-row,
   .art-layout-cell {
      display: block;
   }

   .art-content-layout {
      width: auto;
      margin-right: 0;
      table-layout: auto;
   }

   .art-layout-cell {
      width: auto !important;
      padding-right: 0;
      left: 0;
   }

   /* Порядок блоков: контент, вход и виджеты, затем лавки и курс валют,
      копирайт со счётчиками в самом конце. Сайдбары «растворяются»
      (display: contents), чтобы их виджеты можно было переставлять */
   .art-layout-wrapper > .art-content-layout > .art-content-layout-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
   }

   .art-layout-wrapper > .art-content-layout > .art-content-layout-row > .art-sidebar1,
   .art-layout-wrapper > .art-content-layout > .art-content-layout-row > .art-sidebar2 {
      display: contents;
   }

   .art-sidebar1 > .art-block,
   .art-sidebar2 > .art-block {
      width: 100%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
   }

   .art-content-layout .art-content {
      order: 1;
      width: 100% !important;
      padding: 12px 12px 16px;
      /* Средняя (контентная) полоса sheet.png, без разделителей колонок */
      background: #48281c url('images/sheet.png') repeat-y;
      background-size: 207.5% auto;
      background-position: 49.8% 0;
      border-bottom: 1px solid #5a3a28;
   }

   .art-sidebar2 > .art-block {
      order: 2;
   }

   .art-sidebar1 > .art-block {
      order: 3;
   }

   .art-sidebar2 > #categories-3 {
      order: 4;
   }

   /* ---------- Статья ---------- */
   .art-post {
      margin: 0;
      padding: 0;
   }

   .art-postheader {
      font-size: 24px;
      line-height: 1.2;
      text-align: center;
   }

   .art-postheader small {
      font-size: 17px;
   }

   .art-content h2 {
      font-size: 20px;
      line-height: 1.3;
   }

   .art-postcontent .art-layout-cell,
   .art-content .layout-item-0 {
      width: auto !important;
      padding: 0;
   }

   /* Учитываем отступ 7px, который style.css даёт картинкам в статье */
   .art-content img {
      max-width: calc(100% - 14px);
      object-fit: contain;
   }

   .art-content .round,
   .magismo-intro {
      width: auto !important;
      margin-right: 0 !important;
      overflow-wrap: break-word;
   }

   .art-content .round img,
   .art-content .round iframe,
   .art-content .round video {
      max-width: 100%;
      height: auto;
   }

   .art-content table {
      max-width: 100%;
   }

   /* Если что-то на странице шире экрана (таблицы, диаграммы с пиксельной
      вёрсткой), его можно прокрутить вбок, а не потерять за краем */
   .art-postcontent {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }

   /* Иконки у приказов и газеты стоят в строку, а не лесенкой */
   .art-content img[align="left"] {
      float: none;
      margin: 0 6px 4px 0;
      vertical-align: middle;
   }

   /* Распределения по факультетам: три колонки в ряд */
   .art-content .responsive-layout-row-2 {
      display: flex;
      flex-direction: row;
      gap: 4px;
   }

   .art-content .responsive-layout-row-2 > .art-layout-cell {
      flex: 1 1 0;
      min-width: 0;
      text-align: center;
      overflow-wrap: anywhere;
   }

   .art-content .responsive-layout-row-2 img {
      height: auto;
      width: calc(100% - 14px);
      max-width: 120px;
   }

   /* ---------- Виджеты сайдбаров ---------- */
   .art-block,
   .art-vmenublock {
      margin: 6px 4px;
   }

   .art-blockheader,
   .art-vmenublockheader {
      margin-left: auto;
      margin-right: auto;
   }

   /* В «Счётчиках» содержимое лежит внутри заголовка: даём ему вырасти */
   .art-blockheader {
      height: auto;
      min-height: 58px;
      background-repeat: no-repeat;
      background-position: center top;
   }

   .art-blockheader > .art-blockcontent {
      margin-top: 30px;
   }

   .art-blockcontent {
      margin-left: 0;
      overflow-wrap: break-word;
   }

   .art-blockcontent img {
      max-width: 100%;
   }

   .currency-exchange,
   .exchange-rate {
      max-width: none;
   }

   /* ---------- Выдвижное меню ---------- */
   #vmenuwidget-1 {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 10002;
      width: 300px;
      max-width: 86vw;
      margin: 0;
      padding: 8px 4px 24px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      background: #1a0f08 url('images/bg.jpg') scroll;
      border-right: 1px solid #7c6b4f;
      box-shadow: 4px 0 24px rgba(0, 0, 0, 0.8);
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      transform: translateX(-105%);
      transition: transform 0.25s ease, visibility 0s linear 0.25s;
      visibility: hidden;
   }

   html.m-menu-open #vmenuwidget-1 {
      transform: none;
      transition: transform 0.25s ease;
      visibility: visible;
   }

   .m-overlay {
      display: block;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10001;
      background: rgba(0, 0, 0, 0.6);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease, visibility 0s linear 0.25s;
   }

   html.m-menu-open .m-overlay {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.25s ease;
   }

   html.m-menu-open,
   html.m-menu-open body {
      overflow: hidden;
   }

   .m-drawer-close {
      display: block;
      position: absolute;
      top: 6px;
      right: 6px;
      z-index: 2;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 1px solid rgba(224, 187, 118, 0.45);
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.4);
      color: #EDCA8C;
      font-size: 22px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
   }

   /* Пункты меню крупнее, чтобы попадать пальцем */
   ul.art-vmenu>li>a,
   ul.art-vmenu>li>a.active,
   ul.art-vmenu>li>a:hover {
      padding: 0 10px;
      line-height: 40px;
      white-space: normal;
   }

   ul.art-vmenu ul a,
   ul.art-vmenu ul a:visited,
   ul.art-vmenu ul a:hover,
   ul.art-vmenu ul a.active {
      padding: 9px 12px 9px 27px;
      line-height: 20px;
      font-size: 14px;
      border-bottom: 1px dotted rgba(124, 107, 79, 0.35);
   }

   ul.art-vmenu br {
      display: none;
   }

   /* ---------- Кнопки вверх/вниз ---------- */
   /* body в селекторе: стили кнопок в sharyKOP.html подключаются позже */
   body .go-up,
   body .go-down {
      right: 10px;
      margin-left: 0;
      width: 44px;
      height: auto;
   }

   body .go-up {
      bottom: 90px;
   }

   body .go-down {
      bottom: 34px;
   }

   body .go-up img,
   body .go-down img {
      height: 30px;
   }

   /* ---------- Подвал ---------- */
   .art-footer {
      margin-top: 12px;
      right: 0;
      height: auto;
      min-height: 120px;
      background-size: cover;
   }

   .art-footer-inner {
      width: auto;
      padding: 16px 12px;
   }
}

/* Планшеты: виджеты сайдбаров в две колонки */
@media all and (min-width: 640px) and (max-width: 1026px)
{
   .art-sheet {
      margin: 0 16px;
   }

   .art-sidebar1 > .art-block,
   .art-sidebar2 > .art-block {
      width: calc(50% - 8px);
   }

   .art-content-layout .art-content {
      padding: 16px 24px 20px;
   }
}

/* Узкие телефоны */
@media all and (max-width: 380px)
{
   .m-bar__btn,
   .m-bar__btn:link,
   .m-bar__btn:visited {
      padding: 0 9px;
      font-size: 12px;
   }

   .art-postheader {
      font-size: 21px;
   }

   .topnav__plank {
      padding: 3px 12px;
   }

   .topnav__plank a,
   .topnav__plank a:link,
   .topnav__plank a:visited {
      padding: 8px 5px 6px;
      font-size: 13px;
   }

   .topnav__seal a,
   .topnav__seal a:link,
   .topnav__seal a:visited {
      padding: 6px 9px 4px;
   }
}

@media (prefers-reduced-motion: reduce)
{
   #vmenuwidget-1,
   .m-overlay {
      transition: none !important;
   }
}