/*
Theme Name: Puock Child
Theme URI: https://www.xiutushi.cn/
Description: My custom child theme for Puock.
Author: Your Name
Author URI: https://www.xiutushi.cn/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); /* 可选：添加轻微阴影增强层次感 */
      /* 新增：限制行数和省略处理 */
    white-space: normal; /* 允许换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
    display: -webkit-box; /* 弹性盒模型 */
    -webkit-line-clamp: 2; /* 最多显示2行（可根据需要调整为1或3） */
    -webkit-box-orient: vertical; /* 垂直排列 */
    line-height: 1.5; /* 调整行高，避免文字拥挤 */
    max-height: 42px; /* 2行 × 行高1.5 × 14px ≈ 42px，确保不超出背景 */
}



.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;
    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;
}