/* ===== VideoRail: horizontal, drag-scrollable video strip ===== */
.cc_d2ggg1qu_rkcbmYKhis .hl-vr { width: 100%; font-family: var(--hl-font-ui); overflow: hidden; }
.cc_d2ggg1qu_rkcbmYKhis .hl-vr__inner { padding-top: var(--hl-pt, var(--hl-section-y)); padding-bottom: var(--hl-pb, var(--hl-section-y)); }
.cc_d2ggg1qu_rkcbmYKhis .hl-vr--empty .hl-vr__inner { padding-top: 24px; padding-bottom: 24px; }
@media (max-width: 767px) {
  .cc_d2ggg1qu_rkcbmYKhis .hl-vr__inner { padding-top: var(--hl-pt-m, var(--hl-section-y)); padding-bottom: var(--hl-pb-m, var(--hl-section-y)); }
  .cc_d2ggg1qu_rkcbmYKhis .hl-vr--empty .hl-vr__inner { padding-top: 16px; padding-bottom: 16px; }
}

.cc_d2ggg1qu_rkcbmYKhis .hl-vr__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.cc_d2ggg1qu_rkcbmYKhis .hl-vr__title { font-size: var(--hl-fs-h2); }
.cc_d2ggg1qu_rkcbmYKhis .hl-vr__desc { margin: 8px 0 0; max-width: 44ch; }
.cc_d2ggg1qu_rkcbmYKhis .hl-vr__tools { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }

/* the ratio (--hl-vr) and radius (--hl-cut) live on the section and reach the cards by inheritance */
.cc_d2ggg1qu_rkcbmYKhis .hl-vr__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--hl-vrw, 360px);
  gap: var(--hl-vrg, 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: 4px;
  scrollbar-width: none;
  padding: 4px 4px 8px;
  -webkit-overflow-scrolling: touch;
}
.cc_d2ggg1qu_rkcbmYKhis .hl-vr__track::-webkit-scrollbar { display: none; }
.cc_d2ggg1qu_rkcbmYKhis .hl-vr__track:focus-visible { outline: 2px solid var(--hl-ink); outline-offset: 2px; }
/* The renderer wrapper is `display: contents`, so the grid items are the cards
   themselves (a `>` rule would land on the box-less wrapper). Both levels are
   covered so this also holds if the wrapper ever becomes a real element. */
.cc_d2ggg1qu_rkcbmYKhis .hl-vr__track > * { min-width: 0; scroll-snap-align: start; }
.cc_d2ggg1qu_rkcbmYKhis .hl-vr__track .hl-vc { min-width: 0; scroll-snap-align: start; }

/* the hand only appears where dragging is actually possible */
.cc_d2ggg1qu_rkcbmYKhis .hl-vr__track[data-drag="on"] { cursor: grab; }
.cc_d2ggg1qu_rkcbmYKhis .hl-vr__track[data-drag="on"][data-dragging] { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.cc_d2ggg1qu_rkcbmYKhis .hl-vr__track[data-drag="on"] video { -webkit-user-drag: none; }
@media (hover: none) { .cc_d2ggg1qu_rkcbmYKhis .hl-vr__track[data-drag="on"] { cursor: auto; } }

@media (max-width: 1023px) { .cc_d2ggg1qu_rkcbmYKhis .hl-vr__track { grid-auto-columns: min(46vw, var(--hl-vrw, 360px)); } }
@media (max-width: 767px) {
  .cc_d2ggg1qu_rkcbmYKhis .hl-vr__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cc_d2ggg1qu_rkcbmYKhis .hl-vr__track { grid-auto-columns: min(78vw, var(--hl-vrw, 360px)); gap: var(--hl-vrg-m, 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .cc_d2ggg1qu_rkcbmYKhis .hl-vr__track { scroll-behavior: auto; }
}