/* ---------- Carrossel de fotos ----------
   Usado na home (fotos do projeto) e em /congresso (fotos da 1ª edição).

   A imagem ocupa o card inteiro. Sem setas e sem legenda: o texto alternativo
   continua descrevendo cada foto para leitor de tela, mas na tela quem fala é
   a imagem. Uma barra fina embaixo mostra a posição na série. */
/* Altura por padding percentual, e não por aspect-ratio: os slides são
   absolutos, e numa caixa sem conteúdo em fluxo o WebKit do iPhone resolve
   o aspect-ratio como zero — mesmo respondendo que suporta, o que deixa
   @supports sem efeito. 66.66% = 2/3. */
.proj-carousel {
  position: relative;
  padding-top: 66.66%;
  overflow: hidden;
  border-radius: 26px 26px 44px 26px;
  background: var(--home-ink-deep, #202a63);
}

.proj-carousel__track {
  position: absolute;
  inset: 0;
}

.proj-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 700ms var(--home-ease, cubic-bezier(.22, .61, .36, 1)), transform 5.6s ease-out;
}

.proj-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* A barra marca a posição na série — 1/5, 2/5... — e não o tempo que a foto
   fica na tela. Um segmento por foto, e cada segmento é clicável: dá para ir
   adiante ou voltar sem colocar setas por cima da imagem. */
.proj-barra {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  height: 3px;
  background: rgba(255, 253, 247, .26);
}

.proj-barra__preenche {
  position: absolute;
  inset: 0;
  background: var(--home-white, #fffdf7);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--home-ease, cubic-bezier(.22, .61, .36, 1));
}

.proj-barra__passo {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

/* separa os segmentos: mostra de quantas fotos é a série */
.proj-barra__passo + .proj-barra__passo {
  border-left: 1px solid rgba(24, 32, 78, .5);
}

/* o alvo de toque sobe além da linha: 3px de altura não se acerta com o dedo,
   e o recomendado é não descer de ~40px */
.proj-barra__passo::before {
  content: "";
  position: absolute;
  inset: -30px 0 -8px;
}

.proj-barra__passo:focus-visible {
  outline: 2px solid var(--home-white, #fffdf7);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .proj-slide { transition: opacity 200ms linear; transform: none; }
  /* a barra continua: ela informa posição, não é enfeite em movimento */
  .proj-barra__preenche { transition: none; }
}

/* Na home o carrossel mora dentro de um card que tem padding próprio em
   alguns breakpoints; sem preencher tudo, esse padding virava moldura azul
   em volta da foto. */
.home-data--architecture .proj-carousel {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: inherit;
}

/* ---------------------------------------------------------
   Setas de condução manual
   Ficam quase invisíveis até o ponteiro chegar ao carrossel: a foto é o
   conteúdo, o controle é serviço. No toque não existe hover, então elas
   mantêm uma opacidade baixa permanente — sem isso ninguém descobriria
   que dá para avançar (o gesto de arrastar também funciona, mas gesto
   invisível não se anuncia).
   --------------------------------------------------------- */
.proj-seta {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: #fffdf7;
  background: rgba(20, 24, 56, 0.34);
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 220ms ease, background 220ms ease;
}

.proj-seta--anterior { left: 12px; }
.proj-seta--proxima { right: 12px; }

.proj-seta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.proj-carousel:hover .proj-seta,
.proj-carousel:focus-within .proj-seta { opacity: 0.55; }

.proj-seta:hover { opacity: 1 !important; background: rgba(20, 24, 56, 0.6); }
.proj-seta:focus-visible { opacity: 1; outline: 2px solid #fffdf7; outline-offset: 2px; }

/* sem ponteiro (celular e tablet), o hover nunca acontece */
@media (hover: none) {
  .proj-seta { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .proj-seta { transition: none; }
}