/* ==========================================================================
   Resource-list guides (/guides/best-*, includes/resource_guide.php).
   Extends css/guides.css: same palette and tokens, only the list cards,
   fact rows, colour swatches and the "our pick" box are new.
   ========================================================================== */
.gr .gd-hero h1 { max-width: 22ch; }
.gr .gd-lede { max-width: 68ch; }
.gr .gd-sec > p:not([class]) { max-width: 72ch; }
.gr-honest i { color: var(--gd-green); }

/* comparison table: first column is a row header */
.gr-table table { min-width: 640px; }
.gr-table tbody th { font: 700 15px/1.35 var(--gd-head); color: var(--gd-ink); background: none; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.gr-table td { color: var(--gd-body); }
.gr-table:focus-visible { outline: 3px solid var(--gd-leaf); outline-offset: 3px; }
.gr-yes { color: var(--gd-green-deep); font-weight: 700; }
.gr-paid { color: var(--gd-amber); font-weight: 700; }

/* the list */
.gr-items { display: grid; gap: 16px; margin-top: 22px; counter-reset: gr; }
.gr-item { scroll-margin-top: 96px; padding: 22px; border-radius: 22px; background: var(--gd-card); border: 1px solid var(--gd-line); box-shadow: var(--gd-shadow); }
.gr-item.is-own { background: linear-gradient(180deg, #f0faf4 0%, var(--gd-card) 100%); border-color: var(--gd-line-strong); }
.gr-item__head { display: flex; align-items: center; gap: 14px; }
.gr-item__head > div { flex: 1; min-width: 0; }
.gr-item__n { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--gd-forest); color: #ecfdf5; font: 800 16px/1 var(--gd-head); }
.gr-item h3 { font-size: 22px; line-height: 1.2; }
.gr-item__tag { display: block; margin-top: 3px; font: 600 12.5px/1.35 var(--gd-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gd-green-deep); }
.gr-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 16px 0 0; }
.gr-facts > div { padding: 9px 12px; border-radius: 12px; background: #f4faf6; border: 1px solid var(--gd-line); }
.gr-facts dt { font: 700 11px/1.3 var(--gd-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gd-muted); }
.gr-facts dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--gd-ink); }
.gr-item__body { margin-top: 14px; font-size: 16px; }
.gr-item__body p + p { margin-top: 10px; }
.gr-item__body ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 5px; }
.gr-item__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 16px; border-radius: 999px; background: var(--gd-mint); border: 1px solid var(--gd-line-strong); color: var(--gd-forest); font: 600 14.5px/1.2 var(--gd-text); text-decoration: none; overflow-wrap: anywhere; }
.gr-item__go:hover { background: var(--gd-mint-2); color: var(--gd-forest); border-color: var(--gd-green); }
.gr-item__go i { font-size: 12px; }

/* theme colour swatches (decorative; the variant names are in the text) */
.gr-swatch { flex: 0 0 auto; display: flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--gd-line-strong); }
.gr-swatch i { display: block; width: 18px; height: 34px; }

/* our pick */
.gr-pick { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 22px; background: var(--gd-forest); color: #d1fae5; }
.gr-pick > i { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, 0.12); color: var(--gd-leaf); font-size: 18px; }
.gr-pick p { color: #d1fae5; }
.gr-pick p + p { margin-top: 10px; }
.gr-pick strong { color: #fff; }
.gr-pick a { color: #a7f3d0; text-underline-offset: 3px; }
.gr-pick a:hover { color: #fff; }

.gr-kody { margin-top: 18px; }

@media (max-width: 560px) {
  .gr-item { padding: 16px; border-radius: 18px; }
  .gr-item h3 { font-size: 19px; }
  .gr-item__n { width: 32px; height: 32px; font-size: 14px; }
  .gr-swatch i { width: 12px; height: 28px; }
  .gr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gr-pick { flex-direction: column; padding: 18px; }
}

/* numbered how-to steps */
.gr-steps { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.gr-steps li::marker { font-weight: 700; color: var(--gd-green-deep); }