/* ==========================================================================
   Coppelius · Nuestros talentos (Fase 1)
   SIN diseño en Figma: estructura de la referencia (Wiener Staatsoper ›
   Ensemble › Singers: título + temporada, índice, rejilla de retratos por
   grupo) en el lenguaje del sistema de diseño v0.1. Se carga después de
   styles.css.

   Bloques: .talents-intro · .talents-filter · .talents · .talent-card · .talents-cta
   Fase 2: archivo del CPT «artista»; cada clase BEM → clase global;
   @media → breakpoints de Bricks (base · ≤991 · ≤767).
   ========================================================================== */


/* --------------------------------------------------------------------------
   Encabezado de página
   -------------------------------------------------------------------------- */
.talents-intro {
  padding: var(--space-16) var(--space-gutter) var(--space-10);
  background-color: var(--color-bg-page);
}

.talents-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-stack-sm);
}

.talents-intro__eyebrow,
.talents-cta__eyebrow {
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-accent-on-light);
}

.talents-intro__title {
  font-size: var(--font-size-display);
  color: var(--color-text-heading);
}

.talents-intro__lead {
  max-width: 760px;
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
}


/* --------------------------------------------------------------------------
   Índice / filtro por disciplina
   Sin JS son anclas; con JS, aria-current marca el grupo visible.
   -------------------------------------------------------------------------- */
.talents-filter {
  position: sticky;
  top: 0px;
  z-index: 2;
  margin-bottom: var(--space-12);
  padding-block: var(--space-4);
  border-top: var(--border-width-thin) solid var(--color-border-default);
  border-bottom: var(--border-width-thin) solid var(--color-border-default);
  background-color: var(--color-bg-page);
}

.talents-filter__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.talents-filter__link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  min-height: var(--size-tap-target);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-body);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--border-width-focus);
  text-underline-offset: 0.35em;
  transition: color var(--motion-duration-fast) var(--motion-easing),
    text-decoration-color var(--motion-duration-fast) var(--motion-easing);
}

.talents-filter__link:hover {
  text-decoration-color: currentColor;
}

.talents-filter__link[aria-current="true"] {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-accent-on-light);
  text-decoration-color: var(--color-border-accent-on-light);
}


/* --------------------------------------------------------------------------
   Elenco: grupos y rejilla
   -------------------------------------------------------------------------- */
.talents {
  padding: var(--space-0) var(--space-gutter) var(--space-section-y);
  background-color: var(--color-bg-page);
}

.talents__groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.talents__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
  scroll-margin-top: 96px;   /* el índice es sticky */
}

.talents__group[hidden] {
  display: none;
}

.talents__group-title {
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-thin) solid var(--color-border-accent-on-light);
  font-size: var(--font-size-h3);
  color: var(--color-text-heading);
}

.talents__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
  gap: var(--space-8) var(--space-6);
}

.talents__item {
  min-width: 0px;
}


/* --------------------------------------------------------------------------
   Tarjeta de artista: retrato 3:4 + nombre + registro o instrumento
   -------------------------------------------------------------------------- */
.talent-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.talent-card__media {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin-bottom: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-surface);
  background-color: var(--color-bg-inverse);
}

.talent-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: scale 400ms var(--anim-hover-ease, ease);
}

.talent-card:hover .talent-card__image {
  scale: 1.03;
}

/* Encuadres de las fotos de stock apaisadas (en Bricks: object-position del Image) */
.talent-card__image--focus-left {
  object-position: 26% 30%;
}

.talent-card__image--focus-center {
  object-position: 48% 40%;
}

.talent-card__image--focus-right {
  object-position: 68% 30%;
}

.talent-card__image--focus-far-right {
  object-position: 80% 30%;
}

/* [Ejemplo] artist-*.webp son recortes circulares con las esquinas blancas
   y el borde dorado horneado: se amplía el centro (como en nosotros.css) */
.talent-card__media--from-circle .talent-card__image {
  transform: scale(1.5);
  transform-origin: 50% 45%;
}

/* [Ejemplo] Marcador sin retrato: iniciales oro sobre navy (5.88) */
.talent-card__media--placeholder {
  background-color: var(--color-bg-inverse);
}

.talent-card__initials {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-caps);
  color: var(--color-text-accent);
}

.talent-card__name {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
}

.talent-card__role {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-tight);
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   Llamada a la acción · audiciones (banda navy)
   -------------------------------------------------------------------------- */
.talents-cta {
  padding: var(--space-section-y) var(--space-gutter);
  background-color: var(--color-bg-inverse);
}

.talents-cta :focus-visible {
  outline: var(--focus-ring-inverse);
}

.talents-cta__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-12);
}

.talents-cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-sm);
  max-width: 720px;
  min-width: 0px;
}

.talents-cta__eyebrow {
  color: var(--color-text-accent);
}

.talents-cta__title {
  font-size: var(--font-size-h2);
  color: var(--color-text-inverse);
}

.talents-cta__description {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-inverse-muted);
}

.talents-cta__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   ≤991 · tablet (derivado)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .talents__list {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
  }

  .talents-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* --------------------------------------------------------------------------
   ≤767 · móvil (derivado; artboard 390)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .talents-intro {
    padding-top: var(--space-10);
    padding-bottom: var(--space-8);
  }

  /* En móvil el índice se desplaza en horizontal en lugar de ocupar 4 líneas */
  .talents-filter {
    margin-inline: calc(var(--space-gutter) * -1);
    margin-bottom: var(--space-8);
    padding: var(--space-1) var(--space-gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .talents-filter__list {
    flex-wrap: nowrap;
    gap: var(--space-5);
  }

  .talents-filter__list > li {
    flex-shrink: 0;
  }

  .talents-filter__link {
    white-space: nowrap;
  }

  .talents__groups {
    gap: var(--space-12);
  }

  .talents__list {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: var(--space-6) var(--space-4);
  }

  .talents-cta__actions {
    flex-direction: column;
    width: 100%;
  }
}