/**
 * OPC 名录模块专属样式（opc_list 归档页 + 详情页）。
 *
 * 由 opc-functions.php 在 is_post_type_archive('opc_list') || is_singular('opc_list')
 * 时条件加载，依赖 opc-prototype-components（components.css / tokens.css）。
 * 仅覆盖 / 新增 opc_list 专属规则，通用 class 直接复用 components.css。
 *
 * Token 口径：--accent:#4d6bfe / --text:#1d1d1f / --muted:#81858c /
 *             --line:#ececed / --surface:#f7f7f8 / --radius-card:16px / Space Grotesk。
 */

/* ============================================================
 * 一、归档页：卡片网格微调 + 头像占位
 *   （2026-07-09 删除 opc-list-hero 头部，投稿入口统一移至 opc-arc-bar 工具条；
 *    空状态仍复用旧的 .opc-submit-cta 样式，保留其定义。）
 * ============================================================ */
.opc-submit-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.28);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.opc-submit-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.36);
    background: #3a57ef;
}

.opc-submit-cta-ic {
    font-size: 17px;
    line-height: 1;
    font-weight: 400;
    margin-top: -1px;
}
/* 固定一行3个卡片（覆盖 components.css 的响应式 auto-fill 基线），每页30条（见
 * opc-taxonomy-filters/includes/archive-query.php 的 posts_per_page 设置）。
 * 间距与机构页统一为 20px（消除双页分叉）。 */
.opc-list-archive .comm-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* 卡片：纯色淡蓝底（去 components.css 的渐变 + 去线框），干净取向参考成功案例模块。
 * hover 同色系加深一档 + 抬升，与机构卡片完全一致。padding/gap 双页统一。 */
.opc-list-card {
    padding: 20px;
    flex-direction: column !important;
    gap: 14px !important;
    background: var(--entity-card);
    background-image: none;
    border: none;
    box-shadow: 0 1px 2px rgba(29, 29, 31, 0.04);
}

.opc-list-card:hover {
    transform: translateY(-2px);
    background: var(--entity-card-hover);
    box-shadow: 0 10px 28px rgba(29, 29, 31, 0.09);
}

.opc-list-card .comm-body {
    align-self: stretch;
    flex: 1;
    gap: 12px;
}

/* 顶部行：左侧身份（昵称+核实徽章+城市），右侧圆角矩形头像，顶端对齐 */
.opc-list-card .comm-top {
    align-items: flex-start;
    gap: 14px;
}

/* 顶部行：左侧身份（昵称+核实徽章+城市），右侧圆角矩形头像，顶端对齐 */
.opc-list-card .comm-top {
    align-items: flex-start;
    gap: 14px;
}

.opc-list-card .comm-ident {
    min-width: 0;
    flex: 1;
}

.opc-list-card .comm-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 名称：卡片第一视觉焦点，加大字号 + 收紧字距 */
.opc-list-card .comm-name {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* 城市：次级信息，前置定位点强化"地域"语义、与名称拉开层级 */
.opc-list-card .comm-city {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 12px;
    color: var(--muted-2);
}
.opc-list-card .comm-city::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--muted-2);
    opacity: .55;
    flex-shrink: 0;
}

.opc-list-card .comm-avatar-wrap {
    flex-shrink: 0;
    order: 2;
}

/* 圆角矩形头像（替代圆形），与身份信息顶部对齐 */
.opc-list-card .comm-avatar {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    object-fit: cover;
    border: 1px solid rgba(29, 29, 31, 0.06);
}

/* 固定文字"OPC"占位头像：中性浅灰底（不使用品牌蓝）+ 居中字符，替代裂图 */
.opc-list-card .comm-avatar--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: var(--entity-ph);
    color: var(--entity-ph-fg);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}

/* 简介：两行截断 + 最小高度兜底，保证网格内卡片等高对齐 */
.opc-list-card .comm-desc {
    min-height: 40px;
}

/* 赛道行：主分类，实心淡蓝 pill，作为内容关键标识 */
.opc-list-card .comm-track-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* 标签行（opc_content_tag，最多3个+溢出计数），沉底 + 弱化为辅助信息 */
.opc-list-card .comm-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 2px;
}

.opc-list-card .pill.content-tag {
    background: transparent;
    color: var(--muted-2);
    border: none;
    padding-left: 0;
    padding-right: 8px;
}

/* 赛道 pill：卡片关键标识，白底描边（在淡蓝卡片上更清爽，替代基线的灰底） */
.opc-list-card .pill.track-tag {
    background: #fff;
    color: var(--text);
    border: 1px solid rgba(29, 29, 31, 0.08);
    font-weight: 500;
}

/* 分页观感统一由 components.css 的 .pagination .page-numbers 承接（pill+accent），此处不再覆盖。 */

/* 空状态 */
.opc-list-empty {
    text-align: center;
    padding: 72px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.opc-list-empty-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.opc-list-empty-sub {
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 12px;
}

/* ============================================================
 * 三、详情页（范式B：封面 + 主栏 + 右推荐栏）
 * ============================================================ */
/* .detail-page 基线已在 components.css 定义为 1fr / 300px 网格，此处仅微调 */
.opc-list-detail {
    gap: 56px;
}

.opc-detail-main {
    min-width: 0;
}

/* 封面大图：16/9，圆角，柔和底 */
.opc-detail-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--surface);
    margin-bottom: 26px;
    border: 1px solid var(--line);
}

.opc-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.opc-list-detail .detail-title {
    font-size: 32px;
    line-height: 1.2;
}

/* 顶部标签行（opc_content_tag），置于简介下方 */
.opc-detail-toptags {
    margin-bottom: 4px;
}

/* 字段网格：详情主栏 4 列更紧凑（≤560 单行 5 项过窄，改自适应） */
.opc-detail-fields {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* 名录介绍正文 */
.opc-detail-body {
    margin-top: 4px;
}

.opc-detail-richtext {
    font-size: 15px;
    line-height: 1.85;
    color: #35373b;
}

.opc-detail-richtext p {
    margin: 0 0 16px;
}

.opc-detail-richtext p:last-child {
    margin-bottom: 0;
}

.opc-detail-richtext img {
    border-radius: 12px;
    margin: 8px 0;
}

/* 右侧推荐栏：sticky 跟随，卡片式分块 */
.opc-detail-aside {
    position: sticky;
    top: 24px;
}

.opc-detail-aside .sb-block {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 18px 20px 6px;
    margin-bottom: 20px;
}

.opc-detail-aside .sb-label {
    margin-bottom: 4px;
}

.opc-detail-aside .sb-list-item {
    padding: 12px 0;
}

.opc-detail-aside .sb-list-item:hover .name {
    color: var(--accent);
}

.opc-detail-aside .sb-list-item .desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
 * 四、响应式：≤920 侧栏下沉，≤768 单列
 * ============================================================ */
@media (max-width: 920px) {
    .opc-list-detail {
        display: block;
        gap: 0;
    }

    .opc-detail-aside {
        position: static;
        margin-top: 40px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 20px;
    }

    .opc-detail-aside .sb-block {
        margin-bottom: 0;
    }

    .opc-list-archive .comm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .opc-list-archive .comm-grid {
        grid-template-columns: 1fr;
    }

    .opc-list-detail .detail-title {
        font-size: 25px;
    }

    .opc-detail-aside {
        grid-template-columns: 1fr;
    }

    .opc-detail-richtext {
        font-size: 14.5px;
    }
}