/* ============================================================
   博客前台新增页面样式：全部分类页（/categories）+ 文章归档页（/archives）
   纯手写 CSS（不依赖 Tailwind 构建产物），PC 与移动端共用一套结构，
   仅在 ≤768px 做尺寸微调。配色沿用主色 #2B6DE8 / 圆角 12px。
   ============================================================ */

/* ---------------- 分页禁用态（首页/上一页、下一页/末页） ---------------- */
.pg-disabled {
    opacity: .55; cursor: not-allowed; user-select: none;
    pointer-events: none; /* 双保险：禁用项不响应任何点击 */
    background: #fafafa; color: #9ca3af; border-color: #e8ebf0;
}

/* ---------------- 页面头部（分类页 / 归档页共用） ---------------- */
.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; margin-bottom: 16px;
}
.page-head h1 {
    font-size: 22px; font-weight: 700; color: #111827; line-height: 1.3;
}
.page-head .page-sub {
    margin-top: 6px; font-size: 13px; color: #6b7280; line-height: 1.6;
}
.page-head .page-badge {
    flex-shrink: 0; padding: 4px 12px; border-radius: 999px;
    background: #eff4fe; color: #2B6DE8; font-size: 12px; font-weight: 600;
}
.page-empty {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 48px 16px; text-align: center; color: #9ca3af; font-size: 14px;
}

/* ---------------- 全部分类页 ---------------- */
.cat-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.cat-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 18px 18px 16px; transition: box-shadow .2s ease, border-color .2s ease;
}
.cat-card:hover { box-shadow: 0 6px 18px rgba(17, 24, 39, .06); border-color: #dbe3f5; }
.cat-card-head {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: inherit;
}
.cat-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eff4fe; font-size: 17px;
}
.cat-name {
    flex: 1; min-width: 0; font-size: 16px; font-weight: 600; color: #111827;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-card-head:hover .cat-name { color: #2B6DE8; }
.cat-count {
    flex-shrink: 0; padding: 2px 10px; border-radius: 999px;
    background: #f3f4f6; color: #6b7280; font-size: 12px;
}
.cat-arrow { flex-shrink: 0; width: 16px; height: 16px; color: #d1d5db; }
.cat-card-head:hover .cat-arrow { color: #2B6DE8; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cat-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 11px; border-radius: 999px;
    background: #f9fafb; border: 1px solid #eceff3;
    font-size: 12px; color: #4b5563; text-decoration: none;
    transition: all .18s ease;
}
.cat-chip em { font-style: normal; color: #9ca3af; }
.cat-chip:hover {
    background: #eff4fe; border-color: #cfdefb; color: #2B6DE8;
}
.cat-chip:hover em { color: #2B6DE8; }

/* ---------------- 文章归档页（时间轴） ---------------- */
.arc-timeline { padding-left: 4px; }
.arc-group { position: relative; padding-left: 22px; margin-bottom: 26px; }
.arc-group::before {
    content: ''; position: absolute; left: 5px; top: 14px; bottom: -20px;
    width: 1px; background: #e8ebf0;
}
.arc-group:last-child { margin-bottom: 8px; }
.arc-group:last-child::before { display: none; }
.arc-month {
    position: relative; display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: #111827; margin-bottom: 8px;
}
.arc-month::before {
    content: ''; position: absolute; left: -22px; top: 50%;
    transform: translateY(-50%);
    width: 11px; height: 11px; border-radius: 50%;
    background: #2B6DE8; box-shadow: 0 0 0 3px #eff4fe;
}
.arc-month em {
    font-style: normal; font-size: 12px; font-weight: 500; color: #6b7280;
    padding: 1px 8px; border-radius: 999px; background: #f3f4f6;
}
.arc-list { list-style: none; margin: 0; padding: 0; }
.arc-item {
    display: flex; align-items: baseline; gap: 10px;
    padding: 9px 0; border-bottom: 1px dashed #f1f3f6;
}
.arc-item:last-child { border-bottom: none; }
.arc-date {
    flex-shrink: 0; width: 46px; font-size: 12px; color: #9ca3af;
    font-variant-numeric: tabular-nums;
}
.arc-title {
    flex: 1; min-width: 0; font-size: 14px; color: #374151;
    line-height: 1.55; text-decoration: none; transition: color .18s ease;
}
.arc-title:hover { color: #2B6DE8; }
.arc-meta {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: #b0b7c3;
}
.arc-lock { font-size: 11px; color: #e0a33e; }

/* ---------------- 移动端微调（≤768px） ---------------- */
@media (max-width: 768px) {
    .page-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .page-head h1 { font-size: 19px; }
    .cat-grid { grid-template-columns: 1fr; gap: 12px; }
    .cat-card { border-radius: 12px; padding: 16px 14px; }
    .arc-group { padding-left: 20px; margin-bottom: 22px; }
    .arc-month::before { left: -20px; }
    .arc-date { width: 42px; }
    .arc-title { font-size: 13px; }
    .arc-meta { display: none; }
}