/*
 * Afrikana Best Sounds
 * Global responsive layer
 * Mobile detection supports Android browsers exposing a 980px CSS viewport.
 */

/* ==========================================================
   MOBILE / TOUCH DEVICE
   ========================================================== */

@media (max-width: 767px), (hover: none) and (pointer: coarse) {

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ---------- HEADER ---------- */

  .abs-top-menu {
    padding: 12px 16px !important;
  }

  .abs-brand img {
    width: 46px !important;
    height: 46px !important;
  }

  .abs-brand strong {
    font-size: 17px !important;
  }

  .abs-brand small {
    font-size: 13px !important;
  }

  .abs-nav {
    display: none !important;
  }

  .app-bottom-nav {
    display: grid !important;
  }

  /* ---------- GENERAL LAYOUT ---------- */

  main,
  .section,
  .hero,
  .page-hero {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .section {
    margin: 14px !important;
    padding: 18px !important;
  }

  /* ---------- HERO ---------- */

  .hero,
  .compact-hero,
  .page-hero,
  .hero-section,
  .seo-hero {
    margin: 14px !important;
    padding: 28px 20px !important;
  }

  .hero h1,
  .page-hero h1,
  .seo-hero h1 {
    font-size: 36px !important;
    line-height: 1.08 !important;
  }

  .hero-text,
  .page-hero p:not(.eyebrow),
  .seo-hero .hero-text {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  /* ---------- SEARCH / FILTERS ---------- */

  .wall-tools,
  .search-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search-box input {
    width: 100% !important;
    min-height: 54px !important;
    font-size: 17px !important;
  }

  .filters {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .filter {
    min-height: 46px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
  }

  /* ========================================================
     HOME / DISCOVERY
     980px touch viewport -> TWO readable columns
     ======================================================== */

  .masonry {
    column-count: 2 !important;
    column-gap: 16px !important;
  }

  .masonry .card {
    margin-bottom: 16px !important;
  }

  .card-body {
    padding: 16px !important;
  }

  .card-body h3 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  .card-body p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* ========================================================
     PLAYLISTS
     IMPORTANT: actual cards live inside playlist-section-grid
     ======================================================== */

  body[data-page="playlists"] #playlistGrid {
    display: block !important;
  }

  body[data-page="playlists"] .playlist-section-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  body[data-page="playlists"] .playlist-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="playlists"] .playlist-card h3 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  body[data-page="playlists"] .playlist-card p {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  /* ========================================================
     WEBRADIOS
     ======================================================== */

  body[data-page="webradios"] #radioGrid,
  body[data-page="webradios"] .radio-grid,
  body[data-page="webradios"] .pro-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  body[data-page="webradios"] .radio-card.pro-card {
    display: block !important;
    width: 100% !important;
  }

  body[data-page="webradios"] .radio-media {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }

  body[data-page="webradios"] .radio-card h3 {
    font-size: 24px !important;
  }

  body[data-page="webradios"] .radio-card p {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  /* ---------- PLAYLIST DETAIL ---------- */

  .playlist-detail-hero,
  .playlist-detail-grid,
  .detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .playlist-videos-grid {
    column-count: 1 !important;
  }

  /* ---------- STATIC SEO ---------- */

  .seo-card,
  .seo-playlist-card,
  .seo-detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .seo-full-description,
  .seo-full-description p {
    font-size: 18px !important;
    line-height: 1.65 !important;
  }

  .seo-meta li {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .seo-discover-more ul {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ---------- BUTTONS ---------- */

  .hero-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .btn,
  a.btn,
  .download-app-btn,
  .page-download-app-cta,
  .listen-link {
    min-height: 50px !important;
    font-size: 16px !important;
  }

  /* ---------- FOOTER ---------- */

  .footer {
    padding-bottom: 120px !important;
  }
}

/* Real narrow viewport */
@media (max-width: 420px) {
  .masonry {
    column-count: 1 !important;
  }
}