/* GovernanceSection — ported from src/components/GovernanceSection.tsx.
   Mobile-first; md = 768px, lg = 1024px. */

.governance {
  position: relative;
  padding-block: 8rem;            /* py-32 */
  overflow: hidden;
}

/* absolute inset-0 background layers */
.governance__bg,
.governance__grid {
  position: absolute;
  inset: 0;
}
.governance__bg { background: var(--color-deep); }
.governance__grid { opacity: 0.15; }   /* grid-pattern opacity-15 */

.governance__inner {
  position: relative;
  z-index: 10;
  max-width: 80rem;               /* max-w-7xl */
  margin-inline: auto;
  padding-inline: 1.5rem;         /* px-6 */
}

/* ── Header ── */
.governance__header {
  max-width: 48rem;               /* max-w-3xl */
  margin-bottom: 5rem;            /* mb-20 */
}
.governance__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;                /* text-[10px] */
  text-transform: uppercase;
  letter-spacing: 0.3em;          /* tracking-[0.3em] */
  color: var(--color-accent);
  margin-bottom: 1.5rem;          /* mb-6 */
}
.governance__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-weight: 700;
  font-size: 2.25rem;             /* text-4xl */
  line-height: 1.05;              /* leading-[1.05] */
  margin: 0 0 2rem;               /* mb-8 */
}
.governance__title-em {
  font-style: normal;             /* not-italic */
  font-family: var(--font-sans);
  font-weight: 700;               /* font-bold */
}

/* ── Governance flow ── */
.governance__flow {
  display: grid;
  gap: 2rem;                      /* gap-8 */
  margin-bottom: 5rem;            /* mb-20 */
}

.governance__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2rem;                  /* p-8 */
}

.governance__icon {
  width: 3rem;                    /* w-12 */
  height: 3rem;                   /* h-12 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;          /* mb-6 */
  border: 1px solid transparent;
}
.governance__icon--accent { border-color: rgba(0, 229, 255, 0.3); }   /* accent/30 */
.governance__icon--blue   { border-color: rgba(0, 229, 255, 0.3); }  /* accent/30 (was blue) */
.governance__icon--purple { border-color: rgba(0, 229, 255, 0.3); }  /* accent/30 (was purple) */

.governance__icon-letter {
  font-family: var(--font-mono);
  font-size: 1.125rem;            /* text-lg */
  font-weight: 700;
}
.governance__icon-letter--accent { color: var(--color-accent); }
.governance__icon-letter--blue   { color: var(--color-accent); }
.governance__icon-letter--purple { color: var(--color-accent); }

.governance__card-title {
  font-size: 1.25rem;             /* text-xl */
  font-weight: 600;               /* font-semibold */
  margin: 0 0 1rem;               /* mb-4 */
}
.governance__card-text {
  font-size: 0.875rem;            /* text-sm */
  color: var(--color-text-muted);
  line-height: 1.625;             /* leading-relaxed */
  margin: 0 0 1.5rem;             /* mb-6 */
}
.governance__card-foot {
  padding-top: 1rem;              /* pt-4 */
  border-top: 1px solid var(--color-border);
}
.governance__card-note {
  font-size: 10px;                /* text-[10px] */
  font-family: var(--font-mono);
  color: var(--color-text-dim);
}

/* ── Quantitative Filter ── */
.governance__filter {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 2rem;                  /* p-8 */
}
.governance__filter-grid {
  display: grid;
  gap: 3rem;                      /* gap-12 */
}
.governance__filter-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;                    /* space-y-6 */
}
.governance__filter-label {
  font-family: var(--font-mono);
  font-size: 0.875rem;            /* text-sm */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;         /* tracking-wider */
  color: var(--color-accent);
  margin: 0;
}
.governance__filter-lede {
  font-size: 1.5rem;              /* text-2xl */
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.375;             /* leading-snug */
  margin: 0;
}
.governance__filter-text {
  font-size: 0.875rem;            /* text-sm */
  color: var(--color-text-muted);
  line-height: 1.625;             /* leading-relaxed */
  margin: 0;
}

.governance__metrics {
  display: flex;
  flex-direction: column;
  gap: 1rem;                      /* space-y-4 */
}
.governance__metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;         /* py-3 */
  border-bottom: 1px solid rgba(34, 42, 56, 0.5); /* border-border/50 */
}
.governance__metric-name {
  font-size: 0.875rem;            /* text-sm */
  font-weight: 500;               /* font-medium */
}
.governance__metric-threshold {
  font-family: var(--font-mono);
  font-size: 0.75rem;             /* text-xs */
  color: var(--color-accent);
}
.governance__metric-note {
  font-size: 10px;                /* text-[10px] */
  font-family: var(--font-mono);
  color: var(--color-text-dim);
  padding-top: 0.5rem;            /* pt-2 */
  margin: 0;
}

/* ── Human Participation ── */
.governance__participation {
  margin-top: 3rem;               /* mt-12 */
  display: grid;
  gap: 1.5rem;                    /* gap-6 */
}
.governance__pcard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2rem;                  /* p-8 */
}
.governance__pcard-head {
  display: flex;
  align-items: center;
  gap: 1rem;                      /* gap-4 */
  margin-bottom: 1.5rem;          /* mb-6 */
}
.governance__pcard-icon {
  width: 2.5rem;                  /* w-10 */
  height: 2.5rem;                 /* h-10 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.125rem;            /* text-lg */
  background: rgba(0, 229, 255, 0.1);   /* accent/10 */
  border: 1px solid rgba(0, 229, 255, 0.2); /* accent/20 */
  color: var(--color-accent);
}
.governance__pcard-mode {
  font-weight: 600;               /* font-semibold */
  font-size: 1.125rem;            /* text-lg */
  margin: 0;
}
.governance__pcard-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;                      /* space-y-4 */
}
.governance__pcard-key {
  font-size: 10px;                /* text-[10px] */
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;          /* tracking-widest */
  color: var(--color-text-dim);
}
.governance__pcard-value {
  font-size: 0.875rem;            /* text-sm */
  color: var(--color-text-muted);
  margin-top: 0.25rem;            /* mt-1 */
  margin-bottom: 0;
}

/* ── Responsive ── */
@media (min-width: 768px) {
  .governance__title { font-size: 3rem; }            /* md:text-5xl */
  .governance__participation { grid-template-columns: repeat(2, 1fr); } /* md:grid-cols-2 */
}

@media (min-width: 1024px) {
  .governance { padding-block: 10rem; }              /* lg:py-40 */
  .governance__inner { padding-inline: 2rem; }       /* lg:px-8 */
  .governance__title { font-size: 3.75rem; }         /* lg:text-6xl */
  .governance__flow { grid-template-columns: repeat(3, 1fr); } /* lg:grid-cols-3 */
  .governance__filter { padding: 3rem; }             /* lg:p-12 */
  .governance__filter-grid { grid-template-columns: 1fr 1fr; } /* lg:grid-cols-[1fr_1fr] */
}