/* ================================================================
   DAV STRAINS WORKROOM — mobile-music.css
   Compact 2-col Spotify-style rows + smaller mobile hero
   Upload to: assets/css/mobile-music.css
   ================================================================ */

/* ================================================================
   HERO — drastically smaller on mobile
   ================================================================ */
@media (max-width: 700px) {
  .hero,
  section.hero,
  .hero-section,
  #home.hero {
    min-height: unset !important;
    height: auto !important;
    padding: 28px 16px 24px !important;
  }

  .hero-content,
  .hero .hero-content {
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Compact headline */
  .hero h1,
  .hero-content h1,
  .hero-content .headline {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.18 !important;
    margin-bottom: 8px !important;
  }

  /* Hide hero subtext — save space */
  .hero p:not(.hero-sub-keep),
  .hero-content > p,
  .hero-content .lead,
  .hero-tagline {
    display: none !important;
  }

  /* Metrics row — hide on mobile to save space */
  .hero-metrics,
  .hero .metrics,
  .hero-stats {
    display: none !important;
  }

  /* Keep only the 3 CTA buttons, stack tightly */
  .hero-actions,
  .hero .button-row,
  .hero .btn-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
    justify-content: flex-start !important;
  }

  .hero-actions .btn,
  .hero-actions a.btn {
    min-height: 40px !important;
    font-size: 13px !important;
    padding: 0 18px !important;
    line-height: 40px !important;
  }
}

/* ================================================================
   MUSIC PAGE — Compact 2-column Spotify-style rows on mobile
   ================================================================ */
@media (max-width: 700px) {

  /* Track list grid container */
  #musicGrid,
  .music-grid,
  .dav-track-list,
  .track-list,
  .music-tracks {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px 12px 12px !important;
    background: transparent !important;
  }

  /* Each track item — compact horizontal card */
  .track-item,
  .dav-track-row,
  [data-track],
  .music-track,
  .track-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 58px !important;
    max-height: 64px !important;
    height: 60px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: background .15s !important;
  }

  .track-item:active,
  .dav-track-row:active {
    background: rgba(255,255,255,0.12) !important;
  }

  /* Album art — left square */
  .track-item img,
  .dav-track-row img,
  .track-art,
  .track-thumb,
  .track-cover,
  .track-item .cover,
  .track-item [class*="art"],
  .track-item [class*="thumb"],
  .track-item [class*="cover"] {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  /* Text column — right of art */
  .track-info,
  .track-meta,
  .track-details,
  .track-item .info,
  .track-item .meta {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 7px !important;
    overflow: hidden !important;
    flex: 1 !important;
    min-width: 0 !important;
    gap: 2px !important;
  }

  /* Track title */
  .track-title,
  .track-name,
  .track-item h3,
  .track-item h4,
  .dav-track-row .title,
  .track-item .name {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* Genre label under title */
  .track-genre,
  .genre-label,
  .track-item .genre,
  .track-item .tag,
  .track-item .sub,
  .track-item small {
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.35) !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
    display: block !important;
  }

  /* FULL / PREVIEW badge — tiny, bottom-right */
  .track-badge,
  .access-badge,
  .dav-badge,
  [class*="full-badge"],
  [class*="preview-badge"],
  .track-item .badge,
  .dav-track-row .badge {
    position: absolute !important;
    bottom: 4px !important;
    right: 4px !important;
    font-size: 7px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    padding: 2px 5px !important;
    border-radius: 3px !important;
    line-height: 1 !important;
  }

  /* Track number — hide on mobile */
  .track-num,
  .track-number,
  .track-index,
  .track-item .num,
  .dav-track-row .num {
    display: none !important;
  }

  /* Play button — small overlay on art */
  .track-item .play-btn,
  .strip-btn,
  .dav-track-row .play-btn,
  .track-item button[class*="play"] {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.55) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    color: #fff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    z-index: 2 !important;
  }

}

/* ================================================================
   MUSIC PAGE — 4 columns on tablet (601–900px)
   ================================================================ */
@media (min-width: 601px) and (max-width: 900px) {
  #musicGrid,
  .music-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
  }
}

/* ================================================================
   MUSIC PAGE — Keep existing row layout on desktop but wider
   ================================================================ */
@media (min-width: 901px) {
  #musicGrid,
  .music-grid {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 20px 24px !important;
  }
}

/* ================================================================
   GENRE FILTER — compact on mobile
   ================================================================ */
@media (max-width: 700px) {
  .genre-filter,
  #genreFilter {
    padding: 10px 12px 0 !important;
    gap: 6px !important;
  }

  .genre-filter button,
  #genreFilter button {
    font-size: 11px !important;
    padding: 6px 13px !important;
    min-height: 32px !important;
  }
}

/* ================================================================
   SECTION HEADINGS on music page — compact mobile
   ================================================================ */
@media (max-width: 700px) {
  .section-head,
  .section-head.left {
    padding: 16px 12px 4px !important;
  }

  .section-head h2 {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }

  .section-head .lead {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }
}

/* ================================================================
   AD PLACEHOLDER — compact on mobile
   ================================================================ */
@media (max-width: 700px) {
  .dav-media-placeholder {
    margin: 14px 12px !important;
    min-height: 120px !important;
    padding: 20px 16px !important;
  }
}