/* StreamHub — Responsive Layout Rules */

/* ─── Phone (default, < 480px) ─── */
.channel-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.channel-card {
  padding: 0.75rem 0.5rem;
}

.channel-logo {
  width: 48px;
  height: 48px;
  font-size: 1rem;
}

.channel-name {
  font-size: 0.78rem;
}

.sub-metrics {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.metric-card {
  padding: 0.8rem 0.5rem;
}

.metric-value {
  font-size: 1.3rem;
}

/* ─── Small tablets (480px – 768px) ─── */
@media (min-width: 480px) {
  .channel-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
  }

  .channel-card {
    padding: 1rem;
  }

  .channel-logo {
    width: 52px;
    height: 52px;
  }
}

/* ─── Tablets (768px+) ─── */
@media (min-width: 768px) {
  .channel-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
  }

  .channel-card {
    padding: 1.2rem;
  }

  .channel-logo {
    width: 60px;
    height: 60px;
    font-size: 1.2rem;
  }

  .channel-name {
    font-size: 0.9rem;
  }

  .continue-card {
    width: 240px;
  }

  .quick-switch {
    grid-template-columns: repeat(4, 1fr);
  }

  .sub-metrics {
    gap: 1rem;
  }

  .metric-value {
    font-size: 2rem;
  }

  .container {
    padding: 0 1.5rem;
  }
}

/* ─── Laptops (1024px+) ─── */
@media (min-width: 1024px) {
  .channel-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .container {
    padding: 0 2rem;
  }

  .bottom-nav {
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 16px 16px 0 0;
  }

  .header {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 0 0 16px 16px;
  }

  .quick-switch {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ─── Large screens (1280px+) ─── */
@media (min-width: 1280px) {
  .channel-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}