/* ==========================================================================
   IMABEATDUHPARTY — STREAMING CARDS
   --------------------------------------------------------------------------
   The platform promo cards (Apple Music, Spotify). Kept in their own file
   because they are shared, so both cards can never drift apart in corner
   radius, padding, spacing or type.
   ========================================================================== */

.stream-cta__panel {
  max-width: 46rem;
  display: grid;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  /* Grid items default to min-width:auto, which lets an unbreakable word
     like the brand name push the whole card wider than the screen. */
  min-width: 0;
}
.stream-cta__panel > * { min-width: 0; }

/* Matches --t-h2 exactly from 1440px up, but eases down a little faster on
   small screens so "IMABEATDUHPARTY" — one unbreakable 15-character word —
   fits inside the card on a 390px phone instead of forcing it wider. */
.stream-cta__title {
  font-size: clamp(1.6rem, 1.05rem + 2.75vw, 3.5rem);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  overflow-wrap: break-word;
}

/* The translucent surface the cards sit on */
.glass {
  background: rgb(14 6 8 / 0.52);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   Platform blocks — one rhythm shared by every service, so a new platform
   drops in looking like it belongs.
   ========================================================================== */
.stream-blocks {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.stream-block {
  display: grid;
  gap: var(--sp-5);
  min-width: 0;
}
.stream-blocks > * { min-width: 0; }

/* Artwork above a card. The frame takes each photograph's own aspect ratio,
   so every image is shown whole at every width — scaled, never cropped. */
.stream-visual {
  position: relative;
  margin: 0;
  aspect-ratio: var(--visual-ratio, 1536 / 1024);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.1);
  background-image: var(--art-lqip);
  background-size: cover;
  background-position: 50% 50%;
}
.stream-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.stream-visual.is-loaded img { opacity: 1; }

/* A soft vignette so the card below sits on the same cinematic ground as
   the rest of the site. */
.stream-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgb(0 0 0 / 0.5) 100%);
}

/* ==========================================================================
   Platform accents. The card, type and geometry stay identical — only the
   accent colour and the primary button change per service.
   ========================================================================== */
/* The listening room is 4:3, unlike the 3:2 Spotify shot */
.stream-block--apple { --visual-ratio: 1448 / 1086; }
.stream-block--apple .stream-visual {
  border-color: rgb(255 47 146 / 0.22);
  box-shadow: 0 20px 70px -30px rgb(255 47 146 / 0.5);
}
.stream-block--apple .stream-cta__panel {
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(255 47 146 / 0.12), transparent 62%),
    rgb(14 6 8 / 0.52);
}

.stream-block--spotify {
  --spotify: #1ed760;
}
.stream-block--spotify .stream-cta__panel {
  border-color: rgb(30 215 96 / 0.28);
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(30 215 96 / 0.1), transparent 62%),
    rgb(14 6 8 / 0.52);
}
.stream-block--spotify .eyebrow { color: var(--spotify); }
.stream-block--spotify .eyebrow::before {
  background: linear-gradient(90deg, var(--spotify), transparent);
}
.stream-block--spotify .stream-visual {
  border-color: rgb(30 215 96 / 0.22);
  box-shadow: 0 20px 70px -30px rgb(30 215 96 / 0.55);
}

.stream-block--youtube {
  --youtube: #ff3b3b;
}
.stream-block--youtube .stream-cta__panel {
  border-color: rgb(255 59 59 / 0.3);
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(255 59 59 / 0.12), transparent 62%),
    rgb(14 6 8 / 0.52);
}
.stream-block--youtube .eyebrow { color: var(--youtube); }
.stream-block--youtube .eyebrow::before {
  background: linear-gradient(90deg, var(--youtube), transparent);
}
.stream-block--youtube .stream-visual {
  border-color: rgb(255 59 59 / 0.24);
  box-shadow: 0 20px 70px -30px rgb(255 59 59 / 0.55);
}

.btn--youtube {
  background: var(--youtube, #ff3b3b);
  color: #170405;
}
.btn--youtube:hover,
.btn--youtube:focus-visible {
  background: #ff5f5f;
  box-shadow: 0 0 0 1px rgb(255 59 59 / 0.4), 0 8px 40px -8px rgb(255 59 59 / 0.6);
}

/* Platform-coloured primary button. Same geometry as .btn--primary. */
.btn--spotify {
  background: var(--spotify, #1ed760);
  color: #04120a;
}
.btn--spotify:hover,
.btn--spotify:focus-visible {
  background: #35e878;
  box-shadow: 0 0 0 1px rgb(30 215 96 / 0.4), 0 8px 40px -8px rgb(30 215 96 / 0.6);
}