/* =========================================================================
   ep3-aff-card — Affiliate card component.
   Used on the Affiliates directory (/affiliates.html). Note the simpler
   ep3-aff-tile (logo-only) used in the home page strip is defined in
   ep3-home.css; this card is the richer directory variant.

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

.ep3-aff-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--ws-surface);
  border: 1px solid var(--ws-rule);
  padding: 28px 24px 24px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ep3-aff-card:hover {
  transform: translateY(-2px);
  border-color: var(--ws-ink-faint);
  box-shadow: 0 12px 28px rgba(11, 31, 58, 0.08);
}

/* S·01 — Logo slot locked to 5:3 aspect (was fixed 72px) so every card
   has the same logo frame regardless of viewport. The img caps at
   max-width:70%; max-height:60% put consistent negative space around
   every logo — a wide logo hits the 70% width cap, a tall one hits the
   60% height cap. Net effect: tiny logos are still tiny, but the chrome
   stops making large ones shout next to them. */
.ep3-aff-card__logo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 5 / 3;
  margin-bottom: 22px;
}
.ep3-aff-card__logo img {
  max-width: 70%; max-height: 60%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.72;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.ep3-aff-card:hover .ep3-aff-card__logo img { filter: none; opacity: 1; }

/* F·03 — Serif type-mark fallback for affiliates whose supplied logo
   reads as a visual blank on warm bone (Quantropi's hairline lowercase,
   Teal's tiny leaf, ProNatura's lost seal, Healing Fields). Opt-in via
   `wordmark_fallback: true` in affiliate-organizations.json. Rich can
   extend the flag list as more cases are identified.

   Sits in the same 5:3 slot as the img so the grid rhythm is preserved.
   Serif (matches the .ep3-aff-card__name register directly below) so it
   reads as a typeset wordmark, not a fallback. */
.ep3-aff-card__wordmark {
  font-family: var(--ws-font-display);
  font-size: 28px; font-weight: 400;
  line-height: 1.1; letter-spacing: -0.005em;
  color: var(--ws-ink);
  text-align: center;
  padding: 0 12px;
  /* Multi-word names wrap to two lines; clamp at three so a long org
     name can't blow out the slot. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: opacity 0.2s ease;
  opacity: 0.85;
}
.ep3-aff-card:hover .ep3-aff-card__wordmark { opacity: 1; }

.ep3-aff-card__name {
  font-family: var(--ws-font-display);
  font-size: 16px; font-weight: 500;
  line-height: 1.25; letter-spacing: -0.005em;
  color: var(--ws-ink);
  margin: 0 0 8px;
}
/* F·01 — Tagline lengths in source data swing from 5 words to 30+.
   2-line clamp restores grid rhythm so the URL line anchors at the same
   visual position across a row. The full tagline remains accessible
   via the `title` attribute (hover-tooltip discovery), and in full on
   the affiliate's external site one click away. */
.ep3-aff-card__info {
  font-family: var(--ws-font-body);
  font-size: 13px; line-height: 1.5;
  color: var(--ws-ink-muted);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep3-aff-card__url {
  margin-top: auto;
  font-family: var(--ws-font-mono);
  /* A·01 — bump weight to 500 so the secondary affordance reads as a
     click target, not background chrome. Mirrors the eyebrow fix. */
  font-size: 10.5px; font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-ink-faint);
  text-transform: lowercase;
  /* Long URLs (Center on Media's 62-char Harvard path) shouldn't blow
     out the card width on narrow viewports. Pair with min-content
     guard on .ep3-aff-grid columns. */
  overflow-wrap: anywhere;
}
.ep3-aff-card:hover .ep3-aff-card__url { color: var(--ws-accent); }

/* Hidden state for the client-side search filter. */
.ep3-aff-card[hidden] { display: none; }

/* M·01 — Mobile. At 2-up the card width drops to ~165px, which means a
   logo at the desktop cap (70% × 60%) renders at ~115×46px — small
   logos read as dots. Loosen the caps to 80%/65% so tiny logos become
   at-least-readable; logos that were already filling their slot are
   unaffected by the ceiling change.

   Tagline clamp loosens from 2 → 3 lines on mobile because lines wrap
   shorter at 2-up and 2 becomes too lossy. Grid stays 2-up (single-up
   would double the scroll length on what is already a 12-row wall). */
@media (max-width: 760px) {
  .ep3-aff-card__logo img {
    max-width: 80%; max-height: 65%;
  }
  .ep3-aff-card__info {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}