/* ===== Bloggindex utan JS - CSS ===== */
.blogg-wrapper { max-width: 1100px; margin: 0 auto; padding: 24px; }
.blogg-title { font-size: clamp(24px, 3.2vw, 36px); font-weight: 700; margin: 0 0 12px; }

.post-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
@media (min-width: 640px) { .post-grid { gap: 20px; } }
@media (min-width: 1024px) { .post-grid { gap: 24px; } }

.post {
  grid-column: span 12;
  border: 1px solid #eee; border-radius: 16px; background: #fff; padding: 18px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  position: relative;
}
@media (min-width: 640px) { .post { grid-column: span 6; } }
@media (min-width: 1024px) { .post { grid-column: span 4; } }

.post:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.06); border-color: #e6e6e6; }

.post-title { margin: .2rem 0 .4rem; font-size: 1.1rem; line-height: 1.3; }
.post-title-link {
  text-decoration: none; color: inherit; pointer-events: auto; position: relative; z-index: 1;
}
.post-title-link:hover, .post-title-link:focus { text-decoration: underline; outline: none; }

.post-meta { font-size: .9rem; color: #666; margin-bottom: .6rem; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.post-excerpt { color: #333; font-size: .96rem; margin: 0 0 .6rem; }

.post-tags { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.post-tags li { font-size: .78rem; border: 1px solid #eee; border-radius: 999px; padding: 4px 8px; background: #fafafa; }

.post-cta { margin-top: .6rem; }
.btn { display: inline-block; padding: 10px 14px; border: 1px solid #ddd; border-radius: 12px; text-decoration: none; }
.btn:hover, .btn:focus { box-shadow: 0 6px 18px rgba(0,0,0,.06); outline: none; }
.btn-read { font-size: .9rem; }

.blogg-more { margin-top: 24px; text-align: center; }