/* =========================================================
   Bizmantra - Customer Stories (video testimonials)
   assets/css/customer-stories.css?v=1
   - Follows the header's light / dark tokens (--bm-*).
   - Desktop: 4 cards in a row. Tablet: 3 per view. Phone: swipe
     carousel with the next card peeking in. Arrows appear only
     when the cards do not all fit.
   ========================================================= */
.bmcs {
    --cs-bg: #FFFFFF;
    --cs-gap: 18px;
    --cs-pad: 20px;
    --cs-sub: #4F5D7A;

    position: relative; overflow: hidden; isolation: isolate;
    padding-block: clamp(48px, 7vw, 96px);
    background: var(--cs-bg);
    color: var(--bm-text);
    font-family: var(--bm-font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
}
:root[data-theme="dark"] .bmcs { --cs-bg: #0F1730; --cs-sub: #B4C1E0; }
.bmcs::before {                       /* soft brand wash at the top */
    content: ""; position: absolute; z-index: -1; left: 50%; top: -220px; width: min(900px, 120%); height: 440px; transform: translateX(-50%);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--bm-blue) 16%, transparent), transparent);
    pointer-events: none;
}

:where(.bmcs) *, :where(.bmcs) *::before, :where(.bmcs) *::after { box-sizing: border-box; }
:where(.bmcs) ul { list-style: none; margin: 0; padding: 0; }
:where(.bmcs) h2, :where(.bmcs) p, :where(.bmcs) figure { margin: 0; }
:where(.bmcs) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.bmcs) svg { display: block; flex: none; }
.bmcs :focus-visible { outline: 2px solid var(--bm-blue-d); outline-offset: 3px; border-radius: 10px; }

.bmcs__container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--cs-pad); }

/* ---------------- HEADING ---------------- */
.bmcs__head { max-width: 720px; margin-inline: auto; text-align: center; }
.bmcs__badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--bm-blue) 40%, transparent); background: color-mix(in srgb, var(--bm-blue) 10%, transparent);
    font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bm-blue-d);
}
.bmcs__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bm-blue); }
.bmcs__title { margin-top: 16px; font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; line-height: 1.14; letter-spacing: -.03em; color: var(--bm-head); text-wrap: balance; }
.bmcs__lead { margin: 14px auto 0; max-width: 60ch; font-size: clamp(14.5px, 1.3vw, 16px); line-height: 1.7; color: var(--cs-sub); }

/* ---------------- CAROUSEL TRACK ---------------- */
.bmcs__viewport { margin-top: clamp(28px, 4vw, 48px); }
.bmcs__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--cs-gap);
    margin-inline: calc(var(--cs-pad) * -1); padding: 8px var(--cs-pad) 8px; scroll-padding-inline: var(--cs-pad);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.bmcs__track::-webkit-scrollbar { display: none; }
.bmcs__track:focus { outline: none; }
.bmcs__slide { scroll-snap-align: start; min-width: 0; }

/* ---------------- CARD ---------------- */
.bmcs__card {
    position: relative; isolation: isolate; overflow: hidden; width: 100%; aspect-ratio: 9 / 15.5; border-radius: 22px;
    background: linear-gradient(160deg, #2D4DA3, #17306B 60%, #0F2152); color: #fff;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.bmcs__initials {                      /* shows only if poster / video are missing */
    position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; font-size: clamp(56px, 9vw, 84px); font-weight: 800; letter-spacing: -.04em; color: rgba(255,255,255,.18);
}
.bmcs__video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: transparent; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.bmcs__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(8,14,36,.45) 0%, transparent 28%, transparent 42%, rgba(8,14,36,.92) 100%); }

.bmcs__toggle { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; }
.bmcs__playic {
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4); color: #fff;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s;
}
.bmcs__playic svg { width: 22px; height: 22px; margin-left: 3px; }
.bmcs__card.is-paused .bmcs__playic { opacity: 1; transform: none; }

.bmcs__tag {
    position: absolute; z-index: 4; left: 12px; top: 12px; padding: 5px 11px; border-radius: 999px; pointer-events: none;
    background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.28); font-size: 11px; font-weight: 700; letter-spacing: .01em;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.bmcs__mute {
    position: absolute; z-index: 5; right: 12px; top: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.28); color: #fff;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, transform .2s;
}
.bmcs__mute:hover { background: rgba(255,255,255,.34); transform: scale(1.06); }
.bmcs__mute svg { width: 17px; height: 17px; }
.bmcs__mute .bmcs__vol-on { display: none; }
.bmcs__mute[aria-pressed="false"] .bmcs__vol-on { display: block; }
.bmcs__mute[aria-pressed="false"] .bmcs__vol-off { display: none; }
.bmcs__mute[aria-pressed="false"] { background: var(--bm-green); border-color: transparent; color: #17306B; }

.bmcs__info { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 18px 16px 18px; pointer-events: none; }
.bmcs__quote { font-size: 13px; font-weight: 500; line-height: 1.5; color: rgba(255,255,255,.92); }
.bmcs__rule { display: block; width: 32px; height: 3px; margin: 12px 0 10px; border-radius: 3px; background: linear-gradient(90deg, var(--bm-blue), var(--bm-green)); }
.bmcs__name { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.bmcs__role { margin-top: 3px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: #9DBBFF; }

@media (hover: hover) {
    .bmcs__card:hover { transform: translateY(-6px); }
    .bmcs__card:hover .bmcs__video { transform: scale(1.04); }
    .bmcs__card.is-paused:hover .bmcs__playic { transform: scale(1.08); }
}

/* ---------------- ARROWS ---------------- */
.bmcs__nav { display: flex; justify-content: center; gap: 12px; margin-top: 4px; }
.bmcs__nav[hidden] { display: none; }
.bmcs__arrow {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--bm-line); background: var(--bm-bg); color: var(--bm-head);
    box-shadow: 0 10px 20px -14px rgba(31,53,115,.6); transition: background .2s, border-color .2s, opacity .2s, transform .2s;
}
.bmcs__arrow svg { width: 19px; height: 19px; }
.bmcs__arrow--prev svg { transform: rotate(180deg); }
.bmcs__arrow:hover:not(:disabled) { border-color: var(--bm-blue); background: var(--bm-mist); transform: translateY(-1px); }
.bmcs__arrow:disabled { opacity: .35; cursor: default; }

/* ---------------- RESPONSIVE ---------------- */
@media (min-width: 480px) { .bmcs__track { grid-auto-columns: calc((100% - var(--cs-gap)) / 2.15); } }
@media (min-width: 768px) { .bmcs__track { grid-auto-columns: calc((100% - 2 * var(--cs-gap)) / 3); } }
@media (min-width: 1024px) {
    .bmcs__track { grid-auto-columns: calc((100% - 3 * var(--cs-gap)) / 4); --cs-gap: 20px; }
    .bmcs__quote { font-size: 13.5px; }
    .bmcs__name { font-size: 17px; }
}
@media (max-width: 599px) { .bmcs { --cs-pad: 16px; --cs-gap: 14px; } }
@media (max-width: 359px) { .bmcs__track { grid-auto-columns: 86%; } }
@media (max-height: 480px) and (orientation: landscape) { .bmcs__card { aspect-ratio: 9 / 13; } }

@media (prefers-reduced-motion: reduce) {
    .bmcs__card, .bmcs__video, .bmcs__mute, .bmcs__playic, .bmcs__arrow { transition: none !important; }
    .bmcs__track { scroll-behavior: auto; }
}

.bmcs__mute[hidden], .bmcs__toggle[disabled] .bmcs__playic { display: none; }

/* phones: swipe only, no arrows */
@media (max-width: 767px) { .bmcs__nav { display: none !important; } }