/* =========================================================================
   ep3-acc-card — Accelerator card component.
   Used on home (compact) and on the Accelerators directory (--directory).

   All tokens from webshield-navy.css.
   ========================================================================= */

.ep3-acc-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--ws-surface);
  border: 1px solid var(--ws-rule);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
.ep3-acc-card:hover {
  transform: translateY(-2px);
  border-color: var(--ws-ink-faint);
  box-shadow: 0 12px 28px rgba(11, 31, 58, 0.08);
}
.ep3-acc-card__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ws-surface-2);
  /* Duotone treatment unifies the 8 different art styles (Claude
     Design F·02). Hover reveals the original color. */
  position: relative;
  isolation: isolate;
}
.ep3-acc-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(55%) contrast(1.05) saturate(0.9);
  transition: filter 0.35s ease;
}
.ep3-acc-card__image::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--ws-ink);
  opacity: 0.12;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.ep3-acc-card:hover .ep3-acc-card__image img {
  filter: grayscale(0%) contrast(1);
}
.ep3-acc-card:hover .ep3-acc-card__image::after {
  opacity: 0;
}
.ep3-acc-card--coming-soon .ep3-acc-card__image img { opacity: 0.55; filter: grayscale(60%); }
.ep3-acc-card__soon {
  position: relative;
  margin-top: -36px;
  align-self: flex-start;
  background: var(--ws-accent);
  color: var(--ws-page);
  font-family: var(--ws-font-mono);
  font-size: 10px;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  padding: 4px 9px;
  margin-left: 22px;
}
.ep3-acc-card__body {
  padding: 22px 24px 24px;
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1;
  /* Fixed min-height keeps card bottoms aligned across uneven copy lengths
     (Claude Design F·03). */
  min-height: 200px;
}
.ep3-acc-card__title {
  font-family: var(--ws-font-display);
  font-size: 19px; font-weight: 500;
  line-height: 1.25; letter-spacing: -0.005em;
  color: var(--ws-ink);
  margin: 0;
}
.ep3-acc-card__desc {
  font-family: var(--ws-font-body);
  font-size: 14px; line-height: 1.55;
  color: var(--ws-ink-muted);
  margin: 0;
}
.ep3-acc-card__leaders {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ws-rule-faint);
  font-family: var(--ws-font-mono);
  /* A·01 — bumped from 10.5px/400 to 11.5px/500 alongside the hero eyebrow
     audit; same coral-eyebrow contrast logic, but on faint ink. */
  font-size: 11.5px; font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-ink-faint);
  text-transform: uppercase;
  margin: 0;
}

/* ── Directory variant ───────────────────────────────────────────
   Used on /initiatives.html. Slightly larger card with a 4-cell
   metadata bar (members · affiliates · since · location) above the
   leaders line. */
.ep3-acc-card--directory .ep3-acc-card__body {
  padding: 26px 28px 28px;
  gap: 14px;
}
.ep3-acc-card--directory .ep3-acc-card__title {
  font-size: 22px;
}
.ep3-acc-card--directory .ep3-acc-card__desc {
  font-size: 15px;
  line-height: 1.6;
}
.ep3-acc-card__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--ws-rule-faint);
}
.ep3-acc-card__meta-cell {
  display: flex; flex-direction: column;
  gap: 2px;
}
.ep3-acc-card__meta-num {
  font-family: var(--ws-font-display);
  font-size: 18px; font-weight: 500;
  line-height: 1;
  color: var(--ws-ink);
}
/* F·05 — Affiliates count uses mono numerals so the eye reads people-vs-orgs
   without needing a unit suffix. Members keeps the warmer serif. */
.ep3-acc-card__meta-num--mono {
  font-family: var(--ws-font-mono);
  font-size: 17px;
  letter-spacing: -0.01em;
}
/* F·04 — Vertical cell holds a categorical string (Healthcare, Foundations…)
   not a number. Drop the size so longer words ("Sustainability") fit the cell
   width and sit visually beside the numeric cells without dominating. */
.ep3-acc-card__meta-num--tag {
  font-size: 15px;
  line-height: 1.1;
}
.ep3-acc-card__meta-label {
  font-family: var(--ws-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-ink-faint);
}

/* When directory cards include both __meta and __leaders, the
   __leaders line uses a different separator since __meta already
   carries the top rule. */
.ep3-acc-card--directory .ep3-acc-card__leaders {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

@media (max-width: 720px) {
  .ep3-acc-card--directory .ep3-acc-card__body { padding: 22px 22px 24px; }
  .ep3-acc-card--directory .ep3-acc-card__title { font-size: 20px; }
  .ep3-acc-card__meta { grid-template-columns: repeat(2, 1fr); gap: 14px 16px; }
  /* Cap image height at small viewports so the title + body keep visible
     weight when the card stacks 1-up full-bleed (Claude Design M·03). */
  .ep3-acc-card__image { aspect-ratio: auto; max-height: 40vh; }
  .ep3-acc-card__body { min-height: 0; }
}

/* M·01 — Long leaders lines wrap to 2–3 messy rows on small mobile. Hide them
   on directory cards only; the meta-grid Affiliates count already carries the
   count, and the detail page surfaces the full leader list. Home compact cards
   keep the line — they have no meta-grid to compensate. */
@media (max-width: 600px) {
  .ep3-acc-card--directory .ep3-acc-card__leaders { display: none; }
}