/* ==========================================================
   GALERIA EM FILA — Slider customizado para fotos do Volupe
   Controles ficam NO RODAPÉ (fora das imagens)
   ========================================================== */

/* ===== Área visível do slider ===== */
.gallery-viewport {
  overflow: hidden;        /* esconde o que transborda do trilho */
  border-radius: .75rem;   /* cantos arredondados do contêiner */
  /* sem position:absolute porque os controles ficam fora */
}

/* ===== Trilho (rail) onde as imagens deslizam ===== */
.gallery-rail {
  display: flex;           /* itens lado a lado (fila) */
  gap: .75rem;             /* espaço entre cada card/foto */
  will-change: transform;  /* otimiza a animação de translateX */
}

/* ===== Cada item da galeria ===== */
.gallery-item {            /* 2 por linha no mobile */
  flex: 0 0 50%;
}
@media (min-width: 768px) { /* 4 por linha no desktop */
  .gallery-item { flex: 0 0 25%; }
}

/* ===== Imagem ===== */
.gallery-item img {
  display: block;          /* remove “linha fantasma” */
  width: 100%;
  height: auto;
  user-select: none;       /* impede seleção acidental */
  pointer-events: none;    /* evita cliques arrastarem a imagem */
  border-radius: .5rem;    /* cantos arredondados da foto */
}

/* ===== Legenda ===== */
.gallery-caption {
  margin: .45rem 0 .2rem;  /* dá respiro da foto e afasta dos controles */
  font-size: .8rem;
  color: #bbb;
  text-align: center;
  line-height: 1.2;
}

/* ==========================================================
   CONTROLES NO RODAPÉ (setas + bolinhas)
   ========================================================== */
.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;              /* espaço entre setas e bloco de bolinhas */
  margin-top: 1rem;        /* distância dos cards/legendas */
}

/* ===== Setas (à esquerda e à direita das bolinhas) ===== */
.gallery-arrow {
  background: #1c1c1c;
  color: #fff;
  border: 1px solid #333;
  border-radius: 999px;    /* pílula arredondada */
  padding: .35rem .7rem;   /* área clicável confortável */
  font-size: 1.1rem;       /* tamanho do símbolo “‹ ›” */
  line-height: 1;
  cursor: pointer;
  transition: background .2s, transform .1s;
}
.gallery-arrow:hover  { background: #2a2a2a; }
.gallery-arrow:active { transform: scale(.96); }

/* ===== Bolinhas (indicadores) ===== */
.gallery-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;             /* distância entre bolinhas */
  min-width: 6rem;         /* evita “pulo” quando muda a ativa */
}
.gallery-dots button {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.35); /* estado inativo */
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.gallery-dots button.active {
  background: #fff;        /* ativa em branco */
  transform: scale(1.15);  /* leve ênfase */
}

/* ==========================================================
   Responsividade dos controles
   ========================================================== */
@media (max-width: 575.98px){
  .gallery-controls { gap: .6rem; margin-top: .85rem; }
  .gallery-arrow    { padding: .3rem .6rem; font-size: 1rem; }
  .gallery-dots button { width: .6rem; height: .6rem; }
}
@media (min-width: 992px){
  .gallery-arrow    { padding: .4rem .8rem; font-size: 1.2rem; }
  .gallery-dots button { width: .7rem; height: .7rem; }
}