/* TuneWrap Stage 12.13.5 — Mobile library 2-column premium grid */

@media (max-width:620px){

  /*
    Desktop/tablet already use a multi-column catalog.
    Phone now follows the same visual idea: two compact cards per row.
  */
  .music-library-card-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    align-items:stretch;
  }

  .music-library-panel .track,
  .music-library-panel .author-card{
    position:relative;
    display:grid!important;
    min-width:0;
    min-height:0!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto minmax(58px,auto)!important;
    align-content:start;
    align-items:start;
    padding:7px!important;
    overflow:hidden;
    border-radius:17px!important;
  }

  .music-library-panel .track .story-cover,
  .music-library-panel .author-cover{
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:1 / 1;
    grid-column:1!important;
    grid-row:1!important;
    margin:0!important;
    border-radius:13px!important;
    object-fit:cover;
  }

  /* Old generated fallback artwork uses the same square geometry. */
  .music-library-panel .author-card::before{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1 / 1;
    grid-column:1!important;
    grid-row:1!important;
    margin:0!important;
    border-radius:13px!important;
  }

  .music-library-panel .track-body,
  .music-library-panel .author-card .track-body{
    display:flex!important;
    min-width:0;
    min-height:0!important;
    width:100%;
    grid-column:1!important;
    grid-row:2!important;
    justify-content:flex-start!important;
    padding:9px 4px 3px!important;
  }

  .music-library-panel .track-title,
  .music-library-panel .author-card .track-title{
    display:-webkit-box!important;
    min-height:2.55em;
    margin:0 0 5px!important;
    overflow:hidden;
    font-size:12px!important;
    font-weight:750;
    line-height:1.28!important;
    text-overflow:clip;
    white-space:normal!important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  .music-library-card-meta{
    display:-webkit-box!important;
    min-height:2.5em;
    overflow:hidden;
    color:#8f8992;
    font-size:9px!important;
    font-weight:550;
    line-height:1.3!important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  /*
    Keep the quick play/pause action without opening Full Player.
    Put it over the artwork, like the Featured Story control.
  */
  .music-library-panel .play-btn{
    top:13px!important;
    right:13px!important;
    bottom:auto!important;
    width:36px!important;
    height:36px!important;
    margin:0!important;
    transform:none!important;
    border-color:rgba(255,241,210,.38)!important;
    background:rgba(12,12,14,.78)!important;
    box-shadow:0 8px 20px rgba(0,0,0,.28);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .music-library-panel .play-btn:hover,
  .music-library-panel .play-btn:active{
    transform:scale(.96)!important;
  }

  .music-library-panel .play-btn.playing{
    border-color:rgba(255,232,181,.5)!important;
    background:linear-gradient(135deg,#efc05b,#c98725)!important;
  }

  .music-library-panel .play-btn::before{
    border-width:5px 0 5px 8px!important;
  }

  .music-library-panel .play-btn.playing::before{
    width:11px!important;
    height:13px!important;
    background:
      linear-gradient(#171106,#171106) 0 0/3px 13px no-repeat,
      linear-gradient(#171106,#171106) 8px 0/3px 13px no-repeat!important;
  }

  .music-library-panel .story-meta,
  .music-library-panel .author-card .track-body::before,
  .music-library-panel .track-desc,
  .music-library-panel .listen-label,
  .music-library-panel canvas,
  .music-library-panel .track-time,
  .music-library-panel .author-track-meta{
    display:none!important;
  }

  /* A little more breathing room before the two-column catalog starts. */
  .music-library-results{
    margin-top:2px;
  }
}

/* Very narrow devices still keep two cards, but tighten spacing safely. */
@media (max-width:370px){
  .music-library-card-list{
    gap:8px!important;
  }

  .music-library-panel .track,
  .music-library-panel .author-card{
    padding:6px!important;
    border-radius:15px!important;
  }

  .music-library-panel .track-title,
  .music-library-panel .author-card .track-title{
    font-size:11px!important;
  }

  .music-library-panel .play-btn{
    top:11px!important;
    right:11px!important;
    width:33px!important;
    height:33px!important;
  }
}