/* Breadwinner v3 prototype: articles.html page-only styles. Loaded after v3-port.css.
   c-article-list and c-article-reader in v3-port.css carry the ledger rows and the
   reader; this file only adds the grid section's intro spacing and keeps the featured
   row's section the same width as the rest. */

.articles-featured .wrap,
.articles-cta .wrap { max-width: var(--page-max); }

.articles-featured { padding-top: calc(var(--section) / 2); }

#articles-grid { margin-top: 0; }

.articles-grid-intro { margin-bottom: var(--s-lg); }

.articles-cta-inner { text-align: left; }

/* 2026-10-10 readiness fix: the index's figure.article-row__pic (a loaf-placeholder-3x2.svg
   thumb, identical on the featured row and all nine cards) is gone, so .article-row is back
   to a single DOM child (.article-row__body). v3-port.css's c-article-list still reserves a
   12rem picture column at 600px (.article-row) and a 5fr picture column at 900px
   (.article-row--featured) -- without an override here, the lone body would auto-place into
   that narrow first track instead of spanning the row. Collapse both back to one full-width
   column so the ledger reads as text-only, and cap the body to a comfortable reading
   measure so the title doesn't stretch edge to edge on wide screens. */
@media (min-width: 600px) {
  .article-row { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .article-row--featured { grid-template-columns: minmax(0, 1fr); }
}
.article-row__body { max-width: 48rem; }

/* "Read article" is a real button (v3/articles.js swaps the span); keep it looking like the text link. */
.article-open {
  font: inherit;
  color: inherit;
  background-color: transparent;
  border: 0;
  padding-inline: 0;
  cursor: pointer;
  text-align: left;
}
.article-full__title:focus { outline: none; }