/**
 * smefinancing-ecf.css — Equity Crowdfunding (ECF) use-case page
 * (/smefinancing/ecf). Loaded IN ADDITION to smefinancing-usecase.css and
 * smefinancing-usecase-fx.css: it reuses the stable .alx-uc shell plus the
 * shared FX eyecatcher layer, and adds the EQUITY-specific modules that make
 * this page its own thing — an equity facts panel, an "ECF vs P2P" chooser and
 * a horizontal round timeline.
 *
 * Accent: on-brand GOLD (equity / ownership / upside) — NOT violet. The hero
 * and CTA backgrounds are owned by the FX layer (blue mesh + gold glow), so
 * this file only themes the ECF-specific modules. Token-based, dark-mode aware.
 * Applied via `.alx-uc--ecf` (together with `.alx-uc--fx`).
 */

.alx-uc--ecf { --ecf-accent: #E0A020; --ecf-accent-soft: rgba(224, 160, 32, .14); }
:root[data-theme="dark"] .alx-uc--ecf { --ecf-accent: #F2B646; --ecf-accent-soft: rgba(242, 182, 70, .20); }

/* Gold accent on the equity-signalling controls (hero/CTA bg come from FX) */
.alx-uc--ecf .alx-uc-btn--primary { background: var(--ecf-accent); }
.alx-uc--ecf .alx-uc-btn--primary:hover { background: #c4881a; }
.alx-uc--ecf .alx-uc-btn--ghost { color: var(--ecf-accent); border-color: var(--ecf-accent); }
.alx-uc--ecf .alx-uc-btn--ghost:hover { background: var(--ecf-accent-soft); }
.alx-uc--ecf .alx-uc-kicker { color: var(--ecf-accent); background: var(--ecf-accent-soft); }
.alx-uc--ecf .alx-uc-cta .alx-uc-btn--primary { background: #fff; color: var(--ecf-accent); }
.alx-uc--ecf .alx-uc-cta .alx-uc-btn--primary:hover { background: #fff5e6; }

/* ── Equity facts panel (replaces the P2P SmeFactBox) ── */
.alx-ecf-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  margin: var(--sp-xl) 0;
}
.alx-ecf-fact {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--ecf-accent);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
  box-shadow: var(--shadow);
}
.alx-ecf-fact .k {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 6px;
}
.alx-ecf-fact .v { font-family: var(--font-display); font-weight: 700; color: var(--c-text); font-size: 1.02rem; line-height: 1.25; }
.alx-ecf-facts-note { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--c-muted); line-height: 1.5; }

/* ── ECF vs P2P chooser ── */
.alx-ecf-choose { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.alx-ecf-col {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--sp-lg) var(--sp-xl);
}
.alx-ecf-col.pick { border-top: 3px solid var(--ecf-accent); }
.alx-ecf-col h3 { font-family: var(--font-display); font-weight: 700; color: var(--c-text); margin: 0 0 var(--sp-sm); }
.alx-ecf-col ul { list-style: none; margin: 0; padding: 0; }
.alx-ecf-col li { position: relative; padding-left: 22px; margin-bottom: 8px; color: var(--c-body); font-size: .92rem; line-height: 1.5; }
.alx-ecf-col li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px;
  border-radius: 3px; background: var(--ecf-accent-soft); border: 1px solid var(--ecf-accent);
}
.alx-ecf-col.alt li::before { background: var(--c-chip); border-color: var(--c-line); }
.alx-ecf-col a { color: var(--ecf-accent); font-family: var(--font-display); font-weight: 600; font-size: .9rem; text-decoration: none; }
.alx-ecf-col a:hover { text-decoration: underline; }

/* ── Round timeline (horizontal) ── */
.alx-ecf-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); position: relative; }
.alx-ecf-tl {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--sp-lg);
}
.alx-ecf-tl .n {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ecf-accent); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-sm);
}
.alx-ecf-tl:last-child .n { background: linear-gradient(135deg, var(--ecf-accent), #c4881a); }
.alx-ecf-tl h3 { font-family: var(--font-display); font-size: 1rem; margin: 0 0 4px; color: var(--c-text); }
.alx-ecf-tl p { margin: 0; color: var(--c-body); font-size: .88rem; line-height: 1.5; }

@media (max-width: 860px) {
  .alx-ecf-facts { grid-template-columns: 1fr 1fr; }
  .alx-ecf-choose { grid-template-columns: 1fr; }
  .alx-ecf-timeline { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .alx-ecf-facts { grid-template-columns: 1fr; }
  .alx-ecf-timeline { grid-template-columns: 1fr; }
}