/* carrossel.css: a faixa de cards inclinados do topo — cards, setas e pontos.
   Autossuficiente: usa os tokens do projeto se existirem (--cor-*, --tempo-*, --espaco-*)
   e cai nos valores próprios abaixo se não existirem. carrossel.js só troca classes e o
   transform do trilho. */

.carrossel {
    /* ---- medidas próprias do componente ---- */
    --carrossel-card-largura: 250px;
    --carrossel-card-altura: 30vh;
    --carrossel-card-altura-minima: 230px;
    --carrossel-card-altura-maxima: 420px;
    --carrossel-card-altura-celular: 60vh;
    --carrossel-inclinacao: 5deg;

    /* ---- ponte pros tokens do projeto, com valor próprio de reserva ---- */
    --carrossel-cor-fundo: var(--cor-fundo, #ffffff);
    --carrossel-cor-barra: var(--cor-barra, #333333);
    --carrossel-cor-ponto: var(--cor-ponto, #8f8f8f);
    --carrossel-cor-clara: var(--cor-sobre-escuro, #ffffff);
    --carrossel-cor-foco: var(--cor-marca, #2aa9e0);
    --carrossel-cor-texto-suave: var(--cor-tinta-suave, #4b5760);
    --carrossel-cor-dica: rgba(20, 20, 20, 0.94);
    --carrossel-sombra-de-texto: var(--sombra-de-texto, 0 2px 6px rgba(0, 0, 0, 0.75));
    --carrossel-sombra: var(--sombra, 0 8px 22px rgba(0, 0, 0, 0.34));
    --carrossel-raio: var(--raio, 10px);
    --carrossel-espaco-2: var(--espaco-2, 8px);
    --carrossel-espaco-3: var(--espaco-3, 16px);
    --carrossel-espaco-4: var(--espaco-4, 32px);
    --carrossel-tempo-curto: var(--tempo-curto, 0.16s);
    --carrossel-tempo-medio: var(--tempo-medio, 0.25s);
    --carrossel-tempo-longo: var(--tempo-longo, 0.5s);

    width: 100%;
    box-sizing: border-box;
}

.carrossel *,
.carrossel *::before,
.carrossel *::after {
    box-sizing: border-box;
}

/* Foco visível em tudo que recebe Tab, mesmo em projeto sem regra global. */
.carrossel :focus-visible {
    outline: 3px solid var(--carrossel-cor-foco);
    outline-offset: 2px;
}

/* ---- a janela e o trilho ---- */

.carrossel-janela {
    position: relative;
    overflow: hidden;
    background: var(--carrossel-cor-fundo);
    user-select: none;
    touch-action: pan-y;
}

.carrossel-janela.arrastando {
    cursor: grabbing;
}

.carrossel-trilho {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    will-change: transform;
}

/* ---- o card ---- */

.carrossel-card {
    position: relative;
    flex: 0 0 auto;
    width: var(--carrossel-card-largura);
    height: var(--carrossel-card-altura);
    min-height: var(--carrossel-card-altura-minima);
    max-height: var(--carrossel-card-altura-maxima);
    margin-left: -4px;
    overflow: hidden;
    transform: skew(calc(-1 * var(--carrossel-inclinacao)));
    border-left: 7px solid var(--carrossel-cor-fundo);
    box-shadow: -5px 0 7px rgba(0, 0, 0, 0.3);
}

/* A capa desinclina o que o card inclinou, pra foto não sair torta. */
.carrossel-capa {
    width: 140%;
    height: 100%;
    margin-left: -60px;
    transform: skew(var(--carrossel-inclinacao));
}

.carrossel-imagem {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
    transition: object-position var(--carrossel-tempo-longo) ease;
}

.carrossel-card:hover .carrossel-imagem,
.carrossel-card.tocado .carrossel-imagem {
    object-position: center bottom;
}

.carrossel-nome,
.carrossel-link {
    position: absolute;
    left: 10px;
    bottom: 4px;
    transform: skew(var(--carrossel-inclinacao));
    font-size: 1rem;
    font-weight: 700;
    color: var(--carrossel-cor-clara);
    text-shadow: var(--carrossel-sombra-de-texto);
    transition: opacity var(--carrossel-tempo-medio) ease, transform var(--carrossel-tempo-medio) ease;
}

.carrossel-nome {
    z-index: 1;
    pointer-events: none;
}

.carrossel-link {
    z-index: 2;
    opacity: 0;
    transform: skew(var(--carrossel-inclinacao)) translateY(6px);
    text-decoration: none;
}

/* Só o card COM link troca o nome pelo link: sem link, o nome fica. */
.carrossel-card.com-link:hover .carrossel-nome,
.carrossel-card.com-link.tocado .carrossel-nome,
.carrossel-card.com-link:focus-within .carrossel-nome {
    opacity: 0;
    transform: skew(var(--carrossel-inclinacao)) translateY(-6px);
}

.carrossel-card.com-link:hover .carrossel-link,
.carrossel-card.com-link.tocado .carrossel-link,
.carrossel-card.com-link:focus-within .carrossel-link {
    opacity: 1;
    transform: skew(var(--carrossel-inclinacao));
}

/* ---- a barra de controles ---- */

.carrossel-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 var(--carrossel-espaco-3);
    background: var(--carrossel-cor-barra);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.carrossel-linha {
    display: grid;
    grid-template-columns: 24px auto 24px;
    align-items: center;
    column-gap: var(--carrossel-espaco-2);
    line-height: 0;
}

/* Alvo de 24px (WCAG 2.5.8); o desenho da seta é menor e fica no ::before/::after. */
.carrossel-seta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.carrossel-seta:hover {
    transform: scale(1.12);
}

.carrossel-seta::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.carrossel-seta.esquerda::before {
    border-right: 8px solid var(--carrossel-cor-clara);
}

.carrossel-seta.direita::before {
    border-left: 8px solid var(--carrossel-cor-clara);
}

.carrossel-seta.pausa::before,
.carrossel-seta.pausa::after {
    content: "";
    width: 2px;
    height: 9px;
    border: 0;
    background: var(--carrossel-cor-clara);
}

.carrossel-pontos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 0;
}

/* O botão tem 24px; a bolinha de 9px é o ::before. */
.carrossel-ponto {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.carrossel-ponto::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--carrossel-cor-ponto);
    transform: translate(-50%, -50%);
    transition: background-color var(--carrossel-tempo-medio) ease, box-shadow var(--carrossel-tempo-medio) ease;
}

.carrossel-ponto:hover::before,
.carrossel-ponto:focus-visible::before,
.carrossel-ponto.ativo::before {
    background: var(--carrossel-cor-clara);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.carrossel-ponto:hover,
.carrossel-ponto:focus-visible {
    z-index: 80;
}

/* A dica abre à direita do ponto no hover e no foco (teclado também). */
.carrossel-dica {
    position: absolute;
    top: -30px;
    left: calc(100% + 22px);
    z-index: 100;
    width: 210px;
    min-height: 126px;
    padding: 22px 24px 18px;
    border-radius: var(--carrossel-raio);
    background: var(--carrossel-cor-dica);
    color: var(--carrossel-cor-clara);
    font-family: inherit;
    text-align: left;
    line-height: normal;
    box-shadow: var(--carrossel-sombra);
    opacity: 0;
    transform: translateX(4px);
    pointer-events: none;
    transition: opacity var(--carrossel-tempo-curto) ease, transform var(--carrossel-tempo-curto) ease;
}

.carrossel-dica strong {
    display: block;
    margin-bottom: 18px;
    font-size: 1.25rem;
    line-height: 1.15;
    font-weight: 800;
}

.carrossel-dica span {
    display: block;
    font-size: 0.95rem;
    line-height: 1.38;
    font-weight: 500;
}

.carrossel-ponto::after {
    content: "";
    position: absolute;
    top: -3px;
    left: calc(100% + 1px);
    z-index: 21;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 22px solid var(--carrossel-cor-dica);
    opacity: 0;
    transform: translateX(4px);
    pointer-events: none;
    transition: opacity var(--carrossel-tempo-curto) ease, transform var(--carrossel-tempo-curto) ease;
}

.carrossel-ponto:hover .carrossel-dica,
.carrossel-ponto:focus-visible .carrossel-dica,
.carrossel-ponto:hover::after,
.carrossel-ponto:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
}

/* ---- estados da lista ---- */

/* Sem item: a faixa e a barra somem, fica a mensagem. */
.carrossel--vazio .carrossel-janela,
.carrossel--vazio .carrossel-controles {
    display: none;
}

.carrossel-vazio {
    margin: 0;
    padding: var(--carrossel-espaco-4) var(--carrossel-espaco-3);
    text-align: center;
    color: var(--carrossel-cor-texto-suave);
}

/* Menos de 3 itens: fila parada e centralizada, sem loop nem barra. */
.carrossel--parado .carrossel-trilho {
    width: 100%;
    justify-content: center;
}

.carrossel--parado .carrossel-controles {
    display: none;
}

/* ---- movimento reduzido ----
   Duração ~0, nunca "none": com none o que revela por opacidade some pra sempre. */
@media (prefers-reduced-motion: reduce) {
    .carrossel {
        --carrossel-tempo-curto: 0.01ms;
        --carrossel-tempo-medio: 0.01ms;
        --carrossel-tempo-longo: 0.01ms;
    }
}

/* ---- celular ----
   Card cresce e a barra some: tela estreita não cabe os pontos e a dica depende de
   hover. Sobra o arraste com inércia e o toque que revela o link.
   Este bloco vem DEPOIS da regra base do card de propósito: mesma especificidade,
   a ordem no arquivo decide. */
@media (max-width: 768px) {
    .carrossel-card {
        height: var(--carrossel-card-altura-celular);
        min-height: 0;
        max-height: none;
    }

    .carrossel-controles {
        display: none;
    }
}