/* MUSIC PROMO - home banner (replaces the marquee). Fluid: photo on the right on
   wide screens, photo on top and text below on phones. */
.mp-banner {
  position: relative; overflow: hidden; background: #000; border-radius: 20px;
  border: 1px solid var(--panel-line); min-height: 300px; display: flex; align-items: center;
  text-decoration: none; color: inherit; transition: border-color .2s ease;
}
.mp-banner:hover { border-color: var(--accent); }
.mp-banner:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.mp-banner:hover .mp-banner-hit { text-decoration: underline; text-underline-offset: 3px; }
.mp-banner-photo { position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: none; display: block; }
.mp-banner::after { /* keeps the text readable where it overlaps the photo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #000 0%, #000 38%, rgba(0,0,0,0.75) 58%, rgba(0,0,0,0) 78%);
}
.mp-banner-text {
  position: relative; z-index: 1; width: 100%; max-width: 620px;
  padding: clamp(28px, 4vw, 52px) clamp(22px, 5vw, 64px);
  display: flex; flex-direction: column;
}
.mp-banner-title {
  margin: 0; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
  text-transform: uppercase; color: #fff; font-size: clamp(44px, 6.4vw, 84px); line-height: 0.86; letter-spacing: -0.02em;
}
.mp-banner-sub { margin: 18px 0 0; color: #fff; font-size: clamp(18px, 2vw, 26px); line-height: 1.25; }
.mp-banner-story { display: flex; gap: 18px; align-items: flex-start; }
.mp-banner-icon {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: #1ED760;
  display: inline-flex; align-items: center; justify-content: center;
}
.mp-banner-icon svg { width: 20px; height: 20px; margin-left: 3px; fill: #000; }
.mp-banner-story-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mp-banner-kicker { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.mp-banner-hit { margin: 0; color: #fff; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; }
.mp-banner-support { margin: 4px 0 0; color: var(--ink-dim); font-size: clamp(13.5px, 1.25vw, 16px); line-height: 1.5; }
.mp-banner-story-text { gap: 10px; }

/* tablets: the photo slides further right under the gradient */
@media (max-width: 1000px) {
  .mp-banner-photo { right: -12%; }
  .mp-banner::after { background: linear-gradient(90deg, #000 0%, #000 45%, rgba(0,0,0,0.8) 65%, rgba(0,0,0,0.15) 90%); }
}
/* phones: photo on top, text below */
@media (max-width: 720px) {
  .mp-banner { flex-direction: column; align-items: stretch; min-height: 0; }
  .mp-banner::after { display: none; }
  .mp-banner-photo { position: relative; width: 100%; height: auto; right: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 72% 35%;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .mp-banner-text { max-width: none; padding: 6px 20px 26px; }
  .mp-banner-story { gap: 12px; }
  .mp-banner-icon { width: 40px; height: 40px; }
  .mp-banner-icon svg { width: 16px; height: 16px; }
}