/* Mobile-only overrides for HotSupper homepage.
   Imported LAST in the page template so it loads after all component CSS.
   Targets are flat class names with html body prefix for maximum specificity. */

@media (max-width: 750px) {
  html body .artist-feature-card { grid-template-columns: 1fr !important; }
  html body .artist-feature-img { min-height: 220px !important; border-radius: 10px 10px 0 0 !important; }
  html body .artist-feature-body { padding: 20px 18px !important; }
  html body .grid-2,
  html body .grid-3 { grid-template-columns: 1fr !important; }
  html body .record-album-img { width: 120px !important; margin-left: 16px !important; }
  html body .content-inner { padding: 20px 18px 16px !important; }
  html body .artist-feature-bio,
  html body .record-body,
  html body .card-body { font-size: 1.1rem !important; line-height: 1.5 !important; }
  html body .wdib-desc,
  html body .wdib-backstory { font-size: 1.1rem !important; line-height: 1.4 !important; }
  html body .wdib-name { font-size: 0.8rem !important; }
  html body .artist-feature-name { font-size: 2.2rem !important; }
  html body .artist-feature-name a { font-size: 2.2rem !important; }
  html body .record-lyric { font-size: clamp(0.85rem, 2.4vw, 0.95rem) !important; }
  html body .ns-theme-preview { padding: 12px 20px !important; }
  html body .rec-inline-preview,
  html body .am-placeholder,
  html body .mini-song .yt-pill { padding: 6px 10px !important; }
  html body .mini-card-body,
  html body .mini-song { font-size: 1rem !important; }
  html body .card-label { font-size: clamp(0.72rem, 2.2vw, 0.85rem) !important; }
  html body .card-title,
  html body .record-title,
  html body .wdib-title,
  html body .ns-theme-title,
  html body .movie-title { font-family: var(--ns-font-serif) !important; font-size: 1.3rem !important; }
  html body .artist-feature-years { font-size: 0.9rem !important; }
  html body .artist-feature-tag { font-size: 0.8rem !important; }
  html body .wdib-artist-name { font-size: 1rem !important; }
  html body .mini-card-title { font-size: 1rem !important; }
  html body .wdib-compare-row { flex-wrap: nowrap !important; }
  html body .wdib-artist { min-width: 0 !important; }
  html body .wdib-img { width: 113px !important; height: 113px !important; }
  html body .wdib-img img { width: 100% !important; height: 100% !important; border-radius: 6px !important; object-fit: cover !important; }
}