/**
 * 个人中心瀑布流样式修复
 * 修复个人中心页面使用瀑布流布局时图片显示问题
 * 添加悬停效果和间距,与首页保持一致
 */

/* 瀑布流容器间距 - 与首页一致 */
.wpcom-profile-main .profile-posts-list.post-loop-masonry {
    margin: -10px -10px 10px;
}

/* 单个卡片间距 - 与首页一致 */
.wpcom-profile-main .profile-posts-list.post-loop-masonry .item {
    padding: 10px;
    border-bottom: 0 !important; /* 移除个人中心默认的底部边框 */
}

/* 禁用个人中心默认的 .item 悬停效果 */
.wpcom-profile-main .profile-posts-list.post-loop-masonry .item:hover {
    background: none !important;
    margin: 0 !important;
    padding: 10px !important;
    transform: none !important;
    transition: none !important;
}

/* 瀑布流布局图片样式 - 修复 CSS 选择器不匹配问题 */
.wpcom-profile-main .profile-posts-list.post-loop-masonry .item-img .item-thumb img {
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: all .2s ease-out 0s;
}

/* 确保图片容器正确显示 */
.wpcom-profile-main .profile-posts-list.post-loop-masonry .item-img {
    width: 100%;
    overflow: hidden;
    border-radius: var(--theme-border-radius-l, 8px);
}

/* 确保链接正确包裹图片 */
.wpcom-profile-main .profile-posts-list.post-loop-masonry .item-img .item-thumb {
    display: block;
    width: 100%;
}

/* 卡片初始状态 - 添加过渡动画(鼠标移出时的平滑效果) */
.wpcom-profile-main .profile-posts-list.post-loop-masonry .item-inner {
    transition: all .2s ease-out 0s;
}

/* 卡片悬停效果 - 与首页一致 */
.wpcom-profile-main .profile-posts-list.post-loop-masonry .item-inner:hover {
    box-shadow: 0 2px 10px 3px hsla(var(--theme-color-hsl), .15);
    transform: translateY(-3px);
    transition: all .2s ease-in 0s;
}

/* 图片悬停效果 - 与首页一致 */
.wpcom-profile-main .profile-posts-list.post-loop-masonry .item-inner:hover .item-thumb img {
    opacity: .9;
    transition: all .2s ease-in 0s;
}

/* 标题样式 - 与首页一致 */
.wpcom-profile-main .profile-posts-list.post-loop-masonry .item-title {
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 15px !important;
}

/* 移动端适配 */
@media (max-width: 767px) {
    /* 移动端间距调整 */
    .wpcom-profile-main .profile-posts-list.post-loop-masonry {
        margin: -6px -6px 10px;
    }
    
    .wpcom-profile-main .profile-posts-list.post-loop-masonry .item {
        padding: 6px;
    }
    
    /* 移动端标题样式 */
    .wpcom-profile-main .profile-posts-list.post-loop-masonry .item-title {
        font-size: 15px !important;
        padding: 6px !important;
    }
    
    /* 移动端禁用悬停效果 */
    .wpcom-profile-main .profile-posts-list.post-loop-masonry .item-inner:hover {
        box-shadow: 0 0 1px 0 hsla(var(--theme-color-hsl), .3);
        transform: none;
    }
}