/* ==========================================================================
   掌域 GEO 官网 · 通用组件（components.css）
   导航 / 按钮 / pill 徽章 / 区块骨架 / 卡片 / FAQ 列表 / 深色页脚
   ========================================================================== */

/* ============================== 区块骨架 ============================== */
.section{padding-block:var(--section-gap)}
.section--soft{background:var(--color-surface-muted)}
.section--tint{background:linear-gradient(180deg,var(--color-surface-muted) 0%,var(--color-surface) 100%)}
.section-head{
  max-width:768px;
  margin:0 auto var(--space-64);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-16);
  text-align:center;
}
.section-desc{
  font-size:var(--font-size-lead);
  line-height:var(--lh-lead);
  color:var(--color-text-secondary);
  max-width:60ch;
}

/* ============================== 00 全局导航 ============================== */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--nav-h);
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:box-shadow .2s ease-out;
}
.nav.is-scrolled{box-shadow:var(--shadow-nav)}
.nav-inner{display:flex;align-items:center;height:100%;gap:var(--space-24)}
.nav-logo{
  display:inline-flex;
  align-items:center;
  gap:var(--space-8);
  min-width:64px;
  font-size:var(--font-size-h3);
  line-height:1;
  font-weight:var(--weight-bold);
}
.nav-logo-mark{width:26px;height:26px;flex:none;color:var(--color-primary)}
.nav-menu{display:flex;flex:1;align-items:center}
.nav-links{display:flex;flex:1;justify-content:center;gap:var(--space-32);list-style:none;margin:0}
.nav-link{
  display:inline-flex;
  align-items:center;
  height:var(--nav-h);
  position:relative;
  font-size:var(--font-size-caption);
  font-weight:var(--weight-medium);
  color:var(--color-text-secondary);
  transition:color .15s ease-out;
}
.nav-link:hover{color:var(--color-primary)}
/* 当前锚点：蓝字 + 2px 蓝下划线（滚动高亮由 main.js 写 aria-current="true"） */
.nav-link[aria-current]{color:var(--color-primary)}
.nav-link[aria-current]::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  border-radius:2px 2px 0 0;
  background:var(--color-primary);
}
.nav-cta{display:flex;align-items:center;gap:var(--space-16)}
.nav-login{font-size:var(--font-size-caption);font-weight:var(--weight-medium);color:var(--color-text-secondary);transition:color .15s ease-out}
.nav-login:hover{color:var(--color-primary)}
.nav-toggle{display:none;color:var(--color-text-primary)}

/* —— 移动端（<768）：汉堡 + 全屏抽屉 —— */
@media (max-width:767px){
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin-left:auto;
  }
  .nav-toggle .icon-close{display:none}
  .nav-toggle.is-open .icon-menu{display:none}
  .nav-toggle.is-open .icon-close{display:block}
  .nav-menu{
    position:fixed;
    top:var(--nav-h);
    left:0;right:0;bottom:0;
    z-index:49;
    display:flex;
    flex-direction:column;
    flex:none;
    padding:var(--space-24) var(--page-pad);
    background:var(--color-surface);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease-out,visibility .2s ease-out;
  }
  .nav-menu.is-open{opacity:1;visibility:visible}
  .nav-links{flex-direction:column;flex:none;gap:0}
  .nav-link{height:auto;padding-block:var(--space-16);font-size:var(--font-size-body)}
  .nav-link[aria-current]::after{width:24px;right:auto}
  .nav-cta{flex-direction:column;align-items:stretch;gap:var(--space-16);margin-top:auto;padding-top:var(--space-24)}
  .nav-login{font-size:var(--font-size-body);text-align:center;padding-block:var(--space-8)}
}
body.menu-open{overflow:hidden}

/* —— 无 JS 降级（<768）：导航链接以换行列表呈现 —— */
@media (max-width:767px){
  .no-js .nav{height:auto}
  .no-js .nav-inner{flex-wrap:wrap;gap:var(--space-8) var(--space-16);padding-block:var(--space-8)}
  .no-js .nav-toggle{display:none}
  .no-js .nav-menu{
    position:static;
    flex:1 1 100%;
    opacity:1;
    visibility:visible;
    padding:0;
    background:none;
  }
  .no-js .nav-links{flex-direction:row;flex-wrap:wrap;gap:var(--space-4) var(--space-16)}
  .no-js .nav-link{height:auto;padding-block:var(--space-4);font-size:var(--font-size-caption)}
  .no-js .nav-cta{flex-direction:row;align-items:center;margin-top:var(--space-8);padding-top:0}
}

/* ============================== 按钮 ============================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding-inline:var(--space-20);
  border-radius:var(--radius-12);
  font-size:15px;
  font-weight:var(--weight-medium);
  line-height:1;
  text-align:center;
  border:1px solid transparent;
  transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out,transform .15s ease-out;
}
.btn-primary{
  background:var(--color-primary);
  color:#fff;
  box-shadow:var(--shadow-btn);
}
.btn-primary:hover{
  background:var(--color-primary-strong);
  transform:translateY(-1px);
}
.btn-secondary{
  background:var(--color-surface);
  color:var(--color-primary);
  border-color:var(--color-border);
}
.btn-secondary:hover{
  border-color:var(--color-primary);
  background:var(--color-primary-soft);
}
.btn-lg{height:52px;padding-inline:var(--space-32);font-size:var(--font-size-body)}
.btn-sm{height:36px;padding-inline:var(--space-16);font-size:var(--font-size-caption)}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-16)}
.btn[disabled],.btn.is-disabled{
  background:var(--color-surface-muted);
  color:var(--color-text-tertiary);
  border-color:transparent;
  box-shadow:none;
  cursor:not-allowed;
}
@media (max-width:767px){
  .btn{height:48px}
  .btn-lg{height:52px}
  .btn-sm{height:40px}
}

/* ============================== pill 徽章 ============================== */
.pill-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:28px;
  padding-inline:var(--space-12);
  border-radius:var(--radius-full);
  background:var(--color-primary-soft);
  color:var(--color-primary);
  font-size:13px;
  font-weight:var(--weight-medium);
  line-height:1;
  white-space:nowrap;
}
.pill-badge svg{width:16px;height:16px;flex:none}
a.pill-badge{transition:background-color .15s ease-out}
a.pill-badge:hover{background:rgba(22,119,255,.18)}
/* 编号徽章（模块 01–04 / 课堂 01–08） */
.pill-counter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:26px;
  padding-inline:var(--space-8);
  border-radius:var(--radius-full);
  background:var(--color-primary-soft);
  color:var(--color-primary);
  font-size:var(--font-size-xs);
  font-weight:var(--weight-semibold);
  line-height:1;
  font-variant-numeric:tabular-nums;
}

/* ============================== 卡片 ============================== */
.card{
  background:var(--color-surface);
  border-radius:var(--radius-12);
  padding:var(--card-pad);
  box-shadow:var(--shadow-card);
}
/* 功能卡 / 学习课堂文章卡：悬停上浮 */
.feature-card,.article-card{
  background:var(--color-surface);
  border-radius:var(--radius-12);
  padding:var(--card-pad);
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:transform .2s ease-out,box-shadow .2s ease-out;
}
.feature-card:hover,.article-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card-hover);
}
.feature-icon{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-12);
  background:var(--color-primary-soft);
  color:var(--color-primary);
  flex:none;
}
.feature-icon svg{width:24px;height:24px}
.feature-card .card-title{margin-top:var(--space-20)}
.feature-card .card-desc{margin-top:var(--space-8)}
.card-desc{
  font-size:var(--font-size-caption);
  line-height:var(--lh-caption);
  color:var(--color-text-secondary);
}
.chip{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding-inline:var(--space-12);
  border:1px dashed var(--color-border);
  border-radius:var(--radius-6);
  font-size:var(--font-size-xs);
  line-height:1;
  color:var(--color-text-secondary);
}

/* ============================== 06 FAQ 手风琴（问题常显、答案默认折叠） ============================== */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-16);
  max-width:880px;
  margin-inline:auto;
}
.faq-item{
  background:var(--color-surface);
  border-radius:var(--radius-12);
  box-shadow:var(--shadow-card);
}
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-16);
  padding:var(--space-20) var(--space-32);
  list-style:none;
  cursor:pointer;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{
  font-size:1.125rem;
  line-height:1.5;
  font-weight:var(--weight-semibold);
  color:var(--color-text-primary);
}
.faq-icon{flex:none;color:var(--color-text-tertiary);transition:transform .2s ease-out}
.faq-item[open] .faq-icon{transform:rotate(180deg)}
/* 高度自适应动画：0fr → 1fr（老浏览器直接展开，属渐进增强） */
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease-out}
.faq-item[open] .faq-body{grid-template-rows:1fr}
.faq-body-inner{overflow:hidden}
.faq-a{
  padding:0 var(--space-32) var(--space-24);
  font-size:var(--font-size-body);
  line-height:var(--lh-body);
  color:var(--color-text-secondary);
  max-width:72ch;
}
@media (max-width:767px){
  .faq-item summary{padding:var(--space-16) var(--space-20)}
  .faq-a{padding:0 var(--space-20) var(--space-20)}
}

/* ============================== 07 深色页脚 ============================== */
.footer{
  background:var(--color-surface-strong);
  color:var(--color-on-strong);
  padding:var(--space-64) 0 var(--space-24);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr auto;
  gap:var(--space-48);
}
.footer-brand{display:flex;flex-direction:column;gap:var(--space-12)}
.footer-logo{
  display:inline-flex;
  align-items:center;
  gap:var(--space-8);
  font-size:var(--font-size-h3);
  line-height:1;
  font-weight:var(--weight-bold);
  color:var(--color-on-strong);
}
.footer-logo .nav-logo-mark{color:var(--color-on-strong-link)}
.footer-slogan{font-size:var(--font-size-caption);color:var(--color-on-strong-soft)}
.footer-col{display:flex;flex-direction:column;gap:var(--space-16)}
.footer-col-title{font-size:var(--font-size-caption);font-weight:var(--weight-semibold);color:var(--color-on-strong)}
.footer-links{display:flex;flex-direction:column;gap:var(--space-12);list-style:none;margin:0}
.footer-link{font-size:var(--font-size-caption);color:var(--color-on-strong-soft);transition:color .15s ease-out}
.footer-link:hover{color:var(--color-on-strong-link)}
.footer-qr{display:flex;gap:var(--space-16)}
.footer-qr-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-8)}
.footer-qr-box{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(255,255,255,.24);
  border-radius:var(--radius-8);
  font-size:var(--font-size-xs);
  color:var(--color-on-strong-soft);
}
.footer-qr-label{font-size:var(--font-size-xs);color:var(--color-on-strong-soft)}
.footer-legal{
  margin-top:var(--space-48);
  border-top:1px solid var(--color-on-strong-line);
  padding-top:var(--space-24);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-8) var(--space-24);
  font-size:var(--font-size-caption);
  color:var(--color-on-strong-soft);
}
.footer-legal a{transition:color .15s ease-out}
.footer-legal a:hover{color:var(--color-on-strong-link)}
@media (max-width:767px){
  .footer{padding-top:var(--space-48)}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-32)}
}

/* ============================== 示意标注 ============================== */
.demo-note{
  font-size:var(--font-size-xs);
  line-height:var(--lh-xs);
  color:var(--color-text-tertiary);
}

/* ============================== 减少动效 ============================== */
/* 必须排在上述 hover 规则之后：同优先级 (0,2,0) 时按加载顺序取胜 */
@media (prefers-reduced-motion:reduce){
  .feature-card:hover,
  .article-card:hover{transform:none}
}