/* =====================================================================
   equip.css — Secció «Equip docent» (versió maqueta)

   Graella de retrats amb nom i càrrec, com a .team-grid de la maqueta.

   ⚠️ ELS RETRATS SÓN SILUETES, NO FOTOS. Molt del professorat són agents en
   actiu i publicar-ne la cara és un tema de seguretat, no només de permís
   (pregunta A1 a l'Andrea). La silueta la genera passa_person_svg().
   ⚠️ ELS NOMS SÓN INVENTATS (venen de la maqueta). Els COPYS sí són reals:
   surten de la seva pàgina «L'Acadèmia».
   ===================================================================== */

.passa-equip {
  width: 100%;
  background: #fff;
  padding: 0;
  margin: 0 !important;
}
.passa-equip > .wp-block-group__inner-container {
  max-width: var(--passa-container);
  margin: 0 auto;
  padding: 84px 30px;
}

/* WordPress afegeix marges entre blocs germans; l'espaiat el governem aquí. */
.passa-equip > .wp-block-group__inner-container > * { margin-top: 0 !important; }
.passa-equip .eyebrow { margin-bottom: 22px !important; }
.passa-equip .section-title { margin-bottom: 14px !important; }
.passa-equip .section-lead {
  font-family: var(--passa-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--passa-text-2);
  max-width: 66ch;
  margin: 0 0 34px !important;
}

/* ---- Graella: cinc retrats ---- */
.passa-equip .team-grid { gap: 14px; margin-bottom: 0; }
.passa-equip .team-grid .wp-block-column { flex-basis: 20% !important; }

/* ⚠️ Amb `aspect-ratio: 3/4`, l'alçada és l'amplada × 1,33: cada cop que la
   targeta s'eixampla, la secció creix. Passava a 900px (271px d'ample) i a
   600px (273), on eren MÉS grans que a 768 (233) i la secció s'inflava en fer
   la pantalla més petita. Amb un sostre d'amplada, l'alçada queda acotada
   sempre i la targeta se centra a la seva columna. */
.passa-equip .person {
  position: relative;
  max-width: 240px;
  margin-inline: auto;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--passa-radius);
  background: var(--passa-purple-bg);
  /* El color de la silueta surt d'aquí: el SVG fa servir currentColor. */
  color: var(--passa-accent);
  transition: filter .2s ease, transform .2s ease;
}
.passa-equip .person:hover { filter: brightness(1.06); transform: translateY(-2px); }
.passa-equip .person > .wp-block-group__inner-container { padding: 0; margin: 0; height: 100%; }
.passa-equip .person__art { width: 100%; height: 100%; display: block; }

/* Nom i càrrec, a sobre de la imatge amb un vel per garantir la lectura. */
.passa-equip .person__name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 14px 14px;
  background: linear-gradient(to top, rgba(26, 21, 53, .78), rgba(26, 21, 53, 0));
}
.passa-equip .person__name > .wp-block-group__inner-container { padding: 0; margin: 0; }
.passa-equip .person__nom {
  font-family: var(--passa-font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  margin: 0 !important;
}
.passa-equip .person__rol {
  font-family: var(--passa-font-body);
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .92);
  margin: 2px 0 0 !important;
}

/* ====================================================================== */
@media (max-width: 1023px) {
  .passa-equip > .wp-block-group__inner-container { padding: 64px 30px; }
  /* Tres per fila: cinc retrats a 1023px queden massa estrets. */
  .passa-equip .team-grid { flex-wrap: wrap !important; }
  .passa-equip .team-grid .wp-block-column { flex-basis: calc(33.333% - 10px) !important; }
}
@media (max-width: 768px) {
  .passa-equip > .wp-block-group__inner-container { padding: 52px 20px; }
  .passa-equip .section-lead { font-size: 16px; }
}
/* ⚠️ El pas a DUES per fila baixa a 700px, no 768.
   Amb `aspect-ratio: 3/4`, l'alçada del retrat és l'amplada × 1,33. A 768px
   dues targetes fan 357px d'ample → 476 d'alt, MÉS GRANS que les tres de
   271px que hi havia a 900px: la secció creixia de 1.258 a 2.254px en fer la
   pantalla més petita. Amb tres per fila fins a 700px, no passa. */
@media (max-width: 700px) {
  .passa-equip .team-grid .wp-block-column { flex-basis: calc(50% - 7px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .passa-equip .person:hover { transform: none; }
}

/* 21/10 · Andrea: «oculta la secció dels profes, ja la pensarem amb calma». Només a la web (body.home);
   a l'editor es continua veient per poder-la treballar. Per tornar-la a mostrar, esborrar aquesta regla. */
body.home .passa-equip { display: none !important; }