/* ========================================
   12. Страница 404 и юридические страницы
======================================== */

.error-404-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--section-padding-centered-top) 1rem calc(var(--section-padding-y) * 2);
}

.error-404-content {
    text-align: center;
    max-width: 520px;
    animation: fadeInUp var(--animation-duration-base) var(--animation-easing);
}

.error-404-icon {
    font-size: calc(var(--type-step-1) * 4);
    color: var(--secondary-color);
    margin-bottom: var(--space-7);
}

.error-404-code {
    font-family: var(--font-heading);
    font-size: var(--title-error-code);
    font-weight: var(--font-weight-display-light);
    line-height: 1;
    color: var(--dark);
    margin-bottom: var(--space-3);
}

/* На узких экранах код «404» не вылезает за границы и не вызывает горизонтальный скролл */
@media (max-width: 575.98px) {
    .error-404-code {
        font-size: clamp(3rem, 15vw, var(--title-error-code));
    }
}

.error-404-message {
    font-size: var(--section-title-size);
    color: var(--dark);
    margin-bottom: 1rem;
}

.error-404-description {
    font-size: var(--text-lg);
    color: var(--gray);
    line-height: var(--line-height-loose);
    margin-bottom: var(--space-8);
}

.error-404-actions {
    margin-bottom: 2rem;
}

.error-404-links {
    padding-top: var(--section-padding-y);
    border-top: 1px solid var(--neutral);
}

.error-404-links-grid {
    display: flex;
    gap: var(--space-5);
    justify-content: center;
    flex-wrap: wrap;
}

.error-404-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-7);
    background: var(--light);
    border: 1px solid var(--neutral-warm);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--dark);
    transition: var(--transition-fast);
    min-width: 140px;
}

@media (hover: hover) {
    .error-404-link:hover {
        background: var(--primary-light);
        border-color: var(--primary-dark);
        color: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    .error-404-link:hover i {
        transform: scale(1.1);
    }
}

.error-404-link i {
    font-size: var(--text-2xl);
    color: var(--primary-on-light);
    transition: var(--transition-fast);
}

.error-404-link span {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}