/* ============================================
   STACKING CARDS CAROUSEL — Responsive Layout
   v6: dvh support, no fixed max-height, overflow fix
   ============================================ */

/* Ensure the section allows visible overflow for stacked cards */
section.bg-background.overflow-hidden {
    overflow: visible !important;
}

/* ── Card wrappers created by JS (inside #sc-stage) ── */
#sc-stage>div {
    background: #0a0a0a !important;
    isolation: isolate;
}

/* Ensure the cloned .group fills its wrapper completely */
#sc-stage>div>.group {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: #0a0a0a !important;
}

/* Images inside stacking cards fill their container */
#sc-stage>div img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: none !important;
    border-radius: 0 !important;
    transform: none !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
}

/* Keep active card clean and fast (no heavy glow) */
#sc-stage>div[style*="z-index: 10"],
#sc-stage>div[style*="z-index:10"] {
    box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.52) !important;
}

/* ── Stage container — dynamic height, no clipping ── */
#sc-stage {
    min-height: 280px;
    overflow: visible !important;
}


/* =====================
   PHONE  (≤ 639px)
   ===================== */
@media (max-width: 639px) {
    #sc-stage>div {
        width: 94% !important;
        max-width: 480px !important;
        border-radius: 0.75rem !important;
    }

    /* Smaller card text on mobile */
    #sc-stage h3 {
        font-size: clamp(1rem, 4vw, 1.4rem) !important;
    }

    /* Category tag */
    #sc-stage .text-primary {
        font-size: 0.55rem !important;
        letter-spacing: 0.2em !important;
    }

    /* Tighter bottom info padding */
    #sc-stage .absolute.bottom-0 {
        padding: 1.25rem !important;
    }

    /* Card content — keep titles readable while avoiding tall overlays */
    #sc-stage>div>.group .absolute.bottom-0 {
        max-height: 40% !important;
        overflow: hidden !important;
    }

    /* Reduce card height so images aren't stretched on phone */
    .group.relative.overflow-hidden.rounded-lg.bg-card:not(#sc-stage *) {
        height: 50vh !important;
        min-height: 300px !important;
        max-height: 420px !important;
    }
}

/* =====================
   TABLET / iPAD  (640px – 1023px)
   ===================== */
@media (min-width: 640px) and (max-width: 1023px) {
    #sc-stage>div {
        width: 88% !important;
        max-width: 700px !important;
    }

    #sc-stage h3 {
        font-size: clamp(1.2rem, 3vw, 1.8rem) !important;
    }

    #sc-stage .absolute.bottom-0 {
        padding: 1.75rem !important;
    }
}

/* =====================
   DESKTOP  (≥ 1024px)
   ===================== */
@media (min-width: 1024px) {
    #sc-stage>div {
        width: 80% !important;
        max-width: 900px !important;
    }

    #sc-stage h3 {
        font-size: clamp(1.4rem, 2.5vw, 2.2rem) !important;
    }

    #sc-stage .absolute.bottom-0 {
        padding: 2rem !important;
    }
}