/* Container do Infinite Scroll: Garante que os containers do Drupal não limitem o espaço */
.view-anuncio-gratuito .views-infinite-scroll-content-wrapper,
.view-anuncio-gratuito .view-content {
  display: grid !important;
  gap: 20px !important;
  width: 100% !important;
  justify-content: center !important; /* Elimina espaços vazios nas laterais da tela */
  justify-items: center !important;  /* Centraliza os blocos individualmente */
  
  /* PADRÃO CELULAR (Abaixo de 600px): 1 Coluna */
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

/* Força qualquer div intermediária de AJAX do Drupal a não quebrar o layout */
.view-anuncio-gratuito .views-infinite-scroll-content-wrapper > div:not(.views-row),
.view-anuncio-gratuito .view-content > div:not(.views-row) {
  display: contents !important;
}

/* --- TRANSIÇÃO FLUIDA DE COLUNAS (4, 3, 2, 1) --- */

/* TABLETS (Telas médias): 2 Colunas */
@media (min-width: 640px) {
  .view-anuncio-gratuito .views-infinite-scroll-content-wrapper,
  .view-anuncio-gratuito .view-content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* LAPTOPS / MONITORES PEQUENOS: 3 Colunas */
@media (min-width: 980px) {
  .view-anuncio-gratuito .views-infinite-scroll-content-wrapper,
  .view-anuncio-gratuito .view-content {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* MONITORES GRANDES (Desktop): 4 Colunas */
@media (min-width: 1320px) {
  .view-anuncio-gratuito .views-infinite-scroll-content-wrapper,
  .view-anuncio-gratuito .view-content {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* --- ESTRUTURA DOS CARTÕES (Mantendo largura máxima intacta) --- */
.view-anuncio-gratuito .views-row {
  width: 100% !important;
  max-width: 330px !important; /* Mantido estritamente conforme solicitado */
  border: 1px solid #bbd1df !important;
  border-radius: 8px !important;
  padding: 10px !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
  float: none !important;

  /* Ativa o controle de ordem interna dos campos */
  display: flex !important;
  flex-direction: column !important;
}

/* Remove os pseudo-elementos do clearfix que quebram o alinhamento horizontal */
.view-anuncio-gratuito .view-content::before,
.view-anuncio-gratuito .view-content::after,
.view-anuncio-gratuito .views-infinite-scroll-content-wrapper::before,
.view-anuncio-gratuito .views-infinite-scroll-content-wrapper::after {
  display: none !important;
  content: none !important;
}

/* --- REORDENAÇÃO DOS CAMPOS INTERNOS DO CARD --- */
.view-anuncio-gratuito .views-field-field-imagem-do-anuncio-gratuito {
  order: 1 !important;
  margin-bottom: 0px;
}

.view-anuncio-gratuito .views-field-field-nome-completo-empresa {
  order: 2 !important;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0px;
}

.view-anuncio-gratuito .views-field-field-descricao-do-anuncio {
  order: 3 !important;
  margin-bottom: 0px;
}

.view-anuncio-gratuito .views-field-field-whatsapp-grat {
  order: 4 !important;
  margin-top: auto; /* Empurra o WhatsApp sempre para o rodapé */
}

/* Ajuste das imagens internas */
.view-anuncio-gratuito .views-row img {
  width: 100% !important;
  height: auto !important;
  max-width: 308px !important;
  border-radius: 4px;
}

/* Garante que o botão de paginação ocupe a largura total abaixo da grid */
.view-anuncio-gratuito .pager,
.view-anuncio-gratuito .js-pager__items,
.view-anuncio-gratuito .views-infinite-scroll-load-more {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}