/* ========================================
   编程分享首页样式 - programming_index_page
   ======================================== */

/* 页面特有背景色 */
body {
    background-color: #f5f5f5;
}

/* Hero 渐变 - 青色主题（仅覆盖背景） */
.programming-hero {
    background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
    border-radius: 0;
    margin-bottom: 2rem;
    padding: 2rem 0;
}

/* 分类卡片 - 完全参考 type-card 样式 */
.category-card {
    height: 100%;
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 0.75rem;
}

/* 卡片改用 <a> 链接后：
   1. <a> 默认是行内元素，而行内盒内只有块级子元素时，
      Bulma .card 的背景 / 边框阴影不会渲染，需显式恢复块级布局；
   2. 去掉下划线并继承文字颜色 */
a.category-card,
a.post-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.category-card:hover {
    transform: translateY(-3px);
}

.category-card .card-content {
    padding: 1.25rem 1rem;
}

.category-icon {
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
}

/* 编程技术分类图标配色（Bulma 无对应 purple 辅助类） */
.category-icon .has-text-purple {
    color: #7e57c2 !important;
}

.category-card .title {
    font-size: 1.1rem !important;
    margin-bottom: 0.25rem;
}

.category-card .subtitle {
    font-size: 0.9rem !important;
    margin-bottom: 0.25rem;
}

.category-card .is-size-7 {
    font-size: 0.75rem !important;
}

/* 文章卡片样式 */
.post-card {
    position: relative; /* 权限角标绝对定位的参照系 */
    overflow: hidden;
    height: 100%;
    transition: all var(--transition-speed) ease;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.post-body {
    padding: 1.25rem;
}

.post-body .tags {
    margin-bottom: 0.75rem;
}

/* 卡片右上角角标：绝对定位、脱离文字流，标题再长也不会把它挤走或挤换行。
   定高 1.5rem + 内容居中，与左上角 Bulma .tag（height: 2em = 0.75rem×2）等高，
   保证两个标签在同一水平线上 */
.post-card .post-badge {
    position: absolute;
    top: 1.25rem; /* 与 .post-body 的 padding 对齐 */
    right: 1.25rem;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 1.5rem;
    padding: 0 0.6rem;
    margin-left: 0;
    font-size: 0.75rem;
}

.post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 预留两行标题的高度，让同一行卡片的摘要起始位置对齐。
       Bulma 标题行高为 1.125，两行 ≈ 2.25rem；原来写 3rem（按 1.5 行高估算），
       单行标题时会白留近 1.9rem 空白 */
    line-height: 1.3;
    min-height: 2.6rem;
}

/* Bulma 的 .title:not(:last-child) 会给 h3 加 1.5rem 下边距——卡片里标题后面紧跟摘要
   （不是 :last-child），这 1.5rem 就是标题与摘要之间大空白的主因，这里覆盖掉 */
.post-card .post-title {
    margin-bottom: 0.4rem;
}

.post-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7rem;
}

/* 卡片底部元信息：去掉作者后只剩「日期 + 阅读数」两项，左对齐会留出大片空白。
   改为两端对齐（日期靠左、阅读数靠右）把卡片宽度用满，视觉更平衡；
   两项都是短文本，各自 nowrap 即可，不需要整体省略号 */
.post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
    white-space: nowrap;
}

.post-meta > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-meta i {
    margin-right: 0.3rem;
}

/* 分类标签颜色 */
.tag-category.tool { background-color: #e3f2fd; color: #1976d2; }
.tag-category.news { background-color: #e8f5e9; color: #388e3c; }
.tag-category.share { background-color: #ede7f6; color: #5e35b1; }
.tag-category.tip { background-color: #fff3e0; color: #f57c00; }

/* ========================================
   文章行式列表（分类列表页 · 长列表使用）
   ======================================== */
.post-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.post-row {
    margin: 0;
}

/* 行内 <a> 需显式声明为 flex，否则不参与块级布局 */
.post-row-link {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.7rem 1.1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.post-row-link:hover {
    transform: translateX(3px);
    border-color: #cfe0f7;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* 左侧：标题 + 单行摘要 */
.post-row-main {
    flex: 1;
    min-width: 0;
}

/* 标题单行省略，保证多条之间的对齐 */
.post-row-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #2c3e50;
    margin-bottom: 0.1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.post-row-link:hover .post-row-title {
    color: #3273dc;
}

/* 标题行：标题 + 角标左对齐并排；标题超宽时才压缩省略，角标宽度固定不被压缩 */
.post-row-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.post-row-head .post-row-title {
    /* 不占满剩余宽度：角标紧跟标题文字，而非被顶到行尾 */
    flex: 0 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.post-row-head .post-badge {
    flex-shrink: 0;
    margin-left: 0;
}

.post-row-summary {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #8a8a8a;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 右侧：日期 / 作者，填补右侧空白区 */
.post-row-meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
}

.post-row-meta i {
    margin-right: 0.3rem;
}

.post-row-arrow {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #c7c7c7;
    transition: transform 0.2s ease, color 0.2s ease;
}

.post-row-link:hover .post-row-arrow {
    color: #3273dc;
    transform: translateX(2px);
}

/* 查看权限角标（会员专享 / 高级会员专享 / VIP会员专享）：
   直角、无边框、纯色块；
   locked = 当前用户看不了，橙色 + 锁图标；open = 已有权限，浅灰弱化 */
.post-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.14rem 0.45rem;
    border-radius: 0;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}

.post-badge-locked {
    background: #fff3e0;
    color: #ef6c00;
}

.post-badge-open {
    background: #f1f3f6;
    color: #6b7280;
}

/* ========================================
   分类列表页 · 列表标题栏
   ======================================== */
.post-list-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e6e9ef;
}

.post-list-heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #2c3e50;
}

.post-list-heading i {
    font-size: 0.95rem;
    color: #5b86e5;
}

/* 标题栏右侧统计：文章数 + 当前页码（仅多页时显示页码），弱化不抢焦点 */
.post-list-meta {
    font-size: 0.8rem;
    color: #9ca3af;
    white-space: nowrap;
}

/* 移动端 Hero 字体调整 */
@media (max-width: 768px) {
    .programming-hero .title {
        font-size: 1.8rem;
    }

    .post-list-heading {
        font-size: 1rem;
    }

    /* 行式列表：移动端收窄内边距，隐藏作者与箭头 */
    .post-row-link {
        gap: 0.75rem;
        padding: 0.65rem 0.9rem;
    }

    .post-row-title {
        font-size: 0.95rem;
    }

    .post-row-author {
        display: none;
    }

    .post-row-arrow {
        display: none;
    }
}