/* ATHAR evidence components: quote cards, interview embeds, graded source list.
   Built on the child theme's tokens so light and dark modes follow automatically;
   the fallbacks only apply if the theme is ever switched. */

.athar-quote,
.athar-video,
.athar-source-list {
  --ev-surface: var(--surface-2, #f7f3ea);
  --ev-border: var(--border, #e3dccb);
  --ev-ink: var(--ink-90, #22313a);
  --ev-muted: var(--muted, #5d6b72);
  --ev-accent: var(--accent, #b88a3e);
  margin-block: var(--s6, 2rem);
  margin-inline: 0;
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--radius-lg, 16px);
  padding: var(--s5, 1.5rem);
  color: var(--ev-ink);
  max-width: 100%;
  box-sizing: border-box;
}

.athar-badge {
  display: inline-block;
  font-size: .8125rem;
  line-height: 1.4;
  font-weight: 700;
  padding: .2em .75em;
  border-radius: 999px;
  border: 1px solid currentColor;
  margin-block-end: var(--s3, .75rem);
}
.athar-grade-a .athar-badge, .athar-grade-b .athar-badge { color: #1f6f5c; }
.athar-grade-c .athar-badge { color: #8a6424; }
.athar-grade-d .athar-badge { color: #8c4a2f; }
.athar-grade-e .athar-badge, .athar-badge.athar-grade-e { color: #5a5f8c; }

:root[data-theme="dark"] .athar-grade-a .athar-badge,
:root[data-theme="dark"] .athar-grade-b .athar-badge { color: #7fd1bb; }
:root[data-theme="dark"] .athar-grade-c .athar-badge { color: #e3bd78; }
:root[data-theme="dark"] .athar-grade-d .athar-badge { color: #eba38a; }
:root[data-theme="dark"] .athar-grade-e .athar-badge,
:root[data-theme="dark"] .athar-badge.athar-grade-e { color: #b3b8ea; }

.athar-quote blockquote,
.athar-video blockquote {
  margin: 0 0 var(--s3, .75rem);
  padding-inline-start: var(--s4, 1rem);
  border-inline-start: 3px solid var(--ev-accent);
  font-size: 1.125rem;
  line-height: 1.9;
}
.athar-quote figcaption,
.athar-video figcaption {
  font-size: .9375rem;
  color: var(--ev-muted);
  line-height: 1.7;
}
.athar-quote figcaption a,
.athar-video figcaption a { color: inherit; }
.athar-quote__note,
.athar-video__caveat {
  display: block;
  margin-block-start: var(--s2, .5rem);
  font-size: .875rem;
}
.athar-video__why { margin: 0 0 var(--s3, .75rem); }

/* Click-to-play: the reserved 16:9 box prevents any layout shift on load or on play. */
.athar-video__poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  margin-block-end: var(--s3, .75rem);
  border: 0;
  border-radius: var(--radius, 10px);
  overflow: hidden;
  background: #0b181c;
  cursor: pointer;
}
.athar-video__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: opacity .2s;
}
.athar-video__poster:hover img,
.athar-video__poster:focus-visible img { opacity: 1; }
.athar-video__poster:focus-visible { outline: 3px solid var(--ev-accent); outline-offset: 3px; }
.athar-video__play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(11, 24, 28, .78);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.athar-video__play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}
.athar-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius, 10px);
  margin-block-end: var(--s3, .75rem);
}

.athar-source-list > summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.athar-source-list > summary::-webkit-details-marker { display: none; }
.athar-source-list > summary::after { content: "\25BE"; margin-inline-start: .5em; }
.athar-source-list[open] > summary::after { content: "\25B4"; }
.athar-source-list ol { margin: var(--s4, 1rem) 0 0; padding-inline-start: 1.25rem; }
.athar-source-list li { margin-block-end: var(--s3, .75rem); line-height: 1.8; overflow-wrap: anywhere; }
.athar-source-list li .athar-badge { margin: 0 0 0 .4em; font-size: .75rem; }

@media (max-width: 480px) {
  .athar-quote, .athar-video, .athar-source-list { padding: var(--s4, 1rem); }
  .athar-quote blockquote, .athar-video blockquote { font-size: 1.0625rem; }
}