/* Article list — the posts index grid. Notes: docs/component-article-list-notes.md */

.article-list{background:#faf9f6;padding:4rem 1.5rem 6rem}
.article-list-inner{max-width:1100px;margin:0 auto}
/* align-items:start, NOT the grid default of stretch. Stretch makes every card
   in a row as tall as the tallest, so a two-line title beside a four-line one
   pads the short card out with empty white. Each card takes its own height.
   (Written when cards still carried thumbnails, where the mismatch was larger;
   uneven titles and excerpts keep it earning its place.) */
.article-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2.5rem;align-items:start}

/* ── Card ── */
/* position:relative anchors the stretched link below. */
.article-list-card{position:relative;background:#fff;border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;overflow:hidden;transition:transform .3s,box-shadow .3s}
.article-list-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
/* A card carries NO image. Every article has a featured image — it runs the page
   hero and backs the OG tag — but on this page it would repeat down the grid as
   an unstyled crop. The banner is the one image here, and it is a produced one.
   The -thumb rules went with the markup rather than staying as dead weight. */
.article-list-card-body{padding:1.6rem 1.6rem 1.8rem;display:flex;flex-direction:column;flex:1}
.article-list-card-cat{font-family:var(--display);font-size:.875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#2A2A2A;margin-bottom:.6rem}
.article-list-card-title{font-family:var(--display);font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:500;line-height:1.2;color:var(--charcoal);margin-bottom:.7rem}
.article-list-card-title a{color:inherit;transition:color .2s}
.article-list-card-title a:hover{color:var(--gold-dark)}
/* THE WHOLE CARD IS THE LINK — the stretched-link pattern.
   The card already lifted and shadowed on hover, which promised a click target
   the markup did not deliver: only the title and the thumbnail were live, so
   the category, the excerpt, the date and every pixel of padding were dead.
   One real <a> stays in the markup, so the tab order and a screen reader get a
   single link carrying the article's name; its ::after covers the card. The
   thumbnail's duplicate anchor is gone with it — two links to one URL made
   every card announce itself twice. */
.article-list-card-title a::after{content:'';position:absolute;inset:0;z-index:1}
/* The ring lands on the card, not on the words, because the ::after IS the
   card-sized box. */
.article-list-card-title a:focus-visible::after{outline:2px solid var(--gold-dark);outline-offset:-3px}
.article-list-card-title a:focus-visible{outline:none}
.article-list-card-excerpt{font-family:var(--body);font-size:.95rem;line-height:1.65;color:#777;margin-bottom:1.2rem}
/* Pins the date to the card foot. */
.article-list-card-meta{margin-top:auto;font-family:var(--display);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#6b6b6b}

/* ── Featured banner ── */
/* Core's sticky_posts, ordered by page-articles.php. A featured article does
   not render as a card at all — it renders the hero device at --card size, and
   what it looks like lives in components/hero-cinematic.css. The grid owns only
   where it sits, what is clickable, and the Featured mark.

   These rules beat hero-cinematic.css at equal specificity on source order, and
   the order is real: page-articles.php calls ca_use('hero-cinematic',
   'article-list'), and ca_use() enqueues in the order it is given. */
.article-list-banner{grid-column:1/-1;isolation:isolate}
/* The stretched link needs the BANNER as its containing block, so .hero-content
   cannot stay positioned — an inset:0 pseudo would size to the centred content
   box and leave the padding bands dead. Dropping its z-index would drop the
   text behind the scrim, so the layers move below the in-flow content instead:
   isolation:isolate above makes the banner a stacking context, which is what
   keeps a negative z-index painting above the charcoal background rather than
   disappearing behind it. */
.article-list-banner .hero-content{position:static}
.article-list-banner .hero-media,
.article-list-banner .hero-media-overlay{z-index:-1}
/* The base gold glow goes down with them. --media switches it off, but a
   featured article with no featured image emits no --media, and a z-index:1
   pseudo over now-static content would wash the headline. */
.article-list-banner::before{z-index:-1}
/* The Featured mark. Same stack the retired card flag used — a line ABOVE the
   category — because that hierarchy is one the reader already learned here.
   Restyled for a dark surface: white over the eyebrow's gold, rather than gold
   over gold. No box: every badge on this site is typographic (game-tag,
   credential-badges), and a bordered pill would be a device the site does not
   own. DM Sans to match --feature's own hero-spark, which drops Cinzel. */
.article-list-banner-flag{
  font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.75);margin-bottom:.7rem;
  text-shadow:0 2px 20px rgba(0,0,0,.9),0 0 40px rgba(0,0,0,.6);
}
/* Same pattern and same reason as the card: one real <a> carrying the article's
   name, its ::after covering the box. A second anchor would announce twice. */
.article-list-banner .hero-headline a{color:inherit}
.article-list-banner .hero-headline a::after{content:'';position:absolute;inset:0}
.article-list-banner .hero-headline a:focus-visible::after{outline:2px solid var(--gold);outline-offset:-4px}
.article-list-banner .hero-headline a:focus-visible{outline:none}

/* ── Empty state ── */
.article-list-empty{text-align:center;font-family:var(--body);color:#777;padding:3rem 0}
.article-list-empty a{color:var(--gold-dark)}