/* ===================================================================
   Nightshift Music Page Styles
   Page-specific: repertoire overview and live performance
   =================================================================== */

.repertoire-panel {
  align-items: center;
  text-align: center;
  justify-content: center;
}

.repertoire-panel .mini-title {
  color: var(--blue);
  letter-spacing: 0.28em;
  font-weight: 800;
  text-align: center;
}

.repertoire-panel h3 {
  margin: 0 0 28px;
  color: #f7f3ed;
  font:
    800 clamp(2.2rem, 5.5vw, 3.4rem)/0.95 "Barlow Condensed",
    sans-serif;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
}

.repertoire-panel > div > p:not(.mini-title) {
  color: var(--muted);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.repertoire-panel .button {
  min-width: 210px;
}

/* Give the opening set description a clear two-step hierarchy rather than
   presenting it as one dense paragraph. */
.set-intro {
  display: grid;
  gap: 10px;
}

.set-intro strong,
.set-intro span {
  display: block;
}

.set-intro strong {
  color: var(--text);
  font-weight: 700;
}

/* Keep the heading and introduction together beside a wider, shorter card. */
@media (min-width: 761px) {
  #the-set .two-col {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
  }

  #the-set .section-head h2 {
    margin: 0;
  }

  #the-set .set-intro {
    max-width: 46ch;
    margin: 0;
  }

  #the-set .repertoire-panel {
    align-items: flex-start;
    gap: 20px;
    padding: clamp(24px, 2.5vw, 32px);
    text-align: left;
  }

  #the-set .repertoire-panel .mini-title {
    margin-bottom: 10px;
    letter-spacing: 0.18em;
    text-align: left;
  }

  #the-set .repertoire-panel h3 {
    margin-bottom: 14px;
    font-size: clamp(2rem, 2.7vw, 2.5rem);
    line-height: 1.05;
    text-align: left;
  }

  #the-set .repertoire-panel > div > p:not(.mini-title) {
    max-width: 42ch;
    margin: 0;
    font-size: 1rem;
    text-align: left;
  }

  #the-set .repertoire-panel .button {
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  /* Keep the opening Music heading pair on one true centre axis. */
  #the-set .section-head {
    width: 100%;
    align-items: center !important;
    text-align: center !important;
  }

  #the-set .section-head :is(.label, h2) {
    display: block !important;
    width: 100%;
    max-width: none !important;
    box-sizing: border-box;
    align-self: stretch !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    text-align: center !important;
  }

  /* Keep the phone introduction compact, centred and easy to scan. */
  #the-set .set-intro {
    max-width: 31ch;
    margin: 0 auto 26px;
    gap: 9px;
    text-align: center;
  }

  #the-set .set-intro strong {
    font:
      700 1.28rem/1.18 "Barlow Condensed",
      sans-serif;
    letter-spacing: 0;
    text-wrap: balance;
  }

  #the-set .set-intro span {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.55;
    text-wrap: pretty;
  }

  .repertoire-panel {
    gap: 16px;
    padding: 22px 18px;
  }

  /* The label and white title are one centred heading lock-up. */
  #the-set .repertoire-panel > div {
    width: 100%;
    text-align: center;
  }

  #the-set .repertoire-panel :is(.mini-title, h3) {
    width: 100%;
    margin-inline: auto;
    text-align: center !important;
  }

  #sample-songs .section-head {
    align-items: center !important;
    text-align: center !important;
  }

  #sample-songs .section-head :is(.label, h2) {
    width: 100%;
    margin-inline: auto;
    text-align: center !important;
  }

  /* The eyebrow has intrinsic text width in some shared rules; stretch it to
     the same box as the title so its text is geometrically centred. */
  #sample-songs .section-head .label {
    display: block !important;
    align-self: stretch !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  .repertoire-panel .mini-title {
    margin-bottom: 8px;
    font-size: 0.7rem;
    line-height: 1.4;
    letter-spacing: 0.18em;
  }

  .repertoire-panel h3 {
    margin-bottom: 14px;
    font-size: clamp(2.15rem, 11vw, 2.7rem);
    line-height: 1;
  }

  .repertoire-panel > div > p:not(.mini-title) {
    max-width: 32ch;
    font-size: 0.95rem;
    line-height: 1.62;
    text-wrap: pretty;
  }

  .repertoire-panel .button {
    width: 100%;
    min-width: 0;
  }
}

/* One real performance gives the repertoire a useful visual preview. This is
   the other video-plus-copy block on the site, so it uses the same bordered
   feature-card treatment as the homepage showreel. */
.performance-link {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 4vw, 54px);
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid rgba(207, 166, 255, 0.42);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 12%, rgba(183, 140, 255, 0.18), transparent 34%),
    linear-gradient(
      135deg,
      rgba(53, 31, 82, 0.62),
      rgba(17, 10, 31, 0.78) 52%,
      rgba(7, 6, 11, 0.88)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 38px rgba(147, 81, 255, 0.12),
    0 26px 70px rgba(0, 0, 0, 0.34);
  text-decoration: none;
  color: var(--text);
}
.performance-link::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.08),
    transparent 38%,
    rgba(183, 140, 255, 0.08)
  );
  content: "";
  pointer-events: none;
}
.performance-link > .performance-media,
.performance-link > div:not(.performance-media) {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.performance-link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}
.performance-link h3 {
  margin: 0 0 14px;
  font:
    800 clamp(2rem, 4vw, 3rem)/1.05 "Barlow Condensed",
    sans-serif;
}
.performance-link p {
  color: var(--muted);
  line-height: 1.65;
}
.performance-action {
  display: inline-block;
  margin-top: 12px;
  color: var(--blue);
  font-weight: 800;
}
.performance-link .video-frame {
  width: 100%;
  min-width: 0;
  margin: 0;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 44%, rgba(183, 140, 255, 0.16), transparent 42%),
    linear-gradient(145deg, #0e0920, #050408 68%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
.performance-link .video-lazy img {
  height: 100%;
  color: transparent;
  font-size: 0;
}
.performance-link .play-btn,
.performance-link .play-btn:hover {
  background: transparent;
}
.performance-link .play-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -5px;
}
@media (max-width: 760px) {
  .performance-link {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 16px;
    border-radius: 20px;
  }

  .performance-link .video-frame {
    border-radius: 12px;
  }
}

/* Align the two sections with each other and with the CTA below them. They were
   both capped at 1040px while the trailing footer CTA uses the 1120px content
   rail, which made the page step outward at the end. */
@media (min-width: 761px) {
  #the-set > .wrap,
  #sample-songs > .wrap {
    width: min(100% - 2 * var(--ns-gutter, 24px), var(--ns-rail, 1120px));
    max-width: var(--ns-rail, 1120px);
  }
  #sample-songs .performance-link {
    max-width: none;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
    gap: 32px;
  }
  #sample-songs .performance-action {
    min-height: 44px;
  }
}

/* Keep the repertoire card on one clear left reading rail at every width. */
#the-set .repertoire-panel {
  align-items: flex-start;
  text-align: left;
}

#the-set .repertoire-panel > div {
  align-self: stretch;
  width: 100%;
  min-width: 0;
  text-align: left;
}

#the-set .repertoire-panel .mini-title,
#the-set .repertoire-panel h3 {
  width: 100%;
  margin-inline: 0 !important;
  text-align: left !important;
}

#the-set .repertoire-panel > div > p:not(.mini-title) {
  width: min(100%, 42ch);
  max-width: min(100%, 42ch) !important;
  margin-inline: 0 !important;
  text-align: left !important;
}

#the-set .repertoire-panel > .action-link {
  align-self: flex-start;
  margin-inline: 0 !important;
  text-align: left !important;
}

/* Tablet / narrow-laptop bridge ------------------------------------------------
   Stack the two feature compositions before the phone breakpoint so neither
   the repertoire panel nor the video copy is squeezed into desktop columns. */
@media (min-width: 761px) and (max-width: 1040px) {
  .music-page :is(#the-set, #sample-songs) > .wrap {
    width: min(calc(100% - clamp(48px, 7vw, 72px)), 46rem) !important;
    max-width: 46rem;
  }

  #the-set .two-col {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
    align-items: start;
  }

  #the-set .set-intro {
    max-width: 44ch;
    margin-inline: auto;
  }

  #the-set .repertoire-panel {
    width: min(100%, 36rem);
    margin-inline: auto;
  }

  #sample-songs .performance-link {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 46rem;
    margin-inline: auto;
    gap: 20px;
    padding: clamp(16px, 2.6vw, 22px);
    border-radius: 20px;
  }

  #sample-songs .performance-link .video-frame {
    border-radius: 14px;
  }

  #sample-songs .performance-link > div:not(.performance-media) {
    max-width: 42rem;
  }
}