/* ------------------------------------------------------------
   Rounded gradient section panel (Wiza-style)
   ------------------------------------------------------------ */

.section-panel {
    /* tuning knobs */
    --radius: 36px;
    --pad: clamp(28px, 4vw, 64px);
    --ring: rgba(255, 255, 255, .55);
    --inner-gloss: rgba(255, 255, 255, .24);
    --shadow: 0 18px 50px rgba(16, 24, 40, .10);

    position: relative;
    border-radius: var(--radius);
    padding: var(--pad);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, .45);
    isolation: isolate;

    /* default soft blue->peach mesh */
    background:
        radial-gradient(120% 80% at 15% 15%, #e9f1ff 0%, rgba(233, 241, 255, 0) 60%),
        radial-gradient(120% 80% at 85% 85%, #ffe9da 0%, rgba(255, 233, 218, 0) 60%),
        linear-gradient(180deg, #eef5ff 0%, #f7fbff 45%, #fff5ee 100%);
}

/* subtle inner glossy stroke */
.section-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, .12));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* faint pattern + edge vignette */
.section-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* tiny rounded-squares grid; extremely subtle */
    background:
        radial-gradient(10px 10px at 0 0, rgba(0, 0, 0, .06) 98%, transparent) 0 0 / 52px 52px,
        radial-gradient(10px 10px at 0 0, rgba(0, 0, 0, .04) 98%, transparent) 26px 26px / 52px 52px,
        radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, .08), transparent 70%);
    /* vignette */
    opacity: .25;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: -1;
}

/* Variants (use one per panel) */
.section-panel--blue {
    background:
        radial-gradient(120% 80% at 20% 15%, #e8f1ff 0%, rgba(232, 241, 255, 0) 60%),
        radial-gradient(120% 80% at 80% 85%, #e9fff3 0%, rgba(233, 255, 243, 0) 60%),
        linear-gradient(180deg, #eef5ff 0%, #f6fbff 45%, #f4fbff 100%);
}

.section-panel--mint {
    background:
        radial-gradient(120% 80% at 15% 20%, #e7fff3 0%, rgba(231, 255, 243, 0) 60%),
        radial-gradient(120% 80% at 85% 80%, #e8f1ff 0%, rgba(232, 241, 255, 0) 60%),
        linear-gradient(180deg, #f2fff9 0%, #f6fffb 45%, #f7fbff 100%);
}

.section-panel--peach {
    background:
        radial-gradient(120% 80% at 20% 15%, #fff0ea 0%, rgba(255, 240, 234, 0) 60%),
        radial-gradient(120% 80% at 80% 85%, #eaf2ff 0%, rgba(234, 242, 255, 0) 60%),
        linear-gradient(180deg, #fff6f0 0%, #fff8f3 45%, #fff 100%);
}

/* smooth fade to white at the bottom of the panel to blend with next section */
.section-panel .fade-out,
.section-panel-fade {
    position: relative;
}

.section-panel .fade-out::after,
.section-panel-fade::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    height: clamp(48px, 8vw, 120px);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    pointer-events: none;
}

/* spacing helpers so content doesn’t hug the rounded edges on small screens */
@media (max-width: 768px) {
    .section-panel {
        --radius: 28px;
        --pad: 22px;
    }
}

/* Use a variable for the fade height */
.section-panel-fade {
    --panel-fade-h: 56px;
}

/* default; whatever you use now */
.section-panel-fade::after {
    height: var(--panel-fade-h);
}

/* If a section is immediately followed by another section,
   shorten the fade on the previous section so it doesn't intrude */
.section:has(+ .section) .section-panel-fade {
    --panel-fade-h: 18px;
}

/* Fallback for browsers without :has() — add a small top margin between sections.
   Once :has() is supported, we remove this margin so spacing stays consistent. */
.section+.section {
    margin-top: 0px;
}

@supports (selector(:has(*))) {
    .section+.section {
        margin-top: 0;
    }
}

/* Keep fade for default/light panels */
.panel--fade::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    height: clamp(40px, 8vw, 110px);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    pointer-events: none;
}

/* Disable fade on dark variant */
.panel--dark::after,
.panel--neon::after {
    display: none;
    /* ⬅️ removes the white fade */
}