/**
 * LifeLoveMe — Sacred / wisdom-text visual system
 * Reusable for Upanishads, Gita, Ramcharitmanas, Yoga Sutra, Kabir, etc.
 * Link after app-specific CSS; override tokens in :root on each module if needed.
 */

:root {
  --llm-sacral-cream: #fffbf5;
  --llm-sacral-gold: #c9a227;
  --llm-sacral-gold-soft: rgba(201, 162, 39, 0.18);
  --llm-sacral-saffron: #c76b2e;
  --llm-sacral-saffron-soft: rgba(199, 107, 46, 0.14);
  --llm-sacral-ivory: #fff8f0;
  --llm-sacral-indigo: #3d4f7a;
  --llm-sacral-indigo-soft: rgba(61, 79, 122, 0.12);
  --llm-sacral-teal: #2a7a6e;
  --llm-sacral-teal-soft: rgba(42, 122, 110, 0.12);
  --llm-sacral-lavender: #7b6ba8;
  --llm-sacral-lavender-soft: rgba(123, 107, 168, 0.14);
  --llm-sacral-slate: #5a5a6e;
  --llm-sacral-slate-soft: rgba(90, 90, 110, 0.1);
  --llm-sacral-ink: #1a1a2e;
  --llm-sacral-mist: rgba(255, 255, 255, 0.55);
  --llm-sacral-shadow: 0 10px 40px rgba(26, 26, 46, 0.08), 0 2px 12px rgba(0, 0, 0, 0.04);
  --llm-sacral-shadow-hover: 0 16px 48px rgba(26, 26, 46, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
  --llm-sacral-radius-hero: clamp(22px, 4vw, 32px);
  --llm-sacral-radius-card: clamp(18px, 3vw, 26px);
  --llm-sacral-transition: 0.2s ease;
}

/* --- Hero shell (Hub + Study) --- */
.llm-sacred-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--llm-sacral-radius-hero);
  background:
    radial-gradient(ellipse 120% 80% at 20% 0%, rgba(255, 248, 235, 0.95) 0%, transparent 52%),
    radial-gradient(ellipse 100% 70% at 100% 20%, rgba(232, 236, 252, 0.9) 0%, transparent 50%),
    linear-gradient(155deg, #fdf9f3 0%, #f3f0fb 42%, #eef5f8 100%);
  border: 1px solid rgba(201, 162, 39, 0.12);
  box-shadow: var(--llm-sacral-shadow);
  margin-bottom: 0.5rem;
}

/* Soft ornaments — large, low-contrast; stay behind content */
.llm-sacred-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(circle at -5% 20%, rgba(201, 162, 39, 0.11) 0%, transparent 42%),
    radial-gradient(circle at 105% 35%, rgba(123, 107, 168, 0.09) 0%, transparent 38%),
    radial-gradient(ellipse 80% 50% at 50% 110%, rgba(42, 122, 110, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 78% 8%, rgba(255, 255, 255, 0.5) 0%, transparent 25%);
}

.llm-sacred-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 120%, rgba(61, 79, 122, 0.06) 0%, transparent 45%);
}

.llm-sacred-hero__inner {
  position: relative;
  z-index: 2;
  padding: clamp(1.25rem, 4vw, 2.25rem) clamp(1rem, 3vw, 1.75rem);
}

.llm-sacred-hero__visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 0.25rem;
}

/* Placeholder “art” — swap for <img class="llm-sacral-art__img"> later */
.llm-sacred-mandala {
  width: clamp(4.5rem, 14vw, 6.5rem);
  height: clamp(4.5rem, 14vw, 6.5rem);
  border-radius: 50%;
  background:
    conic-gradient(
      from 210deg,
      rgba(201, 162, 39, 0.15),
      rgba(61, 79, 122, 0.12),
      rgba(42, 122, 110, 0.12),
      rgba(123, 107, 168, 0.12),
      rgba(201, 162, 39, 0.15)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    0 4px 20px rgba(26, 26, 46, 0.08);
  position: relative;
}

.llm-sacred-mandala::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px dashed rgba(61, 79, 122, 0.2);
  opacity: 0.85;
}

.llm-sacred-mandala::after {
  content: "ॐ";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  color: rgba(61, 79, 122, 0.45);
  font-family: "Noto Sans Devanagari", "Kohinoor Devanagari", serif;
  letter-spacing: 0.08em;
}

.llm-sacred-mandala--study {
  width: clamp(3.75rem, 11vw, 5.25rem);
  height: clamp(3.75rem, 11vw, 5.25rem);
}

.llm-sacred-mandala--study::after {
  font-size: clamp(1.1rem, 3vw, 1.45rem);
}

/* Optional image hook */
.llm-sacral-art__img {
  display: block;
  max-width: min(100%, 12rem);
  height: auto;
  margin: 0 auto;
  border-radius: var(--llm-sacral-radius-card);
}

/* --- Card ornament hook (Hub collection cards) --- */
.llm-sacred-sigil {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), rgba(201, 162, 39, 0.12));
  box-shadow: 0 2px 10px rgba(26, 26, 46, 0.06);
  position: relative;
}

.llm-sacred-sigil::after {
  content: "✦";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--llm-sacral-gold);
  opacity: 0.9;
}

/* --- Callouts (shared naming for future modules) --- */
.llm-callout {
  border-radius: 14px;
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  transition: box-shadow var(--llm-sacral-transition), transform var(--llm-sacral-transition);
}

.llm-callout--key-insight {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.12), rgba(255, 251, 245, 0.95));
  border-color: rgba(201, 162, 39, 0.22);
}

.llm-callout--life-app {
  background: linear-gradient(135deg, var(--llm-sacral-teal-soft), rgba(255, 255, 255, 0.85));
  border-color: rgba(42, 122, 110, 0.2);
}

.llm-callout--practice {
  background: linear-gradient(135deg, var(--llm-sacral-teal-soft), rgba(255, 255, 255, 0.9));
  border-color: rgba(42, 122, 110, 0.2);
}

.llm-callout--reflection {
  background: linear-gradient(135deg, var(--llm-sacral-lavender-soft), rgba(255, 255, 255, 0.9));
  border-color: rgba(123, 107, 168, 0.2);
}

.llm-callout--why {
  background: linear-gradient(135deg, var(--llm-sacral-saffron-soft), rgba(255, 255, 255, 0.92));
  border-color: rgba(199, 107, 46, 0.2);
}

/* Alias for “why it matters” copy blocks */
.llm-callout--why-matters {
  background: linear-gradient(135deg, var(--llm-sacral-saffron-soft), rgba(255, 255, 255, 0.92));
  border-color: rgba(199, 107, 46, 0.2);
}

/* --- Buttons (layer on top of app .upa-btn / .usp-btn) --- */
.llm-sacred-btn-focus:focus-visible {
  outline: 2px solid var(--llm-sacral-indigo);
  outline-offset: 2px;
}

/* --- Decorative art slots (CSS-only; swap inner for <img class="llm-sacral-art__img">) --- */
.llm-sacral-art-slot {
  position: relative;
  width: min(100%, 7.5rem);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.88;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 6px 24px rgba(26, 26, 46, 0.06);
}

.llm-sacral-art-slot--om {
  background: conic-gradient(from 200deg, rgba(201, 162, 39, 0.2), rgba(61, 79, 122, 0.14), rgba(42, 122, 110, 0.14), rgba(201, 162, 39, 0.2));
}

.llm-sacral-art-slot--lotus {
  background:
    radial-gradient(circle at 50% 72%, rgba(201, 162, 39, 0.25) 0%, transparent 38%),
    radial-gradient(ellipse 80% 35% at 50% 38%, rgba(123, 107, 168, 0.12) 0%, transparent 55%),
    radial-gradient(circle at 30% 55%, rgba(255, 255, 255, 0.85) 0%, transparent 25%),
    radial-gradient(circle at 70% 55%, rgba(255, 255, 255, 0.85) 0%, transparent 25%),
    linear-gradient(165deg, #fffbf8, #f3f0fb);
}

.llm-sacral-art-slot--lamp {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 220, 160, 0.9) 0%, rgba(255, 200, 120, 0.35) 28%, transparent 42%),
    linear-gradient(180deg, rgba(61, 79, 122, 0.08) 0%, transparent 45%),
    linear-gradient(145deg, #fff9f0, #eef3fb);
}

.llm-sacral-art-slot--hansa {
  background:
    radial-gradient(ellipse 70% 45% at 50% 55%, rgba(255, 255, 255, 0.95) 0%, transparent 60%),
    linear-gradient(200deg, rgba(61, 79, 122, 0.1), rgba(201, 162, 39, 0.08));
}

.llm-sacral-art-slot--meditate {
  background:
    radial-gradient(ellipse 55% 22% at 50% 62%, rgba(26, 26, 46, 0.2) 0%, transparent 70%),
    radial-gradient(circle at 50% 38%, rgba(61, 79, 122, 0.12) 0%, transparent 45%),
    linear-gradient(180deg, #f5f8ff, #faf6ff);
}

.llm-sacral-art-slot--tree {
  background:
    linear-gradient(90deg, transparent 48%, rgba(42, 122, 110, 0.15) 48%, rgba(42, 122, 110, 0.15) 52%, transparent 52%),
    radial-gradient(circle at 50% 18%, rgba(42, 122, 110, 0.22) 0%, transparent 35%),
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(61, 79, 122, 0.08) 0%, transparent 55%),
    linear-gradient(170deg, #f8fbff, #f4faf6);
}

/* Two birds metaphor — subtle twin shapes */
.llm-sacral-art-slot--two-birds {
  background:
    radial-gradient(ellipse 28% 18% at 32% 42%, rgba(61, 79, 122, 0.2) 0%, transparent 70%),
    radial-gradient(ellipse 28% 18% at 68% 42%, rgba(61, 79, 122, 0.16) 0%, transparent 70%),
    linear-gradient(165deg, #f8fbff, #faf8f5);
}

.llm-sacral-art-slot--mandala-soft {
  background:
    repeating-conic-gradient(from 0deg, rgba(123, 107, 168, 0.06) 0deg 18deg, transparent 18deg 36deg),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.75) 0%, transparent 70%),
    linear-gradient(145deg, #fdf9ff, #f5f8ff);
}

.llm-sacral-art-slot--xs {
  width: 2.35rem;
  max-width: none;
  aspect-ratio: 1;
  flex: 0 0 auto;
}