/* ============ MOBILE FIRST ============ */
/* Base styles are for 320px+ */

/* ============ TABLET 640px+ ============ */
@media (min-width: 640px) {
  .topic-grid { grid-template-columns: repeat(2, 1fr); }
  .vocab-grid { grid-template-columns: repeat(2, 1fr); }
  /* Larger hero headline at tablet */
  .dashboard-hero h1 { font-size: 2.75rem; }
}

/* ============ DESKTOP 1024px+ ============ */
@media (min-width: 1024px) {
  .topic-grid { grid-template-columns: repeat(4, 1fr); }
  .vocab-grid { grid-template-columns: repeat(3, 1fr); }
  .container { padding: var(--sp-8) var(--sp-6); }
  .dialogue-wrapper { max-height: 640px; }
  .matching-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  /* Even larger hero at desktop */
  .dashboard-hero h1 { font-size: var(--fs-3xl); }
}

/* ============ SMALL MOBILE ≤375px ============ */
@media (max-width: 375px) {
  .quiz-selector { gap: var(--sp-2); }
  .quiz-type-btn { min-width: 90px; padding: var(--sp-3); }
  .topic-tab { padding: var(--sp-3) var(--sp-4); }
  .matching-grid { grid-template-columns: 1fr; }
  .matching-col { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .matching-item { flex: 1; min-width: 120px; min-height: 40px; }
  .quiz-results__actions { flex-direction: column; }
  .quiz-results__actions .btn { width: 100%; justify-content: center; }
  /* Tighter hero on tiny screens */
  .dashboard-hero { padding: 48px var(--sp-4) 40px; }
  .dashboard-hero h1 { font-size: 1.6rem; }
}