/* ===== Edition system — music catalog, mobile (≤1024px) =====
   The mobile counterpart to pages/edition-catalog.css, in the same relationship
   that edition-mobile.css has to edition.css.

   The catalog's desktop rules sit in min-width:1025px blocks, so below that the
   page falls back to the pre-edition base stylesheets. edition-mobile.css
   restated the *skin* for narrow screens but deliberately set no layout
   ("nothing sets a fixed width"). This file is where catalog layout that a
   phone needs — and that shrinking the desktop grid cannot give it — belongs.

   Everything here is inside one @media (max-width: 1024px) block. Desktop is
   gated at min-width:1025px, so the two can never both apply and work on this
   file cannot reach the desktop design. */
@media (max-width: 1024px) {

  /* ---------- 1 · Category chips ----------
     Each chip is `Label<span class="cat-count">N</span>`. Below 1025px the chip
     computed to display:block, so the count ran straight into the label —
     "All70", "Compositions38". Desktop lays the chip out as a flex row with a
     gap and stamps the count; that treatment simply never reached mobile.

     Values match desktop exactly (gap 5.44px, stamp 10.88px/800/4px radius) so
     the two read as the same component at different sizes. What is NOT copied
     is the cast: mobile keeps its shorter 2px throw per edition-mobile.css,
     because a long throw eats space a phone does not have. */
  #catalog-filters .button-group.btn-group > button {
    display: flex;
    align-items: center;
    gap: 0.34rem;
  }

  /* The stamp, per "labels are small-caps stamps": flat, 4px radius, weight
     800, and never cast. Two grounds, per "light ground gets a white plate,
     dark ground gets a ghost" — an inactive chip is white, so a white stamp on
     it would vanish. This is the light-ground plate. */
  #catalog-filters .button-group.btn-group > button .cat-count {
    display: flex;
    align-items: center;
    padding: 0.06rem 0.24rem;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    border-radius: 4px;
    background: rgba(2, 6, 23, 0.08);
    color: rgb(56, 66, 82);
  }

  /* The active chip is navy: dark ground, so the stamp becomes a ghost. */
  #catalog-filters .button-group.btn-group > button.active .cat-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
  }

  /* ---------- 2 · Filter panel cast ----------
     The panel is a large sheet, so it takes the broad cast alpha (0.16).
     Desktop throws it 8px; mobile shortens the throw rather than dropping it,
     which is what the featured panel already does one section up the page:

       featured panel   mobile 2px 2px 0   desktop 8px 8px 0   <- adapted
       filter panel     mobile none        desktop 8px 8px 0   <- missed

     So this is the missing half of an existing pattern, not a new decision.
     box-shadow does not participate in layout, so it cannot disturb the
     panel's sticky behaviour. */
  #catalog-filters .filter-content {
    box-shadow: rgba(2, 6, 23, 0.16) 2px 2px 0 0;
  }

  /* ---------- 3 · Row type badges ----------
     "Colour carries meaning": Composition reads blue, Arrangement red, Featured
     a solid blue stamp. Desktop gives each a tinted plate; mobile had flattened
     Composition and Arrangement to the same translucent white, and rendered
     Featured as a light plate so it read as a Composition. The signal was gone.

     ui.css sets `.meta-badge.composition { background/border-color !important }`
     with no media query, so it applies at every width. Desktop only wins because
     edition-catalog.css answers with its own !important. Mobile had no such
     answer, which is the whole bug — so !important here is mirroring the
     established pattern, not forcing past a rule that meant to win.

     These are edition-catalog.css's own declarations (same tokens, same hsl
     values), so the two sizes stay in step if a token moves. Featured is matched
     the way desktop matches it — by the inline style JS writes, not by a class.

     Sizing is deliberately not copied: mobile's 12px/0.08em is its own
     legibility choice against desktop's 0.67rem/0.07em. Stamps stay flat and
     uncast at both sizes, which was already true. */
  .meta-badge.composition {
    background: var(--primary-100) !important;
    color: var(--primary-700) !important;
    border-color: hsl(220, 30%, 78%) !important;
  }

  .meta-badge.arrangement {
    background: hsl(0, 45%, 94%) !important;
    color: hsl(0, 55%, 38%) !important;
    border-color: hsl(0, 40%, 80%) !important;
  }

  /* Featured pill, inline-styled by JS → solid blue, same as the hero stamp. */
  .meta-badge[style*="primary-100"] {
    background: var(--primary-600) !important;
    color: #ffffff !important;
    border-color: var(--primary-700, hsl(220, 50%, 40%)) !important;
  }

  /* ---------- 4 · Row title weight ----------
     Not legacy cruft: edition-mobile.css section 6 ("Composition page") sets
     `.composition-title { font-weight: 900 !important }` as part of undoing a
     gradient-clipped title on the composition page. The selector is unscoped, so
     it also lands on every catalog row title, where 900 makes each list item
     shout like a hero. Desktop keeps rows at 700 and reserves 900 for the
     new-releases hero (edition-catalog.css:70).

     So this narrows a bleed rather than overriding a decision — the composition
     page keeps its 900, the catalog rows do not. !important is needed only
     because the rule being narrowed carries it.

     Colour and tracking are deliberately left alone: mobile resolves to
     rgb(20,28,46), which is exactly --ee-ink, where desktop's rgb(17,24,39) is
     off-token. Mobile is the more correct of the two here. */
  tr.composition-row h3.composition-title {
    font-weight: 700 !important;
  }

  /* ---------- 5 · Buy button seat ----------
     "Rest states belong to the component (a seated button keeps its 1px seat)".
     Same shape as the badges: edition.css sets `2px 2px 0` and a 1px navy edge
     with !important and no media query, and desktop answers with its own
     !important inside min-width:1025px. Mobile had no answer, so the CTA read as
     a plate lifting off the row instead of a control sitting in it.

     Mirrors edition.css:250 — same token, and the same three exclusions, so a
     free download keeps its own treatment ("free-download stays green"). */
  tr.composition-row .buy-button:not(.free):not(.free-download-btn):not(.contact-btn) {
    box-shadow: 0 1px 0 var(--ee-cast) !important;
    border: 0 !important;
  }

  /* ---------- 6 · Tablet row ----------
     Phone stacks the row: cover+text on one line, the actions full width
     underneath, 226px total. That is right at 393px and wasteful at 768-1024,
     where the row still stacked all the way to the seam and only became
     horizontal at 1025.

     This is not desktop's layout — desktop is a four-column grid that also
     shows duration and year, and those columns stay hidden here. It is the
     middle reading: cover and text inline, the two actions as a column on the
     right, sized by their own content rather than stretched. */
  @media (min-width: 768px) {

    .compositions-table tbody tr.composition-row {
      flex-direction: row;
      align-items: center;
      gap: 1rem;
    }

    /* The info cell takes the slack; min-width:0 lets a long title ellipsise
       instead of forcing the row wider than the track. */
    tr.composition-row > td:first-child {
      flex: 1 1 auto;
      min-width: 0;
    }

    tr.composition-row > td.composition-action {
      flex: 0 0 auto;
      width: auto;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: center;
      gap: 0.5rem;
    }

    /* Was stretched to the full row width by the stacked layout. */
    tr.composition-row .buy-button {
      width: 100%;
    }

  }

}