/* Video library (videos.html and videos/*.html) */
.vid-controls { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.vid-filters, .vid-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.vid-filter, .vid-kind {
  font: 500 0.8rem 'Montserrat', sans-serif; color: var(--navy-900); background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: all 0.2s;
}
.vid-filter:hover, .vid-kind:hover { border-color: var(--cyan-600); color: var(--cyan-600); }
.vid-filter.is-on, .vid-kind.is-on { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.vid-count { color: var(--slate-400); margin-bottom: 22px; }

.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 24px; align-items: start; }
.vid-card { display: flex; flex-direction: column; gap: 8px; }
.vid-card[hidden] { display: none; }
.vid-thumb {
  position: relative; display: block; overflow: hidden; border-radius: 12px; background: var(--navy-950);
  aspect-ratio: 16 / 9; margin-bottom: 6px;
}
.vid-card.short .vid-thumb { aspect-ratio: 9 / 14; }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.vid-card:hover .vid-thumb img { transform: scale(1.04); }
.vid-play {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(10, 25, 48, 0.72); color: #fff; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.vid-play svg { width: 22px; height: 22px; margin-left: 2px; }
.vid-len {
  position: absolute; right: 10px; bottom: 10px; background: rgba(10, 25, 48, 0.85); color: #fff;
  font: 500 0.72rem 'IBM Plex Mono', monospace; padding: 3px 7px; border-radius: 4px;
}
.vid-topic { color: var(--cyan-600); }
.vid-title { font-family: 'Playfair Display', serif; font-size: 1.15rem; line-height: 1.25; color: var(--navy-950); transition: color 0.2s; }
.vid-card:hover .vid-title { color: var(--cyan-600); }
.vid-date { color: var(--slate-400); }
.vid-more { margin: 40px 0 8px; color: var(--slate-600); }
.vid-more a, .vid-watch a { color: var(--cyan-600); text-decoration: underline; text-underline-offset: 3px; }

/* video page */
.vid-player { position: relative; width: 100%; background: var(--navy-950); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.vid-player.wide { aspect-ratio: 16 / 9; }
.vid-player.short { aspect-ratio: 9 / 16; max-width: 380px; margin-left: auto; margin-right: auto; max-height: 82vh; }
.vid-player iframe, .vid-start { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-start { padding: 0; background: none; cursor: pointer; }
.vid-start img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-start .vid-play { width: 72px; height: 72px; margin: -36px 0 0 -36px; transition: transform 0.2s, background 0.2s; }
.vid-start .vid-play svg { width: 30px; height: 30px; }
.vid-start:hover .vid-play, .vid-start:focus-visible .vid-play { transform: scale(1.08); background: var(--cyan-600); }
.vid-watch { font-size: 0.85rem !important; color: var(--slate-400) !important; margin-bottom: 28px !important; text-align: center; }
.vid-summary { font-size: 1.15rem !important; color: var(--navy-900) !important; }
.vid-note { font-size: 0.85rem !important; color: var(--slate-400) !important; font-style: italic; }