/* =========================================================
   Gelagen — Blog stylesheet (loaded only on /blog/ pages)
   Separate from the main component sheet, mh- architecture.
   ========================================================= */

/* Blog hero band */
.mh-blog-hero{
  background:var(--mh-grad-hero); color:#fff;
  padding:58px 0 46px; text-align:center; position:relative; overflow:hidden;
}
.mh-blog-hero::before{
  content:""; position:absolute; width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(246,179,199,.18), transparent 70%);
  top:-200px; right:-120px; pointer-events:none;
}
.mh-blog-hero h1{ color:#fff; }
.mh-blog-hero .mh-lede{ color:rgba(255,255,255,.82); margin:12px auto 0; }

/* Category filter chips */
.mh-blog-filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 auto 40px; }
.mh-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--mh-line); color:var(--mh-ink-soft);
  font-weight:700; font-size:.84rem; padding:9px 18px; border-radius:var(--mh-radius-pill);
  cursor:pointer; transition:all .2s var(--mh-ease);
}
.mh-chip:hover{ border-color:var(--mh-gold-400); color:var(--mh-gold-700); }
.mh-chip.active{ background:var(--mh-grad-gold); color:var(--mh-navy-900); border-color:transparent; box-shadow:var(--mh-shadow-gold); }

/* Blog grid cards (blog-scoped) */
.mh-blog-card .thumb{ height:188px; width:100%; object-fit:cover; display:block; }
.mh-blog-card .tag{ font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mh-gold-700); margin-bottom:8px; }
.mh-blog-card .read-more{ margin-top:14px; font-weight:800; color:var(--mh-gold-700); font-size:.88rem; display:inline-flex; align-items:center; gap:6px; }
.mh-blog-card .read-more:hover{ color:var(--mh-gold-600); }

/* Single-post typography */
.mh-post-body h2{ font-size:1.4rem; margin:30px 0 10px; }
.mh-post-body h3{ font-size:1.12rem; margin:22px 0 8px; }
.mh-post-body p{ color:var(--mh-ink); }
.mh-post-body ul, .mh-post-body ol{ color:var(--mh-ink-soft); margin:0 0 1.1rem 1.1rem; }
.mh-post-body li{ margin-bottom:.5rem; }

/* In-post CTA block */
.mh-post-cta{
  background:var(--mh-grad-panel); border:1px solid var(--mh-line);
  border-left:4px solid var(--mh-gold-500); border-radius:var(--mh-radius-md);
  padding:24px 26px; margin:30px 0;
}
.mh-post-cta h3{ margin:0 0 8px; font-size:1.15rem; }
.mh-post-cta p{ color:var(--mh-ink-soft); margin-bottom:14px; }

/* Sources / references block */
.mh-sources{
  background:#fff; border:1px solid var(--mh-line); border-radius:var(--mh-radius-sm);
  padding:18px 22px; margin:26px 0; font-size:.9rem;
}
.mh-sources h4{ font-family:var(--mh-font-body); font-weight:800; font-size:.95rem; margin:0 0 8px; color:var(--mh-navy-900); }
.mh-sources ul{ margin:0; padding-left:18px; color:var(--mh-ink-soft); }
.mh-sources a{ color:var(--mh-gold-700); font-weight:600; }

/* Table of key points */
.mh-keybox{
  background:var(--mh-honey-100); border:1px solid var(--mh-line);
  border-radius:var(--mh-radius-md); padding:20px 24px; margin:22px 0;
}
.mh-keybox h3{ font-size:1.05rem; margin:0 0 8px; }
.mh-keybox p{ margin:0; color:var(--mh-ink-soft); }

@media (max-width:767px){
  .mh-blog-hero{ padding:40px 0 32px; }
  .mh-post-body h2{ font-size:1.25rem; }
}