/* Board/detail + about page backgrounds — loaded after template themes */

body.church-site.cs-board-page,
body.church-site.cs-about-page {
  background-attachment: fixed;
}

body.template-modern.cs-board-page,
body.template-modern.cs-about-page {
  background:
    radial-gradient(1100px 420px at 12% -8%, color-mix(in srgb, var(--cs-primary) 6%, transparent), transparent 68%),
    radial-gradient(900px 380px at 92% 8%, color-mix(in srgb, var(--cs-primary) 4%, transparent), transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--cs-primary) 2%, #ffffff) 0%,
      #ffffff 42%,
      color-mix(in srgb, var(--cs-primary) 2%, #f8fafc) 100%);
  background-attachment: fixed;
}

body.template-warm.cs-board-page,
body.template-warm.cs-about-page,
body.theme-editorial-warm.template-warm.cs-board-page,
body.theme-editorial-warm.template-warm.cs-about-page {
  background:
    radial-gradient(1000px 400px at 10% -10%, color-mix(in srgb, var(--theme-primary, #6B8FB8) 14%, transparent), transparent 70%),
    radial-gradient(800px 360px at 95% 0%, color-mix(in srgb, var(--theme-accent, #7A98C4) 10%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--theme-primary, #6B8FB8) 6%, #ffffff) 0%,
      #ffffff 40%,
      var(--theme-surface, #F4F6F9) 100%);
}

body.template-warm.cs-board-page .ew-shell,
body.template-warm.cs-about-page .ew-shell,
body.theme-editorial-warm.template-warm.cs-board-page .ew-shell,
body.theme-editorial-warm.template-warm.cs-about-page .ew-shell {
  background: transparent;
}

body.template-classic.cs-board-page,
body.template-classic.cs-about-page {
  background:
    radial-gradient(900px 380px at 8% -6%, color-mix(in srgb, var(--ck-gold, #b8935a) 18%, transparent), transparent 68%),
    radial-gradient(700px 320px at 100% 0%, color-mix(in srgb, var(--ck-navy, #0f1e3d) 8%, transparent), transparent 72%),
    linear-gradient(180deg,
      var(--ck-paper, #faf6ec) 0%,
      var(--ck-ivory, #f5efe4) 48%,
      color-mix(in srgb, var(--ck-gold, #b8935a) 8%, var(--ck-ivory, #f5efe4)) 100%);
}

body.template-minimal.cs-board-page,
body.template-minimal.cs-about-page {
  background:
    radial-gradient(1000px 400px at 6% -8%, color-mix(in srgb, var(--cs-primary) 12%, transparent), transparent 68%),
    radial-gradient(720px 300px at 98% 4%, color-mix(in srgb, var(--mn-accent, var(--cs-primary)) 8%, transparent), transparent 70%),
    linear-gradient(180deg,
      var(--mn-cream, #f6f4ef) 0%,
      color-mix(in srgb, var(--cs-primary) 4%, #ffffff) 45%,
      var(--mn-paper, #ede8dd) 100%);
}

body.template-youth.cs-board-page,
body.template-youth.cs-about-page {
  background:
    radial-gradient(980px 420px at 10% -10%, color-mix(in srgb, var(--md-rose-blush, #e8c9c1) 55%, transparent), transparent 68%),
    radial-gradient(820px 360px at 95% 0%, color-mix(in srgb, var(--md-sage-light, #b4c1a1) 45%, transparent), transparent 70%),
    linear-gradient(180deg,
      var(--md-cream, #faf5ee) 0%,
      color-mix(in srgb, var(--cs-primary) 5%, #fffaf4) 48%,
      var(--md-cream-2, #f4ead9) 100%);
}

/* About layout spacing tweaks when shared outside WARM shell */
body.cs-ew-about .cs-main {
  width: min(100% - 40px, 1120px);
  margin-inline: auto;
  padding-top: 8px;
  padding-bottom: 48px;
}

body.cs-ew-about .ew-about {
  max-width: none;
}

body.template-modern.cs-about-page .cs-page-title {
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--theme-line, var(--cs-line));
  margin-bottom: 22px;
}

body.template-modern.cs-about-page .cs-page-title h1 {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
}