/* ============================================================
   NOC Event Suite v5 — Person Carousel
   Shared by [speakers_carousel], [moderators_carousel], [organizers_carousel]
   ============================================================ */

/* ── Outer shell ──────────────────────────────────────────── */
.noc-carousel-wrap {
    --noc-arrow-size:   44px;
    --noc-arrow-offset: 0px;          /* arrows sit flush outside the track */
    --noc-gap:          24px;
    --noc-dot-size:     8px;
    --noc-accent:       #7821AF;
    --noc-accent2:      #DB1A88;

    position: relative;
    width: 100%;
    /* horizontal padding reserves space for the outside arrows */
    padding: 0 calc(var(--noc-arrow-size) + 12px);
    box-sizing: border-box;
}

/* ── Viewport (clip area) ─────────────────────────────────── */
.noc-carousel-viewport {
    overflow: hidden;
    width: 100%;
}

/* ── Track (slides row) ───────────────────────────────────── */
.noc-carousel-track {
    display: flex;
    gap: var(--noc-gap);
    transition: transform .5s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

/* ── Single slide ─────────────────────────────────────────── */
.noc-carousel-slide {
    flex: 0 0 auto;        /* width set by JS via CSS variable */
    box-sizing: border-box;
}

/* ── Card ─────────────────────────────────────────────────── */
.noc-person-carousel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 20px 28px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(120, 33, 175, .10);
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    transition: box-shadow .25s, transform .25s;
    height: 100%;
    box-sizing: border-box;
    cursor: default;
}
.noc-person-carousel-card:hover {
    box-shadow: 0 12px 40px rgba(120,33,175,.14);
    transform: translateY(-3px);
}

/* ── Avatar ───────────────────────────────────────────────── */
.noc-carousel-avatar-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    flex-shrink: 0;
}
.noc-carousel-avatar-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--noc-accent), var(--noc-accent2));
    z-index: 0;
}
.noc-carousel-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f4f6;
    z-index: 1;
    border: 3px solid #fff;
}
.noc-carousel-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Fallback monogram circle when no image */
.noc-carousel-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--noc-accent), var(--noc-accent2));
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    border-radius: 50%;
    user-select: none;
}

/* ── Text ─────────────────────────────────────────────────── */
.noc-carousel-name {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
    margin: 0 0 6px;
    letter-spacing: .01em;
}
.noc-carousel-designation {
    font-size: .875rem;
    font-weight: 600;
    color: var(--noc-accent);
    margin: 0 0 4px;
    line-height: 1.35;
}
.noc-carousel-workplace {
    font-size: .8rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* ── Type label pill ──────────────────────────────────────── */
.noc-carousel-type-pill {
    display: inline-block;
    margin-top: 14px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--noc-accent), var(--noc-accent2));
    color: #fff;
    opacity: .85;
}

/* ── Navigation arrows ────────────────────────────────────── */
/*    Positioned OUTSIDE the viewport on left / right          */
.noc-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--noc-arrow-size);
    height: var(--noc-arrow-size);
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--noc-accent);
    font-size: 18px;
    line-height: 1;
    transition: background .18s, color .18s, box-shadow .18s, opacity .18s;
    z-index: 10;
    padding: 0;
    flex-shrink: 0;
}
.noc-carousel-arrow:hover {
    background: var(--noc-accent);
    color: #fff;
    box-shadow: 0 4px 20px rgba(120,33,175,.3);
}
.noc-carousel-arrow:disabled,
.noc-carousel-arrow[disabled] {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}
.noc-carousel-arrow--prev {
    left: var(--noc-arrow-offset);
}
.noc-carousel-arrow--next {
    right: var(--noc-arrow-offset);
}

/* SVG arrow icons (inline, no font-dependency) */
.noc-carousel-arrow svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}

/* ── Dots / pagination ────────────────────────────────────── */
.noc-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.noc-carousel-dot {
    width: var(--noc-dot-size);
    height: var(--noc-dot-size);
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: #cbd5e1;
    transition: background .2s, transform .2s, width .2s;
    flex-shrink: 0;
}
.noc-carousel-dot.is-active {
    background: var(--noc-accent);
    transform: scale(1.35);
    width: calc(var(--noc-dot-size) * 2.5);
    border-radius: 999px;
}

/* ── Empty state ──────────────────────────────────────────── */
.noc-carousel-empty {
    text-align: center;
    padding: 32px 16px;
    color: #94a3b8;
    font-style: italic;
    font-size: .95rem;
}

/* ── Dark-background variant (add class noc-carousel-dark) ── */
.noc-carousel-dark .noc-person-carousel-card {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    color: #fff;
}
.noc-carousel-dark .noc-carousel-name        { color: #fff; }
.noc-carousel-dark .noc-carousel-workplace   { color: rgba(255,255,255,.65); }
.noc-carousel-dark .noc-carousel-arrow       { background: rgba(255,255,255,.12); color: #fff; }
.noc-carousel-dark .noc-carousel-arrow:hover { background: var(--noc-accent); }
.noc-carousel-dark .noc-carousel-dot         { background: rgba(255,255,255,.3); }

/* ── Responsive layout helpers ────────────────────────────── */
@media (max-width: 1024px) {
    .noc-carousel-wrap {
        --noc-arrow-size: 38px;
    }
}
@media (max-width: 640px) {
    .noc-carousel-wrap {
        --noc-arrow-size: 34px;
        --noc-gap: 16px;
        padding: 0 calc(var(--noc-arrow-size) + 8px);
    }
    .noc-carousel-avatar-wrap {
        width: 100px;
        height: 100px;
    }
    .noc-carousel-avatar {
        width: 100px;
        height: 100px;
    }
}