/* ============================================================
   学习资料平台首页样式  learn.css
   主色：靛蓝/紫  (#4f46e5 → #7c3aed)；强调色：琥珀 (#f59e0b)
   ============================================================ */
:root{
  --lp-primary:#4f46e5;
  --lp-primary-2:#7c3aed;
  --lp-primary-soft:#eef2ff;
  --lp-accent:#f59e0b;
  --lp-bg:#f5f6fb;
  --lp-card:#ffffff;
  --lp-text:#1f2937;
  --lp-muted:#6b7280;
  --lp-border:#eceef4;
}
body{
  background:var(--lp-bg);
  color:var(--lp-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Hero ---------- */
.lp-hero{
  position:relative;
  padding:84px 0 72px;
  color:#fff;
  overflow:hidden;
  background:linear-gradient(135deg,#4338ca 0%,#6d28d9 50%,#2563eb 100%);
}
.lp-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.14),transparent 42%),
    radial-gradient(circle at 85% 10%,rgba(255,255,255,.10),transparent 38%),
    radial-gradient(circle at 70% 90%,rgba(124,58,237,.35),transparent 50%);
}
.lp-hero .container{position:relative;z-index:2;}
.lp-hero .lp-badge{
  display:inline-block;padding:6px 16px;border-radius:30px;
  background:rgba(255,255,255,.16);font-size:.82rem;letter-spacing:1px;backdrop-filter:blur(4px);
}
.lp-hero h1{font-size:2.6rem;font-weight:800;margin:18px 0 10px;letter-spacing:1px;line-height:1.25;}
.lp-hero .lp-sub{font-size:1.05rem;opacity:.92;margin-bottom:6px;}

/* search */
.lp-search{max-width:660px;margin:30px auto 0;}
.lp-search form{
  display:flex;background:#fff;border-radius:50px;overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.22);
}
.lp-search input{
  flex:1;border:0;outline:0;height:56px;font-size:1rem;padding:0 26px;color:#111;background:transparent;
}
.lp-search .btn{
  border:0;background:var(--lp-accent);color:#fff;font-weight:700;font-size:1rem;
  padding:0 34px;transition:.2s;white-space:nowrap;cursor:pointer;
}
.lp-search .btn:hover{background:#d97706;}

/* chips */
.lp-chips{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.lp-chips a{
  color:#fff;background:rgba(255,255,255,.15);padding:8px 18px;border-radius:30px;
  font-size:.88rem;transition:.2s;backdrop-filter:blur(4px);
}
.lp-chips a:hover{background:rgba(255,255,255,.3);color:#fff;}

/* ---------- Stats ---------- */
.lp-stats{
  margin-top:-40px;position:relative;z-index:3;
  background:#fff;border-radius:18px;box-shadow:0 18px 44px rgba(31,41,55,.10);
  padding:28px 20px;display:flex;flex-wrap:wrap;
}
.lp-stats .item{flex:1 1 25%;text-align:center;padding:8px;border-right:1px solid var(--lp-border);}
.lp-stats .item:last-child{border-right:0;}
.lp-stats .num{font-size:1.9rem;font-weight:800;color:var(--lp-primary);line-height:1.1;}
.lp-stats .label{color:var(--lp-muted);font-size:.9rem;margin-top:6px;}

/* ---------- Section ---------- */
.lp-section{padding:64px 0;}
.lp-sec-head{text-align:center;margin-bottom:42px;}
.lp-sec-head .eyebrow{color:var(--lp-primary);font-weight:700;letter-spacing:2px;font-size:.8rem;}
.lp-sec-head h2{font-size:1.75rem;font-weight:800;margin:10px 0 8px;}
.lp-sec-head p{color:var(--lp-muted);margin:0;}

/* ---------- Category cards ---------- */
.lp-cat{
  display:block;background:var(--lp-card);border:1px solid var(--lp-border);border-radius:18px;
  padding:30px 20px;text-align:center;height:100%;transition:.25s;
}
.lp-cat:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(79,70,229,.16);border-color:transparent;}
.lp-cat .ico{
  width:66px;height:66px;border-radius:18px;margin:0 auto 16px;display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:26px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);transition:.25s;
}
.lp-cat:hover .ico{transform:scale(1.08) rotate(-4deg);}
.lp-cat h5{font-size:1.08rem;font-weight:700;margin:0 0 6px;}
.lp-cat .desc{color:var(--lp-muted);font-size:.85rem;min-height:2.4em;margin:0 0 10px;}
.lp-cat .count{
  display:inline-block;font-size:.8rem;color:var(--lp-primary);
  background:var(--lp-primary-soft);padding:4px 14px;border-radius:30px;
}

/* ---------- Material cards ---------- */
.lp-card{
  display:flex;flex-direction:column;background:var(--lp-card);border:1px solid var(--lp-border);
  border-radius:16px;overflow:hidden;height:100%;transition:.25s;
}
.lp-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(31,41,55,.12);border-color:transparent;}
.lp-card .thumb{height:178px;overflow:hidden;position:relative;background:linear-gradient(135deg,#6366f1,#8b5cf6);}
.lp-card .thumb img{width:100%;height:100%;object-fit:cover;transition:.45s;}
.lp-card:hover .thumb img{transform:scale(1.07);}
.lp-card .tag{
  position:absolute;top:12px;left:12px;color:#fff;font-size:.72rem;font-weight:700;
  padding:4px 12px;border-radius:30px;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);
}
.lp-card .tag.rec{background:var(--lp-accent);}
.lp-card .tag.top{background:#ef4444;}
.lp-card .body{flex:1;padding:16px 18px;display:flex;flex-direction:column;}
.lp-card h5{
  font-size:1.02rem;font-weight:700;line-height:1.45;margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lp-card .desc{
  color:var(--lp-muted);font-size:.85rem;line-height:1.65;margin:0 0 14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lp-card .meta{
  margin-top:auto;display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;color:var(--lp-muted);border-top:1px solid var(--lp-border);padding-top:12px;
}
.lp-card .meta i{margin-right:4px;}

/* ---------- Latest list ---------- */
.lp-list{background:#fff;border:1px solid var(--lp-border);border-radius:16px;overflow:hidden;}
.lp-list .row-item{
  display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--lp-border);transition:.2s;
}
.lp-list .row-item:last-child{border-bottom:0;}
.lp-list .row-item:hover{background:var(--lp-primary-soft);}
.lp-list .ri-thumb{
  width:96px;height:64px;border-radius:10px;overflow:hidden;flex:0 0 auto;margin-right:16px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
}
.lp-list .ri-thumb img{width:100%;height:100%;object-fit:cover;}
.lp-list .ri-main{flex:1;min-width:0;}
.lp-list .ri-main h6{font-size:.98rem;font-weight:700;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lp-list .ri-main .ri-desc{color:var(--lp-muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lp-list .ri-meta{color:var(--lp-muted);font-size:.76rem;white-space:nowrap;padding-left:12px;}

/* ---------- CTA ---------- */
.lp-cta{
  background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:20px;color:#fff;
  padding:46px 30px;text-align:center;margin:0 0 8px;
}
.lp-cta h3{font-size:1.6rem;font-weight:800;margin:0 0 10px;}
.lp-cta p{opacity:.92;margin:0 0 22px;}
.lp-cta .btn-cta{
  display:inline-block;background:#fff;color:var(--lp-primary);font-weight:700;
  padding:12px 34px;border-radius:50px;transition:.2s;
}
.lp-cta .btn-cta:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.2);}

/* ---------- view all ---------- */
.lp-viewall{text-align:center;margin-top:36px;}
.lp-viewall a{
  display:inline-block;color:var(--lp-primary);font-weight:600;border:1px solid var(--lp-primary);
  padding:10px 34px;border-radius:50px;transition:.2s;
}
.lp-viewall a:hover{background:var(--lp-primary);color:#fff;}

/* ---------- 三栏分类卡片（知识分享系统风格） ---------- */
.lp-cats{position:relative;z-index:5;padding:48px 0 8px;}
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.cat-block{
  position:relative;
  background:#e8eaed;
  border-radius:18px;
  padding:0 26px 26px;
  overflow:hidden;
  box-shadow:0 14px 36px rgba(15,23,42,.10);
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s;
}
.cat-block:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(15,23,42,.16);}

.cat-topbar{height:10px;margin:0 -26px 22px;width:calc(100% + 52px);}
.cat-blue .cat-topbar{background:#2563eb;}
.cat-gray  .cat-topbar{background:#64748b;}
.cat-orange .cat-topbar{background:#f59e0b;}

.cat-title{
  font-size:1.55rem;font-weight:800;margin:0 0 22px;
  text-align:center;letter-spacing:1px;
}
.cat-blue  .cat-title{color:#2563eb;}
.cat-gray  .cat-title{color:#64748b;}
.cat-orange .cat-title{color:#d97706;}

.cat-links{display:flex;flex-direction:column;gap:12px;}
.cat-links a{
  display:block;text-align:center;
  background:linear-gradient(180deg,#eff6ff,#dbeafe);
  color:#1e3a8a;border-radius:6px;
  padding:12px 10px;font-weight:600;font-size:.98rem;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.cat-links a:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(37,99,235,.18);
  background:linear-gradient(180deg,#dbeafe,#bfdbfe);
}

.cat-num{
  position:absolute;right:14px;bottom:6px;
  font-size:3.4rem;font-weight:900;line-height:1;
  font-family:"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  opacity:.22;letter-spacing:-2px;
}
.cat-blue  .cat-num{color:#2563eb;}
.cat-gray  .cat-num{color:#64748b;}
.cat-orange .cat-num{color:#f59e0b;}

/* ---------- responsive ---------- */
@media (max-width:991px){
  .cat-grid{grid-template-columns:1fr;gap:20px;}
  .lp-cats{margin-top:-30px;}
}
@media (max-width:575px){
  .lp-hero{padding:56px 0 48px;}
  .lp-hero h1{font-size:1.9rem;}
  .lp-search form{flex-direction:column;border-radius:16px;}
  .lp-search input{border-radius:0;text-align:center;}
  .lp-search .btn{border-radius:0;padding:14px;}
  .lp-stats .item{flex:1 1 50%;border-right:0;padding:14px 8px;}
  .lp-section{padding:44px 0;}
  .cat-block{padding:26px 22px;}
}