/* =====================================================================
   PÁGINA DA OFERTA (/imovel/:slug/oferta/:id)
   Carregado DEPOIS de styles.css (block head). Reaproveita a galeria,
   o formulário e o preço do layer (.deal-modal-*); características,
   descrição e card do empreendimento usam componentes próprios
   (.deal-page-*) com um único tamanho de ícone.
   ===================================================================== */

/* ---------- layer -> página normal ---------- */
.deal-page .deal-modal {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  overflow: visible;
  background: transparent;
}
.deal-page .deal-modal-dialog { min-height: 0; margin: 0 auto; padding-top: 20px; }
.deal-page .deal-modal-close { display: none; }
.deal-page .deal-modal-back { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.deal-page .deal-modal-header-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.deal-page .deal-modal-header-breadcrumb a { color: inherit; text-decoration: none; }
.deal-page .deal-modal-header-breadcrumb a:hover { text-decoration: underline; }
.deal-page .deal-modal-map-card { text-decoration: none; color: inherit; }
/* card de contato alinhado ao topo da foto (no layer tinha margin-top: 40px) */
.deal-page .deal-modal-contact-card { margin-top: 0; border-radius: 10px; }

/* status do formulário */
.deal-page-form-status { margin: 4px 0 8px; font-size: .85rem; }
.deal-page-form-status.is-ok { color: #15803d; }
.deal-page-form-status.is-error { color: #b91c1c; }

/* ---------- seções ---------- */
.deal-page-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #eef0f2;
}
.deal-page-h2 {
  margin: 0 0 18px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #111827;
}

/* ---------- grade de características (único componente de ícone) ---------- */
.deal-page-spec-grid {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px 24px;
}
.deal-page-spec { display: flex; align-items: center; gap: 12px; min-width: 0; }
.deal-page-spec-ico {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  background: var(--brand-soft, #f7fdf6);
  border: 1px solid var(--brand-ring, rgba(0,0,0,.06));
  color: var(--brand, #38cc29);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
}
.deal-page-spec-txt { min-width: 0; }
.deal-page-spec dt {
  margin: 0;
  font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  line-height: 1.25;
}
.deal-page-spec dd {
  margin: 2px 0 0;
  font-size: .98rem; font-weight: 600; color: #111827; line-height: 1.3;
  overflow-wrap: anywhere;
}

/* selos */
.deal-page-tags {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.deal-page-tags li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: #f3f4f6; color: #374151;
  font-size: .85rem; font-weight: 500;
}
.deal-page-tags i { color: var(--brand, #38cc29); font-size: .85rem; }

/* descrição */
.deal-page-desc { font-size: .98rem; line-height: 1.7; color: #374151; max-width: 860px; }

/* ---------- card "Sobre o empreendimento" ---------- */
.deal-page-project-card {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.deal-page-project-media { position: relative; display: block; min-height: 220px; background: #f3f4f6; }
.deal-page-project-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.deal-page-project-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.deal-page-project-name { margin: 0; font-size: 1.25rem; font-weight: 700; }
.deal-page-project-name a { color: #111827; text-decoration: none; }
.deal-page-project-addr { margin: -8px 0 0; color: #4b5563; font-size: .92rem; display: flex; gap: 6px; align-items: center; }
.deal-page-project-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.deal-page-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: #f3f4f6; color: #374151; font-size: .8rem; font-weight: 600;
}
.deal-page-spec-grid--compact { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 20px; }
.deal-page-project-cta {
  align-self: flex-start;
  margin-top: 2px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px;
  background: var(--brand, #38cc29); color: #fff; font-weight: 700; text-decoration: none;
}
.deal-page-project-cta:hover { filter: brightness(.95); color: #fff; }

/* ---------- celular ---------- */
@media (max-width: 768px) {
  /* o layer "explode" o layout e ordena os blocos; as seções novas
     precisam entrar nessa ordem: foto, preço, características,
     descrição, contato, empreendimento */
  .deal-page .deal-modal-header { order: 0; }
  .deal-page .deal-modal-gallery { order: 1; }
  .deal-page .deal-modal-summary { order: 2; }
  .deal-page .deal-page-section { order: 3; }
  .deal-page .deal-modal-aside { order: 4; margin-top: 24px; }
  .deal-page .deal-page-project { order: 5; }

  .deal-page-spec-grid { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .deal-page-spec-ico { width: 38px; height: 38px; flex-basis: 38px; font-size: .9rem; }
  .deal-page-project-card { grid-template-columns: 1fr; }
  .deal-page-project-media { min-height: 0; height: 180px; }
  .deal-page-project-body { padding: 16px; }
  .deal-page-project-cta { align-self: stretch; justify-content: center; }
}