/* Lyric Spotlight — light cream panel, three quote cards, mobile carousel.
   Ported from design/kos-hp/project/lyric-spotlight.css. */

.lyric-spotlight {
  background: #FBF8F3;
  color: var(--kos-coal);
  padding: 88px 0 96px;
  position: relative;
  overflow: hidden;
}

/* ---- Decorative background marks ----------------------------------- */
.ls-bg-brush-blue {
  position: absolute; left: -60px; bottom: 60px;
  width: 320px; height: 280px;
  background: url('../assets/mark-brush-cobalt.svg') no-repeat left bottom;
  background-size: contain; opacity: 0.85;
  transform: rotate(-8deg);
  pointer-events: none;
}
.ls-bg-brush-red {
  position: absolute; right: -40px; top: -20px;
  width: 280px; height: 220px;
  background: url('../assets/mark-brush-red.svg') no-repeat right top;
  background-size: contain; opacity: 0.92;
  transform: rotate(8deg) scaleX(-1);
  pointer-events: none;
}
.ls-bg-dots-tr {
  position: absolute; right: 200px; top: 30px;
  width: 130px; height: 90px;
  background: url('../assets/mark-dot-matrix.svg') no-repeat;
  background-size: contain; opacity: 0.9;
  pointer-events: none;
}
.ls-bg-dots-bl {
  position: absolute; left: 80px; bottom: 28px;
  width: 150px; height: 60px;
  background: url('../assets/mark-dot-matrix.svg') no-repeat;
  background-size: contain; opacity: 0.85;
  pointer-events: none;
}

/* ---- Header --------------------------------------------------------- */
.ls-head { position: relative; margin-bottom: 36px; max-width: 720px; }
.ls-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--kos-cobalt);
  margin-bottom: 8px;
}
.ls-squiggle { width: 90px; height: 12px; display: block; margin-bottom: 18px; }
.ls-head h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(56px, 7.2vw, 108px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--kos-coal);
}
.ls-sub {
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  color: var(--kos-coal); opacity: 0.78;
  margin: 0;
}

/* ---- Card grid (desktop) ------------------------------------------- */
.ls-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* ---- Carousel (mobile only) ---------------------------------------- */
.ls-carousel { display: none; }

/* ---- Lyric card ---------------------------------------------------- */
.lyric-card {
  position: relative;
  background: #FFFDF8;
  border: 1px solid rgba(17,17,17,0.18);
  padding: 28px 26px 22px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.lc-quote {
  font-family: var(--font-display);
  font-size: 56px; line-height: 0.6;
  color: var(--kos-cobalt);
  margin-bottom: 22px;
}
.lc-lines {
  margin: 0 0 24px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-body);
  font-size: 17px; line-height: 1.4;
  color: var(--kos-coal);
}
.lc-lines span { display: block; }
/* Stanza separator (blank line between verses) */
.lc-lines .lc-break { height: 10px; }

/* Playing state for the cobalt outlined play button */
.lc-play.playing {
  background: var(--kos-cobalt);
  color: var(--kos-bone);
}

.lc-rule {
  height: 1px;
  background: rgba(17,17,17,0.6);
  margin: auto 0 18px;
}
.lc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.lc-meta { min-width: 0; }
.lc-song {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--kos-coal);
  margin-bottom: 4px;
}
.lc-album {
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--kos-cobalt);
}
.lc-play {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--kos-cobalt);
  background: transparent;
  color: var(--kos-cobalt);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  /* No padding-left hack — the play symbol is now bbox-centered in icons.svg. */
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.lc-play:hover { background: var(--kos-cobalt); color: var(--kos-bone); }

/* ---- Mobile / narrow tablet (< 880px) ------------------------------ */
@media (max-width: 880px) {
  .lyric-spotlight { padding: 56px 0 64px; }
  .ls-head h2 { font-size: clamp(44px, 13vw, 72px); }
  .ls-grid { display: none; }
  .ls-carousel { display: block; position: relative; overflow: hidden; }
  .ls-track {
    display: flex;
    /* Slower duration + softer ease-out curve for a smoother glide. */
    transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  .ls-slide {
    flex: 0 0 100%; min-width: 100%; padding: 0 4px;
  }
  .lyric-card { min-height: 340px; }
  .ls-controls {
    margin-top: 20px;
    display: flex; align-items: center; justify-content: center; gap: 18px;
  }
  .ls-arr {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--kos-cobalt);
    background: transparent; color: var(--kos-cobalt);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
  }
  .ls-arr:hover { background: var(--kos-cobalt); color: var(--kos-bone); }
  .ls-dots { display: flex; gap: 0; }
  /* Button is 48×48 to meet WCAG mobile tap target. The visible dot is
     drawn via ::before so the visual size stays 8px. */
  .ls-dot {
    width: 48px; height: 48px;
    border: 0; padding: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
  }
  .ls-dot::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(17,17,17,0.25);
    transform: translate(-50%, -50%);
    transition: background 140ms var(--ease-out), transform 140ms var(--ease-out);
  }
  .ls-dot.on::before {
    background: var(--kos-cobalt);
    transform: translate(-50%, -50%) scale(1.4);
  }
  .ls-bg-brush-blue, .ls-bg-brush-red { width: 200px; height: 160px; }
}