/* Sleep journal index */
.blog-hero .lead { margin-top: 10px; }
.blog-grid { gap: 32px 24px; }
.blog-card { position: relative; display: flex; flex-direction: column; gap: 14px; }
.blog-card-media { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.blog-card:hover .blog-card-media img { transform: scale(1.03); }
.blog-card-body { display: flex; flex-direction: column; gap: 8px; }
.blog-date { font-size: 13px; color: var(--deep); font-weight: 600; }
.blog-card-title { font-size: 20px; line-height: 1.3; }
.blog-card-title a { color: var(--navy); text-decoration: none; }
.blog-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.blog-card:hover .blog-card-title a { text-decoration: underline; text-underline-offset: 3px; }
.blog-excerpt { color: var(--ink); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-read { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--navy); }

.blog-empty { max-width: 620px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 40px 20px; border-radius: var(--radius-lg); background: var(--sand); }
.blog-empty-icon { width: 64px; height: 64px; border-radius: 999px; background: #fff; color: var(--navy); display: grid; place-items: center; }
.blog-empty .row { margin-top: 6px; }

@media (min-width: 1000px) {
  .blog-card-title { font-size: 22px; }
  .blog-empty { padding: 56px 48px; }
}