/* =========================================
   SCHOOLS WHY BLOCK
========================================= */

.sta-schools-why{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:clamp(420px, 60vh, 720px);
  width:100%;
  padding:clamp(24px, 4vw, 64px);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
  overflow:hidden;
}

.sta-schools-why::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, .16) 0%,
      rgba(0, 0, 0, .10) 42%,
      rgba(0, 0, 0, .04) 100%
    );
  z-index:0;
}

.sta-schools-why__inner{
  position:relative;
  z-index:1;
  width:min(100%, var(--sta-container-wide));
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.sta-schools-why__panel{
  width:min(100%, 760px);
  max-width:min(760px, 90vw);
  padding:clamp(18px, 3vw, 28px);
  border-radius:14px;
  background:rgba(0, 0, 0, .28);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:saturate(120%) blur(2px);
  -webkit-backdrop-filter:saturate(120%) blur(2px);
  box-shadow:0 12px 32px rgba(0,0,0,.10);
}

.sta-schools-why__title,
.sta-schools-why__title .elementor-heading-title{
  position:relative;
  margin:0 0 12px;
  color:#fff;
  font-family:"Cormorant Garamond", var(--sta-font-cjk-serif), var(--sta-font-serif);
  font-size:clamp(30px, 4.2vw, 46px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:.2px;
  text-shadow:none;
}

.sta-schools-why__title::after,
.sta-schools-why__title .elementor-heading-title::after{
  content:"";
  display:block;
  width:clamp(88px, 22%, 150px);
  height:4px;
  margin-top:12px;
  border-radius:999px;
  background:var(--sta-gold);
}

html[lang="zh-TW"] .sta-schools-why__title,
html[lang="zh-TW"] .sta-schools-why__title .elementor-heading-title{
  font-family:var(--sta-font-cjk-serif);
  font-weight:600;
  line-height:1.2;
  letter-spacing:0;
}

.sta-schools-why__lead,
.sta-schools-why__lead .elementor-widget-container{
  color:#F5F3EE;
  font-family:var(--sta-font-body);
  font-size:clamp(15px, 1.6vw, 18px);
  line-height:1.65;
  text-shadow:none;
}

html[lang="zh-TW"] .sta-schools-why__lead,
html[lang="zh-TW"] .sta-schools-why__lead .elementor-widget-container{
  font-family:var(--sta-font-cjk-sans);
  line-height:1.72;
}

.sta-schools-why__lead p{
  margin:0;
  color:inherit;
  font:inherit;
}

.sta-schools-why__lead strong{
  color:#fff;
  font-weight:700;
}

.sta-schools-why__list,
.sta-schools-why__list .elementor-widget-container{
  margin-top:8px;
  color:#F1EFEA;
  font-family:var(--sta-font-body);
  font-size:clamp(14px, 1.5vw, 16px);
  line-height:1.6;
}

html[lang="zh-TW"] .sta-schools-why__list,
html[lang="zh-TW"] .sta-schools-why__list .elementor-widget-container{
  font-family:var(--sta-font-cjk-sans);
  line-height:1.68;
}

.sta-schools-why__list ul,
.sta-schools-why__list ol{
  margin:0;
  padding-left:18px;
}

.sta-schools-why__list li{
  margin:4px 0;
  color:inherit;
}

.sta-schools-why__list li::marker{
  color:var(--sta-gold-soft);
}

.sta-schools-why__cta{
  margin-top:clamp(18px, 2vw, 24px);
}

.sta-schools-why__cta .sta-btn,
.sta-schools-why__cta a.sta-btn{
  min-height:auto;
  padding:12px 22px;
  border-radius:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 4px 14px rgba(0,0,0,.07);
}

.sta-scroll-target{
  scroll-margin-top:110px;
}

@media (max-width:1024px){
  .sta-schools-why{
    min-height:clamp(380px, 56vh, 620px);
    background-attachment:scroll;
  }

  .sta-schools-why__title,
  .sta-schools-why__title .elementor-heading-title{
    font-size:clamp(28px, 5.2vw, 42px);
  }
}

@media (max-width:767px){
  .sta-schools-why{
    min-height:clamp(340px, 52vh, 540px);
    padding:20px 16px;
  }

  .sta-schools-why__panel{
    width:100%;
    max-width:none;
    padding:18px 16px 20px;
    border-radius:14px;
  }

  .sta-schools-why__title,
  .sta-schools-why__title .elementor-heading-title{
    margin-bottom:14px;
    font-size:clamp(26px, 8vw, 38px);
  }

  .sta-schools-why__title::after,
  .sta-schools-why__title .elementor-heading-title::after{
    height:3px;
    margin-top:14px;
  }

  .sta-schools-why__lead,
  .sta-schools-why__lead .elementor-widget-container,
  .sta-schools-why__list,
  .sta-schools-why__list .elementor-widget-container{
    font-size:15px;
  }
}