/* ============================================================
   Hearthstone Mortgages — Blog index, category + single post
   Builds on location.css/service.css prose helpers.
   ============================================================ */

/* ---- Index + category library ---- */
.hm-blog-lib__inner { max-width: var(--container-xl); margin-inline: auto; }

.hm-blog-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.hm-blog-filter__chip { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.7rem; color: var(--hm-blue-700); background: var(--hm-blue-50); border: 1px solid var(--hm-slate-200); border-radius: 999px; padding: 0.5rem 0.95rem; text-decoration: none; transition: background 160ms var(--ease-out), color 160ms var(--ease-out); }
.hm-blog-filter__chip:hover { background: var(--hm-blue-100, #dceaf7); }
.hm-blog-filter__chip.is-active { background: var(--hm-blue-700); color: #fff; border-color: var(--hm-blue-700); }

.hm-blog-lib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }

.hm-blog-card { position: relative; display: flex; flex-direction: column; background: var(--hm-white); border: 1px solid var(--hm-slate-200); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.hm-blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.hm-blog-card__cover { position: absolute; inset: 0; z-index: 1; }
.hm-blog-card__media { display: block; aspect-ratio: 16 / 9; background: var(--hm-blue-50); overflow: hidden; }
.hm-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-blog-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.6rem 1.4rem; }
.hm-blog-card__meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.7rem; }
.hm-blog-card__cat { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6rem; color: var(--hm-blue-600); }
.hm-blog-card__read { font-family: var(--font-body); font-size: 0.74rem; color: var(--hm-slate-500); }
.hm-blog-card__title { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.18rem; line-height: 1.2; color: var(--hm-ink); margin: 0; }
.hm-blog-card__excerpt { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.6; color: var(--hm-slate-600); margin: 0.6rem 0 0; }
.hm-blog-card__foot { display: flex; align-items: center; gap: 0.6rem; margin-top: auto; padding-top: 1.1rem; }
.hm-blog-card__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; }
.hm-blog-card__byline { font-family: var(--font-body); font-size: 0.78rem; color: var(--hm-slate-600); }
@media (prefers-reduced-motion: reduce) { .hm-blog-card:hover { transform: none; } }

.hm-blog-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 2.5rem; }
.hm-blog-pager__link { font-family: var(--font-heading); font-weight: 800; font-size: 0.8rem; color: var(--hm-blue-700); background: var(--hm-blue-50); border: 1px solid var(--hm-slate-200); border-radius: 8px; padding: 0.5rem 0.85rem; text-decoration: none; }
.hm-blog-pager__link.current { background: var(--hm-blue-700); color: #fff; border-color: var(--hm-blue-700); }
.hm-blog-pager a.hm-blog-pager__link:hover { background: var(--hm-blue-100, #dceaf7); }

/* ---- Single post hero ---- */
.hm-blog-hero__inner { max-width: var(--container-xl); margin-inline: auto; }
.hm-blog-hero__title { max-width: 900px; }
.hm-blog-hero__meta { display: flex; align-items: center; gap: 0.85rem; margin: 1.4rem 0 0.6rem; color: rgba(255,255,255,0.75); font-family: var(--font-body); font-size: 0.8rem; }
.hm-blog-hero__cat { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.66rem; color: var(--hm-gold-400, #f6c95a); text-decoration: none; }
.hm-blog-hero__cat:hover { color: var(--hm-gold-500); }
.hm-blog-hero__title { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: -0.015em; font-size: var(--hm-h1); line-height: 1.05; color: #fff; margin: 0; }
.hm-blog-hero__byline { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.6rem; }
.hm-blog-hero__byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center top; }
.hm-blog-hero__author { font-family: var(--font-heading); font-weight: 800; color: #fff; margin: 0; font-size: 0.95rem; }
.hm-blog-hero__creds { font-weight: 700; font-size: 0.72rem; color: var(--hm-gold-400, #f6c95a); letter-spacing: 0.03em; }
.hm-blog-hero__dates { font-family: var(--font-body); font-size: 0.78rem; color: rgba(255,255,255,0.7); margin: 0.15rem 0 0; }

/* ---- Single post body (article + sticky sidebar) ---- */
.hm-blog-body__inner { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; max-width: var(--container-xl); margin-inline: auto; align-items: start; }
.hm-blog-prose { max-width: 760px; }
.hm-blog-prose h2 { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.5rem; line-height: 1.2; color: var(--hm-ink); margin: 2.2rem 0 0.8rem; }
.hm-blog-prose h3 { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; color: var(--hm-ink); margin: 1.6rem 0 0.6rem; }
.hm-blog-prose p, .hm-blog-prose li { font-family: var(--font-body); font-size: 1.04rem; line-height: 1.75; color: var(--hm-slate-700); }
.hm-blog-prose p { margin: 0 0 1.1rem; }
.hm-blog-prose ul, .hm-blog-prose ol { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.hm-blog-prose li { margin-bottom: 0.5rem; }
.hm-blog-prose a { color: var(--hm-blue-700); text-decoration: underline; text-underline-offset: 2px; }
.hm-blog-prose a:hover { color: var(--hm-gold-600); }
.hm-blog-prose strong { color: var(--hm-ink); }
.hm-blog-prose blockquote { margin: 1.6rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--hm-gold-500); background: var(--hm-blue-50); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.hm-blog-prose blockquote p { font-family: var(--font-heading); font-weight: 700; color: var(--hm-ink); margin: 0; }

.hm-blog-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1.25rem; }
.hm-blog-author { background: var(--hm-blue-50); border-radius: var(--radius-xl); padding: 1.5rem 1.4rem; text-align: center; }
.hm-blog-author__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center top; margin: 0 auto 0.8rem; display: block; }
.hm-blog-author__label { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6rem; color: var(--hm-blue-600); margin: 0; }
.hm-blog-author__name { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; font-size: 1.15rem; color: var(--hm-ink); margin: 0.2rem 0 0.15rem; }
.hm-blog-author__role { font-family: var(--font-body); font-size: 0.82rem; color: var(--hm-slate-600); margin: 0 0 0.4rem; }
.hm-blog-author__reviewed { font-family: var(--font-body); font-size: 0.74rem; color: var(--hm-slate-500); margin: 0 0 1rem; }
.hm-blog-author .hm-btn { margin-top: 0.4rem; }
.hm-blog-author .hm-cs-adviser__link { display: inline-block; margin-top: 0.85rem; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.72rem; color: var(--hm-blue-700); text-decoration: none; }
.hm-blog-author .hm-cs-adviser__link:hover { color: var(--hm-gold-600); }

.hm-blog-cta { background: var(--hm-ink); color: #fff; border-radius: var(--radius-xl); padding: 1.5rem 1.4rem; }
.hm-blog-cta__title { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; font-size: 1.05rem; color: #fff; margin: 0 0 0.4rem; }
.hm-blog-cta__body { font-family: var(--font-body); font-size: 0.86rem; line-height: 1.55; color: rgba(255,255,255,0.82); margin: 0 0 1rem; }
.hm-blog-cta__call { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.85rem; font-family: var(--font-heading); font-weight: 800; font-size: 0.85rem; color: var(--hm-gold-400, #f6c95a); text-decoration: none; }
.hm-blog-cta__call:hover { color: #fff; }

@media (max-width: 900px) {
	.hm-blog-body__inner { grid-template-columns: 1fr; gap: 2rem; }
	.hm-blog-side { position: static; }
}