/* ── Hero ────────────────────────────────────────── */
.artikel-hero {
position: relative;
height: clamp(320px, 50vw, 560px);
overflow: hidden;
}
.artikel-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.artikel-hero-placeholder {
width: 100%;
height: 100%;
background: #231f20;
}
.artikel-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 50%, transparent 100%);
display: flex;
align-items: flex-end;
}
.artikel-hero-content {
width: 100%;
padding-bottom: 44px;
}
.artikel-hero-terug {
display: inline-flex;
align-items: center;
gap: 5px;
color: rgba(255,255,255,.7);
font-size: 15px;
font-weight: 600;
text-decoration: none;
margin-bottom: 20px;
transition: color .15s;
}
.artikel-hero-terug:hover { color: #fff; }
.artikel-hero-tag {
display: inline-block;
background: rgba(255,255,255,.15);
color: #fff;
font-size: 13px;
font-weight: 700;
padding: 3px 10px;
border-radius: 4px;
text-decoration: none;
letter-spacing: .3px;
margin-right: 4px;
margin-bottom: 10px;
transition: background .15s;
}
.artikel-hero-tag:hover { background: rgba(255,255,255,.28); color: #fff; }
.artikel-hero-titel {
color: #fff;
font-size: clamp(22px, 3.5vw, 42px);
font-weight: 800;
line-height: 1.2;
margin-bottom: 10px;
max-width: 820px;
}
.artikel-hero-datum {
color: rgba(255,255,255,.65);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
}

/* ── GrapeJS-content (standaard adem tussen hero en blokken) ─────── */
.artikel-content-grapes {
padding-top: clamp(2rem, 5vw, 4rem);
padding-bottom: clamp(2rem, 5vw, 4rem);
padding-inline: 1rem;
max-width: 880px;
margin-inline: auto;
color: var(--bs-gray-700);
font-size: 18px;
line-height: 1.85;
}
.artikel-content-grapes > *:first-child { margin-top: 0; }
.artikel-content-grapes p { margin-bottom: .9em; }
.artikel-content-grapes h2 { font-size: 1.45rem; font-weight: 800; color: var(--bs-gray-900); margin-top: 2.25rem; margin-bottom: .6rem; }
.artikel-content-grapes h3 { font-size: 1.15rem; font-weight: 700; color: var(--bs-gray-800); margin-top: 1.75rem; margin-bottom: .4rem; }
.artikel-content-grapes ul, .artikel-content-grapes ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.artikel-content-grapes a { color: #f36e22; }

/* afbeeldingen altijd responsive */
.artikel-content-grapes img { max-width: 100%; height: auto; display: block; }
.artikel-content-grapes .news-figure { margin: 1.75rem 0; }
.artikel-content-grapes .news-figure img { width: 100%; border-radius: 8px; }
.artikel-content-grapes figure { margin: 1.75rem 0; }
.artikel-content-grapes figure img { width: 100%; border-radius: 8px; }

/* galerij → responsive raster */
.artikel-content-grapes .news-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: .75rem;
margin: 1.75rem 0;
}
.artikel-content-grapes .news-gallery img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 8px;
}

/* citaat (geen accent enkel links) */
.artikel-content-grapes .news-quote {
margin: 1.75rem 0;
padding: 1.25rem 1.5rem;
background: rgba(243, 110, 34, .06);
border-radius: 8px;
font-size: 1.15rem;
font-style: italic;
color: var(--bs-gray-800);
}
.artikel-content-grapes .news-quote p { margin-bottom: .5rem; }
.artikel-content-grapes .news-quote p:last-of-type { margin-bottom: 0; }
.artikel-content-grapes .news-quote cite {
display: block;
margin-top: .75rem;
font-style: normal;
font-weight: 700;
font-size: .95rem;
color: var(--bs-gray-600);
}

/* ── Legacy CKEditor fallback (oude artikels zonder GrapeJS-content) ─ */
.artikel-wrap { padding-top: 32px; }
.artikel-inhoud { color: var(--bs-gray-700); font-size: 18px; line-height: 1.85; }
.artikel-inhoud > *:first-child { margin-top: 0; }
.artikel-inhoud img { max-width: 100%; border-radius: 8px; margin: 1.25rem 0; display: block; }
.artikel-inhoud h2 { font-size: 1.3rem; font-weight: 700; color: var(--bs-gray-900); margin-top: 2rem; margin-bottom: .5rem; }
.artikel-inhoud h3 { font-size: 1.1rem; font-weight: 600; color: var(--bs-gray-800); margin-top: 1.5rem; margin-bottom: .4rem; }
.artikel-inhoud blockquote {
border-left: 4px solid #f36e22;
padding: .75rem 1.25rem;
margin: 1.5rem 0;
background: rgba(243,110,34,.05);
border-radius: 0 6px 6px 0;
color: var(--bs-gray-600);
font-style: italic;
}
.artikel-inhoud ul, .artikel-inhoud ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.artikel-inhoud a { color: #f36e22; }
.artikel-inhoud p { margin-bottom: .9em; }
.artikel-inhoud p:last-child { margin-bottom: 0; }