/* Bordered white card; the video bleeds to its edge, the sidebar is padded. */
.jarvis-video-sidebar {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
/* Bootstrap .ratio already absolutely fills the iframe/video into a 16:9 box;
   the card's overflow:hidden clips the outer corners. */
.jarvis-video-sidebar__media video {
  object-fit: cover;
}
.jarvis-video-sidebar__aside {
  padding: 2.5rem;
}
.jarvis-video-sidebar__eyebrow {
  color: var(--bs-primary, #2d6cdf);
  letter-spacing: 0.1em;
  font-size: 0.85rem;
}
/* Size keyed off the TAG, so the heading_level prop actually resizes — this
   class used to carry a flat font-size: 1.9rem. Plain theme scale, no hero
   multiplier: at the h2 default it lands at 2rem, near the 1.9rem it
   replaced. */
.jarvis-video-sidebar__title {
  line-height: 1.15;
}
h2.jarvis-video-sidebar__title {
  font-size: var(--jarvis-fs-h2, 2rem);
}
h3.jarvis-video-sidebar__title {
  font-size: var(--jarvis-fs-h3, 1.75rem);
}
h4.jarvis-video-sidebar__title {
  font-size: var(--jarvis-fs-h4, 1.5rem);
}
.jarvis-video-sidebar__desc {
  color: var(--bs-secondary-color, #6c757d);
}
/* Reversed-colour link beside the primary button (secondary hue, no fill). */
.jarvis-video-sidebar__link {
  color: var(--bs-secondary, #1b2a4a);
  text-decoration: none;
  font-size: 1.05rem;
}
.jarvis-video-sidebar__link:hover,
.jarvis-video-sidebar__link:focus {
  text-decoration: underline;
}

/* Below the lg breakpoint the columns stack: video on top, full width, so the
   media column shouldn't stay at the 16x9 crop height of the desktop layout. */
@media (max-width: 991.98px) {
  .jarvis-video-sidebar__aside {
    padding: 1.75rem;
  }
}