/* Rules that only apply on /clips/ — loaded by that page after style.css. */
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }

.clip-card, .clip-winner { overflow: hidden; padding: 0; display: flex; flex-direction: column; }

.clip-winner { flex-direction: row; border-color: rgb(var(--brass-rgb) / 0.5); box-shadow: 0 12px 36px -18px rgb(var(--brass-rgb) / 0.6); }

.clip-winner .clip-thumb, .clip-winner .clip-embed { width: 46%; flex: none; }

.clip-card.is-leading { border-color: rgb(var(--brass-rgb) / 0.5); }

.clip-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; cursor: pointer; background: #0b1220 center / cover no-repeat; text-decoration: none; }

.clip-thumb-ext { display: grid; place-items: center; align-content: center; gap: 6px; background: linear-gradient(135deg, #0f1b33, #1b2b4d); color: var(--bone); }

.clip-play { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgb(0 0 0 / 0.55); color: #fff; backdrop-filter: blur(4px); transition: transform .15s; }

.clip-thumb:not(.clip-thumb-ext) .clip-play { position: absolute; inset: 0; margin: auto; }

.clip-thumb:hover .clip-play { transform: scale(1.1); }

.clip-ext-label { font-size: 0.8rem; color: var(--ash); }

.clip-embed { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; }

.clip-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.clip-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }

.clip-title { margin: 0; font-size: 0.98rem; line-height: 1.35; }

.clip-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8rem; }

.clip-author { display: inline-flex; align-items: center; gap: 6px; color: var(--bone); text-decoration: none; min-width: 0; }

.clip-author span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.clip-actions { display: flex; gap: 6px; margin-top: auto; }

@media (max-width: 720px) {
  .clip-winner { flex-direction: column; }
  .clip-winner .clip-thumb, .clip-winner .clip-embed { width: 100%; }
}

.clip-body .tag { align-self: flex-start; width: fit-content; }