/* Media Player: the video playlist and the audio player. The card and the frame of YouTube videos are styled by the consent plugin.
   Colors follow the page (currentColor, Canvas) and can be set with --media-accent, --media-accent-contrast. */

/* A YouTube playlist: the player, then a row of thumbnails that scrolls sideways */
.media-playlist .embed-slot, .media-playlist .embed-frame { margin: 0 0 1rem; }
.media-thumbs { display: flex; gap: 0.75rem; margin: 0; padding: 0 0 0.5rem; overflow-x: auto; scroll-snap-type: x proximity; list-style: none; }
.media-thumbs li { flex: 0 0 11rem; margin: 0; padding: 0; scroll-snap-align: start; }
.media-thumbs a { display: block; font-size: 0.8rem; line-height: 1.3; text-decoration: none; }
.media-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 0.3rem; border-radius: 0.35rem; outline: 2px solid transparent; outline-offset: 2px; }
.media-thumbs a[aria-current] img { outline-color: var(--media-accent, var(--brand, var(--q2-accent, currentColor))); }

/* The audio player: one line, a list of tracks under it when there are several */
.media-page-audio { margin: 1.5rem 0; }
.media-player-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.media-player-bar button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.media-player-bar button:hover { background: rgba(127, 127, 127, 0.2); }
.media-player-bar svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.media-player-bar .media-player-play { background: var(--media-accent, var(--q2-accent, currentColor)); color: var(--media-accent-contrast, var(--q2-accent-contrast, Canvas)); }
.media-player-play .icon-pause, .media-player[data-state="playing"] .media-player-play .icon-play { display: none; }
.media-player[data-state="playing"] .media-player-play .icon-pause { display: block; }
.media-player-bar [hidden] { display: none; }
.media-player-title { flex: 1 1 3rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; font-weight: 600; }
.media-player-seek { order: 9; flex: 1 1 100%; margin: 0.15rem 0 0; height: 0.9rem; }
.media-player-volume { flex: 0 0 3.5rem; margin: 0; height: 0.9rem; }
.media-player-list { margin: 0.6rem 0 0; padding: 0; list-style: none; font-size: 0.85rem; }
.media-player-list li { margin: 0; padding: 0; }
.media-player-list button { display: block; width: 100%; margin: 0; padding: 0.2rem 0.4rem; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.media-player-list button:hover { background: rgba(127, 127, 127, 0.15); }
.media-player-list .is-current button { font-weight: 700; color: var(--media-accent, var(--q2-accent, inherit)); }
@media (max-width: 30rem) { .media-player-volume { display: none; } }

/* The images of a page: a grid read by rows (3 columns, 2 at most on a narrow screen); whole pictures become a masonry that still reads by rows (js/gallery.js); they open in a lightbox */
.media-gallery { display: grid; grid-template-columns: repeat(var(--media-gallery-columns, 3), minmax(0, 1fr)); gap: 0.6rem; align-items: start; margin: 1.5rem 0; padding: 0; list-style: none; }
@media (max-width: 40rem) { .media-gallery { grid-template-columns: repeat(min(var(--media-gallery-columns, 3), 2), minmax(0, 1fr)); } }
.media-gallery li { margin: 0; padding: 0; list-style: none; }
.media-gallery a { display: block; line-height: 0; }
.media-gallery img { display: block; width: 100%; height: auto; border-radius: 0.4rem; }
.media-gallery--cover img { aspect-ratio: 4 / 3; object-fit: cover; }
/* One picture alone: shown large, not as a thumbnail of a grid */
.media-gallery--single { grid-template-columns: 1fr !important; max-width: 40rem; }
.media-gallery.is-masonry { grid-auto-rows: 1px; grid-auto-flow: row dense; row-gap: 0; }