/**
 * 404 Error Page
 * Centered layout with error code, subtitle, and random quote
 */

.container--error-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 38px - 88px); /* Subtract header height and footer space */
    padding-top: 80px;
    padding-bottom: 80px;
}

.error-404 {
    width: 100%;
    max-width: 800px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.error-404__code {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-display-1-desktop);
    font-weight: 400;
    line-height: var(--line-height-display-1-desktop);
    letter-spacing: -0.02em;
    color: var(--color-content-a40);
    text-transform: none;
}

.error-404__subtitle {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-body-3-desktop);
    font-weight: 300;
    line-height: var(--line-height-body-3-desktop);
    color: var(--color-content-a40);
    text-transform: none;
    letter-spacing: -0.02em;
}

.error-404__quote {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 100%;
}

.error-404__quote-text {
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-display-3-desktop);
    font-weight: 400;
    line-height: var(--line-height-display-3-desktop);
    letter-spacing: -0.02em;
    color: var(--color-content);
    text-transform: none;
    font-style: normal;
    quotes: none;
}

.error-404__quote-text::before,
.error-404__quote-text::after {
    content: '';
}

.error-404__quote-author {
    font-family: var(--font-body);
    font-size: var(--font-size-body-3-desktop);
    font-weight: 300;
    line-height: var(--line-height-body-3-desktop);
    color: var(--color-subaccent);
    font-style: normal;
    text-transform: none;
    letter-spacing: -0.02em;
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container--error-404 {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .error-404__code {
        font-size: var(--font-size-display-1-tablet);
        line-height: var(--line-height-display-1-tablet);
    }

    .error-404__quote-text {
        font-size: var(--font-size-display-3-desktop);
        line-height: var(--line-height-display-3-desktop);
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .container--error-404 {
        min-height: calc(100vh - 38px - 88px);
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .error-404 {
        gap: 16px;
    }

    .error-404__code {
        font-size: var(--font-size-display-1-mobile);
        line-height: var(--line-height-display-1-mobile);
    }

    .error-404__subtitle {
        font-size: var(--font-size-body-3-mobile);
        line-height: var(--line-height-body-3-mobile);
    }

    .error-404__quote {
        margin-top: 32px;
        gap: 12px;
    }

    .error-404__quote-text {
        font-size: var(--font-size-display-3-mobile);
        line-height: var(--line-height-display-3-mobile);
    }

    .error-404__quote-author {
        font-size: var(--font-size-body-3-mobile);
        line-height: var(--line-height-body-3-mobile);
    }
}