/* ==========================================================================
   CARROSSEL DOS PALESTRANTES — home, dentro do palco (section.stage)

   Uma fileira só, que rola de lado com encaixe (o mesmo idioma da mini
   galeria de vídeos, .vg__list). Os cartões são os mesmos .ct-card--pal de
   palestrantes.html (css/coordenacao.css): foto alta, nome, cargo e o botão;
   o cartão inteiro abre o currículo no popup.

   Espiada: a largura do cartão sai de quantos cabem à vista (--car-n, com
   fração), então sempre sobra um pedaço do próximo na borda direita. A
   fileira começa alinhada à esquerda do .shell e vaza até a borda direita
   da tela (margem negativa + o mesmo tanto de padding: as colunas continuam
   medidas pela largura do .shell). O palco tem overflow: hidden, então o
   vazamento não cria rolagem lateral na página.
   ========================================================================== */

.car { position: relative; display: grid; gap: var(--s5); min-width: 0; }

.car__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

/* mesmo desenho do .ct-tag, na brasa dos palestrantes */
.car__k {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-variation-settings: "wdth" 92, "wght" 700;
  font-size: var(--fs-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ember);
}
.car__k::before { content: ""; width: 26px; height: 2px; background: currentColor; }

/* --- Setas: andam o tanto de cartões que cabe inteiro à vista -----------
   Flutuam sobre a fileira, na altura do meio da foto (--car-meio, medido
   pelo js/carrossel.js). Na partida só existe a de avançar, presa à borda
   direita, sobre a espiada do próximo cartão; a de voltar só aparece
   depois que a fileira andou, e a de avançar some no fim. Escondida =
   visibility: hidden, então também sai do Tab e do leitor de tela. */
.car__setas[hidden] { display: none; }

.car__seta {
  --car-tx: 50%;          /* metade do botão fica no respiro do .shell */
  position: absolute;
  top: var(--car-meio, 42%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--ember);
  color: var(--black);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 7px rgba(255, 138, 30, .16);
  opacity: 0;
  visibility: hidden;
  scale: .7;
  translate: var(--car-tx) -50%;
  transition:
    opacity .3s var(--ease),
    scale .5s var(--ease),
    visibility 0s linear .3s,
    background var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.car__seta.is-on {
  opacity: 1;
  visibility: visible;
  scale: 1;
  transition-delay: 0s;
}
.car__seta--pro { right: 0; }
.car__seta--ant { left: 0; --car-tx: -50%; }

.car__seta:hover {
  background: var(--white);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 10px rgba(255, 138, 30, .22);
}
.car__seta:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.car__seta:disabled { cursor: default; }

.car__seta svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: square;
  transition: transform var(--t-fast) var(--ease);
}
.car__seta--ant svg { transform: scaleX(-1); }
.car__seta--pro:hover svg { transform: translateX(3px); }
.car__seta--ant:hover svg { transform: scaleX(-1) translateX(3px); }

/* a de avançar dá um toque de vez em quando: "tem mais para o lado" */
.car__seta--pro.is-on svg { animation: car-cutuca 3.2s var(--ease) 1.2s infinite; }
.car__seta--pro:hover svg { animation: none; }
@keyframes car-cutuca {
  0%, 72%, 100% { transform: none; }
  80%           { transform: translateX(5px); }
  88%           { transform: translateX(-1px); }
}

/* --- A fileira ----------------------------------------------------------- */
.car__l {
  --car-n: 4.1;   /* cartões dentro do .shell; com o vazamento, ~4,3 à vista */
  --car-k: 4;     /* vãos entre eles: a parte inteira de --car-n */
  --car-gap: clamp(.75rem, 1.4vw, 1.25rem);

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--car-k) * var(--car-gap)) / var(--car-n));
  gap: var(--car-gap);
  margin-right: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.car__l::-webkit-scrollbar { display: none; }
.car__l > li { display: grid; min-width: 0; scroll-snap-align: start; }
.car__l img,
.car__l a { -webkit-user-drag: none; }
.car__l.is-arrasto { scroll-snap-type: none; cursor: grabbing; user-select: none; }

/* --- Tablet / celular ---------------------------------------------------- */
@media (max-width: 1279px) {
  .car__l { --car-n: 3.1; --car-k: 3; }
}
@media (max-width: 1023px) {
  .car__l { --car-n: 2.2; --car-k: 2; }
}
@media (max-width: 600px) {
  .car__l { --car-n: 1.15; --car-k: 1; }
  /* respiro estreito: a seta entra mais na fileira e fica menor */
  .car__seta { --car-tx: 28%; width: 50px; height: 50px; }
  .car__seta--ant { --car-tx: -28%; }
}

@media (prefers-reduced-motion: reduce) {
  .car__seta { transition: opacity .2s linear, visibility 0s linear .2s; scale: 1; }
  .car__seta.is-on { transition-delay: 0s; }
  .car__seta svg,
  .car__seta--pro.is-on svg { transition: none; animation: none; }
}