/* Marry Me — Journal (blog) listing + article pages.
   Additive only: reuses --mm-* tokens and .mm-content-page from figma-refresh.css,
   never redefines them. Scoped entirely to .mm-blog-* classes. */

.mm-blog-page { max-width: var(--mm-max); }

.mm-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 44px 32px;
  margin-top: 48px;
}

.mm-blog-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.mm-blog-card-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mm-card);
  border-radius: 2px;
}
.mm-blog-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.mm-blog-card:hover .mm-blog-card-media img { transform: scale(1.04); }

.mm-blog-card-date { margin: 18px 0 8px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mm-muted); }
.mm-blog-card-title { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em; color: var(--mm-ink); }
.mm-blog-card-excerpt { margin: 0 0 14px; color: var(--mm-muted); font-size: .92rem; line-height: 1.7; }
.mm-blog-card-excerpt {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mm-blog-card-link {
  margin-top: auto; align-self: flex-start;
  padding-bottom: 3px; border-bottom: 1px solid var(--mm-ink);
  font-size: .64rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--mm-ink);
}
.mm-blog-card:hover .mm-blog-card-link { border-color: var(--mm-teal); color: var(--mm-teal); }

/* ---------- Article ---------- */
.mm-blog-back {
  display: inline-block; margin-bottom: 28px;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mm-muted);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.mm-blog-back:hover { color: var(--mm-teal); border-color: var(--mm-teal); }

.mm-blog-article-hero {
  width: 100%; aspect-ratio: 16 / 8; object-fit: cover;
  background: var(--mm-card); border-radius: 2px; margin-bottom: 36px;
}
.mm-blog-article-date { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mm-muted); margin-bottom: 10px; }
.mm-blog-article h1 { max-width: 22ch; font-size: clamp(2.4rem,4.2vw,3.6rem); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 28px; }

.mm-blog-body { max-width: 70ch; color: var(--mm-ink); font-size: 1rem; line-height: 1.85; }
.mm-blog-body p { margin: 0 0 26px; }
.mm-blog-body h2 { font-size: 1.5rem; line-height: 1.25; margin: 46px 0 18px; }
.mm-blog-body h3 { font-family: var(--mm-body); font-weight: 600; font-size: 1rem; letter-spacing: -.005em; margin: 30px 0 10px; }
.mm-blog-body ul, .mm-blog-body ol { margin: 0 0 26px; padding-left: 22px; }
.mm-blog-body li { margin-bottom: 14px; line-height: 1.75; }
.mm-blog-body li strong { color: var(--mm-ink); }
.mm-blog-body strong { font-weight: 600; }
.mm-blog-body a { color: var(--mm-teal); text-decoration: underline; text-underline-offset: 3px; }

.mm-blog-more { max-width: var(--mm-max); margin: 88px auto 0; padding-top: 44px; border-top: 1px solid var(--mm-line); }
.mm-blog-more h2 { font-size: 1.6rem; margin: 0 0 8px; }
.mm-blog-more .mm-blog-grid { margin-top: 28px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

@media (max-width: 640px) {
  .mm-blog-article-hero { aspect-ratio: 4 / 3; }
  .mm-blog-grid { gap: 34px 20px; }
}