/* components.css — reusable pieces. No page-specific composition here. */

/* Mono eyebrow. Carries section numbers and metadata labels — the main
   device that makes the site read as technical documentation. */
.ev-label {
  font-family: var(--ev-font-mono);
  font-size: var(--ev-t8);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ev-muted);
  margin: 0 0 var(--ev-s2);
  max-width: none;
}

/* Hairline divider used at section boundaries. */
.ev-rule {
  height: 1px;
  background: var(--ev-rule);
  border: 0;
  margin: var(--ev-s5) 0;
}

/* Vertical rhythm for a page section. */
.ev-section {
  padding-block: var(--ev-section-y);
}

/* ---- Buttons ---------------------------------------------------------- */

.ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ev-s1);
  font-family: var(--ev-font-body);
  font-size: var(--ev-t6);
  font-weight: 500;
  line-height: 1;
  padding: 14px var(--ev-s3);
  border-radius: var(--ev-r-md);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--ev-dur-fast) ease-in-out,
    border-color var(--ev-dur-fast) ease-in-out,
    color var(--ev-dur-fast) ease-in-out,
    transform var(--ev-dur-fast) ease-in-out;
}

.ev-btn + .ev-btn { margin-left: var(--ev-s2); }

/* Solid ochre. White on #B4530A measures 5.02:1 — AA for normal text.
   Do not lighten the background. */
.ev-btn--primary {
  background: var(--ev-accent);
  color: #FFFFFF;
}

.ev-btn--primary:hover {
  background: #994508;
  transform: translateY(-1px);
}

:root[data-theme="dark"] .ev-btn--primary {
  color: #12141A; /* dark ink on lifted ochre — inverted for contrast */
}

:root[data-theme="dark"] .ev-btn--primary:hover {
  background: #F09843;
}

.ev-btn--ghost {
  background: transparent;
  color: var(--ev-fg);
  border-color: var(--ev-rule);
}

.ev-btn--ghost:hover {
  border-color: var(--ev-fg);
  transform: translateY(-1px);
}

/* ---- Card ------------------------------------------------------------- */

/* Hairline border, no shadow. Shadows are the fastest way to make a page
   look like a template. */
.ev-card {
  background: var(--ev-card);
  border: 1px solid var(--ev-rule);
  border-radius: var(--ev-r-lg);
  padding: var(--ev-s4);
}

.ev-card > :last-child { margin-bottom: 0; }

/* ---- Capability list -------------------------------------------------- */

/* A numbered list, not an icon grid. The counter is set in mono and
   coloured ochre — one of the few places the accent appears. */
.ev-caplist {
  list-style: none;
  counter-reset: ev-cap;
  margin: 0;
  padding: 0;
  max-width: none;
  border-top: 1px solid var(--ev-rule);
}

.ev-caplist__item {
  counter-increment: ev-cap;
  display: grid;
  grid-template-columns: 4ch 1fr;
  gap: var(--ev-s3);
  align-items: start;
  padding-block: var(--ev-s4);
  border-bottom: 1px solid var(--ev-rule);
  margin: 0;
}

.ev-caplist__item::before {
  content: counter(ev-cap, decimal-leading-zero);
  font-family: var(--ev-font-mono);
  font-size: var(--ev-t8);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ev-accent);
  padding-top: 0.55em;
}

.ev-caplist__item h3 {
  font-size: var(--ev-t4);
  margin-bottom: var(--ev-s1);
}

.ev-caplist__item p {
  color: var(--ev-muted);
  margin-bottom: 0;
}

@media (max-width: 599px) {
  .ev-caplist__item {
    grid-template-columns: 1fr;
    gap: var(--ev-s1);
  }
  .ev-caplist__item::before { padding-top: 0; }
}

/* ---- Stat ------------------------------------------------------------- */

/* Tabular figures so columns of numbers align. Never animated. */
.ev-stat {
  border-left: 2px solid var(--ev-accent);
  padding-left: var(--ev-s3);
}

.ev-stat__value {
  font-family: var(--ev-font-display);
  font-size: var(--ev-t2);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--ev-s1);
  color: var(--ev-fg);
}

.ev-stat__label {
  font-family: var(--ev-font-mono);
  font-size: var(--ev-t8);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ev-muted);
  margin: 0;
}

/* ---- Reveal ------------------------------------------------------------ */

/* Fade-and-rise on entry. Sections only — never individual elements.
   The `js` guard means content stays visible if the script fails. */
.js .ev-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--ev-dur-base) var(--ev-ease-out),
    transform var(--ev-dur-base) var(--ev-ease-out);
}

.js .ev-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .ev-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}