/*
 * Адаптация под телефоны.
 *
 * Отдельный файл, а не правка исходников: классическая версия — побайтная
 * копия сайта заказчика (ADR-0007), и переписывать её файлы нельзя.
 * Подключается последним, поэтому переопределяет и site.css, и встроенный
 * блок стилей главной страницы без повышения специфичности.
 *
 * Всё содержимое заключено в media-запросы. Это важно: на широком экране
 * файл не делает ничего вообще, и вид сайта, который согласуют, не меняется.
 * Устройство страниц не трогается — ни сетка, ни порядок блоков, ни цвета.
 */

@media (max-width: 768px) {
    /*
     * 1. Вернуть экрану ширину.
     *
     * Отступы сложены четырьмя слоями: body 20 + панель 20 + блок
     * содержимого 20 + рамка молитвы 16 = 76px с каждой стороны.
     * На экране 375px под поля уходило 152px — сорок процентов ширины,
     * и текст молитвы читался в колонке 219px. Здесь каждый слой ужат;
     * в сумме освобождается около полусотни пикселей на строку.
     */
    body {
        padding: 12px;
    }

    .page-panel,
    .main-panel {
        padding: 20px 16px;
    }

    .page-content {
        padding: 16px 12px;
    }

    .prayer-placeholder {
        padding: 14px 12px;
    }

    /*
     * 2. Шапка занимает меньше первого экрана.
     *
     * 30px отступов плюс 40px снизу — это треть экрана телефона до того,
     * как начнётся содержимое.
     */
    .header {
        padding: 18px 0;
        margin-bottom: 24px;
    }

    /*
     * 3. Поле ввода даты и iOS.
     *
     * Safari на iPhone принудительно увеличивает страницу, когда палец
     * попадает в поле с кеглем меньше 16px, и обратно уже не возвращает —
     * дальше человек листает сайт в увеличенном виде. У поля даты стоял
     * 1.1em, что на этом месте дало 14.3px.
     *
     * !important здесь вынужденный: размер задан атрибутом style прямо
     * в разметке исходника, а её мы не правим.
     */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /*
     * 4. Попасть пальцем.
     *
     * Кнопка возврата была 41px высотой, строки со ссылками на источники —
     * 21px. Рекомендуемый минимум для касания — 44px.
     */
    .back-link {
        padding: 12px 22px;
    }

    .source-links li {
        padding-top: 11px;
        padding-bottom: 11px;
    }

    /*
     * 5. Длинный текст молитвы — по левому краю.
     *
     * Единственное видимое изменение вида, и только на телефоне.
     * Причина: у исходника текст выровнен по центру. На широком экране
     * это выглядит торжественно и читается нормально, а в колонке
     * шириной с ладонь каждая строка начинается с новой позиции, и глаз
     * теряет начало следующей. Заголовки молитв остаются по центру —
     * композиция страницы сохраняется.
     *
     * Если заказчик предпочтёт центрирование и на телефоне — достаточно
     * убрать это правило, остальное не зависит от него.
     */
    .prayer-page .page-content p {
        text-align: left;
    }

    /* Переносы в длинных словах вместо выхода за край. */
    .page-content,
    .prayer-placeholder {
        overflow-wrap: break-word;
    }
}

@media (max-width: 380px) {
    /* На самых узких экранах отступы ужимаются ещё немного. */
    body {
        padding: 8px;
    }

    .page-panel,
    .main-panel {
        padding: 16px 12px;
    }

    .page-content {
        padding: 14px 10px;
    }

    .page-title {
        font-size: 1.5em;
    }
}