/* =========================================================
       ALL LISTING PAGES — BLUE DIAGONAL GEOMETRIC BACKGROUND
       Applies to all pages using .listing-page
       ========================================================= */

    /* 1. PAGE BACKGROUND */
body:has(.listing-page) {
    background-color: #c9dcf7;
}

/* 2. FIXED DIAGONAL GEOMETRIC BACKGROUND */
body:has(.listing-page)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-color: #c9dcf7;

    background-image:
        /* Fine diagonal pinstripes */
            repeating-linear-gradient(
                    110deg,
                    transparent 0,
                    transparent 8px,
                    rgba(255, 255, 255, 0.16) 9px,
                    rgba(255, 255, 255, 0.16) 11px,
                    transparent 12px,
                    transparent 18px
            ),

                /* Large translucent diagonal band */
            linear-gradient(
                    125deg,
                    transparent 0%,
                    transparent 22%,
                    rgba(255, 255, 255, 0.32) 22.2%,
                    rgba(255, 255, 255, 0.32) 36%,
                    transparent 36.2%,
                    transparent 100%
            ),

                /* Contrasting blue diagonal band */
            linear-gradient(
                    48deg,
                    transparent 0%,
                    transparent 53%,
                    rgba(80, 137, 210, 0.20) 53.2%,
                    rgba(80, 137, 210, 0.20) 59%,
                    transparent 59.2%,
                    transparent 100%
            ),

                /* Soft angled panel */
            linear-gradient(
                    115deg,
                    rgba(255, 255, 255, 0.12) 0%,
                    rgba(255, 255, 255, 0.12) 35%,
                    transparent 35.2%,
                    transparent 100%
            ),

                /* Base blue gradient */
            linear-gradient(
                    115deg,
                    #d4e5fb 0%,
                    #bfd7f6 48%,
                    #d2e3fb 100%
            );

    background-repeat: no-repeat;
    background-size: cover;
}

/* 3. KEEP THE PAGE HERO TRANSPARENT */
body:has(.listing-page) .page-hero {
    background: transparent !important;
}

/* 4. LISTING CONTENT PANEL */
body:has(.listing-page) .listing-page {
    position: relative;
    margin-top: 44px;
    padding: 24px 20px 36px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 12px;
    box-sizing: border-box;
}

/* 5. TABLET AND MOBILE */
@media (max-width: 768px) {
    body:has(.listing-page) .listing-page {
        margin-top: 28px;
        padding: 20px 16px 28px;
        border-radius: 8px;
    }
}

/* 6. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body:has(.listing-page)::before {
        pointer-events: none;
    }
}