/* ═══════════════════════════════════════════════════════════════
   ANCHOR & BLOOM — WILDGROUND COVER
   Editorial widget cover for the WildGround pulse / wellness tile.
   Replaces the dark hunting-cabin pulse card with a warm,
   editorial composition that fits the Anchor & Bloom brand.

   Direction: layered moss-to-parchment gradient with a CSS-only
   topographic ring pattern, a quiet inline-SVG pine silhouette,
   Playfair italic title, gold hairline rule, and a small
   "Movement / N" lockup. CSS / SVG only — no remote images.
   ═══════════════════════════════════════════════════════════════ */

.ab-wild-cover {
  /* Local tokens fall back to Anchor & Bloom global tokens if present. */
  --wc-moss-deep:    #2C3826;
  --wc-moss:         #4F6447;
  --wc-sage:         #8AA17B;
  --wc-parchment:    #E8DFC9;
  --wc-cream:        var(--lux-cream, #F9F7F2);
  --wc-gold:         var(--lux-gold, #AE8F48);
  --wc-gold-soft:    rgba(174, 143, 72, 0.55);
  --wc-gold-hair:    rgba(174, 143, 72, 0.42);
  --wc-ink:          var(--ink, #2A2420);
  --wc-cream-dim:    rgba(249, 247, 242, 0.78);
  --wc-cream-faint:  rgba(249, 247, 242, 0.58);
  --wc-terra:        var(--terra, #C98F7A);

  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(255,255,255,0.05) 0%, transparent 60%),
    linear-gradient(135deg,
      var(--wc-moss-deep) 0%,
      var(--wc-moss) 38%,
      var(--wc-sage) 72%,
      var(--wc-parchment) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 14px 38px rgba(42, 36, 32, 0.18),
    0 2px 6px rgba(42, 36, 32, 0.10);
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
  min-height: 156px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ab-wild-cover:hover,
.ab-wild-cover:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 20px 46px rgba(42, 36, 32, 0.22),
    0 2px 8px rgba(42, 36, 32, 0.12);
}

.ab-wild-cover:focus-visible {
  outline: 2px solid var(--wc-gold);
  outline-offset: 3px;
}

.ab-wild-cover:active { transform: translateY(0); }

/* ── Decorative layers (all behind content) ────────────────────── */

/* Topographic contour rings — a faint parchment-map feel.
   Lives in the lower-right where the gradient is warmest, so
   the rings read as gold-on-cream rather than noise on green. */
.ab-wild-cover__topo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(
      circle at 92% 118%,
      rgba(174, 143, 72, 0.22) 0px,
      rgba(174, 143, 72, 0.22) 1px,
      transparent 1px,
      transparent 14px
    );
  mask-image: linear-gradient(115deg, transparent 0%, transparent 35%, #000 65%, #000 100%);
  -webkit-mask-image: linear-gradient(115deg, transparent 0%, transparent 35%, #000 65%, #000 100%);
  opacity: 0.85;
}

/* Inline-SVG pine silhouette layer (rendered via background-image so
   we don't have to ship a second DOM node). Two pines, hand-tuned. */
.ab-wild-cover__pine {
  position: absolute;
  right: 14px;
  bottom: 10px;
  width: 92px;
  height: 92px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
  <g fill='none' stroke='%23AE8F48' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.95'>\
    <path d='M40 102 L40 86 M40 86 L26 84 L40 70 L30 68 L40 54 L32 52 L40 38 L48 52 L40 52 L50 68 L40 68 L54 84 L40 84 Z'/>\
    <path d='M82 104 L82 88 M82 88 L70 86 L82 74 L74 72 L82 60 L76 58 L82 46 L88 58 L82 58 L90 72 L82 72 L94 86 L82 86 Z' opacity='0.7'/>\
    <path d='M8 108 L116 108' stroke='%23AE8F48' stroke-width='0.8' opacity='0.6'/>\
  </g>\
</svg>");
}

/* Soft cream vignette in the lower-right so the warm parchment edge
   doesn't fight with the score lockup. */
.ab-wild-cover__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(85% 110% at 100% 100%, rgba(232, 223, 201, 0.55) 0%, transparent 55%),
    linear-gradient(180deg, rgba(44, 56, 38, 0.10) 0%, transparent 35%);
}

/* ── Content layer ─────────────────────────────────────────────── */

.ab-wild-cover__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 10px 16px;
  padding: 18px 20px 16px;
  min-height: 156px;
}

.ab-wild-cover__lockup {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.ab-wild-cover__eyebrow {
  font-family: 'Jost', 'Montserrat', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wc-gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.ab-wild-cover__eyebrow-mark {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wc-gold);
  box-shadow: 0 0 0 2px rgba(174, 143, 72, 0.22);
}

.ab-wild-cover__rule {
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, var(--wc-gold) 0%, var(--wc-gold-soft) 100%);
  border: none;
  margin: 2px 0 4px;
  opacity: 0.9;
}

.ab-wild-cover__title {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.05;
  color: var(--wc-cream);
  letter-spacing: 0.005em;
  margin: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
}

.ab-wild-cover__lede {
  font-family: 'Jost', 'Montserrat', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wc-cream-dim);
  letter-spacing: 0.01em;
  margin: 2px 0 0;
  max-width: 28ch;
}

/* Discovery hint — Tracks · Sounds · Stands · Memories.
   A whisper of what lives inside the WildGround tools, so the user
   knows they exist without poking around. */
.ab-wild-cover__facets {
  display: inline-block;
  margin-top: 6px;
  font-family: 'Jost', 'Montserrat', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wc-gold);
}

.ab-wild-cover__safe {
  font-family: 'Jost', 'Montserrat', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--wc-cream);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(249, 247, 242, 0.12);
  border: 1px solid rgba(249, 247, 242, 0.22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.ab-wild-cover__safe-mark {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C7D9B5;
  box-shadow: 0 0 6px rgba(199, 217, 181, 0.7);
}

/* ── Right column — the "Movement / N" lockup ─────────────────── */

.ab-wild-cover__signal {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(20, 22, 18, 0.32);
  border: 1px solid rgba(174, 143, 72, 0.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  min-width: 96px;
}

.ab-wild-cover__signal-label {
  font-family: 'Jost', 'Montserrat', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wc-gold);
  line-height: 1;
  margin: 0;
}

.ab-wild-cover__signal-value {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: var(--wc-cream);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.ab-wild-cover__signal-denom {
  font-family: 'Jost', 'Montserrat', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--wc-cream-faint);
}

.ab-wild-cover__signal-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wc-gold);
  box-shadow: 0 0 0 3px rgba(174, 143, 72, 0.18);
}

.ab-wild-cover--score-high .ab-wild-cover__signal-dot {
  background: #C7D9B5;
  box-shadow: 0 0 0 3px rgba(199, 217, 181, 0.22);
}
.ab-wild-cover--score-mid .ab-wild-cover__signal-dot {
  background: var(--wc-gold);
  box-shadow: 0 0 0 3px rgba(174, 143, 72, 0.22);
}
.ab-wild-cover--score-low .ab-wild-cover__signal-dot {
  background: var(--wc-terra);
  box-shadow: 0 0 0 3px rgba(201, 143, 122, 0.22);
}

/* ── Footer row ────────────────────────────────────────────────── */

.ab-wild-cover__cta {
  grid-column: 1 / span 2;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(249, 247, 242, 0.16);
}

.ab-wild-cover__cta-text {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-style: italic;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--wc-cream-dim);
  letter-spacing: 0.02em;
}

.ab-wild-cover__cta-arrow {
  font-family: 'Jost', 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--wc-gold);
  letter-spacing: 0.04em;
}

/* ── Setup / empty variant ─────────────────────────────────────── */

.ab-wild-cover--setup {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(174, 143, 72, 0.10) 0%, transparent 60%),
    linear-gradient(150deg, #F4ECD7 0%, #E8DFC9 60%, #D8CFB6 100%);
  color: var(--wc-ink);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 10px 28px rgba(42, 36, 32, 0.10);
}

.ab-wild-cover--setup .ab-wild-cover__topo {
  background:
    repeating-radial-gradient(
      circle at 90% 110%,
      rgba(120, 95, 50, 0.22) 0px,
      rgba(120, 95, 50, 0.22) 1px,
      transparent 1px,
      transparent 14px
    );
  mask-image: linear-gradient(115deg, transparent 0%, transparent 30%, #000 70%);
  -webkit-mask-image: linear-gradient(115deg, transparent 0%, transparent 30%, #000 70%);
  opacity: 0.7;
}

.ab-wild-cover--setup .ab-wild-cover__veil {
  background:
    radial-gradient(80% 100% at 100% 100%, rgba(255, 252, 244, 0.55) 0%, transparent 55%);
}

.ab-wild-cover--setup .ab-wild-cover__title {
  color: var(--wc-ink);
  text-shadow: none;
}

.ab-wild-cover--setup .ab-wild-cover__lede {
  color: rgba(42, 36, 32, 0.66);
}

.ab-wild-cover--setup .ab-wild-cover__cta {
  border-top-color: rgba(42, 36, 32, 0.12);
}

.ab-wild-cover--setup .ab-wild-cover__cta-text {
  color: rgba(42, 36, 32, 0.70);
}

.ab-wild-cover--setup .ab-wild-cover__signal {
  display: none;
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 360px) {
  .ab-wild-cover__inner {
    padding: 16px 16px 14px;
    gap: 8px 12px;
  }
  .ab-wild-cover__title { font-size: 24px; }
  .ab-wild-cover__pine { width: 76px; height: 76px; }
  .ab-wild-cover__signal { padding: 8px 12px; min-width: 84px; }
  .ab-wild-cover__signal-value { font-size: 26px; }
}

/* Hosts: pulse rail, wellness hub stack. Both pin the cover to the
   stack width with their own padding, so the cover stays flush. */
.ab-hub-stack--wildground .ab-wild-cover { margin: 4px 0 8px; }

/* ── Reduced motion ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ab-wild-cover,
  .ab-wild-cover:hover,
  .ab-wild-cover:focus-visible {
    transition: none;
    transform: none;
  }
}