/* =========================================================
   Carrossel – Médico Encaminhador (ft-box-carrossel-v1)
   ========================================================= */

/* Transforma a coluna do card em Flexbox para garantir alinhamentos e fluxo uniforme */
.paragraph--type--ft-box-carrossel-v1>.paragraph__column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 164px;
  height: 200px;
  min-width: 164px !important;
  min-height: 200px !important;
  max-width: 164px !important;
  max-height: 200px !important;
  box-sizing: border-box;
  overflow: hidden;
  /* Evita que conteúdo maior empurre a caixa visualmente */
  /* Pode ajustar padding se necessário: padding: 15px; */
}

/* Container da Imagem: amarra a caixa no tamanho exato para que os cards nunca mudem de tamanho */
.paragraph--type--ft-box-carrossel-v1 .paragraph__column>div>.field-item {
  width: 148px;
  height: 148px;
  max-width: 100%;
  margin: 0 auto 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px;
  margin-top: 30px;
  border: 1px solid var(--Border-Light, #E5E5E5);
  padding: 5px;
  border-radius: var(--radius-md);
}

/* Imagens: se ajustam dentro da caixa de 148x148 */
.paragraph--type--ft-box-carrossel-v1 .field-item img,
.paragraph--type--ft-box-carrossel-v1 .image-field {
  width: 100%;
  height: 100%;
  max-width: 148px;
  max-height: 148px;
  object-fit: contain;
  object-position: center;
  margin: auto;
  display: block;
}

/* Títulos: dá um min-height para cards ficarem parelhos mesmo se um título tiver 2 linhas e outro 1 linha */
.paragraph--type--ft-box-carrossel-v1 .field--name-field-titulo-principal {
  font-size: 16px;
  font-weight: bold;
  /* Opcional, remova se já vier do tema */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  /* Ajuste isso caso precise de título com 3+ linhas */
  width: 100%;
}

.carousel-controls .slick-dots li:after {
  content: none !important;
  background: transparent !important;
}

.carousel-controls .slick-dots li.slick-active:after {
  content: none !important;
  background: transparent !important;
}

/* =========================================================
   Controles do Carrossel (Setas e Dots)
   ========================================================= */

/* Garante espaço no slider se os botões ficarem internos na caixa dele,
   ou zera se eles forem alinhados lateralmente */
.slick-slider {
  margin-bottom: 0px;
}

/* Centraliza os controles, mas em layout relativo para não
   estourar a ordem de leitura do HTML (Botão vs Controles) */
.carousel-controls {
  position: relative;
  /* Remover bottom/left/right absolute e alinhar com margin se ele vier antes do botão na DOM */
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* espaçamento nativo entre setas e dots */
  z-index: 10;
}