/* ============================================================
   Growth Intelligence Dashboard — Responsive Breakpoints
   Desktop > 1200px (3 col) · Tablet 768–1200px (2 col) · Mobile < 768px (1 col)
   Loaded last — overrides breakpoints in cards.css and detail.css.
   ============================================================ */

/* ── Card grid ───────────────────────────────────────────────── */

/* 2 columns: 768px – 1200px */
@media (max-width: 1200px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 column: below 768px */
@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ── Detail panel ────────────────────────────────────────────── */

@media (max-width: 768px) {
  .detail-panel {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

/* ── App content padding ─────────────────────────────────────── */

@media (max-width: 768px) {
  #app-content {
    padding: 20px 14px;
  }
}

/* ── Filter bar ──────────────────────────────────────────────── */

/* Score slider: allow it to grow full-width on small screens */
@media (max-width: 768px) {
  .filter-group--score {
    width: 100%;
    max-width: none;
    flex: none;
  }

  /* Recency + sort selects: each stretch to fill available space */
  .filter-select {
    flex: 1;
    min-width: 120px;
  }

  #filter-bar {
    padding: 14px 14px 10px;
  }
}

/* ── No horizontal overflow on any width ─────────────────────── */

html, body {
  overflow-x: hidden;
}

#app-shell,
#app-content,
#filter-bar,
#cards-container {
  min-width: 0;
}