/* ==========================================================================
   Heritage Homes — Blog styles (listing + detail)
   Palette: charcoal #232225 / #343436, olive accent #bcc269, light #f2f2f2
   Fonts:   CircularStdBold (headings), CircularStdBook (body)
   ========================================================================== */

/* ---------- Breadcrumbs ---------- */
.blog-crumbs{
  font-family:'CircularStdBook',"Helvetica Neue","lato",sans-serif;
  font-size:13px; letter-spacing:.2px; color:#8a8a8a; margin:38px 0 30px;
}
.blog-crumbs a{ color:#555456; text-decoration:none; transition:color .2s ease; }
.blog-crumbs a:hover{ color:#232225; }
.blog-crumbs .sep{ margin:0 9px; color:#cfcfcf; }
.blog-crumbs .current{ color:#232225; }

/* ---------- Listing (card grid) ---------- */
.blog-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px;
  margin:14px 0 60px;
}
@media (max-width:1100px){ .blog-list{ grid-template-columns:repeat(2,1fr); gap:30px; } }
@media (max-width:680px){ .blog-list{ grid-template-columns:1fr; } }

.blog-card{
  background:#fff;
  border:1px solid #e7e7e7;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:box-shadow .28s ease, transform .28s ease;
}
.blog-card:hover{ box-shadow:0 16px 40px rgba(35,34,37,.12); transform:translateY(-4px); }

.blog-card-image{ display:block; overflow:hidden; background:#f2f2f2; aspect-ratio:16/10; }
.blog-card-image img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
.blog-card:hover .blog-card-image img{ transform:scale(1.06); }

.blog-card-body{ padding:28px 28px 32px; display:flex; flex-direction:column; flex:1; }
.blog-card-title{
  font-family:'CircularStdBold',"Helvetica Neue","lato",sans-serif;
  font-size:23px; line-height:1.24; letter-spacing:-.3px; margin:0 0 13px;
}
.blog-card-title a{ color:#232225; text-decoration:none; transition:color .2s ease; }
.blog-card-title a:hover{ color:#9aa04f; }
.blog-card-summary{
  font-family:'CircularStdBook',"Helvetica Neue","lato",sans-serif;
  color:#555456; font-size:15px; line-height:1.7; margin:0 0 24px; flex:1;
}

/* CTA button (site look: charcoal, inverts to olive on hover) */
.blog-cta{
  display:inline-block; align-self:flex-start;
  font-family:'CircularStdBold',"Helvetica Neue","lato",sans-serif;
  font-size:12.5px; letter-spacing:1px; text-transform:uppercase;
  color:#fff; background:#232225; text-decoration:none;
  padding:14px 30px; border:1px solid #232225; transition:all .22s ease;
}
.blog-cta:hover{ background:#555456; border-color:#555456; color:#fff; }

.blog-list-empty{
  font-family:'CircularStdBook',"Helvetica Neue","lato",sans-serif;
  color:#777; font-size:17px; text-align:center; padding:50px 0;
}

/* ---------- Detail (article) ---------- */
.blog-post{ max-width:840px; margin:0 auto; padding:6px 0 20px; }
.blog-post-title{
  font-family:'CircularStdBold',"Helvetica Neue","lato",sans-serif;
  font-size:42px; line-height:1.1; letter-spacing:-1px; color:#232225; margin:0 0 30px;
}
@media (max-width:680px){ .blog-post-title{ font-size:31px; } }

.blog-post-image{ margin:0 0 40px; overflow:hidden; }
.blog-post-image img{ width:100%; height:auto; display:block; }

.blog-post-body{
  font-family:'CircularStdBook',"Helvetica Neue","lato",sans-serif;
  color:#343436; font-size:18px; line-height:1.8;
}
.blog-post-body > *:first-child{ margin-top:0; }
.blog-post-body p{ margin:0 0 24px; }
.blog-post-body h2{ font-family:'CircularStdBold',sans-serif; font-size:29px; line-height:1.25; letter-spacing:-.5px; color:#232225; margin:46px 0 16px; }
.blog-post-body h3{ font-family:'CircularStdBold',sans-serif; font-size:22px; color:#232225; margin:34px 0 12px; }
.blog-post-body a{ color:#232225; text-decoration:underline; text-underline-offset:2px; }
.blog-post-body a:hover{ color:#555456; }
.blog-post-body img{ max-width:100%; height:auto; margin:16px 0; }
.blog-post-body ul,.blog-post-body ol{ margin:0 0 24px; padding-left:22px; line-height:1.8; }
.blog-post-body li{ margin:0 0 8px; }
.blog-post-body blockquote{ border-left:3px solid #bcc269; margin:30px 0; padding:8px 0 8px 26px; color:#555456; font-style:italic; font-size:20px; }
.blog-post-body table{ width:100%; border-collapse:collapse; margin:0 0 24px; }
.blog-post-body th,.blog-post-body td{ border:1px solid #e2e2e2; padding:10px 14px; text-align:left; font-size:16px; }

.blog-back{
  display:inline-block; margin-top:50px;
  font-family:'CircularStdBold',"Helvetica Neue","lato",sans-serif;
  font-size:12.5px; letter-spacing:1px; text-transform:uppercase;
  color:#232225; text-decoration:none; border-bottom:2px solid #232225; padding-bottom:4px;
  transition:color .2s ease, border-color .2s ease;
}
.blog-back:hover{ color:#555456; border-color:#555456; }