@charset "UTF-8";
/**
 * 副导航 - 前台样式
 * PC：整条无底色，每个条目自身是「图标 + 名称」的圆角长条，颜色/底色/间距逐条可调
 * 手机（<768px）：自动切换为宫格
 * 颜色走行内 CSS 变量（后台配置）+ Bootstrap 5.3 / Tabler 变量兜底，兼容暗色主题
 */

.cyz-subnav {
    width: 100%;
    max-width: 1320px;
    /* 未贴合（后台关掉自动贴合）时也留一点与上文的间距 */
    margin: 0.5rem auto 0.75rem;
}

/* 已贴合到主导航下方（由 JS 移动 DOM 后加上此类）
   与主导航的间距由后台「间距」项决定，JS 会用行内 margin-top 精确落到设定值 */
.cyz-subnav--attached {
    margin-top: 0;
    padding-left: 15px;
    padding-right: 15px;
}

/* 整条容器：去掉底色、描边和内边距，只承担排列 */
.cyz-subnav__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.cyz-subnav--center .cyz-subnav__inner {
    justify-content: center;
}

/* 单个条目：圆角长条 */
.cyz-subnav__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    margin-right: var(--cyz-item-gap, var(--cyz-subnav-gap, 6px));
    border-radius: var(--cyz-subnav-radius, 8px);
    color: var(--cyz-item-color, var(--bs-body-color, #1f2937));
    background: var(--cyz-item-bg, transparent);
    font-size: 0.875rem;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.cyz-subnav__item:last-child {
    margin-right: 0;
}

.cyz-subnav__item:hover,
.cyz-subnav__item:focus-visible {
    filter: brightness(0.94);
    text-decoration: none;
}

/* 没设底色时，hover 给一层很淡的底色，保证有反馈 */
.cyz-subnav__item:hover {
    background: var(--cyz-item-bg, var(--bs-primary-bg-subtle, rgba(32, 107, 196, 0.08)));
}

.cyz-subnav__item .ti {
    font-size: 1.0625rem;
    line-height: 1;
}

.cyz-subnav__name {
    max-width: 9em;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 宫格列数：由容器 data-cols 决定，后台 2-6 可调 */
.cyz-subnav[data-cols="2"] .cyz-subnav__inner { --cyz-subnav-cols: 2; }
.cyz-subnav[data-cols="3"] .cyz-subnav__inner { --cyz-subnav-cols: 3; }
.cyz-subnav[data-cols="4"] .cyz-subnav__inner { --cyz-subnav-cols: 4; }
.cyz-subnav[data-cols="5"] .cyz-subnav__inner { --cyz-subnav-cols: 5; }
.cyz-subnav[data-cols="6"] .cyz-subnav__inner { --cyz-subnav-cols: 6; }

/* ---------------- 手机端：宫格 ---------------- */
@media (max-width: 767.98px) {
    .cyz-subnav {
        margin-bottom: 0.5rem;
    }

    .cyz-subnav__inner {
        display: grid;
        grid-template-columns: repeat(var(--cyz-subnav-cols, 4), minmax(0, 1fr));
        gap: 0.5rem;
    }

    .cyz-subnav__item {
        flex-direction: column;
        justify-content: center;
        gap: 0.3125rem;
        margin-right: 0;
        padding: 0.5rem 0.25rem;
        background: var(--cyz-item-bg, var(--bs-body-bg, #fff));
        border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
        border-radius: 0.5rem;
        font-size: 0.75rem;
        text-align: center;
        white-space: normal;
    }

    .cyz-subnav__item:hover {
        background: var(--cyz-item-bg, var(--bs-primary-bg-subtle, rgba(32, 107, 196, 0.08)));
    }

    .cyz-subnav__item .ti {
        font-size: 1.375rem;
    }

    .cyz-subnav__name {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}