/**
 * surface-brand.css — 首页 / 栏目 / 文章页 品牌联动层 (2026-09-04)
 *
 * 与 account-premium / aikb-brand 同一套语言:
 *  - 双径向氛围光 (品牌橙 + 香槟金)
 *  - 分区眉题 + 标题字距
 *  - 内容卡: 浅边、软阴影、轻微抬升
 *  - 主操作品牌橙; VIP 香槟金由 vip-brand 承接
 *
 * 只做视觉桥接, 不改 DOM / 布局骨架。
 *
 * @package DafaTheme
 */

/* =========================================================================
 * 1. Shared page atmosphere
 * ========================================================================= */

.home-page,
.archive-page,
.search-results-page,
.single-page,
.blog-page {
  position: relative;
  isolation: isolate;
}

.home-page::before,
.archive-page::before,
.search-results-page::before,
.single-page::before,
.blog-page::before {
  position: absolute;
  inset: 0 0 auto;
  height: min(42vh, 360px);
  background:
    radial-gradient(ellipse 70% 78% at 8% -10%, color-mix(in srgb, var(--dafa-accent) 10%, transparent), transparent 58%),
    radial-gradient(ellipse 52% 68% at 96% 0%, color-mix(in srgb, #d9a441 11%, transparent), transparent 56%);
  content: "";
  pointer-events: none;
  z-index: -1;
}

html.dafa-color-dark .home-page::before,
html.dafa-color-dark .archive-page::before,
html.dafa-color-dark .search-results-page::before,
html.dafa-color-dark .single-page::before,
html.dafa-color-dark .blog-page::before,
body.dafa-color-dark .home-page::before,
body.dafa-color-dark .archive-page::before,
body.dafa-color-dark .search-results-page::before,
body.dafa-color-dark .single-page::before,
body.dafa-color-dark .blog-page::before {
  background:
    radial-gradient(ellipse 70% 78% at 8% -10%, color-mix(in srgb, var(--dafa-accent) 15%, transparent), transparent 58%),
    radial-gradient(ellipse 52% 68% at 96% 0%, color-mix(in srgb, #e0b054 12%, transparent), transparent 56%);
}

/* =========================================================================
 * 2. Homepage — hero + streams
 * ========================================================================= */

.home-page .home-hero__eyebrow {
  color: color-mix(in srgb, var(--dafa-accent) 72%, var(--dafa-text-soft));
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.16em;
}

.home-page .home-hero__title {
  letter-spacing: -0.035em;
}

.home-page .home-hero-ai__submit,
.home-page .home-hero .scope-search__submit {
  border-radius: 12px;
  background: var(--dafa-accent) var(--dafa-button-sheen, none);
  color: var(--dafa-on-accent);
  font-weight: 680;
}

.home-page .home-hero-ai__submit:is(:hover, :focus-visible),
.home-page .home-hero .scope-search__submit:is(:hover, :focus-visible) {
  background: var(--dafa-accent-strong);
  color: var(--dafa-on-accent);
}

.home-page .home-hero__tab.is-active {
  color: var(--dafa-accent-strong);
}

.home-page .home-hero__tab.is-active .home-hero__tab-index {
  color: var(--dafa-accent);
}

.home-page .section-heading {
  position: relative;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--dafa-text) 8%, transparent);
}

.home-page .section-heading::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 52px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dafa-accent), color-mix(in srgb, var(--dafa-accent) 8%, transparent));
  content: "";
}

.home-page .section-heading h2 {
  font-weight: 760;
  letter-spacing: -0.03em;
}

.home-page .section-heading a {
  color: var(--dafa-text-soft);
  font-size: 13.5px;
  font-weight: 620;
}

.home-page .section-heading a:is(:hover, :focus-visible) {
  color: var(--dafa-accent-strong);
}

.home-page .home-stream {
  border-top-color: color-mix(in srgb, var(--dafa-text) 7%, transparent);
}

/* =========================================================================
 * 3. Cards — shared with account panel language
 * ========================================================================= */

.home-page .entry-card,
.archive-page .entry-card,
.search-results-page .entry-card,
.single-page .entry-card,
.blog-page .entry-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dafa-text) 8%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 48%, transparent), transparent 42%),
    var(--dafa-surface);
  box-shadow: 0 12px 28px -24px color-mix(in srgb, var(--dafa-text) 32%, transparent);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-page .entry-card:hover,
.archive-page .entry-card:hover,
.search-results-page .entry-card:hover,
.single-page .entry-card:hover,
.blog-page .entry-card:hover {
  border-color: color-mix(in srgb, var(--dafa-accent) 28%, var(--dafa-border));
  box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--dafa-text) 36%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .home-page .entry-card:hover,
  .archive-page .entry-card:hover,
  .search-results-page .entry-card:hover,
  .single-page .entry-card:hover,
  .blog-page .entry-card:hover {
    transform: translateY(-2px);
  }
}

.home-page .entry-card__title,
.archive-page .entry-card__title,
.search-results-page .entry-card__title,
.single-page .entry-card__title,
.blog-page .entry-card__title {
  letter-spacing: -0.02em;
}

.home-page .entry-card__title a:hover,
.archive-page .entry-card__title a:hover,
.search-results-page .entry-card__title a:hover,
.single-page .entry-card__title a:hover,
.blog-page .entry-card__title a:hover {
  color: var(--dafa-accent-strong);
}

/* =========================================================================
 * 4. Archive / search hero
 * ========================================================================= */

.archive-page .archive-hero,
.search-results-page .search-hero {
  border-bottom-color: color-mix(in srgb, var(--dafa-text) 8%, transparent);
  background:
    radial-gradient(ellipse 60% 90% at 100% 0%, color-mix(in srgb, #d9a441 8%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--dafa-surface) 88%, transparent), var(--dafa-surface));
}

.archive-page .archive-title,
.search-results-page .search-hero h1 {
  font-weight: 760;
  letter-spacing: -0.035em;
}

.archive-page .archive-description,
.search-results-page .search-hero p {
  max-width: 48ch;
  line-height: 1.7;
}

.archive-page .archive-stats__item {
  border: 1px solid color-mix(in srgb, var(--dafa-text) 8%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(165deg, color-mix(in srgb, #fff 55%, transparent), transparent 48%),
    color-mix(in srgb, var(--dafa-surface-muted) 40%, var(--dafa-surface));
  box-shadow: 0 10px 24px -22px color-mix(in srgb, var(--dafa-text) 28%, transparent);
}

.archive-page .archive-stats__item strong {
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  letter-spacing: -0.03em;
}

.archive-page .archive-subs__chip:is(:hover, :focus-visible),
.archive-page .resource-filters__row a:is(:hover, :focus-visible),
.archive-page .resource-filters__row a.is-active {
  border-color: color-mix(in srgb, var(--dafa-accent) 40%, var(--dafa-border));
  background: color-mix(in srgb, var(--dafa-accent-soft) 55%, var(--dafa-surface));
  color: var(--dafa-accent-strong);
}

.archive-page .archive-hero__search button,
.search-results-page .search-hero button[type="submit"] {
  background: var(--dafa-accent) var(--dafa-button-sheen, none);
  color: var(--dafa-on-accent);
  font-weight: 650;
}

.archive-page .archive-hero__search button:is(:hover, :focus-visible),
.search-results-page .search-hero button[type="submit"]:is(:hover, :focus-visible) {
  background: var(--dafa-accent-strong);
}

/* =========================================================================
 * 5. Single article
 * ========================================================================= */

.single-page .entry-header {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--dafa-text) 8%, transparent);
}

.single-page .entry-title {
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.22;
}

.single-page .entry-deck {
  max-width: 52ch;
  color: var(--dafa-text-soft);
  line-height: 1.7;
}

.single-page .entry-content {
  font-size: var(--dafa-content-font-desktop, 17px);
  line-height: 1.8;
}

.single-page .entry-footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--dafa-text) 8%, transparent);
}

.single-page .entry-ai-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--dafa-accent) var(--dafa-button-sheen, none);
  color: var(--dafa-on-accent);
  font: inherit;
  font-size: 13.5px;
  font-weight: 680;
  cursor: pointer;
}

.single-page .entry-ai-summary:is(:hover, :focus-visible) {
  background: var(--dafa-accent-strong);
  color: var(--dafa-on-accent);
}

.single-page .entry-tags a {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--dafa-text) 10%, transparent);
  background: color-mix(in srgb, var(--dafa-surface-muted) 35%, var(--dafa-surface));
}

.single-page .entry-tags a:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--dafa-accent) 36%, var(--dafa-border));
  background: color-mix(in srgb, var(--dafa-accent-soft) 50%, var(--dafa-surface));
  color: var(--dafa-accent-strong);
}

.single-page .related-resources,
.single-page .related-content {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--dafa-text) 8%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 45%, transparent), transparent 40%),
    var(--dafa-surface);
  box-shadow: 0 12px 28px -24px color-mix(in srgb, var(--dafa-text) 28%, transparent);
}

.single-page .related-content__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -0.02em;
}

/* Archive list view still uses .entry-card — keep the same surface language. */
.archive-page .entry-grid[data-view="list"] .entry-card,
.archive-page .archive-results[data-dafa-archive-view="list"] .entry-card {
  border-radius: 14px;
}

/* =========================================================================
 * 6. Content shell rhythm
 * ========================================================================= */

.archive-page .content-shell,
.search-results-page .content-shell,
.single-page .content-shell,
.blog-page .content-shell {
  padding-block: 36px 72px;
}

@media (max-width: 767px) {
  .home-page .section-heading::after {
    width: 40px;
  }

  .single-page .related-resources,
  .single-page .related-content {
    padding: 16px;
    border-radius: 14px;
  }
}