/* ============================================================
   Error tile – 500 (broken lens) and 404 (empty branch)
   ============================================================ */

.tile-error {
    position: relative;
    overflow: hidden;
    min-height: calc((var(--row) * 2) - var(--tile-mg));
    display: flex;
    align-items: stretch;
}

/* Full-bleed SVG background layer */
.tile-error-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tile-error-svg {
    width: 100%;
    height: 100%;
}

/* 500: dark with warm-grey radial glow (set by inline SVG gradient) */
.tile-error-500 {
    background: radial-gradient(ellipse 70% 70% at 45% 44%, #2e2c3e 0%, #111010 80%);
}

/* 404: deep night-sky dark blue */
.tile-error-404 {
    background: linear-gradient(170deg, #0d1117 0%, #141b26 55%, #0a0f1a 100%);
}

/* Content layer sits above the SVG */
.tile-error-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2.5rem 2rem;
    text-align: center;
    color: #fff;
}

/* Large error code number */
.tile-error-code {
    font-family: 'Poiret One', sans-serif;
    font-size: clamp(5rem, 14vw, 9rem);
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.tile-error-500 .tile-error-code {
    color: #e8dbc4;
    text-shadow: 0 0 48px rgba(220, 190, 120, 0.35);
}

.tile-error-404 .tile-error-code {
    color: #b8d4e8;
    text-shadow: 0 0 48px rgba(100, 165, 220, 0.35);
}

/* Headline below code */
.tile-error-headline {
    margin-top: 0.4rem;
    font-size: 1.35rem;
    font-weight: 400;
    opacity: 0.82;
    letter-spacing: 0.03em;
}

/* Descriptive message */
.tile-error-message {
    margin-top: 0.6rem;
    font-size: 0.92rem;
    opacity: 0.55;
    max-width: 520px;
    line-height: 1.55;
}

/* Back-to-home link – overrides the generic .tile a border-image */
.tile-error-link {
    display: inline-block;
    margin-top: 1.8rem;
    padding: 0.55rem 1.6rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.80) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-image: none !important;
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.tile-error-link:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.55) !important;
    border-bottom-color: rgba(255, 255, 255, 0.55) !important;
    color: #fff !important;
}

@media only screen and (max-width: 767px) {
    .tile-error-code {
        font-size: clamp(4rem, 22vw, 7rem);
    }

    .tile-error-headline {
        font-size: 1.1rem;
    }
}