/* Afrikana mobile responsive layer — 2026-08-26
   Applies both to a normal narrow viewport and to touch phones whose browser
   exposes a desktop-like CSS viewport (e.g. Android Chrome desktop-site mode). */

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-width: 0 !important; overflow-x: hidden !important; }
  main, .section, .hero, .page-hero, .seo-static-page main { min-width: 0 !important; max-width: 100% !important; }

  /* Header: compact, genuinely mobile. */
  .abs-top-menu { padding: 10px 14px !important; gap: 10px !important; }
  .abs-brand img { width: 40px !important; height: 40px !important; }
  .abs-brand strong { font-size: 15px !important; }
  .abs-brand small { font-size: 11px !important; }
  .abs-nav { display: none !important; }
  .app-bottom-nav { display: grid !important; }

  /* Page spacing and typography. */
  .hero, .compact-hero, .page-hero, .hero-section, .seo-hero {
    margin: 12px !important; padding: 24px 18px !important; border-radius: 22px !important;
  }
  .hero h1, .page-hero h1, .seo-hero h1 { font-size: clamp(30px, 8vw, 42px) !important; line-height: 1.04 !important; }
  .hero-text, .page-hero p:not(.eyebrow), .seo-hero .hero-text { font-size: 17px !important; line-height: 1.5 !important; }
  .section { margin: 12px !important; padding: 16px !important; border-radius: 22px !important; }
  .section-head, .clean-head { gap: 12px !important; }
  .wall-heading, .section h2 { font-size: 27px !important; line-height: 1.1 !important; }
  .wall-subtitle, .section p { line-height: 1.5; }

  /* Search and filters must wrap instead of shrinking. */
  .wall-tools, .search-box { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .search-box input { width: 100% !important; min-height: 50px !important; font-size: 16px !important; }
  .filters { width: 100% !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: flex-start !important; }
  .filter { min-height: 42px !important; padding: 0 14px !important; font-size: 14px !important; }

  /* Discovery wall: two readable tiles on phones, never one enormous desktop tile. */
  .masonry { column-count: 2 !important; column-gap: 10px !important; }
  .masonry .card { margin-bottom: 10px !important; }
  .card-body { padding: 12px !important; }
  .card-body h3 { font-size: 16px !important; line-height: 1.22 !important; }
  .card-body p { font-size: 14px !important; line-height: 1.42 !important; }

  /* Catalogue/list grids: one proper card per row on a phone. */
  .pro-grid,
  .playlist-grid,
  .playlist-section-grid,
  .radio-grid,
  #playlistGrid,
  #radioGrid,
  body[data-page="webradios"] .pro-grid,
  body[data-page="webradios"] #radioGrid {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important;
  }
  .playlist-card, .radio-card, .pro-card { min-width: 0 !important; width: 100% !important; }
  .playlist-card .pro-card-body, .radio-card .pro-card-body, .playlist-body { padding: 16px !important; }
  .playlist-card h3, .radio-card h3, .pro-card h3 { font-size: 20px !important; line-height: 1.2 !important; }
  .playlist-card p, .radio-card p, .pro-card p { font-size: 16px !important; line-height: 1.5 !important; }

  /* WebRadio cards are vertical, not desktop split cards. */
  .radio-card.pro-card { display: block !important; grid-template-columns: none !important; }
  .radio-media, .media-tile.radio-media { width: 100% !important; aspect-ratio: 16 / 9 !important; min-height: 0 !important; }

  /* Playlist universes and detail pages. */
  .playlist-universe-head { flex-direction: column !important; align-items: flex-start !important; }
  .playlist-detail-hero, .seo-card, .seo-playlist-card, .seo-detail-grid, .detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .seo-full-description, .seo-full-description p { font-size: 17px !important; line-height: 1.65 !important; }
  .seo-meta li { font-size: 15px !important; line-height: 1.45 !important; }
  .seo-discover-more ul { grid-template-columns: minmax(0, 1fr) !important; }

  /* CTAs: touch-size and wrapping. */
  .hero-buttons { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
  .btn, a.btn, .download-app-btn, .page-download-app-cta, .listen-link {
    min-height: 46px !important; font-size: 15px !important;
  }

  /* Footer + bottom app banner clearance. */
  .footer { padding-bottom: 118px !important; }
}

/* Very narrow phones: Discovery becomes one column to preserve legibility. */
@media (max-width: 380px) {
  .masonry { column-count: 1 !important; }
}

/* Keep the two app platforms visible on pages without a mobile bottom menu. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  body:not(:has(.app-bottom-nav)) .abs-top-menu {
    height: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  body:not(:has(.app-bottom-nav)) .abs-nav:has(.app-store-link) {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    border-radius: 18px !important;
    gap: 8px !important;
  }
  body:not(:has(.app-bottom-nav)) .abs-nav > a:not(.app-store-link) { display: none !important; }
  body:not(:has(.app-bottom-nav)) .abs-nav > .app-store-link {
    flex: 1 1 120px;
    max-width: none;
    padding: 8px !important;
  }
}