/* Shared "Remastered card" interaction styling, reused by Legacy Videoclips
   (page-videoclips.php) and Legacy DVD Downloads (page-dvddownloads.php) -
   adapted from the proven .rvc-media/.rvc-thumb-link/.rvc-overlay/.rvc-play
   rules in assets/css/pages/remastered-videoclips-frontend.css (that file is
   untouched; these are new, generically-named classes so the same rules work
   on any card without RVC-specific branding). Scoped to .card-preview-* /
   .card-thumb-link only - no existing selectors are touched. */
.card-preview-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #111217; }
.card-preview-still { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Absolutely-positioned, full-coverage link - not a bare <a> shrink-wrapping
   a block-level <img> - so the thumbnail's click area reliably covers the
   whole visible image (the exact "dead thumbnail" fix already proven on the
   Remastered card). Explicit z-index keeps the duration badge and preview
   button on top regardless of markup order. */
.card-thumb-link { position: absolute; inset: 0; z-index: 1; display: block; }
.card-preview-motion { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.card-preview-overlay { position: absolute; top: 8px; right: 8px; z-index: 3; pointer-events: none; color: #fff; background: #111217dc; border-radius: 4px; padding: 3px 7px; font-size: 10px; line-height: 1.4; }
.card-preview-play { position: absolute; bottom: 8px; left: 8px; right: 8px; z-index: 3; width: max-content; max-width: calc(100% - 16px); min-height: 44px; padding: 8px 11px; background: #111217e6; color: #fff; border: 1px solid #ffffff40; border-radius: 5px; font-size: 11px; line-height: 1.35; cursor: pointer; }
.card-preview-play:focus-visible { outline: 2px solid var(--tw-primary, #1b84ff); outline-offset: 2px; }
/* Centered bottom CTA footer - same flex/spacing/divider as the Remastered
   card's .rvc-purchase, using the site's existing .btn classes for the
   button itself (no new button style introduced). */
.card-preview-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding-top: 18px; border-top: 1px dashed var(--tw-gray-300, #d1d5db); }
.card-preview-cta .btn { min-height: 44px; justify-content: center; white-space: normal; line-height: 1.4; max-width: 100%; }
@media (max-width: 360px) {
  .card-preview-cta { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .card-preview-cta .btn { width: 100%; }
}