/* The blog INDEX (/blog/ and /blog/tag/<tag>/).

   Everything is scoped under .mn-blog, so this sheet is inert on every other
   page that shares the resource-hub style profile. Only pages/blog.php in
   listing mode asks for it, through $pageStylesheets.

   The band geometry is NOT redefined here. The hero reuses the shell's own
   .page-hero (assets/css/resource-modern-shell.css), which owns the edge bleed,
   the 1280 column that lines the H1 up with the navbar wordmark, the faint grid
   overlay and the responsive cancels. .mn-blog-hero only changes the type scale
   and adds the search row, the same way .qp-subj sets its own head inside the
   shell rather than forking the band. */

.mn-blog {
  /* Read from the shell first, so a token change there reaches this page too.
     The literals are fallbacks for the impossible case of this sheet loading
     without resource-modern-shell.css. */
  --mnb-ink: var(--ink, #0d1526);
  --mnb-body: var(--ink-2, #2c3e5c);
  --mnb-muted: var(--ink-3, #5a718c);
  --mnb-faint: var(--ink-4, #9aafc5);
  --mnb-blue: var(--blue-600, #1d50ca);
  --mnb-blue-dark: var(--blue-700, #1740a0);
  --mnb-line: var(--border, #dce6f5);
  --mnb-line-hover: var(--blue-200, #c7d9fc);
  --mnb-tint: var(--blue-50, #f0f5ff);
  --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, its hairlines and the
     greys the disabled pager sits on. */
  --mnb-panel: #e8effa;
  --mnb-panel-line: #cfdef5;
  --mnb-panel-ink: #4a6180;
  --mnb-line-soft: #f0f4fb;
  --mnb-off-line: #e8eef8;
  --mnb-off-ink: #a8b8cd;

  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

/* ---- hero --------------------------------------------------------------- */

/* The eyebrow is a line of type, not the shell's pill-with-a-dot: this hero
   opens with a count and a scope ("24 articles, Mumbai University"), which is a
   sentence about the page, not a label stuck to it. */
.mn-res-content .mn-blog-hero .hero-left {
  padding-block: 2.4rem 2.6rem;
}

.mn-res-content .mn-blog-hero .hero-eyebrow {
  display: block;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0.7rem;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-300, #93b4f8);
}

.mn-res-content .mn-blog-hero .hero-eyebrow::before {
  content: none;
}

.mn-res-content .mn-blog-hero .hero-title {
  font-size: 2.35rem;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.024em;
  margin-bottom: 0.75rem;
  max-width: 22ch;
  text-wrap: pretty;
}

.mn-res-content .mn-blog-hero .hero-sub {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.5rem;
  max-width: 60ch;
  text-wrap: pretty;
}

/* A real GET form, not a client-side filter: it searches every published
   article, not the twelve this page happens to be showing. */
.mn-blog-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #b3c6e6;
}

.mn-blog-search svg {
  flex-shrink: 0;
  display: block;
}

.mn-blog-search input {
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.2;
  color: #fff;
  width: 100%;
  min-width: 0;
}

.mn-blog-search input::placeholder {
  color: #b3c6e6;
}

.mn-blog-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* The submit button exists for keyboards and for JavaScript-off, where Enter in
   a lone text input is the only other way to send the form. It is not drawn. */
.mn-blog-search button {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- browse by topic ---------------------------------------------------- */

.mn-blog-topics {
  scroll-margin-top: 5rem;
}

.mn-blog-topics-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 11px;
}

.mn-blog-topics-head h2 {
  margin: 0;
  font-family: var(--mnb-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mnb-muted);
}

.mn-blog-topics-toggle {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--mnb-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--mnb-blue);
  cursor: pointer;
  white-space: nowrap;
}

.mn-blog-topics-toggle:hover {
  text-decoration: underline;
}

.mn-blog-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* Links, not buttons: /blog/tag/<slug>/ is a real indexed page with its own
   canonical and its own BreadcrumbList, and it has to stay reachable by a
   crawler and by a reader with JavaScript off. */
.mn-blog-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 9px;
  border: 1px solid var(--mnb-line);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--mnb-body);
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.14s, background 0.14s, color 0.14s;
}

.mn-blog-tag:hover {
  border-color: var(--mnb-line-hover);
  background: var(--mnb-tint);
  color: var(--mnb-blue);
}

.mn-blog-tag.is-on,
.mn-blog-tag.is-on:hover {
  border-color: var(--mnb-blue);
  background: var(--mnb-blue);
  color: #fff;
}

.mn-blog-tag-count {
  font-family: var(--mnb-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--mnb-muted);
}

.mn-blog-tag:hover .mn-blog-tag-count {
  color: var(--mnb-blue);
}

.mn-blog-tag.is-on .mn-blog-tag-count,
.mn-blog-tag.is-on:hover .mn-blog-tag-count {
  color: rgba(255, 255, 255, 0.82);
}

/* ⚠️ The overflow tags render VISIBLE and the toggle renders hidden. The script
   in pages/blog.php reverses both on load. With JavaScript off the reader gets
   every topic and no button, which is the honest fallback; the other way round
   hides half the archive behind a control that cannot fire. */
.mn-blog-taglist.is-collapsed .mn-blog-tag-extra {
  display: none;
}

/* ---- list heading ------------------------------------------------------- */

/* Not the shell's navy .section-header band. The hero directly above is already
   navy and full width, and a second band 20px under it reads as one 300px slab
   of blue with a white stripe through it. A rule and a count do the same job
   here: name the list, say how much of it you are looking at. */
.mn-blog-listhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--mnb-line);
}

.mn-blog-listhead h2 {
  margin: 0 0 10px;
  font-family: var(--mnb-serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--mnb-ink);
}

.mn-blog-listhead p {
  margin: 0 0 12px;
  font-family: var(--mnb-mono);
  font-size: 11.5px;
  color: var(--mnb-muted);
}

/* ---- the cards ---------------------------------------------------------- */

.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;
}

/* ---- nothing matched ---------------------------------------------------- */

.mn-blog-empty {
  padding: 36px 24px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--mnb-line);
  border-radius: 12px;
}

.mn-blog-empty-h {
  margin: 0 0 6px;
  font-family: var(--mnb-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--mnb-ink);
}

.mn-blog-empty p {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mnb-muted);
}

.mn-blog-empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid var(--mnb-line);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--mnb-body);
  text-decoration: none;
  transition: border-color 0.14s, background 0.14s, color 0.14s;
}

.mn-blog-empty-btn:hover {
  border-color: var(--mnb-line-hover);
  background: var(--mnb-tint);
  color: var(--mnb-blue);
}

/* ---- pagination --------------------------------------------------------- */

.mn-blog-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 6px;
}

.mn-blog-pager-state {
  margin: 0;
  font-family: var(--mnb-mono);
  font-size: 11.5px;
  color: var(--mnb-muted);
}

.mn-blog-pager-links {
  display: flex;
  align-items: center;
  gap: 7px;
}

.mn-blog-pg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 9px;
  border: 1px solid var(--mnb-line);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--mnb-body);
  text-decoration: none;
  transition: border-color 0.14s, background 0.14s, color 0.14s;
}

.mn-blog-pg:hover {
  border-color: var(--mnb-line-hover);
  background: var(--mnb-tint);
  color: var(--mnb-blue);
}

.mn-blog-pg-next {
  border-color: var(--mnb-blue);
  background: var(--mnb-blue);
  color: #fff;
}

.mn-blog-pg-next:hover {
  border-color: var(--mnb-blue-dark);
  background: var(--mnb-blue-dark);
  color: #fff;
}

/* The end of the archive is stated, not hidden: a greyed Previous on page one
   says there is nothing behind you, where an absent button says nothing. */
.mn-blog-pg-off,
.mn-blog-pg-off:hover {
  padding: 0 16px;
  border-color: var(--mnb-off-line);
  background: var(--mnb-off, #f8f9fc);
  color: var(--mnb-off-ink);
}

/* ---- the feeds ---------------------------------------------------------- */

.mn-blog-feeds {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 15px 18px;
  background: #fff;
  border: 1px solid var(--mnb-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(13, 21, 38, 0.05);
}

.mn-blog-feeds-copy {
  min-width: 0;
}

.mn-blog-feeds-h {
  margin: 0 0 3px;
  font-family: var(--mnb-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--mnb-ink);
}

.mn-blog-feeds-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mnb-muted);
}

.mn-blog-feed-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mn-blog-feed {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--mnb-line);
  background: #fff;
  font-family: var(--mnb-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--mnb-body);
  text-decoration: none;
  transition: border-color 0.14s, background 0.14s, color 0.14s;
}

.mn-blog-feed:hover {
  border-color: var(--mnb-line-hover);
  background: var(--mnb-tint);
  color: var(--mnb-blue);
}

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

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

@media (max-width: 768px) {
  .mn-res-content .mn-blog-hero .hero-left {
    padding-block: 1.7rem 1.9rem;
  }

  .mn-res-content .mn-blog-hero .hero-title {
    font-size: 1.9rem;
  }
}

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

  .mn-blog-feeds {
    flex-direction: column;
    align-items: stretch;
  }

  .mn-blog-pager {
    gap: 10px;
  }

  .mn-blog-pager-links {
    width: 100%;
  }

  /* 44px tall and each half of the row, so both are thumb targets rather than
     two small pills in one corner. */
  .mn-blog-pg {
    flex: 1;
    padding: 0 12px;
  }
}