/* Мобильная вёрстка.

   Все правила — внутри медиа-запросов, поэтому на компьютере сайт выглядит как
   раньше. Уже 960 точек три колонки не вмещают — складываем их в одну; до 600
   перестраиваем под телефон шапку, афишу и карточки новостей. */

@media (max-width: 960px) {
    /* Шапка: меню, логотип и название в ряд, справа — кнопка версии для
       слабовидящих. На компьютере всё это расставлено абсолютно и на узком
       экране налезало друг на друга. */
    #header {
        height: 72px;
    }

    .container.header {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 0 190px 0 10px;
        box-sizing: border-box;
    }

    #header .nav-menu-btn {
        position: static;
        flex: 0 0 36px;
        height: 36px;
        order: -1;              /* в разметке логотип идёт раньше, а меню должно быть первым */
    }

    #header .logo-img {
        position: static;
        display: block;
        height: 40px;
    }

    #logo {
        flex: 1;
        min-width: 0;
        justify-content: flex-start;
    }

    .logo-text {
        font-size: 12px;
        text-align: left;
    }

    /* Эту кнопку ставит сторонний скрипт — закреплённой поверх страницы.
       Уменьшаем её, прижимаем к правому краю шапки и даём уехать вместе
       с шапкой при прокрутке, чтобы она не закрывала текст. */
    #specialversion2 {
        position: absolute !important;
        top: 24px !important;
        right: 10px !important;
        scale: 0.5;
        transform-origin: top right;
    }

    #page {
        width: 100%;
        flex-direction: column;
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* Сначала то, ради чего пришли, потом расписание и контакты, баннеры — в конце */
    #content {
        order: 1;
        max-width: none;
    }

    #sidebar {
        order: 2;
        width: 100%;
        margin-top: 24px;
    }

    .left-sidebar {
        order: 3;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin: 12px 0 20px;
    }

    .left-sidebar .poster {
        width: calc(50% - 5px);
        max-width: 240px;
    }

    #headermap,
    .afisha {
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* Картинки и видео из новостей не вылезают за экран. У части старых
       новостей размер картинки прописан прямо в style — отсюда !important */
    #content img:not(.left) {
        max-width: 100%;
        height: auto !important;
    }

    .post iframe,
    .gol-page iframe {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    #content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    #content iframe {
        max-width: 100%;
    }

    /* У figure по умолчанию отступы по 40 точек с боков — на телефоне это треть экрана */
    #content figure {
        margin-left: 0;
        margin-right: 0;
    }

    /* Видео из ВК и с других площадок — во всю ширину, с пропорциями кадра */
    #content iframe[src*="vk.com"],
    #content iframe[src*="vkvideo"],
    #content iframe[src*="youtube"],
    #content iframe[src*="rutube"] {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    #content ul {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* У абзацев на странице чтений отступ первой строки: картинка внутри
       такого абзаца съезжала вправо и вылезала за край экрана */
    .gol-page img {
        display: block;
    }

    /* Там же пары картинок стоят в ряд — на узком экране пусть встают одна под другой */
    .gol-page p[style*="flex"] {
        flex-wrap: wrap;
        gap: 12px !important;
        text-indent: 0;
    }

    /* На странице услуг есть правило ul { width: 100% } на всю страницу —
       со своими отступами списки в колонке становились шире экрана */
    #sidebar ul {
        box-sizing: border-box;
    }

    .twocols .col1,
    .twocols .col2 {
        float: none;
        width: auto;
    }
}

/* Уже 700 точек трёхстрочному названию места нет — остаются логотип и кнопка */
@media (max-width: 700px) {
    #logo {
        display: none;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 15px;
    }

    #header {
        height: 64px;
    }

    .container.header {
        padding-left: 8px;
    }

    #header .logo-img {
        height: 34px;
    }

    #specialversion2 {
        top: 21px !important;
        right: 8px !important;
        scale: 0.45;
    }

    .nav-menu {
        max-width: 85%;
        font-size: 18px;
    }

    .nav-menu > div {
        height: 48px;
    }

    /* Афиша: одна карточка на экран, картинка над текстом */
    .afisha {
        gap: 6px;
        margin-top: 12px;
    }

    .afisha__viewport {
        width: calc(100% - 76px);
    }

    .afisha__slide {
        flex-basis: 100%;
        min-width: 100%;
    }

    .afisha-card {
        flex-direction: column-reverse;
        text-align: center;
        gap: 10px;
        padding: 14px;
        min-height: 0;
    }

    .afisha-card__image img {
        max-height: 64px;
    }

    .afisha__nav {
        width: 32px;
        height: 32px;
        font-size: 22px;
    }

    /* Карточка новости: картинка сверху, текст под ней */
    .news_card {
        flex-direction: column;
        height: auto;
    }

    .news_photo,
    .news_photo img {
        width: 100%;
        height: 190px;
    }

    .news_photo img {
        border-radius: 15px 15px 0 0;
    }

    .news_card .block {
        padding: 0 14px 12px;
        box-sizing: border-box;
    }

    .news_title {
        max-height: none;
        margin: 12px 0 8px;
    }

    .news_card .preview {
        height: auto;
        max-height: 84px;
    }

    .news_card .published_at {
        position: static;
        padding: 8px 0 0;
    }

    .news_page_title {
        font-size: 22px;
    }

    .post h1 {
        width: 100%;
    }

    /* Номера страниц — под палец */
    .pagination {
        flex-wrap: wrap;
        gap: 6px;
    }

    .pagination a {
        width: 36px;
        height: 36px;
    }

    .styled-form.auth {
        width: 100%;
    }

    .book {
        flex-direction: column;
        align-items: flex-start;
    }

    .book-info {
        padding: 12px 0 0;
    }

    .book-title {
        font-size: 20px;
    }

    .legal_assistance img {
        height: auto;
        max-width: 100%;
    }

    .founder-block {
        flex-direction: column;
    }

    /* Шрифт крупнее — подписи в расписании не влезали в прежние 76 точек */
    span.schd-title {
        width: 96px;
    }
}

@media (max-width: 360px) {
    .container.header {
        gap: 8px;
    }

    #header .logo-img {
        height: 28px;
    }

    #specialversion2 {
        top: 22px !important;
        scale: 0.42;
    }
}