/**
 * Quote — compositional primitive.
 *
 * Pull-quote, testimonial, or critic-review block. Three variants:
 *   - default — quiet, suitable inline within prose
 *   - feature — large, display-font, used as section opener or pitch slide
 *   - critic — review-style with star rating + outlet attribution
 *
 * Markup:
 *   <figure class="ds-quote">
 *     <blockquote class="ds-quote__body">
 *       The film that started a global phenomenon.
 *     </blockquote>
 *     <figcaption class="ds-quote__attribution">
 *       <span class="ds-quote__attribution-name">Empire</span>
 *       <span class="ds-quote__attribution-meta">Five stars · April 2026</span>
 *     </figcaption>
 *   </figure>
 */

.ds-quote {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
  margin: 0;
  padding: var(--ds-space-md) 0;
  position: relative;
}

.ds-quote__body {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-body-lg);
  font-weight: var(--ds-weight-emphasis);
  line-height: var(--ds-leading-body);
  color: var(--ds-color-text-primary);
  margin: 0;
  position: relative;
  padding-left: var(--ds-space-md);
  border-left: var(--ds-space-3xs) solid var(--ds-color-brand-action);
  font-style: italic;
}

.ds-quote__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3xs);
  padding-left: var(--ds-space-md);
  font-size: var(--ds-text-body-sm);
}
.ds-quote__attribution-name {
  font-weight: var(--ds-weight-strong);
  color: var(--ds-color-text-heading);
}
.ds-quote__attribution-meta {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption);
  font-weight: var(--ds-weight-regular);
}

/* ─── Feature variant ─────────────────────────────────────────
   Display-font, no italic, used as section opener. */
.ds-quote--feature .ds-quote__body {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-display-md);
  font-weight: var(--ds-weight-display);
  line-height: var(--ds-leading-display);
  letter-spacing: -0.01em;
  font-style: normal;
  padding-left: 0;
  border-left: none;
}
.ds-quote--feature .ds-quote__body::before {
  content: """;
  display: block;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-display-xl);
  line-height: 0.4;
  color: var(--ds-color-brand-action);
  margin-bottom: var(--ds-space-xs);
}
.ds-quote--feature .ds-quote__attribution { padding-left: 0; }

/* ─── Critic variant ──────────────────────────────────────────
   With stars + outlet attribution row. Compact. */
.ds-quote--critic {
  padding: var(--ds-space-md);
  background: var(--ds-color-surface-raised);
  border: 1px solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-card);
}
.ds-quote--critic .ds-quote__body {
  font-style: normal;
  border-left: none;
  padding-left: 0;
  font-size: var(--ds-text-body-md);
}
.ds-quote--critic .ds-quote__body::before {
  content: """;
  display: inline;
  margin-right: var(--ds-space-3xs);
  color: var(--ds-color-brand-action);
}
.ds-quote--critic .ds-quote__attribution {
  padding-left: 0;
  flex-direction: row;
  align-items: center;
  gap: var(--ds-space-sm);
  flex-wrap: wrap;
}

.ds-quote__stars {
  display: inline-flex;
  gap: var(--ds-space-3xs);
  color: var(--ds-color-brand-highlight);
  font-size: var(--ds-text-body-sm);
  letter-spacing: 0.04em;
}

/* ─── Inverse modifier ────────────────────────────────────── */
.ds-quote--inverse .ds-quote__body { color: var(--ds-color-text-inverse); }
.ds-quote--inverse .ds-quote__attribution-name { color: var(--ds-color-text-inverse); }
.ds-quote--inverse .ds-quote__attribution-meta { color: var(--ds-color-text-inverse-muted); }
.ds-quote--inverse.ds-quote .ds-quote__body { border-left-color: var(--ds-color-brand-highlight); }
.ds-quote--inverse.ds-quote--feature .ds-quote__body::before { color: var(--ds-color-brand-highlight); }
.ds-quote--inverse.ds-quote--critic { background: rgba(255,255,255,0.06); border-color: var(--ds-color-border-inverse-subtle); }