/* ==========================================================================
   OPC PC 前台 · 首页大屏轮播
   沿用设计系统：中性石墨基底 + 单一强调色 var(--p1)，细描边圆角卡片
   ========================================================================== */

.home-banner { padding: 26px 0 6px; }

.home-banner .swiper {
    position: relative;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.swiper-track { position: relative; width: 100%; height: 100%; }

/* --- slide 模式 --- */
.swiper-slide .swiper-track { display: flex; transition: transform .55s cubic-bezier(.4, .01, .2, 1); }
.swiper-slide .swiper-item { position: relative; flex: 0 0 100%; height: 100%; }

/* --- fade 模式 --- */
.swiper-fade .swiper-item { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.swiper-fade .swiper-item.active { opacity: 1; }

.swiper-item { overflow: hidden; }

.swiper-image {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
}

.swiper-mask {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(6, 8, 12, .84) 0%, rgba(6, 8, 12, .42) 55%, rgba(6, 8, 12, .08) 100%);
}
.swiper-item.is-light .swiper-mask {
    background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .6) 55%, rgba(255, 255, 255, .16) 100%);
}

.swiper-content {
    position: relative; z-index: 2;
    height: 100%; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 66px;
}
.swiper-content--left { align-items: flex-start; text-align: left; max-width: 720px; }
.swiper-content--center { align-items: center; text-align: center; }
.swiper-content--right { align-items: flex-end; text-align: right; }

.swiper-title {
    font-size: 40px; line-height: 1.16; font-weight: 700;
    letter-spacing: -1px; color: #fff; margin: 0;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.swiper-item.is-light .swiper-title { color: var(--text); text-shadow: none; }

.swiper-sub {
    margin: 14px 0 0; font-size: 17px; line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}
.swiper-item.is-light .swiper-sub { color: var(--muted); }

.swiper-btn { margin-top: 26px; }
.swiper-hit { position: absolute; inset: 0; z-index: 2; cursor: pointer; }

/* --- 控件 --- */
.swiper-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 42px; height: 42px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-strong);
    background: rgba(11, 12, 15, .5); color: #fff;
    cursor: pointer; transition: .2s;
}
.swiper-arrow:hover { background: rgba(11, 12, 15, .78); }
.swiper-prev { left: 16px; }
.swiper-next { right: 16px; }

.swiper-dots {
    position: absolute; left: 0; right: 0; bottom: 16px; z-index: 5;
    display: flex; justify-content: center; gap: 8px;
}
.swiper-dots button {
    width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px;
    background: rgba(255, 255, 255, .45); cursor: pointer; transition: .2s;
}
.swiper-dots button.active { width: 22px; background: #fff; }

.swiper.is-single .swiper-arrow,
.swiper.is-single .swiper-dots { display: none; }

@media (max-width: 768px) {
    .home-banner { padding: 16px 0 4px; }
    .home-banner .swiper { height: 220px !important; }
    .swiper-content { padding: 0 22px; }
    .swiper-content--left { max-width: 100%; }
    .swiper-title { font-size: 24px; }
    .swiper-sub { font-size: 14px; }
    .swiper-prev { left: 8px; }
    .swiper-next { right: 8px; }
}