/* ProjectBob.xyz — Build Log placeholder */

.blog {
  max-width: 800px; margin: 0 auto; padding: 40px 24px 80px;
}
.blog h1 {
  font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: 8px;
}
.blog .lead {
  font-size: 15px; color: var(--text-secondary); margin-bottom: 32px; line-height: 1.6;
}

.post-grid {
  display: flex; flex-direction: column; gap: 16px;
}
.post-card {
  display: flex; gap: 20px; background: var(--surface); border-radius: 12px;
  border: 1px solid var(--border); overflow: hidden; transition: box-shadow 0.25s;
}
.post-card:hover { box-shadow: var(--shadow-hover); }

.post-thumb {
  width: 180px; min-height: 140px; background: var(--bg);
  flex-shrink: 0;
}
.placeholder-card .post-thumb {
  background: linear-gradient(135deg, rgba(59,125,216,0.06) 0%, rgba(46,158,143,0.06) 100%);
}

.post-body { padding: 20px 20px 20px 0; flex: 1; }
.post-date {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--accent); margin-bottom: 6px;
}
.post-body h3 {
  font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
.post-body p {
  font-size: 13px; color: var(--text-secondary); line-height: 1.6;
}

@media (max-width: 600px) {
  .post-card { flex-direction: column; }
  .post-thumb { width: 100%; min-height: 120px; }
  .post-body { padding: 16px; }
}