/* Streaming pills on release pages. Loaded after each page's inline styles so it wins.

   1. Logo sizing (every release page): one logo box for every platform, so the logos
      read as the same size. Each logo is fitted into the box by its real artwork shape.
      --bw is the widest a logo may be, --bh is the tallest.
   2. Stacked pills (singles only, class "stack" on #platformBar): equal-width pills.
      On phones they sit in rows of three and scroll away with the page. */

#platformBar {
  --bw: 150px;
  --bh: 38px;
}

#platformBar .plat img {
  height: auto;
  max-width: none;
}

/* artwork ratios: Apple 4.17, Spotify 3.23, Amazon 1.71 (tight boxes).
   YouTube and TIDAL are wide wordmarks, so they fill the box width. */
#platformBar .plat img[src*="apple"]   { width: min(var(--bw), calc(var(--bh) * 4.17)); }
#platformBar .plat img[src*="spotify"] { width: min(var(--bw), calc(var(--bh) * 3.23)); }
#platformBar .plat img[src*="amazon"]  { width: min(var(--bw), calc(var(--bh) * 1.71)); }
#platformBar .plat img[src*="youtube"],
#platformBar .plat img[src*="tidal"]   { width: var(--bw); }

#platformBar.stack {
  --pillH: 64px;
}

#platformBar.stack .plat {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: calc(var(--bw) + 56px);
  height: var(--pillH);
  padding: 0 14px;
}

@media (max-width: 768px) {
  #platformBar {
    --bw: min(110px, calc((100vw - 44px) / 3 - 16px));
    --bh: 22px;
  }

  #platformBar.stack {
    --pillH: 44px;
    position: absolute;
    flex-wrap: wrap;
    overflow: visible;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
  }

  #platformBar.stack::before,
  #platformBar.stack::after {
    display: none;
  }

  #platformBar.stack .plat,
  #platformBar.stack .plat:nth-child(4),
  #platformBar.stack .plat:nth-child(5) {
    display: inline-flex;
    flex: 0 0 calc((100% - 20px) / 3);
    width: auto;
    padding: 0 8px;
  }
}