/* 前台文章：分类入口与列表 */



/* ── 首页文章模块（扁平、与 Hero 同级） ── */

.home-articles {

  width: 100%;

  max-width: 1100px;

  margin: 56px 0 0;

  padding: 0;

  box-sizing: border-box;

}



.home-articles-header {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px 64px;

  align-items: end;

  padding-bottom: 24px;

  border-bottom: 1px solid var(--border-color);

}



.home-articles-header-col--brand {

  min-width: 0;

}



.home-articles-header-col--services {

  min-width: 0;

  text-align: right;

}



.home-articles-brand {

  margin: 0 0 8px;

  font-size: clamp(24px, 3.2vw, 30px);

  font-weight: 700;

  letter-spacing: -0.02em;

  line-height: 1.15;

  color: var(--text-primary);

}



.home-articles-brand-lead {

  margin: 0;

  font-size: 15px;

  line-height: 1.6;

  color: var(--text-secondary);

}



.home-articles-section-title {

  margin: 0 0 8px;

  font-size: clamp(17px, 2.4vw, 20px);

  font-weight: 600;

  line-height: 1.35;

  color: var(--text-primary);

  letter-spacing: -0.01em;

}



.home-articles-section-lead {

  margin: 0;

  font-size: 14px;

  line-height: 1.65;

  color: var(--text-muted);

}



.home-articles-categories {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 8px;

  padding-top: 20px;

}



.home-articles-cat-group-grid,
.home-articles-categories > .gf-articles-cat-flat {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 8px;

  width: 100%;

}



.home-articles-tag {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 160px;

  max-width: 100%;

  min-height: 36px;

  padding: 8px 10px;

  border-radius: 8px;

  border: 1px solid var(--border-color);

  background: var(--bg-tertiary);

  color: var(--text-primary);

  font-size: 13px;

  font-weight: 500;

  text-decoration: none;

  line-height: 1.3;

  text-align: center;

  box-sizing: border-box;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;

}



html[data-theme="light"] .home-articles-tag {

  background: var(--bg-secondary);

}



.home-articles-tag:hover {

  border-color: var(--accent-primary);

  background: var(--bg-secondary);

  color: var(--accent-primary);

}



.home-articles-tag:focus-visible {

  outline: 2px solid var(--accent-primary);

  outline-offset: 2px;

}



/* ── 通用分类（列表页等） ── */

.gf-articles-categories {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;

}



.gf-articles-cat-flat,
.gf-articles-categories > .gf-articles-cat-flat {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;

  width: 100%;

}



.gf-articles-cat-card--child {

  min-height: 44px;

}



.gf-articles-subcats-header {

  margin: 0 0 20px;

  text-align: center;

}



.gf-articles-subcats-kicker {

  margin: 0 0 8px;

  font-size: 12px;

  font-weight: 600;

  color: var(--text-muted);

  letter-spacing: 0.06em;

  text-transform: uppercase;

}



.gf-articles-subcats-title {

  margin: 0;

  font-size: clamp(20px, 3vw, 26px);

  font-weight: 700;

  color: var(--text-primary);

}



.gf-articles-cat-card {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 160px;

  max-width: 100%;

  min-height: 44px;

  padding: 10px 12px;

  border: 1px solid var(--border-color);

  border-radius: 10px;

  background: var(--bg-tertiary);

  color: var(--text-primary);

  font-size: 14px;

  font-weight: 500;

  text-decoration: none;

  line-height: 1.35;

  text-align: center;

  box-sizing: border-box;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;

}



html[data-theme="light"] .gf-articles-cat-card {

  background: var(--bg-secondary);

}



.gf-articles-cat-card:hover {

  border-color: var(--accent-primary);

  background: var(--bg-secondary);

  color: var(--accent-primary);

}



.gf-articles-cat-card.is-active {

  border-color: var(--accent-primary);

  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-tertiary));

  color: var(--accent-primary);

  font-weight: 600;

}



.gf-articles-cat-card-name {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  min-width: 0;

}



.gf-articles-cat-card-icon {

  flex-shrink: 0;

  font-size: 11px;

  opacity: 0.5;

}



.gf-articles-cat-card--rich .gf-articles-cat-card-icon {

  display: inline;

}



.gf-articles-cat-card:hover .gf-articles-cat-card-icon {

  opacity: 1;

}



/* ── 文章列表页 ── */

/* ── 文章列表页：侧栏 + 内容区 ── */

.art-wrap {

  max-width: 1280px;

  margin: 0 auto;

  padding: 24px 20px 56px;

}



.gf-articles-layout {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.gf-articles-sidebar {

  width: 100%;

  flex-shrink: 0;

}



.gf-articles-sidebar-panel {

  background: var(--bg-secondary);

  border: 1px solid var(--border-color);

  border-radius: 10px;

  box-shadow: 0 1px 3px color-mix(in srgb, var(--text-primary) 6%, transparent);

  padding: 20px;

  box-sizing: border-box;

}



.gf-articles-sidebar-title {

  margin: 0 0 16px;

  padding-bottom: 12px;

  border-bottom: 1px solid var(--border-color);

  font-size: 17px;

  font-weight: 700;

  color: var(--text-primary);

}



.gf-articles-sidebar-list,
.gf-articles-sidebar-sublist {

  margin: 0;

  padding: 0;

  list-style: none;

}



.gf-articles-sidebar-list {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.gf-articles-sidebar-item,
.gf-articles-sidebar-group-link {

  display: block;

  padding: 9px 12px;

  border-radius: 8px;

  color: var(--text-primary);

  font-size: 14px;

  font-weight: 500;

  text-decoration: none;

  line-height: 1.4;

  transition: background 0.15s ease, color 0.15s ease;

}



.gf-articles-sidebar-item:hover,
.gf-articles-sidebar-group-link:hover {

  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-tertiary));

  color: var(--accent-primary);

}



.gf-articles-sidebar-item.is-active,
.gf-articles-sidebar-group-link.is-active {

  background: var(--accent-primary);

  color: #fff;

}



.gf-articles-sidebar-item--child {

  font-size: 13px;

  font-weight: 400;

  padding-left: 20px;

}



.gf-articles-sidebar-group {

  margin-top: 6px;

}



.gf-articles-sidebar-group-link {

  font-weight: 600;

  margin-bottom: 4px;

}



.gf-articles-sidebar-sublist {

  display: flex;

  flex-direction: column;

  gap: 2px;

  margin-top: 2px;

}



.gf-articles-main {

  flex: 1;

  min-width: 0;

}



.gf-articles-main-head {

  background: var(--bg-secondary);

  border: 1px solid var(--border-color);

  border-radius: 10px;

  box-shadow: 0 1px 3px color-mix(in srgb, var(--text-primary) 6%, transparent);

  padding: 20px 22px;

  margin-bottom: 16px;

  box-sizing: border-box;

}



.gf-articles-main-title {

  margin: 0 0 6px;

  font-size: clamp(20px, 3vw, 24px);

  font-weight: 700;

  color: var(--text-primary);

  letter-spacing: -0.01em;

}



.gf-articles-main-count {

  margin: 0;

  font-size: 13px;

  color: var(--text-muted);

}



.gf-articles-feed {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.gf-articles-feed-card {

  background: var(--bg-secondary);

  border: 1px solid var(--border-color);

  border-radius: 10px;

  box-shadow: 0 1px 3px color-mix(in srgb, var(--text-primary) 6%, transparent);

  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;

}



.gf-articles-feed-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 24px color-mix(in srgb, var(--text-primary) 10%, transparent);

  border-color: color-mix(in srgb, var(--accent-primary) 35%, var(--border-color));

}



.gf-articles-feed-card-body {

  padding: 20px 22px;

}



.gf-articles-feed-card-title {

  margin: 0 0 10px;

  font-size: 18px;

  line-height: 1.4;

  font-weight: 700;

}



.gf-articles-feed-card-title a {

  color: var(--text-primary);

  text-decoration: none;

  transition: color 0.15s ease;

}



.gf-articles-feed-card-title a:hover {

  color: var(--accent-primary);

}



.gf-articles-feed-card-meta {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 12px 16px;

  margin-bottom: 12px;

  font-size: 13px;

  color: var(--text-muted);

}



.gf-articles-feed-card-cat {

  padding-left: 0;

}



.gf-articles-feed-card-summary {

  margin: 0 0 14px;

  font-size: 14px;

  line-height: 1.65;

  color: var(--text-secondary);

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.gf-articles-feed-card-footer {

  margin-top: 4px;

}



.gf-articles-feed-card-more {

  font-size: 13px;

  font-weight: 500;

  color: var(--accent-primary);

  text-decoration: none;

}



.gf-articles-feed-card-more:hover {

  text-decoration: underline;

}



.gf-articles-pagination {

  margin-top: 24px;

  display: flex;

  justify-content: center;

}



.gf-articles-pagination-inner {

  display: inline-flex;

  flex-wrap: wrap;

  gap: 0;

  border: 1px solid var(--border-color);

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 1px 3px color-mix(in srgb, var(--text-primary) 6%, transparent);

}



.gf-articles-page-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 40px;

  padding: 8px 12px;

  border-right: 1px solid var(--border-color);

  background: var(--bg-secondary);

  color: var(--text-secondary);

  font-size: 13px;

  font-weight: 500;

  text-decoration: none;

  transition: background 0.15s ease, color 0.15s ease;

}



.gf-articles-page-btn:last-child {

  border-right: none;

}



.gf-articles-page-btn:hover {

  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-tertiary));

  color: var(--accent-primary);

}



.gf-articles-page-btn.is-active {

  background: var(--accent-primary);

  color: #fff;

}



.gf-articles-page-categories {

  margin: 0 0 8px;

}



.art-page-nav {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px 16px;

  margin-bottom: 24px;

}



.art-page-nav-link {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 13px;

  font-weight: 500;

  line-height: 1.3;

  color: var(--text-secondary);

  text-decoration: none;

  padding: 6px 12px;

  border: 1px solid var(--border-color);

  border-radius: 8px;

  background: var(--bg-tertiary);

  box-sizing: border-box;

  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;

}



html[data-theme="light"] .art-page-nav-link {

  background: var(--bg-secondary);

}



.art-page-nav-link:hover {

  color: var(--accent-primary);

  border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-color));

  background: var(--bg-secondary);

  text-decoration: none;

}



.art-page-nav-link.is-hidden {

  display: none;

}



.art-header {

  margin-bottom: 28px;

  padding-bottom: 24px;

  border-bottom: 1px solid var(--border-color);

  text-align: center;

}



.art-header h1 {

  margin: 0 0 10px;

  font-size: clamp(24px, 4vw, 30px);

  font-weight: 700;

  letter-spacing: -0.02em;

  color: var(--text-primary);

}



.art-header p {

  margin: 0 auto;

  max-width: 480px;

  color: var(--text-secondary);

  line-height: 1.65;

  font-size: 15px;

}



@media (min-width: 768px) {

  .gf-articles-layout {

    flex-direction: row;

    align-items: flex-start;

    gap: 24px;

  }



  .gf-articles-sidebar {

    width: 256px;

  }

}



.gf-articles-categories-panel {

  padding: 28px 24px 32px;

  border: 1px solid var(--border-color);

  border-radius: 12px;

  background: var(--bg-secondary);

  box-sizing: border-box;

}



.gf-articles-categories-heading {

  margin: 0 0 20px;

  font-size: 13px;

  font-weight: 600;

  color: var(--text-muted);

  letter-spacing: 0.06em;

  text-transform: uppercase;

  text-align: center;

}



.gf-articles-posts-section {

  margin-top: 4px;

}



.gf-articles-posts-header {

  margin-bottom: 24px;

  padding-bottom: 20px;

  border-bottom: 1px solid var(--border-color);

  text-align: center;

}



.gf-articles-posts-kicker {

  margin: 0 0 8px;

  font-size: 12px;

  font-weight: 600;

  color: var(--text-muted);

  letter-spacing: 0.06em;

  text-transform: uppercase;

}



.gf-articles-posts-title {

  margin: 0;

  font-size: clamp(20px, 3.5vw, 26px);

  font-weight: 700;

  line-height: 1.3;

  color: var(--text-primary);

  letter-spacing: -0.01em;

}



.gf-articles-list {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

  gap: 14px;

  margin-top: 0;

}



.gf-articles-card {

  background: var(--bg-secondary);

  border: 1px solid var(--border-color);

  border-radius: 10px;

  padding: 16px 18px;

  transition: border-color 0.15s ease;

}



.gf-articles-card:hover {

  border-color: var(--accent-primary);

}



.gf-articles-card-title {

  margin: 0 0 8px;

  font-size: 15px;

  line-height: 1.45;

}



.gf-articles-card-title a {

  color: var(--text-primary);

  text-decoration: none;

}



.gf-articles-card-title a:hover {

  color: var(--accent-primary);

}



.gf-articles-card-summary {

  margin: 0 0 12px;

  font-size: 13px;

  line-height: 1.55;

  color: var(--text-secondary);

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.gf-articles-card-meta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  font-size: 12px;

  color: var(--text-muted);

}



.gf-articles-card-link {

  color: var(--accent-primary);

  text-decoration: none;

  font-weight: 500;

}



.gf-articles-card-link:hover {

  text-decoration: underline;

}



.gf-articles-empty {

  text-align: center;

  padding: 36px 16px;

  color: var(--text-secondary);

  font-size: 14px;

}



/* ── 文章详情 ── */

.gf-article-detail .art-page-nav {

  margin-bottom: 20px;

}



.gf-article-detail-cat {

  font-size: 12px;

  color: var(--text-secondary);

  margin-bottom: 8px;

}



.gf-article-detail-title {

  margin: 0 0 12px;

  font-size: clamp(22px, 4vw, 30px);

  line-height: 1.3;

}



.gf-article-detail-meta {

  font-size: 13px;

  color: var(--text-muted);

  margin-bottom: 16px;

}



.gf-article-detail-summary {

  font-size: 15px;

  line-height: 1.65;

  color: var(--text-secondary);

  margin: 0 0 20px;

}



.gf-article-detail-layout {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 220px;

  gap: 40px;

  align-items: start;

}



.gf-article-detail-main {

  min-width: 0;

}



.gf-article-detail-toc {

  position: sticky;

  top: 88px;

  padding: 16px 14px;

  border: 1px solid var(--border-color);

  border-radius: 10px;

  background: var(--bg-secondary);

  box-sizing: border-box;

}



.gf-article-toc-title {

  margin: 0 0 12px;

  font-size: 12px;

  font-weight: 600;

  color: var(--text-muted);

  letter-spacing: 0.06em;

  text-transform: uppercase;

}



.gf-article-toc-nav {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.gf-article-toc-link {

  display: block;

  font-size: 13px;

  line-height: 1.45;

  color: var(--text-secondary);

  text-decoration: none;

  transition: color 0.15s ease;

}



.gf-article-toc-link:hover {

  color: var(--accent-primary);

}



.gf-article-toc-link--h3 {

  padding-left: 12px;

  font-size: 12px;

}



.gf-article-toc-link--h4 {

  padding-left: 22px;

  font-size: 12px;

}



.gf-article-detail-content {

  font-size: 15px;

  line-height: 1.75;

  color: var(--text-primary);

  word-break: break-word;

}



.gf-article-detail-content h2,

.gf-article-detail-content h3,

.gf-article-detail-content h4 {

  margin: 20px 0 10px;

  line-height: 1.35;

  color: var(--text-primary);

  scroll-margin-top: 88px;

}



.gf-article-detail-content h2 { font-size: 22px; }

.gf-article-detail-content h3 { font-size: 18px; }

.gf-article-detail-content h4 { font-size: 16px; }



.gf-article-detail-content img {

  max-width: 100%;

  height: auto;

  border-radius: 8px;

  margin: 12px 0;

}



.gf-article-detail-content p {

  margin: 0 0 12px;

}



.gf-article-detail-content ul,

.gf-article-detail-content ol {

  margin: 0 0 12px;

  padding-left: 1.5em;

}



.gf-article-detail-content blockquote {

  margin: 0 0 12px;

  padding: 10px 14px;

  border-left: 3px solid var(--border-color);

  color: var(--text-secondary);

}



.gf-article-detail-content a {

  color: var(--accent-primary);

  text-decoration: underline;

}



@media (max-width: 720px) {

  .home-articles {

    margin-top: 40px;

  }



  .home-articles-header {

    grid-template-columns: 1fr;

    gap: 20px;

    align-items: start;

  }



  .home-articles-header-col--services {

    text-align: left;

    padding-top: 4px;

    border-top: 1px solid var(--border-color);

    padding-top: 20px;

  }

}



@media (max-width: 960px) {

  .gf-article-detail-layout {

    grid-template-columns: 1fr;

  }



  .gf-article-detail-toc {

    position: static;

    order: -1;

    margin-bottom: 8px;

  }

}



@media (max-width: 640px) {

  .art-wrap {

    padding: 20px 16px 40px;

  }



  .gf-articles-feed-card-body {

    padding: 16px 18px;

  }



  .gf-articles-main-head {

    padding: 16px 18px;

  }

}