/* ==========================================================================
   DOBRA UNIDADE — Layout: mapa+info à esq | foto à dir (altura total)
   Estrutura: .view-hm2-lp-unidade > .view-content > .views-row
   ========================================================================== */

/* 1. Remove card do bloco de views */
body:not(.path-admin) .view-hm2-lp-unidade {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* 2. Cada card: grid 2 colunas — mapa/info à esq, foto à dir */
body:not(.path-admin) .view-hm2-lp-unidade .views-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "titulo   foto"
    "mapa     foto"
    "endereco foto"
    "telefone foto"
    "horario  foto"
    "email    foto" !important;
  column-gap: 48px !important;
  background: var(--hm2-on-surface-card-bg, #ffffff) !important;
  border: 1px solid var(--hm2-on-surface-card-border, #e5e7eb) !important;
  border-radius: var(--hm2-border-radius-card, 0px) !important;
  padding: 40px !important;
  margin-bottom: 32px !important;
  overflow: hidden !important;
}

body:not(.path-admin) .view-hm2-lp-unidade .views-row:last-child {
  margin-bottom: 0 !important;
}

/* 3. Título: acima do mapa, bold, com separador abaixo */
body:not(.path-admin) .view-hm2-lp-unidade .views-field-title {
  grid-area: titulo !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--hm2-on-surface-divider, #e5e7eb) !important;
}

/* 4. Mapa: abaixo do título, antes dos campos de info */
body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-mapa-url {
  grid-area: mapa !important;
  margin-bottom: 24px !important;
}

body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-mapa-url iframe {
  width: 100% !important;
  height: 260px !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block !important;
}

body:not(.path-admin) .view-hm2-lp-unidade .views-field-title h3 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--hm2-on-surface-title, #111827) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* 5. Campos de info (endereço, telefone, horário, email) */
body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-endereco {
  grid-area: endereco !important;
  margin-bottom: 10px !important;
}

body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-telefone {
  grid-area: telefone !important;
  margin-bottom: 10px !important;
}

body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-horario {
  grid-area: horario !important;
  margin-bottom: 10px !important;
}

body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-email {
  grid-area: email !important;
  margin-bottom: 0 !important;
}

/* 6. Ícones e estilo dos campos de info */
body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-endereco .field-content,
body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-telefone .field-content,
body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-horario .field-content,
body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-email .field-content {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.95rem !important;
  color: var(--hm2-on-surface-muted, #4b5563) !important;
  line-height: 1.4 !important;
}

body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-email .field-content a {
  color: var(--hm2-on-surface-muted, #4b5563) !important;
  text-decoration: none !important;
}

body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-email .field-content a:hover {
  color: var(--hm2-on-surface-accent, #b8874a) !important;
  text-decoration: underline !important;
}

body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-endereco .field-content::before {
  content: '\1F4CD' !important; /* 📍 */
  font-size: 1rem !important;
  flex-shrink: 0 !important;
}

body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-telefone .field-content::before {
  content: '\1F4DE' !important; /* 📞 */
  font-size: 1rem !important;
  flex-shrink: 0 !important;
}

body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-horario .field-content::before {
  content: '\1F552' !important; /* 🕒 */
  font-size: 1rem !important;
  flex-shrink: 0 !important;
}

body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-email .field-content::before {
  content: '\2709' !important; /* ✉ */
  font-size: 1rem !important;
  flex-shrink: 0 !important;
}

/* 7. Foto: coluna direita, altura total do card (ocupa todas as linhas) */
body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-foto {
  grid-area: foto !important;
  align-self: stretch !important;
  margin: -40px -40px -40px 0 !important;
}

body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-foto .field-content {
  height: 100% !important;
}

body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-foto img {
  width: 100% !important;
  height: 100% !important;
  min-height: 400px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
}

/* 8. Responsivo: coluna única, foto acima */
@media (max-width: 767px) {
  body:not(.path-admin) .view-hm2-lp-unidade .views-row {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "foto"
      "titulo"
      "mapa"
      "endereco"
      "telefone"
      "horario"
      "email" !important;
    padding: 24px !important;
  }

  body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-foto {
    margin: -24px -24px 24px -24px !important;
  }

  body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-foto img {
    min-height: 220px !important;
    border-radius: 0 !important;
  }

  body:not(.path-admin) .view-hm2-lp-unidade .views-field-field-unidade-mapa-url iframe {
    height: 200px !important;
  }
}