/**
 * 【首页】17.合作客户 / 品牌展示模块
 * 借鉴 IT 模板 <section class="clients-section pb-0">：
 *   上部左：巨型浅灰水印 + 标题（高亮词金色下划线）
 *   上部右：描述文字
 *   下部：2 组无缝拼接的品牌 LOGO 跑马灯（hover 暂停，鼠标移走继续）
 *
 * 完全 CSS 跑马灯，不需要 owl-carousel / JS 依赖。
 */

.hcs-section {
    --hcs-gold: #f5c12e;
    --hcs-gold-line: rgba(245, 193, 46, 0.35);
    --hcs-title-strong: #1a1730;
    --hcs-title: #2b271b;
    --hcs-text: #5a5770;
    --hcs-bg: #ffffff;

    position: relative;
    padding: 110px 0 0;
    background: var(--hcs-bg);
    overflow: hidden;
}

/* 保留原模板 pb-0 语义：底部不内边距，与下一模块无缝紧贴 */
.hcs-section.pb-0 { padding-bottom: 0; }

/* ===================== 上部：标题 + 描述 ===================== */
.hcs-upper {
    position: relative;
    margin-bottom: 64px;
}

.hcs-title-col { position: relative; }

.hcs-float-text {
    position: absolute;
    left: 0;
    top: -38px;
    font-size: 120px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ebebf4;
    z-index: 0;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}

.hcs-main-title {
    position: relative;
    z-index: 1;
    font-size: 42px;
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -0.6px;
    margin: 0;
    color: var(--hcs-title-strong);
    max-width: 560px;
}

.hcs-highlight {
    color: var(--hcs-gold);
    position: relative;
    white-space: nowrap;
}

.hcs-highlight::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--hcs-gold) 0%, rgba(245, 193, 46, 0) 100%);
}

.hcs-desc {
    font-size: 15px;
    line-height: 1.85;
    color: var(--hcs-text);
    padding: 0 12px;
}

/* ===================== 下部：LOGO 跑马灯 ===================== */
.hcs-sponsors-outer {
    padding: 36px 0 72px;
    position: relative;
}

.hcs-track-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.hcs-track {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: stretch;
    column-gap: 28px;
    min-width: max-content;
    /* 向左无缝滚动：translateX(0) → translateX(-50%) 即可完成一轮（因为有两组相同数据）*/
    animation-name: hcs-marquee-x;
    animation-duration: var(--hcs-track-duration, 30s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
    will-change: transform;
}

.hcs-track--reverse {
    animation-direction: reverse;
}

/* hover 暂停：data-hcs-pause="1" 时启用；始终对移动端无限制支持 */
.hcs-track-wrap[data-hcs-pause="1"]:hover .hcs-track {
    animation-play-state: paused;
}

@keyframes hcs-marquee-x {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* 单个 LOGO 卡片 */
.hcs-slide-item {
    flex: 0 0 240px;
    max-width: 240px;
    height: 120px;
    background: #ffffff;
    border: 1px solid rgba(26, 23, 48, 0.07);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 22px;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease,
                background 0.3s ease;
}

.hcs-slide-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.hcs-slide-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    /* 默认灰阶 + 稍暗，接近原模板 clients-carousel 灰底效果 */
    filter: grayscale(1) brightness(0.92);
    opacity: 0.82;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.hcs-slide-item:hover {
    transform: translateY(-4px);
    background: #ffffff;
    border-color: var(--hcs-gold-line);
    box-shadow: 0 16px 36px rgba(245, 193, 46, 0.12),
                0 6px 16px rgba(26, 23, 48, 0.06);
}

.hcs-slide-item:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.06);
}

/* ===================== 响应式 ===================== */
@media (max-width: 1199.98px) {
    .hcs-float-text { font-size: 92px; top: -30px; letter-spacing: 2px; }
    .hcs-main-title { font-size: 34px; max-width: 100%; }
    .hcs-desc      { font-size: 14px; }
}

@media (max-width: 991.98px) {
    .hcs-section { padding: 80px 0 0; }

    .hcs-float-text { font-size: 70px; top: -24px; letter-spacing: 2px; left: 0; }
    .hcs-main-title { font-size: 28px; }
    .hcs-upper      { margin-bottom: 44px; }

    .hcs-title-col { margin-bottom: 22px; }
    .hcs-desc { padding: 0; }

    .hcs-slide-item {
        flex-basis: 200px;
        max-width: 200px;
        height: 104px;
    }

    .hcs-sponsors-outer { padding: 24px 0 60px; }
}

@media (max-width: 575.98px) {
    .hcs-section { padding: 60px 0 0; }

    .hcs-float-text { font-size: 42px; top: -16px; letter-spacing: 1px; }
    .hcs-main-title { font-size: 24px; }

    .hcs-desc { font-size: 13.5px; line-height: 1.75; }

    .hcs-slide-item {
        flex-basis: 168px;
        max-width: 168px;
        height: 92px;
        border-radius: 14px;
        padding: 12px 16px;
    }

    .hcs-sponsors-outer { padding: 14px 0 48px; }

    /* 移动端不强制 mask 渐隐，让左右更清晰 */
    .hcs-track-wrap {
        mask-image: none;
        -webkit-mask-image: none;
    }
}

/* 减少动画偏好：直接固定不滚动，展示所有 LOGO 静态两行（也可以滚动但非常慢，这里直接停展示快照）*/
@media (prefers-reduced-motion: reduce) {
    .hcs-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: 18px;
        padding: 10px 0;
        min-width: 0;
    }
    .hcs-slide-item {
        flex: 0 0 calc(33.33% - 14px);
        max-width: calc(33.33% - 14px);
        height: 100px;
    }
}