/* ONE blog card, used in more than one place.

   The card was written inside assets/css/blog-index.css and only /blog/ could
   show it. The home page asks for the latest few as well (owner, 2026-10-01),
   so the card moved here and both surfaces load this sheet. Its markup moved
   the same day to includes/blog-card.php, so a change to the card is one edit
   and the two places cannot drift apart.

   ⛔ Nothing page-specific belongs in this file. The hero, the topic chips, the
   pager and the feed links are still blog-index.css, because only the listing
   has them.

   ⚠️ THE TOKENS ARE DECLARED ON THE CARD ITSELF, not on a page wrapper. The
   listing wraps everything in .mn-blog, which declares the same --mnb-* set;
   the home page has no such wrapper and does not load the resource shell, so a
   card there would have resolved every colour to nothing. Each token still
   reads the shell's own scale first and falls back to the literal the shell
   declares, so the two renderings are the same card, not a lookalike. */

.mn-blog-grid,
.mn-blog-card {
  --mnb-ink: var(--ink, #0d1526);
  --mnb-muted: var(--ink-3, #5a718c);
  --mnb-blue: var(--blue-600, #1d50ca);
  --mnb-line: var(--border, #dce6f5);
  --mnb-line-hover: var(--blue-200, #c7d9fc);
  --mnb-serif: var(--f-display, 'Lora', Georgia, Cambria, serif);
  --mnb-mono: var(--f-mono, 'JetBrains Mono', monospace);

  /* Not in the shell scale: the card's cover panel and its hairlines. */
  --mnb-panel: #e8effa;
  --mnb-panel-line: #cfdef5;
  --mnb-panel-ink: #4a6180;
  --mnb-line-soft: #f0f4fb;
}

.mn-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.mn-blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mnb-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(13, 21, 38, 0.05);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.mn-blog-card:hover {
  border-color: var(--mnb-line-hover);
  box-shadow: 0 8px 22px rgba(4, 16, 31, 0.09);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .mn-blog-card {
    transition: none;
  }

  .mn-blog-card:hover {
    transform: none;
  }
}

/* The cover. Every post has a generated 1200x630 card at
   assets/images/blog/og/<slug>.jpg, the same image its share preview uses, so a
   card is never an empty box. The ruled panel underneath is the fallback for a
   post whose card has not been generated yet, and it carries the same two marks
   so the grid never goes ragged either way. */
.mn-blog-card-top {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--mnb-panel);
  border-bottom: 1px solid var(--mnb-line);
  display: flex;
  align-items: flex-end;
  padding: 13px 15px;
  box-sizing: border-box;
  overflow: hidden;
}

/* The generated card fills the cover. object-fit: cover, not contain: the art is
   already 1.91:1 and the slot is 16:9, so this trims a hair off the sides rather
   than letterboxing navy against pale blue. */
.mn-blog-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ⛔ THE CARD'S OWN MARKS COME OFF WHEN THERE IS ARTWORK.

   The generated cover already carries the wordmark and the topic, because it is
   the same image the share preview uses and a preview has to identify itself
   with no page around it. Overlaying the card's chip and mark on top of it
   printed the topic twice and "munotes" twice on every card. The artwork wins:
   it is bigger, it is centred, and it was designed to carry them. */
.mn-blog-card-top.has-img .mn-blog-card-tag,
.mn-blog-card-top.has-img .mn-blog-card-mark {
  display: none;
}

.mn-blog-card-top.has-img::before {
  content: none;
}

.mn-blog-card-top::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(29, 80, 202, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 80, 202, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

.mn-blog-card-tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--mnb-panel-line);
  font-family: var(--mnb-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mnb-blue);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mn-blog-card-mark {
  position: absolute;
  top: 13px;
  right: 15px;
  z-index: 1;
  font-family: var(--mnb-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mnb-panel-ink);
}

.mn-blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px 17px 16px;
  flex: 1;
}

.mn-blog-card-title {
  margin: 0;
  font-family: var(--mnb-serif);
  font-size: 1.0625rem;
  line-height: 1.38;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--mnb-ink);
  text-wrap: pretty;
}

.mn-blog-card-excerpt {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mnb-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}

.mn-blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--mnb-line-soft);
  font-family: var(--mnb-mono);
  font-size: 11px;
  color: var(--mnb-muted);
}

.mn-blog-card-dot {
  color: #c3d2e5;
}

.mn-blog-card-read {
  margin-left: auto;
  color: var(--mnb-blue);
  font-weight: 600;
}

/* ---- widths ------------------------------------------------------------- */

@media (max-width: 980px) {
  .mn-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mn-blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}