/*
 * Learn and Applications — the knowledge base and the environment pages.
 *
 * The record card, the labelled block pair and the chip rail are shared
 * primitives (assets/css/components.css); the product grids these pages render
 * are styled by assets/css/shop.css, which functions.php enqueues alongside
 * this sheet.
 */

.aq-page.aq-learn .aq-rail,
.aq-page.aq-applications .aq-rail { margin-bottom: 22px; }
.aq-page.aq-learn .aq-rail--sub { margin-top: -6px; }
.aq-page.aq-learn .aq-rail--sub .aq-chip { background: #fff; font-weight: 600; }

/* The byline sits inside the dark hero, so it needs light type. */
.aq-page.aq-learn .aq-hero-meta { margin-top: 22px; color: #9FB4C6; }
.aq-page.aq-learn .aq-hero-meta li { color: #C3D2DF; }
.aq-page.aq-learn .aq-hero-meta b { color: #8FA6B8; font-weight: 700; }

/* Key takeaways: the skimmable summary above the article. */
.aq-takeaways {
  padding: 22px 24px;
  border: 1px solid var(--aq-border);
  border-left: 3px solid var(--aq-blue);
  border-radius: var(--aq-radius);
  background: var(--aq-alt);
  margin-bottom: 34px;
}
.aq-takeaways h2 {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aq-muted);
}
.aq-takeaways ul { margin: 0; padding-left: 20px; }
.aq-takeaways li { font-size: 15px; line-height: 1.7; color: var(--aq-ink); }
.aq-takeaways li + li { margin-top: 8px; }

.aq-page.aq-learn .aq-article-body,
.aq-page.aq-learn .aq-record-body { max-width: 78ch; }

.aq-article-tags {
  margin: 30px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--aq-border);
  font-size: 13px;
  color: var(--aq-muted);
}
.aq-article-tags a { color: var(--aq-blue); }

/* Application pages ------------------------------------------------------ */

.aq-page.aq-applications .aq-record-pair { margin: 0; }
.aq-page.aq-applications .aq-section-head + .aq-facts { margin-top: 4px; }

@media (max-width: 680px) {
  .aq-takeaways { padding: 18px; margin-bottom: 26px; }
}