/* ==========================================================================
   portal.css — 首页门户版专属样式（仅首页引用，不影响其他页面）
   依赖：CSS/style.css 的设计变量与通用组件（tag / sec-head / hero-facts 等）
   结构：门户焦点区（左轮播+右最新发布）→ 数据通栏 → 快捷入口
         → 多栏目聚合区（左主栏+右侧栏）→ 响应式
   ========================================================================== */

/* ---------- 门户焦点区：左大图轮播 + 右最新发布 ---------- */
.portal-focus{padding:26px 0 0}
.pf-grid{display:grid;grid-template-columns:1fr 352px;gap:24px;align-items:stretch}
.portal-focus .hero-carousel{
  height:auto;min-height:440px;
  border-radius:18px;border:1px solid var(--line);
}
/* 右侧：最新发布列表（与轮播等高，条目自动均分） */
.pf-side{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;
}
.pf-side-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(36,99,71,.07),transparent 70%);
}
.pf-side-head h2{font-size:16.5px;font-weight:700;margin:0;display:flex;align-items:center;gap:9px;letter-spacing:.3px}
.pf-side-head h2 i{color:var(--copper);font-size:15px}
.pf-live{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.14em}
.pf-list{list-style:none;margin:0;padding:4px 0;flex:1;display:flex;flex-direction:column}
.pf-list li{flex:1;border-bottom:1px dashed var(--line)}
.pf-list li:last-child{border-bottom:none}
.pf-list a{
  display:flex;align-items:center;gap:12px;height:100%;
  padding:10px 22px;transition:background .2s,padding-left .2s;
}
.pf-list a:hover{background:rgba(36,99,71,.05);padding-left:27px}
.pf-chip{
  flex:none;font-size:11.5px;font-family:var(--mono);letter-spacing:.05em;
  padding:3px 8px;border-radius:6px;border:1px solid;
}
.pf-chip.t-case{color:var(--green);border-color:rgba(47,107,79,.35);background:rgba(47,107,79,.08)}
.pf-chip.t-repair{color:var(--tech-blue);border-color:rgba(56,92,136,.35);background:rgba(56,92,136,.08)}
.pf-chip.t-article{color:var(--copper);border-color:rgba(180,120,47,.38);background:rgba(180,120,47,.08)}
.pf-chip.t-diy{color:var(--ink-2);border-color:var(--line-strong);background:rgba(20,28,25,.05)}
.pf-txt{
  flex:1;font-size:15px;font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s;
}
.pf-list a:hover .pf-txt{color:var(--copper)}
.pf-date{flex:none;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.pf-more{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:13px;font-family:var(--mono);font-size:13.5px;color:var(--muted);
  border-top:1px solid var(--line);transition:.2s;
}
.pf-more .arr{display:inline-block;transition:transform .2s}
.pf-more:hover{color:var(--green);background:rgba(36,99,71,.05)}
.pf-more:hover .arr{transform:translateX(4px)}

/* ---------- 数据通栏（复用 hero-facts 内部样式） ---------- */
.portal-stats{
  margin-top:26px;padding:30px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18));
}
.portal-facts{margin-top:0;border-top:none;padding-top:0;flex-wrap:wrap}

/* ---------- 快捷入口 ---------- */
.portal-quick{padding:44px 0 10px}
.q-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.q-card{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 14px;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s;
}
.q-card:hover{transform:translateY(-5px);border-color:var(--copper);box-shadow:var(--shadow-lg)}
.q-ico{
  width:46px;height:46px;margin:0 auto 12px;border-radius:13px;
  display:grid;place-items:center;font-size:22px;
  color:var(--green);background:var(--green-soft);border:1px solid rgba(47,107,79,.25);
  transition:.22s;
}
.q-card:hover .q-ico{color:var(--copper);background:rgba(180,120,47,.10);border-color:rgba(180,120,47,.35)}
.q-card h3{font-size:15.5px;font-weight:700;margin-bottom:4px;letter-spacing:.2px}
.q-card p{font-size:13px;color:var(--muted);margin-bottom:0;line-height:1.55}

/* ---------- 多栏目聚合区：左主栏 + 右侧栏 ---------- */
.portal-main{padding:30px 0 26px}
.pm-sec{padding:38px 0 30px;border-bottom:1px solid var(--line)}
.pm-sec:last-of-type{border-bottom:none}
.pm-sec .sec-head{margin-bottom:30px;padding-bottom:16px}
.pf-aside{display:flex;flex-direction:column;gap:22px}
.side-card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-sm);padding:22px;
}
.side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.side-head h3{font-size:16.5px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px}
.side-head h3 i{color:var(--copper);font-size:15px}
.side-more{font-family:var(--mono);font-size:12.5px;color:var(--muted);transition:color .2s;flex:none}
.side-more:hover{color:var(--copper)}

/* 站长卡 */
.sa-top{display:flex;gap:14px;align-items:center;margin-bottom:13px}
.sa-avatar{
  width:64px;height:64px;border-radius:16px;object-fit:cover;
  border:1px solid var(--line);flex:none;box-shadow:var(--shadow-sm);
}
.sa-name{font-size:17px;font-weight:700;margin-bottom:2px}
.sa-role{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.side-about .sa-desc{font-size:14.5px;color:var(--ink-2);line-height:1.75;margin-bottom:14px}
.sa-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}
.sa-tags .tag{font-size:12px;padding:4px 10px}
.sa-mail{font-size:13.5px;color:var(--muted);margin-bottom:16px;display:flex;gap:7px;align-items:center}
.sa-mail i{color:var(--copper)}
.sa-mail a{color:var(--green);transition:color .2s;word-break:break-all}
.sa-mail a:hover{color:var(--copper)}
.side-about .btn-site{width:100%;padding:10px 18px;font-size:14.5px}

/* 热门阅读榜（前三名铜金序号） */
.rank-list{list-style:none;margin:0;padding:0}
.rank-list li{border-bottom:1px dashed var(--line)}
.rank-list li:last-child{border-bottom:none}
.rank-item{display:flex;gap:12px;align-items:baseline;padding:12px 4px;transition:padding-left .2s,background .2s}
.rank-item:hover{padding-left:10px;background:rgba(36,99,71,.04)}
.rank-no{
  font-family:var(--mono);font-size:15px;font-weight:600;
  color:var(--copper);min-width:24px;flex:none;
}
.rank-list li:nth-child(n+4) .rank-no{color:var(--muted);font-weight:400}
.rank-txt{
  flex:1;font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.55;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s;
}
.rank-item:hover .rank-txt{color:var(--copper)}
.rank-view{
  flex:none;font-family:var(--mono);font-size:12px;color:var(--muted);
  display:inline-flex;align-items:center;gap:4px;
}

/* 标签云 */
.side-tags{display:flex;flex-wrap:wrap;gap:9px}
.side-tags .tag{font-size:13px;padding:6px 13px}

/* ---------- 门户版区块间距压缩（仅首页，覆盖 style.css 的 section 72px） ---------- */
.portal-home section{padding:48px 0}
.portal-home .portal-focus{padding:26px 0 0}
.portal-home .portal-quick{padding:36px 0 8px}
.portal-home .portal-main{padding:26px 0 22px}
.pm-sec{padding:32px 0 26px}

/* 维修通栏卡片行底部间距归零（区块自身有 padding） */
#repair .gx-cards > [class*="col"]{margin-bottom:0}

/* 侧栏站点公告卡：条目均匀分布填满拉伸高度，虚线分隔，整行可点 */
.notice-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;justify-content:space-evenly;flex:1}
.notice-list li{min-width:0}
.notice-list li+li{border-top:1px dashed var(--line)}
.notice-list .n-item{
  display:flex;align-items:baseline;gap:10px;min-width:0;
  padding:7px 8px;margin:0 -6px;border-radius:9px;
  font-size:13.5px;line-height:1.6;color:var(--ink-2);text-decoration:none;
  transition:background .2s,color .2s;
}
.notice-list .n-item:hover{background:rgba(47,107,79,.06)}
.notice-list .n-item:hover .n-txt{color:var(--copper)}
.notice-list .n-item:hover .n-go{color:var(--copper);transform:translateX(2px)}
.notice-list .n-date{font-family:var(--mono);font-size:12px;color:var(--copper);flex:none}
.notice-list .n-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.notice-list .n-go{flex:none;font-family:var(--mono);font-size:14px;color:var(--muted);transition:color .2s,transform .2s}
.notice-list .n-new{
  display:inline-block;font-family:var(--mono);font-style:normal;
  font-size:10px;font-weight:600;letter-spacing:.08em;color:#fff;
  background:var(--copper);border-radius:5px;padding:1px 6px;margin-right:7px;vertical-align:2px;
}
.notice-btn{width:100%;padding:9px 16px;font-size:14px}

/* ---------- 视觉打磨 ---------- */
/* 快捷入口：图标按栏目配色（绿/蓝/铜金循环），悬停跟随变色 */
.q-card:nth-child(3n+1) .q-ico{color:var(--green);background:rgba(47,107,79,.09);border-color:rgba(47,107,79,.26)}
.q-card:nth-child(3n+1):hover{border-color:var(--green)}
.q-card:nth-child(3n+1):hover .q-ico{background:var(--green);color:#fff;box-shadow:0 8px 16px -8px rgba(47,107,79,.55)}
.q-card:nth-child(3n+2) .q-ico{color:var(--tech-blue);background:rgba(56,92,136,.09);border-color:rgba(56,92,136,.26)}
.q-card:nth-child(3n+2):hover{border-color:var(--tech-blue)}
.q-card:nth-child(3n+2):hover .q-ico{background:var(--tech-blue);color:#fff;box-shadow:0 8px 16px -8px rgba(56,92,136,.55)}
.q-card:nth-child(3n) .q-ico{color:var(--copper);background:rgba(180,120,47,.10);border-color:rgba(180,120,47,.30)}
.q-card:nth-child(3n):hover{border-color:var(--copper)}
.q-card:nth-child(3n):hover .q-ico{background:var(--copper);color:#fff;box-shadow:0 8px 16px -8px rgba(180,120,47,.55)}

/* 数据通栏：数字墨绿强调 */
.portal-facts b{color:var(--green)}

/* 侧栏卡悬停微浮 */
.side-card{transition:transform .22s ease,box-shadow .22s ease}
.side-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* 侧栏/最新发布头部图标底色块 */
.pf-side-head h2 i,.side-head h3 i{
  width:27px;height:27px;border-radius:8px;display:inline-grid;place-items:center;
  background:var(--green-soft);color:var(--green);font-size:13.5px;
}
.side-head h3 i{background:rgba(180,120,47,.10);color:var(--copper)}

/* 最新发布 LIVE 脉冲绿点 */
.pf-live{position:relative;padding-left:15px}
.pf-live::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:#3f9d6f;
  animation:pfPulse 2.2s ease-out infinite;
}
@keyframes pfPulse{
  0%{box-shadow:0 0 0 0 rgba(63,157,111,.45)}
  70%{box-shadow:0 0 0 8px rgba(63,157,111,0)}
  100%{box-shadow:0 0 0 0 rgba(63,157,111,0)}
}
@media (prefers-reduced-motion: reduce){
  .pf-live::before{animation:none}
}

/* ---------- 聚合区对齐与序号美化 ---------- */
/* 侧栏与主栏底部对齐：公告卡自动撑满剩余高度，按钮沉底 */
.pf-aside{height:100%}
.pf-aside .side-card:last-child{flex:1;display:flex;flex-direction:column}
.notice-btn{margin-top:auto}

/* 模块序号徽章：铜金小铭牌样式（仅门户首页） */
.portal-home .sec-title .idx{
  flex:none;width:36px;height:36px;display:inline-grid;place-items:center;
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--copper);
  letter-spacing:.02em;border-radius:11px;
  background:linear-gradient(135deg,rgba(180,120,47,.16),rgba(180,120,47,.05));
  border:1px solid rgba(180,120,47,.38);
  box-shadow:inset 0 0 0 2px #fff,0 4px 10px -6px rgba(180,120,47,.5);
}
/* 副标题与徽章后的标题文字对齐（36px 徽章 + 14px 间距） */
.portal-home .pm-sec .sec-sub{padding-left:50px}

/* ---------- 整体协调打磨 ---------- */
/* 聚合区主栏区块底色统一：去掉 #work 白底 / #articles 蓝底的色块拼接感，
   层次改由白卡阴影与 sec-head 分隔线承担（覆盖 style.css 的按 id 渐变底） */
.portal-home #work,.portal-home #articles{background:none}
/* 主栏末区块去底部内边距：最后一张文章白卡底线与右栏公告白卡底线齐平 */
.portal-home #articles.pm-sec{padding-bottom:0}

/* 技术文章行卡片化：与案例/维修卡同一视觉语言（白底圆角+悬停上浮铜金描边） */
.portal-home #articles .art{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-sm);padding:20px 22px;margin-bottom:14px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s,background .22s;
}
.portal-home #articles .art:first-child{border-top:1px solid var(--line)}
.portal-home #articles .art:hover{
  background:var(--card);transform:translateY(-3px);
  border-color:rgba(180,120,47,.45);box-shadow:var(--shadow-lg);
}
.portal-home #articles .art:last-child{margin-bottom:0}

/* 数据通栏图标色块化：与快捷入口三色呼应（绿/蓝/铜金循环） */
.portal-facts .fact-ico{
  width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center;
  font-size:19px;border:1px solid transparent;
}
.portal-facts .fact:nth-child(3n+1) .fact-ico{color:var(--green);background:rgba(47,107,79,.09);border-color:rgba(47,107,79,.24)}
.portal-facts .fact:nth-child(3n+2) .fact-ico{color:var(--tech-blue);background:rgba(56,92,136,.09);border-color:rgba(56,92,136,.24)}
.portal-facts .fact:nth-child(3n) .fact-ico{color:var(--copper);background:rgba(180,120,47,.10);border-color:rgba(180,120,47,.28)}

/* 焦点轮播图片统一色调：轻微降饱和，与纸感页面融合 */
.portal-focus .hero-carousel img{filter:saturate(.94) contrast(1.02)}

/* ---------- 精致度细节 ---------- */
/* 焦点区顶部极轻墨绿光晕，提升首屏质感（内容定位盖于其上） */
.portal-focus{position:relative}
.portal-focus::before{
  content:"";position:absolute;left:0;right:0;top:-70px;height:360px;pointer-events:none;
  background:radial-gradient(680px 300px at 28% 0%,rgba(47,107,79,.075),transparent 72%);
}
.portal-focus .pf-grid{position:relative}
/* 轮播与最新发布卡投影统一 */
.portal-focus .hero-carousel{box-shadow:var(--shadow-sm)}

/* 热门榜序号铭片化：前三名铜金、其余灰（呼应模块序号徽章） */
.rank-no{
  width:22px;height:22px;border-radius:7px;display:inline-grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:600;
  background:rgba(180,120,47,.12);color:var(--copper);min-width:0;
}
.rank-list li:nth-child(n+4) .rank-no{
  background:rgba(20,28,25,.05);color:var(--muted);font-weight:500;
}

/* 站长头像白色描边圈 */
.sa-avatar{border:2px solid #fff;box-shadow:0 0 0 1px var(--line),0 6px 14px -8px rgba(20,28,25,.35)}

/* ---------- 品牌双行：站名 + 网址（放大版，导航高度联动 68→76） ---------- */
.portal-home .site-navbar .container{height:76px}
body.portal-home{padding-top:75px}
.portal-home .site-navbar .navbar-brand{gap:12px}
.portal-home .site-navbar .brand-logo{width:44px;height:44px;border-radius:11px}
.portal-home .brand-txt{display:flex;flex-direction:column;line-height:1.12}
.portal-home .brand-txt .bt-name{font-size:20px;font-weight:700;letter-spacing:.3px;color:var(--ink)}
.portal-home .brand-txt .bt-url{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.03em;margin-top:2px}
.portal-home .navbar-brand:hover .bt-url{color:var(--copper)}
/* 移动端下拉菜单定位联动（style.css 固定 top:68px，导航加高后需同步） */
@media (max-width:991.98px){
  .portal-home .site-navbar .navbar-collapse{top:76px}
}

/* ---------- 点击交互动态 ---------- */
/* 涟漪宿主：可点卡片提供定位基准并裁剪涟漪范围 */
.portal-home :is(.q-card,.work-card,.repair-card,.diy-item,.side-card,#articles .art,.pf-list a){
  position:relative;overflow:hidden;
}
/* 点击涟漪（JS 委托注入 .click-ripple） */
.portal-home .click-ripple{
  position:absolute;border-radius:50%;pointer-events:none;z-index:4;
  background:radial-gradient(circle,rgba(184,127,62,.30) 0%,rgba(184,127,62,.13) 42%,transparent 72%);
  transform:scale(0);animation:pfRip .62s ease-out forwards;
}
@keyframes pfRip{to{transform:scale(1);opacity:0}}
/* 按压缩放反馈（覆盖 hover 位移，按下瞬间缩紧） */
.portal-home :is(.q-card,.work-card,.repair-card,.diy-item,#articles .art,.side-card,.pf-list a,.rank-item,.btn-site,.btn-auth,.tag):active{transform:scale(.97)}
/* 轮播箭头：悬停放大、按压收紧 */
.portal-home .hero-carousel .carousel-control-prev:hover,
.portal-home .hero-carousel .carousel-control-next:hover{transform:translateY(-50%) scale(1.08)}
.portal-home .hero-carousel .carousel-control-prev:active,
.portal-home .hero-carousel .carousel-control-next:active{transform:translateY(-50%) scale(.88)}
/* 指示点：悬停放大 */
.portal-home .hero-carousel .carousel-indicators li{transition:.24s}
.portal-home .hero-carousel .carousel-indicators li:hover{transform:scale(1.3)}
/* 注册按钮流光扫过 */
.portal-home .btn-auth-register{position:relative;overflow:hidden}
.portal-home .btn-auth-register::after{
  content:"";position:absolute;top:0;left:-90%;width:46%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);transition:left .55s ease;
}
.portal-home .btn-auth-register:hover::after{left:140%}
/* 减少动态偏好：关闭涟漪与按压 */
@media (prefers-reduced-motion:reduce){
  .portal-home .click-ripple{display:none}
  .portal-home :is(.q-card,.work-card,.repair-card,.diy-item,#articles .art,.side-card,.pf-list a,.rank-item,.btn-site,.btn-auth,.tag):active{transform:none}
}

/* ---------- 响应式 ---------- */
@media (max-width:1199.98px){
  .pf-grid{grid-template-columns:1fr 316px}
  .q-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:991.98px){
  .pf-grid{grid-template-columns:1fr}
  .portal-home .pm-sec .sec-sub{padding-left:0}
  .portal-focus .hero-carousel{height:340px;min-height:0}
  .pf-list li{flex:none}
  .pf-list a{padding:12px 20px}
  .pf-aside{margin-top:6px}
  .portal-quick{padding:30px 0 4px}
  .q-grid{grid-template-columns:repeat(2,1fr)}
  .pm-sec{padding:30px 0 24px}
}
@media (max-width:575.98px){
  .portal-home section{padding:38px 0}
  .portal-home .portal-focus{padding-top:18px}
  .pm-sec{padding:26px 0 20px}
  .portal-focus .hero-carousel{height:260px}
  .pf-date{display:none}
  .portal-stats{padding:22px 0}
  .portal-facts .fact{min-width:46%;padding:0 10px}
  /* 2x2 排列时第三格起行，去掉行首分隔线 */
  .portal-facts .fact:nth-child(3)::before{display:none}
  .portal-facts .fact:nth-child(-n+2){margin-bottom:18px}
  .portal-facts b{font-size:24px}
  .q-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .q-card{padding:18px 10px}
}