/* CUP POOL — dedicated Smartlink page (/clients/cup-pool/music/<slug>).
   Loads on top of cup-pool.css (shared color variables + the existing
   .linkhub-icon "Classic" styles) and adds only what's new: the standalone
   page chrome and the "Platform Buttons" design. Kept in its own small file
   so the page stays light — it does not pull in the full site stylesheet's
   hero/grid/footer rules it doesn't need. */

.sk-page{min-height:100vh;background:var(--bg);color:var(--fg);display:flex;flex-direction:column;align-items:center;padding:40px 20px 64px;font-family:inherit}
.sk-back{align-self:flex-start;color:var(--muted);text-decoration:none;font-size:.85rem;margin:0 auto 28px 0;max-width:480px;width:100%}
.sk-back:hover{color:var(--gold)}
.sk-card{width:100%;max-width:480px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:32px 28px 28px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.sk-cover{width:200px;height:200px;object-fit:cover;border-radius:14px;margin:0 auto 22px;display:block;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.sk-brand{margin:0 0 6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.sk-title{margin:0 0 6px;font-size:1.6rem;line-height:1.2}
.sk-subtitle{margin:0 0 16px;color:var(--muted);font-size:.9rem}
.sk-description{margin:0 0 22px;color:var(--muted);font-size:.88rem;line-height:1.6}
.sk-empty{color:var(--muted);font-size:.88rem;padding:12px 0}

/* Design A (Classic) — same premium structure as Design B (cover, brand,
   title, "Listen on..", large stacked buttons, share row) but a visually
   distinct treatment: outlined/bordered pills on the page's own background
   instead of solid white cards, so the two CMS-selectable designs stay a
   real choice rather than the same thing twice. */
.sk-classic-cards{display:grid;gap:14px;margin:0 0 4px;max-width:420px;margin-left:auto;margin-right:auto}
.sk-classic-button{display:flex;align-items:center;gap:16px;padding:15px 20px;min-height:68px;border-radius:20px;background:transparent;border:1.5px solid var(--line);color:var(--fg);text-decoration:none;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.sk-classic-button:hover{transform:translateY(-2px);border-color:var(--gold);background:rgba(214,168,74,.07)}
.sk-classic-button .sk-card-icon{background:rgba(255,255,255,.07)}
.sk-classic-button .sk-card-icon svg{stroke:var(--fg)}
.sk-classic-button .sk-card-label{color:var(--fg)}
.sk-classic-button .sk-card-cta{color:var(--muted)}
html.light .sk-classic-button{border-color:#00000022;color:var(--lightFg)}
html.light .sk-classic-button:hover{border-color:var(--gold);background:rgba(214,168,74,.08)}
html.light .sk-classic-button .sk-card-icon{background:#00000008}
html.light .sk-classic-button .sk-card-icon svg{stroke:var(--lightFg)}
@media(max-width:520px){
  .sk-classic-button{padding:13px 16px;min-height:60px;border-radius:18px}
  .sk-classic-cards{gap:11px}
}

/* Design B ("Platform Cards") — premium, editorial music-product feel:
   large cover + generous breathing room up top, then big soft pill buttons
   stacked vertically. Deliberately not a copy of any specific artist's
   smartlink page — CUP POOL's own dark/gold identity, just applied to a
   calmer, more spacious layout than the old thin outline-icon rows. */
[data-sk-design="buttons"] .sk-card{padding:46px 30px 40px;text-align:center}
[data-sk-design="buttons"] .sk-cover{width:224px;height:224px;border-radius:26px;margin:0 auto 26px;box-shadow:0 26px 64px rgba(0,0,0,.42)}
[data-sk-design="buttons"] .sk-brand{margin-bottom:10px}
[data-sk-design="buttons"] .sk-title{font-size:1.95rem;font-weight:800;margin-bottom:8px}
[data-sk-design="buttons"] .sk-subtitle{margin-bottom:0}
[data-sk-design="buttons"] .sk-description{max-width:360px;margin-left:auto;margin-right:auto}

.sk-listen-label{text-align:center;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:30px 0 18px}
.sk-cards{display:grid;gap:14px;margin:0 0 4px;max-width:420px;margin-left:auto;margin-right:auto}
.sk-card-button{display:flex;align-items:center;gap:16px;padding:15px 20px;min-height:68px;border-radius:20px;background:rgba(255,255,255,.96);color:#141414;text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.22);transition:transform .18s ease,box-shadow .18s ease}
.sk-card-button:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.3)}
.sk-card-icon{flex:0 0 auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.055)}
.sk-card-icon svg{width:19px;height:19px;fill:none;stroke:#141414;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sk-card-label{flex:1 1 auto;text-align:left;font-weight:600;font-size:1rem;letter-spacing:.005em}
.sk-card-cta{flex:0 0 auto;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,0,0,.4)}

/* Site-wide light/dark toggle inverts the cards too, so they always read
   against their surrounding page rather than staying fixed white. */
html.light [data-sk-design="buttons"] .sk-card-button{background:#141414;color:#fff}
html.light [data-sk-design="buttons"] .sk-card-icon{background:rgba(255,255,255,.12)}
html.light [data-sk-design="buttons"] .sk-card-icon svg{stroke:#fff}
html.light [data-sk-design="buttons"] .sk-card-cta{color:rgba(255,255,255,.55)}

@media(max-width:520px){
  [data-sk-design="buttons"] .sk-card{padding:34px 18px 30px}
  [data-sk-design="buttons"] .sk-cover{width:168px;height:168px;border-radius:20px}
  [data-sk-design="buttons"] .sk-title{font-size:1.5rem}
  .sk-cards{gap:11px}
  .sk-card-button{padding:13px 16px;min-height:60px;border-radius:18px}
}

.sk-share{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.sk-share-label{margin:0 0 10px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sk-share-row{display:flex;gap:8px;flex-wrap:wrap}
.sk-share-url{flex:1 1 200px;min-width:0;padding:11px 13px;border-radius:10px;border:1px solid var(--line);background:#00000040;color:var(--fg);font-size:.82rem}
.sk-share-row button{flex:0 0 auto;padding:11px 16px;border-radius:10px;border:1px solid var(--line);background:var(--gold);color:var(--buttonText,#050505);font-weight:600;font-size:.82rem;cursor:pointer;min-height:44px}
.sk-share-row button:hover{filter:brightness(1.05)}
.sk-share-row button#skShare{background:transparent;color:var(--fg);border-color:var(--line)}

html.light .sk-page{background:var(--lightBg);color:var(--lightFg)}
html.light .sk-card{background:var(--lightPanel);border-color:#00000014}
html.light .sk-button{background:#00000006;border-color:#00000014;color:var(--lightFg)}
html.light .sk-button:hover{background:#0000000c}
html.light .sk-share-url{background:#ffffff;border-color:#00000018;color:var(--lightFg)}

/* Tracklist on an album/EP's own smartlink page — reuses .linkhub-track from
   cup-pool.css (same look as the in-page popup) but swaps the 30-second
   preview button for a plain native <audio> element, since this standalone
   page doesn't load the popup's JS audio player. */
.sk-tracklist{margin:26px 0 6px;text-align:left}
.sk-tracklist .linkhub-track-title a{color:inherit;text-decoration:none}
.sk-tracklist .linkhub-track-title a:hover{color:var(--gold)}
.sk-tracklist .linkhub-track-actions{flex-wrap:wrap}
.sk-tracklist .sk-track-audio{flex:1 1 100%;width:100%;height:32px;margin-top:6px}

@media(max-width:520px){
  .sk-card{padding:26px 20px 22px;border-radius:16px}
  .sk-cover{width:160px;height:160px}
}