/* 网址/文章卡片悬停效果 - Pick up! 风格 */

.posts-item.sites-item,
.posts-item.post-item,
.posts-item.style-post-capsule,
.posts-item.style-sites-capsule,
.posts-item.style-post-idiom,
.posts-item.style-sites-idiom,
.posts-item.style-post-mini-capsule {
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 6px 6px 12px #c5c5c5,
                -6px -6px 12px #ffffff;
    border: 1px solid var(--muted-bg-a-color, #e8e8e8);
    transition: all 0.3s ease;
}

/* 渐变填充层 - 从左到右展开 */
.posts-item.sites-item::before,
.posts-item.post-item::before,
.posts-item.style-post-capsule::before,
.posts-item.style-sites-capsule::before,
.posts-item.style-post-idiom::before,
.posts-item.style-sites-idiom::before,
.posts-item.style-post-mini-capsule::before {
    content: '';
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%);
    transition: .5s ease;
    display: block;
    z-index: -1;
}

.posts-item.sites-item:hover::before,
.posts-item.post-item:hover::before,
.posts-item.style-post-capsule:hover::before,
.posts-item.style-sites-capsule:hover::before,
.posts-item.style-post-idiom:hover::before,
.posts-item.style-sites-idiom:hover::before,
.posts-item.style-post-mini-capsule:hover::before {
    width: 100%;
}

/* 卡片内容层级确保在填充层之上 */
.posts-item.sites-item .item-header,
.posts-item.sites-item .sites-body,
.posts-item.sites-item .item-footer,
.posts-item.post-item .item-header,
.posts-item.post-item .item-body,
.posts-item.post-item .item-footer,
.posts-item.style-post-capsule .item-header,
.posts-item.style-sites-capsule .item-header,
.posts-item.style-post-capsule .sites-body,
.posts-item.style-sites-capsule .sites-body,
.posts-item.style-post-capsule .item-footer,
.posts-item.style-sites-capsule .item-footer,
.posts-item.style-post-idiom .item-header,
.posts-item.style-sites-idiom .item-header,
.posts-item.style-post-idiom .sites-body,
.posts-item.style-sites-idiom .sites-body,
.posts-item.style-post-idiom .item-footer,
.posts-item.style-sites-idiom .item-footer,
.posts-item.style-post-mini-capsule .item-header,
.posts-item.style-post-mini-capsule .item-body,
.posts-item.style-post-mini-capsule .item-footer {
    position: relative;
    z-index: 2;
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
    .posts-item.sites-item,
    .posts-item.post-item,
    .posts-item.style-post-capsule,
    .posts-item.style-sites-capsule,
    .posts-item.style-post-idiom,
    .posts-item.style-sites-idiom,
    .posts-item.style-post-mini-capsule {
        box-shadow: 6px 6px 12px rgba(0,0,0,0.4),
                    -6px -6px 12px rgba(255,255,255,0.04);
        border-color: var(--muted-bg-a-color, #2a2a2a);
    }
}