.top-block-container {
    position: relative;
    background-color: transparent;
    z-index: 1;
    background-repeat: round;
    padding-left: 0;
    padding-right: 0;
    padding-top: var(--font-size-p);
    padding-bottom: 0;
}

.top-block-container::before {
    background-color: transparent;
}

/* 只影响作为 top-block-container 直接子元素的图片，而不会影响到 .top-content-box 中的图片布局 */
.top-block-container > img,
.top-block-detail > img {
    display: block; /* 将图片转换为块级元素，使其可以应用 margin: auto */
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--font-size-p) !important; /* 与上方内容产生一定间距，视觉上更协调 */
    margin-bottom: var(--font-size-p) !important;
    max-width: 100%; /* 确保图片在任何情况下都不会超出其容器 */
}

.top-content-box > img {
    margin-top: var(--font-size-p) !important; /* 与上方内容产生一定间距，视觉上更协调 */
    margin-bottom: 0;
    align-self: flex-start;
}

.top-block-detail > p {
    margin-top: var(--font-size-p) !important; /* 与上方内容产生一定间距，视觉上更协调 */
}

/* TBD：整体放在block里还是title、block单独控制 */
.top-block-content {
    width: var(--xl-main-width);
    max-width: var(--xl-main-max-width);
    margin: 0 auto;
}

.top-block-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 28px;
    background-color: var(--appl-primary-color);
}

.top-block-title {
    position: relative;
    /* color: white; */
    color: #333;
    font-size: var(--font-size-h2);
    padding-left: var(--top-highlight-content-left);
    margin-bottom: 20px;
}

.top-block-title.no-prefix::before {
    background-color: transparent;
}

.top-block-title.no-prefix {
    padding-left: 0;
}

.top-block-title > a {
    font-size: var(--font-size-p);
    color: var(--top-link-color);
}

.top-block-detail {
    padding: 15px 0;
    font-size: var(--font-size-p);
    color: #666;
}

.top-full-width-background {
    position: relative;
    z-index: 1;
}

.top-full-width-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-repeat: round;
    border: none;
    z-index: -1;
}

.top-full-width-background.bg-gray::before {
    background-color: #F6F9FB;
}

.top-full-width-background.bg-topblue::before {
    background-color: #334466;
}

/* Tab 容器整体样式 */
.top-case-box .top-nav-tabs.nav-tabs {
    display: flex;
    padding-bottom: 4px;
    border-bottom: 1px solid #E6E5E5 !important; /* 底部长灰线 */
}

.top-case-box .top-nav-tabs.nopadding {
    padding-bottom: 0;
    margin-bottom: 0 !important;
}
.top-case-box .top-nav-tabs  li {
    list-style-type: none !important;
    margin-left: 0;
}

/* Tab 链接样式 (<a>) */
.top-case-box .top-nav-tabs .nav-link {
    border: none !important; /* 移除Bootstrap的默认边框 */
    background-color: transparent !important;
    color: #4E4E4E; /* 未激活状态的文字颜色 */
    padding-top: 20px;
    padding-bottom: 8px;
    padding-left: 0px;
    margin-right: 1.5em;
    transition: color 0.3s ease;
    position: relative;
    white-space: nowrap;
}

/* 通过伪元素创建下划线，默认宽度为0 */
.top-case-box .top-nav-tabs .nav-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--appl-primary-color);
    transition: width .3s;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* 鼠标悬停在任意Tab上时，文字变蓝 */
.top-case-box .top-nav-tabs .nav-link:hover {
    color: var(--appl-primary-color);
}

/* 激活状态的Tab链接 */
.top-case-box .top-nav-tabs .nav-link.active,
.top-case-box .top-nav-tabs .nav-link.active:hover,
.top-case-box .top-nav-tabs .nav-link.active:focus {
    color: var(--appl-primary-color); /* 激活状态文字颜色 */
    border-color: transparent !important;
    background-color: transparent !important;
}

/* 激活状态的Tab显示下划线 */
.top-case-box .top-nav-tabs .nav-link.active::after {
    width: 100%; /* 下划线宽度撑满 */
}

/* Tab内容区域样式 */
.top-case-box .tab-content {
    margin-top: var(--font-size-p); /* 内容区域与Tab导航的距离 */
    padding: 0; /* 移除可能存在的内边距 */
}

/* 确保 tab-pane 的背景和内边距由其内部的 .top-highlight-container 控制 */
.top-case-box .tab-content > .tab-pane {
    padding: 0; 
    background-color: transparent;
}

.top-tab-highlight-container {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

.top-tab-highlight-container .top-gallery-wrapper {
    width: 100%;
}

.top-tab-highlight-container .top-highlight-container.top-hor-pane {
    width: 100%;
}

.top-tab-highlight-container.active {
  display: flex;
}

.top-case-box .top-tab-highlight-container > .top-block-detail {
    width: 100%;
    flex-grow: 1; /* 确保在 flex 容器中占据所有剩余空间 */
}

/* ==========================================================================
   1. Base Component: .top-content-box
   ========================================================================== */

/* Base styles for all two-column content boxes */
.top-content-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 让子元素（包括图片）靠顶部对齐 */
    gap: 40px;
    margin-top: var(--font-size-h2);
    margin-bottom: var(--font-size-h2);
    flex-direction: row-reverse; 
}

/* Default sizing for children: 50/50 split. 
   This will be overridden by .ratio-* modifiers. */
.top-content-box > * {
    flex: 1;
    min-width: 0; /* Prevents flex items from overflowing their container */
}

.top-content-box > .top-block-detail {
    padding: 0;
    align-self: flex-start;
}


/* ==========================================================================
   2. Desktop Layout Modifiers
   ========================================================================== */

/* 更改文字和图片的左右相对位置, 默认在右边，使用此modifier使其在左边 */
.top-content-box.inverse {
    flex-direction: row; /* Overrides the default row-reverse */
}


/* 5-5 ratio */
.top-content-box.ratio-5-5 > :first-child,
.top-content-box.ratio-5-5 > :last-child  { flex: 1 1 0%; }
/* 1-9 ratio 
.top-content-box.ratio-1-9 > :first-child { flex: 1 1 0%; }
.top-content-box.ratio-1-9 > :last-child  { flex: 9 1 0%; }*/
/* 2-8 ratio 
.top-content-box.ratio-2-8 > :first-child { flex: 2 1 0%; }
.top-content-box.ratio-2-8 > :last-child  { flex: 8 1 0%; }*/
/* 3-7 ratio */
.top-content-box.ratio-3-7 > :first-child { flex: 3 1 0%; }
.top-content-box.ratio-3-7 > :last-child  { flex: 7 1 0%; }
/* 4-6 ratio */
.top-content-box.ratio-4-6 > :first-child { flex: 4 1 0%; }
.top-content-box.ratio-4-6 > :last-child  { flex: 6 1 0%; }
/* 6-4 ratio */
.top-content-box.ratio-6-4 > :first-child { flex: 6 1 0%; }
.top-content-box.ratio-6-4 > :last-child  { flex: 4 1 0%; }
/* 7-3 ratio */
.top-content-box.ratio-7-3 > :first-child { flex: 7 1 0%; }
.top-content-box.ratio-7-3 > :last-child  { flex: 3 1 0%; }
/* 8-2 ratio 
.top-content-box.ratio-8-2 > :first-child { flex: 8 1 0%; }
.top-content-box.ratio-8-2 > :last-child  { flex: 2 1 0%; }*/
/* 9-1 ratio 
.top-content-box.ratio-9-1 > :first-child { flex: 9 1 0%; }
.top-content-box.ratio-9-1 > :last-child  { flex: 1 1 0%; }*/

/* ==========================================================================
   Cast Grid Layout
   ========================================================================== */

.top-cast-wrapper {
    display: grid;
    /* 定义两列，宽度相等 */
    grid-template-columns: 1fr 1fr;
    /* 定义列间距 */
    gap: 40px;
    /* 顶部间距，保持原有风格 */
    margin-top: var(--font-size-h2);
    margin-bottom: var(--font-size-h2);
    /* 确保对齐 */
    align-items: start;
}

.top-cast-item {
    display: flex;
    flex-direction: column;
    /* 确保图片在上，文字在下 */
    justify-content: flex-start;
    height: 100%; /* 让两个item高度一致（如果需要背景色时很有用） */
}

.top-cast-item > img {
    /* 强制图片宽度适应容器 */
    width: 100%;
    height: auto;
    /* 保持图片底部与文字的距离 */
    margin-bottom: 15px !important;
    margin-top: 0 !important; /* 覆盖可能存在的全局 margin */
    /* 如果你想让两张图片强制等高（可能会裁剪），可以解开下面两行 */
    /* height: 250px; */
    /* object-fit: contain; */
}

.top-cast-item .top-block-detail {
    padding: 0;
    /* 确保文字部分顶部对齐 */
    margin-top: 0 !important;
}

.top-cast-item .top-block-detail p {
    /* 覆盖可能存在的全局 margin-top，让文字紧贴图片下方 */
    margin-top: 0 !important;
}

/* ==========================================================================
   3. Responsive Styles (Mobile) - REFACTORED
   ========================================================================== */

@media (max-width: 1200px) {
    /* DEFAULT mobile behavior: Wrap elements with floated image */
    .top-content-box {
        display: block; /* Change from flex to block */
        overflow: auto; /* Contains the floated image */
        gap: initial; /* Reset gap from desktop flex */
    }

    .top-content-box > * {
        flex: none; /* Disable flex item properties for all children */
    }

    /* Default image float behavior (image on the right) */
    .top-content-box > img {
        float: right; /* 手机上脚本image-fit.js有可能会去除该属性 */
        width: 60%;

        margin-left: 1em;
        margin-right: 0;
    }

    /* Handle the inverse case (image on the left) */
    .top-content-box.inverse > img {
        float: left;

        margin-left: 0;
        margin-right: 2em;
    }

    /* MODIFIER mobile behavior: .no-wrap
       This overrides the default wrapping to stack elements vertically. */
    .top-content-box.no-wrap {
        display: flex; /* Re-enable flexbox for stacking */
        flex-direction: column;
        gap: 20px;
    }

    /* Reset float and width for images in stacked containers */
    .top-content-box.no-wrap > img {
        float: none;
        width: 100%; /* Make image full-width */

        /* Margin: top, right, bottom, left */
        margin: 20px 0 0 0; /* Reset margins and add top margin */
    }

    .top-cast-wrapper {
        /* 切换为单列布局 */
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .top-cast-item {
        /* 在移动端也可以保持图片在上文字在下，或者根据需要调整 */
        width: 100%;
    }
}