/* GUIDE PAGES. The article shell is page.css; this file is only the two link boxes and the hub
   grid, which are the parts a guide has that an About page does not. */

.page-kicker a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.page-nav a[href="/guides/"] { font-weight: 700; }

/* The paragraphs between the lede and the first heading. On most of these guides this is the
   safety warning, so it is set apart rather than run in with the body. */
.prose .guide-lead { padding-left: 14px; border-left: 3px solid var(--amber); color: var(--ink-soft); }

/* The two boxes at the end of every guide. The parts box is amber because it leads back into the
   product; the supplies box is quiet because it leads off the site. That ordering is deliberate
   and should stay that way: the comparison is the thing being sold, the commission is not. */
.guide-box { margin: 32px 0; padding: 18px 20px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface-2); }
.guide-box-parts { border-color: var(--amber); background: var(--amber-bg); }
.prose .guide-box-h { margin: 0 0 5px; font-size: 17px; }
.guide-box-b { margin: 0 0 13px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

.guide-links { margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 8px; }
.prose .guide-links li { margin: 0; }
.guide-links a { display: flex; align-items: center; min-height: 44px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: inherit; text-decoration: none; font-size: 13.5px; font-weight: 600; line-height: 1.3;
  transition: border-color .15s ease, color .15s ease; }
.guide-links a:hover { border-color: var(--amber); color: var(--amber-bright); }
.guide-disclosure { margin: 13px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.6; }

/* The hub at /guides. */
.ghub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
  gap: 12px; margin: 6px 0 44px; }
.ghub-card { display: flex; flex-direction: column; gap: 6px; padding: 18px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.ghub-card:hover { transform: translateY(-2px); border-color: var(--amber); box-shadow: var(--shadow-lg); }
.ghub-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber-bright); }
.ghub-t { font-size: 17px; font-weight: 800; letter-spacing: -.2px; line-height: 1.25; }
.ghub-b { font-size: 13px; color: var(--muted); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .ghub-card, .guide-links a { transition: none; }
  .ghub-card:hover { transform: none; }
}