/*
Theme Name: Puock Child
Theme URI: https://xiutu.work/
Description: My custom child theme for Puock.
Author: Your Name
Author URI: https://xiutu.work/about/
Template: puock
Version: 1.0.0
Text Domain: puock-child
*/





.post-relevant-item .title {
    position: absolute; /* 新增：设置为绝对定位 */
    bottom: 0; /* 新增：标题位于容器底部 */
    left: 0;
    right: 0;
    color: white; /* 新增：标题文字颜色为白色 */
    padding: 5px; /* 新增：添加内边距 */
    margin: 0; /* 重置默认的外边距 */
    text-align: center;
    font-size: 14px;
    /*opacity: 2;  新增：设置一定的不透明度 */
    background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); /* 可选：添加轻微阴影增强层次感 */
}



.post-relevant-item {
    padding: 0 5px;
    margin-bottom: 20px;
}

.post-relevant .post-relevant-item > div {
    transition: all .3s;
    width: 100%;
    border-radius: 6px;
    height: 140px;
    position: relative;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.post-relevant .post-relevant-item > div .title {
    z-index: 10;
    color: var(--light);
}

.post-relevant .post-relevant-item > div:hover {
    transform: translateY(5px);
}

.post-relevant .post-relevant-item > div:hover:before {
    /*backdrop-filter: blur(1px);*/
}

.post-relevant .post-relevant-item > div:before {
    display: none;
    /*content:' ';
    width:100%;
    position:absolute;
    top:0;
    left:0;
    border-radius:6px;
    height:100%;
    background:linear-gradient(rgba(54,62,72,0.58), rgba(71,74,78,0.16));
    /*backdrop-filter:blur(3px)*/;
    z-index:9*/
}


/* 登录链接样式 - 确保覆盖所有状态 */
.login-required-link {
    color: #ff0000 !important;
    text-decoration: none !important;
}

.login-required-link:link,
.login-required-link:visited,
.login-required-link:hover,
.login-required-link:active {
    color: #ff0000 !important;
}

/* 补充：修复相关文章缩略图显示问题 */
/* 处理背景图方式的缩略图 */
.post-relevant .post-relevant-item > div {
    /* 防止背景图平铺 */
    background-repeat: no-repeat !important;
    /* 确保背景图正确缩放 */
    background-size: cover !important;
    /* 背景图居中显示 */
    background-position: center center !important;
}

/* 处理img标签方式的缩略图 */
.post-relevant .post-relevant-item img {
    /* 绝对定位充满容器 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 保持比例填充容器，不会拉伸或平铺 */
    object-fit: cover;
    /* 图片居中显示 */
    object-position: center;
    /* 移除默认间距和边框 */
    margin: 0;
    padding: 0;
    border: none;
    /* 确保图片在底层 */
    z-index: 1;
}

/* 确保标题在最上层 */
.post-relevant .post-relevant-item > div .title {
    position: relative;
    z-index: 10;
}