/*
 * Página do corretor — skin Belmont (Stitch), SPEC 233 (canvas 1a + 4a + 3b/3c).
 * As páginas Stitch não carregam styles.css; o que não sai das classes Tailwind
 * do markup vem daqui. Tokens = tailwind.config das páginas Belmont:
 *   primary #bb0019 · secondary #510003 · on-surface #1b1c1c
 *   on-surface-variant #59413e · outline-variant #e1bfbb
 *   surface-container-low #f5f3f2 · radius lg .25rem / xl .5rem
 */

/* ---------- faixa de perfil ---------- */
.corretor-perfil {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: start;
}
.corretor-retrato {
  width: 132px;
  height: 132px;
  border-radius: .5rem;
  object-fit: cover;
  object-position: center 30%;
  background: #eae8e7;
}
/* Sem foto (16 dos 17 do cadastro): iniciais no vermelho escuro da marca.
   Gerado aqui — nada de avatar de serviço externo com o nome do corretor. */
.corretor-monograma {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #510003, #7a0007);
  color: #fff;
  font: 800 46px/1 "Plus Jakarta Sans", sans-serif;
  letter-spacing: -.02em;
  user-select: none;
}
.corretor-identidade {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
  padding-top: .25rem;
}
.corretor-identidade h1 { margin: 0; line-height: 1.05; text-wrap: balance; }
.corretor-linha {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  align-items: center;
}
.corretor-creci {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  font: 600 .875rem/1.2 "Plus Jakarta Sans", sans-serif;
  color: #59413e;
}
.corretor-creci .material-symbols-outlined { font-size: 1.15rem; color: #bb0019; }
.corretor-qtd { font-size: 1rem; color: #59413e; }

/* 4a: apresentação embaixo do nome */
.corretor-apresentacao { max-width: 62ch; margin-top: .35rem; }
.corretor-apresentacao p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #59413e;
  overflow-wrap: anywhere;
}
.corretor-ler-mais {
  margin-top: .35rem;
  padding: 0;
  border: 0;
  background: none;
  font: 600 .875rem/1.4 "Plus Jakarta Sans", sans-serif;
  color: #bb0019;
  cursor: pointer;
}
.corretor-ler-mais:hover { text-decoration: underline; }

/* contatos */
.corretor-contatos {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  align-items: stretch;
  min-width: 15rem;
}
.corretor-contatos-sec { display: flex; gap: .625rem; }
.corretor-contatos-sec > * { flex: 1 1 auto; justify-content: center; }
.corretor-btn-whats {
  display: inline-flex;
  gap: .625rem;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.25rem;
  border-radius: .375rem;
  background: linear-gradient(to bottom, #bb0019, #9c0015);
  color: #fff;
  font: 600 .875rem/1.2 "Plus Jakarta Sans", sans-serif;
  white-space: nowrap;
  box-shadow: 0 10px 22px -10px rgba(187, 0, 25, .55);
  transition: opacity .2s;
}
.corretor-btn-whats:hover { opacity: .9; }
.corretor-btn-ghost {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  padding: .8rem 1.1rem;
  border-radius: .375rem;
  background: #fff;
  color: #bb0019;
  font: 600 .875rem/1.2 "Plus Jakarta Sans", sans-serif;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(225, 191, 187, .7);
  transition: box-shadow .2s, background-color .2s;
}
.corretor-btn-ghost:hover { box-shadow: inset 0 0 0 1px #bb0019; }
.corretor-btn-ghost .material-symbols-outlined { font-size: 1.15rem; }
.corretor-fone-curto { display: none; }
.corretor-btn-whats:focus-visible,
.corretor-btn-ghost:focus-visible,
.corretor-ler-mais:focus-visible { outline: 2px solid #bb0019; outline-offset: 2px; }

/* ---------- listagem ---------- */
.corretor-sem-resultado { padding: 2.5rem 0; color: #59413e; }
/* 3b: poucos imóveis */
.corretor-outros {
  margin-top: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.75rem;
  border-radius: .5rem;
  background: #f5f3f2;
}
.corretor-outros p { margin: .25rem 0 0; }
/* 3c: nenhum imóvel */
.corretor-vazio {
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 2rem;
  border-radius: .5rem;
  background: #f5f3f2;
}
.corretor-vazio h2, .corretor-vazio p { margin: 0; }
.corretor-vazio .corretor-btn-ghost { margin-top: .5rem; }

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .corretor-perfil { grid-template-columns: auto minmax(0, 1fr); }
  .corretor-contatos { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .corretor-contatos > .corretor-btn-whats { flex: 1 1 16rem; }
  .corretor-contatos-sec { flex: 1 1 16rem; }
}

/* ---------- celular ---------- */
@media (max-width: 767px) {
  .corretor-perfil { gap: .35rem 1rem; }
  .corretor-retrato { width: 76px; height: 76px; grid-row: span 2; }
  .corretor-monograma { font-size: 28px; }
  /* Nome, CRECI e apresentação viram células da grade do perfil: nome e CRECI
     ao lado do retrato, apresentação na largura toda, abaixo dele. */
  .corretor-identidade { display: contents; }
  .corretor-identidade h1 { grid-column: 2; align-self: end; }
  .corretor-linha { grid-column: 2; align-self: start; }
  .corretor-creci { font-size: .8rem; }
  .corretor-qtd { font-size: .875rem; }
  .corretor-apresentacao { grid-column: 1 / -1; margin-top: .65rem; }
  .corretor-contatos { margin-top: .65rem; }
  .corretor-apresentacao.corretor-apresentacao-curta p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .corretor-contatos { flex-direction: column; }
  .corretor-contatos > .corretor-btn-whats, .corretor-contatos-sec { flex: none; }
  .corretor-fone-num { display: none; }
  .corretor-fone-curto { display: inline; }
}