/* ================================================================
   news.css — Filterbare nieuws-feed ([hp_news] op /blog/, page 2900)
   Scoped body.hetportaal. Hergebruikt de --hp-* tokens uit modern.css
   + de pill-conventie uit homepage.css (.vc_grid-filter).
   ================================================================ */

body.hetportaal .hp-news{
  max-width:var(--hp-container,1240px);
  margin:0 auto;
  padding:8px 0 8px;
}

/* ---- Filterbalk (bron-pills + onderwerp-select) -------------- */
body.hetportaal .hp-news-filterbar{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:14px 20px;
  margin:0 0 28px;
}
body.hetportaal .hp-news-filter{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;
}
body.hetportaal .hp-news-pill{
  display:inline-block;
  padding:7px 16px;
  border-radius:var(--hp-radius-pill,999px);
  border:1px solid var(--hp-border,#e6e8eb);
  background:#fff;
  font-size:13px; font-weight:600; line-height:1.2;
  color:#5b6471; text-decoration:none;
  transition:all var(--hp-dur,.18s) var(--hp-ease,ease);
}
body.hetportaal .hp-news-pill:hover{
  border-color:#b8d0e3; color:#1f5c8c; background:#eef3f8;
}
body.hetportaal .hp-news-pill.is-active{
  background:#3f8fd0; border-color:#3f8fd0; color:#fff;
}

/* Onderwerp-filter (select) */
body.hetportaal .hp-news-topicform{
  display:inline-flex; align-items:center; gap:8px;
}
body.hetportaal .hp-news-topiclabel{
  font-size:13px; font-weight:600; color:#5b6471;
}
body.hetportaal .hp-news-topic{
  appearance:none; -webkit-appearance:none;
  padding:8px 34px 8px 14px;
  border-radius:var(--hp-radius-pill,999px);
  border:1px solid var(--hp-border,#e6e8eb);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6471' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size:13px; font-weight:600; color:#2b2b2b; line-height:1.2;
  cursor:pointer; transition:all var(--hp-dur,.18s) var(--hp-ease,ease);
}
body.hetportaal .hp-news-topic:hover{ border-color:#b8d0e3; }
body.hetportaal .hp-news-topic:focus{ outline:none; border-color:#3f8fd0; box-shadow:0 0 0 3px rgba(63,143,208,.18); }
body.hetportaal .hp-news-topicbtn{
  padding:8px 16px; border:0; border-radius:var(--hp-radius-pill,999px);
  background:#3f8fd0; color:#fff; font-size:13px; font-weight:600; cursor:pointer;
}

/* ---- Grid ---------------------------------------------------- */
body.hetportaal .hp-news-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--hp-gutter,28px);
}
@media (max-width:900px){
  body.hetportaal .hp-news-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
}
@media (max-width:560px){
  body.hetportaal .hp-news-grid{ grid-template-columns:1fr; }
}

/* ---- Card ---------------------------------------------------- */
body.hetportaal .hp-news-card{
  display:flex; flex-direction:column;
  background:var(--hp-bg,#fff);
  border:1px solid var(--hp-border,#e6e8eb);
  border-radius:var(--hp-radius-lg,18px);
  overflow:hidden;
  box-shadow:var(--hp-shadow-sm);
  transition:transform var(--hp-dur,.18s) var(--hp-ease,ease),
             box-shadow var(--hp-dur,.18s) var(--hp-ease,ease),
             border-color var(--hp-dur,.18s) var(--hp-ease,ease);
}
body.hetportaal .hp-news-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--hp-shadow-lg);
  border-color:var(--hp-border-strong,#d7dade);
}
body.hetportaal .hp-news-card__media{
  display:block; position:relative;
  aspect-ratio:16 / 10;
  background:var(--hp-bg-subtle,#f6f7f9);
  overflow:hidden;
}
body.hetportaal .hp-news-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .35s var(--hp-ease,ease);
}
body.hetportaal .hp-news-card:hover .hp-news-card__media img{ transform:scale(1.04); }
/* Grijze fallback-tegel als de featured image ontbreekt (lokaal). */
body.hetportaal .hp-news-card__media.is-empty::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,#eef1f5,#e2e7ee);
}

body.hetportaal .hp-news-card__body{
  display:flex; flex-direction:column; gap:8px;
  padding:16px 18px 18px;
  flex:1 1 auto;
}
body.hetportaal .hp-news-card__meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12px;
}
body.hetportaal .hp-news-badge{
  display:inline-block;
  padding:2px 9px;
  border-radius:var(--hp-radius-pill,999px);
  background:var(--hp-primary-tint,rgba(238,124,0,.15));
  color:#b85c00;
  font-weight:700; font-size:11px; letter-spacing:.01em;
  text-transform:uppercase;
}
body.hetportaal .hp-news-date{ color:var(--hp-text-muted,#666); }

body.hetportaal .hp-news-card__title{
  margin:0; font-size:17px; line-height:1.3; font-weight:700;
}
body.hetportaal .hp-news-card__title a{
  color:var(--hp-text,#333); text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
body.hetportaal .hp-news-card__title a:hover{ color:#1f5c8c; }

body.hetportaal .hp-news-card__excerpt{
  margin:0; font-size:13.5px; line-height:1.55;
  color:var(--hp-text-muted,#666);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
body.hetportaal .hp-news-card__more{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  color:#3f8fd0; font-size:14px; font-weight:600; text-decoration:none;
}
body.hetportaal .hp-news-card__more::after{ content:'→'; transition:transform var(--hp-dur,.18s) var(--hp-ease,ease); }
body.hetportaal .hp-news-card__more:hover{ color:#1f5c8c; }
body.hetportaal .hp-news-card__more:hover::after{ transform:translateX(3px); }

/* ---- Paginatie ----------------------------------------------- */
body.hetportaal .hp-news-pagination{
  display:flex; flex-wrap:wrap; gap:6px;
  justify-content:center;
  margin:36px 0 8px;
}
body.hetportaal .hp-news-pagelink{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px;
  border-radius:var(--hp-radius-pill,999px);
  border:1px solid var(--hp-border,#e6e8eb);
  background:#fff; color:#5b6471;
  font-size:14px; font-weight:600; text-decoration:none;
  transition:all var(--hp-dur,.18s) var(--hp-ease,ease);
}
body.hetportaal a.hp-news-pagelink:hover{
  border-color:#b8d0e3; color:#1f5c8c; background:#eef3f8;
}
body.hetportaal .hp-news-pagelink.is-active{
  background:#3f8fd0; border-color:#3f8fd0; color:#fff; cursor:default;
}

body.hetportaal .hp-news-empty{
  text-align:center; color:var(--hp-text-muted,#666);
  padding:48px 0;
}

/* ================================================================
   Onze magazines — sidebar-module ([hp_magazines], right-sidebar)
   ================================================================ */
body.hetportaal .hp-mags{
  position:sticky; top:calc(var(--hp-nav-h,78px) + 20px);
  background:var(--hp-bg,#fff);
  border:1px solid var(--hp-border,#e6e8eb);
  border-radius:var(--hp-radius-lg,18px);
  box-shadow:var(--hp-shadow-sm);
  padding:20px;
}
body.hetportaal .hp-mags__title{
  margin:0 0 16px; padding:0 0 12px;
  font-size:17px; font-weight:700; color:var(--hp-text,#333);
  border-bottom:1px solid var(--hp-border,#e6e8eb);
}
body.hetportaal .hp-mags__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
body.hetportaal .hp-mag{ margin:0; }
body.hetportaal .hp-mag__link{
  display:flex; gap:14px; align-items:center;
  padding:10px; border-radius:var(--hp-radius-md,10px);
  text-decoration:none; color:inherit;
  transition:background var(--hp-dur,.18s) var(--hp-ease,ease), box-shadow var(--hp-dur,.18s) var(--hp-ease,ease);
}
body.hetportaal .hp-mag__link:hover{ background:var(--hp-bg-subtle,#f6f7f9); }
body.hetportaal .hp-mag__cover{ flex:0 0 auto; width:88px; display:block; }
body.hetportaal .hp-mag__cover img{
  width:100%; height:auto; display:block; border-radius:4px;
  box-shadow:-6px 8px 18px -8px rgba(20,24,31,.35), 0 1px 2px rgba(20,24,31,.15);
  transition:transform var(--hp-dur,.18s) var(--hp-ease,ease);
}
body.hetportaal .hp-mag__link:hover .hp-mag__cover img{ transform:translateY(-3px) rotate(-1deg); }
body.hetportaal .hp-mag__info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
body.hetportaal .hp-mag__name{ font-size:15px; font-weight:700; color:var(--hp-text,#333); line-height:1.25; }
body.hetportaal .hp-mag__issue{ font-size:12.5px; color:var(--hp-text-muted,#666); }
body.hetportaal .hp-mag__cta{
  margin-top:4px; display:inline-flex; align-items:center; gap:5px;
  font-size:13px; font-weight:600; color:#3f8fd0;
}
body.hetportaal .hp-mag__cta::after{ content:'→'; transition:transform var(--hp-dur,.18s) var(--hp-ease,ease); }
body.hetportaal .hp-mag__link:hover .hp-mag__cta{ color:#1f5c8c; }
body.hetportaal .hp-mag__link:hover .hp-mag__cta::after{ transform:translateX(3px); }