/* =====================================================================
   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 · hover (56px play button + Save/Share box). 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(--tile-thumb-light)}
.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;border-radius:inherit;outline:none}
.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}

/* Hover: play button (white @50%) + Save/Share box top-right, same box as Story cards */
.video-card__play{position:absolute;left:50%;top:50%;z-index:2;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.5);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{fill:var(--neutral-900);margin-left:2px;width:24px;height:24px}
.video-card__actions{position:absolute;top:10px;right:10px;z-index:3;display:flex;flex-direction:column;gap:3px;padding:3px;
  background:var(--card-bg-default);border-radius:3px;filter:drop-shadow(0 .8px 1.6px rgba(0,0,0,.03));
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease-out),visibility .2s}
.video-card__act{display:flex;align-items:center;justify-content:center;width:40px;height:36px;padding:0;border:0;border-radius:var(--radius-md);background:none;color:var(--text-primary);cursor:pointer}
.video-card__act svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.video-card__act:hover{background:var(--button-ghost-bg-hover)}
.video-card__act[aria-pressed="true"] svg path:first-child{fill:currentColor}
.video-card:is(:hover,.is-hover,:focus-within) :is(.video-card__play){opacity:1;transform:scale(1)}
.video-card:is(:hover,.is-hover,:focus-within) .video-card__actions{opacity:1;visibility:visible}
:root[data-theme="dark"] .video-card__actions,.video-card--dark .video-card__actions{background:var(--card-bg-default)}

/* Content: 2px side padding, 8px top/bottom, 4px gap */
.video-card__body{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8) 2px;min-width:0}
.video-card__title{margin:0;min-width:0;font:var(--text-xl);color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.video-card__meta{display:flex;align-items:center;gap:6px;margin:0;font:var(--text-sm);color:var(--text-secondary);white-space:nowrap}
.video-card__meta i{font-style:normal;color:var(--text-muted)}
.video-card--dark .video-card__title{color:#FFF9F0} /* 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:8px}
.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) 2px 0}
.video-card--simple .video-card__title{font:var(--text-headline-card);-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}