/* ═══════════════════════════════════════════════════════
   VCP Deportes — Cards (Stream & Category)
   ═══════════════════════════════════════════════════════ */

/* ── Stream Card ── */
.stream-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out-quart),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.stream-card:hover {
  border-color: var(--vcp-yellow);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.stream-card:active {
  transform: scale(0.985);
}

.stream-card__link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.stream-card__link:hover {
  color: inherit;
}

/* ── Poster ── */
.stream-card__poster-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-background-tertiary);
}

.stream-card__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-quart);
}

.stream-card:hover .stream-card__poster {
  transform: scale(1.05);
}

/* ── Badges on poster ── */
.stream-card__badges {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  z-index: 2;
}

.stream-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-legal);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.stream-card__badge--live {
  background: var(--gradient-live-badge);
  color: var(--vcp-white);
  animation: live-pulse 2s ease-in-out infinite;
}

.stream-card__badge--live::before {
  content: "";
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: var(--radius-circle);
  background: var(--vcp-white);
  animation: live-dot 2s ease-in-out infinite;
}

.stream-card__badge--quality {
  background: rgba(0, 0, 0, 0.72);
  color: var(--vcp-yellow);
}

.stream-card__badge--time {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  background: rgba(0, 0, 0, 0.8);
  color: var(--vcp-white);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-legal);
  font-weight: var(--weight-semibold);
}

/* ── Body ── */
.stream-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) var(--space-4);
  flex: 1;
}

.stream-card__category {
  color: var(--color-text-tertiary);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--weight-medium);
}

.stream-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--line-tight);
  color: var(--color-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stream-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--text-micro);
}

.stream-card__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--vcp-yellow) 12%, transparent);
  color: var(--vcp-yellow);
  font-size: var(--text-legal);
  font-weight: var(--weight-semibold);
}

/* ── Category Card ── */
.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out-quart),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.category-card:hover {
  border-color: var(--vcp-yellow);
  box-shadow: var(--shadow-glow-yellow);
  transform: translateY(-3px);
  color: inherit;
}

.category-card:active {
  transform: scale(0.97);
}

/* Icon mapper — each sport gets a subtle gradient accent */
.category-card[data-sport="Fútbol"] { --cat-color: var(--vcp-yellow); }
.category-card[data-sport="Básquet"] { --cat-color: #ff6b35; }
.category-card[data-sport="Basketball"] { --cat-color: #ff6b35; }
.category-card[data-sport="Tenis"] { --cat-color: #4ade80; }
.category-card[data-sport="Combate"] { --cat-color: var(--vcp-red); }
.category-card[data-sport="Combat Sports"] { --cat-color: var(--vcp-red); }
.category-card[data-sport="Fútbol Americano"] { --cat-color: #60a5fa; }
.category-card[data-sport="Béisbol"] { --cat-color: #f59e0b; }
.category-card[data-sport="Hockey"] { --cat-color: #a78bfa; }
.category-card[data-sport="Rugby"] { --cat-color: #f472b6; }

.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--cat-color, var(--vcp-yellow)) 18%, transparent), transparent 70%);
  pointer-events: none;
}

.category-card__icon {
  font-size: 2.25rem;
  position: relative;
  z-index: 1;
}

.category-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-action);
  color: var(--color-text-primary);
  position: relative;
  z-index: 1;
}

.category-card__count {
  font-size: var(--text-micro);
  color: var(--color-text-tertiary);
  position: relative;
  z-index: 1;
}

.category-card__count strong {
  color: var(--cat-color, var(--vcp-yellow));
}

/* Reduced motion for card badges */
@media (prefers-reduced-motion: reduce) {
  .stream-card:hover .stream-card__poster {
    transform: none;
  }

  .stream-card__badge--live,
  .stream-card__badge--live::before {
    animation: none;
  }

  .stream-card:hover,
  .category-card:hover {
    transform: none;
  }
}