/* Uniform card grid for /blogs and /parenting */
.blog-grid .col-card { margin-bottom: 1.5rem; }

.blog-card { border: 1px solid rgba(0,0,0,.06); border-radius: .5rem; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.blog-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); cursor: pointer; }
.blog-card:focus-within { box-shadow: 0 0 0 3px rgba(40,154,150,.24), 0 8px 24px rgba(0,0,0,.08); }

.blog-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #f8f9fa; display: block; }

.blog-card .card-body { display: flex; flex-direction: column; padding: 1rem 1rem .75rem; }
.blog-card-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 .25rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-subtitle { color: #6c757d; font-size: .95rem; margin: 0 0 .75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.blog-card .card-footer { background: #fff; border-top: none; padding: 0 1rem 1rem; margin-top: auto; }
.blog-card-date { color: #6c757d; font-size: .875rem; }

.blog_paragraph figure,
.blog_paragraph .sn-figure { text-align: center; }
.blog_paragraph figure > img,
.blog_paragraph .sn-figure > img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.blog_paragraph figcaption,
.blog_paragraph .sn-caption { text-align: center; font-style: italic; color: #6c757d; margin-top: 6px; }
.blog_paragraph figcaption:empty,
.blog_paragraph .sn-caption:empty { display: none; }

.blog-state-wrap {
  min-height: 50vh;
  display: flex;
  align-items: center;
  padding: 72px 16px;
  background: #f7f8f9;
}
.blog-state-card {
  box-sizing: border-box;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 36px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: .5rem;
  background: #fff;
  box-shadow: 0 20px 55px rgba(15, 23, 42, .08);
  text-align: center;
}
.blog-state-card h1,
.blog-state-card h2 {
  margin: 0 0 12px;
  color: #172127;
  font-family: "Open Sans", sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
}
.blog-state-card p {
  margin: 0 auto 24px;
  max-width: 420px;
  color: #5f6b73;
  font-family: "Open Sans", sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
}
.blog-state-card .btn {
  min-width: 180px;
  border-radius: 6px;
  background: #289a96;
  border-color: #289a96;
  color: #fff;
  font-weight: 700;
}
.blog-skeleton-line {
  height: 16px;
  margin: 14px auto 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef1f3 0%, #f8fafb 45%, #eef1f3 100%);
  background-size: 240% 100%;
  animation: blogSkeleton 1.2s ease-in-out infinite;
}
.blog-skeleton-title { height: 36px; max-width: 360px; }
.blog-skeleton-copy { max-width: 440px; }

@keyframes blogSkeleton {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@media (min-width: 992px) {
  .blog-card-title { font-size: 1.15rem; }
}

@media (max-width: 575.98px) {
  .blog-state-wrap { padding: 56px 16px; }
  .blog-state-card { padding: 28px 18px; }
  .blog-state-card h1,
  .blog-state-card h2 { font-size: 1.65rem; overflow-wrap: break-word; }
  .blog-state-card p { font-size: .98rem; overflow-wrap: break-word; }
}