/* Blog index and single article. */

.blog-index__grid { position: relative; z-index: 2; }

/* ---------------------------------------------------------- Single article */

.article-card {
  position: relative;
  z-index: 4;
  width: min(100%, 54rem);
  margin-inline: auto;
  overflow: hidden;
  border: var(--border-width-thin) solid color-mix(in srgb, var(--color-white) 90%, transparent);
  border-radius: var(--radius-xl);
  background: var(--surface-panel);
  box-shadow: var(--shadow-large);
}

.article-card--narrow { width: min(100%, 46rem); }

.article-card__media {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-blush);
}

.article-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card__body { padding: clamp(var(--space-l), 4.5vw, var(--space-2xl)); }
.article-card__body > .audio-card:first-child { margin-top: 0; }

.article-card__body .signature {
  margin-top: var(--space-l);
  color: var(--color-gold-deep);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
}

.article-card__body .review-card__stars {
  margin-bottom: var(--space-s);
  color: var(--color-gold);
  font-size: var(--text-l);
  letter-spacing: var(--letter-spacing-meta);
}

.article-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
  width: min(100%, 54rem);
  margin: clamp(var(--space-xl), 4vw, var(--space-2xl)) auto 0;
}

.article-footer__link { gap: var(--space-xs); }