/* ============================================================
   轻道前台公共样式 web.css
   范围：内容区域（首页/详情/分类）、个人中心、关于页
   与 layui 主题协调，统一卡片/排版/响应式基础
   ============================================================ */

/* 顶栏品牌 */
.layui-header.header .main .brand {
    color: #fff;
    font-size: 19px;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    padding: 0 18px 0 0;
    line-height: 60px;
}
.layui-header.header .main .brand .brand-name {
    font-family: Andalus, "Microsoft YaHei", sans-serif;
    letter-spacing: 1px;
}
.layui-header.header .main .brand .brand-slogan {
    font-size: 12px;
    font-weight: 400;
    margin-left: 8px;
    color: #e6f7ff;
}

/* 顶栏导航 ul 因 inline-block 基线间隙实际高 62px，比固定 header(60px) 高 2px，
   同色背景会在底边中段露出一条 2px「台阶」；显式约束为 60px 压平 */
.layui-header .layui-nav {
    height: 60px;
}

/* ---------- 顶栏站内信铃铛 ---------- */
/* 铃铛是纯图标入口：隐藏 layui 给含下拉的导航项自动追加的下钻箭头（头像处同理） */
#messageNavItem > a > .layui-nav-more { display: none; }

#messageBell { position: relative; }

/* 悬停高亮：用绝对定位伪元素绘制，不改变任何布局尺寸。
   反例（踩过）：给行内 <i> 加 padding 会撑大行内盒宽 → li 宽度随之变化（abspos 收缩适应 + right 锚定）
   → 铃铛在鼠标移入/移出时左右各跳 5px，表现为抖动。此处禁止使用 padding/width/border 等影响流布局的属性 */
#messageBell .layui-icon-notice { position: relative; }
#messageBell:hover .layui-icon-notice::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -6px;
    bottom: -4px;
    left: -6px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, .14);
}

/* 未读角标：由行内流改为悬挂在铃铛右上角的红色胶囊；
   display 由 none 切换为可见时（message.js setBadge）播放一次弹入动画 */
#messageBadge.message-badge {
    position: absolute;
    top: 12px;
    left: 33px;
    height: 16px;
    padding: 0 4px;
    line-height: 16px;
    font-size: 11px;
    text-align: center;
    border-radius: 8px;
    background-color: #FF5722;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
    animation: messageBadgePop .18s ease-out;
}

@keyframes messageBadgePop {
    from { transform: scale(.4); }
    to   { transform: scale(1); }
}

/* 内容主区域宽度 */
.container {
    max-width: 1120px;
    margin: 0 auto;
    /* 顶部留出固定导航栏(60px)高度，避免内容被遮挡；勿改成 0（会盖住首屏内容） */
    padding: 78px 15px 0;
}

/* 通用区块标题 */
.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2d3d;
    margin: 22px 0 14px;
    padding-left: 10px;
    border-left: 4px solid #16a085;
}

/* ---------- Banner 轮播 ---------- */
.web-banner {
    margin-top: 18px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.web-banner .layui-carousel-ind {
    text-align: right;
}
.web-banner img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

/* ---------- 分类卡片墙 ---------- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 8px;
}
.cat-card {
    display: block;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    padding: 18px 14px;
    text-align: center;
    color: #2c3e50;
    transition: all .2s;
    text-decoration: none;
}
.cat-card:hover {
    border-color: #16a085;
    color: #16a085;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(22,160,133,.12);
}
.cat-card .cat-name {
    font-size: 16px;
    font-weight: 600;
}
.cat-card .cat-remark {
    font-size: 12px;
    color: #8a96a3;
    margin-top: 6px;
}

/* ---------- 内容列表 ---------- */
.blog-list {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 22px;
    margin-top: 10px;
}
.blog-main { min-width: 0; }
.blog-side { min-width: 0; }

.blog-card {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 14px;
    transition: box-shadow .2s;
}
.blog-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.blog-card .blog-title {
    font-size: 17px;
    font-weight: 600;
    color: #1f2d3d;
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
}
.blog-card .blog-title:hover { color: #16a085; }
.blog-card .blog-summary {
    color: #5a6573;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 10px;
}
.blog-card .blog-meta {
    font-size: 12px;
    color: #97a1ac;
    display: flex;
    gap: 16px;
    align-items: center;
}
.blog-card .blog-meta .author { color: #16a085; }

/* 侧栏排行 */
.rank-box {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.rank-box .rank-item {
    display: flex;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px dashed #f0f2f4;
    font-size: 14px;
}
.rank-box .rank-item:last-child { border-bottom: none; }
.rank-box .rank-no {
    width: 22px; height: 22px; line-height: 22px;
    text-align: center; border-radius: 4px;
    background: #f0f2f4; color: #889; margin-right: 10px; font-size: 12px;
}
.rank-box .rank-item:nth-child(1) .rank-no { background: #16a085; color: #fff; }
.rank-box .rank-item:nth-child(2) .rank-no { background: #3db8a0; color: #fff; }
.rank-box .rank-item:nth-child(3) .rank-no { background: #7fd1c1; color: #fff; }
.rank-box .rank-title {
    flex: 1; color: #2c3e50; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-box .rank-title:hover { color: #16a085; }
.rank-box .rank-read { color: #97a1ac; font-size: 12px; margin-left: 8px; }

/* ---------- 内容详情 ---------- */
.blog-detail {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    padding: 26px 30px;
    margin-top: 18px;
}
.blog-detail h1 {
    font-size: 26px; font-weight: 700; color: #1f2d3d; margin: 0 0 14px;
}
.blog-detail .blog-detail-meta {
    font-size: 13px; color: #97a1ac; border-bottom: 1px solid #f0f2f4;
    padding-bottom: 14px; margin-bottom: 20px; display: flex; gap: 18px;
}
.blog-detail .blog-content {
    font-size: 15px; line-height: 1.9; color: #2c3e50; word-wrap: break-word;
}
.blog-detail .blog-content img { max-width: 100%; }
.blog-comment-tip {
    margin-top: 26px; padding: 16px; background: #f7f9fa; border-radius: 8px;
    color: #8a96a3; text-align: center; font-size: 14px;
}

/* ---------- 个人中心 ---------- */
.profile-card {
    background: #fff; border: 1px solid #eef0f2; border-radius: 10px;
    padding: 26px; margin-top: 18px; display: flex; gap: 24px; align-items: center;
}
.profile-card .profile-avatar {
    width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
    border: 3px solid #e8f6f1;
}
.profile-card .profile-name { font-size: 22px; font-weight: 700; color: #1f2d3d; }
.profile-card .profile-motto { color: #16a085; font-size: 14px; margin: 6px 0; }
.profile-card .profile-intro { color: #5a6573; font-size: 14px; line-height: 1.7; max-width: 620px; }
.profile-stats { display: flex; gap: 28px; margin-top: 12px; }
.profile-stats .stat { text-align: center; }
.profile-stats .stat .num { font-size: 20px; font-weight: 700; color: #16a085; }
.profile-stats .stat .label { font-size: 12px; color: #97a1ac; }

/* ---------- 关于页 ---------- */
.about-wrap {
    background: #fff; border: 1px solid #eef0f2; border-radius: 10px;
    padding: 30px 36px; margin-top: 18px; line-height: 1.9; color: #2c3e50; font-size: 15px;
}
.about-wrap h2 { font-size: 20px; color: #16a085; margin: 18px 0 10px; }

/* ---------- 空状态 ---------- */
.empty-tip {
    text-align: center; color: #97a1ac; padding: 40px 0; font-size: 14px;
}

/* ---------- 站点页脚（版权 / ICP 备案号） ---------- */
/* 内容来自后台「站点管理 → 站点配置 → 站点信息」，版权无值时回落站点名，备案号无值则整行不渲染 */
/* body.site-body 走纵向 flex，让内容不足一屏时页脚仍贴底（.header 是 fixed，不参与流） */
body.site-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.site-body > .container {
    flex: 1 0 auto;
    /* 必须显式 100%：.container 带 margin:0 auto，在纵向 flex 里 auto margin 会吸收剩余空间，
       使子项宽度收缩到内容宽度（内页文字窄时整块会变窄并居中、与首页错位） */
    width: 100%;
    /* 改 border-box 并同步放宽 max-width：总宽仍 1150（内容 1120 不变），
       但窄屏时 width:100% 不会因 15px 侧内边距撑出横向滚动条 */
    box-sizing: border-box;
    max-width: 1150px;
}

body.site-body > .site-footer {
    flex: 0 0 auto;
}

.site-footer {
    clear: both;
    margin-top: 36px;
    padding: 22px 16px 26px;
    border-top: 1px solid #eef0f2;
    color: #97a1ac;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* 版权 / 公安备案 / ICP 备案同行展示，窄屏放不下时自然折行 */
.site-footer-line {
    margin: 0;
}

.site-sep {
    margin: 0 8px;
    color: #d3d9e4;
}

/* 公安联网备案官方警徽：与文字基线对齐，行高不撑高 */
.site-police-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: -3px;
    border: 0;
}

.site-footer a {
    color: #97a1ac;
    text-decoration: none;
}

.site-footer a:hover {
    color: #1890ff;
    text-decoration: underline;
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    .blog-list { grid-template-columns: 1fr; }
    .web-banner img { height: 180px; }
    .profile-card { flex-direction: column; text-align: center; }
    .profile-stats { justify-content: center; }
    .site-footer { margin-top: 24px; padding: 18px 12px 22px; }
}