/* === MAIN WRAPPER === */
.mts-slider-wrapper {
    max-width: 960px;
    margin: 64px auto;
    padding: 0 24px;
    position: relative;
}

/* subtle fade on left/right edges */
.mts-slider-wrapper::before,
.mts-slider-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 2;
}

.mts-slider-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}

.mts-slider-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}

/* === HORIZONTAL TRACK === */
.mts-slider {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    padding: 8px 4px 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* hide ugly scrollbars */
.mts-slider::-webkit-scrollbar {
    height: 6px;
}
.mts-slider::-webkit-scrollbar-track {
    background: transparent;
}
.mts-slider::-webkit-scrollbar-thumb {
    background: #cbd5f5;
    border-radius: 999px;
}
.mts-slider {
    scrollbar-width: thin;
    scrollbar-color: #cbd5f5 transparent;
}

/* === CARD / SLIDE === */
.mts-slide {
    flex: 0 0 85%;                /* show 1 card + hint of the next one */
    max-width: 640px;
    margin-inline: auto;
    scroll-snap-align: center;

    background: radial-gradient(circle at top left, #111827 0%, #020617 60%);
    border-radius: 24px;
    padding: 40px 40px 32px;
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.55),
        0 0 0 1px rgba(148, 163, 184, 0.2);

    text-align: center;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.mts-slide:hover {
    transform: translateY(-6px);
    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.75),
        0 0 0 1px rgba(148, 163, 184, 0.45);
    background: radial-gradient(circle at top left, #0f172a 0%, #020617 70%);
}

/* === AVATAR === */
.mts-photo img {
    width: 82px;
    height: 82px;
    border-radius: 999px;
    object-fit: cover;
    margin-bottom: 18px;
    border: 3px solid rgba(248, 250, 252, 0.9);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.65);
}

/* === NAME === */
.mts-name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #f9fafb;
    margin-bottom: 6px;
}

/* optional subtitle (if exists) */
.mts-title,
.mts-role {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9ca3af;
    margin-bottom: 14px;
}

/* === QUOTE TEXT === */
.mts-quote {
    font-size: 15px;
    line-height: 1.7;
    color: #e5e7eb;
    max-width: 520px;
    margin: 0 auto;
    position: relative;
}

.mts-quote::before,
.mts-quote::after {
    content: "“";
    position: absolute;
    font-size: 40px;
    color: rgba(148, 163, 184, 0.3);
    top: -26px;
    left: -6px;
}
.mts-quote::after {
    content: "”";
    bottom: -38px;
    right: -4px;
}

/* === HIDE BROKEN PLUGIN CONTROLS === */
@media (max-width: 700px) {
    .mts-slider-wrapper {
        padding: 0 12px;
        margin: 32px auto;
    }

    /* remove side fade on mobile so it doesn't eat space */
    .mts-slider-wrapper::before,
    .mts-slider-wrapper::after {
        display: none;
    }

    .mts-slider {
        padding: 0 0 16px;   /* no side padding */
        gap: 20px;
    }

    .mts-slide {
        flex: 0 0 100%;      /* full width */
        max-width: 100%;
        margin-inline: 0;    /* no horizontal auto margin */
        border-radius: 18px;
        padding: 24px 18px 20px;
    }

    .mts-quote::before,
    .mts-quote::after {
        display: none;       /* keep text clean on small screens */
    }
}