/* Native video controls, with a compact selectable clip shelf. */
.clip-gallery { max-width: 760px; margin-inline: auto; }
#clip-player, .video-main-player { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border: 1px solid #b7925e66; }
.clip-status { margin-top: 10px; color: var(--muted); font-size: 14px; }
.clip-list-heading { margin-top: 28px; margin-bottom: 12px; font-size: 22px; }
.clip-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.clip-choice { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; text-align: left; cursor: pointer; }
.clip-preview { display: block; position: relative; border: 1px solid #b7925e44; background: #000; }
.clip-preview img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.clip-play { position: absolute; inset: 0; display: grid; place-items: center; color: #f2e9d7; font: 17px Arial, sans-serif; text-shadow: 0 1px 5px #000; background: #0002; }
.clip-name { display: block; padding-block: 7px; font-size: 15px; }
.clip-choice:hover, .clip-choice[aria-current="page"] { color: var(--text); }
.clip-choice:hover .clip-preview, .clip-choice[aria-current="page"] .clip-preview { border-color: var(--brass); }
.clip-choice[aria-current="page"] .clip-name::after { content: ' · Selected'; color: var(--brass); font-size: 12px; }
@media (max-width: 520px) { .clip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.clips-title { text-align: center; }

.clip-choice { text-decoration: none; }