/* AI videos: /videos/ grid and the homepage featured row (content/videos.json, videos.js). */
.vid-filter { display:flex; gap:8px; margin:2rem 0 0; flex-wrap:wrap; }
.vid-filter button { min-height:40px; padding:0 16px; border:1px solid var(--line); background:transparent; color:var(--dim, #8f8578); font:400 .8125rem/1 var(--mono, ui-monospace, monospace); cursor:pointer; }
.vid-filter button[aria-pressed="true"] { color:var(--fg); border-color:var(--accent); }
.vid-h { font-size:1.75rem; margin:2.5rem 0 1rem; }
[data-vid-group][hidden] { display:none; }
.vid-grid { list-style:none; margin:0; padding:0; display:grid; gap:1.25rem; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.vid-shorts { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.vid { margin:0; min-width:0; }
.vid-frame { position:relative; aspect-ratio:16 / 9; background:#0d0b0a; border:1px solid var(--line); overflow:hidden; }
.vid-shorts .vid-frame { aspect-ratio:9 / 16; }
.vid-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vid-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.vid-play { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; color:#fff; }
.vid-play::after { content:""; position:absolute; left:50%; top:50%; width:64px; height:44px; margin:-22px 0 0 -32px; border-radius:12px; background:rgba(19,17,15,.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 26px no-repeat; transition:background-color .2s; }
.vid-play:hover::after, .vid-play:focus-visible::after { background-color:var(--accent, #d7263d); }
.vid-play:focus-visible { outline:2px solid var(--accent, #d7263d); outline-offset:-3px; }
.vid-title { margin:.6rem 0 0; font:400 .9375rem/1.4 var(--sans); color:var(--fg); }
.vid-featured { padding:clamp(2rem, 5vw, 3.5rem) var(--gutter, 1rem); border-top:1px solid var(--line); }
.vid-featured-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; margin-bottom:1.25rem; }
.vid-featured-head h2 { margin:0; }
@media (max-width:767px) {
  .vid-grid { grid-template-columns:1fr; }
  .vid-shorts { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.75rem; }
}
@media (max-width:479px) { .vid-shorts { grid-template-columns:1fr; max-width:20rem; } }
.vid-title { min-height:2.8em; }