/* Small, hand-written additions for the DolphCMS static kryxal.com pages.
   Everything else comes from style.css (Bulma + Kryxal's own "exoskeleton" theme) — unchanged.
   These rules exist because the old site never needed real navigable pages: it was one
   page with JS-built modal popups, so a couple of things (a plain track list) never had
   their own class. Kept intentionally short — fold into style.scss instead if these should
   become part of the base theme rather than a page-only extra. */

.track-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.track-list li {
  margin-bottom: 0.75em;
}

/* style.css centers each .pipe-phonogram vertically within its grid row
   (align-items: center). That's fine when every caption is the same
   number of lines, but on pages where captions vary — e.g. the homepage's
   "All Releases" grid mixes short and long artist/title combinations —
   centering pushes shorter items' covers down out of line with their
   row-mates. Aligning to the start keeps every cover flush with the top
   of its row regardless of how many lines the caption below it wraps to. */
.phonogram-pipe {
  align-items: start;
}

/* Same problem, same fix, for the homepage's "Latest Phonograms" 2-up
   grid — style.css also centers it (align-items: center), which
   dislocates the shorter caption's cover out of line with the other. */
.latest-phonograms {
  align-items: start;
}

/* style.css's global `img { max-width: 100% }` reset only ever shrinks an
   oversized image down to its container — it never grows a smaller one up
   to fill it. Cover art across the site was exported at inconsistent
   pixel sizes (mostly 300x300 thumbnails, but a couple of releases have
   larger source images), so on a wide grid track a "small" cover renders
   visibly smaller than its row-mates instead of filling the same cell.
   Forcing width:100% makes every cover fill its grid cell uniformly no
   matter what size the underlying file actually is. */
.phonogram-pipe .pipe-phonogram img,
.latest-phonograms .late-phonogram img {
  width: 100%;
}

/* Both grids are sized in style.css for desktop (5 across for "All
   Releases", 2 across for "Latest Phonograms"). On phones that leaves
   covers too small to read, and makes any left-over size/alignment
   difference between items far more obvious. Fewer, wider columns below
   Bulma's own mobile breakpoint (768px, used throughout style.css). */
@media screen and (max-width: 768px) {
  .phonogram-pipe {
    grid-template-columns: 31% 31% 31%;
  }
  .latest-phonograms {
    grid-template-columns: 100%;
  }
}

@media screen and (max-width: 480px) {
  .phonogram-pipe {
    grid-template-columns: 48% 48%;
  }
}