/* Small additions for the custom blog pages (blog.php / post.php).
   Kept separate from main.css so the generated theme file is never hand-edited. */

/* The theme's .sec-padding gives every section 130px of bottom padding, and the
   CTA card right after this one adds another 100px of its own top padding on
   top of that - the combination reads as a big empty gap. Cutting just this
   section's bottom padding tightens it without touching .sec-padding itself
   (used all over the site) or the CTA card's own internal spacing. The section
   grows/shrinks on its own as the card grid wraps to more or fewer rows, so
   this stays proportionate whether there's 1 review or a full 6. */
#latest-posts.sec-padding {
  padding-bottom: 40px;
}

/* .floating-widget's base (non-mobile) style includes transform: translateY(70%) -
   the theme shifts it down by 70% of its own height by default, meant to be reset
   by a wrapping wrapper class in the theme's original page layouts. This card isn't
   wrapped that way here, so without this override it renders ~290px lower than its
   box actually occupies, which reads as a huge gap above it. */
.floating-widget {
  transform: none;
}

/* The theme's own demo card images are all pre-cropped to the same proportions,
   so the base theme CSS never needed a height constraint - its rule also only
   targets a *direct* <img> child, but every card here wraps the image in an
   <a> for click-through, so that rule never actually matched. Admin-uploaded
   images can be any size, so without this they render at their native
   dimensions instead of a consistent thumbnail size. */
.blog-widget img {
  display: block;
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 41 / 25;
  object-fit: cover;
}

.blog-widget .blog-content .blog-excerpt {
  color: #5c5b5e;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 13px;
  text-transform: none;
  letter-spacing: normal;
}

.post-details-widget img.featured {
  border-radius: 12px;
  width: 100%;
  margin-bottom: 30px;
}

.post-details-widget .post-meta {
  color: #747376;
  font-size: 14px;
  margin-bottom: 20px;
}

.post-details-widget .post-meta i {
  margin-right: 5px;
}

.post-details-widget h1.post-title {
  margin-bottom: 12px;
}