/* Guides: hub page and article extras. Loaded after site.css on web/guides/*.html. */

/* ---------- hub hero ---------- */
.g-hero .art{max-height:340px}
.g-hero .hero-actions .btn-ghost{color:var(--ink)}

/* ---------- featured guide ---------- */
.g-feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;color:var(--ink);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
a.g-feature:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.08);border-color:#d6d6d3}
.g-feature-img{position:relative;min-height:300px;background:#e7f3ea}
.g-feature-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-feature-img .tag{position:absolute;left:14px;top:14px}
.g-feature-body{padding:28px 30px 26px;display:flex;flex-direction:column;gap:12px}
.g-feature-body h3{font-size:clamp(24px,2.6vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.12}
.g-feature-body p{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.g-feature-body .card-more{margin-top:auto;padding-top:14px}
.g-kicker{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--orange-d)}

/* ---------- category filter ---------- */
.g-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.g-filter button{font:inherit;font-size:14px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;scroll-margin-top:96px}
.g-filter button:hover{border-color:#cfcfcc;color:var(--ink)}
.g-filter button[aria-pressed="true"]{background:#151515;border-color:#151515;color:#fff}
.g-filter button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.g-filter small{font:12px var(--mono);margin-left:6px;opacity:.7}
.g-count{font-size:13px;color:var(--muted);margin:-10px 0 18px}
.g-grid .card[hidden]{display:none}
.g-grid .card-img{background:#e7f3ea}

/* ---------- stories strip ---------- */
.g-stories{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 28px}
.g-stories h2{font-size:clamp(22px,2.4vw,28px);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.g-stories p{font-size:15px;color:var(--ink-2);line-height:1.55;margin-top:8px;max-width:620px}
.g-stories-faces{display:flex;margin-top:14px}
.g-stories-faces img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-10px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.g-stories-faces img:first-child{margin-left:0}

/* ---------- article extras ---------- */
.article-cover img{background:#e7f3ea}
.prose .table-wrap table{min-width:520px}
.prose .table-wrap.narrow table{min-width:0}
.prose td small,.prose th small{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:2px}
.prose td.num,.prose th.num{text-align:right;white-space:nowrap}
.prose tfoot td{font-weight:600;background:#fafaf9;border-top:1px solid var(--line)}
.prose .keypoints strong,.prose .keypoints b{color:#fff}
.keypoints a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}
.keypoints a:hover{color:#ffd2d4}
.rate-note{font-size:13.5px;color:var(--muted);line-height:1.5}

/* step list */
.steps{list-style:none;padding:0!important;counter-reset:st}
.steps li{position:relative;padding:0 0 0 46px;counter-increment:st}
.steps li+li{margin-top:16px}
.steps li::before{content:counter(st);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:var(--orange-soft);color:var(--orange-d);
  display:grid;place-items:center;font:600 14px var(--sans)}
.steps li b{display:block;color:var(--ink);font-weight:600}

/* worked example (SOP) */
.example{background:#fffdf8;border:1px solid #eadfcb;border-radius:16px;padding:22px 24px 8px}
.example-label{display:inline-block;font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:#8a6a2f;background:#f6ecd8;border-radius:6px;padding:3px 8px;margin-bottom:10px}
.example p{font-family:var(--serif);font-size:19px;line-height:1.55;color:#2a2a2a;margin-bottom:14px}
.example p .why{display:block;font-family:var(--sans);font-size:13.5px;line-height:1.5;color:#8a6a2f;margin-top:6px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.compare>div{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fff;font-size:15.5px;line-height:1.6}
.compare>div b{display:block;font:600 12px var(--sans);letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.compare .bad b{color:#b45309}.compare .good b{color:#1f7a45}

/* related + CTA */
.related .section-head .h2{margin-top:6px}
.cta-card .btn-white{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .g-feature{grid-template-columns:1fr}
  .g-feature-img{min-height:0;aspect-ratio:16/10}
}
@media (max-width:640px){
  .g-hero .art{max-height:180px}
  .g-feature-body{padding:20px 18px 20px}
  .g-filter{gap:6px}
  .g-filter button{padding:7px 12px;font-size:13.5px}
  .g-stories{grid-template-columns:1fr;padding:22px 18px}
  .compare{grid-template-columns:1fr}
  .example{padding:18px 16px 4px}
  .example p{font-size:18px}
  .prose .table-wrap table{min-width:480px}
}
@media (prefers-reduced-motion:reduce){.g-feature{transition:none}}