/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Cinematic Gold
═══════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  .trainer-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 0 16px; }
}
@media (min-width: 640px) {
  .trainer-grid { grid-template-columns: repeat(3, 1fr); }
  .trainer-card-name { font-size: 14px; }
  .video-card { flex: 0 0 280px; }
  .video-thumb-wrap { width: 280px; height: 158px; }
  .modal-panel { border-radius: var(--r-lg); max-height: 92dvh; }
  .modal { padding: 20px; }
}
@media (min-width: 1024px) {
  .trainer-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0 24px; }
  .cat-hero { padding: 40px 24px 14px; }
  .detail-banner { max-width: 900px; margin: 0 auto; }
  .detail-content { padding: 24px; }
  .header-inner { padding: 0 24px; }
}
@media (min-width: 1280px) {
  .trainer-grid { grid-template-columns: repeat(5, 1fr); }
}