/* Blog-specific styles */

.blog-page{ position: relative; z-index: 1; padding-bottom: 80px; }
.blog-hero{ padding: 44px 0 18px 0; }
.blog-hero h1{
  margin: 14px 0 10px 0;
  font-family: var(--serif);
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.02;
}

.blog-toolbar{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.search, .select{
  border-radius: 18px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.90);
  outline: none;
}
.search{ flex: 1; min-width: 220px; }
.select{ min-width: 180px; }

.post-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.post-card{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction: column;
}
.post-cover{
  height: 160px;
  background: rgba(0,0,0,.18);
  display:block;
  width: 100%;
  object-fit: cover;
}
.post-body{ padding: 14px; display:flex; flex-direction: column; gap: 10px; flex:1; }
.post-meta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items:center;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}
.badge{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.post-card h3{ margin: 0; font-size: 18px; }
.post-excerpt{ margin: 0; color: rgba(255,255,255,.78); line-height: 1.55; }
.post-card .btn{ margin-top:auto; align-self:flex-start; }

@media (max-width: 1020px){
  .post-grid{ grid-template-columns: 1fr; }
  .post-cover{ height: 180px; }
}