/* School videos — click-to-play facades (app/static/js/video.js). Included only on pages with videos. */
.vid-sec{margin:1rem 0}
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:1rem;margin-top:.6rem}
.vid-card{margin:0;min-width:0;display:flex;flex-direction:column;gap:.4rem}
.vid-facade,.vid-frame{display:block;position:relative;width:100%;aspect-ratio:16/9;border:0;padding:0;margin:0;
  border-radius:var(--radius,10px);overflow:hidden;background:#000;cursor:pointer;color:#fff;text-decoration:none}
.vid-facade img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s ease,opacity .2s ease}
.vid-facade:hover img,.vid-facade:focus-visible img{transform:scale(1.03);opacity:.9}
.vid-facade:focus-visible{outline:3px solid var(--accent,#2563eb);outline-offset:2px}
.vid-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.vid-facade:hover .vid-play path:first-child,.vid-facade:focus-visible .vid-play path:first-child{fill:#f00;fill-opacity:1}
.vid-outlabel{position:absolute;left:.5rem;bottom:.5rem;padding:.25rem .55rem;border-radius:6px;background:rgba(0,0,0,.75);font-size:.8rem;font-weight:600}
.vid-card figcaption{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.vid-title{font-size:.95rem;line-height:1.3;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (prefers-reduced-motion:reduce){.vid-facade img{transition:none}.vid-facade:hover img{transform:none}}