/* ========================================
 * 首页模块专用样式
 * 版本: 2.0
 * 依赖: base.css
 * ======================================== */

/* ===== 1. 热门分类导航 ===== */
.category-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 42px;
    padding: 0;
    box-sizing: border-box;
    align-items: center;
}

.category-row.with-border {
    border-bottom: 1px solid var(--border-color);
}

.project-category-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5px 0;
}

.project-category-row.with-border {
    border-bottom: 1px solid var(--border-color);
}

/* ===== 2. 企业区域样式 ===== */
.company-list-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.company-list-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #fff;
    transition: all var(--transition-normal);
}

.company-list-item:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.company-logo-small {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* ===== 3. 楼层标题样式 ===== */
.floor-title-text-primary {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

.layui-card .layui-card-body,
.layui-card-body {
    padding: 10px 12px !important;
    box-sizing: border-box !important;
}

.layui-tab .layui-tab-content,
.layui-tab-card .layui-tab-content,
.layui-tab-content {
    padding: 10px 5px ;
    box-sizing: border-box !important;
}

.layui-tab .layui-tab-content .layui-tab-item,
.layui-tab-card .layui-tab-content .layui-tab-item,
.layui-tab-content .layui-tab-item {
    padding: 0 5px !important;
}

/* ===== 4. 首页广告Banner ===== */
.yzn-ad-banner {
    width: 100%;
    margin-bottom: 20px;
}

.yzn-ad-banner .ad-banner-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* ===== 5. 首页列表修复 ===== */
/* 增加tab内容区域的最小高度，确保内容完整显示 */
.layui-tab-content .layui-tab-item {
    /* min-height: 400px;
    max-height: none; */
    overflow: hidden;
}

/* 调整content-list样式，允许多行显示 */
.content-list li a {
    white-space: normal;
    line-height: 1.8;
}

/* 确保列表项有足够的间距和高度 */
.content-list li {
   height: 30px;
   line-height: 30px;
    /* padding: 10px 5px; */
}

/* 修复tab卡片的高度问题 */
.layui-tab-card .layui-tab-content {
    /* min-height: 400px;
    padding: 15px; */
}
.layui-row .floor-title {
    border: #666 0 0 2px solid;
}

.floor-equal-row {
    display: flex !important;
    align-items: stretch !important;
}

.floor-equal-row > [class*="layui-col-"] {
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
}

.floor-equal-row > [class*="layui-col-"] > .layui-card,
.floor-equal-row > [class*="layui-col-"] > .layui-tab,
.floor-equal-row > [class*="layui-col-"] > .layui-tab-card {
    flex: 1 1 auto;
}

.right-base-row {
    --right-list-item-height: 30px;
    --right-list-count: 10;
    --right-card-header-height: 32px;
    --right-card-body-padding: 20px;
    --right-card-gap: 10px;
    --right-column-height: calc(
        (
            var(--right-list-item-height) * var(--right-list-count)
            + var(--right-card-header-height)
            + var(--right-card-body-padding)
        ) * 2 + var(--right-card-gap)
    );
}

.right-base-row > .layui-col-xs3:first-child,
.right-base-row > .layui-col-xs6,
.right-base-row > .layui-col-xs3:last-child {
    height: var(--right-column-height) !important;
}

.right-base-row > .layui-col-xs3:first-child > .layui-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.right-base-row > .layui-col-xs3:first-child > .layui-card > .layui-card-body {
    flex: 1 1 auto;
    overflow: visible;
}

.right-base-row > .layui-col-xs6 {
    display: flex !important;
    flex-direction: column !important;
}

.right-base-row > .layui-col-xs6 > .layui-row:first-child {
    flex: 0 0 auto;
}

.right-base-row > .layui-col-xs6 > .layui-row:last-child {
    flex: 1 1 auto;
    min-height: 0;
}

.right-base-row > .layui-col-xs6 .layui-tab {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.right-base-row > .layui-col-xs6 .layui-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.right-base-row .category-row {
    min-height: 36px !important;
    padding: 0 !important;
    align-items: center !important;
}

.right-base-row .category-row .children-categories {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: hidden !important;
}

.right-base-row > .layui-col-xs6 .content-list li {
    height: 26px !important;
    line-height: 18px !important;
    padding: 4px 0 !important;
}

.right-base-row > .layui-col-xs6 .content-list li a {
    white-space: nowrap !important;
}

.right-base-row > .layui-col-xs3:last-child {
    display: flex !important;
    flex-direction: column !important;
}

.right-base-row > .layui-col-xs3:last-child > .layui-card {
    flex: 1 1 0;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.right-base-row > .layui-col-xs3:last-child > .layui-card + .layui-card {
    margin-top: var(--right-card-gap) !important;
}

.right-base-row > .layui-col-xs3:last-child > .layui-card > .layui-card-body {
    flex: 1 1 auto;
    overflow: hidden;
}

.tab-title-5f {
    display: flex !important;
    justify-content: space-between !important;
}

.tab-title-5f li {
    padding: 0 7px !important;
    font-size: 12px !important;
}
/* ===== 6. 响应式 ===== */
@media screen and (max-width: 768px) {
    .category-row,
    .project-category-row {
        gap: 5px;
        padding: 10px 0;
    }
    
    .company-list-item {
        padding: 10px;
    }
    
    .company-logo-small {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }
}