/* =========================================
   SCHOOL / CITY VIDEO HERO
========================================= */

.sta-school-video-hero,
.sta-city-video-hero,
.elementor-element.sta-school-video-hero,
.elementor-element.sta-city-video-hero,
.e-con.sta-school-video-hero,
.e-con.sta-city-video-hero{
  position:relative;
  width:100%;
  max-width:620px;
  margin:0 auto;
  min-height:180px;
  aspect-ratio:16 / 8.5;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px, 3vw, 30px);
  box-sizing:border-box;
  color:#fff;
  border-radius:28px;
}

.sta-school-video-hero .elementor-background-video-container,
.sta-school-video-hero .elementor-background-video-hosted,
.sta-city-video-hero .elementor-background-video-container,
.sta-city-video-hero .elementor-background-video-hosted{
  border-radius:inherit;
}

.sta-school-video-hero__overlay,
.sta-city-video-hero__overlay{
  width:auto;
  max-width:min(92vw, 920px);
  min-height:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:clamp(14px, 2.2vw, 22px) clamp(18px, 3vw, 34px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:rgba(0,0,0,.34);
  backdrop-filter:saturate(115%) blur(2px);
  -webkit-backdrop-filter:saturate(115%) blur(2px);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
}

.sta-school-video-hero__title,
.sta-school-video-hero__title .elementor-heading-title,
.sta-city-video-hero__title,
.sta-city-video-hero__title .elementor-heading-title{
  margin:0;
  color:#fff;
  text-align:center;
  font-family:var(--sta-font-body);
  font-size:clamp(28px, 4vw, 48px);
  font-weight:700;
  line-height:1.2;
  text-wrap:balance;
}

html[lang="zh-TW"] .sta-school-video-hero__title,
html[lang="zh-TW"] .sta-school-video-hero__title .elementor-heading-title,
html[lang="zh-TW"] .sta-city-video-hero__title,
html[lang="zh-TW"] .sta-city-video-hero__title .elementor-heading-title{
  font-family:var(--sta-font-cjk-sans);
}

.sta-school-video-hero video,
.sta-city-video-hero video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}

.sta-school-video-hero::before,
.sta-city-video-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:-1;
}

.sta-school-video-hero__poster-mobile,
.sta-city-video-hero__poster-mobile{
  display:none;
}

@media (max-width:1024px){
  .sta-school-video-hero,
  .sta-city-video-hero,
  .elementor-element.sta-school-video-hero,
  .elementor-element.sta-city-video-hero,
  .e-con.sta-school-video-hero,
  .e-con.sta-city-video-hero{
    min-height:160px;
    aspect-ratio:16 / 9;
    padding:20px;
  }
}

@media (max-width:767px){
  .sta-school-video-hero,
  .sta-city-video-hero,
  .elementor-element.sta-school-video-hero,
  .elementor-element.sta-city-video-hero,
  .e-con.sta-school-video-hero,
  .e-con.sta-city-video-hero{
    min-height:160px;
    aspect-ratio:auto;
    border-radius:20px;
    padding:14px;
  }

  .sta-school-video-hero__overlay,
  .sta-city-video-hero__overlay{
    max-width:min(92vw, 920px);
    min-height:0;
    padding:12px 14px 14px;
    border-radius:18px;
  }

  .sta-school-video-hero__title,
  .sta-school-video-hero__title .elementor-heading-title,
  .sta-city-video-hero__title,
  .sta-city-video-hero__title .elementor-heading-title{
    font-size:clamp(24px, 7vw, 34px);
    line-height:1.24;
  }

  .sta-school-video-hero__poster-mobile,
  .sta-city-video-hero__poster-mobile{
    display:block;
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    z-index:-3;
  }

  .sta-school-video-hero video,
  .sta-city-video-hero video{
    display:none;
  }
}