/* team.css — plantilla "team". PROPIEDAD: agente de esta plantilla.
   Tokens y header/footer están en base.css (no los redefinas). Contrato: DESIGN.md.

   Origen de cada valor:
     ficha  -> /wp-content/uploads/elementor/css/post-742.css  (elementor-742)
     rejilla-> /wp-content/uploads/elementor/css/post-557.css  (bloque "L'equip"
               de /ca/nosaltres/; la página de índice de producción sale vacía).
   Breakpoints del kit: 1024px (tablet) y 767px (móvil). Sin sombras. */

/* =========================================================================
   1. Hero beige (9cce03f)
   ========================================================================= */
.team-hero {
  background: var(--nm-beige-15);
  padding: 180px 0;
}
.team-hero-inner {
  text-align: center;
}
.team-hero h1 {
  margin: 0;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-display); /* 50px */
  font-weight: 600;
  color: var(--nm-taupe);
}

/* =========================================================================
   2. Miga de pan (09f7f3d / bda7cf0)
   ========================================================================= */
.team-crumbs {
  padding: 80px 0;
}
.team-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--nm-font-body); /* Karla 15/400 */
  font-size: var(--nm-fs-base);
  font-weight: 400;
  color: var(--nm-beige);
}
/* En producción el primer ítem es el literal "nosaltres" (minúscula) y el
   segundo el título tal cual, en negrita. Solo se baja de caja el primero. */
.team-crumbs .team-crumb-root {
  text-transform: lowercase;
}
.team-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.team-crumbs a {
  color: var(--nm-beige);
  text-decoration: none;
  transition: color var(--nm-transition);
}
.team-crumbs a:hover {
  color: var(--nm-taupe);
}
.team-crumb-sep {
  font-size: 11px;
  color: var(--nm-beige);
}

/* =========================================================================
   3. Ficha individual (13fa13c)
   ========================================================================= */
.team-detail {
  padding: 0 0 100px;
}
.team-detail-inner {
  display: grid;
  grid-template-columns: 25% 75%; /* f8d7e1e / e72d50e */
  align-items: start;
}
.team-detail-body {
  padding-left: 160px; /* e72d50e */
}

/* Retrato: en el original es el fondo de un spacer de 380px con radio 12. */
.team-photo {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--nm-radius);
}
.team-detail-name {
  margin: var(--nm-space-3) 0 0;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-xl); /* 18px */
  font-weight: 200;
  letter-spacing: 0.3px;
  color: var(--nm-taupe);
}
/* Entradilla (43cb8ee): Manrope 28/300, taupe, justificada. */
.team-bio {
  font-family: var(--nm-font-ui);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--nm-taupe);
  text-align: justify;
}
.team-bio p {
  margin: 0 0 var(--nm-space-3);
}
.team-bio p:last-child {
  margin-bottom: 0;
}

/* Titulaciones (9aee266 / de847f5): dos columnas con icono de verificación. */
.team-creds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nm-space-5); /* 1e74cb4: padding-left 30px */
  margin-top: var(--nm-space-3); /* margen de widget de Elementor: 20px */
}
.team-creds ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.team-creds li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-base);
  font-weight: 300;
  line-height: var(--nm-lh-body);
  color: var(--nm-taupe);
}
.team-creds li + li {
  margin-top: 15px; /* separación 15px del icon-list */
}
.team-creds ul + ul li {
  font-weight: 400; /* de847f5 usa 400; 9aee266 usa 300 */
}
.team-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 6px; /* CSS personalizado del widget */
  color: var(--nm-taupe);
}

/* =========================================================================
   4. Rejilla del equipo (9ba4457 + columnas del 25 %)
   ========================================================================= */
.team-grid-section {
  padding: 0 0 100px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 15px; /* bf6c4de: cada columna lleva padding-right:15px */
  row-gap: 70px; /* 9ba4457: margin-top 70px entre filas */
}
.team-card-media {
  display: block;
  text-decoration: none;
}
.team-card-media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--nm-radius);
}
.team-card-name {
  margin: var(--nm-space-3) 0 0;
  font-family: var(--nm-font-ui);
  font-size: 22px;
  font-weight: 600;
  line-height: var(--nm-lh-tight);
  color: var(--nm-taupe);
}
.team-card-name a {
  color: inherit;
  text-decoration: none;
}
.team-card-name a:hover {
  color: var(--nm-beige);
}
.team-card-role {
  margin: 6px 0 0;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-md); /* 16px */
  font-weight: 300;
  color: var(--nm-taupe);
}
.team-card-cta {
  margin: var(--nm-space-3) 0 0;
}

/* Botón "Veure cv" (743f32a): blanco con borde taupe, invierte al pasar. */
.team-btn {
  background: var(--nm-white);
  color: var(--nm-taupe);
  border: 1px solid var(--nm-taupe);
  border-radius: var(--nm-radius);
  font-size: var(--nm-fs-sm); /* 14px */
  font-weight: 400;
  letter-spacing: var(--nm-ls-caps);
  padding: 12px 24px; /* .elementor-button.elementor-size-md */
}
.team-btn:hover,
.team-btn:focus {
  background: var(--nm-taupe);
  color: var(--nm-white);
  border-color: transparent;
}

/* =========================================================================
   5. Tablet (<= 1024px)
   ========================================================================= */
@media (max-width: 1024px) {
  .team-hero {
    padding: 80px var(--nm-space-3);
  }
  .team-crumbs {
    padding: 50px var(--nm-space-3);
  }
  .team-detail {
    padding: 0 var(--nm-space-3) 50px;
  }
  .team-detail-inner {
    grid-template-columns: 40% 60%;
  }
  .team-detail-body {
    padding-left: 50px;
  }
  .team-photo,
  .team-card-media img {
    height: 450px;
  }
  .team-creds {
    grid-template-columns: 1fr;
    gap: var(--nm-space-5);
  }
  .team-grid-section {
    padding: 0 var(--nm-space-3) 50px;
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--nm-space-5); /* 9ba4457 en tablet: margin-top 30px */
  }
  .team-card-name,
  .team-card-role,
  .team-card-cta {
    text-align: center;
  }
}

/* =========================================================================
   6. Móvil (<= 767px) — una columna, todo centrado
   ========================================================================= */
@media (max-width: 767px) {
  .team-hero h1 {
    font-size: 39px; /* 50749dc en móvil */
  }
  .team-detail-inner {
    grid-template-columns: 1fr;
  }
  .team-detail-body {
    padding-left: 0;
    margin-top: var(--nm-space-5);
  }
  .team-photo,
  .team-card-media img {
    height: 520px;
  }
  /* f395aa2 en móvil pasa a background-position:top center (solo la ficha;
     los spacers de la rejilla de 557 mantienen center center). */
  .team-photo {
    object-position: top center;
  }
  /* cba65d0 y 43cb8ee pasan a text-align:center en móvil. */
  .team-detail-name,
  .team-bio {
    text-align: center;
  }
  /* bda7cf0 lleva elementor-mobile-align-center. */
  .team-crumbs ol {
    justify-content: center;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
}