/* Quant Intelligence company blog — supplementary styles for blog/index.html
   and post pages. Extends the shared design system (../css/style.css).
   Does not redefine anything already provided there. */

/* ---------- Post grid (blog index) ---------- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.post-card {
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  border-radius: var(--radius);
  border: 1px solid var(--surface-border);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

.post-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.18);
}

.post-meta {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}

.post-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.post-card p { flex: 1; margin-bottom: 22px; }
.post-card .link-arrow { color: var(--cyan); border-color: rgba(79, 216, 255, 0.4); }

@media (max-width: 860px) {
  .post-grid { grid-template-columns: 1fr; }
}

/* ---------- Single post ---------- */

.back-to-blog {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-bottom: 26px;
  transition: color 0.2s var(--ease);
}

.back-to-blog:hover { color: var(--cyan); }

.post-byline {
  font-size: 0.85rem;
  color: var(--text-faint);
  margin: 0 auto;
}