/* Breakpoint overrides — keep last in cascade. */

/* MOBILE only: <=640px collapses card 2-col grid into a single column so
 * the composite score stacks below the title row instead of crowding it. */
@media (max-width: 640px) {
  .model-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "score"
      "main"
      "actions";
  }
  .composite-score {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-2);
    text-align: left;
    width: 100%;
  }
  .composite-score .value { font-size: 1.3rem; }
}

/* TABLET: 641-1024 */
@media (min-width: 641px) {
  body { font-size: 15px; }
  .app-main { padding: var(--space-2) var(--space-4); gap: var(--space-3); }
  .app-title { font-size: 1.5rem; }
  .models-list { grid-template-columns: 1fr; }
  .model-card { padding: var(--space-3); }
  .filters-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* DESKTOP: >1024 */
@media (min-width: 1025px) {
  body { font-size: 15px; }
  .app-tagline { font-size: 0.92rem; }
  .app-title { font-size: 1.6rem; }
  .section-head h2 { font-size: 1.18rem; }
  .composite-score .value { font-size: 1.7rem; }
  .filters-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}