/* ============================================================
   GUIDES — guides.css
   Loaded after ../blog/blog.css. Adds the guide collection grid
   and the single-guide landing page (cover, actions, cheat sheet).
   ============================================================ */

/* ── Collection grid ── */
.guide-grid { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .guide-grid { grid-template-columns: repeat(3, 1fr); } }
.guide-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r); background: var(--card); border: 1px solid var(--border);
  text-decoration: none; transition: border-color .3s, transform .4s var(--ease);
}
.guide-card:hover { border-color: var(--sand-line); transform: translateY(-3px); }
.guide-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--border); }
.guide-card-body { display: flex; flex-direction: column; gap: .7rem; padding: 1.4rem 1.4rem 1.5rem; flex: 1; }
.guide-card .bli-excerpt { line-height: 1.7; }
.guide-card .bc-read { margin-top: auto; }
.guide-card:hover .bli-title { color: var(--sand); }
.guide-soon { font-size: .88rem; color: var(--dim); margin-top: 2.5rem; }

/* ── Single guide ── */
.guide-cover {
  display: block; margin: 0 0 2rem; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--border); transition: border-color .3s;
}
.guide-cover:hover { border-color: var(--sand-line); }
.guide-cover img { display: block; width: 100%; height: auto; }
.guide-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2.5rem; }
.guide-actions .bbtn { padding: .8rem 1.2rem; font-size: .88rem; }
.post-content .guide-actions .bbtn, .post-content .guide-cover { text-decoration: none; }
.post-content .guide-actions .bbtn-lime { color: #111208; }
.post-content .guide-actions .bbtn-ghost { color: var(--ink); }
.post-content .guide-actions .bbtn-ghost:hover { color: var(--sand); }
@media (max-width: 420px) { .guide-actions .bbtn-ghost { display: inline-flex; } }
.guide-cheats { display: grid; gap: 1rem; margin: 0 0 1.5rem; }
@media (min-width: 640px) { .guide-cheats { grid-template-columns: 1fr 1fr; } }
.guide-cheat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 1.2rem 1.4rem; }
.post-content .guide-cheat h3 { margin-top: 0; }
.post-content .guide-cheat ul { margin-bottom: 0; }
.guide-note { font-size: .84rem; color: var(--dim); }