/* Shared hero template for the VDE, ESAI and OMAF product pages. */
.product-hero-template {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(560px, 1.15fr) !important;
  align-items: center;
  gap: clamp(60px, 5vw, 96px) !important;
  min-height: 700px;
  margin-top: 0 !important;
  padding: 64px max(32px, calc((100vw - 1420px) / 2)) 76px !important;
  overflow: hidden;
}

.product-hero-template > .product-hero-copy,
.product-hero-template > .product-hero-visual {
  position: relative;
  z-index: 1;
  align-self: center;
  min-width: 0;
  transform: none;
}

.product-hero-template > .product-hero-copy { max-width: 640px; }

.product-hero-template .product-hero-title-block {
  margin: 0 0 20px !important;
  padding-bottom: 23px;
  border-bottom: 1px solid rgba(15, 39, 66, .14);
}

.product-hero-template h1 {
  display: flex;
  align-items: flex-end;
  gap: 16px !important;
  margin: 0;
  font-size: clamp(60px, 4.4vw, 76px) !important;
  line-height: .94 !important;
  letter-spacing: -.075em;
  white-space: nowrap;
}

.product-hero-template h1 span {
  font-size: .82em !important;
  font-weight: 780;
  line-height: 1 !important;
  letter-spacing: inherit;
}

.product-hero-template h1 strong {
  display: inline-block;
  padding: 10px 16px 11px;
  border-radius: 11px;
  color: #fff;
  font-size: .70em !important;
  line-height: .9 !important;
  letter-spacing: -.03em;
}

.vde-site .product-hero-template h1 span { color: var(--blue-deep); }
.vde-site .product-hero-template h1 strong {
  background: var(--red);
  box-shadow: 0 18px 40px rgba(226, 24, 35, .22);
}
.esai-site .product-hero-template h1 span { color: #07172b; }
.esai-site .product-hero-template h1 strong {
  background: var(--esai);
  box-shadow: 0 18px 40px rgba(8, 125, 241, .25);
}
.omaf-site .product-hero-template h1 span { color: var(--omaf-ink); }
.omaf-site .product-hero-template h1 strong {
  background: #12151c;
  box-shadow: 0 16px 32px rgba(8, 15, 27, .2);
}

.product-hero-template .product-hero-positioning {
  margin: 24px 0 0 !important;
  color: #33475b !important;
  font-size: 25px !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
}

.product-hero-template .product-hero-description {
  max-width: 620px;
  margin: 0;
  color: #5e6c7d;
  font-size: 20px !important;
  line-height: 1.85;
}

.product-hero-template .product-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.product-hero-template .product-hero-actions > .btn {
  width: 142px;
  height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 7px;
  gap: 0;
  font-size: 18px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 12px 26px rgba(15, 39, 66, .12);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

.product-hero-template .product-hero-actions > .btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(226, 24, 35, .2);
}

.product-hero-template .product-hero-actions > .btn.secondary {
  border-color: rgba(15, 39, 66, .28);
  background: rgba(255, 255, 255, .82);
  box-shadow: none;
}

.product-hero-template .product-hero-actions > .btn.secondary:hover {
  border-color: rgba(15, 39, 66, .56);
  background: #fff;
  transform: translateY(-2px);
}

.product-hero-template .product-hero-actions > .btn:active {
  transform: translateY(0);
}

.product-hero-template .product-hero-actions > .btn:focus-visible {
  outline: 3px solid rgba(39, 145, 255, .28);
  outline-offset: 3px;
}

.product-hero-template > .product-hero-visual {
  min-height: 560px;
  display: grid;
  place-items: center;
}

.product-hero-template .product-hero-media {
  position: relative;
  width: min(790px, 100%);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 22px;
  background: #07111d;
  box-shadow: 0 42px 90px rgba(15, 39, 66, .24);
}

.product-hero-template .product-hero-media > .esai-window-bar,
.product-hero-template .product-hero-media > .omaf-window-bar { display: none; }

/* Legacy floating badges overlap the shared player's native controls. */
.product-hero-template .omaf-float { display: none; }

.product-hero-template .product-hero-media > video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #07111d;
}

@media (max-width: 1100px) {
  .product-hero-template {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    min-height: auto;
    padding: 72px max(32px, calc((100vw - 900px) / 2)) 84px !important;
  }
  .product-hero-template > .product-hero-copy { max-width: 680px; }
  .product-hero-template > .product-hero-visual {
    width: 100%;
    min-height: 0;
    max-width: 790px;
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .product-hero-template {
    gap: 24px !important;
    padding: 56px 20px 58px !important;
  }
  .product-hero-template h1 {
    gap: 11px;
    font-size: 54px !important;
  }
  .product-hero-template h1 strong {
    padding: 9px 12px 10px;
    border-radius: 8px;
  }
  .product-hero-template .product-hero-positioning {
    margin: 20px 0 16px;
    font-size: 24px !important;
  }
  .product-hero-template .product-hero-description { font-size: 18px; }
  .product-hero-template .product-hero-actions { flex-direction: column; }
  .product-hero-template .product-hero-actions > a { width: 100%; }
}