/* CSS Document */

/* assets/css/category.css */

.categoryHero{
  padding: 0 0 42px;
}

.categoryWrap{
  display: grid;
  gap: 14px;
}

/* hoofdkaart */
.categoryCard{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(11,27,43,.12);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: 520px 1fr;
}

/* media */
.categoryMedia{
  border-right: 1px solid rgba(11,27,43,.10);
  background: #fff;
}

.categoryMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* content */
.categoryContent{
  padding: 22px;
}

.categoryTop .kicker{
  margin-bottom: 10px;
}

.categoryTitle{
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.categoryLead{
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 70ch;
  font-size: 15px;
}

/* tekstblok */
.categoryTextBlock{
  margin-top: 16px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(11,27,43,.10);
  border-radius: 18px;
  padding: 16px;
}

.categoryTextBlock h2{
  margin: 0 0 10px;
  font-size: 18px;
}

.categoryTextBlock h3{
  margin: 14px 0 8px;
  font-size: 15px;
}

.categoryTextBlock p{
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 14px;
}

.categoryList{
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
}

.categoryList li{
  margin: 8px 0;
  font-size: 14px;
  color: var(--ink);
}

.categoryList li b{
  color: var(--blue2);
}

/* samenvatting */
.categorySummary{
  margin-top: 14px;
  border-top: 1px dashed rgba(11,27,43,.18);
  padding-top: 14px;
}

.summaryGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.summaryItem{
  background: rgba(11,107,179,.06);
  border: 1px solid rgba(11,107,179,.14);
  border-radius: 16px;
  padding: 12px;
}

.summaryItem b{
  display:block;
  margin-bottom: 6px;
}

.summaryItem span{
  color: var(--muted);
  font-size: 13px;
}

/* CTA */
.categoryCtas{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* note */
.categoryNote{
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(11,27,43,.10);
  border-radius: 16px;
  padding: 12px 14px;
}

/* responsive */
@media (max-width: 980px){
  .categoryCard{
    grid-template-columns: 1fr;
  }
  .categoryMedia{
    border-right: 0;
    border-bottom: 1px solid rgba(11,27,43,.10);
  }
  .summaryGrid{
    grid-template-columns: 1fr;
  }
}

/* Zorgt dat de 600x400 verhouding mooi blijft */
.categoryMedia{
  aspect-ratio: 3 / 2; /* 600x400 */
}
.categoryMedia img{
  height: 100%;
}