// ============================================================================
// Hub Page — Responsive AgentCard Grid
// Desktop (≥1024px): 2×2 grid
// Mobile (<1024px): single-column stack
// ============================================================================

.hub-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: var(--cc-section-padding, 16px);
  min-height: 400px;
  overflow-x: hidden;
}

.hub-page__title {
  grid-column: 1 / -1;
  font-size: 24px;
  font-weight: 600;
  color: var(--cc-on-surface);
  margin: 0 0 8px;
}

.hub-page__placeholder,
.hub-page__empty {
  color: var(--cc-on-surface-variant);
  font-size: 16px;
  text-align: center;
  padding: 24px 0;
}

// Desktop / kiosk breakpoint — 2-column grid
@media (min-width: 1024px) {
  .hub-page {
    grid-template-columns: repeat(2, 1fr);
  }
}