/* =========================================================================
   Etéra Work — Section 4: /galeria — áreas comuns
   Figma: node 6322:724 (artboards 1366 e 360)
   ========================================================================= */

.galeria {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  padding-block: 80px;
  background-color: var(--gray-100);

  /* Os slides vizinhos vazam do container e são cortados pela borda da
     seção, que acompanha a largura da viewport. */
  overflow-x: hidden;

  /* Proporções do carrossel — mobile equivale ao artboard de 360px */
  --slide-w: 83.45vw;
  --slide-gap: 3.63vw;
  --nav-size: 24px;
  --nav-gap: 4px;
}

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

.galeria__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  color: var(--gray-700);
  text-align: center;
  text-transform: uppercase;
}

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

.galeria__carousel {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

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

.galeria__track {
  display: flex;
  gap: var(--slide-gap);
  align-items: center;
  list-style: none;
  transform: translateX(calc(-1 * var(--galeria-index, 0) * (var(--slide-w) + var(--slide-gap))));
}

.galeria__slide {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  flex-shrink: 0;
  width: var(--slide-w);
}

.galeria__caption {
  width: 100%;
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: 0.8;
  letter-spacing: var(--letter-spacing-sm);
  color: var(--gray-700);
}

/* -------------------------------------------------------------------------
   Setas
   Alinhadas verticalmente ao centro da imagem, não do slide inteiro.
   ------------------------------------------------------------------------- */

.galeria__nav {
  position: absolute;

  /* Centradas na altura da imagem (414/736 do slide), não do slide inteiro,
     que ainda soma a legenda. */
  top: calc(var(--slide-w) * 414 / 736 / 2 - var(--nav-size) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-size);
  height: var(--nav-size);
  background-color: #ebebeb;
  border: var(--border-width-md) solid var(--gray-100);
  border-radius: var(--border-radius-none);
  transition: opacity 200ms ease;
}

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

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

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

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

/* =========================================================================
   LG — Notebook (min-width: 1366px)
   ========================================================================= */

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

/* =========================================================================
   XL — Desktop (min-width: 1920px)
   Sem artboard no Figma: mantém a proporção do slide sobre o container de
   1440px (736/1120 = 65,71%).
   ========================================================================= */

@media (min-width: 1920px) {
  .galeria {
    --slide-w: 946px;
    --slide-gap: 41px;
  }
}