/* =====================================================================
   Video card (Figma 6:364)  — was "streaming tile"
   format: horizontal (16:9 thumbnail) | vertical (thumbnail fills the card, 9:16 art)
   theme:  light | dark
   type:   regular | streaming (platform logo over the bottom of the thumbnail, see Partnership and Logos)
   states: default (Duration badge bottom-left) · hover / keyboard focus (+ centered 48px play button) — Prompt 23, 2026-10-26.
   The ⋮ card menu holds Save and Share (since 2026-10-22). Nothing moves; focus shows the ring.
   ===================================================================== */
.video-card{position:relative;display:flex;flex-direction:column;gap:0;height:100%;border-radius:var(--radius-md);overflow:clip}
.video-card__thumb{position:relative;display:block;flex:1;min-height:157px;overflow:hidden;border-radius:var(--radius-md);background:var(--image-placeholder)}
.video-card--horizontal .video-card__thumb{flex:none;aspect-ratio:278/156.375;min-height:0}
.video-card--dark .video-card__thumb{background:var(--tile-thumb-dark)}
.video-card__link{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;border-radius:inherit;outline:none;cursor:pointer}
.video-card__link:focus-visible{box-shadow:var(--shadow-focus-ring)}
.video-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* Duration badge (Figma 2345:11129): bottom-left 12 from the edges, surface/media-overlay pill, 12px Lucide play filled text/on-media,
   Desktop/13 text. Both tokens keep their value in Dark (overlays on photos stay dark). Hidden when the video has no duration. */
.video-card__duration{position:absolute;left:var(--space-12);bottom:var(--space-12);z-index:2;display:inline-flex;align-items:center;gap:var(--space-4);
  padding:var(--space-4) var(--space-10) var(--space-4) var(--space-8);border-radius:var(--radius-full);background:var(--surface-media-overlay);
  color:var(--text-on-media);font:var(--text-xs);white-space:nowrap;pointer-events:none}
.video-card__duration svg{flex:none;width:12px;height:12px;fill:currentColor;stroke:none}
/* A streaming logo fills the bottom of the thumbnail: the badge moves to the top-left so it never covers the logo */
.video-card--streaming .video-card__duration{bottom:auto;top:var(--space-12)}

/* Play button (Figma Play Button in State=Hover): 48px circle, surface/media-overlay, 20px icon text/on-media; only on hover or
   keyboard focus of the card link. Touch screens (hover: none) never show it; the badge alone says "video". */
.video-card__play{position:absolute;left:50%;top:50%;z-index:2;width:48px;height:48px;margin:calc(-1 * var(--space-24)) 0 0 calc(-1 * var(--space-24));border-radius:var(--radius-full);
  background:var(--surface-media-overlay);color:var(--text-on-media);display:grid;place-items:center;pointer-events:none;
  opacity:0;transform:scale(.85);transition:opacity .2s var(--ease-out),transform .25s var(--ease-out)}
.video-card__play svg{display:block;width:20px;height:20px;fill:currentColor;stroke:none;margin-left:var(--space-2)}
.video-card:is(:hover,.is-hover,:has(.video-card__link:focus-visible)) .video-card__play{opacity:1;transform:scale(1)}
@media (hover:none){.video-card:not(.is-hover):hover .video-card__play{opacity:0}}
@media (prefers-reduced-motion:reduce){.video-card__play{transition:none;transform:none}}

/* Content: 2px side padding, 8px top/bottom, 4px gap */
.video-card__body{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-12);min-width:0}   /* Figma Video Card 6:350 Content: padding 12, gap 4 (Prompt 28) */
.video-card__title{margin:0;min-width:0;font:var(--text-card-title);color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-card__meta{display:flex;align-items:center;gap:var(--space-6);margin:0;min-width:0;overflow:hidden;font:var(--text-sm);color:var(--text-secondary);white-space:nowrap}
/* narrow cards: the last part (date or series) ends in an ellipsis instead of running under the ⋮ (Prompt 28; was homepage-only) */
.video-card__meta>:not(:last-child){flex:none}
.video-card__meta>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.video-card__meta i{font-style:normal;color:var(--text-muted)}
.video-card--dark .video-card__title{color:var(--neutral-50)} /* text/primary (Dark) */
.video-card--dark .video-card__meta{color:var(--neutral-300)} /* text/secondary (Dark) */
.video-card--dark .video-card__meta i{color:var(--neutral-400)}

/* Streaming: platform logo over the bottom of the thumbnail (Partnership and Logos · Card · Bottom) */
.video-card--streaming .partner-logo{--logo-h:41px;--logo-zone:140px;padding:var(--space-8)}
.video-card--streaming .partner-logo__img{background:var(--card-bg-hover)}

/* Simple: thumbnail + title only, title in the article headline style; same hover (play + Save/Share) */
.video-card--simple{height:auto}
.video-card--simple .video-card__body{padding:var(--space-12) var(--space-2) 0}
.video-card--simple .video-card__title{font:var(--text-card-title);-webkit-line-clamp:2}
.video-card--simple .video-card__meta{display:none}
.video-card--simple .video-card__link:hover~.video-card__body,.video-card--simple:hover .video-card__title{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Video Card title standard (2026-10-23): Desktop/20 card-title 16/20 on desktop, Mobile/16 card-title-sm 14/18 on tablet and phone, 2 lines max */
@media (max-width:1023px){.video-card__title,.video-card--simple .video-card__title{font:var(--text-card-title-sm)}}