/* ==============================================================
BLOG OVERZICHT
============================================================== */

.blog-overview{
  max-width:1100px;
  margin:0 auto;
  padding:60px var(--space-3);
}

.blog-title{
  text-align:center;
  font-size:2.2rem;
  margin-bottom:10px;
}

.blog-intro{
  text-align:center;
  max-width:700px;
  margin:0 auto 60px;
  font-size:1.1rem;
  color:#4f6066;
}

/* grid */

.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
  margin-top:40px;
}

/* card */

.blog-card{
  background:#f4f6f5;
  border-radius:14px;
  overflow:hidden;
  transition:0.2s ease;
}

.blog-card:hover{
  transform:translateY(-4px);
}

.blog-card-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

/* image */

.blog-image img{
  width:100%;
  height:200px;
  object-fit:cover;
}

/* content */

.blog-content{
  padding:20px;
}

.blog-content h2{
  font-size:1.2rem;
  margin-bottom:8px;
}

.blog-date{
  font-size:.8rem;
  color:#8a9aa0;
  margin-bottom:10px;
}

.blog-link{
  font-size:.9rem;
  color:var(--color-accent);
}


/* ==============================================================
BLOG DETAIL
============================================================== */

.blog-inner{
  max-width:680px;
  margin:0 auto;
  padding:60px var(--space-3);
}

.back-link{
  display:inline-block;
  margin-bottom:20px;
  font-size:.9rem;
  color:#6b7c83;
  text-decoration:none;
}

.blog-detail .blog-title{
  text-align:center;
  font-size:2.2rem;
  margin-bottom:10px;
}

.blog-detail .blog-date{
  text-align:center;
  margin-bottom:20px;
}

.blog-detail .blog-intro{
  font-size:1.1rem;
  margin-bottom:25px;
}

.blog-text{
  line-height:1.85;
}

.blog-text p{
  margin-bottom:18px;
}

.blog-text p:first-of-type{
  font-size:1.2rem;
}

/* blog hero kleiner zoals over */

.page.blogs .hero,
.page.artikel .hero{
  height:50vh;
  min-height:320px;
}
/* ==============================================================
RESPONSIVE
============================================================== */

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

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