/* Kit de peças · carrossel-preso.css
   Três modos (o JS põe data-modo na seção):
     sem JS / "reduzir movimento" (grade)  os itens em grade, parados
     faixa (celular)                        uma faixa com scroll-snap e as bolinhas
     presa (computador)                     a cena presa: um item de cada vez, o próximo espiando na borda
   Variáveis próprias: --carrossel-preso-contorno (o nome em contorno atrás), --carrossel-preso-bolinha,
   --carrossel-preso-bolinha-ativa. */

.carrossel-preso {
  --carrossel-preso-contorno: var(--cor-destaque);
  --carrossel-preso-bolinha: var(--cor-linha);
  --carrossel-preso-bolinha-ativa: var(--cor-destaque);
  --cp-n: 4;
  position: relative;
  overflow: clip;
}

.carrossel-preso__palco {
  width: min(100% - 2 * var(--gutter), var(--largura));
  margin-inline: auto;
  padding-block: var(--espaco-5);
}

.carrossel-preso__titulo { margin: 0 0 var(--espaco-3); font: 700 var(--fs-h2) / 1.05 var(--letra-titulo); }

/* ---------- Grade (sem JS e com "reduzir movimento") ---------- */

.carrossel-preso__faixa {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--espaco-4) var(--espaco-3);
}

.carrossel-preso__item {
  position: relative;
  display: grid;
  gap: var(--espaco-2);
  align-content: start;
}

.carrossel-preso__midia { margin: 0; }

.carrossel-preso__midia > img,
.carrossel-preso__midia > svg { display: block; width: 100%; height: auto; }

.carrossel-preso__texto { display: grid; gap: var(--espaco-1); justify-items: start; }

.carrossel-preso__texto > h3 { margin: 0; font: 700 var(--fs-h3) / 1.15 var(--letra-titulo); }

.carrossel-preso__texto > p { margin: 0; color: var(--cor-suave); }

.carrossel-preso__texto > .botao { margin-top: var(--espaco-1); }

.carrossel-preso__contorno,
.carrossel-preso__bolinhas { display: none; }

/* ---------- As bolinhas (faixa e presa) ---------- */

.carrossel-preso[data-modo="faixa"] .carrossel-preso__bolinhas,
.carrossel-preso[data-modo="presa"] .carrossel-preso__bolinhas {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: var(--espaco-2);
}

.carrossel-preso__bolinha {
  display: grid;
  place-items: center;
  width: var(--alvo);
  height: var(--alvo);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.carrossel-preso__bolinha::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--carrossel-preso-bolinha);
  transition: transform var(--dur-rapida) var(--ease), background-color var(--dur-rapida) var(--ease);
}

.carrossel-preso__bolinha.ativa::before { background: var(--carrossel-preso-bolinha-ativa); transform: scale(1.4); }

/* ---------- Faixa (celular) ---------- */

.carrossel-preso[data-modo="faixa"] .carrossel-preso__faixa {
  display: flex;
  gap: var(--espaco-2);
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.carrossel-preso[data-modo="faixa"] .carrossel-preso__faixa::-webkit-scrollbar { display: none; }

.carrossel-preso[data-modo="faixa"] .carrossel-preso__item {
  flex: 0 0 min(82%, 22rem);
  scroll-snap-align: center;
}

/* ---------- Presa (computador, com JS e movimento) ---------- */

@media (prefers-reduced-motion: no-preference) and (min-width: 64rem) and (min-height: 36rem) {
  .js .carrossel-preso { height: calc(var(--cp-n) * 70svh + 30svh - var(--altura-cabecalho)); }

  .js .carrossel-preso__palco {
    position: sticky;
    top: var(--altura-cabecalho);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: calc(100svh - var(--altura-cabecalho));
    padding-block: var(--espaco-4) var(--espaco-2);
  }

  .js .carrossel-preso__titulo { grid-row: 1; }

  .js .carrossel-preso__bolinhas { grid-row: 3; }

  .js .carrossel-preso__faixa { grid-row: 2; display: grid; grid-template: "item" minmax(0, 1fr) / 1fr; gap: 0; min-height: 0; }

  .js .carrossel-preso__item {
    grid-area: item;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: var(--espaco-5);
    min-height: 0;
    isolation: isolate;
    pointer-events: none;
  }

  .js .carrossel-preso__texto { grid-area: 1 / 1; pointer-events: auto; will-change: transform, opacity; }

  .js .carrossel-preso__midia { grid-area: 1 / 2; height: 100%; min-height: 0; will-change: transform, opacity; transform-origin: 50% 60%; }

  /* antes do primeiro quadro do JS, só o primeiro item aparece */
  .js .carrossel-preso__item:not(:first-child) > .carrossel-preso__texto,
  .js .carrossel-preso__item:not(:first-child) > .carrossel-preso__midia { opacity: 0; }

  .js .carrossel-preso__midia > img,
  .js .carrossel-preso__midia > svg { width: 100%; height: 100%; object-fit: contain; }

  .js .carrossel-preso__contorno {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    margin: 0;
    font: 800 clamp(6rem, 13vw, 12rem) / 1 var(--letra-titulo);
    color: transparent;
    -webkit-text-stroke: 2px var(--carrossel-preso-contorno);
    white-space: nowrap;
    translate: -50% -50%;
    opacity: 0;
    pointer-events: none;
  }
}