/* Правки мобильного вида страницы «School-master.Mobile».
 *
 * Отдельным файлом, а не правкой app.css: макет пришёл готовым, и держать
 * свои изменения в стороне от него — единственный способ потом понять,
 * что тут дизайнерское, а что дописано.
 *
 * Подключается последним, поэтому обходится без !important там, где хватает
 * порядка следования.
 */

/* --- главное: декоративные свечения тянули страницу вбок ---
 *
 * Пятна за телефонами заданы как `calc(100% + 360px)` и `+700px` и выходят
 * за колонку намеренно. Вылет никуда не девается и на широком экране:
 * при экране 1265px документ был 1381px, на телефоне — 532px при 375px.
 * Страница ездила вбок и пальцем, и колесом.
 *
 * Правило вне медиазапроса, потому что дефект есть на любой ширине.
 *
 * Режем по секции, а не по колонке с телефоном: пятно задумано широким,
 * и обрезка по колонке дала бы ему резкий край посреди экрана. Секция —
 * во всю ширину, её край совпадает с краем экрана, где ореол и так не виден:
 * размеры самого пятна остаются прежними (проверено — 896px и там, и там).
 *
 * Именно `clip`, а не `hidden`: `hidden` создаёт контейнер прокрутки и
 * ломает `position: sticky` у шапки, а `clip` по одной оси оставляет
 * вторую нетронутой. */
section {
    overflow-x: clip;
}

@media (max-width: 900px) {

    /* --- колонка не давала телефону сжаться ---
     *
     * `grid-template-columns: 1fr` — это `minmax(auto, 1fr)`: колонка не
     * уже своего содержимого. Макет телефона жёсткий (300px плюс рамка),
     * поэтому колонка держалась за 320px в доступных 311px и подпирала
     * ряд изнутри. Явный `minmax(0, 1fr)` разрешает колонке сжиматься,
     * а телефон дальше ужимается сам. */
    .frow {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Потолок по ширине экрана, а не процент от родителя: у блоков со
     * свечением родитель — флекс, который сам меряется по содержимому,
     * и `100%` там считать не от чего — телефоны схлопывались в полоску
     * 12px (одни поля рамки). Заодно сохраняем задуманные размеры: в
     * шапке телефон 260px, в рядах 300px, в белой марке 320px — правило
     * вмешивается, только когда экран уже них. */
    .phone {
        max-width: calc(100vw - 48px);
    }

    /* --- поля ---
     * По 32px с каждой стороны на экране 375px — это 64px из 375 только на
     * воздух. Ужимаем до тех же значений, что и на остальных страницах
     * сайта, чтобы строка везде обрывалась одинаково. */
    .wrap {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 420px) {
    .wrap {
        padding-left: 16px;
        padding-right: 16px;
    }
}