/**
 * ===========================================================
 * 🎯 TCG Canais Showcase CSS — v5.0 PRO
 * ===========================================================
 * - Logos centralizados e uniformes
 * - Cards com altura consistente
 * - Scroll suave
 * - Dark mode Foxiz real
 */

.tcg-canais-showcase-wrapper {
  position: relative;
  max-width: 1180px;
  padding: 0 12px;
  margin: 35px auto 60px;
}

/* TITLE */
.tcg-canais-showcase-title {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  border-left: 6px solid #006633;
  padding-left: 12px;
  margin: 0 0 16px;
}

/* TRACK */
.tcg-canais-showcase-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 12px;
}
.tcg-canais-showcase-track::-webkit-scrollbar { display: none; }

/* CARD */
.tcg-canais-card {
  flex: 0 0 240px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e6e6e6;
  text-align: center;
  overflow: hidden;
  padding-bottom: 10px;
  transition: .25s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}

.tcg-canais-card:hover {
  border-color: #00aa55;
  transform: translateY(-4px);
}

/* LOGO — FULL FIX */
.tcg-canal-logo {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: contain;
  padding: 10px;
  background: #fafafa;
}

/* TITLE */
.tcg-canais-title {
  font-size: .95rem;
  font-weight: 800;
  padding: 10px 12px;
  min-height: 48px; /* uniformiza */
  color: #111;
}

/* NAVIGATION */
.tcg-canais-nav {
  position: absolute;
  right: 6px;
  top: 2px;
  display: flex;
  gap: 8px;
}

.tcg-canais-nav button {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: .25s;
}
.tcg-canais-nav button:hover {
  background: #006633;
  color: #fff;
}

/* DARK MODE */
[data-theme="dark"] .tcg-canais-card {
  background: #0f1116;
  border-color: #2a313b;
}
[data-theme="dark"] .tcg-canais-title {
  color: #e4e8ef;
}
[data-theme="dark"] .tcg-canal-logo {
  background: #151a21;
}
[data-theme="dark"] .tcg-canais-nav button {
  background: #1e2633;
  border-color: #2f3a48;
  color: #fff;
}
[data-theme="dark"] .tcg-canais-nav button:hover {
  background: #00c36b;
  color: #000;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .tcg-canais-card { flex: 0 0 70%; }
}
@media (max-width: 480px) {
  .tcg-canais-card { flex: 0 0 86%; }
  .tcg-canais-title { font-size: .88rem; }
}