/* 文章页面的样式 */

/* 代替首页大图标题和简介的样式 */
.HeaderImg .infomation .title {
    font-weight: normal; /* 标题字体粗细设为正常 */
    letter-spacing: 0.3rem; /* 标题字符间距 */
}

.HeaderImg .infomation .desctitle {
    font-weight: 700; /* 描述标题字体加粗 */
    font-size: 1.8rem; /* 描述标题字体大小 */
    letter-spacing: 1.2rem; /* 描述标题字符间距 */
}

/* 响应式设计：屏幕宽度小于768px时的样式 */
@media (max-width: 768px) {
    .HeaderImg .infomation .title {
        letter-spacing: 0.1rem; /* 小屏幕下标题字符间距缩小 */
    }

    .HeaderImg .infomation .desctitle {
        font-size: 1.1rem; /* 小屏幕下描述标题字体缩小 */
        letter-spacing: 0.3rem; /* 小屏幕下描述标题字符间距调整 */
    }
}

/* 广告区域样式 */
.joe_post__ad {
    padding-top: 20px; /* 广告顶部内边距 */
}

.joe_container .joe_aside {
    padding-top: 12px; /* 侧边栏顶部内边距 */
}

@media (min-width: 993px) {
    .joe_post__layout {
        align-items: flex-start;
    }

    .joe_post__layout>.joe_main {
        flex: 1 1 0;
        min-width: 0;
    }

    .joe_post__layout>.joe_aside:not(.inactive) {
        display: block !important;
        flex: 0 0 311px;
        width: 311px;
    }
}

@media (min-width: 993px) and (max-width: 1280px) {
    body.joe-shell-layout .joe_post__layout>.joe_aside:not(.inactive) {
        flex-basis: 280px;
        width: 280px;
    }

    body.joe-shell-layout .joe_post__layout>.joe_aside:not(.inactive) .joe_aside__item {
        width: 280px;
    }
}

.joe_post__ad-link {
    display: block; /* 广告链接显示为块级元素 */
    position: relative; /* 相对定位，用于子元素绝对定位 */
    margin-bottom: 10px; /* 底部外边距 */
}

.joe_post__ad-link .image {
    width: 100%; /* 广告图片宽度100% */
    border-radius: var(--radius-inner); /* 圆角使用变量 */
    transition: 0.3s; /* 过渡动画0.3秒 */
}

.joe_post__ad-link .image.lazyload,
.joe_post__ad-link .image.lazyloading {
    max-height: 80px; /* 懒加载图片最大高度 */
}

.joe_post__ad-link .image:hover {
    opacity: 0.85; /* 鼠标悬停时透明度变化 */
}

.joe_post__ad-link .icon {
    position: absolute; /* 绝对定位的图标 */
    z-index: 1; /* 层级 */
    top: 5px; /* 距顶部5px */
    right: 5px; /* 距右侧5px */
    font-size: 12px; /* 字体大小 */
    background: rgba(0, 0, 0, 0.45); /* 半透明背景 */
    padding: 2px 5px; /* 内边距 */
    border-radius: 2px; /* 圆角 */
    color: #ebebeb; /* 文字颜色 */
    pointer-events: none; /* 不可点击 */
}

/* 面包屑导航样式 */
.joe_bread {
    padding-top: 20px; /* 顶部内边距 */
    opacity: .6; /* 透明度 */
    color: var(--main-color); /* 主色调变量 */
}

.joe_bread__bread {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    padding-left: 8px; /* 左侧内边距 */
}

.joe_bread__bread .line {
    color: var(--seat); /* 分隔线颜色 */
    padding: 0 8px; /* 分隔线内边距 */
}

.joe_bread__bread .item {
    white-space: nowrap; /* 文本不换行 */
}

.joe_bread__bread .item .link {
    color: var(--main-color); /* 链接颜色 */
    transition: color 0.35s; /* 颜色过渡动画 */
}

.joe_bread__bread .item .link:hover {
    color: var(--theme); /* 悬停时主题色 */
}

.joe_bread__bread .item .icon {
    width: 15px; /* 图标宽度 */
    height: 15px; /* 图标高度 */
    min-width: 15px; /* 最小宽度 */
    min-height: 15px; /* 最小高度 */
    fill: var(--routine); /* 填充颜色 */
    margin-right: 2px; /* 右外边距 */
}

/* 分页样式 */
.joe_post__pagination {
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
}

.joe_post__pagination-item {
    margin-bottom: 15px; /* 底部外边距 */
}

.joe_post__pagination-item a {
    display: block; /* 块级显示 */
    height: 32px; /* 高度 */
    line-height: 32px; /* 行高 */
    padding: 0 15px; /* 内边距 */
    color: #fff; /* 文字颜色 */
    border-radius: 3px; /* 圆角 */
    background: var(--back-line-right); /* 背景色 */
    font-size: 12px; /* 字体大小 */
    box-shadow: var(--box-shadow); /* 阴影 */
}

.joe_post__pagination-item a:hover {
    -webkit-animation: pulse 1s; /* Webkit浏览器动画 */
    animation: pulse 1s; /* 标准动画 */
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); /* 悬停时阴影效果 */
}

.joe_post__pagination-item.next {
    margin-left: auto; /* 右侧自动外边距 */
}

/* 动画关键帧定义 */
@-webkit-keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--theme); /* 动画起始阴影 */
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--theme); /* 动画起始阴影 */
    }
}

.original-price {
    opacity: .7; /* 透明度 */
    position: relative; /* 相对定位 */
    padding: 0 3px 0 2px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
    display: inline-block; /* 行内块显示 */
}

.original-price::before {
    content: ''; /* 伪元素内容 */
    position: absolute; /* 绝对定位 */
    width: 100%; /* 宽度100% */
    height: 1px; /* 高度1px */
    background: #ff343b; /* 删除线颜色 */
    top: .6em; /* 顶部位置 */
    left: 0; /* 左边位置 */
    transform: rotate(5deg); /* 旋转5度 */
}