/*
CaspiaSupply 首页工厂视频组件 v2

独立组件样式，不依赖首页模块样式。
*/

.cfv-section {
    --factory-accent: #11cfc0;
    --factory-background: #f3f3f5;
    --factory-title: #121419;
    --factory-text: #666c76;

    width: 100%;
    margin: 28px 0;
    padding: clamp(34px, 3.2vw, 52px);
    overflow: hidden;
    border-radius: 24px;
    background: var(--factory-background);
    box-sizing: border-box;
}

.cfv-section *,
.cfv-section *::before,
.cfv-section *::after {
    box-sizing: border-box;
}

.cfv-wrap {
    width: 100%;
    display: grid;
    grid-template-columns:
        minmax(330px, 0.82fr)
        minmax(0, 1.55fr);
    align-items: center;
    gap: clamp(38px, 4vw, 66px);
}


/* 左侧文案 */

.cfv-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transition:
        opacity 0.16s ease,
        transform 0.16s ease;
}

.cfv-copy.is-switching {
    opacity: 0.6;
    transform: translateY(3px);
}

.cfv-eyebrow {
    width: 100%;
    height: 22px;
    margin: 0 0 20px;
    overflow: hidden;
    color: #8c919b;
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0.12em;
}

.cfv-title {
    width: 100%;
    height: 3.5em;
    min-height: 3.5em;
    max-height: 3.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 22px;
    overflow: hidden;
    color: var(--factory-title);
    font-size: clamp(35px, 2.8vw, 49px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.045em;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.cfv-desc {
    width: 100%;
    max-width: 520px;
    height: 5.25em;
    min-height: 5.25em;
    max-height: 5.25em;
    display: -webkit-box;
    margin: 0 auto 12px;
    overflow: hidden;
    color: var(--factory-text);
    font-size: 15px;
    line-height: 1.75;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.cfv-note {
    width: 100%;
    max-width: 500px;
    height: 3.4em;
    min-height: 3.4em;
    max-height: 3.4em;
    display: -webkit-box;
    margin: 0 auto;
    overflow: hidden;
    color: #969ba4;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* 右侧媒体区 */

.cfv-player {
    min-width: 0;
    width: 100%;
}

.cfv-stage {
    position: relative;
    width: 100%;
}

.cfv-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    background: #08090b;
    box-shadow:
        0 22px 48px rgba(24, 29, 38, 0.13),
        0 5px 15px rgba(24, 29, 38, 0.08);
}

.cfv-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: #08090b;
    object-fit: cover;
    object-position: center;
}

.cfv-el[hidden],
.cfv-placeholder[hidden] {
    display: none !important;
}


/* 没有视频时的占位 */

.cfv-placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 50% 38%,
            #30343d 0%,
            #15181e 52%,
            #08090b 100%
        );
    text-align: center;
}

.cfv-placeholder-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 50%;
    color: #15181d;
    background: rgba(255, 255, 255, 0.94);
    font-size: 18px;
    text-indent: 3px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22);
}

.cfv-placeholder strong {
    font-size: 21px;
    font-weight: 700;
}

.cfv-placeholder > span:last-child {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
}


/* 左右切换按钮 */

.cfv-arrow {
    position: absolute;
    top: 50%;
    z-index: 8;
    width: 38px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #14171c;
    background: rgba(255, 255, 255, 0.84);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        width 0.22s ease,
        background 0.22s ease;
}

.cfv-arrow:hover {
    width: 43px;
    background: rgba(255, 255, 255, 0.97);
}

.cfv-arrow[hidden] {
    display: none;
}

.cfv-prev {
    left: 0;
    border-radius: 0 11px 11px 0;
}

.cfv-next {
    right: 0;
    border-radius: 11px 0 0 11px;
}


/* 动态缩略视频 */

.cfv-thumbs {
    width: 100%;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-top: 18px;
}

.cfv-thumb {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 10;
    display: block;
    overflow: hidden;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 11px;
    background: #282b31;
    cursor: pointer;
    box-shadow:
        0 5px 14px rgba(25, 29, 38, 0.09);
    transform: translateY(0) scale(1);
    transition:
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cfv-thumb-video,
.cfv-thumb-fallback {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    object-fit: cover;
    object-position: center;
    opacity: 0.74;
    filter:
        brightness(0.82)
        saturate(0.9);
    transform: scale(1.01);
    transition:
        opacity 0.3s ease,
        filter 0.3s ease,
        transform 0.4s ease;
}

.cfv-thumb-fallback-1 {
    background:
        linear-gradient(135deg, #53686b, #b8c6c7);
}

.cfv-thumb-fallback-2 {
    background:
        linear-gradient(135deg, #816e59, #d8c4aa);
}

.cfv-thumb-fallback-3 {
    background:
        linear-gradient(135deg, #536b6e, #c5d6d7);
}

.cfv-thumb-fallback-4 {
    background:
        linear-gradient(135deg, #645e78, #cac1dc);
}

.cfv-thumb-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            180deg,
            rgba(5, 8, 12, 0.04) 0%,
            rgba(5, 8, 12, 0.17) 48%,
            rgba(5, 8, 12, 0.87) 100%
        );
    pointer-events: none;
}

.cfv-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.22);
    opacity: 0.76;
    transform:
        translate(-50%, -50%)
        scale(0.88);
    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        background 0.28s ease;
}

.cfv-thumb-play::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #15181d;
}

.cfv-thumb strong {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 4;
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-overflow: ellipsis;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.72);
    white-space: nowrap;
}


/* Hover */

.cfv-thumb:hover {
    z-index: 5;
    border-color: rgba(17, 207, 192, 0.56);
    box-shadow:
        0 12px 26px rgba(25, 29, 38, 0.18);
    transform:
        translateY(-3px)
        scale(1.025);
}

.cfv-thumb:hover
.cfv-thumb-video,
.cfv-thumb:hover
.cfv-thumb-fallback {
    opacity: 1;
    filter:
        brightness(1.06)
        saturate(1.04);
    transform: scale(1.065);
}

.cfv-thumb:hover
.cfv-thumb-play {
    opacity: 1;
    background: #ffffff;
    transform:
        translate(-50%, -50%)
        scale(1.04);
}


/* 当前激活卡片 */

.cfv-thumb.active {
    z-index: 6;
    border-color: var(--factory-accent);
    animation:
        cfv-cyan-glow
        2.2s
        ease-in-out
        infinite alternate;
}

.cfv-thumb.active
.cfv-thumb-video,
.cfv-thumb.active
.cfv-thumb-fallback {
    opacity: 1;
    filter:
        brightness(1)
        saturate(1.03);
}

.cfv-thumb.active
.cfv-thumb-play {
    opacity: 0;
    transform:
        translate(-50%, -50%)
        scale(0.72);
}

@keyframes cfv-cyan-glow {
    0% {
        box-shadow:
            0 0 0 1px rgba(17, 207, 192, 0.28),
            0 0 7px rgba(17, 207, 192, 0.3),
            0 7px 18px rgba(25, 29, 38, 0.13);
    }

    100% {
        box-shadow:
            0 0 0 1px rgba(17, 207, 192, 0.72),
            0 0 19px rgba(17, 207, 192, 0.66),
            0 11px 25px rgba(25, 29, 38, 0.17);
    }
}


/* 多语言 */

html[lang^="ru"] .cfv-title,
html[lang^="kk"] .cfv-title {
    font-size: clamp(31px, 2.5vw, 44px);
    letter-spacing: -0.035em;
}


/* 平板 */

@media (max-width: 1120px) {
    .cfv-section {
        padding: 36px 30px;
    }

    .cfv-wrap {
        grid-template-columns:
            minmax(300px, 0.8fr)
            minmax(0, 1.45fr);
        gap: 34px;
    }

    .cfv-title {
        font-size: clamp(31px, 3.1vw, 41px);
    }

    .cfv-thumbs {
        gap: 10px;
        margin-top: 14px;
    }
}


/* 手机 */

@media (max-width: 860px) {
    .cfv-section {
        padding: 38px 20px 22px;
        border-radius: 18px;
    }

    .cfv-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .cfv-copy {
        min-height: 340px;
    }

    .cfv-title {
        font-size: clamp(30px, 7.8vw, 40px);
    }

    .cfv-thumbs {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    .cfv-thumb {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 480px) {
    .cfv-section {
        margin: 18px 0;
        padding: 32px 14px 16px;
    }

    .cfv-arrow {
        width: 31px;
        height: 62px;
        font-size: 23px;
    }

    .cfv-desc {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cfv-thumb,
    .cfv-thumb-video,
    .cfv-thumb-play {
        transition: none;
    }

    .cfv-thumb.active {
        animation: none;
    }
}


/* ==================================================
   Factory video component v3 overrides

   1. 去掉右侧黑色容器背景；
   2. 缩略卡片使用后台图片；
   3. 加强Hover青色外发光；
   4. 主视频保持独立悬浮卡片。
   ================================================== */


/* 整个模块统一为浅灰色 */

.cfv-section[data-cfv-root] {
    background: #f3f3f5 !important;
}


/* 去掉右侧大面积黑色背景 */

.cfv-section[data-cfv-root]
.cfv-player {
    background: transparent !important;
    box-shadow: none !important;
}

.cfv-section[data-cfv-root]
.cfv-stage {
    background: transparent !important;
}


/*
只有主视频本身保留深色底，
外部不再出现黑色大箱体。
*/

.cfv-section[data-cfv-root]
.cfv-screen {
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #080a0e !important;
    box-shadow:
        0 22px 48px
        rgba(24, 29, 38, 0.13),
        0 5px 15px
        rgba(24, 29, 38, 0.08) !important;
}


/* 底部区域完全透明 */

.cfv-section[data-cfv-root]
.cfv-thumbs {
    background: transparent !important;
}


/* 缩略卡片基础外观 */

.cfv-section[data-cfv-root]
.cfv-thumb {
    overflow: hidden !important;
    border:
        2px solid
        rgba(20, 23, 29, 0.08) !important;
    border-radius: 11px !important;
    background: #e8eaed !important;
    box-shadow:
        0 5px 14px
        rgba(25, 29, 38, 0.08) !important;
}


/* 后台上传的卡片底图 */

.cfv-section[data-cfv-root]
.cfv-thumb-image,
.cfv-section[data-cfv-root]
.cfv-thumb-fallback {
    position: absolute !important;
    inset: 0 !important;
    z-index: -3 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    border: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    opacity: 0.82 !important;

    filter:
        brightness(0.86)
        saturate(0.92) !important;

    transform: scale(1.01) !important;

    transition:
        opacity 0.3s ease,
        filter 0.3s ease,
        transform 0.4s ease !important;
}


/* 图片上保留轻微渐变，保证文字清晰 */

.cfv-section[data-cfv-root]
.cfv-thumb-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(5, 8, 12, 0.02) 0%,
            rgba(5, 8, 12, 0.12) 44%,
            rgba(5, 8, 12, 0.88) 100%
        ) !important;
}


/* Hover：明显的青色外发光 */

.cfv-section[data-cfv-root]
.cfv-thumb:hover {
    z-index: 10 !important;

    border-color:
        #00e8e0 !important;

    box-shadow:
        0 0 0 1px
            rgba(0, 232, 224, 0.94),
        0 0 10px 3px
            rgba(0, 232, 224, 0.66),
        0 0 22px 6px
            rgba(0, 232, 224, 0.28),
        0 12px 26px
            rgba(25, 29, 38, 0.18) !important;

    transform:
        translateY(-3px)
        scale(1.025) !important;
}

.cfv-section[data-cfv-root]
.cfv-thumb:hover
.cfv-thumb-image,
.cfv-section[data-cfv-root]
.cfv-thumb:hover
.cfv-thumb-fallback {
    opacity: 1 !important;

    filter:
        brightness(1.08)
        saturate(1.05) !important;

    transform: scale(1.065) !important;
}


/* 当前激活状态 */

.cfv-section[data-cfv-root]
.cfv-thumb.active {
    border-color:
        #00e8e0 !important;

    animation:
        cfv-cyan-glow-v3
        2.2s
        ease-in-out
        infinite alternate !important;
}

.cfv-section[data-cfv-root]
.cfv-thumb.active
.cfv-thumb-image,
.cfv-section[data-cfv-root]
.cfv-thumb.active
.cfv-thumb-fallback {
    opacity: 1 !important;

    filter:
        brightness(1)
        saturate(1.03) !important;
}


/* 更明显但不过分刺眼的呼吸光 */

@keyframes cfv-cyan-glow-v3 {
    0% {
        box-shadow:
            0 0 0 1px
                rgba(0, 232, 224, 0.50),
            0 0 7px 2px
                rgba(0, 232, 224, 0.38),
            0 7px 18px
                rgba(25, 29, 38, 0.12);
    }

    100% {
        box-shadow:
            0 0 0 1px
                rgba(0, 232, 224, 0.96),
            0 0 15px 4px
                rgba(0, 232, 224, 0.72),
            0 0 25px 6px
                rgba(0, 232, 224, 0.24),
            0 11px 25px
                rgba(25, 29, 38, 0.16);
    }
}


/* 未上传底图时的临时浅灰渐变 */

.cfv-section[data-cfv-root]
.cfv-thumb-fallback-1 {
    background:
        linear-gradient(
            135deg,
            #d7e1e2,
            #aebfc1
        ) !important;
}

.cfv-section[data-cfv-root]
.cfv-thumb-fallback-2 {
    background:
        linear-gradient(
            135deg,
            #e9dfd1,
            #cbbb9f
        ) !important;
}

.cfv-section[data-cfv-root]
.cfv-thumb-fallback-3 {
    background:
        linear-gradient(
            135deg,
            #dbe5e6,
            #b5c7c9
        ) !important;
}

.cfv-section[data-cfv-root]
.cfv-thumb-fallback-4 {
    background:
        linear-gradient(
            135deg,
            #e4deed,
            #c2b8d2
        ) !important;
}


/* 减少动画模式 */

@media (prefers-reduced-motion: reduce) {
    .cfv-section[data-cfv-root]
    .cfv-thumb.active {
        animation: none !important;

        box-shadow:
            0 0 0 2px
            rgba(0, 232, 224, 0.64) !important;
    }
}


/* ==================================================
   CFV component width constraint
   与首页其他主要内容区域保持一致
   ================================================== */

.cfv-section[data-cfv-root] {
    width: calc(100% - 48px) !important;
    max-width: 1440px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* 平板和手机减小左右留白 */

@media (max-width: 860px) {
    .cfv-section[data-cfv-root] {
        width: calc(100% - 24px) !important;
    }
}