/* Psicólogos credenciados — grade de cartões e janela no estilo da clínica */
.jm-psi {
  --jm-psi-cor: #00a19a;
  --jm-psi-texto: #1f2d2b;
  --jm-psi-suave: #6b7a78;
  --jm-psi-fundo-foto: #e6f4f3;
  margin: 0 0 48px;
}
.jm-psi.jm-psi--hospedeiro { margin: 0; }

/* Página com a lista: menos espaço acima do quadro de conteúdo (o tema usa 100px) */
.page-content:has(.jm-psi[data-jm-psi]) { padding-top: 40px; }

.jm-psi button { font: inherit; letter-spacing: normal; text-transform: none; line-height: 1.3; }

/* Barra de busca: só aparece com JS (sem JS ela não funcionaria) */
.jm-psi .jm-psi__barra { display: none; gap: 12px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
.jm-psi.jm-psi--js .jm-psi__barra { display: flex; }
.jm-psi .jm-psi__busca {
  flex: 1 1 280px; min-height: 46px; padding: 8px 14px; margin: 0;
  border: 1px solid #cfd6d5; border-radius: 8px; background: #fff; font-size: 15px; color: var(--jm-psi-texto);
}
.jm-psi .jm-psi__busca:focus { border-color: var(--jm-psi-cor); outline: 2px solid rgba(0, 161, 154, .25); }
.jm-psi .jm-psi__cidades { display: flex; gap: 8px; flex-wrap: wrap; }
.jm-psi .jm-psi__cidade {
  min-height: 38px; padding: 6px 16px; border: 1px solid var(--jm-psi-cor); border-radius: 999px;
  background: #fff; color: var(--jm-psi-cor); font-size: 13px; cursor: pointer;
}
.jm-psi .jm-psi__cidade[aria-pressed="true"] { background: var(--jm-psi-cor); color: #fff; }
.jm-psi .jm-psi__cidade:focus-visible { outline: 3px solid var(--jm-psi-cor); outline-offset: 2px; }

.jm-psi .jm-psi__contador { color: var(--jm-psi-suave); font-size: 13px; margin: 0 0 14px; }

/* Grade */
.jm-psi .jm-psi__grade {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .jm-psi .jm-psi__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jm-psi .jm-psi__item { margin: 0; padding: 0; }
.jm-psi .jm-psi__item::before { content: none; }
.jm-psi .jm-psi__item[hidden] { display: none; }

.jm-psi .jm-psi__cartao {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 20px 12px 18px; margin: 0; border: 1px solid #d3dcdb; border-radius: 12px; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .10); color: var(--jm-psi-texto); text-align: center; cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.jm-psi .jm-psi__cartao:hover { border-color: var(--jm-psi-cor); box-shadow: 0 6px 18px rgba(0, 0, 0, .14); transform: translateY(-2px); background: #fff; }
.jm-psi .jm-psi__cartao:focus-visible { outline: 3px solid var(--jm-psi-cor); outline-offset: 2px; }

.jm-psi .jm-psi__midia {
  display: block; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border: 3px solid var(--jm-psi-fundo-foto); background: var(--jm-psi-fundo-foto); margin: 0 0 10px;
}
.jm-psi .jm-psi__midia img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jm-psi .jm-psi__iniciais {
  display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
  color: var(--jm-psi-cor); font-weight: 600; font-size: 32px;
}
.jm-psi .jm-psi__nome { font-weight: 600; font-size: 15px; color: var(--jm-psi-texto); }
.jm-psi .jm-psi__crp { font-size: 12px; color: var(--jm-psi-suave); }
.jm-psi .jm-psi__cidade-nome { font-size: 12px; color: var(--jm-psi-cor); }

/* Estado vazio */
.jm-psi .jm-psi__vazio { text-align: center; padding: 32px 0; color: var(--jm-psi-suave); }
.jm-psi .jm-psi__vazio[hidden] { display: none; }
.jm-psi .jm-psi__limpar {
  margin-top: 6px; padding: 8px 18px; border: 1px solid var(--jm-psi-cor); border-radius: 8px;
  background: #fff; color: var(--jm-psi-cor); cursor: pointer;
}

/* Janela */
html.jm-psi-aberto, html.jm-psi-aberto body { overflow: hidden; }
.jm-psi .jm-psi__modal {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(20, 30, 29, .6);
}
.jm-psi .jm-psi__modal[hidden] { display: none; }
.jm-psi .jm-psi__modal-caixa {
  position: relative; width: 100%; max-width: 760px; max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 40px 64px 32px; border-radius: 14px; background: #fff; text-align: center; outline: none;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.jm-psi .jm-psi__modal-caixa .jm-psi__midia { width: 200px; height: 200px; margin: 0 auto 16px; }
.jm-psi .jm-psi__modal-caixa .jm-psi__iniciais { font-size: 56px; }
.jm-psi .jm-psi__modal-nome { margin: 0 0 4px; font-size: 22px; font-weight: 600; color: #3f5450; }
.jm-psi .jm-psi__modal-meta { margin: 0 0 18px; font-size: 14px; color: var(--jm-psi-suave); }
.jm-psi .jm-psi__modal-curriculo { margin: 0 0 22px; text-align: justify; font-size: 15px; line-height: 1.65; color: #333; }
.jm-psi .jm-psi__telefone {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px;
  background: var(--jm-psi-cor); color: #fff; font-weight: 600; text-decoration: none;
}
.jm-psi .jm-psi__telefone:hover, .jm-psi .jm-psi__telefone:focus { color: #fff; background: #008a84; }
.jm-psi .jm-psi__fechar,
.jm-psi .jm-psi__anterior,
.jm-psi .jm-psi__proximo {
  position: absolute; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: #e9eceb; color: #555; cursor: pointer;
}
.jm-psi .jm-psi__fechar { top: 12px; right: 12px; width: 36px; height: 36px; font-size: 22px; }
.jm-psi .jm-psi__anterior,
.jm-psi .jm-psi__proximo { top: 120px; width: 42px; height: 42px; font-size: 26px; }
.jm-psi .jm-psi__anterior { left: 12px; }
.jm-psi .jm-psi__proximo { right: 12px; }
.jm-psi .jm-psi__anterior[hidden], .jm-psi .jm-psi__proximo[hidden] { display: none; }
.jm-psi .jm-psi__fechar:hover, .jm-psi .jm-psi__anterior:hover, .jm-psi .jm-psi__proximo:hover { background: #d7dddc; }
.jm-psi .jm-psi__fechar:focus-visible, .jm-psi .jm-psi__anterior:focus-visible, .jm-psi .jm-psi__proximo:focus-visible { outline: 3px solid var(--jm-psi-cor); }

@media (max-width: 767px) {
  .jm-psi .jm-psi__midia { width: 88px; height: 88px; }
  .jm-psi .jm-psi__modal { padding: 0; }
  .jm-psi .jm-psi__modal-caixa { max-width: none; height: 100%; max-height: none; border-radius: 0; padding: 60px 20px 88px; }
  .jm-psi .jm-psi__modal-caixa .jm-psi__midia { width: 150px; height: 150px; }
  /* setas fixas no rodape da janela (nao rolam com o conteudo); [hidden] (especificidade maior) continua escondendo */
  .jm-psi .jm-psi__anterior, .jm-psi .jm-psi__proximo {
    position: fixed; top: auto; bottom: 16px; width: 48px; height: 48px;
    background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); z-index: 1;
  }
  .jm-psi .jm-psi__anterior { left: 16px; }
  .jm-psi .jm-psi__proximo { right: 16px; }
  /* X fixo no topo enquanto a caixa rola; margens negativas anulam o espaço que ele ocupa no fluxo */
  .jm-psi .jm-psi__fechar {
    position: sticky; top: 12px; right: auto; z-index: 3; margin: -48px 0 -36px auto; display: flex;
    background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  }
}