/* On demand — the creator shelf on the home page, and a creator's own page.
   Deliberately the same shapes the phone apps draw: a list of creators, then a
   banner, who they are, and everything they have made. */

/* ---------- The grid under the hero -----------------------------------
   A card is a wide thumbnail with the creator's name under it, the way a video
   site lays out a channel. The banner does the work: it is already the wide
   crop made for a hero, which is the shape a thumbnail wants anyway. */
.od-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px 16px}
.od-card{display:flex;flex-direction:column;gap:11px;text-decoration:none;color:var(--ucn-text)}

.od-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:var(--ucn-surface-2);border:1px solid var(--ucn-border);
  transition:border-color .16s,transform .14s}
.od-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s ease}
.od-card:hover .od-thumb{border-color:var(--ucn-border-active);transform:translateY(-2px)}
.od-card:hover .od-thumb img{transform:scale(1.04)}
.od-thumb-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:44px;font-weight:800;color:var(--ucn-purple-muted)}
/* How many messages, bottom-right of the thumbnail — where a video's runtime
   sits, because that is where the eye already looks for it. */
.od-count{position:absolute;right:8px;bottom:8px;padding:2px 8px;border-radius:6px;
  font-size:11px;font-weight:700;line-height:1.6;color:#fff;background:rgba(4,4,7,.82)}

.od-card-foot{display:flex;align-items:flex-start;gap:11px}
.od-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--ucn-surface-2)}
.od-avatar--empty{display:flex;align-items:center;justify-content:center;font-size:15px;
  font-weight:800;color:var(--ucn-purple-bright);border:1px solid var(--ucn-border)}
.od-card-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.od-card-meta b{font-size:15px;font-weight:700;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.od-card-meta small{font-size:13px;color:var(--ucn-text-secondary);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.od-card:hover .od-card-meta b{color:#fff}

/* With the schedule hidden there is only one panel, so it takes the width
   instead of leaving half the row empty. Matches #listen .columns in
   media-hub.css for specificity — a bare class loses to that id. */
#listen .columns--single{grid-template-columns:1fr}

/* ---------- The creator page ------------------------------------------ */
/* Full-bleed banner, the same treatment the app's shelf gets: the picture IS
   the top of the page, with the name sitting on it rather than under it. */
.cr-hero{position:relative;min-height:300px;display:flex;align-items:flex-end;
  background:var(--ucn-bg-deep);overflow:hidden}
.cr-hero--plain{min-height:0;padding-top:28px}
.cr-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cr-hero-fade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,9,.30) 0%,rgba(5,5,9,.72) 62%,var(--ucn-bg) 100%)}
.cr-hero-inner{position:relative;width:100%;max-width:1120px;margin:0 auto;
  padding:22px 20px 26px;display:flex;flex-direction:column;gap:18px}
.cr-back{align-self:flex-start;font-size:13px;font-weight:600;text-decoration:none;
  color:var(--ucn-text);padding:8px 14px;border-radius:20px;
  border:1px solid rgba(255,255,255,.18);background:rgba(9,10,16,.55);backdrop-filter:blur(8px)}
.cr-back:hover{border-color:var(--ucn-border-active)}
.cr-id{display:flex;align-items:center;gap:16px}
.cr-logo{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.16);background:var(--ucn-surface-2)}
.cr-logo--empty{display:flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:800;color:var(--ucn-purple-bright)}
.cr-id h1{margin:0;font-size:clamp(26px,4.4vw,40px);line-height:1.1;letter-spacing:-.01em}
.cr-tag{margin:5px 0 0;font-size:14px;color:var(--ucn-text-secondary)}

/* This site has no sitewide container class — each page brings its own — so
   the creator page brings one too, matched to the hero's inner width. */
.cr-body{max-width:1120px;margin:0 auto;padding:26px 20px 60px}
.cr-miss{max-width:1120px;margin:0 auto;padding:60px 20px}
/* The whole description is always in the HTML; this only limits how much of it
   is shown until someone asks for the rest. */
.cr-about{margin:0 0 26px;max-width:70ch}
.cr-about p{margin:0;font-size:15px;line-height:1.65;color:var(--ucn-text-secondary);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cr-about.is-open p{-webkit-line-clamp:unset;overflow:visible}
.cr-more{margin-top:8px;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;color:var(--ucn-purple-bright)}
.cr-more:hover{text-decoration:underline}

.cr-h2{margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ucn-purple-bright)}

.cr-tracks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cr-track{display:flex;gap:16px;padding:14px;border-radius:16px;
  border:1px solid var(--ucn-border);background:var(--ucn-surface)}
.cr-track:hover{border-color:var(--ucn-border-hover)}
.cr-track.is-playing,.cr-track.is-linked{border-color:var(--ucn-border-active);
  background:var(--ucn-surface-hover)}
/* Tall art down the left, the way the app draws it — the card's height is set
   by its words, and the picture fills whatever that turns out to be. */
.cr-art{width:112px;align-self:stretch;min-height:112px;border-radius:12px;
  object-fit:cover;flex:0 0 auto;background:var(--ucn-surface-2)}
.cr-art--empty{border:1px solid var(--ucn-border)}
.cr-track-main{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.cr-track-main h3{margin:0;font-size:17px;line-height:1.3}
.cr-desc{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--ucn-text-secondary)}
.cr-track-foot{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:12px}

.cr-play{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 13px;
  border-radius:22px;border:1px solid var(--ucn-border-hover);cursor:pointer;
  background:var(--ucn-purple-dark);color:var(--ucn-text);font:inherit;font-size:13px;font-weight:700}
.cr-play:hover{background:var(--ucn-purple-soft);border-color:var(--ucn-border-active)}
.cr-play-glyph{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent currentColor}
.is-playing .cr-play-glyph{border-width:0;width:9px;height:11px;
  border-left:3px solid currentColor;border-right:3px solid currentColor}
.cr-dur{font-size:12px;color:var(--ucn-text-muted);font-variant-numeric:tabular-nums}
.cr-share{margin-left:auto;padding:8px 14px;border-radius:20px;cursor:pointer;
  border:1px solid var(--ucn-border);background:transparent;
  color:var(--ucn-text-secondary);font:inherit;font-size:12px;font-weight:600}
.cr-share:hover{color:var(--ucn-text);border-color:var(--ucn-border-hover)}
.cr-track--empty{justify-content:center;color:var(--ucn-text-muted)}

@media (max-width:640px){
  .cr-hero{min-height:230px}
  .cr-logo{width:64px;height:64px}
  .cr-art{width:84px;min-height:84px}
  .cr-track{gap:12px;padding:12px}
  .cr-track-foot{flex-wrap:wrap;gap:9px}
  .cr-share{margin-left:0}
}