/* ============================================================
 * Страница ошибки (404 / 403 / 500 / 503 / 419 / 429).
 * Большой код по центру, ниже короткое описание; фон —
 * иллюстрация errors_pages.png на всю ширину.
 * ============================================================ */

.error-page {
    /* <main class="error-page"> — главный блок страницы. Растягивание
       до футера обеспечивает глобальное правило #app.wrapper > main
       { flex: 1 0 auto; } из tokens.css. */
    position: relative;
    background: url('/images/errors_pages.png') center / cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 16px;
    color: var(--ink, #21212D);
}

.error-page__code {
    margin: 0;
    font-family: 'Monomakh-Regular', serif;
    font-weight: 400;
    font-size: clamp(80px, 14vw, 160px);
    line-height: 100%;
    letter-spacing: 0;
    text-transform: uppercase;
}

.error-page__message {
    margin: 16px 0 0;
    font-family: 'Jost-Regular', sans-serif;
    font-weight: 500;
    font-size: clamp(16px, 2.2vw, 24px);
    line-height: 130%;
    max-width: 720px;
}

.error-page__home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    /* По умолчанию ровно 432 px; на узких экранах ужимается, оставляя
       по 20 px отступа с каждой стороны. */
    width: min(432px, calc(100vw - 40px));
    padding: 14px 24px;
    background: #769AC9;
    color: #ffffff;
    font-family: 'Jost-Regular', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.error-page__home:hover {
    opacity: 0.9;
}

/* На странице ошибки фон-иллюстрация должна прилегать к футеру вплотную:
   у .site-footer есть штатный margin-top — он создаёт кремовую полосу
   между картинкой и тёмным футером. Обнуляем его только для этой ситуации. */
.error-page + .site-footer {
    margin-top: 0;
}