/* Studio promo video in the Justcanli card (copied from justonaircom/css/promo-video.css). Files live on Bunny (plancode-marketing
   pull zone); see tools/bunny-promo-upload.py. Behaviour: js/promo-video.js */
.promo-video {
  margin: 0;
  position: relative;
}
.promo-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #050f24;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.09),
    0 30px 80px -24px rgba(0, 0, 0, 0.7),
    0 0 60px -10px rgba(175, 209, 54, 0.18);
}
@supports not (aspect-ratio: 16 / 9) {
  .promo-video__frame { height: 0; padding-top: 56.25%; }
  .promo-video__media { position: absolute; top: 0; left: 0; }
}
.promo-video__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.promo-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border: 0;
  border-radius: 50%;
  background: #afd136;
  color: #0e1626;
  font-size: 28px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  padding-left: 6px; /* optical centre of the triangle */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.promo-video__play:hover { transform: scale(1.06); }
.promo-video.is-paused .promo-video__play { display: flex; }
.promo-video__sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(5, 15, 36, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.promo-video__sound:hover,
.promo-video__sound[aria-pressed="true"] {
  border-color: #afd136;
  background: rgba(5, 15, 36, 0.88);
}
.promo-video__sound .fa { width: 1em; color: #afd136; }
.promo-video__play:focus-visible,
.promo-video__sound:focus-visible {
  outline: 2px solid #afd136;
  outline-offset: 2px;
}

/* Studio page hero: text left, video right on large screens */
.promo-hero-row { margin-top: 0.5rem; }
.promo-hero-row .promo-video { margin-top: 1.5rem; }
@media (min-width: 992px) {
  .promo-hero-row .promo-video { margin-top: 2.5rem; }
  .promo-hero-row .studio-hero-title { font-size: 3.1rem; }
}
@media (max-width: 991.98px) {
  .promo-hero-row .promo-video { margin-bottom: 1rem; }
}

/* Home page Studio block */
.home-promo { margin: 1.25rem 0 2rem; }
@media (max-width: 575.98px) {
  .promo-video__frame { border-radius: 10px; }
  .promo-video__sound { right: 8px; bottom: 8px; padding: 3px 10px; font-size: 0.75rem; gap: 6px; }
  .promo-video__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; font-size: 22px; }
}

/* Inside the card's browser frame: the frame supplies the border and shadow. */
.promo-video--in-frame .promo-video__frame { border-radius: 0; box-shadow: none; }