/* =============================================================
   StageHub /new — Podcast a TV (média). tokens.css + base.css.
   Prehrávač skladá server z overeného ID; CSS len rieši rozmery.
   ============================================================= */

.sh-media, .sh-media-detail { padding-block: var(--sh-space-8) var(--sh-space-16); }

/* --- Hlavička sekcie --- */
.sh-media-head { max-width: 60ch; margin-bottom: var(--sh-space-6); }
.sh-media-title { font-family: var(--sh-font-head); font-size: var(--sh-text-4xl); color: var(--sh-ink); letter-spacing: -0.02em; margin: var(--sh-space-2) 0 var(--sh-space-3); }
.sh-media-lead { color: var(--sh-ink-70); margin: 0; font-size: var(--sh-text-lg); line-height: var(--sh-leading-normal); }

/* --- Vyhľadávanie --- */
.sh-media-search { display: flex; gap: var(--sh-space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--sh-space-8); max-width: 560px; }
.sh-media-search input[type="search"] {
  flex: 1 1 16rem; font-family: var(--sh-font-body); font-size: var(--sh-text-base);
  padding: var(--sh-space-3) var(--sh-space-4); border: 1px solid var(--sh-ink-12);
  border-radius: var(--sh-radius-pill); background: var(--sh-surface-raised); color: var(--sh-ink);
}
.sh-media-search input[type="search"]:focus { outline: 2px solid var(--sh-amber); outline-offset: -1px; }
.sh-media-reset { font-size: var(--sh-text-sm); color: var(--sh-amber-text); }

/* --- Placeholder iniciálka (média bez náhľadu, napr. Spotify) --- */
.sh-avatar-initial { font-family: var(--sh-font-head); font-weight: var(--sh-weight-semibold); color: var(--sh-amber-text); line-height: 1; user-select: none; }

/* --- Mriežka kariet --- */
.sh-media-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sh-space-6); }
.sh-mcard { background: var(--sh-surface-raised); border: 1px solid var(--sh-ink-12); border-radius: var(--sh-radius-lg); overflow: hidden; box-shadow: var(--sh-shadow-sm); transition: transform var(--sh-transition), box-shadow var(--sh-transition); }
.sh-mcard:hover { transform: translateY(-3px); box-shadow: var(--sh-shadow-md); }
.sh-mcard-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.sh-mcard-media { position: relative; aspect-ratio: 16 / 9; background: var(--sh-cream-1); overflow: hidden; }
.sh-mcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-mcard-media-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--sh-cream-1), var(--sh-cream-2)); }
.sh-mcard-media-ph .sh-avatar-initial { font-size: clamp(2.5rem, 10vw, 3.75rem); }
.sh-mcard-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--sh-radius-pill); background: rgba(28, 25, 23, 0.72); color: #fff; font-size: 1.1rem; padding-left: 3px; }
.sh-mcard:hover .sh-mcard-play { background: var(--sh-amber); }
.sh-mcard-provider { position: absolute; top: var(--sh-space-3); left: var(--sh-space-3); font-size: var(--sh-text-xs); font-weight: var(--sh-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sh-ink); background: rgba(253, 243, 234, 0.92); padding: 2px var(--sh-space-3); border-radius: var(--sh-radius-pill); }
.sh-mcard-body { padding: var(--sh-space-5); display: flex; flex-direction: column; gap: var(--sh-space-2); flex: 1; }
.sh-mcard-title { font-family: var(--sh-font-head); font-size: var(--sh-text-lg); line-height: var(--sh-leading-snug); color: var(--sh-ink); margin: 0; }
.sh-mcard:hover .sh-mcard-title { color: var(--sh-amber-text); }
.sh-mcard-desc { font-size: var(--sh-text-sm); color: var(--sh-ink-70); line-height: var(--sh-leading-normal); margin: 0; }
.sh-mcard-meta { font-size: var(--sh-text-xs); color: var(--sh-ink-50); margin: auto 0 0; display: flex; flex-wrap: wrap; gap: var(--sh-space-2); align-items: center; }

/* --- Prázdny stav --- */
.sh-media-empty { text-align: center; padding: var(--sh-space-16) var(--sh-space-6); background: var(--sh-surface-raised); border: 1px dashed var(--sh-ink-12); border-radius: var(--sh-radius-lg); color: var(--sh-ink-70); }
.sh-media-empty p { margin: 0 0 var(--sh-space-2); }

/* --- Detail --- */
.sh-media-detail-inner { max-width: var(--sh-container-narrow); }
.sh-media-dhead { margin-bottom: var(--sh-space-6); }
.sh-media-dtitle { font-family: var(--sh-font-head); font-size: var(--sh-text-4xl); line-height: var(--sh-leading-tight); letter-spacing: -0.02em; color: var(--sh-ink); margin: var(--sh-space-2) 0 var(--sh-space-3); }
.sh-media-dmeta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sh-space-2); font-size: var(--sh-text-sm); color: var(--sh-ink-50); margin: 0; }
.sh-media-badge { font-weight: var(--sh-weight-semibold); color: var(--sh-amber-text); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--sh-text-xs); }

/* --- Prehrávač: rozmery rieši CSS (iframe nemá pevnú výšku) --- */
.sh-media-player { margin: 0 0 var(--sh-space-6); border-radius: var(--sh-radius-lg); overflow: hidden; background: var(--sh-cream-1); border: 1px solid var(--sh-ink-12); }
.sh-media-frame { display: block; width: 100%; border: 0; }
.sh-media-frame:not(.sh-media-frame-audio) { aspect-ratio: 16 / 9; height: auto; }
.sh-media-frame-audio { height: 232px; }
.sh-media-player-spotify { background: transparent; border: 0; border-radius: var(--sh-radius-md); }
.sh-media-noplayer { padding: var(--sh-space-8); text-align: center; color: var(--sh-ink-70); }

.sh-media-artist { font-size: var(--sh-text-base); color: var(--sh-ink-70); margin: 0 0 var(--sh-space-6); }
.sh-media-artist a { color: var(--sh-amber-text); font-weight: var(--sh-weight-medium); text-decoration: underline; }

.sh-media-body { font-size: var(--sh-text-lg); line-height: var(--sh-leading-normal); color: var(--sh-ink); margin-bottom: var(--sh-space-12); }
.sh-media-body > * + * { margin-top: var(--sh-space-5); }

.sh-media-related { margin-top: var(--sh-space-12); padding-top: var(--sh-space-8); border-top: 1px solid var(--sh-ink-12); }

@media (max-width: 560px) {
  .sh-media-grid { grid-template-columns: 1fr; }
}