/* Four musical works share one stable, accessible home card. */
.route-grid-musical { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.route-grid-musical > .route-card { grid-column: auto; }
.route-card.music-carousel { display: block; background: var(--night); color: #fff; min-width: 0; }
.music-carousel > span { display: block; }
.music-stage { position: relative; }
.music-slides { display: grid; touch-action: pan-y; }
.music-slide { position: relative; grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .65s ease, visibility .65s; }
.music-slide.is-active { opacity: 1; visibility: visible; }
.music-slide img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; align-self: start; }
.music-copy { position: absolute; inset: auto 0 0; min-width: 0; padding: 60px 22px 48px; background: linear-gradient(transparent, rgb(8 12 24 / 88%) 35%, rgb(8 12 24 / 97%)); color: #fff; }
.music-carousel .music-copy h2 { max-width: none; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.12; }
.music-carousel .music-copy p { max-width: none; margin-top: 10px; color: rgb(255 255 255 / 90%); font-size: 14px; line-height: 1.4; }
.music-link, .music-pending { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 750; text-transform: uppercase; }
.music-pending { color: rgb(255 255 255 / 60%); }
.music-link:hover { color: var(--orange); }
.music-controls { position: absolute; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 1 / 1; z-index: 3; pointer-events: none; }
.music-controls::before { content: ''; position: absolute; inset: auto 0 0; height: 48px; background: linear-gradient(transparent, rgb(8 12 24 / 85%)); }
.music-controls[hidden] { display: none; }
.music-controls button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 4px; color: white; background: transparent; cursor: pointer; pointer-events: auto; }
.music-controls > [data-music-prev], .music-controls > [data-music-next] { position: absolute; top: calc(50% - 22px); font-size: 32px; line-height: 1; background: rgb(8 12 24 / 40%); text-shadow: 0 1px 4px #000; }
.music-controls > [data-music-prev] { left: 0; }
.music-controls > [data-music-next] { right: 0; }
.music-controls button:hover { background: rgb(255 255 255 / 12%); }
.music-controls button:focus-visible, .music-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.music-dots { position: absolute; bottom: 0; left: 0; right: 44px; display: flex; justify-content: center; gap: 0; }
.music-dots button { border: 0; width: 28px; min-width: 24px; }
.music-dots span { display: block; width: 7px; height: 7px; border-radius: 50%; margin: auto; background: rgb(255 255 255 / 40%); }
.music-dots [aria-current="true"] span { background: var(--orange); transform: scale(1.4); }
.music-controls .music-pause { position: absolute; right: 0; bottom: 0; padding: 0; font-size: 18px; }
@media (max-width: 1100px) and (min-width: 701px) {
  .music-copy { padding-inline: 16px; }
}
@media (max-width: 700px) {
  .route-grid.route-grid-musical { grid-template-columns: 1fr; }
  .route-grid-musical > .route-card:last-child { grid-column: auto; }
  .music-copy { padding-inline: 16px; }
  .music-carousel h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .music-slide { transition: none; } }
@media (max-width: 380px) {
  .music-carousel .music-copy h2 { font-size: 20px; }
  .music-carousel .music-copy p { font-size: 12px; margin-top: 8px; }
  .music-link, .music-pending { font-size: 11px; margin-top: 10px; }
}


/* Compact home grid: four equal cards, with artwork reaching the edges. */
.route-grid.route-grid-musical { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.route-grid-musical > .route-card { grid-column: auto; min-width: 0; min-height: 0; padding: 24px; }
.route-grid-musical > .route-card h2 { font-size: clamp(23px, 2vw, 30px); }
.route-grid-musical > .route-card p { font-size: 14px; margin-top: 12px; }
.route-grid-musical > .route-card > span { margin-bottom: 16px; font-size: 12px; }
.route-grid-musical > .music-carousel { padding: 0; align-self: start; }
.route-grid-musical > .music-carousel > span { position: absolute; bottom: 0; left: 0; right: 44px; z-index: 4; padding: 0 8px 8px; margin: 0; font-size: 10px; line-height: 14px; text-align: center; pointer-events: none; }
.route-grid-musical .music-dots, .route-grid-musical .music-controls .music-pause { bottom: 22px; }
.route-grid-musical .music-controls::before { height: 70px; }
.route-grid-musical .music-copy { padding: 45px 16px 68px; }
.route-grid-musical .music-copy h2 { font-size: clamp(20px, 1.65vw, 28px); }
.route-grid-musical .music-copy p { font-size: 13px; margin-top: 8px; }
.route-grid-musical .music-link, .route-grid-musical .music-pending { margin-top: 10px; font-size: 11px; }
@media (max-width: 1199px) {
  .route-grid.route-grid-musical { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .route-grid.route-grid-musical { grid-template-columns: 1fr; }
  .route-grid-musical > .route-card:not(.music-carousel) { min-height: 280px; }
}