/* ===========================================================================
   Solutions section (home page) — background image for the WHOLE section,
   shown as it is (no colour fill or tint), frosted glass on the LEFT column only.

   • The whole Solutions block (.customized wrapper + section.custom-tabs +
     the pinned .tabs-container) gets the website-theme background image
     (static/images/solutions-glass-bg.svg: deep purple with the magenta /
     orange / cyan brand glow) under a brand tint.
   • The left column (.tab-list-window: solution tabs + detail block) is
     glass/blur ONLY — no background image of its own, so the section's
     themed image shows through the frosted surface. Same glass recipe as the
     navbar (header-glass.css): blur(22px) saturate(180%).

   Loaded AFTER style.css and laptop3d.css (see layout/base.html), so these
   rules win on equal specificity. Only surfaces / colours change here — the
   pinned scroll layout and the tab swapping logic are untouched.
   =========================================================================== */

/* ---------- themed background image: whole Solutions section --------------- */

/* the background image only, shown as it is: no colour fill, no tint on top */
.customized,
section.custom-tabs {
    background-color: transparent;
    background-image: url("../images/solutions-glass-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* the section is a very tall scroll track (520vh); fixed keeps the image
       viewport-sized and stable across the whole track */
    background-attachment: fixed;
}

/* the pinned surface stays fully transparent — the section's themed background
   (fixed behind it) shows through, so there is no second/separate background */
section.custom-tabs .tabs-container {
    background: none;
}

/* ---------- section header text ------------------------------------------- */

section.custom-tabs .costomized-head span {
    background: linear-gradient(90deg, rgba(185, 0, 255, 0.85), rgba(0, 88, 255, 0.85));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

section.custom-tabs .costomized-head h2 {
    color: #000000;
}

section.custom-tabs .costomized-head p {
    color: rgba(0, 0, 0, 0.85);
}

/* ---------- LEFT COLUMN: glass + blur only (no image) ---------------------- */

section.custom-tabs .tab-list-window {
    padding: clamp(1.1rem, 1.8vw, 1.7rem) clamp(1.1rem, 1.8vw, 1.5rem);
    border-radius: 26px;

    /* Very faint black transparency (0.1) so it remains highly transparent */
    background: rgba(0, 0, 0, 0.05);
    
    /* Strong blur to create the glass effect */
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    
    /* No borders and no box-shadow to ensure a perfectly clean, flat glass look */
    border: none;
    box-shadow: none;
}

/* sit the glass panel a bit lower than the laptop centre (desktop layout) */
@media (min-width: 901px) {
    section.custom-tabs .tab-list-window {
        transform: translateY(6vh);
    }
}

/* browsers without backdrop-filter: solid fallback for readability */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    section.custom-tabs .tab-list-window {
        background: rgba(0, 0, 0, 0.6);
    }
}

/* the list keeps its behaviour, it just sits on the glass now */
section.custom-tabs .tab-list {
    padding: 0 0.25rem;
}

/* ---------- text colours (black) ------------------------------------------ */

section.custom-tabs .tab-list .sol-tab {
    color: rgba(0, 0, 0, 0.78);
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

/* active tab keeps the magenta → orange → cyan gradient text from laptop3d.css */
section.custom-tabs .tab-list .sol-tab.active {
    text-shadow: none;
}

/* the arrow was black (designed for the light background) — make it light now */
section.custom-tabs .tab-list .sol-tab.active::after {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: #000000;
}

section.custom-tabs .sol-detail {
    color: rgba(0, 0, 0, 0.95);
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.18); */
}

section.custom-tabs .sol-detail .sol-cap-text {
    color: rgba(0, 0, 0, 0.82);
}

section.custom-tabs .sol-detail .sol-cap-btn {
    box-shadow: 0 10px 26px rgba(15, 0, 45, 0.4);
}

/* ---------- narrow screens: the glass card becomes a full-width bar -------- */

@media (max-width: 900px) {
    section.custom-tabs .tab-list-window {
        width: auto;
        min-width: 0;
        max-height: none;
        margin: 0 4vw;
        padding: 0.9rem 1.15rem;
        border-radius: 20px;
    }

    section.custom-tabs .tab-list {
        padding: 0;
    }
}

@media (max-width: 520px) {
    section.custom-tabs .tab-list-window {
        margin: 0 3vw;
        padding: 0.8rem 0.95rem;
        border-radius: 16px;
    }
}