/* =============================================================
   Aradel 404 Page — scoped styles
   All rules prefixed with .ar-404 — zero bleed to other pages.
   ============================================================= */

/* ------------------------------------------------------------------
   Shell
   True viewport centring — content sits in the middle of the frame.
------------------------------------------------------------------ */
.ar-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100svh - 92px); /* desktop nav height */
    padding: clamp(48px, 6vw, 80px) clamp(24px, 6vw, 112px);
    background: var(--ads-bg, #fff);
    overflow: hidden;
    position: relative;
}

/* ------------------------------------------------------------------
   Inner — natural flow: ghost first, then content below it
------------------------------------------------------------------ */
.ar-404__inner {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ------------------------------------------------------------------
   Ghost 404 numeral — in flow, ABOVE the content stack (Porsche)
   Larger than before. Fades via gradient text.
------------------------------------------------------------------ */
.ar-404__ghost {
    display: block;
    width: 100%;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    line-height: 0.85;
    letter-spacing: -0.04em;
    margin-bottom: -0.12em; /* pull content up so it overlaps the fade-out bottom */

    font-family: var(--ads-font, "Nunito Sans", sans-serif);
    font-size: clamp(200px, 36vw, 480px);
    font-weight: 800;

    /* Gradient: visible at top, completely gone at bottom — Porsche feel */
    background: linear-gradient(
        to bottom,
        rgba(1, 48, 58, 0.13) 0%,
        rgba(1, 48, 58, 0.06) 50%,
        rgba(1, 48, 58, 0.00) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ------------------------------------------------------------------
   Content stack — sits in flow below the ghost
------------------------------------------------------------------ */
.ar-404__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    padding-bottom: clamp(16px, 3vw, 32px);
}

/* ------------------------------------------------------------------
   Heading — smaller size, heavier weight
------------------------------------------------------------------ */
.ar-404__heading {
    font-family: var(--ads-font, "Nunito Sans", sans-serif);
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.2;
    font-weight: 700;
    color: var(--ads-brand-blue, #01303A);
    margin: 0 0 16px;
    max-width: 560px;
}

/* ------------------------------------------------------------------
   Primary support line
------------------------------------------------------------------ */
.ar-404__lede {
    font-family: var(--ads-font, "Nunito Sans", sans-serif);
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.6;
    color: var(--ads-muted, #474747);
    margin: 0 0 36px;
    max-width: 440px;
}

/* ------------------------------------------------------------------
   CTA — red tone (passed via [ar_action tone="red"])
------------------------------------------------------------------ */
.ar-404__cta {
    margin: 0 0 40px;
}

.ar-404__cta .ar-action {
    color: var(--ads-brand-red, #C1000F);
}

/* ------------------------------------------------------------------
   Secondary support copy
------------------------------------------------------------------ */
.ar-404__support {
    max-width: 380px;
}

.ar-404__support p {
    font-family: var(--ads-font, "Nunito Sans", sans-serif);
    font-size: clamp(13px, 1.3vw, 14px);
    line-height: 1.7;
    color: var(--ads-muted, #474747);
    margin: 0;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

/* --- Tablet (<=1024px) --- */
@media (max-width: 1024px) {
    .ar-404 {
        min-height: calc(100svh - 80px);
    }

    .ar-404__ghost {
        margin-bottom: -0.10em;
    }

    .ar-404__lede {
        margin-bottom: 28px;
    }

    .ar-404__cta {
        margin-bottom: 32px;
    }
}

/* --- Mobile (<=640px) --- */
@media (max-width: 640px) {
    .ar-404 {
        min-height: calc(100svh - 72px);
        padding: 32px 24px 56px;
    }

    .ar-404__ghost {
        margin-bottom: -0.08em;
    }

    .ar-404__heading {
        margin-bottom: 12px;
        max-width: 100%;
    }

    .ar-404__lede {
        margin-bottom: 28px;
        max-width: 100%;
    }

    .ar-404__cta {
        margin-bottom: 32px;
    }

    .ar-404__support {
        max-width: 100%;
    }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .ar-404__ghost {
        animation: none !important;
    }
}