/* =========================================================================
   Ecosystem block — shared QPN-ecosystem cross-link component.

   Source: webshield-dev/website site/css/webshield-home.css §"Beat 7
   Ecosystem" (lines 159–268). Extracted verbatim into its own per-component
   file because on EP3 the block lives on the home page (D8) and is the
   visual end-cap before the footer; treating it as its own component keeps
   it portable to other sibling sites later.

   Tokens come from webshield-navy.css; this file does not redefine any.

   The canonical 5-card grid order across all sibling sites is:
     01 · WebShield, Inc.
     02 · EP3 Foundation       ← --here on this site
     03 · QPN Catalyst
     04 · Quantum Privacy LLC  ← --disabled (no live site)
     05 · EP3 Networks         ← --disabled (no live site)
   ========================================================================= */

.ws-eco {
  background: var(--ws-page);
  border-top: 1px solid var(--ws-rule);
}
.ws-eco__wrap { max-width: 1200px; margin: 0 auto; padding: 72px 48px 96px; }
.ws-eco__eyebrow {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-label);
  letter-spacing: var(--ws-tracking-label);
  text-transform: uppercase;
  color: var(--ws-ink-faint); font-weight: 500;
  margin-bottom: 14px;
}
.ws-eco__title {
  font-family: var(--ws-font-display);
  font-size: 28px; font-weight: 500;
  line-height: 1.2; letter-spacing: -0.015em;
  color: var(--ws-ink);
  margin: 0 0 32px;
}
/* Optional lede between title and grid. Currently unused on EP3; sibling
   webshield-dev/website uses it on /investors. */
.ws-eco__intro {
  font-family: var(--ws-font-display);
  font-size: var(--ws-fs-lede);
  line-height: var(--ws-lh-body);
  color: var(--ws-ink-muted);
  max-width: 720px;
  margin: 0 0 36px;
  text-wrap: pretty;
}
.ws-eco__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.ws-eco__card {
  background: var(--ws-surface);
  border: 1px solid var(--ws-rule);
  padding: 22px 22px 20px;
  font-family: var(--ws-font-body);
  height: 100%;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.ws-eco__card--here { border-left: 3px solid var(--ws-accent); }
.ws-eco__card--disabled { opacity: 0.78; }
.ws-eco__card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px; min-height: 18px;
}
.ws-eco__card-ord {
  font-family: var(--ws-font-mono);
  font-size: 10.5px;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-ink-faint);
}
/* Optional role-tag pill in the card head. Currently unused on EP3. */
.ws-eco__card-roletag {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-micro);
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-ink-faint);
  border: 1px solid var(--ws-rule);
  padding: 2px 5px;
  white-space: nowrap;
  margin-left: auto;
}
.ws-eco__card-here-tag {
  font-family: var(--ws-font-mono);
  font-size: 10px;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-accent);
  background: var(--ws-surface-2);
  padding: 3px 8px;
  border: 1px solid var(--ws-accent);
}
.ws-eco__card-name {
  font-family: var(--ws-font-display);
  font-size: 18px; font-weight: 500;
  letter-spacing: -0.005em; line-height: 1.2;
  color: var(--ws-ink);
  margin-bottom: 6px;
}
.ws-eco__card-domain {
  font-family: var(--ws-font-mono);
  font-size: 11px;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-ink-muted);
  margin-bottom: 12px;
}
.ws-eco__card--disabled .ws-eco__card-domain {
  color: var(--ws-ink-faint); font-style: italic;
}
.ws-eco__card-desc {
  font-size: 13px; line-height: 1.55;
  color: var(--ws-ink-muted);
}

@media (max-width: 1100px) { .ws-eco__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .ws-eco__grid { grid-template-columns: 1fr; } }