/* ===== Category Archive (Step 3 - Workbench) ===== */
.cxcg-archive { max-width: var(--cxut-container, 1200px); width:100%; margin: 0 auto; padding: 12px; }
.cxcg-archive-header { margin: 8px 0 16px; }
.cxcg-breadcrumb { font-size: 12px; color: #666; display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.cxcg-breadcrumb .sep { opacity:.6; }
.cxcg-breadcrumb a:hover { text-decoration: underline; }
.cxcg-archive-title { font-size: 28px; font-weight: 800; margin: 8px 0 6px; line-height: 1.2; }
.cxcg-archive-desc { font-size: 14px; color: #555; margin: 4px 0 12px; }

.cxcg-subcats { display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; }
.cxcg-chip { padding: 6px 10px; border:1px solid rgba(0,0,0,.1); border-radius: 999px; background:#fff; color:#333; text-decoration:none; font-size: 13px; }
.cxcg-chip:hover { box-shadow: 0 6px 22px -10px rgba(0,0,0,.25); }
.cxcg-chip.active { background:#111; color:#fff; border-color:#111; }

.cxcg-fallback-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cxcg-card { background: #fff; border:1px solid rgba(0,0,0,.06); border-radius: 10px; overflow: hidden; padding-bottom: 10px; }
.cxcg-thumb-wrap { display:block; position:relative; }
.cxcg-thumb-wrap::before { content:""; display:block; padding-top: calc(100% * var(--ratio-h, 9) / var(--ratio-w, 16)); }
.cxcg-thumb { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f7f7f7; }
.cxcg-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cxcg-title {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
 font-size: 16px; font-weight:700; padding: 10px 12px 0; margin:0; }
.cxcg-title a { color:#222; text-decoration:none; }
.cxcg-title a:hover { text-decoration:underline; }
.cxcg-meta { font-size:12px; color:#666; padding: 6px 12px 0; }

.cxcg-pagination { display:flex; justify-content:center; margin: 20px 0 28px; }
.cxcg-more-btn { padding: 10px 16px; border-radius: 8px; border:1px solid rgba(0,0,0,.08); background:#fff; font-weight:600; cursor:pointer; }
.cxcg-more-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px -8px rgba(0,0,0,.22); }

/* Show full title on hover via HTML title attribute (default browser tooltip) */
/* Already added via PHP: we can inject title attr on <a>. We'll adjust template separately. */


/* === Mobile optimization: 2 cards per row by default === */
@media (max-width: 640px) {
  .cxcg-fallback-grid { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 10px;
  }
  .cxcg-title { font-size: 14px; }
}
/* Larger screens: auto-fill responsive grid */
@media (min-width: 641px) {
  .cxcg-fallback-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}


/* 默认缩略图比例已改为 4:3 */

/* 默认缩略图比例已改为 3:4 */


/* === Mobile: hide fixed GoTop (.cbbfixed) === */
@media (max-width: 640px) {
  .cbbfixed { display: none !important; }
}


/* === Desktop columns per category (default 5) === */
@media (min-width: 1024px) {
  .cxcg-fallback-grid { grid-template-columns: repeat(var(--cxcg-cols-pc, 5), minmax(0, 1fr)); }
}