/* ---------------------------------
   Estilos base para a timeline padrão
---------------------------------- */

.acf-timeline-container {
  position: relative;
  margin: 30px 0;
  padding-left: 30px; 
  border-left: 2px solid #ddd; /* Linha vertical da timeline */
}

.acf-timeline-item {
  position: relative;
  margin-bottom: 30px;
}

.acf-timeline-dot {
  position: absolute;
  left: -9px; 
  top: 0;
  width: 18px;
  height: 18px;
  background: #0073aa;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #0073aa33;
}

.acf-timeline-content {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 4px;
}

/* Quando tiver galerias ou imagens múltiplas */
.acf-timeline-gallery,
.acf-timeline-image-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.acf-timeline-gallery-item,
.acf-timeline-image-item {
  width: calc(33.33% - 10px);
  min-width: 100px;
}

.acf-timeline-gallery-item img,
.acf-timeline-image-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------
   Estilos para a timeline "single column"
   - sem margin, sem gap, sem espaçamento.
---------------------------------- */

.acf-timeline-container.single-col {
  margin: 0;
  padding: 0;
  border: none; /* Se quiser remover a linha vertical */
}

.acf-timeline-container.single-col .acf-timeline-item {
  margin: 0;
  padding: 0;
  /* Se quiser remover o "dot", pode esconder */
}

.acf-timeline-container.single-col .acf-timeline-dot {
  display: none;
}

.acf-timeline-container.single-col .acf-timeline-content {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.acf-timeline-container.single-col .acf-timeline-image-wrapper,
.acf-timeline-container.single-col .acf-timeline-gallery {
  gap: 0;
  margin-top: 0;
  flex-wrap: nowrap; /* As imagens vão ficar em sequência vertical */
  flex-direction: column;
}

.acf-timeline-container.single-col .acf-timeline-image-item,
.acf-timeline-container.single-col .acf-timeline-gallery-item {
  width: 100%; /* Uma coluna */
  min-width: auto;
  margin: 0;
  padding: 0;
}