/* Album pages share one skeleton: breadcrumbs, then the streaming pills, then the text card.
   Loaded after each page's inline styles. Pages: gold, sanguine, swinging, swimming, black.
   (The enemyX album and Style X have their own layouts.)

   Every measurement lives here as a variable, so the pages stay the same:

   --album-pills-top   top of the pill row (the row is pinned there)
   --album-pill-h      pill height
   --album-card-top    top of the text card, measured from the top of the page
   --album-flow-top    where in-flow content starts under the breadcrumbs (for pages
                       that position the card with padding)
   --album-nav-bottom  bottom edge of the breadcrumb row (for pages that position the
                       card with a margin)
   --album-card-*      card padding, corner radius and width

   Black draws its card on a canvas and reads these same variables in its script. */

:root {
  --album-pills-top: 90px;
  --album-pill-h: 64px;
  --album-icon-h: 40px;
  --album-card-top: 262px;
  --album-flow-top: 100px;
  --album-nav-bottom: 86px;
  --album-card-pad-y: 40px;
  --album-card-pad-x: 50px;
  --album-card-radius: 20px;
  --album-card-w: min(940px, calc(90% - 60px));
}

@media (max-width: 768px) {
  :root {
    --album-pills-top: 100px;
    --album-pill-h: 44px;
    --album-icon-h: 24px;
    --album-card-top: 236px;
    --album-flow-top: 93px;
    --album-nav-bottom: 79px;
    --album-card-pad-y: 25px;
    --album-card-pad-x: 20px;
    --album-card-radius: 16px;
    --album-card-w: calc(95% - 40px);
  }
}

#platformBar.album {
  --platformTop: var(--album-pills-top);
  --pillH: var(--album-pill-h);
  --iconH: var(--album-icon-h);
}

.album-card {
  padding: var(--album-card-pad-y) var(--album-card-pad-x);
  border-radius: var(--album-card-radius);
}

.album-card .album-title {
  margin-bottom: 25px;
}

.album-card .album-text {
  margin-bottom: 15px;
}

/* Seven pills (Black, Swimming) do not fit in one row below about 1180px.
   Keep them in one row that scrolls, centered when it fits, so the gap to the card stays the same. */
@media (max-width: 1180px) {
  #platformBar.album {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  #platformBar.album::-webkit-scrollbar {
    display: none;
  }

  #platformBar.album .plat {
    flex: 0 0 auto;
  }

  #platformBar.album::before,
  #platformBar.album::after {
    content: "";
    margin: auto;
  }
}