/* Error pages ------------------------------------------------------------ */

.zibuu-error-page {
    display: grid;
    width: min(100%, 1000px);
    min-height: 500px;
    margin-inline: auto;
    overflow: hidden;
    grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--zibuu-primary) 32%, var(--zibuu-line));
    border-radius: min(var(--zibuu-radius), 28px);
    background: linear-gradient(135deg, color-mix(in srgb, var(--zibuu-primary) 10%, var(--zibuu-body)), var(--zibuu-body) 52%, color-mix(in srgb, var(--zibuu-secondary) 9%, var(--zibuu-body)));
    box-shadow: var(--zibuu-shadow);
}

.zibuu-error-decoration {
    position: relative;
    display: grid;
    min-height: 100%;
    place-items: center;
    align-content: center;
    overflow: hidden;
    border-right: 1px solid var(--zibuu-line);
    background: linear-gradient(145deg, color-mix(in srgb, var(--zibuu-primary) 18%, var(--zibuu-surface)), color-mix(in srgb, var(--zibuu-accent) 13%, var(--zibuu-surface)));
}

.zibuu-error-decoration::before,
.zibuu-error-decoration::after {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    content: "";
}

.zibuu-error-decoration::before {
    top: 8%;
    left: -35px;
    background: color-mix(in srgb, var(--zibuu-primary) 30%, transparent);
}

.zibuu-error-decoration::after {
    right: -30px;
    bottom: 9%;
    background: color-mix(in srgb, var(--zibuu-secondary) 30%, transparent);
}

.zibuu-error-orbit {
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--zibuu-primary) 36%, transparent);
    border-radius: 50%;
}

.zibuu-error-orbit.orbit-one { width: 260px; height: 260px; }
.zibuu-error-orbit.orbit-two { width: 190px; height: 190px; border-color: color-mix(in srgb, var(--zibuu-secondary) 42%, transparent); }

.zibuu-error-symbol {
    position: relative;
    z-index: 1;
    display: grid;
    width: 5.2rem;
    height: 5.2rem;
    margin-bottom: 1rem;
    place-items: center;
    border: 5px solid color-mix(in srgb, var(--zibuu-body) 80%, transparent);
    border-radius: 1.6rem;
    color: var(--zibuu-ink);
    background: linear-gradient(145deg, var(--zibuu-primary), var(--zibuu-accent));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--zibuu-primary) 28%, transparent);
    font-size: 2rem;
}

.zibuu-error-decoration > strong {
    position: relative;
    z-index: 1;
    color: var(--zibuu-ink);
    font-size: clamp(4.5rem, 10vw, 7.5rem);
    font-weight: 950;
    letter-spacing: -.075em;
    line-height: .85;
}

.zibuu-error-content { padding: clamp(2rem, 6vw, 4.5rem); }

.zibuu-error-eyebrow {
    display: inline-flex;
    margin-bottom: 1rem;
    padding: .38rem .7rem;
    border-radius: 999px;
    color: var(--zibuu-ink);
    background: color-mix(in srgb, var(--zibuu-secondary) 25%, var(--zibuu-body));
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.zibuu-error-content h1 {
    margin: 0 0 .75rem;
    color: var(--zibuu-ink);
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.05;
}

.zibuu-error-content p {
    max-width: 520px;
    margin: 0;
    color: var(--zibuu-copy);
    font-size: 1.05rem;
    line-height: 1.75;
}

.zibuu-error-actions {
    display: flex;
    margin-top: 1.75rem;
    gap: .75rem;
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .zibuu-error-page { grid-template-columns: 1fr; }
    .zibuu-error-decoration { min-height: 260px; border-right: 0; border-bottom: 1px solid var(--zibuu-line); }
    .zibuu-error-orbit.orbit-one { width: 220px; height: 220px; }
    .zibuu-error-orbit.orbit-two { width: 155px; height: 155px; }
}

@media (max-width: 479.98px) {
    .zibuu-error-actions,
    .zibuu-error-actions .btn { width: 100%; }
}