/* Homepage editorial Spotlight rail — isolated from #songList / virtual grid */

.spotlightEditorial{
  --spotlight-pad-x: calc(var(--page-content-pad-x) + var(--utility-dock-clearance));
  --spotlight-gap-hero: clamp(18px, 3vh, 28px);
  --spotlight-gap-grid: clamp(12px, 1.8vh, 18px);
  position:relative;
  z-index:6;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:clamp(14px, 2vh, 22px) 0 clamp(12px, 1.6vh, 16px);
  isolation:isolate;
}

/* Compact flow when visible: shorter hero, natural gaps — no overlap into disco ball */
body.has-spotlight-editorial .heroTitleWrap.heroTitleWrap--belowSearch{
  min-height:clamp(236px, 31vh, 400px);
  max-height:440px;
  padding-bottom:clamp(4px, 0.55vh, 8px);
}

body.has-spotlight-editorial .spotlightEditorial{
  margin-top:var(--spotlight-gap-hero);
  padding-top:clamp(10px, 1.5vh, 16px);
  padding-bottom:clamp(14px, 1.8vh, 20px);
}

body.has-spotlight-editorial .spotlightEditorial::after{
  content:"";
  position:absolute;
  left:var(--spotlight-pad-x);
  right:var(--spotlight-pad-x);
  bottom:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(168, 120, 255, 0.22) 18%,
    rgba(255, 200, 120, 0.16) 82%,
    transparent 100%
  );
  box-shadow:0 1px 24px rgba(120, 80, 200, 0.08);
}

body.has-spotlight-editorial .spotlightEditorial__header{
  margin-bottom:clamp(10px, 1.3vh, 14px);
  gap:8px 16px;
}

body.has-spotlight-editorial .spotlightEditorial__eyebrow{
  margin:0 0 3px;
}

body.has-spotlight-editorial .spotlightEditorial__rotationLabel{
  margin:0 0 3px;
}

.spotlightEditorial[hidden]{
  display:none !important;
}

.spotlightEditorial__glow{
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  opacity:0.28;
  filter:none;
  will-change:opacity;
}

.spotlightEditorial__glow--violet{
  width:min(44vw, 420px);
  height:min(44vw, 420px);
  left:max(-6%, calc(var(--spotlight-pad-x) - 60px));
  top:-14%;
  background:radial-gradient(circle at 40% 50%, rgba(168, 108, 255, 0.11) 0%, rgba(120, 60, 220, 0.04) 40%, transparent 62%);
}

.spotlightEditorial__glow--gold{
  width:min(36vw, 360px);
  height:min(36vw, 360px);
  right:max(-4%, calc(var(--spotlight-pad-x) - 48px));
  top:10%;
  background:radial-gradient(circle at 55% 45%, rgba(255, 210, 96, 0.09) 0%, rgba(255, 168, 48, 0.03) 42%, transparent 65%);
}

.spotlightEditorial__inner{
  position:relative;
  padding-left:var(--spotlight-pad-x);
  padding-right:var(--spotlight-pad-x);
}

.spotlightEditorial__header{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px 20px;
  margin-bottom:clamp(14px, 2vh, 22px);
}

.spotlightEditorial__eyebrow{
  margin:0 0 6px;
  font-family:"Sora", system-ui, sans-serif;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(210, 188, 255, 0.72);
}

.spotlightEditorial__title{
  margin:0;
  font-family:"Sora", system-ui, sans-serif;
  font-size:clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.1;
  color:rgba(248, 244, 255, 0.98);
  text-shadow:0 0 28px rgba(168, 120, 255, 0.25);
}

.spotlightEditorial__rotation[hidden]{
  display:none !important;
}

.spotlightEditorial__rotation{
  flex:0 1 auto;
  min-width:0;
  text-align:right;
}

.spotlightEditorial__rotationLabel{
  margin:0 0 4px;
  font-family:"Sora", system-ui, sans-serif;
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(200, 176, 255, 0.62);
}

.spotlightEditorial__rotationTimer{
  margin:0;
  font-family:"Sora", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-size:clamp(0.95rem, 1.6vw, 1.12rem);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:0.04em;
  line-height:1.2;
  color:rgba(255, 236, 196, 0.96);
  text-shadow:0 0 18px rgba(255, 196, 96, 0.18);
  white-space:nowrap;
}

.spotlightEditorial__hint{
  margin:0;
  max-width:28ch;
  font-size:0.82rem;
  line-height:1.45;
  color:rgba(200, 192, 224, 0.62);
}

.spotlightEditorial__scroller{
  display:flex;
  gap:0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scroll-padding-left:var(--spotlight-pad-x);
  scroll-padding-right:var(--spotlight-pad-x);
  padding-bottom:6px;
  margin:0 calc(-1 * var(--spotlight-pad-x));
  padding-left:var(--spotlight-pad-x);
  padding-right:var(--spotlight-pad-x);
  scrollbar-width:thin;
  scrollbar-color:rgba(168, 120, 255, 0.35) transparent;
}

.spotlightEditorial__scroller::-webkit-scrollbar{
  height:6px;
}

.spotlightEditorial__scroller::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(168, 120, 255, 0.32);
}

.spotlightEditorial__track{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:clamp(14px, 2vw, 20px);
  min-height:0;
}

.spotlightFeatCard{
  --spotlight-card-w: clamp(280px, 42vw, 360px);
  flex:0 0 var(--spotlight-card-w);
  width:var(--spotlight-card-w);
  scroll-snap-align:start;
  scroll-snap-stop:normal;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  min-height:0;
  padding:16px 16px 14px;
  -webkit-user-select:none;
  user-select:none;
  border-radius:18px;
  border:1px solid rgba(251, 146, 60, 0.3);
  background:linear-gradient(155deg, rgba(18, 12, 32, 0.92) 0%, rgba(10, 8, 20, 0.88) 55%, rgba(14, 10, 8, 0.9) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 220, 120, 0.05) inset,
    0 14px 40px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(200, 120, 40, 0.06);
  color:rgba(240, 236, 255, 0.96);
  contain:layout style paint;
  content-visibility:auto;
  contain-intrinsic-size:var(--spotlight-card-w) 200px;
  transition:border-color 0.28s ease, box-shadow 0.28s ease;
}

.spotlightFeatCard::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(255, 210, 96, 0.28), rgba(251, 146, 60, 0.22) 52%, rgba(255, 180, 80, 0.14));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:0.45;
}

.spotlightFeatCard__star{
  position:absolute;
  top:14px;
  right:14px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255, 210, 120, 0.35);
  background:rgba(40, 28, 8, 0.55);
  color:rgba(255, 228, 160, 0.95);
  pointer-events:none;
}

.spotlightFeatCard__star svg{
  width:14px;
  height:14px;
}

.spotlightFeatCard__title{
  margin:0 28px 4px 0;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  font-family:"Sora", system-ui, sans-serif;
  font-size:1.12rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.02em;
  color:rgba(252, 248, 255, 0.98);
}

.spotlightFeatCard__title .songCardProtoTitleClamp{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

.spotlightFeatCard__title .songCardProtoTitleRow{
  display:grid;
  grid-template-columns:max-content minmax(0, 1fr);
  grid-template-rows:auto;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
}

.spotlightFeatCard__title .songCardProtoTitleRow--plain{
  width:100%;
  max-width:100%;
  grid-template-columns:minmax(0, 1fr);
}

.spotlightFeatCard__title .songCardProtoTitleLead{
  grid-column:1;
  grid-row:1;
  min-width:0;
}

.spotlightFeatCard__title .songCardProtoTitleRow--plain .songCardProtoTitleLead{
  overflow:hidden;
  text-overflow:ellipsis;
}

.spotlightFeatCard__title .songCardProtoTitleTail{
  grid-column:2;
  grid-row:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.spotlightFeatCard__artist{
  margin:0 0 12px;
  font-size:0.88rem;
  font-weight:500;
  line-height:1.35;
  color:rgba(200, 188, 230, 0.82);
}

.spotlightFeatCard__artist.songArtist{
  position:relative;
  top:0;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:1;
}

.spotlightFeatCard__artist.songArtist:has(.songArtist__fit){
  text-overflow:clip;
}

.spotlightFeatCard__artist .songArtist__fit{
  display:block;
  min-width:0;
  white-space:nowrap;
}

.spotlightFeatCard--noBlurb .spotlightFeatCard__artist{
  margin-bottom:12px;
}

.spotlightFeatCard__blurb{
  margin:0 0 12px;
  font-size:0.8rem;
  line-height:1.45;
  color:rgba(188, 180, 210, 0.72);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.spotlightFeatCard__stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:0;
  padding-top:12px;
  border-top:1px solid rgba(251, 146, 60, 0.16);
}

.spotlightFeatCard__stat{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.spotlightFeatCard__statLabel{
  font-size:0.62rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(168, 150, 210, 0.55);
}

.spotlightFeatCard__statValue{
  font-family:"Sora", system-ui, sans-serif;
  font-size:0.95rem;
  font-weight:600;
  color:rgba(240, 232, 255, 0.94);
}

.spotlightFeatCard__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.spotlightFeatBtn{
  flex:1 1 auto;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:38px;
  padding:0 14px;
  border-radius:11px;
  border:1px solid rgba(168, 130, 255, 0.28);
  background:rgba(22, 14, 38, 0.75);
  color:rgba(248, 244, 255, 0.95);
  font-family:inherit;
  font-size:0.82rem;
  font-weight:600;
  cursor:pointer;
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease;
  will-change:transform;
}

.spotlightFeatBtn svg{
  width:16px;
  height:16px;
  flex-shrink:0;
}

.spotlightFeatBtn--preview{
  border-color:rgba(96, 210, 120, 0.35);
  background:rgba(8, 32, 18, 0.65);
  color:rgba(196, 255, 210, 0.96);
}

.spotlightFeatBtn--download{
  border-color:rgba(255, 210, 120, 0.38);
  background:rgba(48, 32, 6, 0.55);
  color:rgba(255, 236, 180, 0.98);
}

.spotlightFeatBtn:disabled{
  opacity:0.42;
  cursor:not-allowed;
  transform:none !important;
}

@media (hover:hover) and (pointer:fine){
  .spotlightFeatCard:hover{
    border-color:rgba(255, 180, 80, 0.42);
    box-shadow:
      0 0 0 1px rgba(255, 220, 120, 0.08) inset,
      0 20px 48px rgba(0, 0, 0, 0.48),
      0 0 40px rgba(200, 120, 40, 0.12);
  }
  .spotlightFeatBtn:not(:disabled):hover{
    transform:translate3d(0, -1px, 0);
  }
}

@media (prefers-reduced-motion: reduce){
  .spotlightFeatCard,
  .spotlightFeatBtn{
    transition:none;
  }
  .spotlightFeatBtn:hover{
    transform:none;
  }
}

body.has-spotlight-editorial .songListStage{
  padding-top:clamp(4px, 0.8vh, 12px);
}

@media (max-width: 620px){
  .spotlightEditorial{
    --spotlight-pad-x: max(14px, calc(env(safe-area-inset-left) + 14px));
    --spotlight-gap-hero: clamp(10px, 1.8vh, 14px);
    --spotlight-gap-grid: clamp(10px, 1.6vh, 14px);
  }
  body.has-spotlight-editorial .heroTitleWrap.heroTitleWrap--belowSearch{
    min-height:clamp(224px, 30vh, 360px);
    max-height:400px;
  }
  .spotlightEditorial__header{
    margin-bottom:10px;
    align-items:flex-start;
  }
  .spotlightEditorial__rotation{
    width:100%;
    text-align:left;
    margin-top:2px;
  }
  .spotlightEditorial__hint{
    display:none;
  }
  .spotlightFeatCard{
    --spotlight-card-w: min(86vw, 320px);
    padding:14px;
  }
}