/* Mantella.nl — blog overzicht */

/* ---- Hero ---- */
.blog-hero { padding: 72px var(--pad-x) 52px; background-image: linear-gradient(200deg, rgba(228,0,58,0.08), transparent 45%); }
.blog-hero__inner { display: flex; flex-direction: column; gap: 22px; }
.blog-hero__title { font-size: 68px; }
.blog-hero__lead { max-width: 620px; }

@media (max-width: 1080px) {
  .blog-hero { padding-top: 56px; padding-bottom: 42px; }
}
@media (max-width: 700px) {
  .blog-hero { padding-top: 44px; padding-bottom: 32px; }
}

/* ---- Artikel grid ---- */
.blog-grid { padding-top: 8px; padding-bottom: 96px; }
.blog-grid__watermark { top: -6px; left: 40px; font-size: 200px; }

.filterbar { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.filterbar__label { font-size: 14px; color: #999; font-weight: 500; margin-right: 8px; letter-spacing: 1px; text-transform: uppercase; }

.blog-grid__list { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 40px; }

.blog-card {
  background: #fff;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(0, 0, 0, 0.14); }
.blog-card__img { height: 190px; padding: 18px; }
.blog-card__img--1 { background: linear-gradient(135deg, rgba(228,0,58,0.85), rgba(243,146,0,0.75)), repeating-linear-gradient(45deg, #ddd 0 14px, #ccc 14px 28px); }
.blog-card__img--2 { background: linear-gradient(135deg, rgba(13,13,13,0.85), rgba(228,0,58,0.7)), repeating-linear-gradient(45deg, #ddd 0 14px, #ccc 14px 28px); }
.blog-card__img--3 { background: linear-gradient(135deg, rgba(243,146,0,0.85), rgba(228,0,58,0.7)), repeating-linear-gradient(45deg, #ddd 0 14px, #ccc 14px 28px); }
.blog-card__img--4 { background: linear-gradient(135deg, rgba(228,0,58,0.75), rgba(13,13,13,0.8)), repeating-linear-gradient(45deg, #ddd 0 14px, #ccc 14px 28px); }
.blog-card__img--5 { background: linear-gradient(135deg, rgba(243,146,0,0.8), rgba(13,13,13,0.75)), repeating-linear-gradient(45deg, #ddd 0 14px, #ccc 14px 28px); }
.blog-card__img--6 { background: linear-gradient(135deg, rgba(228,0,58,0.8), rgba(243,146,0,0.8)), repeating-linear-gradient(45deg, #ddd 0 14px, #ccc 14px 28px); }

.blog-card__body { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.blog-card__cat { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.blog-card__title { font-family: var(--font-head); font-weight: 700; font-size: 21px; line-height: 1.3; color: var(--c-black-2); }
.blog-card__excerpt { font-size: 16px; line-height: 1.6; color: #555; }
.blog-card__meta { font-size: 14px; color: #999; margin-top: 4px; }

/* ---- CTA-balk ---- */
.blog-cta {
  position: relative;
  background: var(--c-black-2);
  border-radius: var(--r-card-lg);
  padding: 40px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  overflow: hidden;
}
.blog-cta__text { position: relative; display: flex; flex-direction: column; gap: 6px; }
.blog-cta__title { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: #fff; }
.blog-cta__sub { font-size: 16px; color: #999; }
.blog-cta__btn { position: relative; white-space: nowrap; font-size: 16px; padding: 15px 32px; }

@media (max-width: 1080px) {
  .blog-grid__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .blog-grid__watermark { font-size: 110px; }
  .blog-grid__list { grid-template-columns: 1fr; }
  .blog-cta { flex-wrap: wrap; align-items: flex-start; gap: 20px; padding: 32px; }
  .blog-cta__btn { width: 100%; justify-content: center; }
}