/*
 * VSL ABOUT — USER IMAGE VISIBILITY FIX
 * Goal:
 * - first three About images fully visible
 * - last two conclusion images softened for readability
 * - no About markup changes
 * - no team / QR / popup changes
 */

/* ---- FIRST THREE IMAGES: FULLY VISIBLE ---- */

/* keep the main stage image clean and fully visible */
#about .vsl-about-plane--hospital {
    z-index: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#about .vsl-about-plane--hospital img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 52% center !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
}

/* selected products and verified documentation:
   remove the milky layer so the images stay clearly visible */
#about .vsl-about-plane--supply,
#about .vsl-about-plane--documentation {
    overflow: hidden !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    box-shadow:
        0 18px 42px rgba(8, 34, 78, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.85) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#about .vsl-about-plane--supply img,
#about .vsl-about-plane--documentation img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
}

#about .vsl-about-plane--supply img {
    object-position: center center !important;
}

#about .vsl-about-plane--documentation img {
    object-position: center center !important;
}

/* kill the whitening overlay on the two support cards */
#about .vsl-about-plane--supply::after,
#about .vsl-about-plane--documentation::after {
    content: none !important;
    background: none !important;
}

/* keep the scene veil subtle and behind the images */
#about .vsl-about-scene::before {
    z-index: 2 !important;
    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0.06),
            transparent 34%
        ),
        linear-gradient(
            to top,
            rgba(5,23,52,0.06),
            transparent 44%
        ) !important;
}

#about .vsl-about-scene::after {
    z-index: 2 !important;
    box-shadow: inset 0 0 28px rgba(19, 52, 103, 0.03) !important;
}

/* force the first three images to stay fully visible in every about state */
#about.vsl-about-cinematic[data-about-state] .vsl-about-plane--hospital,
#about.vsl-about-cinematic[data-about-state] .vsl-about-plane--supply,
#about.vsl-about-cinematic[data-about-state] .vsl-about-plane--documentation,
#about.vsl-about-cinematic[data-about-state] .vsl-about-plane--hospital img,
#about.vsl-about-cinematic[data-about-state] .vsl-about-plane--supply img,
#about.vsl-about-cinematic[data-about-state] .vsl-about-plane--documentation img {
    opacity: 1 !important;
}

/* keep the floating graphic aids from overpowering the photos */
#about .vsl-about-product-orbit {
    opacity: 0.22 !important;
    z-index: 4 !important;
}

#about .vsl-about-network {
    z-index: 8 !important;
    opacity: 0.78 !important;
}

#about .vsl-about-annotation {
    z-index: 12 !important;
}

#about .vsl-about-pathway {
    z-index: 15 !important;
}

/* ---- LAST TWO IMAGES: REDUCED FOR TEXT READABILITY ---- */

#about .vsl-about-conclusion {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border: 1px solid rgba(49, 69, 154, 0.10) !important;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.96),
            rgba(240,248,252,0.94)
        ) !important;
    box-shadow: 0 18px 44px rgba(14,42,93,0.08) !important;
    padding-right: min(25vw, 250px) !important;
}

#about .vsl-about-conclusion > * {
    position: relative !important;
    z-index: 2 !important;
}

#about .vsl-about-conclusion::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    opacity: 0.42 !important;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.98) 0%,
            rgba(255,255,255,0.94) 36%,
            rgba(255,255,255,0.78) 62%,
            rgba(255,255,255,0.42) 100%
        ),
        url("../images/about/about-community-impact.webp")
        right center / cover no-repeat !important;
}

#about .vsl-about-conclusion::after {
    content: "" !important;
    position: absolute !important;
    right: 24px !important;
    bottom: 22px !important;
    width: clamp(118px, 13vw, 170px) !important;
    aspect-ratio: 4 / 5 !important;
    z-index: 1 !important;
    opacity: 0.70 !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    box-shadow:
        0 14px 32px rgba(13, 42, 93, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.86) !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(4,24,54,0.04)
        ),
        url("../images/about/about-professional-care.webp")
        center 18% / cover no-repeat !important;
}

/* dark mode */
html[data-theme="dark"] #about .vsl-about-plane--supply,
html[data-theme="dark"] #about .vsl-about-plane--documentation {
    background: transparent !important;
    border-color: rgba(117,227,235,0.18) !important;
    box-shadow:
        0 18px 42px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

html[data-theme="dark"] #about .vsl-about-conclusion {
    background:
        linear-gradient(
            135deg,
            rgba(7,19,37,0.97),
            rgba(8,28,47,0.94)
        ) !important;
}

html[data-theme="dark"] #about .vsl-about-conclusion::before {
    opacity: 0.28 !important;
    background:
        linear-gradient(
            90deg,
            rgba(7,19,37,0.97) 0%,
            rgba(7,19,37,0.92) 40%,
            rgba(7,19,37,0.74) 66%,
            rgba(7,19,37,0.32) 100%
        ),
        url("../images/about/about-community-impact.webp")
        right center / cover no-repeat !important;
}

html[data-theme="dark"] #about .vsl-about-conclusion::after {
    opacity: 0.62 !important;
}

@media (max-width: 980px) {
    #about .vsl-about-conclusion {
        padding-right: 170px !important;
    }
}

@media (max-width: 720px) {
    #about .vsl-about-conclusion {
        padding-right: inherit !important;
    }

    #about .vsl-about-conclusion::after {
        display: none !important;
    }

    #about .vsl-about-conclusion::before {
        opacity: 0.34 !important;
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.96) 0%,
                rgba(255,255,255,0.90) 54%,
                rgba(255,255,255,0.74) 100%
            ),
            url("../images/about/about-community-impact.webp")
            center center / cover no-repeat !important;
    }

    html[data-theme="dark"] #about .vsl-about-conclusion::before {
        opacity: 0.24 !important;
        background:
            linear-gradient(
                180deg,
                rgba(7,19,37,0.96) 0%,
                rgba(7,19,37,0.88) 56%,
                rgba(7,19,37,0.76) 100%
            ),
            url("../images/about/about-community-impact.webp")
            center center / cover no-repeat !important;
    }
}