/* ==========================================================================
   KOA — TORNEOS
   Componente de tarjeta de torneo (reutilizado en el carrusel del Home y en
   la grilla de la vista Torneos) + estilos propios de la vista. Las tarjetas
   las genera js/tournaments.js; aquí también están los estados de la lista:
   cargando, sin torneos y error.
   ========================================================================== */

.tournaments {
  background-color: var(--void);
  padding-block: var(--space-9);
  overflow: hidden;
}

/* ---- Tarjeta de torneo (compartida) ---- */

.tournament-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.tournament-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

.tournament-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--panel);
}

.tournament-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El enlace que puede envolver la imagen cuando el torneo tiene "url"
   (ver js/tournaments.js) debe comportarse como la imagen misma. */
.tournament-card__media a {
  display: block;
  width: 100%;
  height: 100%;
}

.tournament-card__status {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  background: rgba(10, 10, 13, 0.75);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}

.tournament-card__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-muted);
  flex-shrink: 0;
}

.tournament-card__status--live {
  color: #ffe1cf;
  border-color: var(--blaze);
}

.tournament-card__status--live::before {
  background: var(--blaze);
  box-shadow: 0 0 0 3px rgba(239, 43, 43, 0.25);
}

.tournament-card__status--soon::before {
  background: var(--ember);
}

.tournament-card__status--done::before {
  background: var(--ink-muted);
}

/* Variantes del sistema de estados automáticos:
   "cierra pronto" (urgente, sin el pulso de "en vivo"), "próximamente" y
   "próximo" (mismo tono neutro que "finalizado", pero con nombre propio para no
   reutilizar semánticamente un modificador con el significado opuesto) e
   "inscripciones cerradas" (punto hueco: se distingue de "terminado" y de
   "próximamente" sin añadir un color nuevo). */
.tournament-card__status--closing::before {
  background: var(--blaze);
}

.tournament-card__status--upcoming::before {
  background: var(--ink-muted);
}

.tournament-card__status--closed::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink-muted);
}

/* Estado "cancelado": apagado y tachado, para distinguirlo de "terminado". */
.tournament-card__status--cancelled {
  color: var(--ink-muted);
  text-decoration: line-through;
}

.tournament-card__status--cancelled::before {
  background: var(--ink-muted);
}

.tournament-card__body {
  padding: var(--space-5);
}

.tournament-card__title {
  font-size: 1.3rem;
  margin-bottom: var(--space-3);
  /* Los nombres vienen de Start.gg: una palabra muy larga debe partirse en vez de desbordar la tarjeta. */
  overflow-wrap: anywhere;
}

/* Cuando el nombre del torneo enlaza a su "url" (js/tournaments.js),
   debe verse igual que el texto normal del título, sin el estilo de enlace
   por defecto del navegador. */
.tournament-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.tournament-card__title a:hover {
  color: var(--ember);
}

.tournament-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.tournament-card__cta:hover {
  color: var(--ember);
  border-color: var(--ember);
}

/* Cuando el torneo no tiene "url" todavía (js/tournaments.js) el CTA se
   muestra deshabilitado en vez de inventar un destino. */
.tournament-card__cta--disabled {
  color: var(--ink-muted);
  border-color: var(--line);
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

/* ---- Home: carrusel ---- */

/* Mismo orden que Roster e Historial: título, descripción, contenido y, debajo,
   el botón para ver la sección completa (centrado). */
.tournaments__foot {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}

.tournaments__viewport {
  overflow: hidden;
  margin-inline: calc(-1 * var(--container-pad));
  padding-inline: var(--container-pad);
  /* Pantallas táctiles: el scroll vertical de la página y el zoom con dos dedos siguen
     funcionando, pero el gesto horizontal sobre el carrusel llega a js/carousel.js
     (deslizar con el dedo). */
  touch-action: pan-y pinch-zoom;
}

.tournaments__track {
  display: flex;
  gap: var(--space-5);
  transition: transform 0.5s var(--ease);
  will-change: transform;
}

/* Mientras el dedo arrastra, el track lo sigue sin animación; al soltar se retira la
   clase y la transición normal lo asienta en su grupo. */
/* Evita que un deslizamiento sobre una imagen o enlace lo tome el navegador como
   «arrastrar imagen»/menú de pulsación larga y cancele el gesto. */
.tournaments__track a,
.tournaments__track img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: pan-y pinch-zoom;
}

.tournaments__track.is-dragging {
  transition: none;
}

.tournaments__track .tournament-card {
  flex: 0 0 calc((100% - (2 * var(--space-5))) / 3);
  min-width: 280px;
}

.tournaments__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-6);
}

.tournaments__dots {
  display: flex;
  gap: var(--space-2);
}

.tournaments__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}

.tournaments__dot.is-active {
  background: var(--ember);
  width: 22px;
  border-radius: 4px;
}

.tournaments__arrows {
  display: flex;
  gap: var(--space-3);
}

.tournaments__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.tournaments__arrow:hover {
  color: var(--ember);
  border-color: var(--ember);
}

.tournaments__arrow svg {
  width: 20px;
  height: 20px;
}

/* ---- Estados de la lista dinámica: cargando · sin torneos · error ----
   Son párrafos ocultos/visibles desde js/tournaments.js:
     [data-tournaments-state="loading"|"error"]   .tournaments-status
     [data-tournaments-empty="<grupo>"]           .tournaments-empty
   Mientras un contenedor no tiene tarjetas no ocupa altura propia: el único
   bloque visible es el mensaje de su estado, nunca un hueco roto. */

.tournaments__controls[hidden],
.tournaments-status[hidden],
.tournaments-empty[hidden] {
  display: none;
}

/* Con una sola página de tarjetas (js/carousel.js pone la clase) las flechas y
   el punto no tienen nada que mover: no se muestran controles inertes. */
.tournaments__controls.is-single {
  display: none;
}

.tournaments-empty,
.tournaments-status {
  padding: var(--space-6) var(--space-5);
  border: 1px dashed var(--line-strong);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.tournaments-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.tournaments-status__spinner {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--ember);
  border-radius: 50%;
  animation: tournaments-spin 0.8s linear infinite;
}

@keyframes tournaments-spin {
  to {
    transform: rotate(360deg);
  }
}

.tournaments-status--error {
  border-style: solid;
  border-color: var(--blaze);
  background: rgba(239, 43, 43, 0.06);
  color: var(--ink);
}

/* Una sección de «Torneos y eventos» sin tarjetas no se muestra (js/tournaments.js
   la deja con [hidden] hasta que su grupo tiene contenido): no queda un título
   suelto sobre un hueco. */
.tournaments-section[hidden] {
  display: none;
}

/* ==========================================================================
   VISTA — Torneos
   ========================================================================== */

/* Avisos de la lista (cargando, error y «sin eventos ni torneos»). Sin ningún
   aviso visible el bloque no ocupa espacio. */
.tournaments-page__top {
  padding-block: var(--space-7);
}

.tournaments-page__top:not(:has(.tournaments-status:not([hidden]), .tournaments-empty:not([hidden]))) {
  display: none;
}

.tournaments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.tournaments-section {
  padding-block: var(--space-8);
}

/* Línea entre secciones VISIBLES (una oculta no deja una línea suelta arriba). */
.tournaments-section:not([hidden]) ~ .tournaments-section:not([hidden]) {
  border-top: 1px solid var(--line);
}

.tournaments-section .section-head {
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   RESPONSIVE — TORNEOS
   ========================================================================== */

@media (max-width: 992px) {
  .tournaments__track .tournament-card {
    flex: 0 0 calc((100% - var(--space-5)) / 2);
  }

  .tournaments-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  

  
}

@media (max-width: 768px) {
  .tournaments {
    padding-block: var(--space-8);
  }

  .tournaments-section {
    padding-block: var(--space-7);
  }

  .tournaments-page__top {
    padding-top: var(--space-6);
  }
}

@media (max-width: 640px) {
  .tournaments__track .tournament-card {
    flex: 0 0 100%;
  }

  .tournaments-grid {
    grid-template-columns: 1fr;
  }

  

  

  .tournaments__controls {
    flex-direction: column;
    gap: var(--space-5);
    align-items: stretch;
  }

  .tournaments__arrows {
    justify-content: center;
  }

  .tournaments__dots {
    justify-content: center;
    order: -1;
  }
}