/* ============================================================================
   blog.css — "/blog" (index) and "/blog/<slug>" (reader).

   Source of truth: apps/editor/src/pages/resources/BlogPage.tsx. Both views
   render inside the same PageShell, so the "Blog" hero appears on the reader
   too — that is the original's behaviour, not an oversight.
   ========================================================================= */

/* ═══ Shared: post artwork ═════════════════════════════════════════════════ */

/* The gradient is the base layer; admin-authored posts have no image and the
   gradient alone carries the card. */
.post-art { position: relative; overflow: hidden; }
/* "absolute inset-0 h-full w-full object-cover mk-content-thumb-img"
   + transform scale(1.01) */
.post-art__img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1.01);
}
/* "absolute inset-0 bg-slate-950/15 dark:bg-slate-950/30" */
.post-art__wash { position: absolute; inset: 0; background: rgba(2, 6, 23, 0.15); }
.mk-dark .post-art__wash { background: rgba(2, 6, 23, 0.3); }
/* "absolute inset-0 opacity-20 mk-grid-bg" */
.post-art__grid { position: absolute; inset: 0; opacity: 0.2; }
/* "absolute top-5 left-5 text-[10px] font-bold px-2.5 py-1 rounded-full
    text-white border border-white/30" + translucent black and blur */
.post-art__badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  font-size: 10px;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ═══ Shared: post meta line ═══════════════════════════════════════════════ */

/* "flex items-center gap-3 text-[11px] text-slate-500 dark:text-slate-600" */
.post-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 11px;
  color: #64748b;
}
.mk-dark .post-meta { color: #475569; }
/* "text-[10px] font-bold px-2 py-0.5 rounded-full border border-indigo-400/25
    text-indigo-600 dark:text-indigo-400" + background rgba(99,102,241,0.1) */
.post-meta__tag {
  font-size: 10px;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(129, 140, 248, 0.25);
  color: #4f46e5;
  background: rgba(99, 102, 241, 0.1);
}
.mk-dark .post-meta__tag { color: #818cf8; }

/* ═══ Index ════════════════════════════════════════════════════════════════ */

/* "max-w-6xl mx-auto px-6 pb-28" */
.blog {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 7rem;
}

/* Featured card: "group block w-full text-left rounded-3xl border
    border-slate-200 dark:border-white/10 hover:border-indigo-400/40
    transition-all duration-300 overflow-hidden mb-12 hover:shadow-[…]"
   + background var(--mk-card-grad) */
.blog-featured {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 1.5rem;
  border: 1px solid #e2e8f0;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  margin-bottom: 3rem;
  background: var(--mk-card-grad);
}
.mk-dark .blog-featured { border-color: rgba(255, 255, 255, 0.1); }
.blog-featured:hover {
  border-color: rgba(129, 140, 248, 0.4);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.14), 0 0 40px rgba(99, 102, 241, 0.1);
}
/* "grid grid-cols-1 md:grid-cols-2" */
.blog-featured__grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) { .blog-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* "relative h-56 md:h-auto md:min-h-[300px] overflow-hidden" */
.blog-featured__art { height: 14rem; }
@media (min-width: 768px) { .blog-featured__art { height: auto; min-height: 300px; } }
/* "p-8 md:p-10 flex flex-col justify-center" */
.blog-featured__body { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 768px) { .blog-featured__body { padding: 2.5rem; } }
/* "text-2xl md:text-3xl font-black text-slate-900 dark:text-white
    tracking-tight mt-4 mb-4 group-hover:text-indigo-700
    dark:group-hover:text-indigo-300 transition-colors"
   + lineHeight 1.15, letterSpacing -0.02em */
.blog-featured__title {
  font-size: 1.5rem;
  line-height: 1.15;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-top: 1rem;
  margin-bottom: 1rem;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-dark .blog-featured__title { color: #fff; }
@media (min-width: 768px) { .blog-featured__title { font-size: 1.875rem; } }
.blog-featured:hover .blog-featured__title { color: #4338ca; }
.mk-dark .blog-featured:hover .blog-featured__title { color: #a5b4fc; }
/* "text-sm text-[#444444] dark:text-slate-400 leading-relaxed mb-6" */
.blog-featured__excerpt { font-size: 0.875rem; color: #444; line-height: 1.625; margin-bottom: 1.5rem; }
.mk-dark .blog-featured__excerpt { color: #94a3b8; }

/* "text-sm font-semibold text-indigo-600 dark:text-indigo-400 inline-flex
    items-center gap-1.5" — the hover colour equals the resting colour, so only
   the arrow moves. */
.blog-readmore {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #4f46e5;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.mk-dark .blog-readmore { color: #818cf8; }
/* "group-hover:translate-x-1 transition-transform" */
.blog-readmore__arrow { transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.blog-featured:hover .blog-readmore__arrow,
.blog-card:hover .blog-readmore__arrow { transform: translateX(0.25rem); }

/* Grid: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5" */
.blog__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (min-width: 768px) { .blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Card: GlowCard + "rounded-2xl border border-slate-200/80
    dark:border-white/6 hover:border-indigo-400/40 transition-colors
    duration-300 overflow-hidden h-full" + card gradient.
   `dark:border-white/6` generates no rule (§5.1) — slate-200/80 stays. */
.blog-card {
  border-radius: 1rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  height: 100%;
  background: var(--mk-card-grad);
}
.blog-card:hover { border-color: rgba(129, 140, 248, 0.4); }
/* "group block w-full text-left h-full flex flex-col" — `block` then `flex`
   in the same class list; the later `flex` wins. */
.blog-card__link { display: flex; flex-direction: column; width: 100%; text-align: left; height: 100%; }
/* "relative h-32 overflow-hidden flex-shrink-0" */
.blog-card__art { height: 8rem; flex-shrink: 0; }
/* "p-6 flex flex-col flex-1" */
.blog-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1 1 0%; }
/* "text-xl font-bold text-slate-900 dark:text-white mt-3 mb-2
    group-hover:text-indigo-700 dark:group-hover:text-indigo-300
    transition-colors" + lineHeight 1.22 */
.blog-card__title {
  font-size: 1.25rem;
  line-height: 1.22;
  font-weight: 700;
  color: #0f172a;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-dark .blog-card__title { color: #fff; }
.blog-card:hover .blog-card__title { color: #4338ca; }
.mk-dark .blog-card:hover .blog-card__title { color: #a5b4fc; }
/* "text-[13px] text-[#444444] dark:text-slate-500 leading-relaxed mb-4" */
.blog-card__excerpt { font-size: 13px; color: #444; line-height: 1.625; margin-bottom: 1rem; }
.mk-dark .blog-card__excerpt { color: #64748b; }
/* "mt-auto" on the read-more line inside a card. */
.blog-card .blog-readmore { margin-top: auto; }

/* ═══ Reader ═══════════════════════════════════════════════════════════════ */

/* "max-w-3xl mx-auto px-6 pb-28" */
.blog-reader {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 7rem;
}
/* "inline-flex items-center gap-2 text-sm text-[#000000] dark:text-slate-400
    hover:text-slate-900 dark:hover:text-white transition-colors mb-8" */
.blog-reader__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #000;
  margin-bottom: 2rem;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-dark .blog-reader__back { color: #94a3b8; }
.blog-reader__back:hover { color: #0f172a; }
.mk-dark .blog-reader__back:hover { color: #fff; }
/* "h-40 rounded-2xl mb-8 relative overflow-hidden" */
.blog-reader__art { height: 10rem; border-radius: 1rem; margin-bottom: 2rem; }
/* "text-[2.2rem] md:text-[2.75rem] font-black text-slate-900 dark:text-white
    tracking-tight mt-4 mb-8" + lineHeight 1.1, letterSpacing -0.03em */
.blog-reader__title {
  font-size: 2.2rem;
  line-height: 1.1;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.mk-dark .blog-reader__title { color: #fff; }
@media (min-width: 768px) { .blog-reader__title { font-size: 2.75rem; } }
/* "flex flex-col gap-5" + "text-[15px] text-[#000000] dark:text-slate-400
    leading-[1.85]" */
.blog-reader__body { display: flex; flex-direction: column; gap: 1.25rem; }
.blog-reader__body p { font-size: 15px; color: #000; line-height: 1.85; }
.mk-dark .blog-reader__body p { color: #94a3b8; }
/* "mt-12 pt-8 border-t border-slate-200/80 dark:border-white/6 flex
    items-center gap-3" */
.blog-reader__author {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* "w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0"
   + background var(--mk-inset) */
.blog-reader__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--mk-inset);
}
/* "text-xs font-semibold text-slate-700 dark:text-slate-300" */
.blog-reader__author-name { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: #334155; }
.mk-dark .blog-reader__author-name { color: #cbd5e1; }
/* "text-[11px] text-slate-500 dark:text-slate-600" */
.blog-reader__author-role { font-size: 11px; color: #64748b; }
.mk-dark .blog-reader__author-role { color: #475569; }
/* "mt-12 text-center" */
.blog-reader__cta { margin-top: 3rem; text-align: center; }