/*
 * Страница «не найдено» (22.08.2026).
 *
 * 🛑 Самодостаточна: шапки и подвала на ней нет (они собираются подзапросами к
 * контроллерам, а на странице ошибки такой подзапрос может уронить её в 500),
 * поэтому все размеры заданы здесь, а не наследуются от раскладки страницы.
 */

.it-404,
.it-404 * {
    box-sizing: border-box;
}

.it-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 560px;
    min-height: 100vh;
    margin: 0 auto;
    padding: var(--sp-40) var(--sp-20);
    font-family: var(--font-main);
    text-align: center;
}

.it-404__logo {
    display: block;
    margin-bottom: var(--sp-40);
}

.it-404__logo img {
    display: block;
    height: auto;
}

/* Цифра фирменным оранжевым - единственное яркое пятно на странице. */
.it-404__num {
    color: var(--c-accent);
    font-size: 88px;
    font-weight: var(--fw-demibold);
    line-height: 1;
}

.it-404__title {
    margin: var(--sp-16) 0 0;
    color: var(--c-text);
    font-size: var(--fs-24);
    font-weight: var(--fw-demibold);
    line-height: 1.2;
}

.it-404__text {
    margin: var(--sp-12) 0 0;
    color: var(--c-text-muted);
    font-size: var(--fs-14);
    line-height: 1.5;
}

/* Поиск - как на служебных страницах: поле 40px и янтарная рамка при фокусе. */
.it-404__search {
    display: flex;
    gap: var(--sp-8);
    width: 100%;
    margin-top: var(--sp-30);
}

.it-404__search-input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 var(--sp-12);
    border: 1px solid var(--c-line);
    border-radius: var(--r-4);
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
}

.it-404__search-input:focus {
    border-color: var(--c-accent-amber);
    outline: none;
}

.it-404__search-submit {
    flex: none;
    height: 40px;
    padding: 0 var(--sp-20);
    border: 0;
    border-radius: var(--r-4);
    background: var(--c-accent);
    color: var(--c-white);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    cursor: pointer;
}

.it-404__search-submit:hover {
    background: var(--c-accent-amber);
}

/* Ссылки на разделы - пилюлями, как переключатели на служебных страницах. */
.it-404__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-8);
    margin-top: var(--sp-30);
}

.it-404__links a {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 var(--sp-12);
    border: 1px solid var(--c-line);
    border-radius: var(--r-4);
    color: var(--c-text);
    font-size: var(--fs-14);
    line-height: 1;
    text-decoration: none;
}

.it-404__links a:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

@media (max-width: 699px) {
    .it-404__num {
        font-size: 64px;
    }

    .it-404__search {
        flex-direction: column;
    }

    .it-404__search-submit {
        width: 100%;
    }
}