/* ============================================================
   BLOG SECTION (reference: "Our Blog" editorial grid)
   Real articles from implantodent.ro, varied card heights,
   category eyebrow above each image, green pill "see all" CTA.
   ============================================================ */
/* whole blog section = one white shell card */
.blog-sec {
  width: var(--shell);
  margin-inline: auto;
  background: #fff;
  border: 1px solid rgba(16, 24, 32, .06);
  border-radius: clamp(22px, 2vw, 34px);
  box-shadow: var(--card-shadow);
  padding: clamp(2rem, 3.4vw, 3.4rem) clamp(1.4rem, 3.4vw, 3.4rem) clamp(2.6rem, 4vw, 4rem);
  overflow: hidden;
}
.blog-sec > .container { width: 100%; }
.blog-sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.6rem, 2.6vw, 2.4rem);
}
.blog-sec__head h2 { margin-top: .6rem; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2vw, 1.8rem);
  align-items: end;
}
.bpost {
  display: flex;
  flex-direction: column;
}
.bpost__cat {
  align-self: flex-end;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-60);
  margin-bottom: .8rem;
}
.bpost__media {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.1rem;
}
.bpost__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
  display: block;
}
.bpost:hover .bpost__media img { transform: scale(1.05); }
.bpost--1 .bpost__media { aspect-ratio: 4 / 4.6; }
.bpost--2 .bpost__media { aspect-ratio: 4 / 6.5; }
.bpost--3 .bpost__media { aspect-ratio: 4 / 3.2; }
.bpost--4 .bpost__media { aspect-ratio: 4 / 6.9; }
.bpost--3 { justify-content: flex-end; }
.bpost h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.bpost:hover h3 { color: var(--blue-deep); }

@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.2rem; }
  .bpost--1 .bpost__media,
  .bpost--2 .bpost__media,
  .bpost--3 .bpost__media,
  .bpost--4 .bpost__media { aspect-ratio: 4 / 4.6; }
  .bpost--3 { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .blog-sec__head { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .blog-grid { grid-template-columns: 1fr; }
}