/* Approved video mockup, sharing the current article archive frame. */
.video-archive-title { display: inline-flex; align-items: center; gap: 0; padding: 0; vertical-align: middle; }
.video-archive-title h1 { flex: 0 0 auto; }
.video-archive-clapper { width: 136px; height: 136px; flex: 0 0 auto; object-fit: contain; }
.video-archive-reference .archive-title-divider { margin-top: 0; }
.video-archive-reference .archive-intro { padding-bottom: 46px; }
.video-archive-grid { row-gap: 26px; }
.video-archive-card { min-width: 0; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: linear-gradient(150deg, #fff, #fffafd); box-shadow: 0 9px 26px #a53c7620; transition: transform .2s, box-shadow .2s; }
.video-archive-poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px 10px 0 0; overflow: hidden; background: #eadce8; }
.video-archive-poster::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 55%, #210c242e); }
.video-archive-poster > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.video-archive-play { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; transform: translate(-50%,-50%); border-radius: 10px; background: #fff; color: var(--archive-accent); box-shadow: 0 6px 18px #2b0b2324; pointer-events: none; }
.video-archive-play svg { display: block; width: 24px; height: 24px; margin-left: 2px; }
.video-archive-duration { position: absolute; left: 12px; bottom: 11px; z-index: 1; padding: 3px 9px; border-radius: 10px; background: #231221cc; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.65; direction: ltr; font-variant-numeric: tabular-nums; }
.video-archive-duration[hidden] { display: none; }
.video-archive-card-body { flex: 1; display: flex; flex-direction: column; padding: 16px 20px 17px; }
.video-archive-card .archive-category { align-self: flex-start; font-size: 11px; }
.video-archive-card h2 { margin: 9px 0 15px; color: var(--archive-ink); font-size: 18px; font-weight: 700; line-height: 1.8; letter-spacing: -.02em; }
.video-archive-card h2 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-archive-watch { display: inline-flex; align-items: center; gap: 5px; align-self: flex-end; margin-top: auto; min-height: 38px; color: var(--archive-accent); font-size: 12px; font-weight: 700; }
.video-archive-watch svg { width: 16px; height: 16px; flex: 0 0 auto; }
@media (hover:hover) {
  .video-archive-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px #a53c762b; }
  .video-archive-card:hover .video-archive-poster > img { transform: scale(1.025); }
  .video-archive-card h2 a:hover, .video-archive-watch:hover { color: #bf0b61; }
}
@media (max-width:980px) { .video-archive-clapper { width: 120px; height: 120px; } }
@media (max-width:600px) {
  .video-archive-clapper { width: 82px; height: 82px; }
  .video-archive-reference .archive-intro { padding-bottom: 28px; }
  .video-archive-card-body { padding: 14px 18px 15px; }
  .video-archive-play { width: 48px; height: 48px; }
  .video-archive-card h2 { font-size: 18px; }
  .video-archive-watch { min-height: 44px; }
}
@media (prefers-reduced-motion:reduce) {
  .video-archive-card, .video-archive-poster > img { transition: none; }
  .video-archive-card:hover, .video-archive-card:hover .video-archive-poster > img { transform: none; }
}