/* =========================================================
   Hot Chocolate Studio — the listen strip
   ---------------------------------------------------------
   Shared by the homepage, Learn and Create.

   THE RULE: gold is earned, not given.
   Nothing is gold until a track is actually playing. Resting
   rows are quiet, hover is a small neutral lift, and the gold
   fill + size-up is the reward for pressing play. That keeps
   one gold element per screen at most, and makes the playing
   row unmistakable.

   Markup:
     <section class="listen-strip">        (add .lg for homepage scale)
       <div class="wrap">
         <div class="ls-head">…eyebrow / h2 / p…</div>
         <div class="tracks">
           <button class="track feat" data-src="…">…</button>   ← .feat = "start here" tag only
           …
         </div>
         <audio id="player" preload="none"></audio>
       </div>
     </section>
   ========================================================= */

.listen-strip{padding:clamp(38px,5vw,64px) 0;position:relative}

.ls-head{max-width:640px;margin:0 auto clamp(18px,2.4vw,26px);text-align:center}
.ls-head .eyebrow{display:block}
.ls-head h2{
  font-family:'Bungee',sans-serif;
  font-size:clamp(24px,4vw,38px);
  color:var(--ink);
  margin-top:10px;
  line-height:1.06;
}
.ls-head p{color:var(--ink-soft);font-size:15px;margin:11px auto 0;max-width:520px}

/* ---- the list ---- */
.listen-strip .tracks{
  max-width:880px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
}
.listen-strip .track{
  display:flex;align-items:center;gap:16px;
  padding:14px 8px;
  border:none;border-bottom:1px solid var(--line);
  background:none;cursor:pointer;width:100%;text-align:left;
  position:relative;
  border-radius:0;
  transition:background .2s,
             padding .3s cubic-bezier(.16,.84,.3,1),
             border-radius .3s cubic-bezier(.16,.84,.3,1),
             margin .3s cubic-bezier(.16,.84,.3,1);
}
.listen-strip .track:last-child{border-bottom:1px solid var(--line)}

/* hover — quiet. a nudge, not a promise. */
.listen-strip .track:hover{background:var(--paper-2)}

/* ---- play button ---- */
.listen-strip .tplay{
  flex:none;width:42px;height:42px;border-radius:50%;
  border:1.5px solid var(--line-2);background:var(--paper);
  display:grid;place-items:center;color:var(--ink);
  transition:background .22s,border-color .22s,color .22s,
             width .3s cubic-bezier(.16,.84,.3,1),
             height .3s cubic-bezier(.16,.84,.3,1),
             transform .2s;
}
.listen-strip .track:hover .tplay{
  /* index.html still has an inline `.track:hover .tplay{background:butter}` —
     reset it explicitly so hover stays neutral */
  background:var(--paper);
  border-color:var(--ink-soft);
  transform:scale(1.06);
}
.listen-strip .tplay .pi{
  width:0;height:0;
  border-left:11px solid currentColor;
  border-top:7px solid transparent;border-bottom:7px solid transparent;
  margin-left:3px;
}

/* ---- text ---- */
.listen-strip .tinfo{flex:none;min-width:210px}
.listen-strip .tname{
  display:block;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:16px;color:var(--ink);line-height:1.25;
  transition:font-size .3s cubic-bezier(.16,.84,.3,1),color .22s;
}
.listen-strip .tmeta{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px;transition:color .22s}
.listen-strip .tdur{
  font-size:12.5px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;flex:none;transition:color .22s;
}

/* ---- waveform ---- */
.listen-strip .tbars{flex:1;display:flex;align-items:center;gap:3px;height:28px;overflow:hidden}
.listen-strip .tbars i{
  flex:1;background:var(--line-2);border-radius:2px;height:20%;
  transition:height .25s ease,background .22s;
}
.listen-strip .track:hover .tbars i{height:42%;background:var(--taupe,#E2D0B2)}
.listen-strip .track:hover .tbars i:nth-child(2n){height:64%}
.listen-strip .track:hover .tbars i:nth-child(3n){height:32%}

/* =========================================================
   PLAYING — the only place gold appears
   ========================================================= */

.listen-strip .track.playing,
.listen-strip .track.playing:hover{
  background:linear-gradient(150deg,var(--butter) 0%,#F6D98A 100%);
  border-bottom-color:transparent;
  border-radius:16px;
  padding:20px 14px;
  margin:5px 0;
}
.listen-strip .track.playing .tplay{
  width:52px;height:52px;
  background:var(--ink);border-color:var(--ink);color:var(--butter);
  transform:none;
}
/* the triangle becomes a pause bar */
.listen-strip .track.playing .tplay .pi{
  border:none;width:10px;height:13px;
  border-left:4px solid currentColor;border-right:4px solid currentColor;margin:0;
}
.listen-strip .track.playing .tname{font-size:18px;color:#3a2712}
.listen-strip .track.playing .tmeta,
.listen-strip .track.playing .tdur{color:#6b4e2e}
.listen-strip .track.playing .tnum{color:#6b4e2e;opacity:.6}
.listen-strip .track.playing .tbars i{
  background:#8a5a12;
  animation:lseq 900ms ease-in-out infinite;
}
.listen-strip .track.playing .tbars i:nth-child(3n){animation-delay:.15s}
.listen-strip .track.playing .tbars i:nth-child(3n+1){animation-delay:.3s}
@keyframes lseq{0%,100%{height:22%}50%{height:88%}}

@media(prefers-reduced-motion:reduce){
  .listen-strip .track,
  .listen-strip .tplay,
  .listen-strip .tname{transition:none}
  .listen-strip .track.playing .tbars i{animation:none;height:55%}
}

/* =========================================================
   SCRUB BAR — only on the playing row
   ---------------------------------------------------------
   Injected by player.js into whichever .track is playing, so
   there is never more than one on the page. The row becomes
   two-line while it plays; the bar is the second line.
   ========================================================= */

/* .loaded = this row owns the audio but is paused. It keeps the scrub bar so
   you can see where you are and drag before resuming, but stays off-gold —
   gold is still earned by playing.

   It MUST wrap. The bar is flex:0 0 100%, so on a row that isn't wrapping it
   shoots out past the right edge of the section and squeezes the waveform to
   nothing. That was the bug: pause removed .playing but left the bar behind. */
.listen-strip .track.playing,
.listen-strip .track.loaded{flex-wrap:wrap}

.listen-strip .track.loaded,
.listen-strip .track.loaded:hover{background:var(--paper-2)}
.listen-strip .track.loaded .tdur{display:none}
.listen-strip .track.loaded .ls-tag{opacity:0}   /* it's been played; tag is done */

.listen-strip .tseek{
  flex:0 0 100%;
  display:flex;align-items:center;gap:11px;
  margin-top:13px;
  font-size:12px;color:#6b4e2e;
  font-variant-numeric:tabular-nums;
  cursor:default;
}
.listen-strip .tseek-cur,
.listen-strip .tseek-tot{flex:none;min-width:34px}
.listen-strip .tseek-tot{text-align:right}

/* the rail — generous hit area, thin visible line */
.listen-strip .tseek-rail{
  flex:1;position:relative;
  height:18px;                 /* touch target */
  display:flex;align-items:center;
  cursor:pointer;
  touch-action:none;           /* let us drag without the page scrolling */
}
.listen-strip .tseek-rail::before{
  content:'';position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);
  height:4px;border-radius:2px;
  background:rgba(67,48,31,.22);
}
.listen-strip .tseek-fill{
  position:absolute;left:0;top:50%;
  transform:translateY(-50%);
  height:4px;border-radius:2px;width:0;
  background:var(--ink);
  pointer-events:none;
}
.listen-strip .tseek-head{
  position:absolute;top:50%;left:0;
  transform:translate(-50%,-50%);
  width:12px;height:12px;border-radius:50%;
  background:var(--ink);
  pointer-events:none;
  opacity:0;transition:opacity .18s;
}
.listen-strip .tseek-rail:hover .tseek-head{opacity:1}
/* keep the knob pinned to the end of the fill */
.listen-strip .tseek-fill::after{
  content:'';position:absolute;right:0;top:50%;
  transform:translate(50%,-50%);
  width:11px;height:11px;border-radius:50%;
  background:var(--ink);
  box-shadow:0 1px 4px rgba(67,48,31,.35);
}

/* the duration on the row itself is redundant once the bar shows both */
.listen-strip .track.playing .tdur{display:none}

/* on a paused row the bar sits on cream, not gold — dial the ink back so it
   reads as resting rather than active */
.listen-strip .track.loaded .tseek{color:var(--ink-soft)}
.listen-strip .track.loaded .tseek-fill,
.listen-strip .track.loaded .tseek-fill::after,
.listen-strip .track.loaded .tseek-head{background:var(--ink-soft)}

@media(max-width:640px){
  .listen-strip .tseek{margin-top:11px;gap:9px;font-size:11.5px}
  .listen-strip .tseek-rail{height:22px}   /* bigger thumb target on touch */
  .listen-strip .tseek-head{opacity:1}
}

/* ---- "start here" tag — a marker, not a highlight ---- */
.ls-tag{
  position:absolute;top:-9px;left:14px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);
  padding:4px 10px;border-radius:11px;
  transition:opacity .22s;
}
/* once it's playing the tag has done its job */
.listen-strip .track.playing .ls-tag{opacity:0}

/* ---- closing line ---- */
.ls-foot{
  max-width:880px;margin:16px auto 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.ls-foot .lsf-t{font-size:13.5px;color:var(--ink-soft)}

@media(max-width:640px){
  .listen-strip .tbars{display:none}
  .listen-strip .tinfo{min-width:0;flex:1}
  .listen-strip .track{gap:13px;padding:12px 4px}
  .listen-strip .track.playing,
  .listen-strip .track.playing:hover{padding:16px 12px}
  .listen-strip .track.playing .tplay{width:46px;height:46px}
  .ls-foot{justify-content:center;text-align:center}
  .ls-foot .btn{width:100%;justify-content:center}
}


/* =========================================================
   SIZE MODIFIER: .lg — homepage scale, same behaviour
   ========================================================= */

.listen-strip.lg{padding:56px 0}
.listen-strip.lg .tracks{max-width:none;margin-top:30px}
.listen-strip.lg .ls-foot{max-width:none}
.listen-strip.lg .track{gap:18px;padding:18px 6px}
.listen-strip.lg .tplay{width:46px;height:46px}
.listen-strip.lg .tplay .pi{
  border-left:12px solid currentColor;
  border-top:8px solid transparent;border-bottom:8px solid transparent;
}
.listen-strip.lg .tnum{
  font-family:'Bungee',sans-serif;font-size:15px;
  color:var(--ink-soft);opacity:.4;width:26px;flex:none;transition:color .22s,opacity .22s;
}
.listen-strip.lg .tinfo{min-width:200px}
.listen-strip.lg .tname{font-size:17px}
.listen-strip.lg .tmeta{font-size:12.5px}
.listen-strip.lg .tdur{font-size:13px}
.listen-strip.lg .tbars{height:34px;gap:3px}

/* playing, at homepage scale */
.listen-strip.lg .track.playing,
.listen-strip.lg .track.playing:hover{padding:24px 20px;border-radius:18px;margin:7px 0}
.listen-strip.lg .track.playing .tplay{width:58px;height:58px}
.listen-strip.lg .track.playing .tplay .pi{width:11px;height:15px;border-left-width:4px;border-right-width:4px}
.listen-strip.lg .track.playing .tname{font-size:20px}
.listen-strip.lg .ls-tag{top:-10px;left:20px;font-size:10.5px;padding:5px 12px}

@media(max-width:640px){
  .listen-strip.lg{padding:50px 0}
  .listen-strip.lg .track{gap:13px;padding:14px 4px}
  .listen-strip.lg .tnum{display:none}
  .listen-strip.lg .tinfo{min-width:0;flex:1}
  .listen-strip.lg .track.playing,
  .listen-strip.lg .track.playing:hover{padding:18px 14px}
  .listen-strip.lg .track.playing .tplay{width:50px;height:50px}
}


/* =========================================================
   SCROLLING LIST — .tracks.scroll
   ---------------------------------------------------------
   For longer reels. Caps the list at roughly four rows and
   scrolls the rest, so a six-track page doesn't push the CTA
   off the screen. The scrollbar is left visible and styled
   to the palette — it's the only cue that there's more.
   ========================================================= */

.listen-strip .tracks.scroll{
  max-height:clamp(300px,44vh,360px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
}
.listen-strip.lg .tracks.scroll{max-height:clamp(320px,48vh,400px)}

.listen-strip .tracks.scroll::-webkit-scrollbar{width:6px}
.listen-strip .tracks.scroll::-webkit-scrollbar-track{background:transparent}
.listen-strip .tracks.scroll::-webkit-scrollbar-thumb{
  background:var(--line-2);
  border-radius:3px;
}
.listen-strip .tracks.scroll::-webkit-scrollbar-thumb:hover{background:var(--ink-soft)}

/* the playing row grows — keep it from being clipped at the edges */
.listen-strip .tracks.scroll .track.playing{scroll-margin:10px 0}

@media(max-width:640px){
  .listen-strip .tracks.scroll,
  .listen-strip.lg .tracks.scroll{max-height:56vh}
}


/* preview note — sits under the list */
.ls-note{
  max-width:880px;
  margin:10px auto 0;
  font-size:12px;
  color:var(--ink-soft);
  text-align:right;
}
.listen-strip.lg .ls-note{max-width:none}
@media(max-width:640px){.ls-note{text-align:center}}