/* =========================================================
   OSBEATS PRODUCTION
   TRENDING NOW MOBILE ARTWORK FIX V58.2A

   Fixes:
   - narrow/cut-off Trending Now artwork
   - conflicting 48px desktop-side rule vs mobile row rule
   - preserves current price/play controls
   - does NOT affect New Releases
   - does NOT affect desktop
   ========================================================= */


@media(max-width:700px){

  html body
  .os-universal-home
  .os-trending-panel
  #trendingGrid.card-row{

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    overflow:hidden !important;
  }


  html body
  .os-universal-home
  .os-trending-panel
  #trendingGrid
  .homepage-track-card{

    display:grid !important;

    grid-template-columns:
      92px
      minmax(0,1fr) !important;

    grid-template-rows:
      108px !important;

    align-items:center !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:108px !important;
    min-height:108px !important;
    max-height:108px !important;

    overflow:hidden !important;
  }


  /*
    Restore artwork from the narrow 48x40 desktop-side
    Trending dimensions to a proper square mobile thumbnail.
  */

  html body
  .os-universal-home
  .os-trending-panel
  #trendingGrid
  .homepage-track-cover-link{

    grid-column:1 !important;
    grid-row:1 !important;

    display:block !important;

    width:92px !important;
    min-width:92px !important;
    max-width:92px !important;

    height:92px !important;
    min-height:92px !important;
    max-height:92px !important;

    margin:0 !important;
    padding:0 !important;

    align-self:center !important;

    overflow:hidden !important;
  }


  html body
  .os-universal-home
  .os-trending-panel
  #trendingGrid
  .homepage-track-cover{

    position:relative !important;

    display:block !important;

    width:92px !important;
    min-width:92px !important;
    max-width:92px !important;

    height:92px !important;
    min-height:92px !important;
    max-height:92px !important;

    aspect-ratio:1 / 1 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
  }


  html body
  .os-universal-home
  .os-trending-panel
  #trendingGrid
  .homepage-track-cover-image{

    display:block !important;

    width:92px !important;
    min-width:92px !important;
    max-width:92px !important;

    height:92px !important;
    min-height:92px !important;
    max-height:92px !important;

    aspect-ratio:1 / 1 !important;

    object-fit:cover !important;
    object-position:center center !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;
  }


  /*
    Keep track information in the second column.
    Existing price/play controls remain untouched.
  */

  html body
  .os-universal-home
  .os-trending-panel
  #trendingGrid
  .homepage-track-body{

    grid-column:2 !important;
    grid-row:1 !important;

    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;

    overflow:hidden !important;
  }


  /*
    Continue hiding the obsolete artwork-overlay play icon.
    Existing real right-side play button remains unchanged.
  */

  html body
  .os-universal-home
  .os-trending-panel
  #trendingGrid
  .homepage-track-open{

    display:none !important;
  }

}


/* Extra-small phones */

@media(max-width:390px){

  html body
  .os-universal-home
  .os-trending-panel
  #trendingGrid
  .homepage-track-card{

    grid-template-columns:
      84px
      minmax(0,1fr) !important;

    grid-template-rows:
      100px !important;

    height:100px !important;
    min-height:100px !important;
    max-height:100px !important;
  }


  html body
  .os-universal-home
  .os-trending-panel
  #trendingGrid
  .homepage-track-cover-link,

  html body
  .os-universal-home
  .os-trending-panel
  #trendingGrid
  .homepage-track-cover,

  html body
  .os-universal-home
  .os-trending-panel
  #trendingGrid
  .homepage-track-cover-image{

    width:84px !important;
    min-width:84px !important;
    max-width:84px !important;

    height:84px !important;
    min-height:84px !important;
    max-height:84px !important;
  }

}


/* END OSBEATS V58.2A */