/* Video gallery — pill filter built on .btn-check radios, button thumbnails, modal placeholder. */
.page-videos .video-filter { gap: .4rem; }
.page-videos .video-filter .nav-link { cursor: pointer; border: 1px solid var(--brand-border-strong); color: var(--brand-text); font-weight: 500; border-radius: var(--radius-sm); padding: .4rem 1rem; }
.page-videos .video-filter .nav-link:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.page-videos .video-filter .count { font-size: var(--text-xs); color: var(--brand-text-secondary); margin-left: .15rem; }
.page-videos .video-filter .btn-check:checked + .nav-link { background: var(--brand-primary-fill); border-color: var(--brand-primary); color: var(--brand-text-on-primary); font-weight: 700; }
.page-videos .video-filter .btn-check:checked + .nav-link .count { color: var(--brand-text-on-primary); }
/* --brand-primary is dark mode's TEXT red (#FF6B7D); as a fill under the
   always-white label/count above it only clears 2.74:1, failing the 4.5:1
   this real text needs. var(--brand-primary-fill) is the fill red colors.css already pins
   for [data-bs-theme=dark] .btn-primary (5.08:1 for white). */
[data-bs-theme=dark] .page-videos .video-filter .btn-check:checked + .nav-link { background: var(--brand-primary-fill); border-color: var(--brand-primary-fill); }
.page-videos .video-filter .btn-check:focus-visible + .nav-link { outline: 3px solid var(--brand-secondary); outline-offset: 2px; }

.page-videos .video-card .video-thumb { width: 100%; padding: 0; border: 0; cursor: pointer; }
.page-videos .video-card .video-thumb:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }
.page-videos .video-card .video-thumb:hover .play { background: var(--brand-primary-fill-hover); }
/* template.css's .play icon is always var(--brand-text-on-dark) (fixed white).
   --brand-primary-hover is dark mode's lighter TEXT-hover red (#FF8F9C) --
   as a fill under a white icon it drops to 2.30:1, failing 1.4.11's 3:1.
   var(--brand-primary-fill-hover) is colors.css's own [data-bs-theme=dark] .btn-primary HOVER fill
   (4.48:1 for white). NOTE: the base (non-hover) .play in template.css has
   this same bug (background: var(--brand-primary-fill)) — out of scope here,
   flagged for the orchestrator. */
[data-bs-theme=dark] .page-videos .video-card .video-thumb:hover .play { background: var(--brand-primary-fill-hover); }
.page-videos .video-type { position: absolute; left: .6rem; bottom: .6rem; display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem .2rem .3rem; background: var(--brand-bg); color: var(--brand-text); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; box-shadow: var(--shadow-sm); }
.page-videos .video-type img { width: 36px; height: auto; opacity: 1; transform: none; }
.page-videos .video-card:hover .video-type img { transform: none; }

.page-videos .video-placeholder { background: var(--brand-ink); border-radius: var(--radius-md); overflow: hidden; }
.page-videos .video-placeholder img { object-fit: cover; }