/* --- Container Principal (Grade Unificada de Duas Colunas) --- */
div.proprietario-info-css .view-content div.solo-clear.views-row {
  display: grid !important;
  /* Coluna 1 fixa para o logo | Coluna 2 ocupa o resto para as informações */
  grid-template-columns: 200px 1fr !important; 
  align-items: stretch !important; /* Obriga o logo a esticar até a altura total exata do bloco de textos */
  gap: 0px 15px !important; /* Zera completamente o espaçamento vertical interno entre as linhas */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  text-align: left !important;
}

/* Remove quebras de float antigas do Drupal para não interferir no Grid */
div.proprietario-info-css .view-content div.solo-clear.views-row::after {
  display: none !important;
}

/* --- Coluna da Esquerda: Logotipo Esticado na Altura Máxima --- */
div.proprietario-info-css .views-field-field-logotipo {
  grid-column: 1 !important; /* Fixa na primeira coluna */
  grid-row: 1 / span 6 !important; /* Cobre verticalmente todas as linhas existentes */
  margin: 0 !important;
  padding: 0 !important;
  width: 200px !important; /* Largura definida mantendo o padrão */
  display: flex !important;
}

div.proprietario-info-css .views-field-field-logotipo .field-content {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

div.proprietario-info-css .views-field-field-logotipo img {
  width: 100% !important;
  height: 100% !important; /* Força o elemento img a preencher o bloco esticado de ponta a ponta */
  object-fit: fill !important; /* Escala e estica a imagem sem realizar cortes, priorizando a altura total */
  border-radius: 4px !important;
}

/* --- Coluna da Direita: Textos Empilhados Sem Margem --- */
div.proprietario-info-css .views-field:not(.views-field-field-logotipo) {
  grid-column: 2 !important; /* Força o alinhamento na segunda coluna */
  display: flex !important;
  flex-direction: row !important; /* Mantém Rótulo e Conteúdo na mesma linha horizontal */
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: 0 !important; /* Zerado para colar as linhas umas nas outras verticalmente */
  padding: 0 !important;
  font-size: 16px !important;
  color: #333 !important;
  line-height: 1.2 !important; /* Controla a altura da linha de forma compacta */
}

/* --- Alinhamento Interno (Rótulo + Conteúdo) --- */
div.proprietario-info-css .views-label {
  font-weight: bold !important;
  color: #444 !important;
  display: inline-block !important;
  margin-right: 4px !important;
  flex-shrink: 0 !important;
}

div.proprietario-info-css .field-content {
  display: inline-block !important;
}






/* --- Configuração Específica do WhatsApp (Do 1 ao 5) --- */
div.proprietario-info-css .views-field-field-whatsapp-proprietario .field-content a,
div.proprietario-info-css .views-field-field-whatsapp-2 .field-content a,
div.proprietario-info-css .views-field-field-whatsapp-3 .field-content a,
div.proprietario-info-css .views-field-field-whatsapp-4 .field-content a,
div.proprietario-info-css .views-field-field-whatsapp-5 .field-content a {
  color: #25D366 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Injeta o logotipo em todos os 5 links usando o seu formato original */
div.proprietario-info-css .views-field-field-whatsapp-proprietario .field-content a::before,
div.proprietario-info-css .views-field-field-whatsapp-2 .field-content a::before,
div.proprietario-info-css .views-field-field-whatsapp-3 .field-content a::before,
div.proprietario-info-css .views-field-field-whatsapp-4 .field-content a::before,
div.proprietario-info-css .views-field-field-whatsapp-5 .field-content a::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 5px !important;
  background: url("https://n1cavalos.com/sites/default/files/2026-07/whatsapp-logo.png") no-repeat center;
  background-size: contain !important;
  flex-shrink: 0 !important;
}

/* Efeito Hover ao passar o mouse (Mantendo a sua cor antiga) */
div.proprietario-info-css .views-field-field-whatsapp-proprietario .field-content a:hover,
div.proprietario-info-css .views-field-field-whatsapp-2 .field-content a:hover,
div.proprietario-info-css .views-field-field-whatsapp-3 .field-content a:hover,
div.proprietario-info-css .views-field-field-whatsapp-4 .field-content a:hover,
div.proprietario-info-css .views-field-field-whatsapp-5 .field-content a:hover {
  color: #128C7E !important;
  text-decoration: underline !important;
}

/* --- Hack de Alinhamento de 65px para os Whatsapps secundários deste bloco --- */
div.proprietario-info-css .field-content.whatsapp-secundario {
  display: block !important;
  clear: both !important;
  width: 100% !important;
  padding-left: 70px !important; /* A sua medida perfeita de 65px */
  margin-top: 5px !important;
  box-sizing: border-box !important;
}

/* Oculta os ícones de link externo do Drupal Views para não quebrar o layout */
div.proprietario-info-css [class*="views-field-field-whatsapp"] svg,
div.proprietario-info-css [class*="views-field-field-whatsapp"] .extlink {
  display: none !important;
}





/* --- Limpeza do Drupal --- */
div.proprietario-info-css .field-content svg,
div.proprietario-info-css .field-content .extlink {
  display: none !important;
  visibility: hidden !important;
}


/* ==========================================================================
   SEÇÃO PROPRIETÁRIOS (BLOCK 2): ESPAÇAMENTO E PADRÃO CELULAR (1 COLUNA)
   ========================================================================== */
#block-solo-views-block-proprietarios-block-2 {
  margin-top: 10px !important; /* Espaço de 10px do conteúdo acima */
}

/* Força 1 coluna por padrão no celular direto no container da view */
#block-solo-views-block-proprietarios-block-2 .view-content {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 15px !important;
  width: 100% !important;
  justify-items: center !important;
}

/* Remove os elementos invisíveis do clearfix que quebram o grid */
#block-solo-views-block-proprietarios-block-2 .view-content::before,
#block-solo-views-block-proprietarios-block-2 .view-content::after {
  display: none !important;
}

/* CAIXA EM VOLTA (Estilo Facebook / Anúncios Gratuitos) */
#block-solo-views-block-proprietarios-block-2 .views-row {
  border: 1px solid #bbd1df !important; /* Borda azul clara */
  border-radius: 8px !important; /* Cantos arredondados */
  padding: 15px !important; /* Espaço interno */
  background-color: #ffffff !important; /* Fundo branco */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; /* Sombra leve */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
  margin: 0 auto !important;
}

/* Ajustes dos textos e títulos internos */
#block-solo-views-block-proprietarios-block-2 .views-field {
  margin-bottom: 6px;
  width: 100% !important;
}

#block-solo-views-block-proprietarios-block-2 .views-field-title a {
  font-weight: bold !important;
  text-decoration: none !important;
  color: #333333 !important;
}

/* Destaca o valor da parcela em azul no rodapé do cartão */
#block-solo-views-block-proprietarios-block-2 .views-field-field-vaolr-da-parcela {
  font-weight: bold !important;
  color: #0B3C5D !important;
  margin-top: auto;
}

/* Imagens totalmente responsivas e centralizadas */
#block-solo-views-block-proprietarios-block-2 .views-row img {
  display: block !important;
  margin: 0 auto 10px auto !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 4px !important;
}

/* ==========================================================================
   TRANSIÇÃO FLUIDA DE COLUNAS (6 → 4 → 3 → 2 → 1)
   ========================================================================== */

/* CELULARES GRANDES / SMARTPHONES HORIZONTAIS (Mínimo de 576px): 2 colunas */
@media screen and (min-width: 576px) {
  #block-solo-views-block-proprietarios-block-2 .view-content {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* TABLETS (Mínimo de 768px): 3 colunas */
@media screen and (min-width: 768px) {
  #block-solo-views-block-proprietarios-block-2 .view-content {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* LAPTOPS / MONITORES PEQUENOS (Mínimo de 1024px): 4 colunas */
@media screen and (min-width: 1024px) {
  #block-solo-views-block-proprietarios-block-2 .view-content {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* COMPUTADORES E MONITORES GRANDES (Mínimo de 1400px): 6 colunas */
@media screen and (min-width: 1400px) {
  #block-solo-views-block-proprietarios-block-2 .view-content {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}