/* ==========================================
   ULTRAKIT TEAM MEMBER CAROUSEL — Premium
   5 Slider Modes × 4 Card Styles × Social Links
   ========================================== */

.ultrakit-tmc-wrapper {
    --ultrakit-tmc-accent: #6c5ce7;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ultrakit-tmc-no-members { text-align: center; color: #aaa; padding: 24px; }

/* ---- Shared track ---- */
.ultrakit-tmc-track-outer { overflow: hidden; width: 100%; }
.ultrakit-tmc-track { display: flex; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); will-change: transform; align-items: stretch; }
.ultrakit-tmc-slide { min-width: 100%; box-sizing: border-box; padding: 12px 6px; }
.ultrakit-tmc-mode-multi .ultrakit-tmc-slide { min-width: 0; }

.ultrakit-tmc-mode-fade .ultrakit-tmc-track { position: relative; }
.ultrakit-tmc-mode-fade .ultrakit-tmc-slide { position: absolute; top:0; left:0; opacity:0; min-width:100%; pointer-events:none; transition: opacity 0.6s ease; }
.ultrakit-tmc-mode-fade .ultrakit-tmc-slide.is-active { opacity:1; position:relative; pointer-events:auto; }

/* ---- Stack mode ---- */
.ultrakit-tmc-mode-stack .ultrakit-tmc-stack { position: relative; min-height: 340px; }
.ultrakit-tmc-stack-item { position:absolute; top:0; left:0; right:0; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.5s ease; }
.ultrakit-tmc-stack-item[data-stack-pos="0"] { transform: scale(1)    translateY(0px);  opacity:1;   z-index:4; }
.ultrakit-tmc-stack-item[data-stack-pos="1"] { transform: scale(0.96) translateY(14px); opacity:0.7; z-index:3; }
.ultrakit-tmc-stack-item[data-stack-pos="2"] { transform: scale(0.92) translateY(26px); opacity:0.4; z-index:2; }
.ultrakit-tmc-stack-item[data-stack-pos="3"] { transform: scale(0.88) translateY(36px); opacity:0;   z-index:1; }

/* ---- Marquee mode ---- */
.ultrakit-tmc-marquee-outer { overflow: hidden; }
.ultrakit-tmc-marquee-track { display:flex; gap:24px; animation: ultrakit-tmc-marquee var(--ultrakit-tmc-marquee-speed,25s) linear infinite; width:max-content; }
.ultrakit-tmc-marquee-outer:hover .ultrakit-tmc-marquee-track { animation-play-state: paused; }
.ultrakit-tmc-marquee-slide { width: 260px; flex-shrink: 0; }
@keyframes ultrakit-tmc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Card ---- */
.ultrakit-tmc-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.ultrakit-tmc-card:hover { transform: translateY(-5px); }

.ultrakit-tmc-photo-wrap { position: relative; overflow: hidden; background: #f0f0f0; }
.ultrakit-tmc-photo { display:block; width:100%; aspect-ratio: 1/1; object-fit:cover; transition: transform 0.45s ease; }
.ultrakit-tmc-card:hover .ultrakit-tmc-photo { transform: scale(1.06); }
.ultrakit-tmc-shape-circle { border-radius:50%; width:60%; margin:24px auto 0; aspect-ratio:1/1; }
.ultrakit-tmc-shape-rounded { border-radius: 14px 14px 0 0; }
.ultrakit-tmc-shape-square  { border-radius: 0; }

.ultrakit-tmc-body { padding: 22px 20px; display:flex; flex-direction:column; gap:4px; flex:1; }
.ultrakit-tmc-name { font-size: 16px; font-weight: 800; color: #1a1a2e; }
.ultrakit-tmc-role { font-size: 12.5px; font-weight: 600; color: var(--ultrakit-tmc-accent); margin-bottom: 6px; }
.ultrakit-tmc-bio  { font-size: 13px; line-height: 1.6; color: #777777; margin: 4px 0 10px; }

.ultrakit-tmc-socials { display:flex; gap:8px; margin-top:auto; justify-content:center; flex-wrap:wrap; }
.ultrakit-tmc-social-link {
    width: 32px; height: 32px;
    display:inline-flex; align-items:center; justify-content:center;
    color: var(--ultrakit-tmc-accent);
    background: rgba(108,92,231,0.1);
    border-radius: 50%;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}
.ultrakit-tmc-social-link:hover { background: var(--ultrakit-tmc-accent); color:#fff; transform: translateY(-2px); }
.ultrakit-tmc-social-square .ultrakit-tmc-social-link { border-radius: 8px; }
.ultrakit-tmc-social-minimal .ultrakit-tmc-social-link { background: transparent !important; font-size: 16px; }

/* ---- Card styles ---- */
.tmc-style-2 { background: #1a1a2e; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.tmc-style-2 .ultrakit-tmc-name { color:#ffffff; }
.tmc-style-2 .ultrakit-tmc-bio  { color:#9999b3; }

.tmc-style-3 {
    background: rgba(255,255,255,0.14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.tmc-style-3 .ultrakit-tmc-name { color:#ffffff; }
.tmc-style-3 .ultrakit-tmc-bio  { color: rgba(255,255,255,0.75); }

.tmc-style-4 { background:#ffffff; border: 1.5px solid #ececf5; box-shadow: none; }
.tmc-style-4:hover { border-color: var(--ultrakit-tmc-accent); }

/* ---- Navigation ---- */
.ultrakit-tmc-arrow {
    width: 44px; height: 44px;
    display:inline-flex; align-items:center; justify-content:center;
    border: none; border-radius: 50%;
    cursor: pointer;
    padding: 0 !important;
    box-sizing: border-box;
    color: var(--ultrakit-tmc-accent) !important;
    background: #ffffff;
    box-shadow: 0 3px 14px rgba(0,0,0,0.12);
    transition: all 0.25s ease;
    flex-shrink: 0;
}
.ultrakit-tmc-arrow:hover { background: var(--ultrakit-tmc-accent); color:#fff !important; }
.ultrakit-tmc-arrow-icon { width: 18px; height: 18px; display:block; pointer-events:none; flex-shrink: 0; }

.ultrakit-tmc-arrows-sides { flex-direction: row; align-items: center; gap: 10px; }
.ultrakit-tmc-arrows-sides .ultrakit-tmc-track-outer { flex: 1; min-width: 0; }
.ultrakit-tmc-nav { display:flex; align-items:center; gap:10px; }
.ultrakit-tmc-nav-bottom { justify-content: center; }

/* ---- Dots ---- */
.ultrakit-tmc-dots { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.ultrakit-tmc-dot { width:10px; height:10px; border-radius:50%; border:none; cursor:pointer; background:#cccccc; transition: all 0.3s ease; padding:0; }
.ultrakit-tmc-dot.is-active { background: var(--ultrakit-tmc-accent); transform: scale(1.3); }

@media (max-width: 768px) {
    .ultrakit-tmc-body { padding: 18px 16px; }
    .ultrakit-tmc-arrows-sides { flex-direction: column; gap: 10px; }
    .ultrakit-tmc-arrows-sides > .ultrakit-tmc-arrow { display: none; }
}