/* ============================================================
   MODULES.CSS — Spēka Pasaule Cēsis
   Reusable component patterns
   ============================================================ */

/* --- Eyebrow label --- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--s-4);
}

/* --- Section container --- */
.section {
  padding-block: var(--s-24);
}

.section--tight {
  padding-block: var(--s-16);
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.container--narrow {
  max-width: var(--max-w-narrow);
}

/* --- Divider --- */
.divider {
  border: none;
  border-top: var(--line);
  margin: 0;
}

/* --- Card --- */
.card {
  background: var(--color-card);
  border: var(--line);
  border-radius: 2px;
  padding: var(--s-8);
}

/* --- Gold rule --- */
.gold-rule {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-accent);
  margin-block: var(--s-6);
}

/* --- Button base --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 0.85em 1.75em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  background: var(--color-accent);
  color: #0D0D0D;
  border-color: var(--color-accent);
}

.btn--primary:hover {
  background: #dba030;
  border-color: #dba030;
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* --- Grid utilities --- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 > *:last-child {
    grid-column: 1 / -1;
    max-width: 480px;
  }
}

/* --- Stat item --- */
.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.stat-number {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.01em;
}

.stat-label {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--color-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --- Reveal animation classes --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Utility --- */
.text-accent { color: var(--color-accent); }
.text-muted  { color: var(--color-muted); }
.text-center { text-align: center; }

.mt-4  { margin-top: var(--s-4); }
.mt-6  { margin-top: var(--s-6); }
.mt-8  { margin-top: var(--s-8); }
.mt-12 { margin-top: var(--s-12); }