/* Reuse the hub's palette and text flow; do not overlay provider controls. */
.video-fallback { margin-block-start: 1rem; }
.video-fallback .video-status { font-size: .9rem; }
.video-fallback .video-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.video-fallback a { text-underline-offset: .2em; }
.video-fallback a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.video-wrap iframe[hidden] { display: none; }
.video-wrap:has(iframe[hidden]) { display: none; }

/* Videos hub: links under each player read as actions, with 44px targets. */
.video-fallback .video-status { color: var(--theme-ink-soft); line-height: 1.5; margin: 0 0 .75rem; }
.video-fallback .video-links { gap: .6rem; }
.video-fallback .video-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1rem;
  border: 1px solid var(--theme-line); border-radius: 999px; background: var(--theme-wash);
  color: var(--theme-ink); font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.video-fallback .video-links a:focus-visible { outline: 3px solid var(--theme-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .video-fallback .video-links a:hover { background: var(--theme-surface-raised); border-color: var(--theme-accent); }
}
.video-wrap { border-radius: 14px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .video-fallback .video-links a { transition: none; } }

/* Media hub: songs and photographs. Scoped to main.media-hub (videos page only). */
.media-hub .song-lead { display: grid; gap: 1.25rem; padding: clamp(1rem, 3vw, 1.75rem); margin-block-end: 1.5rem; }
.media-hub .song-lead .song-body { align-self: center; }
@media (min-width: 820px) { .media-hub .song-lead { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.media-hub .song-kicker { margin: 0 0 .35rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-ink-soft); font-weight: 700; }
.media-hub .song-lead h3 { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.25; margin: 0 0 .15rem; }
.media-hub .song-list h3 { font-size: 1.2rem; line-height: 1.35; margin: .9rem 0 .1rem; }
.media-hub .song-translit { margin: 0 0 .6rem; color: var(--theme-ink-soft); font-style: italic; }
.media-hub .song-credit { font-size: .9rem; line-height: 1.55; color: var(--theme-ink-soft); }
.media-hub .song-credit a { overflow-wrap: anywhere; }
.media-hub .song-more-heading { margin-block: 2rem .25rem; }
.media-hub .song-links { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.media-hub .song-links a {
  display: grid; gap: .1rem; min-height: 44px; padding: .75rem 1rem; text-decoration: none; color: var(--theme-ink);
  border: 1px solid var(--theme-line); border-radius: 14px; background: var(--theme-wash);
  transition: background-color .15s ease, border-color .15s ease;
}
.media-hub .song-links a:focus-visible { outline: 3px solid var(--theme-accent); outline-offset: 3px; }
.media-hub .song-links [lang="ar"] { font-weight: 700; font-size: 1.1rem; }
.media-hub .song-links .song-translit { margin: 0; font-size: .9rem; }
.media-hub .song-links .song-src { font-size: .8rem; color: var(--theme-ink-soft); }
.media-hub .media-gallery-grid { align-items: start; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin-block: 1.25rem; }
.media-hub .media-photo { position: relative; margin: 0; border: 1px solid var(--theme-line); border-radius: 14px; overflow: hidden; background: var(--theme-wash); }
.media-hub .media-photo img { display: block; width: 100%; height: 14rem; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: center 20%; }
.media-hub .media-photo figcaption { padding: .75rem 1rem 1rem; font-size: .85rem; line-height: 1.5; color: var(--theme-ink-soft); }
.media-hub .media-photo-link { color: var(--theme-ink); font-weight: 700; text-decoration: none; }
.media-hub .media-photo-link::after { content: ""; position: absolute; inset: 0; }
.media-hub .media-photo figcaption a:not(.media-photo-link) { position: relative; z-index: 1; }
.media-hub .media-photo-link:focus-visible { outline: 3px solid var(--theme-accent); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .media-hub .song-links a:hover { background: var(--theme-surface-raised); border-color: var(--theme-accent); }
  .media-hub .media-photo:hover { border-color: var(--theme-accent); }
}
@media (prefers-reduced-motion: reduce) { .media-hub .song-links a { transition: none; } }