/* ============================================
   Article Grid Block
   Laatste artikelen op de homepage
   Volgorde: titel - afbeelding - categorie - readtime - body - lees meer
   ============================================ */

/* ---- Header boven het grid ---- */
.article-grid__header {
  text-align: left;
  margin: 3rem 0 1.5rem;
  padding: 0;
}

.article-grid__title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  line-height: 1.2;
  color: #1a1a1a;
}

.article-grid__subtitle {
  font-size: 1.05rem;
  line-height: 1.5;
  color: #555;
  margin: 0;
}

/* ---- Grid layout: 3 vaste kolommen ---- */
.article-grid__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 0;
  margin: 0 0 3rem;
}

@media (max-width: 900px) {
  .article-grid__items {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ---- Individuele kaart ---- */
.article-grid__items .views-row {
  display: flex;
}

.article-grid__items article.node {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
}

.article-grid__items article.node:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* ---- Verberg meta (auteur + datum) ---- */
.article-grid__items article.node .node__meta {
  display: none;
}

/* ---- Titel (eerste in HTML, dus eerste in kaart) ---- */
.article-grid__items article.node > h2 {
  margin: 1.5rem 1.5rem 1rem;
  font-size: 1.15rem;
  line-height: 1.35;
  order: 0;
}

.article-grid__items article.node > h2 a {
  color: #1a1a1a;
  text-decoration: none;
}

.article-grid__items article.node > h2 a:hover {
  color: #0066cc;
}

/* ---- node__content als flex column met flex-grow ---- */
.article-grid__items article.node .node__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* ---- 1e div: AFBEELDING - edge-to-edge ---- */
.article-grid__items .node__content > div:nth-of-type(1) {
  margin: 0 -1.5rem 1.25rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.article-grid__items .node__content > div:nth-of-type(1) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-grid__items .node__content > div:nth-of-type(1),
.article-grid__items .node__content > div:nth-of-type(1) > div,
.article-grid__items .node__content > div:nth-of-type(1) .contextual-region {
  height: 100%;
}

/* Hide label "Image" inside media wrapper als die niet visually-hidden is */
.article-grid__items .node__content > div:nth-of-type(1) .visually-hidden {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- 2e div: CATEGORIE - blauwe badge ---- */
.article-grid__items .node__content > div:nth-of-type(2) {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0066cc;
  margin: 0 1.5rem 0.5rem;
}

/* ---- 3e div: READ_TIME ---- */
.article-grid__items .node__content > div:nth-of-type(3) {
  font-size: 0.85rem;
  color: #666;
  margin: 0 1.5rem 1rem;
}

.article-grid__items .node__content > div:nth-of-type(3)::after {
  content: " min lezen";
}

/* ---- 4e div: BODY/samenvatting ---- */
.article-grid__items .node__content > div:nth-of-type(4) {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #555;
  margin: 0 1.5rem 1rem;
  flex-grow: 1;
}

.article-grid__items .node__content > div:nth-of-type(4) p {
  margin: 0;
}

/* ---- Lees-meer link onderaan ---- */
.article-grid__items .node__content .links.inline {
  list-style: none;
  padding: 0;
  margin: auto 1.5rem 1.5rem 1.5rem;
}

.article-grid__items .links.inline a {
  color: #0066cc;
  font-weight: 600;
  text-decoration: none;
}

.article-grid__items .links.inline a::after {
  content: " →";
  display: inline-block;
  transition: transform 0.2s ease;
}

.article-grid__items .links.inline a:hover::after {
  transform: translateX(4px);
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .article-grid__title {
    font-size: 1.5rem;
  }
  .article-grid__subtitle {
    font-size: 1rem;
  }
}

/* ── Filterknopjes ─────────────────────────────────────── */
.article-grid__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.article-grid__filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: 3px solid #111111;
  background: #ffffff;
  color: #111111;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.15s ease;
}

.article-grid__filter-btn:hover,
.article-grid__filter-btn.is-active {
  background: #f0c419;
}