/* internal 内容高亮样式 */
.internal-content-highlight {
    color: #c0392b !important; /* 深红色字体 */
    border-left: 3px solid #c0392b; /* 左侧红线提示 */
    background-color: #f9f2f2; /* 淡淡的红色背景，增强识别度 */
    padding: 10px; /* 内边距 */
    margin-bottom: 12px;
    display: block; /* 确保是块级元素 */
}

/* 强制内部所有文本元素继承或使用红色，防止被特定子元素样式覆盖 */
.internal-content-highlight p,
.internal-content-highlight li,
.internal-content-highlight h1,
.internal-content-highlight h2,
.internal-content-highlight h3,
.internal-content-highlight h4,
.internal-content-highlight h5,
.internal-content-highlight h6,
.internal-content-highlight td,
.internal-content-highlight th {
    color: #c0392b !important;
}

/* 如果有链接，也改为红色系但略有区分 */
.internal-content-highlight a {
    color: #e74c3c !important;
}

/* -----------------------------------------------------------
   针对 Button Container 内部的 Internal 高亮块的特殊修复
   ----------------------------------------------------------- */

/* 让 internal 容器接管布局，使其像 icon-button 一样排布 */
.button-container .internal-content-highlight {
    /* 继承 icon-button 的网格宽度逻辑 */
    width: calc(25% - 1%);
    /* 继承 icon-button 的间距逻辑 */
    margin-left: 0.5%;
    margin-right: 0.5%;

    /* 关键：使用 border-box，确保边框和内边距包含在宽度内，不会撑破布局 */
    box-sizing: border-box;

    /* 使用 Flex 让内部元素居中填充 */
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* 保持原有的红色视觉风格，但建议微调 */
    margin-bottom: 1vw; /* 与其他按钮保持一致的下边距 */
    height: auto;       /* 允许高度自适应 */

    border-left: none !important;
}

/* 重置内部 icon-button 的尺寸，使其填满父容器 */
.button-container .internal-content-highlight .icon-button {
    /* 关键修复：不再是 25%，而是 100% 填满高亮容器 */
    width: 100% !important;

    /* 去除多余的 margin，因为父容器已经处理了间距 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;

    /* 移除可能的双重阴影效果，或者保留看你喜好 */
    box-shadow: none;
}

/* 可选：微调高亮容器内的文字换行逻辑，防止极端情况 */
.button-container .internal-content-highlight span {
    white-space: normal; /* 允许正常换行 */
    width: 100%;         /* 确保文字容器宽度足够 */
}

/* -----------------------------------------------------------
   针对 Top Highlight Container 内部的 Internal 高亮块修复
   ----------------------------------------------------------- */

/* 让 internal 容器接管布局角色，模仿 .top-highlight-col 的尺寸和外边距 */
.top-highlight-container .internal-content-highlight {
    /* 继承 top-highlight-col 的宽度逻辑 (默认为4列) */
    width: calc(25% - 1%);
    max-width: calc(25% - 1%);
    flex-grow: 1; /* 保持与原卡片一致的伸缩性 */

    /* 继承 top-highlight-col 的外边距 */
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-top: 15px;
    margin-bottom: 15px;

    /* 关键：防止 internal 自带的 padding/border 撑破布局 */
    box-sizing: border-box;

    /* 让内部元素能撑满这个容器 */
    display: flex;
    flex-direction: column;

    background-color: transparent !important; /* 去除原本的粉红背景 */
    border-left: none !important;             /* 去除左侧粗红线 */
    border: none !important;                  /* 确保没有其他边框 */
    padding: 0 !important;                    /* 去除内边距，让卡片大小正常 */
    box-shadow: none !important;
}

/* 让内部被包裹的 top-highlight-col 填满父容器 */
.top-highlight-container .internal-content-highlight .top-highlight-col {
    /* 关键修复：不再是 25%，而是 100% 填满高亮容器 */
    width: 100% !important;
    max-width: 100% !important;

    /* 移除多余的外边距，因为父容器已经有了 */
    margin: 0 !important;

    /* 确保高度撑满，保持对齐 */
    height: 100%;

    /* 替换原本的蓝色背景 (rgba(137, 175, 201, 0.21)) 为淡红色背景 */
    background-color: rgba(192, 57, 43, 0.12) !important;

    /* 边框改为深红色，以此区分这是 Internal 内容 */
    border: 1px solid rgba(192, 57, 43, 0.5) !important;

    /* 移除原本可能的模糊滤镜 */
    backdrop-filter: none;
}

/* 选中卡片内的标题、详情以及段落 */
.top-highlight-container .internal-content-highlight .top-highlight-col .top-highlight-content-title,
.top-highlight-container .internal-content-highlight .top-highlight-col .top-highlight-content-detail,
.top-highlight-container .internal-content-highlight .top-highlight-col p {
    color: #c0392b !important; /* 使用深红色文字 */
    font-weight: 500;          /* 稍微加粗，增强可读性 */
}

/* 针对响应式布局的修复 (小于1200px变为单列) */
@media (max-width: 1200px) {
    .top-highlight-container .internal-content-highlight {
        width: 100%;
        max-width: 100%;
    }
}

/* -----------------------------------------------------------
   针对 Filter Group 内部的 Internal 高亮块颜色修复
   ----------------------------------------------------------- */

/* 布局修复：让高亮块在按钮组中正确排列 */
.top-filter-group .internal-content-highlight {
    /* 使用 inline-flex 让它能跟前面的按钮排在一起（如果空间足够），或者独占一行 */
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px; /* 内部按钮之间的间距 */

    /* 适度调整内边距，使其看起来像一个分组 */
    padding: 2px 8px;
    margin-left: 5px;
    border-radius: 4px;

    background-color: transparent !important; /* 去除原本的粉红背景 */
    border-left: none !important;             /* 去除左侧粗红线 */
    border: none !important;                  /* 确保没有其他边框 */
    padding: 0 !important;                    /* 去除内边距，让卡片大小正常 */
    box-shadow: none !important;

    /* 移除原本可能的模糊滤镜 */
    backdrop-filter: none;
}

/* 颜色修复：将“白字白框”改为“深红字深红框” */
.top-filter-group .internal-content-highlight .top-filter-button span {
    color: #c0392b !important;        /* 深红色文字 */
    border-color: #c0392b !important; /* 深红色边框 */
    font-weight: 600;                 /* 稍微加粗以提高在浅色背景上的识别度 */
}

/* 交互修复：鼠标悬停时的效果 */
.top-filter-group .internal-content-highlight .top-filter-button:hover span {
    background-color: #c0392b !important; /* 悬停时背景变深红 */
    color: #ffffff !important;            /* 文字变白 */
    border-color: #c0392b !important;
}

/* 移动端/小屏适配 */
@media (max-width: 768px) {
    .top-filter-group .internal-content-highlight {
        display: flex; /* 小屏下可能需要独占一行 */
        width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-top: 10px;
    }
}