/* ==========================================================================
   ARTICLES — styles specific to articles.html only
   ========================================================================== */

/* Reuses .orbit-hero (same wash/dots/blob background + header behavior as
   home) but as a compact title-only variant: no floating category chips,
   no subheading — just the page heading, centered. */
.orbit-hero--title-only{
  /* Floor raised from 4.5rem (72px) to 6.5rem (104px) — the header is a
     76px bar on top of this hero, so the old floor let the heading sit
     right under/against it on mobile. */
  padding-block: clamp(6.5rem, 10vw, 7rem) clamp(5rem, 11vw, 8rem);
}
.orbit-hero--title-only .orbit-hero__inner{
  min-height: auto;
}
.orbit-hero--title-only .orbit-hero__heading h1{
  font-size: var(--step-4);
}

/* Articles grid: same universal post-card, evenly spaced, wraps responsively */
.articles-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
}
/* The [hidden] attribute must win over .articles-grid's own display:grid —
   same specificity, so without this the "more" batch shows immediately
   and collides with the first 12 posts instead of waiting for the button. */
.articles-grid[hidden]{
  display: none;
}
/* The "more" batch is a separate grid container from the first one, so its
   own internal `gap` doesn't create any space above it — without this it
   sits flush against the row above once revealed. Match the grid's own
   row gap so it reads as a continuation of the same rhythm, not a seam. */
.articles-grid--more{
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* Load more — pagination control below the grid */
.load-more{
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.load-more .btn{
  padding: 0.85rem 2rem;
}

@media (max-width: 900px){
  .articles-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .articles-grid{ grid-template-columns: 1fr; }
}