/* =====================================================================
   blog-grid.css — Shared "Kennisbank" blog / article grid styling.

   Single source of truth for every blog & article card widget on the
   site. It mirrors the Homepage blog grid exactly and re-skins the
   divergent widgets so they all read as one family:

     .blog-card      (Homepage — reference)
     .article-card   (PDP — "Gerelateerde artikelen")
     .advh-card      (Adviescentrum — article grid)
     .adv-rel-card   (Adviescentrum artikel — "Lees ook")

   Colours are hardcoded (not page CSS tokens) so the look is identical
   no matter which page loads it. Load this AFTER a page's own <style>
   block so the aliases win on equal specificity.
   ===================================================================== */

:root {
  --bg-navy:        #01273f;
  --bg-text:        #0e2a3f;
  --bg-muted:       #5e6f7c;
  --bg-muted-2:     #6f7e8c;
  --bg-border:      #e7eaee;
  --bg-border-soft: #eef1f4;
  --bg-lightblue:   #cfdae6;
  --bg-orange:      #e77935;
}

/* ---------------------------------------------------------------------
   Grid container — 3 columns, consistent gutter
   ------------------------------------------------------------------- */
.blog__grid,
.articles__grid,
.advh-grid,
.adv-rel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* ---------------------------------------------------------------------
   Card shell
   ------------------------------------------------------------------- */
.blog-card,
.article-card,
.advh-card,
.adv-rel-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bg-border-soft);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.blog-card:hover,
.article-card:hover,
.advh-card:hover,
.adv-rel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(8, 38, 65, 0.4);
  border-color: var(--bg-border);
}

/* ---------------------------------------------------------------------
   Media — 16:10, image covers and zooms gently on hover
   ------------------------------------------------------------------- */
.blog-card__media,
.article-card__media,
.advh-card .thumb,
.adv-rel-card .thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  height: auto;                 /* override the old fixed pixel heights */
  overflow: hidden;
  background: var(--bg-lightblue);
}
.blog-card__media img,
.article-card__img,
.advh-card .thumb img,
.adv-rel-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.blog-card:hover .blog-card__media img,
.article-card:hover .article-card__img,
.advh-card:hover .thumb img,
.adv-rel-card:hover .thumb img {
  transform: scale(1.04);
}

/* ---------------------------------------------------------------------
   Image tag pill (Homepage + PDP have one on the image)
   ------------------------------------------------------------------- */
.blog-card__tag,
.article-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bg-navy);
  background: rgba(255, 255, 255, 0.94);
  padding: 6px 13px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------------------
   Body
   ------------------------------------------------------------------- */
.blog-card__body,
.article-card__body,
.advh-card .c,
.adv-rel-card .c {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}

/* Category eyebrow (Adviescentrum cards) */
.advh-card .cat,
.adv-rel-card .cat {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bg-orange);
  margin: 0 0 9px;
}

/* Top meta line (Homepage) */
.blog-card__meta {
  font-size: 12.5px;
  color: var(--bg-muted);
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.blog-card__meta span {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--bg-muted-2);
}

/* Title */
.blog-card__title,
.article-card__title,
.advh-card h4,
.adv-rel-card h4 {
  font-size: 18.5px;
  font-weight: 600;
  color: var(--bg-text);
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 0 0 11px;
  text-wrap: pretty;
}

/* Excerpt */
.blog-card__excerpt,
.article-card__excerpt,
.advh-card p,
.adv-rel-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bg-muted);
  margin: 0 0 20px;
}

/* ---------------------------------------------------------------------
   Footer / "Lees meer" affordance with circular arrow
   ------------------------------------------------------------------- */
.advh-card .foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.blog-card__more,
.advh-card .more,
.adv-rel-card .more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bg-navy);
}
.adv-rel-card .more,
.advh-card .more {
  margin-top: 0;                /* sits in its own footer row */
}

/* Read-time meta (PDP + Adviescentrum) */
.article-card__meta,
.advh-card .read {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--bg-muted);
}
.advh-card .read { margin-top: 0; }
.article-card__meta svg,
.advh-card .read svg {
  display: block;
  color: var(--bg-muted-2);
}

/* Circular arrow — homepage wraps it in a span, the advice cards use a
   bare <svg>; style both into the same pill that flips to orange on hover */
.blog-card__more .blog-card__arrow,
.advh-card .more svg,
.adv-rel-card .more svg {
  width: 30px;
  height: 30px;
  flex: none;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--bg-lightblue);
  color: var(--bg-navy);
  padding: 7px;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s, transform .15s;
}
.blog-card:hover .blog-card__arrow,
.advh-card:hover .more svg,
.adv-rel-card:hover .more svg {
  background: var(--bg-orange);
  color: #fff;
  transform: translate(2px, -2px);
}

/* ---------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------- */
@media (max-width: 980px) {
  .blog__grid,
  .articles__grid,
  .advh-grid,
  .adv-rel-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .blog__grid,
  .articles__grid,
  .advh-grid,
  .adv-rel-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Kennisbank widget header — eyebrow + title + "alle artikelen" link.
   Mirrors the Homepage section header so the COMPLETE blog widget
   (header + card grid) is reusable from this one stylesheet — e.g. the
   Adviescentrum "Lees ook" / Gerelateerde-artikelen block. Colours are
   hardcoded to match the rest of this file (no page-token dependency).
   ------------------------------------------------------------------- */
.blog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 42px;
}
.blog__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bg-orange);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.blog__eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--bg-orange);
  border-radius: 2px;
}
.blog__title {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--bg-text);
  margin: 0;
  max-width: 620px;
}
.blog__all {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--bg-navy);
  text-decoration: none;
  padding-bottom: 6px;
  transition: gap .15s;
}
.blog__all:hover { gap: 16px; }
.blog__all .blog__allarrow {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--bg-navy);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background .15s;
}
.blog__all:hover .blog__allarrow { background: var(--bg-orange); }

@media (max-width: 620px) {
  .blog__head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 26px; }
  .blog__title { font-size: 30px; }
}