/* Shared base for SoundCloud / YouTube / Instagram cards */
.media {
  display: flex;
  flex-direction: column;
  background: var(--cream-light);
  overflow: hidden;
  min-height: 200px;
}
.media__visual {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.media__visual svg { width: 100%; height: 100%; display: block; }

/* Embed slot — used for SoundCloud + YouTube iframes */
.media__visual--embed {
  aspect-ratio: 16 / 11;
  background: #0f0f10;
}
.media__visual--embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Iframe that IS the visual (after yt-lite swap) — no nested positioning needed */
iframe.media__visual {
  border: 0;
  display: block;
  width: 100%;
}
.media__body {
  padding: 12px 16px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.media__eyebrow {
  font-family: var(--f-type);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}
.media__title {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.1;
}
.media__sub {
  font-family: var(--f-hand);
  font-size: 18px;
  color: var(--ink-soft);
}
.media__cta {
  background: var(--red);
  color: var(--cream-light);
  font-family: var(--f-type);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 12px;
  text-align: center;
  margin: auto -16px -14px;
  font-weight: 700;
  align-self: stretch;
}
.media__cta::before { content: "▸ "; }

/* SoundCloud variant — coast/sky illustration */
.media--soundcloud .media__visual {
  background: linear-gradient(180deg, #b3d4e8 0%, #d6e9f3 56%, #d4a86a 56%, #b58a4c 100%);
}

/* Lite-SoundCloud facade — same pattern as yt-lite */
.sc-lite {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: transparent;
  display: block;
}
.sc-lite__art {
  position: absolute;
  inset: 0;
  display: block;
}
.sc-lite__art svg { width: 100%; height: 100%; display: block; }
.sc-lite__play {
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: rgba(255, 85, 0, 0.92);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: background var(--hover-ms) var(--ease), transform var(--hover-ms) var(--ease);
}
.sc-lite__play::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  transform: translate(-35%, -50%);
}
.sc-lite__badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-family: var(--f-type);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 9px;
  border-radius: 2px;
  font-weight: 700;
}
.sc-lite:hover .sc-lite__play,
.sc-lite:focus-visible .sc-lite__play {
  background: var(--red);
  transform: scale(1.08);
}

/* YouTube variant — black background; lite-youtube click-to-play */
.media--youtube .media__visual { background: #0f0f10; }
.media--youtube .media__body {
  background: #0f0f10;
  color: var(--cream-light);
  margin: 0;
}
.media--youtube .media__title { color: var(--cream-light); }
.media--youtube .media__eyebrow { color: var(--yellow); }
.media--youtube .media__sub { color: var(--cream); opacity: 0.85; }

/* Lite-YouTube facade — a <button> that swaps to the real iframe on click.
   Keeps the giant red YouTube play button out of the initial page. */
.yt-lite {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: #0f0f10;
  display: block;
}
.yt-lite__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.88;
  transition: opacity var(--hover-ms) var(--ease);
}
.yt-lite__play {
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: rgba(20, 20, 22, 0.78);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: background var(--hover-ms) var(--ease), transform var(--hover-ms) var(--ease);
}
.yt-lite__play::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  transform: translate(-35%, -50%);
}
.yt-lite:hover .yt-lite__thumb { opacity: 1; }
.yt-lite:hover .yt-lite__play,
.yt-lite:focus-visible .yt-lite__play {
  background: var(--red);
  transform: scale(1.08);
}

/* Instagram variant — static photo, yellow backdrop */
.media--instagram .media__visual {
  background-color: var(--yellow);
  overflow: hidden;
}
.media--instagram .media__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
}
.media--instagram .media__visual-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%),
    linear-gradient(135deg, rgba(255, 119, 0, 0.28), rgba(220, 30, 90, 0.16) 60%, rgba(0,0,0,0));
  pointer-events: none;
}
.media--instagram .media__cta {
  background: transparent;
  color: var(--red);
  border: 1.5px solid var(--red);
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .media { min-height: 0; }
  /* Shallower visual — give the body more weight per card. */
  .media__visual { aspect-ratio: 16 / 8; }
  .media__visual--embed { aspect-ratio: 16 / 10; }
  /* IG photo: gently taller than landscape but not full square — 4/3
     reads as a proper photo, not a banner. */
  .media--instagram .media__visual { aspect-ratio: 4 / 3; }
  .media__body { padding: 10px 14px 12px; gap: 2px; }
  .media__title { font-size: 19px; }
  /* The "Full mixes, vinyl only" handwritten sub is decoration — drop on
     mobile to save vertical space. */
  .media__sub { display: none; }
  .media__cta { padding: 10px 12px; font-size: 11.5px; margin: 6px -14px -12px; }
}