/* ── Equipos page ──────────────────────────────────────────────────────────── */

.uec-equipos-page {
  color: var(--uec-black);
  background: var(--uec-light-100);
}

/* Anchor target for tabs: positions the nav just below the sticky header */
#uec-equipos {
  scroll-margin-top: calc(var(--site-header-height) + var(--site-header-offset) + 1.5rem);
}

/* ── Tab nav wrapper ──────────────────────────────────────────────────────── */
.uec-equipos-tabs__nav-wrapper {
  padding-top: 4rem;
  background: var(--uec-light-100);
}

/* Override margin-bottom from .uec-news-filter; panels own their own spacing */
.uec-equipos-tabs__nav {
  margin-bottom: 0;
}

/* ── Tab panels ───────────────────────────────────────────────────────────── */
.uec-equipos-panel {
  padding-top: 2.75rem;
  padding-bottom: var(--section-padding);
  background: var(--uec-light-100);
}

.uec-equipos-panel[hidden] {
  display: none;
}

/* ── Player grid: columnas configurables desde el admin ───────────────────── */
.uec-equipos-player-grid {
  display: grid;
  grid-template-columns: repeat(var(--uec-equipos-cols, 5), minmax(0, 1fr));
  gap: clamp(0.75rem, 1.75vw, 1.375rem);
  align-items: start;
}

/* ── Academy / Insercor: colores en fondo claro ───────────────────────────── */

/* El club page usa fondo oscuro; aquí el fondo es claro, hay que sobreescribir */
.uec-equipos-panel--sections .uec-club-info__text h2 {
  color: var(--uec-black);
}

.uec-equipos-panel--sections .uec-club-info__copy p {
  color: var(--uec-dark-400);
}

/* Primer artículo sin margen superior extra */
.uec-equipos-panel--sections .uec-club-info:first-child {
  margin-top: 0;
}

/* ── Insercor: bloque de patrocinadores (logos sueltos, sin caja, como la home) ── */
.uec-equipos-sponsors {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
}

/* Si va detrás de secciones, separa con un filete suave */
.uec-equipos-panel--sections .uec-club-info + .uec-equipos-sponsors {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--uec-light-300);
}

.uec-equipos-sponsors__title {
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
  color: var(--uec-dark-400);
  font-family: var(--font-family-base);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.uec-equipos-sponsors__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4.5vw, 4rem);
}

/* Sin caja: solo el logo, centrado. */
.uec-equipos-sponsors__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--uec-dark-400);
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

a.uec-equipos-sponsors__item:hover,
a.uec-equipos-sponsors__item:focus-visible {
  transform: translateY(-3px);
  opacity: 0.8;
}

.uec-equipos-sponsors__logo {
  width: auto;
  height: clamp(52px, 8vw, 104px);
  max-width: clamp(150px, 22vw, 260px);
  object-fit: contain;
}

/* ── Cartas de jugador en /equipos/ (variante verde, 4-5 por fila) ─────────── */

/*
 * Variante verde: misma estructura, info y posiciones que la home, pero base
 * verde y otra paleta. Los textos y los logos se rellenan con --uec-card-holo-texture
 * (texto vía background-clip; logos vía máscara), así que la textura define el color
 * por defecto (dorsal y nombres en blanco) y luego se afinan los que cambian:
 *   - Fecha · nacionalidad · pie y posiciones → verde.
 *   - Distintivo UEC → casi negro.
 *   - Logos (club y competición) → blanco roto, para integrarlos con el fondo.
 * La home conserva sus valores intactos.
 */
.uec-player-card-flip--verde {
  --uec-card-holo-texture: linear-gradient(#fff, #fff); /* dorsal y nombres en blanco */
  --uec-card-badge-color: rgb(11 17 13 / 92%);          /* UEC casi negro */
  --uec-card-verde-accent: #2da965;                     /* fecha/nacionalidad/pie y posiciones */
  --uec-card-verde-logo: #e6ebe3;                        /* logos en blanco roto */
  --uec-card-green: #3cef86;                             /* reverso: nombre y altura/peso, verde claro legible sobre el fondo verde */
  /* Radio un pelín mayor que el de las esquinas de la imagen (~1.67%) para que la
     cara recorte la esquina transparente de la imagen y no asome el canto oscuro
     del fondo/efecto 3D por detrás (se notaba sobre el marco verde). */
  --player-card-radius: 1.8cqw;
}

/* Fecha de nacimiento · nacionalidad · pie dominante y posiciones en verde. */
.uec-player-card-flip--verde .uec-player-card__meta,
.uec-player-card-flip--verde .uec-player-card__position {
  background-image: linear-gradient(var(--uec-card-verde-accent), var(--uec-card-verde-accent));
}

/* Logos del club y de competición en blanco roto (menos "pegote" sobre el verde). */
.uec-player-card-flip--verde .uec-player-card__club-mark,
.uec-player-card-flip--verde .uec-player-card__competition-mark {
  background-image: linear-gradient(var(--uec-card-verde-logo), var(--uec-card-verde-logo));
}

/* Que SOLO se vea la imagen verde de la carta: sin fondo oscuro de cara ni los
   cantos 3D (::before/::after) oscuros por detrás. Así, en las esquinas
   redondeadas (transparentes en la imagen) no asoma ningún borde negro: detrás
   está la página, no un elemento oscuro. El flip se mantiene (gira --inner). */
.uec-player-card-flip--verde .uec-player-card-face {
  background: transparent;
  box-shadow: none;
}

.uec-player-card-flip--verde .uec-player-card-inner::before,
.uec-player-card-flip--verde .uec-player-card-inner::after {
  display: none;
}

/* La sombra inferior de la carta sobra dentro del grid sobre fondo oscuro. */
.uec-equipos-player-grid .uec-player-card-flip::after {
  display: none;
}

/*
 * Las fuentes de la carta usan clamp(min-rem, Xcqw, max-rem). Con 4-5 columnas
 * (~250-300px) el valor cqw cae por debajo del mínimo en rem, dejando el texto
 * sobredimensionado respecto a la carta. Bajamos los mínimos para que mande el
 * valor proporcional (cqw) y todo quede colocado igual que en la home pero a
 * menor escala. Los márgenes ya están en cqw, así que escalan solos.
 */
.uec-equipos-player-grid .uec-player-card__number {
  font-size: clamp(1rem, 14.5cqw, 5.2rem);
}

.uec-equipos-player-grid .uec-player-card__name-big {
  font-size: clamp(0.85rem, 7.8cqw, 3rem);
}

.uec-equipos-player-grid .uec-player-card__name-small {
  font-size: clamp(0.45rem, 3.4cqw, 1.3rem);
}

.uec-equipos-player-grid .uec-player-card__meta {
  font-size: clamp(0.4rem, 3.1cqw, 1.2rem);
}

.uec-equipos-player-grid .uec-player-card__position {
  font-size: clamp(0.42rem, 3.6cqw, 1.4rem);
}

.uec-equipos-player-grid .uec-player-card__badge {
  --uec-card-badge-size: clamp(0.42rem, 2.9cqw, 1.2rem);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .uec-equipos-player-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .uec-equipos-tabs__nav-wrapper {
    padding-top: 3rem;
  }
}

@media (max-width: 767px) {
  .uec-equipos-tabs__nav-wrapper {
    padding-top: 2.25rem;
  }

  .uec-equipos-panel {
    padding-top: 2rem;
  }

  /* Horizontal scroll on mobile, mirrors home-player-grid behaviour */
  .uec-equipos-player-grid {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--container-padding) * -1);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px calc(var(--container-padding) * 0.75) 10px;
    scroll-padding-inline: calc(var(--container-padding) * 0.75);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .uec-equipos-player-grid::-webkit-scrollbar {
    display: none;
  }

  .uec-equipos-player-grid .uec-player-card-flip {
    flex: 0 0 min(82vw, 340px);
    scroll-snap-align: start;
  }

  /* Disable reveal animation inside horizontal scroll on mobile */
  .uec-equipos-player-grid .uec-player-card-flip.uec-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Stack academy/insercor sections vertically */
  .uec-equipos-panel--sections .uec-club-info {
    grid-template-columns: 1fr;
  }

  .uec-equipos-panel--sections .uec-club-info--reverse {
    direction: ltr;
  }
}