/* =========================================================
   404 — PAGE NOT FOUND
   ========================================================= */

.not-found-page {
    min-height:
        calc(
            100vh -
            var(--header-height, 72px)
        );

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        2rem
        1rem;
}


.not-found-page__card {
    width:
        min(
            100%,
            520px
        );

    padding:
        2.25rem
        2rem;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-sm);

    text-align:
        center;
}


.not-found-page__code {
    margin-bottom:
        0.5rem;

    color:
        var(--brand-green);

    font-size:
        3.25rem;

    font-weight:
        850;

    line-height:
        1;

    letter-spacing:
        -0.05em;
}


.not-found-page__title {
    margin:
        0;

    color:
        var(--text-primary);

    font-size:
        1.35rem;

    font-weight:
        800;

    line-height:
        1.2;
}


.not-found-page__message {
    max-width:
        390px;

    margin:
        0.7rem
        auto
        0;

    color:
        var(--text-secondary);

    font-size:
        0.72rem;

    line-height:
        1.55;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.not-found-page__actions {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap:
        wrap;

    gap:
        0.55rem;

    margin-top:
        1.35rem;
}


.not-found-page__button {
    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;
    justify-content:
        center;

    padding:
        0
        0.85rem;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-sm);

    font:
        inherit;

    font-size:
        0.62rem;

    font-weight:
        750;

    cursor:
        pointer;

    text-decoration:
        none;

    transition:
        background-color
        var(--transition-fast),
        border-color
        var(--transition-fast),
        color
        var(--transition-fast);
}


.not-found-page__button--primary {
    color:
        #ffffff;

    border-color:
        var(--brand-green);

    background:
        var(--brand-green);
}


.not-found-page__button--primary:hover {
    border-color:
        var(--brand-green-hover);

    background:
        var(--brand-green-hover);
}


.not-found-page__button--secondary {
    color:
        var(--text-secondary);

    background:
        var(--surface);
}


.not-found-page__button--secondary:hover {
    color:
        var(--text-primary);

    background:
        var(--surface-muted);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .not-found-page__card {
        padding:
            1.75rem
            1.2rem;
    }


    .not-found-page__actions {
        flex-direction:
            column;
    }


    .not-found-page__button {
        width:
            100%;
    }

}