/* ============================================================
   aff-components — component styles. TOKENS ONLY (aff-child
   variables.css). A literal color here is a bug.
   ============================================================ */

/* ---------- Auto-Disclosure Bar ---------- */
.aff-disclosure {
  background: color-mix(in srgb, var(--surface), var(--border) 45%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: calc(var(--space-unit) * 0.6) var(--space-unit);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--body), var(--surface) 15%);
  margin-bottom: calc(var(--space-unit) * 1.5);
}
.aff-disclosure a { color: var(--brand); }

/* ---------- Verdict Box ---------- */
.aff-verdict {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  margin: calc(var(--space-unit) * 1.5) 0;
  background: #fff;
}
.aff-verdict__heading {
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: calc(var(--space-unit) * 0.5) var(--space-unit);
}
.aff-verdict__pick {
  display: flex;
  align-items: center;
  gap: var(--space-unit);
  padding: var(--space-unit);
  border-top: 1px solid var(--border);
}
.aff-verdict__pick:first-of-type { border-top: 0; }
.aff-verdict__role {
  flex: 0 0 110px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand);
}
.aff-verdict__body { flex: 1 1 auto; }
.aff-verdict__name, .aff-verdict__name a {
  font-weight: 600;
  color: var(--ink);
}
.aff-verdict__blurb {
  margin: 0.25em 0 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--body), var(--surface) 20%);
}
.aff-verdict__cta { flex: 0 0 auto; }
@media (max-width: 640px) {
  .aff-verdict__pick { flex-wrap: wrap; }
  .aff-verdict__role { flex-basis: 100%; }
}

/* CTA styling for AAWP text links wrapped by components (button look) */
.aff-cta-wrap a, .aff-cta-wrap a:visited {
  display: inline-block;
  background: var(--cta);
  color: var(--cta-text);
  font-weight: 700;
  font-size: 14px;
  padding: 0.55em 1em;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--cta), #000 12%);
}
.aff-cta-wrap a:hover {
  background: color-mix(in srgb, var(--cta), #000 10%);
  color: var(--cta-text);
}

/* ---------- Rating Rubric ---------- */
.aff-rubric {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-unit);
  background: #fff;
  margin: calc(var(--space-unit) * 1.5) 0;
}
.aff-rubric__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-unit);
  margin-bottom: calc(var(--space-unit) * 0.75);
}
.aff-rubric__title { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.aff-rubric__avg {
  background: var(--brand);
  color: var(--surface);
  font-weight: 700;
  font-size: 18px;
  border-radius: var(--radius);
  padding: 0.2em 0.55em;
}
.aff-rubric__row {
  display: flex;
  align-items: center;
  gap: calc(var(--space-unit) * 0.75);
  padding: calc(var(--space-unit) * 0.3) 0;
}
.aff-rubric__label { flex: 0 0 200px; font-size: 14px; font-weight: 600; }
.aff-rubric__bar {
  flex: 1 1 auto;
  height: 10px;
  background: color-mix(in srgb, var(--surface), var(--border) 60%);
  border-radius: 999px;
  overflow: hidden;
}
.aff-rubric__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand), var(--surface) 25%), var(--brand));
  border-radius: 999px;
}
.aff-rubric__score { flex: 0 0 48px; text-align: right; font-size: 13px; font-weight: 600; }
@media (max-width: 640px) {
  .aff-rubric__label { flex-basis: 110px; }
}

/* ---------- Author box ---------- */
.aff-author {
  display: flex;
  gap: var(--space-unit);
  align-items: center;
  border-top: 2px solid var(--border);
  margin-top: calc(var(--space-unit) * 2.5);
  padding-top: calc(var(--space-unit) * 1.25);
}
.aff-author__photo,
.aff-author__monogram {
  width: 72px; height: 72px;
  border-radius: 50%;
  flex: 0 0 72px;
  object-fit: cover;
}
.aff-author__monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: var(--surface);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
}
.aff-author__name { font-weight: 700; color: var(--ink); }
.aff-author__bio { margin: 0.25em 0 0; font-size: 0.875rem; color: color-mix(in srgb, var(--body), var(--surface) 20%); }

/* ---------- reading time ---------- */
.aff-reading-time {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--body), var(--surface) 40%);
  margin: 0.25em 0 0;
}

/* ---------- Rank Math ToC as a boxed element (sticky treatment
   evaluated at the A2 demo; long reads get .aff-long-read on body) ---------- */
.wp-block-rank-math-toc-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: var(--space-unit);
  font-size: 14px;
}
.wp-block-rank-math-toc-block a { color: var(--brand); text-decoration: none; }
.wp-block-rank-math-toc-block a:hover { text-decoration: underline; }

/* ---------- Hub cards / hub guides (architecture layer) ---------- */
.aff-hub-cards {
  display: grid;
  /* min(210px, 100%) = overflow-proof: columns can never force the grid
     wider than its container on narrow screens */
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: var(--space-unit);
  margin: calc(var(--space-unit) * 1.5) 0;
}
.aff-card {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-unit);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.aff-card:hover { border-color: var(--brand); transform: translateY(-2px); }
/* the whole card stays clickable, but only the TITLE reads as a link:
   kill the underline/color the theme's `.entry-content a` rule inherits
   onto blurbs and badges */
.entry-content a.aff-card,
a.aff-card { color: inherit; text-decoration: none; }
.aff-card .aff-card__blurb,
.aff-card .aff-card__badge { text-decoration: none; }
.aff-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: 17px;
  display: inline-block; /* blocks decoration propagation from the anchor */
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand), transparent 60%);
  text-underline-offset: 3px;
}
.aff-card:hover .aff-card__title { color: var(--brand); text-decoration-color: currentColor; }
.aff-card__blurb { font-size: 0.8125rem; display: inline-block; color: color-mix(in srgb, var(--body), var(--surface) 25%); }
.aff-card__badge {
  margin-top: auto;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand), var(--surface) 88%);
  border-radius: 999px;
  padding: 0.15em 0.7em;
}
.aff-card--empty .aff-card__badge {
  color: color-mix(in srgb, var(--body), var(--surface) 40%);
  background: color-mix(in srgb, var(--surface), var(--border) 50%);
}
.aff-hub-guides { list-style: none; margin: var(--space-unit) 0; padding: 0; }
.aff-hub-guides li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-unit);
  padding: calc(var(--space-unit) * 0.55) 0;
  border-bottom: 1px solid var(--border);
}
.aff-hub-guides a { color: var(--ink); font-weight: 600; text-decoration: none; }
.aff-hub-guides a:hover { color: var(--brand); }
.aff-hub-guides__meta { font-size: 0.8125rem; color: color-mix(in srgb, var(--body), var(--surface) 40%); white-space: nowrap; }
.aff-hub-empty {
  box-sizing: border-box; /* padding inside the cap — keeps the shared container edge */
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: calc(var(--space-unit) * 1.25);
  text-align: center;
  color: color-mix(in srgb, var(--body), var(--surface) 30%);
  background: color-mix(in srgb, var(--surface), #fff 40%);
}