/* list.css - Universal list page styles for content.php
 * Covers: .content-list .card-grid .card .card-cover .card-title
 *         .cat-filter .list-title .pagination
 * Loaded on all list pages (article / encyclopedia / library / album)
 * English comments only - FTP GBK compatible
 */

/* ---- Page wrapper ---- */
.content-list {
    padding: 0 0 32px;
}

/* 相册列表页：全宽模式下左右留边距 + 避开 Dock */
body.page-album-list .content-list {
    padding-left: 24px;
    padding-right: 24px;
}
/* 有 Dock 时左侧额外让开 */
body.has-dock.page-album-list .content-list {
    margin-left: 220px;
    padding-left: 24px;
}
body.has-dock.dock-collapsed.page-album-list .content-list {
    margin-left: 56px;
}

/* ---- Page heading ---- */
.list-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid #f0ece4;
}

/* ---- Empty state ---- */
.content-list .empty {
    text-align: center;
    padding: 60px 0;
    color: #bbb;
    font-size: 15px;
}

/* ---- Legacy: hide old card-grid (replaced by .items-grid) ---- */
.card-grid { display: none !important; }
.card-grid.masonry-grid { display: block !important; } /* masonry still uses .card-grid */

/* ========================================
   相册瀑布流（CSS columns 实现）
   ======================================== */
.masonry-grid {
    display: block !important; /* 覆盖 grid */
    columns: 5;
    column-gap: 16px;
    gap: 0;              /* 由 column-gap 控制 */
    margin-bottom: 28px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;  /* 防止列布局导致横向溢出 */
}

/* 瀑布流中的卡片：重置 grid 模式的 flex 样式 */
.masonry-grid > .card,
.masonry-grid > a.card,
.masonry-grid > div.card {
    break-inside: avoid;
    margin-bottom: 16px;
    display: inline-block !important; /* 覆盖 .card-grid > .card 的 display:flex */
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    /* 重置 flex 属性 */
    flex-direction: unset !important;
    flex: unset !important;
    /* 移除 grid 模式下的悬停效果（inline-block 不支持 transform） */
}

/* 瀑布流卡片悬停效果（替代 translateY） */
.masonry-grid > .card:hover,
.masonry-grid > a.card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.12) !important;
}

/* 列数切换 */
.masonry-cols-3  { columns: 3; }
.masonry-cols-4  { columns: 4; }
.masonry-cols-5  { columns: 5; }
.masonry-cols-7  { columns: 7; }

/* ---- 列数切换器 ---- */
.masonry-col-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e8e0d8;
    border-radius: 8px;
    width: fit-content;
}
.mcs-label {
    font-size: 13px;
    color: #888;
    margin-right: 4px;
}
.mcs-btn {
    min-width: 32px;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    background: #f7f4ef;
    border: 1px solid #e8e0d8;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.mcs-btn:hover {
    background: #f0e8dc;
    color: #666;
}
.mcs-btn.active {
    background: linear-gradient(135deg, #913500, #b45a1a);
    color: #fff;
    border-color: #913500;
    box-shadow: 0 2px 8px rgba(145,53,0,0.25);
}


/* ---- 瀑布流封面：自然高度（瀑布流核心） ---- */
.masonry-grid .card-cover {
    aspect-ratio: auto;
    height: auto;
    flex-shrink: 0;
}
.masonry-grid .card-cover img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 瀑布流卡片内容：保留 flex 纵向布局，但去掉 flex:1（卡片不再是 flex 容器） */
.masonry-grid .card-body {
    display: flex !important;
    flex-direction: column;
    flex: unset !important;
    padding: 10px 12px;
    gap: 4px;
}
.masonry-grid .card-title {
    font-size: 13px;
    -webkit-line-clamp: 2;
}
.masonry-grid .card-summary {
    display: none; /* 瀑布流中隐藏摘要，节省垂直空间，突出封面差异 */
}

/* 瀑布流响应式：小屏幕自动降列 */
@media (max-width: 1400px) {
    .masonry-cols-7 { columns: 5; }
}
@media (max-width: 1100px) {
    .masonry-cols-7 { columns: 4; }
    .masonry-cols-5 { columns: 4; }
    .masonry-cols-4 { columns: 3; }
}
@media (max-width: 900px) {
    .masonry-cols-7,
    .masonry-cols-5,
    .masonry-cols-4 { columns: 3; }
    .masonry-cols-3 { columns: 2; }
}
@media (max-width: 600px) {
    .masonry-grid { columns: 2 !important; }
    .masonry-col-switcher { display: none; } /* 小屏隐藏切换器 */
}

/* ---- Legacy card styles: hidden (replaced by .grid-card) ---- */
/* 注意：仅隐藏 .card-grid 直接子元素，不影响其他使用这些类的元素 */
.card-grid > .card,
.card-grid > a.card,
.card-grid > div.card { display: none !important; }

/* ---- Pagination ---- */
.content-list .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 28px;
    padding: 8px 0;
}
.content-list .pagination a,
.content-list .pagination span.pager-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #e8e0d8;
    background: #fff;
    color: #5a4636;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}
.content-list .pagination a:hover {
    background: #913500;
    border-color: #913500;
    color: #fff;
}
.content-list .pagination a.active {
    background: #913500;
    border-color: #913500;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(145, 53, 0, 0.25);
}

/* 上一页 / 下一页 箭头 */
.content-list .pagination .pager-arrow {
    font-size: 16px;
    font-weight: 600;
    min-width: 38px;
}
.content-list .pagination span.pager-arrow.disabled {
    background: #f7f5f0;
    border-color: #e8e0d8;
    color: #c4b8a8;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 省略号 */
.content-list .pagination .pager-dots {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 32px;
    height: 38px;
    padding-bottom: 6px;
    border: none;
    background: none;
    color: #b8a898;
    font-size: 14px;
    letter-spacing: 1px;
}

/* 跳转 */
.content-list .pagination .pager-jump {
    margin-left: 8px;
    font-size: 13px;
    color: #999;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.content-list .pagination .pager-jump input {
    width: 44px;
    height: 30px;
    text-align: center;
    border: 1px solid #e0d8ce;
    border-radius: 6px;
    font-size: 13px;
    color: #5a4636;
    background: #fdfbf8;
    outline: none;
    transition: border-color 0.15s;
}
.content-list .pagination .pager-jump input:focus {
    border-color: #913500;
    box-shadow: 0 0 0 2px rgba(145, 53, 0, 0.08);
}

/* 隐藏 number 输入框的箭头 (Chrome/Edge/Safari) */
.content-list .pagination .pager-jump input::-webkit-inner-spin-button,
.content-list .pagination .pager-jump input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.content-list .pagination .pager-jump input[type=number] {
    -moz-appearance: textfield;
}

/* ============================================================
   视图切换按钮
   ============================================================ */
.list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}
.list-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.view-switcher {
    display: flex;
    gap: 4px;
    background: #f5f2ed;
    border: 1px solid #e8e0d8;
    border-radius: 8px;
    padding: 3px;
}
.vs-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 30px;
    border: none;
    background: transparent;
    color: #999;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s;
    padding: 0;
}
.vs-btn svg { width: 16px; height: 16px; }
.vs-btn:hover { color: #666; background: #ebe5dc; }
.vs-btn.active {
    background: #fff;
    color: #913500;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* ============================================================
   LIST 视图：左图右文
   ============================================================ */
.items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}
.list-item {
    display: flex;
    gap: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e8e0d8;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, border-color .2s;
    align-items: flex-start;
}
.list-item:hover {
    border-color: #c9a87a;
    box-shadow: 0 2px 12px rgba(145,53,0,.08);
}

/* 封面（固定宽度） */
.li-cover {
    width: 160px;
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f2ed;
    flex-shrink: 0;
}
.li-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.li-cover-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: #f8f5f1;
}

/* 内容区 */
.li-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 2px 0;
}
.li-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.li-cat {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    background: #f5f2ed;
    color: #913500;
    font-size: 11px;
    border: 1px solid #e8dcd0;
    width: fit-content;
}
.li-summary {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 计数元信息 */
.li-meta {
    display: flex;
    gap: 14px;
    margin-top: auto;
    padding-top: 4px;
}
.li-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #aaa;
}
.li-meta-item svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ============================================================
   GRID 视图：卡片网格（覆盖原有 .card-grid）
   ============================================================ */
.items-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

/* 相册/图书馆列表：隐藏视图切换按钮，强制使用网格视图 */
body.page-album-list .view-switcher,
body.page-library-list .view-switcher {
    display: none !important;
}

/* 图书馆列表：Grid 7列 */
body.page-library-list .items-grid {
    grid-template-columns: repeat(7, 1fr);
}

/* 相册列表：瀑布流布局（CSS columns，类似 Pinterest） */
body.page-album-list .items-grid {
    display: block !important;
    columns: 7;
    column-gap: 16px;
}
/* 瀑布流卡片：inline-block 防止 flex 与 columns 冲突 */
body.page-album-list .grid-card {
    display: inline-block !important;
    width: 100%;
    break-inside: avoid;
    margin-bottom: 16px;
    vertical-align: top;
}
/* 卡片封面 */
body.page-album-list .grid-card .gc-cover {
    width: 100%;
    aspect-ratio: auto; /* 自然高度，瀑布流核心 */
    overflow: hidden;
    background: #f5f2ed;
    border-radius: 6px;
}
body.page-album-list .grid-card .gc-cover img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
body.page-album-list .grid-card:hover .gc-cover img {
    transform: scale(1.05);
}
body.page-album-list .grid-card .gc-body {
    padding: 8px 4px;
}
body.page-album-list .grid-card .gc-title {
    font-size: 13px;
    -webkit-line-clamp: 1;
}
body.page-album-list .grid-card .gc-summary {
    display: none;
}
@media (max-width: 1600px) {
    body.page-album-list .items-grid { columns: 6; }
    body.page-library-list .items-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 1400px) {
    body.page-album-list .items-grid { columns: 5; }
    body.page-library-list .items-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1100px) {
    .items-grid { grid-template-columns: repeat(2, 1fr); }
    body.page-library-list .items-grid { grid-template-columns: repeat(4, 1fr); }
    body.page-album-list .items-grid { columns: 4; }
}
@media (max-width: 900px) {
    body.page-album-list .items-grid { columns: 3; }
    body.page-library-list .items-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .items-grid { grid-template-columns: 1fr; }
    body.page-album-list .items-grid { columns: 2; }
    body.page-library-list .items-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 相册全宽 + Dock 响应式让出空间（与 _workbench_sidebar.php 断点同步） */
@media (max-width: 900px) {
    body.has-dock.page-album-list .content-list { margin-left: 180px; }
}
@media (max-width: 600px) {
    body.has-dock.page-album-list .content-list { margin-left: 0 !important; }
    body.page-album-list .content-list { padding-left: 16px; padding-right: 16px; }
}

.grid-card {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e8e0d8;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: box-shadow .2s, transform .2s;
    text-decoration: none;
    color: inherit;
}
.grid-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    transform: translateY(-3px);
}
.gc-cover {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f5f2ed;
    flex-shrink: 0;
}
.gc-cover img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s; }
.grid-card:hover .gc-cover img { transform: scale(1.05); }
.gc-cover-placeholder {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    background:#f8f5f1;
}
.gc-body {
    padding: 12px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gc-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.gc-summary {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.gc-meta {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 11px;
    color: #aaa;
}
.gc-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.gc-meta svg { width: 13px; height: 13px; }

/* ============================================================
   TEXT 视图：纯文字列表
   ============================================================ */
.items-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 28px;
    border: 1px solid #e8e0d8;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.text-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f0ece4;
    transition: background .15s;
    gap: 16px;
}
.text-item:last-child { border-bottom: none; }
.text-item:hover { background: #faf6f2; }

.ti-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.ti-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-item:hover .ti-title { color: #913500; }
.ti-cat {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    background: #f5f2ed;
    color: #913500;
    font-size: 11px;
    border: 1px solid #e8dcd0;
    flex-shrink: 0;
}

.ti-meta {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
}
.ti-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #bbb;
    white-space: nowrap;
}
.ti-meta svg { width: 13px; height: 13px; }

/* ============================================================
   相册卡片增强样式（原 album_list.css 合并至此）
   ============================================================ */
body.page-album-list .grid-card {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e8e0d8;
    transition: transform 0.25s, box-shadow 0.25s;
}
body.page-album-list .grid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
body.page-album-list .grid-card .gc-cover img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s;
}
body.page-album-list .grid-card:hover .gc-cover img {
    transform: scale(1.03);
}

/* 老站模板兼容：.waterfall / .album-card */
.waterfall { columns: 7; column-gap: 20px; max-width: 100%; margin: 0 auto; padding: 0 60px; }
@media (max-width: 1600px) { .waterfall { columns: 6; } }
@media (max-width: 1400px) { .waterfall { columns: 5; } }
@media (max-width: 1100px) { .waterfall { columns: 4; } }
@media (max-width: 900px)  { .waterfall { columns: 3; } }
@media (max-width: 600px)  { .waterfall { columns: 2; } }
@media (max-width: 400px)  { .waterfall { columns: 1; } }

.album-card {
    break-inside: avoid;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}
.album-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.album-cover { position: relative; width: 100%; overflow: hidden; }
.album-cover img { width: 100%; display: block; transition: transform 0.3s; }
.album-card:hover .album-cover img { transform: scale(1.05); }
.album-image-count {
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(0,0,0,0.7); color: #fff;
    padding: 4px 8px; border-radius: 4px; font-size: 12px;
    display: flex; align-items: center; gap: 4px;
}
.album-info { padding: 15px; }
.album-title {
    font-size: 16px; font-weight: 600; color: #333;
    margin-bottom: 8px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.album-meta { display: flex; gap: 10px; margin-bottom: 10px; font-size: 13px; color: #999; }
.album-stats { display: flex; gap: 15px; font-size: 13px; color: #999; }
.stat-item { display: flex; align-items: center; gap: 4px; }

.loading { text-align: center; padding: 30px; color: #999; font-size: 14px; }
.loading-spinner {
    display: inline-block; width: 20px; height: 20px;
    border: 2px solid #ddd; border-top-color: #1565c0; border-radius: 50%;
    animation: spin 0.8s linear infinite; margin-right: 8px; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state { text-align: center; padding: 60px 20px; color: #999; }
.empty-state svg { width: 80px; height: 80px; margin-bottom: 20px; opacity: 0.5; }

/* 响应式：小屏 TEXT 视图元信息竖向排列 */
@media (max-width: 600px) {
    .li-cover { width: 100px; height: 72px; }
    .list-item { gap: 10px; padding: 10px; }
    .li-summary { display: none; }
    .ti-meta { gap: 8px; }
    .ti-meta span svg { display: none; }
}