/* ============================================================
   Creawith 2.0 Unified Work Card Sheet (Revision 109 完整定盘版)
   路径：assets/css/creawith-work-card.css
   适用于：全站作品大盘网格、作者主页、个人收藏、异步搜索大盘
   设计哲学：
   - 100% 独立组件化，解耦并物理隔离 creawith-ui.css
   - 完整整合：骨架屏、cw-lazy、遮罩 Hover、移动端防掉帧、无障碍支持
============================================================ */

/* 🌟 核心防震：常驻滚动条轨道槽，防止内容载入时页面挤压跳动 */
html {
    scrollbar-gutter: stable !important;
}

/* ============================================================
   S‑A‑5：Skeleton 骨架屏（Creawith 极简几何定版）
============================================================ */
#cw-results-grid,
#cw-skeleton-box {
    width: 100%;
    box-sizing: border-box;
}

#cw-skeleton-box {
    display: none;
    opacity: 0;
    transition: opacity .22s cubic-bezier(.33,1,.68,1);
}

#cw-skeleton-box.active {
    display: grid !important;
    opacity: 1;
}

.cw-skeleton-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: cwSkeletonFadeIn 0.26s cubic-bezier(.33,1,.68,1) forwards;
}

@keyframes cwSkeletonFadeIn {
    to {
        opacity: 1;
    }
}

.cw-skeleton-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.035);
    position: relative;
    overflow: hidden;
}

.cw-grid-mode-golden .cw-skeleton-thumb {
    aspect-ratio: 1.618 / 1;
}

.cw-skeleton-content {
    box-sizing: border-box;
    padding: 8px 0 0;
    display: flex;
    flex-direction: column;
}

.cw-skeleton-title-line {
    display: none;
}

.cw-skeleton-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 32px;
    margin-top: 0;
}

.cw-skeleton-author-box {
    display: flex;
    align-items: center;
}

.cw-skeleton-avatar-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.cw-skeleton-name-bar {
    width: 55px;
    height: 11px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.03);
    margin-left: 8px;
    position: relative;
    overflow: hidden;
}

/* 无感横向微光扫描动效 */
.cw-skeleton-thumb::after,
.cw-skeleton-title-line::after,
.cw-skeleton-avatar-circle::after,
.cw-skeleton-name-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.45) 50%, 
        rgba(255,255,255,0) 100%
    );
    transform: translateX(-100%);
    animation: cwSkeletonShimmer 1.5s cubic-bezier(.25,.46,.45,.94) infinite;
}

@keyframes cwSkeletonShimmer {
    100% { transform: translateX(100%); }
}


/* ============================================================
   1. 卡片基础外壳
============================================================ */
.work-card {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: auto;
    min-width: 0;
    box-shadow: none;
    transition: none;
}

.work-card:hover {
    border-color: transparent;
    box-shadow: none;
    transform: none !important;
}

.work-card:active {
    transform: none !important;
}

/* ============================================================
   2. 封面区域 & 解耦 HTML 结构
============================================================ */
.work-card .work-cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f5f5f5;
    border-radius: 6px;
    box-shadow: none;
    transition: box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), aspect-ratio 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .work-card:hover .work-cover {
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
    }
}

.work-cover-link {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
}

.work-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.work-cover img.is-loaded,
.work-cover img:not(.cw-lazy) {
    opacity: 1;
}

/* 彻底禁用 Hover 图片放大变焦 */
.work-card:hover .work-cover img {
    transform: none !important;
    filter: none !important;
}

/* A24：分类标签 */
.work-card .work-card-tag {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 4px 10px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: 3;
    transition: background 0.25s ease;
}

/* 缺省空封面样式 */
.work-cover--empty {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: rgba(0, 0, 0, 0.03);
    background-image: radial-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px);
    background-size: 12px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.work-cover-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888888;
    user-select: none;
}

.work-cover-placeholder__label {
    font-size: 0.75rem;
    font-weight: 500;
}


/* ============================================================
   3. 封面 Hover 渐变遮罩 (Hover Overlay) & 标题/收藏
============================================================ */
.work-cover-hover-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 0;
    padding: 0 12px 12px;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.52) 24%, rgba(0, 0, 0, 0.12) 46%, transparent 72%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.33, 1, 0.68, 1);
}

.work-card:hover .work-cover-hover-overlay,
.work-card:focus-within .work-cover-hover-overlay {
    opacity: 1;
    pointer-events: auto;
}

.work-cover-hover-overlay .work-title {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.work-cover-hover-overlay .work-title a {
    color: #ffffff !important;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
}

/* ============================================================
   4. 底部极简 Meta 栏 (高 32px)
============================================================ */
.work-info {
    padding: 8px 0 0;
    box-sizing: border-box;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    margin-inline: 0;
}

.work-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 32px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.work-card .work-info,
.work-card .work-meta {
    margin-inline: 0;
    padding-inline: 0;
}

.work-card .work-meta > .work-author,
.work-card .work-meta > .work-stats {
    margin: 0;
    padding: 0;
}

.work-author {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.author-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 22px;
}

.author-name {
    font-size: 13px;
    font-weight: 500;
    color: #222222;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    font-size: 11px;
    color: #888885;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.work-stats .stat-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.work-stats svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
}

/* 管理态隔离栏 */
.work-management-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
    font-size: 12px;
}


/* ============================================================
   5. 淡入瀑布流与动效总线
============================================================ */
#cw-results-grid .work-card:not([style*="transition"]),
#cw-main-grid .work-card:not([style*="transition"]) {
    opacity: 0;
    animation: cwWorkCardFadeIn 0.45s cubic-bezier(0.215, 0.610, 0.355, 1) forwards;
}

#cw-results-grid .work-card:nth-child(1)  { animation-delay: 0.00s; }
#cw-results-grid .work-card:nth-child(2)  { animation-delay: 0.04s; }
#cw-results-grid .work-card:nth-child(3)  { animation-delay: 0.08s; }
#cw-results-grid .work-card:nth-child(4)  { animation-delay: 0.12s; }
#cw-results-grid .work-card:nth-child(5)  { animation-delay: 0.16s; }
#cw-results-grid .work-card:nth-child(6)  { animation-delay: 0.20s; }

@keyframes cwWorkCardFadeIn {
    to {
        opacity: 1;
    }
}


/* ============================================================
   6. 暗色模式、移动端与无障碍守卫
============================================================ */
@media (prefers-color-scheme: dark) {
    .work-card,
    .work-info { background: transparent; border-color: transparent; }
    .author-name { color: #eeeeee; }
    .work-stats { color: #888888; }
    .work-management-meta { border-top-color: rgba(255, 255, 255, 0.1); }
    
    .cw-skeleton-card { background: transparent; border-color: transparent; }
    .cw-skeleton-thumb,
    .cw-skeleton-title-line,
    .cw-skeleton-avatar-circle,
    .cw-skeleton-name-bar { background: #1a1a1a; }
}

@media (max-width: 767px) {
    .work-card:active { transform: none !important; }
    .work-cover-hover-overlay {
        opacity: 1 !important;
        pointer-events: auto !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 80%) !important;
        gap: 0;
        padding: 0 10px 10px;
    }
    
    body.is-scrolling .work-card,
    body.is-scrolling .work-card .work-cover img {
        transition: none !important;
    }
}

.work-card:focus-within .work-cover {
    outline: 2px solid #4c9aff;
    outline-offset: 2px;
}

@media (hover: none), (pointer: coarse) {
    .work-cover-hover-overlay {
        opacity: 1;
        pointer-events: auto;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.76) 0%, transparent 76%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-card,
    .work-card .work-cover img,
    .cw-skeleton-card {
        animation: none !important;
        transition: none !important;
    }
}