/* ============================================================
   安述心理网 · 通用组件
   ============================================================ */

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:var(--radius-sm); text-align:center;
  font-weight:500; line-height:1.5; text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.btn:active{ transform:translateY(1px); }
.btn[disabled],.btn.is-disabled{ cursor:not-allowed; opacity:.55; }
.btn--primary{ background:var(--primary-600); color:#fff; }
.btn--primary:hover{ background:var(--primary-700); color:#fff; }
.btn--secondary{ background:var(--bg-card); color:var(--primary-600);
  border:1.5px solid var(--primary-600); }
.btn--secondary:hover{ color:var(--primary-700); border-color:var(--primary-700); }
.btn--text{ background:none; color:var(--primary-600); padding:0; }
.btn--text:hover{ color:var(--primary-700); }
.btn--accent{ background:var(--accent-500); color:#fff; }
.btn--accent:hover{ background:var(--accent-600); color:#fff; }
.btn--crisis{ background:var(--bg-card); color:var(--danger); border:1.5px solid var(--danger); }
.btn--crisis:hover{ color:#a13c32; border-color:#a13c32; }
.btn--l{ height:48px; padding:0 28px; font-size:16px; border-radius:var(--radius-sm); }
.btn--m{ height:40px; padding:0 20px; font-size:14px; }
.btn--s{ height:32px; padding:0 16px; font-size:14px; }
.btn--block{ display:flex; width:100%; }

/* ---------- Header / 导航 ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--header-h); background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled{ box-shadow:var(--shadow-3); }
.site-header .header-inner{
  max-width:var(--container); margin:0 auto; height:100%;
  padding:0 24px; display:flex; align-items:center; gap:24px;
}
.logo-link{ display:flex; align-items:center; flex:none; text-decoration:none; gap:10px; }
.logo-link img{ height:40px; width:auto; }
.logo-icon{
  width:44px; height:44px; flex:none;
  border-radius:8px; background:var(--primary-50);
  padding:2px; box-sizing:border-box;
}
.logo-text{ display:flex; flex-direction:column; line-height:1.1; }
.logo-title{
  font-size:20px; font-weight:700; color:var(--primary-700);
  letter-spacing:.5px;
}
.logo-sub{ font-size:12px; color:var(--text-3); margin-top:3px; letter-spacing:.3px; }
.main-nav{ display:flex; align-items:center; gap:4px; margin:0 auto; }
.main-nav a{
  position:relative; display:flex; align-items:center; height:var(--header-h);
  padding:0 12px; font-size:15px; color:var(--text-2);
}
.main-nav a:hover{ color:var(--primary-600); }
.main-nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:12px;
  height:2px; background:var(--primary-600); border-radius:1px;
  transform:scaleX(0); transition:transform var(--dur-base) var(--ease-standard);
}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.main-nav a[aria-current="page"]{ color:var(--primary-600); font-weight:600; }
.header-cta{ flex:none; }
.header-search{ position:relative; flex:none; }
.header-search .search-pop{
  position:absolute; right:0; top:calc(100% + 8px); width:220px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-2); padding:8px;
  display:none;
}
.header-search.is-open .search-pop{ display:block; }
.header-search input{
  width:100%; height:36px; border:1px solid var(--border-strong);
  border-radius:6px; padding:0 10px; font-size:14px; background:var(--bg-card);
}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:0; background:none; color:var(--text-2);
  border-radius:var(--radius-sm);
}
.icon-btn:hover{ color:var(--primary-600); background:var(--primary-50); }
.nav-toggle{ display:none; }

/* 移动端抽屉 */
.drawer-mask{
  position:fixed; inset:0; z-index:1050; background:rgba(28,54,59,.45);
  opacity:0; visibility:hidden; transition:opacity var(--dur-slow) var(--ease-standard);
}
/* 裁切层：固定于视口，关闭时不拦截事件；关闭动画结束后抽屉 display:none，彻底杜绝横向溢出 */
.drawer-clip{
  position:fixed; inset:0; z-index:1100; overflow:hidden;
  pointer-events:none;
}
.drawer{
  position:absolute; top:0; right:0; bottom:0; width:min(320px,86vw);
  background:var(--bg-card); transform:translateX(100%);
  transition:transform var(--dur-slow) var(--ease-standard);
  display:flex; flex-direction:column; box-shadow:var(--shadow-3);
}
.drawer-clip.is-open{ pointer-events:auto; }
.drawer-clip.is-open .drawer{ transform:none; }
.drawer-clip.is-closing .drawer{ transform:translateX(100%); }
.drawer-clip:not(.is-open):not(.is-closing) .drawer{ display:none; }
body.drawer-open{ overflow:hidden; }
body.drawer-open .drawer-mask{ opacity:1; visibility:visible; }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); padding:0 16px; border-bottom:1px solid var(--border);
}
.drawer-nav{ flex:1; overflow-y:auto; }
.drawer-nav a{
  display:flex; align-items:center; justify-content:space-between;
  min-height:52px; padding:0 20px; font-size:16px; color:var(--text-1);
  border-bottom:1px solid var(--border);
}
.drawer-nav a:hover,.drawer-nav a[aria-current="page"]{ color:var(--primary-600); }
.drawer-nav a[aria-current="page"]{ font-weight:600; }
.drawer-foot{ padding:16px 20px 24px; display:grid; gap:12px; }

/* 移动端底部快捷条 */
.mobile-quickbar{
  position:fixed; left:0; right:0; bottom:0; z-index:500;
  height:var(--mobile-bar-h); background:var(--bg-card);
  box-shadow:0 -2px 12px rgba(28,54,59,.08);
  display:none; align-items:stretch;
  transition:transform var(--dur-base) var(--ease-standard);
}
.mobile-quickbar.is-hidden{ transform:translateY(100%); }
.mobile-quickbar .qb-tel,.mobile-quickbar .qb-book{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:15px; text-decoration:none;
}
.mobile-quickbar .qb-tel{ flex:1; color:var(--primary-700); font-weight:600; }
.mobile-quickbar .qb-book{ flex:1.2; background:var(--primary-600); color:#fff; font-weight:600; }
.mobile-quickbar .qb-book:hover{ background:var(--primary-700); color:#fff; }

@media (max-width:1023px){
  .main-nav,.header-cta{ display:none; }
  .nav-toggle{ display:inline-flex; flex:none; }
  .mobile-quickbar{ display:flex; }
  body{ padding-bottom:var(--mobile-bar-h); }
  .site-header .header-inner{ padding:0 16px; gap:16px; }
  .logo-link{ min-width:0; }
  .logo-link img{ height:32px; }
}

/* ---------- 面包屑 ---------- */
.breadcrumb{ padding:16px 0 0; font-size:13px; color:var(--text-3); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.breadcrumb li{ display:flex; align-items:center; gap:6px; }
.breadcrumb li+li::before{ content:"/"; color:var(--border-strong); }
.breadcrumb a{ color:var(--text-3); }
.breadcrumb a:hover{ color:var(--primary-600); }
.breadcrumb [aria-current="page"]{ color:var(--text-2); }

/* ---------- 标签 ---------- */
.tag{
  display:inline-flex; align-items:center; padding:3px 12px;
  border-radius:var(--radius-pill); font-size:12px; line-height:1.6;
  background:var(--primary-100); color:var(--primary-700);
}
a.tag:hover{ background:var(--primary-200); }
.tag--outline{
  background:none; border:1px solid var(--border-strong); color:var(--text-2); padding:2px 10px;
}
.tag--demo{ background:var(--accent-50); color:var(--accent-600); border:1px dashed var(--accent-300); }

/* ---------- 文章卡片 ---------- */
.card-grid{ display:grid; gap:32px; grid-template-columns:repeat(3,1fr); }
/* 列表主栏双列（≤1023 / ≤767 由 pages.css 媒体查询统一降为 2 列 / 1 列） */
.card-grid--2{ grid-template-columns:repeat(2,1fr); }
.article-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-1); overflow:hidden;
  transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.article-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.article-card .card-cover{
  aspect-ratio:16/9; overflow:hidden; position:relative;
  background:linear-gradient(135deg,var(--primary-50),var(--primary-100));
}
.article-card .card-cover img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-base) var(--ease-standard);
}
.article-card:hover .card-cover img{ transform:scale(1.06); }
.article-card .card-body{
  display:flex; flex-direction:column; gap:10px; flex:1; padding:20px;
}
.article-card h3{ font-size:16px; line-height:1.6; color:var(--text-1);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.article-card:hover h3{ color:var(--primary-700); }
.article-card .card-summary{
  font-size:14px; line-height:1.7; color:var(--text-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.article-card .card-meta{
  margin-top:auto; display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--text-3);
}
.avatar-dot{
  width:24px; height:24px; border-radius:var(--radius-pill); flex:none;
  background:var(--primary-600); color:#fff; font-size:12px;
  display:inline-flex; align-items:center; justify-content:center;
}
.article-card .card-meta .meta-divider{ color:var(--border-strong); }

/* ---------- 分类导航卡 ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.cat-card{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:28px 16px; border-radius:var(--radius-md); text-align:center;
  background:var(--primary-50); color:var(--text-1);
  transition:background-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.cat-card:nth-child(even){ background:var(--accent-50); }
.cat-card .icon{ width:36px; height:36px; color:var(--primary-600);
  transition:transform var(--dur-base) var(--ease-standard); }
.cat-card:nth-child(even) .icon{ color:var(--accent-500); }
.cat-card:hover{ background:var(--primary-100); }
.cat-card:hover .icon{ transform:translateY(-3px); }
.cat-card .cat-name{ font-size:17px; font-weight:600; }
.cat-card .cat-count{ font-size:13px; color:var(--text-3); }

/* ---------- CTA 转化区块 ---------- */
.cta-banner{
  background:var(--accent-50); border-radius:var(--radius-lg);
  padding:32px 40px; display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.cta-banner .cta-text{ flex:1 1 320px; }
.cta-banner h2{ font-size:22px; margin-bottom:8px; }
.cta-banner p{ color:var(--text-2); font-size:15px; }
.cta-banner .cta-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- 危机提示条 ---------- */
.crisis-note{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--crisis-bg); border:1px solid var(--crisis-border);
  border-radius:var(--radius-md); padding:16px 20px;
  color:var(--crisis-text); font-size:14px; line-height:1.7;
}
.crisis-note .icon{ color:var(--crisis-text); margin-top:2px; }
.crisis-note strong{ font-weight:600; }
.crisis-note a{ color:var(--crisis-text); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.crisis-note--footer{ background:rgba(247,245,240,.08); border-color:rgba(247,245,240,.18);
  color:rgba(247,245,240,.78); padding:12px 16px; font-size:13px; }
.crisis-note--footer a{ color:#F2E2CF; }
.crisis-note--footer .icon{ color:#F2E2CF; }

/* ---------- 科普免责声明 ---------- */
.disclaimer-note{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--primary-50); border-radius:var(--radius-sm);
  padding:14px 18px; font-size:13px; line-height:1.7; color:var(--text-2);
}
.disclaimer-note .icon{ width:18px; height:18px; color:var(--primary-500); margin-top:3px; }

/* ---------- 表单 ---------- */
.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.form-field label{ font-size:14px; font-weight:500; color:var(--text-1); }
.form-field label .req{ color:var(--danger); margin-left:2px; }
.form-field input[type="text"],.form-field input[type="tel"],.form-field textarea,.form-field select{
  width:100%; min-height:48px; background:var(--bg-card);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:12px 14px; font-size:16px; line-height:1.6;
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.form-field textarea{ min-height:120px; resize:vertical; }
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
  outline:none; border-color:var(--primary-600); box-shadow:var(--shadow-focus);
}
.form-field .field-msg{ display:none; align-items:center; gap:4px;
  font-size:12px; color:var(--danger); }
.form-field.has-error input,.form-field.has-error textarea,.form-field.has-error select{
  border-color:var(--danger); }
.form-field.has-error .field-msg{ display:flex; }
.form-field.is-valid input,.form-field.is-valid textarea{ border-color:var(--success); }
.form-hint{ font-size:12px; color:var(--text-3); }
.form-check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--text-2); }
.form-check input[type="checkbox"]{
  width:18px; height:18px; margin-top:3px; accent-color:var(--primary-600); flex:none;
}
.form-check.has-error{ color:var(--danger); }
.form-check.has-error a{ color:var(--danger); }
.form-success{
  display:none; text-align:center; padding:16px 0 8px;
}
.form-success.is-visible{ display:block; }
.form-success .success-icon{
  width:56px; height:56px; margin:0 auto 16px; border-radius:var(--radius-pill);
  background:rgba(61,139,99,.12); color:var(--success);
  display:flex; align-items:center; justify-content:center;
}
.form-success h3{ margin-bottom:8px; }
.form-success p{ font-size:14px; color:var(--text-2); margin-bottom:12px; }
.form-success .crisis-mini{ font-size:12px; color:var(--text-3); }
.form-success .crisis-mini a{ color:var(--danger); font-weight:600; }

/* ---------- 页脚 ---------- */
.site-footer{
  margin-top:64px; background:var(--primary-800);
  color:rgba(247,245,240,.78); font-size:13px;
}
.footer-main{
  max-width:var(--container); margin:0 auto; padding:56px 24px 32px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px;
}
/* logo 为深青线条+透明底，深色页脚上需浅色圆形底托保证清晰可辨 */
.footer-brand img{
  height:56px; width:56px; margin-bottom:16px; padding:5px; box-sizing:border-box;
  background:#FFFFFF; border-radius:50%;
  box-shadow:0 0 0 1px rgba(247,245,240,.28);
}
.footer-brand .slogan{ font-size:14px; color:rgba(247,245,240,.9); margin-bottom:8px; }
.site-footer h3{ font-size:14px; color:#fff; font-weight:600; margin-bottom:16px; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{ color:rgba(247,245,240,.78); }
.footer-col a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer-col .contact-line{ display:flex; gap:8px; align-items:flex-start; color:#F7F5F0; }
.footer-col .contact-line a,
.footer-col .contact-line span{ color:#F7F5F0; }
.footer-col .contact-line a:hover{ color:#fff; }
.footer-col .contact-line .icon{ width:16px; height:16px; margin-top:4px; color:#F2E2CF; flex:none; }
.qr-placeholder{
  width:120px; height:120px; background:var(--bg-card);
  border:1px dashed var(--border-strong); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:12px; color:var(--text-3); padding:8px; line-height:1.6;
}
.footer-crisis{ max-width:var(--container); margin:0 auto; padding:0 24px 24px; }
.footer-bottom{
  border-top:1px solid rgba(247,245,240,.14);
}
.footer-bottom .inner{
  max-width:var(--container); margin:0 auto; padding:20px 24px;
  display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; justify-content:space-between;
}
.footer-bottom a{ color:rgba(247,245,240,.78); }
.footer-bottom a:hover{ color:#fff; }
.footer-bottom .tech-support{ color:rgba(247,245,240,.6); font-size:13px; position:relative; }
.tech-tip{
  color:#F2E2CF; cursor:help; border-bottom:1px dotted rgba(242,226,207,.5);
  position:relative;
}
.tech-tip__body{
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%);
  background:#fff; color:#1F2937; font-size:13px; line-height:1.6;
  padding:10px 14px; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.18);
  white-space:nowrap; opacity:0; visibility:hidden; transition:opacity .2s ease;
  pointer-events:none; z-index:1200;
}
.tech-tip__body::after{
  content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#fff;
}
.tech-tip:hover .tech-tip__body,
.tech-tip:focus .tech-tip__body{ opacity:1; visibility:visible; }
@media (max-width:767px){
  .footer-main{ grid-template-columns:1fr; padding:40px 16px 24px; gap:28px; }
  .footer-col ul{ display:none; }
  .footer-col.is-open ul{ display:block; }
  .footer-col h3{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:0; padding:12px 0; cursor:pointer;
    border-bottom:1px solid rgba(247,245,240,.14);
  }
  .footer-col h3 .chev{ transition:transform var(--dur-base) var(--ease-standard); }
  .footer-col.is-open h3 .chev{ transform:rotate(180deg); }
}

/* ---------- 分页 ---------- */
.pagination{ display:flex; justify-content:center; gap:8px; margin-top:48px; }
.pagination a,.pagination span{
  min-width:40px; height:40px; padding:0 8px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); font-size:14px; color:var(--text-2);
  border:1px solid var(--border); background:var(--bg-card);
}
.pagination .is-current{ background:var(--primary-600); border-color:var(--primary-600); color:#fff; }
.pagination a:hover{ border-color:var(--primary-600); color:var(--primary-600); }

/* ---------- 空状态 ---------- */
.empty-state{ text-align:center; padding:64px 24px; }
.empty-state .icon{ width:120px; height:120px; color:var(--primary-300); margin:0 auto 24px; stroke-width:1.2; }
.empty-state h2{ font-size:20px; margin-bottom:8px; }
.empty-state p{ color:var(--text-2); font-size:15px; margin-bottom:24px; }
.empty-state .empty-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- 回到顶部 ---------- */
.back-top{
  position:fixed; right:20px; bottom:80px; z-index:100;
  width:44px; height:44px; border-radius:var(--radius-pill);
  background:var(--bg-card); border:1px solid var(--border);
  box-shadow:var(--shadow-2); color:var(--primary-600);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all var(--dur-base) var(--ease-standard);
}
.back-top.is-visible{ opacity:1; visibility:visible; transform:none; }
@media (min-width:1024px){ .back-top{ bottom:40px; } }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(8px);
  z-index:2100; background:#262B2E; color:#fff; font-size:14px;
  padding:10px 20px; border-radius:var(--radius-sm); box-shadow:var(--shadow-3);
  opacity:0; visibility:hidden; transition:all var(--dur-base) var(--ease-standard);
}
.toast.is-visible{ opacity:1; visibility:visible; transform:translateX(-50%); }

/* ---------- 手风琴（FAQ / 移动端目录 / Footer 折叠） ---------- */
.accordion-item{ border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--bg-card); overflow:hidden; }
.accordion-item + .accordion-item{ margin-top:12px; }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; background:none; border:0; text-align:left;
  font-size:15px; font-weight:500; color:var(--text-1);
}
.accordion-trigger .icon{ color:var(--primary-500);
  transition:transform var(--dur-base) var(--ease-standard); }
.accordion-item.is-open .accordion-trigger{ color:var(--primary-700); }
.accordion-item.is-open .accordion-trigger .icon{ transform:rotate(180deg); }
.accordion-panel{ display:none; padding:0 20px 18px; font-size:15px; line-height:1.9; color:var(--text-2); }
.accordion-item.is-open .accordion-panel{ display:block; }

/* ---------- 占位图（封面 / Hero / 环境） ---------- */
.img-placeholder{
  background:linear-gradient(135deg,var(--primary-50),var(--primary-100));
  display:flex; align-items:center; justify-content:center;
  color:var(--primary-300); position:relative; overflow:hidden;
}
.img-placeholder--warm{ background:linear-gradient(135deg,var(--accent-50),var(--accent-100)); color:var(--accent-300); }

/* ---------- 阅读进度条（移动端文章，规范 3.11：主色、高 3px） ---------- */
.read-progress{
  display:none;
  position:fixed; left:0; top:var(--header-h); height:3px; width:0;
  background:var(--primary-600); z-index:1000; pointer-events:none;
}
@media (max-width:1023px){ .read-progress{ display:block; } }