/* ------------------------------------------------------------------
 * music.css -- "Hörproben & Musik" section (ReverbNation player + the
 * streaming / buy platform buttons). Layered over the HalfTone theme,
 * non-destructive: remove the <link> in index.html to revert.
 *
 * Identity notes:
 *  - the section mirrors the centered .section-band block above it
 *  - the player sits in a cream card with a coral top edge, echoing the
 *    upcoming-gig event cards (css/events.css)
 *  - platform buttons reuse the theme's .link-button "ticket" (coral fill,
 *    offset shadow; restyle.css adds the uppercase + press). The brand
 *    glyphs are intentionally MONOCHROME (currentColor) so they stay in
 *    the Fifties coral/cream palette instead of clashing rainbow logos.
 * ------------------------------------------------------------------ */

.section-music {
  text-align: center;
  padding: 8px 0 20px;
}

/* Heading: match the calmer band headline (kill theme emboss/shadow) */
#main #musik .headline {
  margin: 8px auto 12px;
  font-weight: 400;
  color: #222;
  text-shadow: none !important;
  letter-spacing: 0.2px;
  font-size: clamp(1.4rem, 1rem + 2.1vw, 2rem);
  line-height: 1.25;
}

.section-music .music-lead {
  max-width: 62ch;
  margin: 0 auto 18px;
  line-height: 1.55;
  color: #444;
}

/* --- Player card -------------------------------------------------- */
.music-frame {
  max-width: 520px;
  margin: 0 auto 18px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.55);
  border-top: 3px solid #e37655;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}
.music-player {
  display: block;
  width: 100%;
  border: 0;
}

/* --- Album groups under the shared player ------------------------- */
.music-albums {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.music-album { width: 100%; }
.music-album-title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #bf553a;            /* --rb-coral-ink, see restyle.css */
}

/* --- Platform buttons (built on .link-button) --------------------- */
.music-links {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.music-links li { margin: 0; }

/* widen the ticket into an icon + label row with a comfortable target */
.music-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 10px 16px;
  font-size: 15px;
  text-decoration: none;
}
.music-btn:hover { text-decoration: none; }

.music-ico {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  fill: currentColor;
}
/* the CD disc is drawn with strokes, not a filled brand logo */
.music-ico--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* --- Quiet "more on ReverbNation" link ---------------------------- */
.music-more {
  margin: 16px 0 0;
  font-size: 0.95rem;
}
.music-more a {
  color: #bf553a;            /* --rb-coral-ink, see restyle.css */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.music-more a:hover { color: #1f7a7e; } /* --rb-teal */

/* --- Phone: keep the same 20px gutter as #band / .feature --------- */
@media (max-width: 767px) {
  .section-music { padding-inline: 20px; }
  .music-btn { padding: 12px 16px; } /* a touch taller for thumbs */
}