/* Click-to-play video facade. Self-contained so generated templates keep working. */
.ef-video { width: 100%; }
.ef-video-cover {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: #0e2547;
}
.ef-video-cover img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.ef-video-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 25, 50, 0) 55%, rgba(10, 25, 50, .45) 100%);
}
.ef-video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #102a56; background: #d7af55;
  box-shadow: 0 10px 30px rgba(10, 25, 50, .35);
  transition: transform .18s ease, background .18s ease;
}
.ef-video-cover:hover .ef-video-play { transform: translate(-50%, -50%) scale(1.06); background: #e3c06c; }
.ef-video-cover:focus-visible { outline: 3px solid #d7af55; outline-offset: 3px; }
.ef-video-badges {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  display: flex; gap: 8px; align-items: center;
}
.ef-video-duration,
.ef-video-demo {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 999px;
}
.ef-video-duration { color: #fff; background: rgba(10, 25, 50, .78); }
.ef-video-demo { color: #102a56; background: #f0dfb8; text-transform: uppercase; }
.ef-video iframe {
  width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 14px; display: block;
  background: #000;
}
.ef-video-caption { margin: 10px 2px 0; font-size: .85rem; color: #556070; }
.ef-video-noscript { margin: 10px 0 0; font-size: .9rem; }

/* Presale landing: match the warmer presale palette for the caption. */
.presale-page .ef-video-caption { color: #6b6250; }
.ef-video-label {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 22px;
  max-width: min(70%, 360px);
  color: #fff;
  font-family: Georgia, serif;
  font-size: 1rem;
  line-height: 1.3;
  text-align: right;
  text-shadow: 0 2px 12px rgba(5, 15, 31, .5);
}
.presale-video { padding: 8px 0 24px; }
.presale-video .presale-shell { max-width: 860px; }

/* Homepage hero: fill the stretched media column like the old photo did
   (.corp-hero-media img used to be width/height 100% with object-fit cover). */
.corp-hero-media .ef-video--hero { height: 100%; display: flex; flex-direction: column; }
.corp-hero-media .ef-video--hero .ef-video-cover { flex: 1 1 auto; aspect-ratio: auto; min-height: 220px; }

/* Homepage hero: keep the image aligned to the content rail on the left,
   while letting its right edge run to the viewport edge. */
@media (min-width: 821px) {
  .corporate-site .corp-home-hero-grid {
    width: calc(100vw - max(32px, (100vw - 1280px) / 2));
    max-width: none;
    margin-left: max(32px, (100vw - 1280px) / 2);
    margin-right: 0;
  }
}

.corporate-site .corp-home-hero .ef-video-cover { border-radius: 0; }

.ef-video-modal-open { overflow: hidden; }
.ef-video-modal {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 24px; background: rgba(5, 15, 31, .84); backdrop-filter: blur(6px);
}
.ef-video-modal__dialog {
  position: relative; width: min(960px, 100%); padding: 14px; background: #fff;
  border-radius: 16px; box-shadow: 0 24px 90px rgba(0, 0, 0, .38);
}
.ef-video-modal__frame { aspect-ratio: 16 / 9; background: #000; }
.ef-video-modal iframe { width: 100%; height: 100%; display: block; border: 0; }
.ef-video-modal__close {
  position: absolute; top: -46px; right: 0; width: 36px; height: 36px; display: grid;
  place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%;
  color: #fff; background: rgba(5, 15, 31, .5); font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.ef-video-modal__close:focus-visible { outline: 2px solid #d7af55; outline-offset: 3px; }

@media (max-width: 560px) {
  .ef-video-modal { padding: 15px; }
  .ef-video-modal__dialog { padding: 7px; border-radius: 10px; }
  .ef-video-modal__close { top: -46px; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ef-video-play { transition: none; }
  .ef-video-cover:hover .ef-video-play { transform: translate(-50%, -50%); }
}