/**
 * Cinematic Speaker Carousel v4.0 — Styles
 * @author Perfect Publishing — https://www.perfectpublishing.com/
 *
 * CRITICAL: .csc-card uses left:0;top:0.
 * ALL positioning is done via JS transform translate3d.
 */

.csc-wrap{
    --csc-bg1:#060c1f;--csc-bg2:#0a1a3a;--csc-arc:#1d4ed8;--csc-glow:#3b82f6;
    position:relative;width:100%;height:520px;overflow:hidden;user-select:none;-webkit-user-select:none;
    background:linear-gradient(180deg,var(--csc-bg1) 0%,var(--csc-bg2) 100%);
}
.csc-arc{
    position:absolute;bottom:-50%;left:2%;right:2%;height:100%;border-radius:50%;
    background:radial-gradient(ellipse at center,var(--csc-arc) 0%,rgba(29,78,216,.25) 35%,transparent 70%);
    opacity:.4;pointer-events:none;filter:blur(25px);z-index:0;
}
.csc-stage{
    position:relative;width:100%;height:100%;
    perspective:1000px;perspective-origin:50% 50%;
    z-index:1;
}

/* ═══ CARD — left:0 top:0, JS does all positioning ═══ */
.csc-card{
    position:absolute;left:0;top:0;
    width:240px;height:340px;border-radius:18px;overflow:visible;
    cursor:pointer;backface-visibility:hidden;will-change:transform,opacity,filter;
}
a.csc-card{text-decoration:none;color:inherit;outline:none;display:block}

.csc-glow{
    position:absolute;inset:-2px;border-radius:20px;
    background:linear-gradient(160deg,var(--csc-glow) 0%,rgba(59,130,246,.1) 40%,rgba(59,130,246,.2) 70%,var(--csc-glow) 100%);
    opacity:.3;z-index:0;transition:opacity .4s,box-shadow .4s;
}
.csc-card.is-center .csc-glow{
    opacity:1;box-shadow:0 0 30px rgba(59,130,246,.5),0 0 80px rgba(59,130,246,.15);
}

.csc-inner{position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;z-index:1;background:rgba(10,18,45,.9)}
.csc-img{position:absolute;inset:0;background-size:cover;background-position:center top;transition:transform .4s ease}
.csc-card:hover .csc-img{transform:scale(1.04)}

.csc-text{
    position:absolute;bottom:0;left:0;right:0;padding:36px 14px 14px;
    background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.45) 45%,transparent 100%);
    z-index:3;
}
.csc-quote{font-size:.98rem;font-weight:700;line-height:1.25;margin:0 0 4px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.csc-name{font-size:.68rem;font-weight:600;margin:0 0 1px;color:#fff;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.csc-bio{font-size:.6rem;margin:0;color:rgba(255,255,255,.55);opacity:0;transform:translateY(4px);transition:opacity .25s .03s,transform .25s .03s}
.csc-card:hover .csc-name,.csc-card:hover .csc-bio{opacity:1;transform:translateY(0)}

/* Show name/bio always mode */
.csc-wrap.bio-always .csc-name,.csc-wrap.bio-always .csc-bio{opacity:1;transform:none}
.csc-wrap.bio-never .csc-name,.csc-wrap.bio-never .csc-bio{display:none}

/* Nav */
.csc-arr{
    position:absolute;top:50%;transform:translateY(-50%);z-index:30;
    width:38px;height:38px;border:1px solid rgba(255,255,255,.1);border-radius:50%;
    background:rgba(6,12,31,.5);backdrop-filter:blur(8px);
    color:rgba(255,255,255,.45);cursor:pointer;transition:all .25s;
    display:flex;align-items:center;justify-content:center;padding:0;
}
.csc-arr:hover{background:rgba(29,78,216,.25);border-color:var(--csc-glow);color:#fff;transform:translateY(-50%) scale(1.06)}
.csc-arr.prev{left:12px}.csc-arr.next{right:12px}
.csc-arr svg{width:16px;height:16px}

.csc-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:30;display:flex;gap:6px}
.csc-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);border:none;padding:0;cursor:pointer;transition:all .25s}
.csc-dot:hover{background:rgba(255,255,255,.4);transform:scale(1.3)}
.csc-dot.on{background:var(--csc-glow);transform:scale(1.2);box-shadow:0 0 6px rgba(59,130,246,.5)}

/* Mobile */
@media(max-width:768px){
    .csc-wrap{height:auto!important;min-height:340px}
    .csc-stage{perspective:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;display:flex;gap:14px;padding:20px}
    .csc-stage::-webkit-scrollbar{display:none}
    .csc-card{position:relative!important;left:auto!important;top:auto!important;transform:none!important;opacity:1!important;filter:none!important;flex:0 0 auto;width:200px;height:280px;scroll-snap-align:center}
    .csc-glow{opacity:.5}
    .csc-name,.csc-bio{opacity:1!important;transform:none!important}
    .csc-arr{display:none!important}
    .csc-dots{position:relative;bottom:auto;left:auto;transform:none;justify-content:center;padding:10px 0}
    .csc-arc{opacity:.2}
}