/**
 * RI-首页模块 : 多标签文章展示（切换 + 翻页）
 *
 * 标题不复用 .section-title：那套样式跟着主题设置的 modular-title-1/2/3 变体走，
 * 其中 title-2 是居中 + 横贯背景线，塞进本模块的 flex 头部会把标签栏挤乱。
 * 配色沿用 xy-brand.css 的品牌变量，暗色规则同文件维护（body.dark-open）。
 */

/* ========== 头部：标题 + 标签栏 + 翻页 ========== */

.xy-ptabs-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 20px;
}

.xy-ptabs-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .5px;
    flex-shrink: 0;
}

.xy-ptabs-title small {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 400;
    opacity: .7;
}

/* flex:1 + min-width:0 —— 标签多到放不下时让 nav 自己横向滚动，而不是把翻页挤出容器 */
.xy-ptabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
}

.xy-ptabs-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.xy-ptabs-nav::-webkit-scrollbar {
    display: none;
}

/**
 * 未选中项是浅灰胶囊，形态照搬顶部导航（未选中灰底 + 选中橙渐变）。
 *
 * 但底色不能直接抄导航的 #f5f5f5（即品牌变量 --xy-bg-hover）：导航坐在纯白 header 上，
 * 本模块坐在页面底色 rgb(240,244,245) 上，#f5f5f5 放上去几乎隐形。要保持胶囊感只能反向
 * 取比页面底深一档的灰，往浅走就变成白块了。
 */
.xy-ptabs-tab {
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background-color: #e4e9ec;
    color: #495057;
    font-size: 15px;
    line-height: 36px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* hover 只加深底色，和导航栏一个语言。不用品牌橙染字：#f58907 在浅底上只有 2.6:1，比灰字还难读 */
.xy-ptabs-tab:hover {
    background-color: #d7dee2;
    color: #212529;
}

.xy-ptabs-tab.active {
    background: var(--xy-primary-gradient, linear-gradient(135deg, #f58907 0%, #e67d00 100%));
    color: #fff;
    box-shadow: 0 4px 10px var(--xy-primary-shadow, rgba(245, 137, 7, .35));
}

.xy-ptabs-tools {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 14px;
}

.xy-ptabs-more {
    font-size: 14px;
    color: #868e96;
    white-space: nowrap;
}

.xy-ptabs-more:hover {
    color: var(--xy-primary, #f58907);
}

.xy-ptabs-pager {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 箭头跟标签同一套灰底语言：整个模块里只有「当前选中的标签」是橙色，别处不抢它 */
.xy-ptabs-arrow {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #e4e9ec;
    color: #495057;
    font-size: 15px;
    line-height: 32px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.xy-ptabs-arrow:hover:not(:disabled) {
    background-color: #d7dee2;
    color: #212529;
}

.xy-ptabs-arrow:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.xy-ptabs-count {
    min-width: 46px;
    text-align: center;
    font-size: 13px;
    color: #6c757d;
}

/* ========== 列表底部的第二套翻页 ========== */

.xy-ptabs-foot {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

.xy-ptabs-pager-bottom {
    gap: 10px;
}

/* 底部这套是滚到底后的主要操作入口，做得比头部大一圈好点 */
.xy-ptabs-pager-bottom .xy-ptabs-arrow {
    width: 38px;
    height: 38px;
    font-size: 17px;
    line-height: 38px;
}

.xy-ptabs-pager-bottom .xy-ptabs-count {
    min-width: 56px;
    font-size: 14px;
}

/* ========== 列表区 ========== */

.xy-ptabs-body {
    transition: opacity .2s ease;
}

.xy-ptabs.is-loading .xy-ptabs-body {
    opacity: .4;
    pointer-events: none;
}

/* ========== 暗色 ========== */

body.dark-open .xy-ptabs-tab {
    background-color: #293042;
    color: #c6cfd8;
}

body.dark-open .xy-ptabs-tab:hover {
    background-color: #323b52;
    color: #e9ecef;
}

body.dark-open .xy-ptabs-tab.active {
    color: #fff;
    box-shadow: 0 4px 10px var(--xy-primary-shadow, rgba(245, 137, 7, .35));
}

body.dark-open .xy-ptabs-arrow {
    background-color: #293042;
    color: #c6cfd8;
}

body.dark-open .xy-ptabs-arrow:hover:not(:disabled) {
    background-color: #323b52;
    color: #e9ecef;
}

body.dark-open .xy-ptabs-count,
body.dark-open .xy-ptabs-more {
    color: #8b95a3;
}

/* ========== 响应式 ========== */

@media (max-width: 767px) {

    .xy-ptabs-head {
        gap: 10px;
        margin-bottom: 15px;
    }

    /* 窄屏标题独占一行，下面一行才是标签 + 翻页 */
    .xy-ptabs-title {
        flex: 0 0 100%;
        font-size: 18px;
    }

    .xy-ptabs-tab {
        height: 32px;
        padding: 0 12px;
        font-size: 14px;
        line-height: 32px;
    }

    .xy-ptabs-tools {
        gap: 8px;
    }

    .xy-ptabs-more {
        display: none;
    }

    .xy-ptabs-count {
        min-width: 40px;
        font-size: 12px;
    }

    .xy-ptabs-foot {
        margin-top: 16px;
    }

    .xy-ptabs-pager-bottom .xy-ptabs-arrow {
        width: 34px;
        height: 34px;
        font-size: 16px;
        line-height: 34px;
    }

    .xy-ptabs-pager-bottom .xy-ptabs-count {
        min-width: 50px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .xy-ptabs-tab,
    .xy-ptabs-arrow,
    .xy-ptabs-body {
        transition: none;
    }
}