/*
 * Editorial pages — an article, the article listings and the not-found page.
 *
 * The frame comes from the shared page kit (assets/css/components.css): the
 * hero, the section heads, the chip rail and the long-form body copy. This sheet
 * adds what only these pages need — the article card used by every listing of
 * posts, the dateline and the locked box on an article, and the search block on
 * the not-found page.
 */

.aq-page .aq-articles {
  display: grid;
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.aq-page .aq-article {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  border: 1px solid var(--aq-border);
  border-radius: 10px;
  background: #fff;
}

.aq-page .aq-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--aq-muted);
}

.aq-page .aq-article-title { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.aq-page .aq-article-title a { color: var(--aq-ink); text-decoration: none; }
.aq-page .aq-article-title a:hover { color: var(--aq-blue); }

.aq-page .aq-article-text { margin: 0; max-width: 78ch; font-size: 14.5px; line-height: 1.7; color: var(--aq-body); }
.aq-page .aq-article-actions { margin: 2px 0 0; }

/* The list itself. From a laptop width up it reads as two columns: a 1300px card
   holding a 585px paragraph left the right half of every row empty, which is what
   made the index look thin. The lead article keeps the full row, and when it has a
   featured image the image takes the left column and the text the right one. - */

@media (min-width: 1040px) {
  .aq-page .aq-articles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  /* Only a lead that has a featured image takes the whole row. Without one, a
     full-width card holding a 585px paragraph would leave half the row empty again
     — the very thing the two columns are here to fix — so it stays a single cell
     and is marked out by its kicker and its larger title instead. */
  .aq-page .aq-article--lead-media {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
  }
}

/* Cards in one grid row are the same height, so the reading button sits on the
   same line across the row rather than wherever the excerpt happens to end. */
.aq-page .aq-articles > li > .aq-article > .aq-article-text,
.aq-page .aq-articles > li > .aq-article > .aq-article-main > .aq-article-text { flex: 1 1 auto; }

.aq-page .aq-article-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.aq-page .aq-article-kicker {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aq-blue);
}
.aq-page .aq-article--lead .aq-article-title { font-size: 24px; }
.aq-page .aq-article-media { display: block; border-radius: 8px; overflow: hidden; }
.aq-page .aq-article-media img { display: block; width: 100%; height: auto; }

.aq-page .aq-article-dateline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
  color: #8FA6B8;
}

.aq-page .aq-article .aq-prose,
.aq-page.aq-article .aq-prose { max-width: 74ch; }

.aq-page .aq-article-tags { margin-top: 30px; }

.aq-page .aq-article-locked {
  max-width: 560px;
  padding: 26px 28px;
  border: 1px solid var(--aq-border);
  border-radius: 10px;
  background: var(--aq-surface);
}

.aq-page .aq-article-locked h2 { margin: 0; font-size: 20px; line-height: 1.3; color: var(--aq-ink); }
.aq-page .aq-article-locked p { margin: 10px 0 18px; font-size: 14.5px; line-height: 1.7; color: var(--aq-body); }

.aq-page.aq-notfound .aq-notfound-search { margin-top: 26px; max-width: 620px; }

@media (max-width: 680px) {
  .aq-page .aq-article { padding: 18px 18px; }
  .aq-page .aq-article-title { font-size: 18px; }
  .aq-page.aq-notfound .aq-notfound-search { margin-top: 20px; }
}