/* HEADER */
.blog-header {
  max-width: 1100px; margin: 0 auto;
  padding: 5rem 2rem 3.5rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.blog-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700; color: var(--text);
  margin-bottom: 0.75rem; line-height: 1.15;
}
.blog-header p { font-size: 1.05rem; color: var(--text-secondary); }

/* GRID */
.blog-grid {
  max-width: 1100px; margin: 0 auto;
  padding: 3rem 2rem 6rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
}

/* CARD */
.card { background: var(--bg-card); border: 1px solid var(--border); display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; }
.card:hover { border-color: var(--border-orange); transform: translateY(-3px); }
.card-img { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, #111416 0%, #1a1c20 100%); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card-meta { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 0.75rem; }
.card-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 0.875rem; display: block; }
.card-title:hover { color: var(--orange); }
.card-excerpt { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; flex: 1; margin-bottom: 1.25rem; }
.card-link { font-size: 0.8rem; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 0.08em; }
.card-link:hover { color: var(--orange-light); }

/* RESPONSIVE */
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
  .nav-cta { display: none; }
  .nav-links { gap: 1.25rem; }
  .blog-header { padding: 3rem 1.25rem 2.5rem; }
  .blog-grid { padding: 2rem 1.25rem 4rem; }
}