/* Tips & FAQ hub and articles (Agent 2). Builds on styles.css tokens; no new colors. */

/* Article body */
.article { max-width: 65ch; margin-inline: auto; }
.article .meta { font-size: .9rem; color: var(--muted); margin: 0 0 28px; }
.article h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); margin-top: 1.6em; }
.article p, .article li { color: var(--ink); }
.article ul, .article ol { padding-left: 1.3em; }
.article li { margin-bottom: .45em; }
.article figure { margin: 28px 0; }
.article figure img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.article figcaption { font-size: .85rem; color: var(--muted); margin-top: 8px; }
.article .callout { background: var(--green-100); border-left: 4px solid var(--green-700); border-radius: 12px; padding: 18px 22px; margin: 28px 0; }
.article .callout p { margin: 0; }
.back-link { display: inline-block; margin-bottom: 18px; font-weight: 600; text-decoration: none; }

/* Hub cards: the card image sits in a fixed 4:3 box via styles.css */
.tips-grid .card img { height: auto; }
.tips-grid .card-body p { margin-bottom: 0; }

/* More reading at the end of an article */
.more-tips { max-width: 65ch; margin: 40px auto 0; display: grid; gap: 12px; }
.more-tips h2 { font-size: 1.2rem; margin: 0 0 4px; }

@media (max-width: 760px) {
  .article figure { margin: 22px 0; }
  .article .callout { padding: 16px 18px; }
  .tip { grid-template-columns: 88px 1fr; gap: 14px; }
  .tip img { width: 88px; height: 76px; }
}

/* Articles: the CTA follows the article section directly, so don't stack two paddings */
.tips-cta { padding-top: 0; }