/* ==========================================================================
   多彩编程 mzph.cn — 首页专属圆形嵌套布局
   独创：同心圆轨道 hero + 知识泡泡簇 + 圆形语言环
   ========================================================================== */

/* ---------- Hero：同心圆嵌套 ---------- */
.hero {
  position: relative; padding: calc(var(--nav-h) + 40px) 0 90px; overflow: hidden;
  background: radial-gradient(circle at 70% 30%, var(--sun-soft) 0%, transparent 50%),
              radial-gradient(circle at 20% 70%, var(--sky-soft) 0%, transparent 45%),
              var(--bg);
}
.hero .blob-h1 { width: 300px; height: 300px; background: var(--mint); top: 10%; left: -80px; opacity: .35; }
.hero .blob-h2 { width: 240px; height: 240px; background: var(--sun); bottom: 5%; right: -60px; opacity: .4; }

.hero-inner {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: center;
}
.hero-text { max-width: 560px; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px 7px 8px; border-radius: var(--r-full);
  background: var(--paper); box-shadow: var(--shadow-sm); font-size: 12.5px; font-weight: 700; color: var(--mint-deep); margin-bottom: 22px;
}
.hero-tag .pip { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--mint), var(--sun), var(--sky)); }
.hero-text h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.18; margin-bottom: 20px; }
.hero-text h1 .grad {
  background: linear-gradient(120deg, var(--mint-deep) 0%, var(--coral) 50%, var(--sky-deep) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { font-size: 16.5px; margin-bottom: 30px; max-width: 480px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.hero-mini-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.hero-mini-stats .ms { display: flex; flex-direction: column; }
.hero-mini-stats .ms strong { font-size: 1.7rem; font-weight: 900; color: var(--ink); line-height: 1; }
.hero-mini-stats .ms span { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }

/* 圆形嵌套视觉：大圆含中圆含小圆 + 轨道语言徽章 */
.hero-visual { position: relative; display: grid; place-items: center; min-height: 460px; }
.hero-photo {
  width: 320px; height: 320px; border-radius: 50%; overflow: hidden; position: relative; z-index: 3;
  box-shadow: var(--shadow-lg); border: 8px solid var(--paper);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-orbit-1 {
  position: absolute; width: 440px; height: 440px; border-radius: 50%; z-index: 1;
  border: 2px dashed rgba(127,207,168,.4); animation: spin-slow 50s linear infinite;
}
.hero-orbit-2 {
  position: absolute; width: 560px; height: 560px; border-radius: 50%; z-index: 1;
  border: 2px dotted rgba(122,193,230,.35); animation: spin-slow 70s linear infinite reverse;
}
/* 轨道上的语言泡泡 */
.orbit-lang {
  position: absolute; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); box-shadow: var(--shadow-md); font-size: 11px; font-weight: 800; z-index: 4;
}
.orbit-lang .emoji { font-size: 18px; }
.ol-1 { top: 8%; left: 50%; transform: translateX(-50%); }
.ol-2 { top: 50%; right: -2%; transform: translateY(-50%); }
.ol-3 { bottom: 8%; left: 50%; transform: translateX(-50%); }
.ol-4 { top: 50%; left: -2%; transform: translateY(-50%); }
.ol-5 { top: 18%; right: 8%; }
.ol-6 { bottom: 18%; left: 8%; }
/* 小装饰圆 */
.hero-deco {
  position: absolute; border-radius: 50%; z-index: 2;
}
.hd-1 { width: 56px; height: 56px; background: var(--sun); top: 6%; right: 14%; box-shadow: var(--shadow-sm); }
.hd-2 { width: 40px; height: 40px; background: var(--sky); bottom: 12%; right: 6%; }
.hd-3 { width: 48px; height: 48px; background: var(--mint); bottom: 4%; left: 22%; box-shadow: var(--shadow-sm); }
.hd-4 { width: 32px; height: 32px; background: var(--lilac); top: 22%; left: 4%; }

/* ---------- 知识分类：圆形泡泡簇（大圆+小圆嵌套） ---------- */
.know-bubble-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.bubble-card {
  position: relative; border-radius: var(--r-xl); padding: 30px 22px; text-align: center;
  background: var(--paper); box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  transition: all .35s; overflow: hidden;
}
.bubble-card::before {
  content: ""; position: absolute; top: -40px; right: -40px; width: 110px; height: 110px; border-radius: 50%; opacity: .35; transition: transform .4s;
}
.bubble-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }
.bubble-card:hover::before { transform: scale(1.4); }
.bc-html::before { background: #FAD9CC; }
.bc-css::before { background: #D6E8F7; }
.bc-js::before { background: #FFF1C2; }
.bc-vue::before { background: #D4F0E1; }
.bc-react::before { background: #D8EEF8; }
.bc-ng::before { background: #F5D9E4; }
.bc-py::before { background: #D8E4F2; }
.bc-php::before { background: #E0DAF0; }
.bc-c::before { background: #DCE0F0; }
.bc-node::before { background: #E0EDD8; }
.bubble-ico {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center;
  position: relative; z-index: 1; font-size: 22px; font-weight: 900; color: #fff;
}
.bc-html .bubble-ico { background: linear-gradient(135deg,#FF8B5C,#E8704A); }
.bc-css .bubble-ico { background: linear-gradient(135deg,#5BA8E8,#4A90D9); }
.bc-js .bubble-ico { background: linear-gradient(135deg,#FFD66B,#F0C84A); color:#5C4500; }
.bc-vue .bubble-ico { background: linear-gradient(135deg,#42B883,#35A572); }
.bc-react .bubble-ico { background: linear-gradient(135deg,#61DAFB,#4FC5E8); color:#08465C; }
.bc-ng .bubble-ico { background: linear-gradient(135deg,#D94B7A,#C9366B); }
.bc-py .bubble-ico { background: linear-gradient(135deg,#4A8FBF,#3776AB); }
.bc-php .bubble-ico { background: linear-gradient(135deg,#8B85C9,#777BB4); }
.bc-c .bubble-ico { background: linear-gradient(135deg,#6B7BD1,#5C6BC0); }
.bc-node .bubble-ico { background: linear-gradient(135deg,#7FC063,#6FAE5E); }
.bubble-card h3 { font-size: 1.08rem; margin-bottom: 6px; position: relative; z-index: 1; }
.bubble-card .bc-count { font-size: 12px; color: var(--ink-faint); position: relative; z-index: 1; margin-bottom: 12px; }
.bubble-card .bc-link { font-size: 12.5px; font-weight: 700; color: var(--coral); position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; }

/* ---------- 核心优势：圆形重叠卡 ---------- */
.adv-orbit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.adv-disc {
  position: relative; border-radius: var(--r-lg); padding: 34px 24px; background: var(--paper);
  box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: all .35s; text-align: center;
}
.adv-disc:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--shadow-md); }
.adv-disc .adv-no {
  position: absolute; top: 16px; right: 20px; font-size: 3rem; font-weight: 900; color: var(--mint-soft); line-height: 1;
}
.adv-disc:nth-child(2) .adv-no { color: var(--sun-soft); }
.adv-disc:nth-child(3) .adv-no { color: var(--sky-soft); }
.adv-disc:nth-child(4) .adv-no { color: #FFE0D4; }
.adv-ico {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px;
  background: var(--mint-soft); color: var(--mint-deep); position: relative; z-index: 1;
}
.adv-disc:nth-child(2) .adv-ico { background: var(--sun-soft); color: #C99A1E; }
.adv-disc:nth-child(3) .adv-ico { background: var(--sky-soft); color: var(--sky-deep); }
.adv-disc:nth-child(4) .adv-ico { background: #FFE7DE; color: var(--coral); }
.adv-disc h3 { font-size: 1.1rem; margin-bottom: 10px; }
.adv-disc p { font-size: 13.5px; }

/* ---------- 学习路径圆环 ---------- */
.path-rings { display: flex; flex-direction: column; gap: 18px; }
.path-ring {
  display: flex; align-items: center; gap: 20px; padding: 22px 26px; border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: all .3s;
}
.path-ring:hover { transform: translateX(8px); box-shadow: var(--shadow-md); }
.path-stage {
  width: 70px; height: 70px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; text-align: center;
  background: linear-gradient(135deg, var(--mint), var(--mint-deep)); color: #fff; box-shadow: var(--shadow-sm);
}
.path-ring:nth-child(2) .path-stage { background: linear-gradient(135deg, var(--sun), var(--sun-deep)); color: #6B4F00; }
.path-ring:nth-child(3) .path-stage { background: linear-gradient(135deg, var(--sky), var(--sky-deep)); }
.path-ring:nth-child(4) .path-stage { background: linear-gradient(135deg, var(--coral), var(--coral-deep)); }
.path-stage strong { font-size: 1.4rem; line-height: 1; }
.path-stage span { font-size: 10px; letter-spacing: .08em; }
.path-body { flex: 1; }
.path-body h4 { font-size: 1.08rem; margin-bottom: 5px; }
.path-body p { font-size: 13.5px; }
.path-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.path-tags span { padding: 3px 10px; border-radius: var(--r-full); font-size: 11.5px; background: var(--mint-soft); color: var(--mint-deep); font-weight: 600; }

/* ---------- 首页文章列表圆形缩略 ---------- */
.home-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hn-card {
  background: var(--paper); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid var(--line); transition: all .35s; display: flex; flex-direction: column;
}
.hn-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.hn-thumb { height: 170px; overflow: hidden; position: relative; }
.hn-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hn-card:hover .hn-thumb img { transform: scale(1.08); }
.hn-thumb .hn-cat {
  position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 700; color: #fff; background: rgba(255,154,118,.92); backdrop-filter: blur(4px);
}
.hn-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.hn-body h4 { font-size: 1.05rem; margin-bottom: 9px; line-height: 1.45; transition: color .25s; }
.hn-card:hover .hn-body h4 { color: var(--coral); }
.hn-body p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; }
.hn-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-faint); margin-top: auto; }
.hn-foot .read { color: var(--coral); font-weight: 700; }

/* 横向列表式（首页下方资讯） */
.home-news-list { display: flex; flex-direction: column; gap: 18px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { min-height: 380px; }
  .hero-photo { width: 260px; height: 260px; }
  .hero-orbit-1 { width: 360px; height: 360px; }
  .hero-orbit-2 { width: 460px; height: 460px; }
  .know-bubble-grid { grid-template-columns: repeat(3, 1fr); }
  .adv-orbit { grid-template-columns: repeat(2, 1fr); }
  .home-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hero-visual { min-height: 320px; }
  .hero-photo { width: 220px; height: 220px; }
  .hero-orbit-1 { width: 300px; height: 300px; }
  .hero-orbit-2 { width: 380px; height: 380px; }
  .orbit-lang { width: 52px; height: 52px; }
  .know-bubble-grid { grid-template-columns: repeat(2, 1fr); }
  .home-news-grid { grid-template-columns: 1fr; }
  .path-ring { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .hero-photo { width: 180px; height: 180px; }
  .hero-orbit-1 { width: 250px; height: 250px; }
  .hero-orbit-2 { display: none; }
  .know-bubble-grid { grid-template-columns: 1fr; }
  .adv-orbit { grid-template-columns: 1fr; }
}