/* ============================================================================
   EON PEPTIDES — Molecular-structure showcase section
   A self-contained "atom cloud + molecular data card" block rendered below the
   dossier on every product page. Data-driven from EON_PRODUCTS[slug].compound
   (see /assets/js/molecule.js). Scoped under `.emol` so it never collides with
   the existing `.dsr-mol` dossier section. Light-mode, brand-tokened.
   ============================================================================ */
.emol {
  --e-accent: var(--accent, #3A5D7A);
  --e-ink:    var(--ink, #15201E);
  --e-ink2:   var(--ink-2, #3A4744);
  --e-ink3:   var(--ink-3, #5F6A65);
  --e-line:   #E5E8EF;
  --e-line2:  #DCE0E9;
  --e-surface:#FFFFFF;
  --e-tint:   #EEF2F8;
  --e-ok:     var(--success, #1D7A4C);
  --e-mono:   var(--font-mono, "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace);
  --e-sans:   var(--font-sans, "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --e-rl: 16px;
  --e-rx: 22px;

  font-family: var(--e-sans);
  padding-block: clamp(44px, 4vw + 20px, 84px);
  border-top: 1px solid var(--e-line);
}
/* carries the tint of the dossier section this card replaces, so the
   alternating tinted/plain background rhythm stays intact (see molecule.js) */
.emol--bg { background: var(--dsr-bg2, #EBEFF5); }
.emol__wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(1.1rem, 0.6rem + 2vw, 1.5rem); }

/* ---- header ------------------------------------------------------------- */
.emol__head { max-width: 640px; margin-bottom: clamp(28px, 2vw + 16px, 44px); }
.emol__ey {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--e-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--e-accent);
  margin: 0 0 .85rem;
}
.emol__ey::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--e-accent); flex: 0 0 auto; }
.emol__h2 {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.05; color: var(--e-ink); margin: 0;
}
.emol__accent { color: var(--e-accent); }
.emol__lead { font-size: clamp(.95rem, .9rem + .3vw, 1.05rem); color: var(--e-ink2); line-height: 1.65; max-width: 54ch; margin: .9rem 0 0; }

/* ---- layout ------------------------------------------------------------- */
.emol__layout { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(24px, 3vw, 48px); align-items: center; }
@media (max-width: 860px) { .emol__layout { grid-template-columns: 1fr; gap: 28px; } }

/* ---- atom stage --------------------------------------------------------- */
.emol__atom { display: flex; flex-direction: column; gap: 16px; }
.emol__cloud {
  position: relative; height: 320px; width: 100%; border-radius: var(--e-rx); overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #FFFFFF 0%, #F3F6FB 74%, #EDF1F8 100%);
  border: 1px solid var(--e-line);
  box-shadow: 0 22px 50px -34px rgba(21, 32, 30, .35), inset 0 1px 26px rgba(15, 18, 24, .03);
}
@media (max-width: 520px) { .emol__cloud { height: 260px; } }
.emol__cloud canvas { display: block; width: 100%; height: 100%; }
.emol__legend { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; font-family: var(--e-mono); font-size: 11px; letter-spacing: .04em; color: var(--e-ink3); }
.emol__legend span { display: inline-flex; align-items: center; gap: 6px; }
.emol__legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ---- data card ---------------------------------------------------------- */
.emol__data {
  background: var(--e-surface); border-radius: var(--e-rx); overflow: hidden;
  border: 1px solid var(--e-line);
  box-shadow: 0 26px 60px -40px rgba(21, 32, 30, .4);
}
.emol__formula-box {
  padding: 22px 26px 24px;
  background: linear-gradient(180deg, var(--e-tint), rgba(255, 255, 255, 0) 92%);
  border-bottom: 1px solid var(--e-line);
}
.emol__mono-label { font-family: var(--e-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--e-ink3); }
.emol__formula { font-family: var(--e-mono); font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.35rem); font-weight: 600; letter-spacing: -.01em; color: var(--e-ink); margin-top: 10px; line-height: 1; word-break: break-word; }
.emol__formula sub { font-size: .56em; font-weight: 500; color: var(--e-ink2); vertical-align: -.25em; margin-left: .5px; }

.emol__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--e-line); margin: 0; }
@media (max-width: 560px) { .emol__grid { grid-template-columns: repeat(2, 1fr); } }
.emol__cell { background: var(--e-surface); padding: 17px 20px; min-width: 0; }
.emol__cell dt { font-family: var(--e-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--e-ink3); margin: 0; }
.emol__cell dd { margin: 7px 0 0; font-size: .92rem; font-weight: 600; font-family: var(--e-mono); color: var(--e-ink); line-height: 1.35; word-break: break-word; }
.emol__cell dd.ok { color: var(--e-ok); }

/* ---- reveal (respects reduced-motion via .emol--anim toggled in JS) ------ */
.emol--anim .emol__atom,
.emol--anim .emol__data { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.emol--anim .emol__data { transition-delay: .08s; }
.emol--anim.is-in .emol__atom,
.emol--anim.is-in .emol__data { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .emol--anim .emol__atom, .emol--anim .emol__data { opacity: 1; transform: none; transition: none; }
}