/* ============================================================
   Top Space Inner Styles — Foxconntech Design System v2.0
   basic-style token 已由 base.html 載入的 basic-style.css 提供
   ============================================================ */

/* ── 頁面頂部 Banner 容器 ─────────────────────────────────── */
.set-top-image {
  top: 80px;
  position: relative;
  background-color: #0c2340;
}

.set-top-image .set-top-title {
  position: absolute;
  top: 250px;
  left: 15%;
  font-weight: bold;
  font-size: 4rem;
  color: var(--color-white);
  text-shadow: #000000 0em 0em 0.5rem;
}

.set-top-image .set-top-title::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, var(--color-accent) 0%, rgba(29, 143, 224, 0) 100%);
  width: 140px;
  height: 3px;
  border-radius: 2px;
  bottom: -12px;
  left: 0;
}

.set-cover {
  object-fit: cover;
}

.top-image-size {
  height: 600px;
}

/* ── Responsive Breakpoints ──────────────────────────────── */
/* ── English Language Tweaks ─────────────────────────────── */
@media (max-width: 1200px) {
  html[lang="en"] .set-top-image .set-top-title {
    left: 12%;
    font-size: 3rem;
  }

}

@media (max-width: 900px) {
  .set-top-image .set-top-title {
    left: 5%;
    font-size: 3.5rem;
  }

  .set-top-image .set-top-title::after {
    width: 110px;
    bottom: -10px;
  }
}

@media (max-width: 600px) {
  .set-top-image {
    top: 65px;
  }

  .set-top-image .set-top-title {
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    font-size: 2.5rem;
  }

  .set-top-image .set-top-title::after {
    width: 90px;
    height: 3px;
    bottom: -8px;
  }

  .top-image-size {
    height: 450px;
  }

  /* 英文版：同優先級（0-2-1）但文件順序較後，覆蓋上方 1200px 英文規則的 left: 12% */
  html[lang="en"] .set-top-image .set-top-title {
    font-size: 2rem;
    left: 50%;
  }

  html[lang="en"] .set-top-image .set-top-title-too-long {
    top: 80px;
  }
}