/* Laplexus — curated featured-story covers.
   Abstract editorial gradients. Local CSS only: no external images, no
   tracking, works offline, identical in every theme. Overlay ink is white
   except parchment. Ids mirror Community.COVER_PRESETS (api/app/community.py)
   and window.ForumCovers (web/assets/covers.js). */

.community-newsletter-visual.cover {
  --cover-ink: #f2f5f7;
  --cover-ink-soft: rgba(242, 245, 247, 0.72);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--cover-base, #10151b);
}

/* film grain shared by every cover */
.community-newsletter-visual.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

/* soft bottom scrim so overlay type stays legible */
.community-newsletter-visual.cover::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 46%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 8, 12, 0.42), transparent);
}
.cover-parchment.community-newsletter-visual.cover::before {
  background: linear-gradient(to top, rgba(41, 57, 50, 0.16), transparent);
}

.community-newsletter-visual.cover .cover-frame,
.cover-thumb .cover-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 12% 108%, var(--cover-glow-b, transparent) 0%, transparent 55%),
    radial-gradient(110% 80% at 88% -12%, var(--cover-glow-a, transparent) 0%, transparent 58%),
    radial-gradient(90% 70% at 55% 45%, var(--cover-wash, transparent) 0%, transparent 62%),
    linear-gradient(150deg, var(--cover-deep-a) 0%, var(--cover-deep-b) 100%);
}

.community-newsletter-visual.cover .cover-band,
.cover-thumb .cover-band {
  position: absolute;
  inset: -12%;
  z-index: 0;
  opacity: 0.85;
  background:
    radial-gradient(38% 30% at 30% 34%, var(--cover-band-a, transparent), transparent 70%),
    radial-gradient(30% 26% at 72% 62%, var(--cover-band-b, transparent), transparent 70%);
  filter: blur(2px);
}

.cover-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 28px;
}
.cover-copy-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.cover-copy-top > span {
  color: var(--cover-ink);
  font: 500 12px var(--font-sans);
  letter-spacing: 0.02em;
}
.cover-copy-top > strong {
  color: var(--cover-ink-soft);
  font: 400 13px var(--font-mono);
  letter-spacing: 0.04em;
}
.cover-copy-bottom > p {
  max-width: 240px;
  margin: 0;
  color: var(--cover-ink);
  font: 500 30px/1.12 var(--font-serif);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.cover-copy-bottom > small {
  display: block;
  margin-top: 10px;
  color: var(--cover-ink-soft);
  font: 400 12px var(--font-sans);
}

/* --- presets ----------------------------------------------------------- */
.cover-aurora {
  --cover-ink: #eef7f5;
  --cover-ink-soft: rgba(238, 247, 245, 0.7);
  --cover-deep-a: #0c1a20;
  --cover-deep-b: #101c33;
  --cover-glow-a: rgba(94, 190, 180, 0.5);
  --cover-glow-b: rgba(122, 139, 235, 0.42);
  --cover-wash: rgba(90, 169, 210, 0.2);
  --cover-band-a: rgba(115, 220, 197, 0.34);
  --cover-band-b: rgba(139, 124, 246, 0.3);
}
.cover-meridian {
  --cover-ink: #faf3e8;
  --cover-ink-soft: rgba(250, 243, 232, 0.7);
  --cover-deep-a: #1d1611;
  --cover-deep-b: #2b1d16;
  --cover-glow-a: rgba(214, 164, 90, 0.5);
  --cover-glow-b: rgba(194, 122, 134, 0.38);
  --cover-wash: rgba(208, 162, 74, 0.18);
  --cover-band-a: rgba(238, 180, 110, 0.32);
  --cover-band-b: rgba(210, 117, 128, 0.28);
}
.cover-tide {
  --cover-ink: #ecf4fa;
  --cover-ink-soft: rgba(236, 244, 250, 0.7);
  --cover-deep-a: #0a1626;
  --cover-deep-b: #0e2740;
  --cover-glow-a: rgba(111, 184, 223, 0.5);
  --cover-glow-b: rgba(98, 198, 207, 0.4);
  --cover-wash: rgba(90, 169, 210, 0.2);
  --cover-band-a: rgba(127, 199, 228, 0.32);
  --cover-band-b: rgba(98, 198, 207, 0.3);
}
.cover-ember {
  --cover-ink: #faf0e8;
  --cover-ink-soft: rgba(250, 240, 232, 0.7);
  --cover-deep-a: #211210;
  --cover-deep-b: #331a18;
  --cover-glow-a: rgba(226, 132, 80, 0.5);
  --cover-glow-b: rgba(194, 101, 97, 0.42);
  --cover-wash: rgba(210, 120, 80, 0.18);
  --cover-band-a: rgba(238, 150, 100, 0.32);
  --cover-band-b: rgba(210, 117, 128, 0.3);
}
.cover-prism {
  --cover-ink: #f1eefb;
  --cover-ink-soft: rgba(241, 238, 251, 0.7);
  --cover-deep-a: #171430;
  --cover-deep-b: #241a44;
  --cover-glow-a: rgba(154, 131, 221, 0.5);
  --cover-glow-b: rgba(238, 159, 201, 0.36);
  --cover-wash: rgba(139, 124, 246, 0.2);
  --cover-band-a: rgba(169, 157, 249, 0.32);
  --cover-band-b: rgba(98, 198, 207, 0.26);
}
.cover-parchment {
  --cover-ink: #293932;
  --cover-ink-soft: rgba(41, 57, 50, 0.68);
  --cover-deep-a: #e7e9df;
  --cover-deep-b: #d9dcd0;
  --cover-glow-a: rgba(163, 198, 181, 0.55);
  --cover-glow-b: rgba(208, 162, 74, 0.3);
  --cover-wash: rgba(130, 144, 140, 0.2);
  --cover-band-a: rgba(180, 211, 195, 0.5);
  --cover-band-b: rgba(214, 180, 120, 0.34);
}

/* thumbnails in the moderation picker reuse the same art at small size */
.cover-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
}
.cover-thumb > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 5px 7px;
  color: var(--cover-ink);
  background: linear-gradient(to top, rgba(5, 8, 12, 0.55), transparent);
  font: 500 11px var(--font-sans);
  text-align: left;
}
.cover-parchment.cover-thumb > span {
  background: linear-gradient(to top, rgba(41, 57, 50, 0.28), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .community-newsletter-visual.cover::after { display: none; }
}