.recent-listening {
  container-type: inline-size;
  margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-xl);
  padding: 34px 29px 39px;
  background: linear-gradient(to bottom, #c9d9da, #e8f1f4);
}
.recent-listening__intro { display: flex; align-items: center; gap: 15px; margin-block-end: 25px; color: #424242; }
.recent-listening__intro-icon { position: relative; flex: 0 0 50px; height: 50px; }
.recent-listening__intro-icon img { position: absolute; top: 0; left: -1px; max-width: none; }
.recent-listening__intro-copy { min-width: 0; overflow-wrap: anywhere; }
.recent-listening__intro-title { margin: 0; font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: 30px; }
.recent-listening__intro-subtitle { margin: 0; font-size: 17px; font-weight: var(--font-weight-medium); line-height: 30px; }
.recent-listening__panel {
  padding: 15px 24px 20px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 35px;
  background: linear-gradient(to bottom, rgba(233, 250, 255, 0.65), rgba(233, 233, 233, 0.8) 80.769%, #fff);
  box-shadow: 0 25px 20px -10px rgba(40, 49, 63, 0.25);
}
[data-theme="dark"] .recent-listening { background: linear-gradient(to bottom, #38404d, #1d2026); }
[data-theme="dark"] .recent-listening__intro { color: #e4e4e7; }
[data-theme="dark"] .recent-listening__panel {
  background: linear-gradient(to bottom, rgba(233, 250, 255, 0.05), rgba(233, 233, 233, 0.35) 80.769%, rgba(255, 255, 255, 0.5));
  background-clip: padding-box;
}
.recent-listening[hidden] { display: none; }
.recent-listening__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-end: var(--space-md);
}
.recent-listening__header h2 { margin: 0; font-size: var(--font-size-xl); color: var(--color-text-heading); }
.recent-listening__header a { color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.recent-listening__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.recent-listening[data-count="1"] .recent-listening__items { grid-template-columns: minmax(0, 1fr); }
.recent-listening[data-count="3"] .recent-listening__card:first-child { grid-row: span 2; }
.recent-listening__card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-areas: "art eyebrow" "art name" "art subtitle" "art cta";
  align-content: center;
  gap: 6px 16px;
  padding: 14px;
  min-width: 0;
  border: 1px solid var(--color-border-muted);
  border-radius: 20px;
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-md);
  color: var(--color-text-heading);
  text-decoration: none;
}
.recent-listening__card:hover { border-color: var(--color-primary); text-decoration: none; }
.recent-listening__card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.recent-listening__art { grid-area: art; width: 112px; height: 112px; object-fit: contain; border-radius: var(--radius-xl); align-self: center; }
.recent-listening__eyebrow { grid-area: eyebrow; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; }
.recent-listening__name { grid-area: name; margin: 0; font-size: var(--font-size-lg); line-height: 1.25; overflow-wrap: anywhere; }
.recent-listening__subtitle { grid-area: subtitle; color: var(--color-text-secondary); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.recent-listening__cta {
  grid-area: cta; display: flex; align-items: center; justify-content: center; gap: 10px;
  justify-self: start; min-height: 44px; padding: 8px 16px; border: 1px solid #fff; border-radius: 22px;
  background: linear-gradient(178.47946deg, #43a9ed 3.6016%, #4e77fd 94.922%);
  box-shadow: 0 12px 5px -8px rgba(28, 2, 85, 0.2);
  color: #fff; font-weight: 700; line-height: 1.25; text-align: center;
}
.recent-listening__cta .ui-sprite { filter: brightness(0) invert(1); flex-shrink: 0; }
.recent-listening [hidden] { display: none; }
.recent-listening[data-count="1"] .recent-listening__card { grid-template-columns: 136px minmax(0, 1fr) auto; grid-template-areas: "art eyebrow cta" "art name cta" "art subtitle cta"; }
.recent-listening[data-count="1"] .recent-listening__art { width: 136px; height: 136px; }
.recent-listening[data-count="1"] .recent-listening__name { font-size: var(--font-size-3xl); }
.recent-listening[data-count="1"] .recent-listening__cta { align-self: center; min-height: 60px; font-size: var(--font-size-xl); }
.recent-listening__card--compact { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "art eyebrow cta" "art name cta"; gap: 3px 10px; padding: 10px; }
.recent-listening__card--compact .recent-listening__art { width: 52px; height: 52px; border-radius: 10px; }
.recent-listening__card--compact .recent-listening__name { font-size: var(--font-size-base); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.recent-listening__card--compact .recent-listening__subtitle { display: none; }
.recent-listening__card--compact .recent-listening__cta { align-self: center; padding: 8px; font-size: var(--font-size-sm); max-width: 130px; }
@container (max-width: 760px) {
  .recent-listening__items { grid-template-columns: minmax(0, 1fr); }
  .recent-listening[data-count="3"] .recent-listening__card:first-child { grid-row: auto; }
  .recent-listening__card, .recent-listening[data-count="1"] .recent-listening__card {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas: "art eyebrow" "name name" "subtitle subtitle" "cta cta";
    gap: 10px;
  }
  .recent-listening__art, .recent-listening[data-count="1"] .recent-listening__art { width: 36px; height: 36px; border-radius: 8px; }
  .recent-listening__eyebrow { align-self: center; }
  .recent-listening__name, .recent-listening[data-count="1"] .recent-listening__name { font-size: var(--font-size-2xl); }
  .recent-listening__cta, .recent-listening[data-count="1"] .recent-listening__cta { justify-self: stretch; min-height: 44px; font-size: var(--font-size-base); }
  .recent-listening__card--compact { grid-template-columns: 48px minmax(0, 1fr) minmax(70px, 95px); grid-template-areas: "art eyebrow cta" "art name cta"; gap: 3px 8px; }
  .recent-listening__card--compact .recent-listening__art { width: 48px; height: 48px; }
  .recent-listening__card--compact .recent-listening__eyebrow { font-size: 10px; }
  .recent-listening__card--compact .recent-listening__cta { font-size: var(--font-size-xs); gap: 4px; padding: 6px; }
}
@media (max-width: 768px) {
  .recent-listening { margin-block-start: calc(-1 * var(--space-sm)); margin-inline: calc(-1 * var(--space-sm)); padding: 16px; }
  .recent-listening__panel { padding: 12px; border-radius: 20px; }
}