.mmr-blog-hero { position: relative; padding: 140px 0 56px; overflow: hidden; background-color: var(--color-text); }
.mmr-blog-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, black 70%, transparent) 0%, color-mix(in srgb, black 45%, transparent) 60%, color-mix(in srgb, black 25%, transparent) 100%);
}
.mmr-blog-hero-inner { position: relative; z-index: 1; }
.mmr-blog-hero-inner h1 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(32px, 4.6vw, 50px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 12px; color: var(--color-bg); }
.mmr-blog-hero-intro { font-size: 16px; line-height: 26px; max-width: 60ch; margin: 0 0 28px; color: color-mix(in srgb, white 85%, transparent); }

.mmr-blog-search { display: flex; gap: 10px; max-width: 480px; margin-bottom: 20px; }
.mmr-blog-search .input { background: color-mix(in srgb, white 12%, transparent); border-color: color-mix(in srgb, white 30%, transparent); color: #fff; }
.mmr-blog-search .input::placeholder { color: color-mix(in srgb, white 65%, transparent); }

.mmr-blog-filter.seg--on-dark { border-color: color-mix(in srgb, white 30%, transparent); }
.seg--on-dark .seg-opt { color: #fff; text-decoration: none; }
.seg--on-dark .seg-opt + .seg-opt { border-left-color: color-mix(in srgb, white 30%, transparent); }
.seg--on-dark .seg-opt:not(.is-active):hover { background: color-mix(in srgb, white 15%, transparent); }
.seg--on-dark .seg-opt.is-active { background: var(--color-accent); color: #fff; }

.mmr-blog-filter-select { display: none; max-width: 480px; background-color: color-mix(in srgb, white 12%, transparent); border-color: color-mix(in srgb, white 30%, transparent); color: #fff; }
.mmr-blog-filter-select option { color: var(--color-text); }

@media (max-width: 560px) {
  .mmr-blog-search { flex-direction: column; max-width: 100%; }
}
/* Phones: the category buttons become a dropdown. */
@media (max-width: 700px) {
  .mmr-blog-filter { display: none; }
  .mmr-blog-filter-select { display: block; width: 100%; max-width: 100%; }
}

/* — blog archive grid (bigger cards than the homepage/community scroll row) — */
.mmr-blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 28px; }
.mmr-blog-grid .mmr-blog-card { flex: none; width: auto; }
.mmr-blog-grid .mmr-blog-card h3 { font-size: 18px; line-height: 1.3; }
@media (max-width: 1100px) { .mmr-blog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .mmr-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mmr-blog-grid { grid-template-columns: 1fr; } }

/* — blog pagination — */
.mmr-main .pagination { margin-top: 56px; }
.mmr-main .pagination .nav-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }
.mmr-main .pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--color-divider); background: var(--color-bg);
  font-size: 15px; font-weight: 500; text-decoration: none; color: var(--color-text);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mmr-main .pagination a.page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent); }
.mmr-main .pagination .page-numbers.current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.mmr-main .pagination .page-numbers.dots { border: 0; background: none; min-width: 24px; padding: 0; }
.mmr-main .pagination .prev, .mmr-main .pagination .next { padding: 0 20px; }
.mmr-main .pagination .prev { margin-right: 8px; }
.mmr-main .pagination .next { margin-left: 8px; }
@media (max-width: 480px) {
  /* Phones: arrows only, so everything fits on one line. */
  .mmr-main .pagination .prev, .mmr-main .pagination .next { font-size: 0; padding: 0; min-width: 44px; margin: 0; }
  .mmr-main .pagination .prev span, .mmr-main .pagination .next span { font-size: 16px; }
}