/* ARAYA Articles / blog index — section styles. Extends academy.css (an-acad-* is loaded
   alongside on this page for the paths-grid/articles-grid pattern). Colors/fonts from
   tokens.css ONLY (CONVENTIONS §1). */

/* hero (extends .an-inner-hero maroon/pattern, same voice as .an-acad-sub) */
.an-blog-hero .an-inner-title { max-width: 30ch; }
.an-blog-sub { color: var(--an-sand); font-size: 17px; line-height: 1.75; max-width: 62ch; margin: 18px 0 0; }
.an-blog-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* 4 reader-path cards — whole card is a link (an-acad-path base + link affordance) */
.an-blog-paths-grid { grid-template-columns: repeat(4, 1fr); }
.an-blog-path { display: block; text-decoration: none; transition: border-color .15s, transform .15s; }
.an-blog-path:hover { border-color: var(--an-gold); transform: translateY(-2px); }
.an-blog-path h3 { color: var(--an-maroon); }

@media (max-width: 1024px) {
  .an-blog-paths-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .an-blog-paths-grid { grid-template-columns: 1fr; }
}

/* reader-path scroll targets (blog-paths.php + blog-articles.php an-blog-news) — clear the
   sticky .an-header (front.css) on jump. an-anchor-target = EN invisible marker for path cards
   1-3 that share the combined path-4 section (see blog-paths.php EN design decision). */
.an-blog-path-section,
#an-blog-path-4 { scroll-margin-top: 90px; }
.an-anchor-target { display: block; height: 0; scroll-margin-top: 90px; }