/**
 * RS Nutrition — blog reading experience.
 */

.rn-blog-hero {
  padding-block: var(--rn-space-12);
  background: var(--rn-color-surface-alt);
}

.rn-blog-hero h1 {
  max-width: 20ch;
}

.rn-article {
  padding-block: var(--rn-space-12);
}

.rn-article__header {
  margin-bottom: var(--rn-space-8);
  padding-bottom: var(--rn-space-6);
  border-bottom: 1px solid var(--rn-color-border);
}

.rn-article__meta {
  font-size: var(--rn-font-size-sm);
  color: var(--rn-color-text-muted);
}

.rn-article__content {
  max-width: var(--rn-container-reading);
  font-size: var(--rn-font-size-base);
  line-height: var(--rn-line-height-relaxed);

  & h2 {
    margin-top: var(--rn-space-10);
    font-size: var(--rn-font-size-2xl);
  }

  & h3 {
    margin-top: var(--rn-space-8);
    font-size: var(--rn-font-size-xl);
  }

  & p,
  & ul,
  & ol {
    margin-bottom: var(--rn-space-5);
  }

  & img {
    margin-block: var(--rn-space-6);
    border-radius: var(--rn-radius-lg);
    box-shadow: var(--rn-shadow-sm);
  }
}

.rn-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--rn-color-white);
  border: 1px solid var(--rn-color-border);
  border-radius: var(--rn-radius-lg);
  box-shadow: var(--rn-offset-shadow-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--rn-transition-fast), box-shadow var(--rn-transition-fast);

  &:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--rn-color-peach-500);
    color: inherit;
  }
}

.rn-blog-card__image {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

.rn-blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--rn-space-5);
}

.rn-blog-card__title {
  margin-bottom: var(--rn-space-2);
  font-size: var(--rn-font-size-lg);
  color: var(--rn-color-text);
}

.rn-blog-card__excerpt {
  flex: 1;
  margin: 0 0 var(--rn-space-4);
  font-size: var(--rn-font-size-sm);
  color: var(--rn-color-text-muted);
}

.rn-blog-card__date {
  font-size: var(--rn-font-size-xs);
  color: var(--rn-color-gray-400);
}

.rn-blog-archive__grid {
  display: grid;
  gap: var(--rn-space-6);

  @media (min-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
}