/* ─────────────────────────────────────────────────────────────────
   emaitzak. — Brand component classes
   Klase hauek lockup-a, txapela, wordmark eta beste erabilera-elementuak
   ematen dituzte. Erabili Django template-etan edo edozein HTML-tan.
   Mendekotasunak: emaitzak-tokens.css aurretik kargatu behar da.
   v1.0 · 2026
   ───────────────────────────────────────────────────────────────── */

/* ─── Txapela (chip) ─────────────────────────────────────────────
   Lauki ikonoa.  --em-chip-size aldagaiaz tamaina kontrola.
   Adib: <span class="em-chip" style="--em-chip-size: 64px"><span class="em-chip-e">e<span class="em-chip-d">.</span></span></span>
   ───────────────────────────────────────────────────────────────── */
.em-chip {
  --em-chip-size: 48px;
  width: var(--em-chip-size);
  height: var(--em-chip-size);
  background: var(--em-pine);
  border-radius: var(--em-radius-chip);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.em-chip--gold { background: var(--em-gold); }
.em-chip--cream { background: var(--em-cream); }
.em-chip--ink { background: var(--em-ink); }
.em-chip--outline {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--em-pine);
}

.em-chip-e {
  font-family: var(--em-font-sans);
  font-weight: 700;
  color: var(--em-cream);
  line-height: 1;
  letter-spacing: -0.06em;
  display: inline-flex;
  align-items: baseline;
  font-size: calc(var(--em-chip-size) * 0.72);
}
.em-chip-d { color: var(--em-gold); margin-left: -0.04em; }

.em-chip--gold .em-chip-e { color: var(--em-pine); }
.em-chip--gold .em-chip-d { color: var(--em-cream); }
.em-chip--cream .em-chip-e { color: var(--em-pine); }
.em-chip--outline .em-chip-e { color: var(--em-pine); }

/* ─── Wordmark ───────────────────────────────────────────────────
   "emaitzak." testua urrezko puntuaz.
   Adib: <span class="em-wm" style="--em-wm-size: 32px;">emaitzak<span class="em-wm-d">.</span></span>
   ───────────────────────────────────────────────────────────────── */
.em-wm {
  --em-wm-size: 24px;
  font-family: var(--em-font-sans);
  font-weight: 700;
  color: var(--em-pine);
  line-height: 0.88;
  letter-spacing: -0.045em;
  display: inline-flex;
  align-items: baseline;
  font-size: var(--em-wm-size);
}
.em-wm-d { color: var(--em-gold); }
.em-wm--light { color: var(--em-cream); }
.em-wm--light .em-wm-d { color: var(--em-gold); }
.em-wm--on-gold { color: var(--em-pine); }
.em-wm--on-gold .em-wm-d { color: var(--em-pine); }

/* ─── Lockup ─────────────────────────────────────────────────────
   Txapela + wordmark formatu horizontalean.
   gap = 0.20 × chip size, marka liburuko espezifikazioarekin bat.
   ───────────────────────────────────────────────────────────────── */
.em-lockup {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--em-chip-size, 48px) * 0.20);
}
.em-lockup-stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--em-chip-size, 48px) * 0.20);
}

/* ─── Brand surfaces ─────────────────────────────────────────────
   Atzealde tipikoak — kartel, dashboard, eta abar.
   ───────────────────────────────────────────────────────────────── */
.em-surface-pine {
  background: var(--em-pine);
  color: var(--em-cream);
}
.em-surface-cream {
  background: var(--em-cream);
  color: var(--em-ink);
}
.em-surface-paper {
  background: var(--em-paper);
  color: var(--em-ink);
}

/* ─── Buttons / CTA ──────────────────────────────────────────────
   CTA nagusia urrearen gainean — beti pinu testuarekin.
   ───────────────────────────────────────────────────────────────── */
.em-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--em-radius-pill);
  font-family: var(--em-font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease;
}
.em-btn:active { transform: translateY(1px); }
.em-btn--primary {
  background: var(--em-gold);
  color: var(--em-pine);
}
.em-btn--primary:hover { background: var(--em-gold-lo); }
.em-btn--secondary {
  background: transparent;
  color: var(--em-cream);
  border: 1.5px solid rgba(244, 239, 230, 0.55);
}
.em-btn--secondary:hover { border-color: var(--em-cream); }
.em-btn--ghost {
  background: transparent;
  color: var(--em-pine);
}
.em-btn--ghost:hover { background: var(--em-cream); }

/* ─── Caption / eyebrow ─────────────────────────────────────────── */
.em-eyebrow {
  font-family: var(--em-font-mono);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--em-gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.em-eyebrow::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: currentColor;
  display: inline-block;
}

.em-meta-label {
  font-family: var(--em-font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
}

/* ─── Live / status pills ───────────────────────────────────────── */
.em-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--em-radius-pill);
  font-family: var(--em-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.em-pill--live { background: var(--em-gold); color: var(--em-pine); }
.em-pill--ghost { background: transparent; color: var(--em-cream); box-shadow: inset 0 0 0 1px rgba(244, 239, 230, 0.4); }

/* ─── Scorecard ─────────────────────────────────────────────────── */
.em-score {
  background: var(--em-cream);
  color: var(--em-ink);
  border-radius: var(--em-radius-lg);
  border: 1px solid var(--em-rule);
  overflow: hidden;
}
.em-score__head {
  background: var(--em-pine);
  color: var(--em-cream);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--em-font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.em-score__body { padding: 24px; }
.em-score__big {
  font-family: var(--em-font-sans);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--em-pine);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.em-score__dash { color: var(--em-gold); margin: 0 6px; }
.em-score__second { opacity: 0.5; }

/* Tabular number helper for any data display */
.em-tab { font-variant-numeric: tabular-nums; }

/* ─── Watermark · the "e." behind a hero ────────────────────────── */
.em-watermark {
  position: absolute;
  font-family: var(--em-font-sans);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.08em;
  pointer-events: none;
  user-select: none;
  display: inline-flex;
  align-items: baseline;
  font-size: 460px;
  color: var(--em-cream);
  opacity: 0.10;
}
.em-watermark-d {
  color: var(--em-gold);
  opacity: 1;
}