/* ==========================================================================
   Homepage — "Latest Practical Guides for Everyday Nepal" section.
   A small, fast gateway into the /blog/ Guides Hub: 3 diverse category
   cards + one outlined CTA + topic shortcuts. Not a mini blog page.
   Uses the homepage's existing theme variables (--ink, --muted, --border,
   --bg2, --vm, --rr, --shadow-sm) so light/dark/seasonal themes all work
   automatically, matching every other homepage section.
   ========================================================================== */

.mk-gcard{display:flex;flex-direction:column;text-decoration:none;background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--rr);padding:1.15rem 1.25rem 1.1rem;
  transition:border-color .18s,transform .18s,box-shadow .18s;min-height:100%}
.mk-gcard,.mk-gcard *{text-decoration:none!important}
.mk-gcard:hover{border-color:var(--ink);box-shadow:var(--shadow-sm);transform:translateY(-2px)}

.mk-gtag{display:inline-block;align-self:flex-start;font-size:.63rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);background:color-mix(in srgb, var(--ink) 12%, transparent);
  padding:.2rem .55rem;border-radius:5px;margin-bottom:.65rem}

.mk-gtitle{font-size:.98rem!important;font-weight:800!important;color:var(--ink)!important;line-height:1.34!important;
  margin:0 0 .5rem!important;transition:color .15s}
.mk-gcard:hover .mk-gtitle{color:var(--ink)!important}

.mk-gdesc{font-size:.83rem!important;color:var(--muted)!important;line-height:1.62!important;margin:0 0 .85rem!important;flex:1}

.mk-gmeta{display:block;font-size:.76rem;color:var(--ink3,var(--muted));margin-bottom:.55rem}

.mk-gcta{font-size:.84rem;font-weight:800;color:var(--ink)}
.mk-gcta-arrow{display:inline-block;transition:transform .15s}
.mk-gcard:hover .mk-gcta-arrow{transform:translateX(3px)}

/* ---------- Explore all Guides — outlined pill, not a solid button ---------- */
.mk-guides-cta{text-align:center;margin-top:1.5rem}
.mk-explore-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.4rem;border-radius:999px;
  border:1.5px solid var(--ink);background:color-mix(in srgb, var(--ink) 8%, transparent);color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;font-size:.88rem;font-weight:800;text-decoration:none!important;
  transition:background .15s,transform .15s}
.mk-explore-btn:hover{background:color-mix(in srgb, var(--ink) 16%, transparent);transform:translateY(-1px);text-decoration:none!important}
.mk-explore-btn .mk-gcta-arrow{transition:transform .15s}
.mk-explore-btn:hover .mk-gcta-arrow{transform:translateX(3px)}

/* ---------- Topic shortcuts ---------- */
.mk-guides-shortcuts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem .5rem;
  margin-top:1.15rem;font-size:.82rem}
.mk-shortcuts-label{font-weight:700;color:var(--ink3,var(--muted))}
.mk-guides-shortcuts a{color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;text-decoration:none!important;font-weight:600}
.mk-guides-shortcuts a:hover{text-decoration:underline!important}
.mk-shortcuts-dot{color:var(--border);margin:0 .05rem}

@media (max-width:640px){
  .mk-gcard{padding:1.05rem 1.15rem}
  .mk-guides-shortcuts{font-size:.8rem}
}


/* Contrast polish (Sep 2026): match the firmer tool-card surface treatment. */
.mk-gcard{background:#fff;box-shadow:var(--shadow-sm)}
[data-theme="dark"] .mk-gcard{background:rgba(22,32,51,.92)}
.mk-gcard:hover{box-shadow:var(--shadow)}