/* ==========================================================================
   Galeria — Section 4 (Figma node 6322:1893)
   Carrossel infinito: sempre 1 imagem central + 2 ao redor (esq/dir).
   Navegar troca o conteúdo dos 3 slots via JS (índice circular), não faz
   scroll — por isso nunca "acaba" nas pontas.
   Mobile-first — breakpoint em 1024px (Notebook)
   ========================================================================== */

.gallery {
  --slide-w: 301.8px;
  --slide-gap: 16px;
  --nav-size: 24px;
  --nav-gap: 4px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding-block: 80px;
  background-color: rgba(214, 211, 203, 0.8);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */

.gallery__eyebrow {
  margin: 0;
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: var(--line-height-default);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray-700);
}

/* --------------------------------------------------------------------------
   Carrossel
   -------------------------------------------------------------------------- */

.gallery__wrap {
  position: relative;
  width: var(--slide-w);
}

.gallery__track {
  display: flex;
  justify-content: center;
  gap: var(--slide-gap);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.gallery__track:active {
  cursor: grabbing;
}

.gallery__slide {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 auto;
  width: var(--slide-w);
  margin: 0;
}

.gallery__slide-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
}

.gallery__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 300ms ease;
  -webkit-user-drag: none;
}

.gallery__slide-btn:hover img,
.gallery__slide-btn:focus-visible img {
  transform: scale(1.05);
}

.gallery__caption {
  margin: 0;
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: 0.8;
  color: var(--gray-900);
}

/* --------------------------------------------------------------------------
   Setas
   -------------------------------------------------------------------------- */

.gallery__arrow {
  position: absolute;
  top: calc(var(--slide-w) * 9 / 16 / 2 - var(--nav-size) / 2);
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--nav-size);
  height: var(--nav-size);
  padding: 0;

  border: none;
  background-color: #ebebeb;

  cursor: pointer;
}

.gallery__arrow--prev {
  right: calc(100% + var(--nav-gap));
}

.gallery__arrow--next {
  left: calc(100% + var(--nav-gap));
}

.gallery__arrow img {
  width: calc(var(--nav-size) * 20 / 44);
  height: calc(var(--nav-size) * 20 / 44);
}

.gallery__arrow--prev img {
  transform: scaleX(-1);
}

/* ==========================================================================
   Notebook
   ========================================================================== */

@media (min-width: 1024px) {
  .gallery {
    --slide-w: 736px;
    --slide-gap: 32px;
    --nav-size: 44px;
    --nav-gap: 10px;
  }
}