/* --- Page heads -------------------------------------------------------------------------------- */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}
.page-head h1 { margin: 0; }
.page-tools { display: flex; align-items: center; gap: var(--space-2); }
.page-settings { display: none; }
/* Hero headers have no .page-head: the button sits in their top right corner. */
.hero { position: relative; }
.hero-tools { position: absolute; top: calc(var(--page-top) / 2); right: var(--page-x); }

/* --- Heroes: album, playlist, artist -------------------------------------------------------- */

.album, .playlist, .artist, .feature { transition: --tint .2s var(--ease); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, clamp(10rem, 18vw, 14.5rem)) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: calc(-1 * var(--page-top)) calc(-1 * var(--page-x)) var(--space-6);
  padding: calc(var(--page-top) + clamp(1.5rem, 3vw, 2.5rem)) var(--page-x) var(--space-6);
  background: var(--bg);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--tint) 90%, var(--bg)) 0%,
    color-mix(in oklab, var(--tint) 46%, var(--bg)) 64%,
    var(--bg) 100%);
}
.hero-text { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--page-top) + clamp(2.5rem, 8vw, 6rem)); }
.hero .cover { width: 100%; height: auto; box-shadow: var(--shadow-cover); }
.hero-info { display: grid; gap: var(--space-1); min-width: 0; }
/* The title is the page's loud thing, but bounded: at most 3.5rem and three lines, so
   a long album name cannot push the tracklist off the first screen. It breaks between
   words (the page's `anywhere` would split "Dungeo / n"), and the line box leaves room
   for diacritics above and descenders below, which the clamp's overflow would cut. The
   full title stays in the DOM (the accessible name) and in title= (hero.js). No
   automatic hyphens: the page is lang="en", and a Finnish or Greek title would be
   hyphenated with English patterns; break-word handles a word too long for a line. */
.hero h1 {
  margin: 0 0 var(--space-2);
  padding: .06em 0 .12em;
  font-weight: 850;
  font-stretch: 118%;
  font-size: clamp(2rem, 2.4vw + 1rem, 3.5rem);
  line-height: 1;
  letter-spacing: -.035em;
  overflow-wrap: break-word;
  hyphens: manual;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* Over 40 characters (hero.js marks the header data-len="long"): a size and a width
   down, so a long name reads in its three lines instead of being cut after a few
   words. It out-ranks the phone size too (views/responsive.css). */
.hero[data-len="long"] h1 { font-size: clamp(1.75rem, 1.6vw + 1rem, 2.5rem); font-stretch: 110%; }
/* title= cannot be hovered with a finger, so where nothing hovers the clamp is lifted
   and the title shows in full (a phone sets a long one smaller, views/responsive.css). */
@media (hover: none) {
  .hero h1 { display: block; -webkit-line-clamp: unset; overflow: visible; }
}
/* A touch phone (320x568) would have Play below the fold under a long title: five lines
   there, the full title still in title= and in the DOM. */
@media (hover: none) and (max-width: 40rem) {
  .hero h1 { display: -webkit-box; -webkit-line-clamp: 5; overflow: hidden; }
}
.album-artist {
  margin: 0;
  color: var(--fg);
  font-size: var(--text-lg);
  font-weight: 500;
  text-decoration: none;
}
a.album-artist:hover { text-decoration: underline; }
.album-meta { margin: 0; color: var(--fg-muted); }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.hero-actions .star-btn { color: var(--fg); }
.hero-actions .star-btn[aria-pressed="true"] { color: var(--accent); }