/* Vertical session clips (includes/shorts.php) on the chapter and landing pages. Tokens from style.css. */
.shorts-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 240px)); gap: 16px; }
.short-card { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.short-video { width: 100%; aspect-ratio: 9 / 16; background: #0f1629; border-radius: var(--radius-md); display: block; object-fit: contain; }
/* Full screen on a landscape screen: the whole clip, centred, never cropped to the screen's width. */
.short-video:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: contain; background: #000; }
.short-video:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: contain; background: #000; }
.short-card figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.short-card figcaption span { font-size: 12.5px; color: var(--ink-muted); }
.short-card figcaption a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* Landing: one clip beside its pitch */
.short-feature { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center; margin-bottom: 30px; }
.short-feature .short-pitch { display: flex; flex-direction: column; gap: 10px; }
.short-feature .short-pitch h2 { margin: 0; }
.short-feature .short-pitch p { margin: 0; color: var(--ink-secondary); }
@media (max-width: 640px) {
  .shorts-row { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .short-feature { grid-template-columns: 1fr; }
  .short-feature .short-card { max-width: 260px; margin: 0 auto; }
}