/* Sakete Page Banner 组件样式 */

.sakete-page-banner {
  position: relative;
  width: 100%;
  height: 37.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 背景图片容器 */
.sakete-page-banner-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.sakete-page-banner-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 遮罩层 */
.sakete-page-banner-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #d9d9d9;
  z-index: 2;
  mix-blend-mode: multiply;
}

/* 内容区域 */
.sakete-page-banner-content {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--spacing-7xl, 7.5rem) 0;
}

.sakete-page-banner-content .container {
  width: 100%;
  height: auto;
}

.sakete-page-banner-title {
  font-family: var(--title-font-family, 'Open Sans', sans-serif);
  font-size: var(--font-size-h1, 3.75rem);
  font-weight: var(--font-weight-xl, 700);
  line-height: 116%;
  color: var(--text-color-light, #ffffff);
  margin: 0;
  text-align: left;
}

/* 响应式设计 */
@media screen and (max-width: 1440px) {
  .sakete-page-banner {
    height: 28.125rem; /* 450px */
  }

  .sakete-page-banner-content {
    padding: var(--spacing-7xl, 7.5rem) 0;
  }
}

@media screen and (max-width: 1024px) {
  .sakete-page-banner {
    height: 25rem; /* 400px */
  }

  .sakete-page-banner-content {
    padding: var(--spacing-5xl, 2.13rem) 0;
  }

  .sakete-page-banner-title {
    font-size: var(--font-size-h1, 3.75rem);
  }
}

@media screen and (max-width: 768px) {
  .sakete-page-banner {
    height: 18.75rem; /* 300px */
  }

  .sakete-page-banner-content {
    padding: var(--spacing-4xl, 2rem) 0;
  }

  .sakete-page-banner-title {
    font-size: var(--font-size-h1, 2.667rem);
  }
}

@media screen and (max-width: 576px) {
  .sakete-page-banner {
    height: 15.625rem; /* 250px */
  }

  .sakete-page-banner-content {
    padding: var(--spacing-3xl, 1.88rem) 0;
  }

  .sakete-page-banner-title {
    font-size: var(--font-size-h1, 2.667rem);
  }
}