/* Services Page Custom Styles (Building on Bootstrap 5) */

:root {
    --bs-secondary-color: #6C7280!important;
}

.container{
    padding-left: 0;
    padding-right: 0;
}

/* Header & Banner */
.services-banner {
    height: 380px; /* Increased to account for padding */
    background: url('https://jufxt-investment.oss-cn-beijing.aliyuncs.com/clear-spring/servies-header-bg.png') no-repeat center top;
    background-size: cover;
    position: relative;
    overflow: hidden;
    padding-top: 80px; /* Space for sticky header */
}

.banner-content{
    margin-top: 30px;
}

.banner-title{
    font-weight: 600;
}



/* Common Card Effect for Video Production (Matches a.png) */
.card-v {
    position: relative;
    overflow: hidden;
    height: 365px;
    background-color: #000;
    border-radius: 10px;
}

.card-v .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.6s;
}

.card-v:hover .bg-img {
    transform: scale(1.1);
}

.card-v::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.2); */
    z-index: 2;
    transition: background 0.3s;
}

.card-v:hover::before {
    /* background: rgba(0, 0, 0, 0.3); */
}

.card-v::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    z-index: 2;
}

.card-v .tag-top {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: #29498A;
    font-size: 12px;
    color: #FFFFFF;
    width: 90px;
    padding: 5px 0;
    text-align: center;
    background: #29498A;
    border-radius: 6px 0px 6px 0px;
}

.card-v .content-bottom {
    position: absolute;
    bottom: 45px;
    left: 15px;
    right: 15px;
    z-index: 3;
    color: white;
}

.card-v .title {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 0;
}

.card-v .meta-bottom {
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 3;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
}

.play-btn-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    z-index: 5;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.card-v:hover .play-btn-center {
    background: rgba(0, 0, 0, 0.7);
    transform: translate(-50%, -50%) scale(1.1);
}

.play-btn-center::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid white;
    margin-left: 4px;
}

/* Documentary Custom Grid (Non-Bootstrap) */
.doc-custom-container {
    width: 100%;
    overflow-x: auto; /* Enable scroll on very small screens if needed */
    padding-bottom: 20px;
}

.doc-grid-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start; /* 使用固定间距排列 */
    gap: 10px; /* 卡片之间的精确间距 */
    max-width: 1232px;
    margin: 0 auto;
}

.doc-item-large {
    flex: 0 0 460px; /* 1232 - (144*5) - (10*5) = 462px */
    width: 460px;
    border-radius: 6px;
    overflow: hidden;
}

.doc-item-small {
    flex: 0 0 144px;
    width: 144px;
    border-radius: 6px;
    overflow: hidden;
}

/* 移除之前的 padding 处理，改用 gap 控制间距 */
.doc-grid-row .doc-item-small:last-child,
.doc-grid-row .doc-item-large:first-child {
    padding: 0;
}

.doc-card-inner {
    position: relative;
    height: 380px;
    background-color: #000;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.doc-card-inner:hover {
    transform: translateY(-5px);
}

.doc-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* opacity: 0.8; */
}

.doc-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    z-index: 1;
}

.doc-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    color: white;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .doc-grid-row {
        flex-wrap: wrap;
        justify-content: flex-start;
        min-width: 100%;
    }
    
    .doc-item-large, .doc-item-small {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    
    .doc-card-inner {
        height: 240px; /* Shorter cards on mobile */
    }

    /* 针对小卡片背景图位置优化，防止遮挡字 */
    .doc-item-small .doc-card-img {
        object-position: center 25%; /* 图片向上偏移，露出下方的字 */
    }
    .doc-item-small:nth-child(4) .doc-card-img {
        object-position: center 30%; /* 图片向上偏移，露出下方的字 */
    }
}

/* New Utility and Component Classes (Migrated from Inline Styles) */

.section-intro-text {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.corp-video-img-col {
    width: 46%;
}

.corp-video-content-col {
    width: 54%;
}

.min-h-300 {
    min-height: 300px;
}

.blue-line-decoration {
    width: 40px;
    height: 3px;
}

.doc-badge-small {
    font-size: 0.7rem;
}

/* Seminar specific height and object fit */
.seminar-card-fixed-h {
    height: 300px;
}

.img-cover {
    object-fit: cover;
}




/* Seminar Card Styling */
.seminar-card {
    border: none;
    transition: transform 0.3s;
    background-color: #1a1a1a;
    position: relative;
    overflow: hidden;
    display: flex;
}

.seminar-card:hover {
    transform: translateY(-5px);
}

.seminar-text {
    flex: 0 0 35% !important;
    max-width: 35% !important;
    background-color: #1a1a1a;
    z-index: 2;
    position: relative;
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem !important;
    border-right: 1px dashed rgba(255,255,255,0.2);
}

.img-box {
    flex: 0 0 75% !important;
    max-width: 75% !important;
    margin-left: -10% !important;
    z-index: 1;
}

.qy-list{
    box-shadow: 0px 2px 24px 0px rgba(0,0,0,0.17);
    border-radius: 6px;
}

@media (max-width: 768px) {
    .seminar-card {
        flex-direction: column;
        height: auto !important;
    }
    .seminar-text, .img-box {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        clip-path: none !important;
        padding: 40px 20px !important;
    }
    .img-box {
        height: 200px !important;
    }
    .services-banner{
        height: auto;
    }
}

.fh-tips{
    margin-top: 52px;
    font-size: 18px;
    color: #333333;
}
.number-group{
    margin-top: 122px;
}

.Prompt{
    background: #f2f2f2;
}

/* Custom Responsive Helpers */
@media (min-width: 992px) {
    .w-md-40 { width: 40% !important; }
    .w-md-60 { width: 60% !important; }
    .container{
        max-width: 1232px !important;
    }
    
}

@media (max-width: 768px) {
    .banner-title { font-size: 2.5rem !important; }
    .card-v { height: 350px; }
    .doc-card-large { min-height: 350px !important; }
    .seminar-card { height: auto !important; }
    .seminar-text { padding: 40px 20px !important; }
    .seminar-card .img-box { height: 200px !important; }
    .sub-header{
        height: 60px;
    }
}

@media (max-width: 992px) {
    .corp-video-img-col, .corp-video-content-col {
        width: 100% !important;
    }
    .fh-tips{margin: 20px 0!important;}
    .number-group{margin-top: 12px;}
    .container {
        padding: 0 20px;
    }
    .logo img{
        width: 140px;
    }
}