/* =========================================================
   GALLERY PAGES (配色方案库 / 渐变方案库)
   仅保留页面级布局：hero / 返回链接 / 工具栏 / tab 容器。
   卡片视觉统一复用 styles.css 的通用体系：
   - 配色卡 → .palette-card / .palette-preview / .palette-info（首页同款）
   - 渐变卡 → .gradient-card / .gradient-overlay（首页同款）
   ========================================================= */
.gallery-page-hero {
  padding-top: var(--sp-8);
  text-align: center;
}
.gallery-page-hero .section-head {
  max-width: 640px;
  margin: var(--sp-4) auto var(--sp-8);
}
.gallery-page-hero .section-title {
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  line-height: 1.2;
}
.gallery-page-hero .section-desc { max-width: 52ch; margin-inline: auto; line-height: 1.65; }
.gallery-page-hero .gallery-toolbar { justify-content: center; margin-bottom: var(--sp-8); }

/* 配色卡：文字左对齐（抵消 hero 的 text-align:center）
   注：.palette-card / .palette-preview / .palette-info / .palette-name / .palette-meta / .palette-preview-bar
   在 styles.css 的 CARD SYSTEM 中已统一定义 */
.gallery-page-hero .palette-info { text-align: left; }

/* 标签页容器：与通用 .gallery-tabs 配合（.gallery-tab 定义在 styles.css） */
.gallery-tabs { margin-bottom: var(--sp-2); }

@media (max-width: 680px) {
  .gallery-page-hero { padding-top: var(--sp-6); }
  .gallery-page-hero .section-head { margin: var(--sp-4) auto var(--sp-6); }
  .gallery-page-hero .gallery-toolbar { gap: var(--sp-3); margin-bottom: var(--sp-6); }
}