/* ============================================================
   SK CHIT FUNDS — HERO ANGLED BOTTOM TRANSITION SYSTEM
   Provides an asymmetric diagonal wedge at the bottom of
   each hero section, matching the next section's background.
   ============================================================ */

/* ── Base slope element ── */
.hero-slope {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    height: clamp(80px, 10vw, 140px);
    /* ensure no horizontal overflow */
    overflow: hidden;
}

/* ── Color variants ── */
/* Home, Schemes, Contact → next section is #f4fbf7 (mint) */
.slope-mint { background: #f4fbf7; }

/* About, FAQ → next section is #ffffff (white) */
.slope-white { background: #ffffff; }

/* ── Shape variants ── */
/* Standard right-leaning slope — left-high, right-low ↘ */
.slope-right {
    clip-path: polygon(0 100%, 100% 15%, 100% 100%);
}

/* Gentler slope — used on FAQ for subtle variation */
.slope-gentle {
    clip-path: polygon(0 100%, 100% 30%, 100% 100%);
}

/* ── Z-index per hero context ── */
/* Home slider: above slide backgrounds (z:1-2), below content (z:10) */
.hero-section-slider .hero-slope {
    z-index: 5;
}

/* Schemes & Contact dark heroes: above glow (z:0), below content (z:2) */
.sc-hero .hero-slope,
.ct-hero .hero-slope {
    z-index: 1;
}

/* About hero: above image veil, behind copy (z:2) */
.ab-hero .hero-slope {
    z-index: 1;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .hero-slope {
        height: clamp(60px, 9vw, 110px);
    }
}

@media (max-width: 768px) {
    .hero-slope {
        height: clamp(50px, 8vw, 80px);
    }
    .slope-right {
        clip-path: polygon(0 100%, 100% 20%, 100% 100%);
    }
    .slope-gentle {
        clip-path: polygon(0 100%, 100% 35%, 100% 100%);
    }
}

@media (max-width: 480px) {
    .hero-slope {
        height: 50px;
    }
    .slope-right,
    .slope-gentle {
        clip-path: polygon(0 100%, 100% 25%, 100% 100%);
    }
}