/* ============================================
   PROVITA ANESTESIA — EQUIPE
   Estilos específicos da página Equipe:
   grade de cards de médicos.
   Separado de internas.css (117 linhas) pois
   a adição ultrapassaria 150 linhas.
   Mobile-first. Só variáveis de tokens.css.
   ============================================ */

/* ── GRADE DE MÉDICOS ── */
.equipe__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-lg);
  list-style: none;
}

.medico {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: var(--esp-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-xs);
  transition: var(--transicao);
}
.medico:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-media);
  border-color: transparent;
}

/*
   FOTO DO MÉDICO:
   Atualmente: div com ícone placeholder (fundo cinza, ícone SVG).
   Quando a foto real chegar, substituir a <div class="medico__foto">
   por <img class="medico__foto" src="img/equipe/nome.webp" alt="Nome do Dr."
   width="120" height="120"> — o CSS abaixo já aplica object-fit: cover
   para qualquer <img> com essa classe.
*/
.medico__foto {
  width: 120px;
  height: 120px;
  border-radius: var(--raio-full);
  background: var(--cor-fundo-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-verde-agua);
  margin-bottom: var(--esp-sm);
  flex-shrink: 0;
  overflow: hidden;
}
img.medico__foto { object-fit: cover; }

.medico__nome { color: var(--cor-azul-profundo); font-size: 1.2rem; }

.medico__espec {
  color: var(--cor-verde-agua);
  font-weight: var(--peso-medio);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.medico__registro { color: var(--cor-texto-suave); font-size: var(--fs-caption); }

/* Nota de credibilidade centralizada */
.equipe__nota { text-align: center; margin-top: var(--esp-lg); }

/* ── RESPONSIVO ── */
@media (min-width: 600px) {
  .equipe__grade { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 992px) {
  .equipe__grade { grid-template-columns: repeat(3, 1fr); }
}