/* Odin blog index — sits on top of access-manager-style.css */

.blog-hero {
  padding: 48px 0 36px;
  border-bottom: 1px solid var(--line);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.blog-grid--pillars {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .blog-grid,
  .blog-grid--pillars { grid-template-columns: 1fr; }
}

.blog-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .15s ease;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.blog-card:hover { border-color: var(--enforced); }
.blog-card--pillar {
  border-width: 1.5px;
  min-height: 220px;
}
.blog-card__body {
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.blog-card__cat {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--enforced);
}
.blog-card h2,
.blog-card h3 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.2;
}
.blog-card--pillar h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
.blog-card h2 a,
.blog-card h3 a {
  text-decoration: none;
  color: var(--ink);
}
.blog-card h2 a:hover,
.blog-card h3 a:hover { color: var(--enforced); }
.blog-card p {
  margin: 0;
  font-size: .93rem;
  color: var(--ink-soft);
  flex: 1;
}
.blog-card__meta {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
  margin-top: 8px;
}