/* ==========================================================================
   Nitro Simracing - Tournaments List & Grid
   ========================================================================== */

/* Layout & Typography */
.sn-torneos-listado {
  margin: var(--sn-space-4) 0;
  padding: 0 var(--sn-space-4); /* Lateral margin for mobile */
}

@media (min-width: 768px) {
  .sn-torneos-listado {
    padding: 0; /* Reset for desktop as parent container handles it */
  }
}

.sn-tl-heading {
  display: flex;
  align-items: center;
  gap: var(--sn-space-4);
  font-size: var(--sn-font-size-xl);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
  margin-bottom: var(--sn-space-7);
  padding: var(--sn-space-3) var(--sn-space-5);
  border-left: 4px solid var(--sn-theme-primary);
  background: linear-gradient(90deg, rgba(255, 59, 48, 0.12) 0%, transparent 100%);
  position: relative;
  overflow: hidden;
  box-shadow: -10px 0 30px rgba(255, 59, 48, 0.1);
}

.sn-tl-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
}

.sn-tl-heading i {
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(255, 59, 48, 0.8));
  font-size: 1.25rem;
}

.sn-tl-heading.is-finalizados {
  border-color: #a0a5b0;
  background: linear-gradient(90deg, rgba(160, 165, 176, 0.12) 0%, transparent 100%);
  box-shadow: -10px 0 30px rgba(160, 165, 176, 0.05);
}

.sn-tl-heading.is-finalizados i {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.sn-tl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: var(--sn-space-6);
  margin-bottom: var(--sn-space-10);
}

@media (min-width: 1400px) {
  .sn-tl-grid {
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  }
}

/* Specific Card Layout for Tournaments */
.sn-torneo-card {
  display: flex !important;
  flex-direction: column !important; /* Stacked by default for mobile */
  background: linear-gradient(180deg, var(--sn-color-surface-alt) 0%, var(--sn-color-surface) 100%);
  border: 1px solid var(--sn-color-border);
  border-radius: var(--sn-radius-xl);
  overflow: hidden;
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--sn-shadow);
  text-decoration: none;
  color: inherit;
  outline: none;
  min-height: 200px;
}

/* Horizontal layout for cards on larger screens */
@media (min-width: 768px) {
  .sn-tl-grid .sn-torneo-card,
  .sn-tl-slider .sn-torneo-card {
    display: grid !important;
    grid-template-columns: 42% 58% !important; /* Forces horizontal: Image left, Info right */
    align-items: stretch !important;
    min-height: 230px;
  }
}

/* Glow Effect En Fichas de Torneo */
.sn-torneo-card:hover,
.sn-torneo-card:focus-within {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(255, 59, 48, 0.4);
  box-shadow: 
    0 0 0 1px rgba(255, 59, 48, 0.5),
    0 24px 48px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(255, 59, 48, 0.15);
  z-index: 2;
}

.sn-torneo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--sn-radius-xl) - 1px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%, transparent 60%, rgba(255, 59, 48, 0.05) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Ficha Imagen y Logo Superpuesto */
.sn-tl-grid .sn-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* Mobile aspect ratio */
  background: #000;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

@media (min-width: 768px) {
  .sn-card-media {
    aspect-ratio: auto !important;
    height: 100% !important;
    border-bottom: none !important;
    border-right: 1px solid rgba(255,255,255,0.05) !important;
  }
}

.sn-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(0.9);
}

.sn-torneo-card:hover .sn-card-img,
.sn-torneo-card:focus-within .sn-card-img {
  transform: scale(1.08); /* Cinematic Zoom */
  filter: brightness(1.1);
}

.sn-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--sn-color-surface) 0%, transparent 60%);
  pointer-events: none;
}

@media (min-width: 768px) {
  .sn-card-media::after {
    background: linear-gradient(270deg, var(--sn-color-surface) 0%, transparent 60%);
  }
}

.sn-sim-logo {
  position: absolute;
  top: var(--sn-space-3);
  right: var(--sn-space-3);
  max-width: 100px;
  max-height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
  z-index: 2;
}

/* Ficha Cuerpo y Contenido */
.sn-card-body {
  padding: var(--sn-space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 2;
}

.sn-card-title {
  font-size: var(--sn-font-size-md);
  font-weight: 800;
  color: #fff;
  margin: 0 0 var(--sn-space-2) 0;
  line-height: 1.3;
}

.sn-card-desc {
  color: var(--sn-color-text-soft);
  font-size: var(--sn-font-size-sm);
  line-height: 1.5;
  margin-bottom: var(--sn-space-4);
  
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sn-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-2);
  margin-bottom: var(--sn-space-4);
}

.sn-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--sn-radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.sn-tag-mod {
  background: rgba(255, 255, 255, 0.05);
  color: var(--sn-color-text-soft);
  border: 1px solid rgba(255,255,255,0.1);
}

.sn-tag-estado {
  background: rgba(52, 199, 89, 0.15); /* Verde por defecto para activos */
  color: #34c759;
  border: 1px solid rgba(52, 199, 89, 0.3);
}

/* Slider for Finished Tournaments */
.sn-tl-slider {
  position: relative;
  margin-bottom: var(--sn-space-8);
}

.wd-carousel-wrap {
  display: flex !important; /* Ensure it's always flex for swiper */
}

.sn-tl-slider .wd-carousel-item {
  height: auto;
  display: flex;
}

.sn-tl-slider .sn-torneo-card {
  width: 100% !important;
}

/* Arrows Navigation for Swiper */
.sn-tl-slider .wd-carousel-inner {
  position: static;
}

.sn-tl-slider .wd-btn-arrow {
  background-color: var(--sn-color-surface-alt);
  border: 1px solid var(--sn-color-border);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 10;
}

.sn-tl-slider .wd-btn-arrow:hover {
  background-color: var(--sn-theme-primary);
  border-color: var(--sn-theme-primary);
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255, 59, 48, 0.4);
}

/* Fichas finalizadas: Subtler grayscale */
.sn-torneo-card.is-finalizado {
  filter: grayscale(0.6);
  opacity: 0.9;
}

.sn-torneo-card.is-finalizado:hover {
  filter: grayscale(0.2);
  opacity: 1;
}

.sn-torneo-card.is-finalizado .sn-tag-estado {
  background: rgba(255, 255, 255, 0.1);
  color: #a0a5b0;
  border-color: rgba(255, 255, 255, 0.2);
}

.sn-card-cost {
  margin-top: auto;
  font-size: var(--sn-font-size);
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sn-space-4);
  padding-top: var(--sn-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.sn-card-cost i {
  color: var(--sn-theme-primary);
}

.sn-card-actions .sn-btn {
  width: 100%;
}