/* ==========================================================================
   BLOG INDEX PAGE STYLES
   ==========================================================================
   Styles specific to blog/index.html. Reuses .page-hero, .pill, and
   .card directly from components.css — only the layout patterns unique
   to this page (the category legend row, the larger featured-article
   treatment, and the article grid's meta-row) are new here.
   ========================================================================== */


/* ==========================================================================
   CATEGORY LEGEND — now interactive. Originally a static label (see
   git history for the earlier reasoning: with only nine fixed cards,
   filtering wasn't solving a real problem yet). That reasoning no
   longer applies now that the blog is a real, growing system — see
   js/blog-index.js for the filter logic, which reuses the exact
   pattern already proven on the FAQ page's category filter.
   ========================================================================== */

.category-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-xl);
}


/* ==========================================================================
   COMING SOON LABEL — every card on this page uses this, since no
   article pages exist yet. Styled to look obviously provisional (amber,
   small, plain text) rather than like a real publish date, so nobody
   mistakes it for one.
   ========================================================================== */

.coming-soon-label {
  color: var(--color-amber);
  font-weight: 600;
}


/* ==========================================================================
   FEATURED ARTICLE — one larger, more prominent card above the regular
   grid. Visually distinct from the grid cards (bigger visual, two-
   column layout on desktop) so it reads as "the one to start with"
   rather than just the first item in a list.
   ========================================================================== */

.featured-article {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-4xl);
}

.featured-article-visual {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  background: var(--color-brand-gradient-soft);
  opacity: 0.9;
  /* PLACEHOLDER: replace with a real illustration or article cover
     image once the blog has real assets. */
}

.featured-article-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.featured-article-eyebrow {
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: var(--color-brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.featured-article-content h2 {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-snug);
}

.featured-article-content p {
  font-size: var(--text-body-lg);
}

.featured-article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

.featured-article-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

/* A non-interactive element styled to LOOK like a button, but
   deliberately not a real link or clickable control — see the honesty
   note in blog/index.html for why. */
.coming-soon-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  width: fit-content;
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-lg);
  font-size: var(--text-body-md);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-sand);
  border: 1.5px dashed var(--color-border-strong);
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .featured-article {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: var(--space-3xl);
  }
}


/* ==========================================================================
   ARTICLE GRID
   ========================================================================== */

.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: opacity var(--duration-medium) var(--ease-smooth);
}

/* Applied by js/blog-index.js when a category filter is active and
   this card doesn't match — same is-hidden convention used by the
   FAQ page's filter, kept consistent across the site. */
.article-card.is-hidden {
  display: none;
}

.article-card-visual {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  background: var(--color-sky-soft);
  margin-bottom: var(--space-sm);
  /* PLACEHOLDER: replace with a real cover illustration per article
     once available. */
}

.article-card h3 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-snug);
}

.article-card p {
  font-size: var(--text-body-sm);
}

/* Premium card addition: a small tag row beneath the excerpt, giving
   each card a bit more of the article's real metadata at a glance
   without needing to open it — matches what the article template
   itself displays in full. */
.article-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.article-card-tag {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  background: var(--color-sand);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-pill);
}

.article-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-top: auto; /* pins the meta row to the bottom of the card even
                        when descriptions are different lengths, so
                        every card's meta row lines up horizontally
                        across the grid */
  padding-top: var(--space-sm);
}

.article-card-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-text-muted);
  flex-shrink: 0;
}

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

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


/* ==========================================================================
   FUTURE CMS NOTE — a visible callout at the bottom of the page,
   explaining plainly that this is a static index for now. Reuses the
   existing .placeholder-note component from components.css directly.
   ========================================================================== */

.blog-cms-note {
  margin-top: var(--space-4xl);
}


/* ==========================================================================
   BLOG INTRO SECTION
   ==========================================================================
   BUG FIX: this section previously used class="about-section", a class
   only ever defined in about.css — which this page never loads. That
   meant the section's padding rhythm silently did nothing this whole
   time. Self-contained here instead, matching the exact fix already
   applied to the Contact page for the identical bug. Same value as
   about.css's version, so the visual output is unchanged.
   ========================================================================== */

.blog-intro-section {
  padding-block: var(--space-5xl);
}