/* ============================================================================
   /playlist/ - page-specific rules ONLY.   (/css/playlist.css)

   Everything shared with the other sub-pages (theme tokens, header, nav,
   cards, item lists, tags, buttons, footer, focus styles, small-screen rules)
   lives in /css/site-pages.css, which each page links FIRST:

       <link rel="stylesheet" href="/css/site-pages.css">
       <link rel="stylesheet" href="/css/playlist.css">   <- this file

   Do not re-declare shared rules or redefine colour tokens here; that is how
   the old events/ and projects/ sheets drifted apart in the first place. Use
   the tokens (var(--border), var(--surface), ...) so dark mode keeps working.
   ============================================================================ */

/* Side-by-side players when there is room, stacked on a phone. minmax(0,1fr)
   stops the iframes from forcing the grid wider than the viewport. */
.embeds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.embed { min-width: 0; }

.embed h3 { margin-bottom: 0.5em; }

/* The embeds ship fixed width/height attributes; override the width so they
   shrink with the column instead of overflowing at 400px. */
.embed iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 450px;
    border: 0;
    border-radius: var(--border-radius);
    background: transparent;
}

.embed-fallback {
    margin: 0.6em 0 0;
    font-size: 0.9rem;
}