.section--banner {
    background-image: var(--bg-mobile, var(--bg-tablet, var(--bg-desktop)));
}

/* --- 1. Banner Block --- */
.wrap--banner {

    height: 50vh;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.banner-title {
    color: var(--background-color);
    /* font-family: inherit; */
    text-shadow: 2px 2px 8px var(--brand-black-color);
}

/* --- 2. Breadcrumbs Block --- */


/* --- 3. Story Block --- */
.section--story {
    background: linear-gradient(to bottom, var(--brand-grey-color), var(--brand-ivory-color));
  color: var(--brand-black-color);
  background-color: var(--brand-grey-color);
}

.section--story h1,
.section--story h2,
.section--story h3,
.section--story p,
.section--story a {
  color: var(--brand-black-color);
}
.wrap--story {
}

.story {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
    gap: 10px;
    /* 图片和文字之间的间距 */
    /* flex-wrap: wrap; 
    padding: 60px 0; 
    overflow: hidden;  */
}



.story__image,
.story__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    display: block;
    object-fit: cover;
    /* 移除图片底部的微小间距 */
}

.story--text-left,
  .story--text-right {
    flex-direction: column;
  }

.story--no-image .story__text-content { flex: 1 1 100%; }
.story--no-image .story__image-wrapper { display: none; }

.marquee-container {
    width: 100%;
    overflow: hidden; /* 隐藏超出部分 */
    padding: 20px 0;
    position: relative;
}

.marquee__track {
    display: flex; /* 让所有子项排成一行 */
    width: max-content; /* 让轨道宽度由内容撑开 */
    gap: 20px;
    will-change: transform;
    /* 核心动画 */
    animation: marquee-animation 60s linear infinite;
}


/* 定义动画关键帧 */
@keyframes marquee-animation {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 将轨道向左移动其内容宽度的一半（因为我们复制了一份内容）*/
        transform: translateX(-50%);
    }
}

.marquee--paused .marquee__track {
    animation-play-state: paused; /* 使用 !important 确保覆盖悬停效果 */
}

.marquee__item {
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--brand-ivory-color) 40%, var(--background-color));
    border: 1px solid color-mix(in srgb, var(--brand-black-color) 10%, transparent);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    padding: 10px 20px;
   gap: 15px;
    width: 350px; /* 固定宽度，或者 min-width */
    min-height: 200px;
    flex-shrink: 0; /* 防止项目被压缩 */
    text-decoration: none;
    color: inherit;
}

.marquee__avatar {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 10%;
    object-fit: cover;
    
}

.marquee__quote {
    margin-inline-start: 0;
    font-size: 0.9rem;
    color: var(--brand-black-color);
        overflow: hidden;
    text-overflow: ellipsis;
 white-space: normal; 
  word-break: break-word; 
}

.marquee__author {
    color: var(--brand-black-color);
    font-weight: bold;
}

.marquee-toggle-button {
    position: absolute;
    /* [修正] 现在它会相对于 .marquee-container 定位 */
    bottom: 0; /* 距离底部 1rem */
    right: 0;  /* 距离右侧 1rem (比 margin-left 更可靠) */
    
    background-color: var(--brand-grey-color); /* 增加背景不透明度 */
    border: none; /* 移除边框，更简洁 */
    border-radius: 50%;
    width: 44px;  /* 稍微增大触摸目标 */
    height: 44px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    z-index: 10; /* 提高 z-index 以确保在最上层 */
    
    /* [修正] 让按钮默认可见，或者在父容器悬停时可见 */
    opacity: 1; /* 默认隐藏 */
    visibility: visible;
    transform: scale(0.8);
}
/* 按钮内的 SVG 图标样式 */
.marquee-toggle-button svg {
    width: 34px;
    height: 34px;
    fill: var(--background-color);
    /* 图标颜色 */
}

@media (min-width: 768px) {
.section--banner {
  background-image:  var(--bg-tablet, var(--bg-desktop));
    }

    .story__text-content {
    flex: 1 1 55%;
}

.story__image-wrapper {
    flex: 1 1 45%;
    /* width: 100%; */

}

    .story--text-left {
    flex-direction: row;
}

.story--text-right {
    flex-direction: row-reverse;
}


}
@media (min-width: 1024px) {
  .section--banner {
  background-image:  var(--bg-desktop);
}

.story {
    gap: 80px;
 max-width: 1200px; /* <<< 设置一个最大宽度 */
        margin-left: auto;  /* <<< 水平居中 */
        margin-right: auto; /* <<< 水平居中 */
}
    .story__text-content {
    flex: 1 1 50%;
}

.story__image-wrapper {
    flex: 1 1 50%;
    max-height: 650px;
}
 .story__image,
.story__image img {
  max-height: 650px;
   

}

.marquee:hover .marquee__track {
    animation-play-state: paused; /* 鼠标悬停时暂停动画 */
}

}