/* ============================================================
   client-stories.css — estilos ISOLADOS do componente (namespace .client-stories / .cs-*).
   Figma 3.Delivery: desktop 5623:10244 · tablet 5727:19377 · mobile 5727:16176.
   Usa os design tokens da host (tokens.css). Reusa a host: .tag.
   Breakpoints do projeto: 1024 / 768 (desktop-first).
   ============================================================ */
.client-stories {
    /*background: var(--bg-default);*/
}

    .client-stories .client-stories__inner {
        /*max-width: var(--page-width);*/ /* 1440 — cap do conteúdo, centrado */
        margin-inline: auto;
        /*padding: 80px 40px;*/ /* py 80 · px 40 (gutter do frame) */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacer-arrow);
    }

/* ---------- 1. Depoimento ---------- */
    .client-stories .cs-quote {
        margin: 0;
        width: 100%;
        max-width: 960px; /* desktop: 960 centrado · tablet/mobile: full (960 não constrange) */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .client-stories .cs-quote__body {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .client-stories .cs-quote__mark {
        display: block;
        width: 72px;
        height: 48px;
    }

    .client-stories .cs-quote__mark-svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .client-stories .cs-quote__mark--close {
        align-self: flex-end; /* aspas de fechamento à direita (frame: items-end) */
        transform: rotate(180deg);
    }

    .client-stories .cs-quote__text {
        margin: 0;
        width: 100%;
        font-family: var(--font-sans);
        font-weight: var(--fw-extralight); /* 275 */
        color: var(--body-default);
    }

    .client-stories .cs-quote__author {
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .client-stories .cs-quote__name {
        font-family: var(--font-sans);
        font-weight: var(--fw-medium); /* 500 */
        /*text-transform: uppercase;*/
        color: var(--title-default);
    }

    .client-stories .cs-quote__role {
        margin-top: 3px; /* frame: name mt-0 · role mt-27 (lh 24 → +3) */
        font-family: var(--font-sans);
        font-weight: var(--fw-light); /* 300 */
        color: var(--title-neutral);
    }

/* ---------- 2. Navegação ---------- */
.client-stories .cs-nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
    /* só um quote: o client-stories.js seta [hidden] — precisa vencer o display:flex acima
   (o UA [hidden]{display:none} perderia p/ .cs-nav) */
    .client-stories .cs-nav[hidden] {
        display: none;
    }

    .client-stories .cs-nav__btn {
        width: 64px;
        height: 64px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 0;
        cursor: pointer;
    }

    .client-stories .cs-nav__arrow {
        display: block;
        width: 33px;
        height: 33px;
    }

    .client-stories .cs-nav__btn--prev {
        background: var(--bg-neutral-medium);
        color: var(--title-neutral); /* seta cinza (Icon/neutral #8b9eb3) */
    }

        .client-stories .cs-nav__btn--prev .cs-nav__arrow {
            transform: scaleX(-1); /* aponta p/ a esquerda */
        }

    .client-stories .cs-nav__btn--next {
        background: var(--bg-primary-strong);
        color: var(--icon-inverse); /* seta branca */
    }

/* ============================================================
   <768 (mobile) — px 20, heading 40/40
   ============================================================ */
@media (max-width: 767px) {
    .client-stories .client-stories__inner {
        padding-inline: 20px;
    }

    .client-stories .cs-quote__mark {
        width: 48px;
        height: 32px;
    }
}