/* ============================================================
   carouseltpc.css — carrossel GENÉRICO (ISOLADO, .tp-carousel / .tpc__*).
   Figma MibwuMaMzxkZhiu9YJjPjz: inicial 40000138:23911 · paginando 40000252:2123 ·
   último 40000252:2138 · cabe-na-tela 40000168:289 · poucos 40000327:6304 ·
   mobile 40000138:24015 · tablet 40000138:24000 · Slider 471:23 + 474:23.
   Tokens da host. Reuso é SÓ de CSS (tokens + idioma do wipe do .tp-btn__accent,
   replicado aqui como .tpc__arrow-accent) — o JS é 100% auto-contido.

   API por CSS var:
     --tpc-margin  margem do 1º/último card: 40px desktop → 20px ≤1024
     --tpc-gap     espaço entre cards (24px, frames)
     --tpc-x       translateX do track (o JS escreve)
     --tpc-progress largura do fill do Slider (o JS escreve; 40%→100%)
   Estados por classe (o JS escreve): .is-static (tudo cabe → centra, nav some) ·
   .is-dragging (swipe: transition off) · .is-pressed na seta (feedback do toque).
   ============================================================ */
.tp-carousel {
    --tpc-margin: 40px;
    --tpc-gap: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    /*cursor: grab;*/
}

.tpc__viewport {
    width: 100%;
    overflow: clip;
    touch-action: pan-y;
}

.tpc__track {
    display: flex;
    align-items: flex-start;
    gap: var(--tpc-gap);
    width: max-content;
    transform: translateX(var(--tpc-x, var(--tpc-margin)));
    transition: transform 600ms var(--ease);
    will-change: transform;
}

.tp-carousel.is-dragging .tpc__track {
    transition: none;
    cursor: grabbing;
}

.tpc__slide {
    /*display: flex;*/
    flex: none;
    min-width: 0;
}

    .tpc__slide img,
    .tpc__slide a {
        -webkit-user-drag: none;
    }

    .tpc__slide img {
        user-select: none;
    }

.tp-carousel.is-dragging {
    -webkit-user-select: none;
    user-select: none;
}

    .tp-carousel.is-dragging .tpc__slide {
        pointer-events: none;
    }

    .tp-carousel.is-dragging {
        cursor: grabbing;
    }

.tp-carousel.is-static .tpc__track {
    width: 100%;
    justify-content: center;
    padding-inline: var(--tpc-margin);
    transform: none;
}

.tp-carousel.is-static .tpc__nav {
    display: none;
}

.tp-carousel.is-static .tpc__slide[data-tpc-clone] {
    display: none;
}

.tpc__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 50%;
}

.tpc__arrow {
    position: relative;
    flex: none;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: var(--tpc-arrow-bg, var(--bg-default));
    color: var(--title-primary-strong);
    -webkit-backdrop-filter: blur(7.5px);
    backdrop-filter: blur(7.5px);
    overflow: hidden;
    isolation: isolate;
    transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.tpc__arrow-accent {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--bg-primary-strong);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-base) var(--ease);
}

.tpc__arrow-icon {
    position: relative;
    z-index: 2;
    width: 24px;
    height: 24px;
}

    .tpc__arrow-icon svg {
        position: absolute;
        left: 4px;
        top: 4px;
        width: 16.7151px;
        height: 16px;
        display: block;
    }

.tpc__arrow--prev .tpc__arrow-icon {
    transform: rotate(180deg);
}

.tpc__arrow:hover:not(:disabled) .tpc__arrow-accent,
.tpc__arrow:focus-visible:not(:disabled) .tpc__arrow-accent,
.tpc__arrow.is-pressed:not(:disabled) .tpc__arrow-accent {
    transform: scaleX(1);
}

.tpc__arrow:hover:not(:disabled),
.tpc__arrow:focus-visible:not(:disabled),
.tpc__arrow.is-pressed:not(:disabled) {
    color: var(--title-inverse);
}

.tpc__arrow:disabled {
    cursor: default;
    background: var(--bg-neutral-subtle);
    color: var(--border-neutral-subtle);
}

.tp-carousel[data-tpc-nav-bg="subtle"] .tpc__arrow:not(:disabled) {
    background: var(--bg-neutral-subtle);
}

.tpc__progress {
    display: none;
}

.tp-carousel[data-tpc-progress] .tpc__nav {
    gap: 24px;
    padding-inline: var(--tpc-margin);
}

.tp-carousel[data-tpc-progress] .tpc__progress {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: 4px;
}

    .tp-carousel[data-tpc-progress] .tpc__progress::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 1px;
        transform: translateY(-50%);
        background: var(--bg-neutral-strong);
    }

.tp-carousel[data-tpc-progress] .tpc__progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 4px;
    width: var(--tpc-progress, 40%);
    background: var(--bg-primary-strong);
    transition: width 600ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    .tpc__track,
    .tpc__arrow,
    .tpc__arrow-accent,
    .tp-carousel[data-tpc-progress] .tpc__progress-fill {
        transition: none;
    }
}

@media (max-width: 1024px) {
    .tp-carousel {
        --tpc-margin: 20px;
    }

    .tpc__nav {
        width: 100%;
    }

    .tp-carousel[data-tpc-progress] .tpc__progress {
        display: none;
    }
}