section.content {
  background: var(--color-gray-100);
  padding: var(--spacing-10) 0 var(--spacing-20) 0;
}
.prose p {
  max-width: 100%;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* CATEGORY NAV (blog index) */
.blog-categories-nav {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
}
.blog-categories-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  list-style: none;
  padding: var(--spacing-4) 0;
  margin: 0;
}
.blog-categories-nav a {
  font-weight: var(--font-semibold);
}

/* SEARCH FORM */
.search-form {
  display: flex;
  gap: var(--spacing-3);
  max-width: 32rem;
  margin: 0 0 var(--spacing-8) 0;
}
.search-form input[type="search"] {
  flex: 1;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300, var(--color-gray-200));
  border-radius: var(--rounded);
}

/* ARTICLE CARD GRID */
.articles-container {
  padding: var(--spacing-16) 0;
}
.articles {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--spacing-8);
}
.article-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--spacing-5);
  background: var(--color-white);
  border-radius: var(--rounded-xl);
  overflow: hidden;
}
.article-card h2.article-heading {
  margin-top: 0;
}
.article-card-category {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-link);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.article-card-featured {
  display: inline-block;
  background: var(--color-yellow-200);
  border-radius: var(--rounded);
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin-bottom: var(--spacing-2);
}
.article-meta-row {
  font-size: var(--text-sm);
  color: var(--color-gray);
}
.article-description {
  font-size: var(--text-lg);
}
.article-card a.btn {
  align-self: start;
  margin-top: var(--spacing-4);
}
.articles-empty {
  font-size: var(--text-lg);
  color: var(--color-gray);
}

@media screen and (min-width: 72rem) {
  .articles {
    grid-template-columns: var(--columns-3);
  }
}

/* PAGINATION */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-12);
  font-size: var(--text-sm);
}

/* ARTICLE SINGLE PAGE */
.article-header {
  padding: var(--spacing-12) 0 0 0;
}
.article-header h1 {
  margin-top: var(--spacing-3);
}
.article-cover {
  margin: var(--spacing-8) 0 0 0;
}
.article-cover img {
  width: 100%;
  height: auto;
  border-radius: var(--rounded);
}
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-8);
}
.article-tags a {
  background: var(--color-gray-200);
  border-radius: var(--rounded);
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--text-sm);
}

/* AUTHOR BIO (on article page) */
.article-author-bio {
  padding: var(--spacing-12) 0;
}
.author-bio-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-5);
  align-items: start;
  background: var(--color-white);
  border-radius: var(--rounded-xl);
  padding: var(--spacing-6);
}
.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--rounded-xl);
  object-fit: cover;
}
.author-role {
  color: var(--color-gray);
  font-size: var(--text-sm);
}

/* MENTIONED ON (article single page) - .related-articles itself is a
   global shared component, see assets/css/site/article-cards.css */
.article-mentioned-on {
  padding: var(--spacing-12) 0;
}
.article-mentioned-on h2 {
  margin-top: 0;
}

/* AUTHORS INDEX */
.authors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
  margin-top: var(--spacing-8);
}
.author-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-2);
  background: var(--color-white);
  border-radius: var(--rounded-xl);
  padding: var(--spacing-6);
}
.author-card img {
  width: 80px;
  height: 80px;
  border-radius: var(--rounded-xl);
  object-fit: cover;
}
.author-card-name {
  font-weight: var(--font-semibold);
}
.author-card-role {
  font-size: var(--text-sm);
  color: var(--color-gray);
}

@media screen and (min-width: 40rem) {
  .authors-grid {
    grid-template-columns: var(--columns-3);
  }
}

/* TAG / CATEGORY CLOUD */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  margin-top: var(--spacing-8);
}
.tag-pill {
  background: var(--color-gray-200);
  border-radius: var(--rounded-xl);
  padding: var(--spacing-2) var(--spacing-5);
  font-weight: var(--font-semibold);
}

/* FAQS (shared pattern with course template) */
.course-faqs {
  padding: var(--spacing-20) 0;
}
.faq-list {
  margin-top: var(--spacing-6);
}
.faq-item {
  border-bottom: 1px solid var(--color-gray-200);
  padding: var(--spacing-4) 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: var(--font-semibold);
}
.faq-item .prose {
  margin-top: var(--spacing-3);
}

/* CONTACT SECTION (shared with service template) */
section.contact {
  background: var(--color-yellow-200);
  padding: var(--spacing-20) 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--spacing-10);
}
@media screen and (min-width: 72rem) {
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--spacing-20);
  }
}