/* ═══════════════════════════════════════════════════════════
   artikel.css — CotB 2026
   ═══════════════════════════════════════════════════════════ */
.artikel-body {
  background: var(--bg-dark, #0E2214);
  color: var(--text-dark, #E8F0E2);
  font-family: var(--font-body, Georgia, serif);
  margin: 0; padding: 0; min-height: 100vh;
}

/* ── Header ──────────────────────────────────────────────── */
.art-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 2rem;
  background: rgba(10,26,12,.93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(80,134,70,.22);
}
.art-back {
  color: rgba(184,134,11,.8); text-decoration: none;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  transition: color .15s;
}
.art-back:hover { color: #D4A040; }
.art-site-name { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; opacity: .35; margin-left: auto; }

/* ── Main ────────────────────────────────────────────────── */
.art-main { max-width: 860px; margin: 0 auto; padding: 2rem 2rem 4rem; }

/* ── Hero ────────────────────────────────────────────────── */
.art-hero-img { margin: -2rem -2rem 0; overflow: hidden; max-height: 420px; }
.art-hero-img img { width: 100%; height: 420px; object-fit: cover; display: block; }

/* ── Inner ───────────────────────────────────────────────── */
.art-article-inner { padding-top: 2.5rem; }

/* ── Meta ────────────────────────────────────────────────── */
.art-meta { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; margin-bottom: .75rem; }
.art-meta-datum { font-size: .75rem; opacity: .55; letter-spacing: .05em; }
.art-meta-auteur { font-size: .75rem; opacity: .55; font-style: italic; }
.art-tag {
  display: inline-block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(184,134,11,.14); color: rgba(184,134,11,.85);
  border: 1px solid rgba(184,134,11,.3); border-radius: 2px;
  padding: .15rem .55rem;
}

/* ── Titel / intro ───────────────────────────────────────── */
.art-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.8rem,5vw,3rem); font-weight: 400; line-height: 1.15;
  color: var(--accent-light, #D4A82A); margin-bottom: 1rem;
}
.art-intro {
  font-size: 1.05rem; line-height: 1.7; opacity: .8;
  margin-bottom: 2rem; border-left: 3px solid rgba(184,134,11,.4);
  padding-left: 1rem;
}

/* ── Blokken ─────────────────────────────────────────────── */
.art-blok { margin-bottom: 2rem; }

.art-tekst { font-size: 1rem; line-height: 1.8; color: rgba(220,240,210,.82); }
.art-tekst p { margin-bottom: 1rem; }
.art-tekst h2, .art-tekst h3 { font-family: var(--font-display,Georgia,serif); color: var(--accent-light,#D4A82A); font-weight:400; margin:1.5rem 0 .5rem; }
.art-tekst a { color: var(--accent,#B8860B); }
.art-tekst img { max-width:100%; height:auto; border-radius:2px; }
.art-tekst ul, .art-tekst ol { padding-left:1.5rem; margin-bottom:1rem; }
.art-tekst blockquote { border-left:3px solid rgba(184,134,11,.4); padding-left:1rem; margin:1rem 0; opacity:.75; font-style:italic; }

.art-koptekst { font-family:var(--font-display,Georgia,serif); font-size:clamp(1.2rem,3vw,1.8rem); font-weight:400; color:var(--accent-light,#D4A82A); border-bottom:1px solid rgba(184,134,11,.2); padding-bottom:.4rem; margin-bottom:1rem; }

.art-afbeelding { margin:0 0 2rem; }
.art-afbeelding img { width:100%; height:auto; display:block; border-radius:2px; }
.art-afbeelding.links  { float:left;  width:45%; margin:.2rem 1.5rem 1rem 0; }
.art-afbeelding.rechts { float:right; width:45%; margin:.2rem 0 1rem 1.5rem; }
.art-afbeelding figcaption { font-size:.78rem; opacity:.5; margin-top:.4rem; letter-spacing:.04em; }

.art-video-wrap { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:2px; }
.art-video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.art-video-file { width:100%; border-radius:2px; }
.art-bijschrift { font-size:.78rem; opacity:.5; margin-top:.4rem; }

.art-slideshow { position:relative; overflow:hidden; border-radius:2px; background:rgba(0,0,0,.3); user-select:none; }
.ss-track { overflow:hidden; }
.ss-slides { display:flex; transition:transform .35s cubic-bezier(.4,0,.2,1); }
.ss-slide { flex-shrink:0; width:100%; }
.ss-slide img { width:100%; height:clamp(220px,50vw,480px); object-fit:cover; display:block; }
.ss-slide figcaption { font-size:.75rem; opacity:.5; padding:.35rem .75rem; }
.ss-prev, .ss-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); border:none; color:rgba(184,134,11,.8); font-size:1.2rem; padding:.5rem .75rem; cursor:pointer; transition:background .15s; }
.ss-prev { left:0; border-radius:0 2px 2px 0; }
.ss-next { right:0; border-radius:2px 0 0 2px; }
.ss-prev:hover, .ss-next:hover { background:rgba(0,0,0,.7); color:#D4A040; }
.ss-dots { display:flex; justify-content:center; gap:.4rem; padding:.5rem 0; }
.ss-dot { width:7px; height:7px; border-radius:50%; background:rgba(184,134,11,.3); cursor:pointer; transition:background .15s; border:none; }
.ss-dot.active { background:rgba(184,134,11,.85); }

.art-kolommen { display:grid; gap:1.5rem; }
.art-kolommen.cols-2 { grid-template-columns:1fr 1fr; }
.art-kolommen.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.art-kol-img img { width:100%; height:auto; border-radius:2px; display:block; }
.art-kol-img figcaption { font-size:.75rem; opacity:.5; margin-top:.3rem; }
.art-kol-tekst { font-size:.95rem; line-height:1.7; margin-top:.75rem; }

.art-scheiding { border:none; border-top:1px solid rgba(184,134,11,.2); margin:2.5rem 0; }

/* ── Footer ──────────────────────────────────────────────── */
.art-footer { text-align:center; padding:2rem; border-top:1px solid rgba(80,134,70,.18); font-size:.78rem; }
.art-footer a { color:rgba(184,134,11,.6); text-decoration:none; }
.art-footer a:hover { color:#D4A040; }

/* ════════════════════════════════════════════════════════════
   REPORTAGES OVERZICHTSPAGINA
   ════════════════════════════════════════════════════════════ */
.rep-main { max-width: 1060px; }
.rep-head { margin-bottom: 1.5rem; }

/* Filterbalken */
.rep-filters { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.75rem; }
.rep-filter {
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(184,134,11,.1); border:1px solid rgba(184,134,11,.25);
  color:rgba(184,134,11,.7); border-radius:2px; padding:.35rem .8rem;
  cursor:pointer; transition:background .15s, color .15s;
}
.rep-filter:hover  { background:rgba(184,134,11,.22); color:#D4A040; }
.rep-filter.active { background:rgba(184,134,11,.28); color:#D4A040; border-color:rgba(184,134,11,.6); }

/* Kaarten grid */
.rep-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem; }

.rep-card { background:rgba(255,255,255,.03); border:1px solid rgba(184,134,11,.15); border-radius:3px; overflow:hidden; transition:border-color .2s, transform .2s; }
.rep-card:hover { border-color:rgba(184,134,11,.4); transform:translateY(-2px); }
.rep-card-link { display:flex; flex-direction:column; text-decoration:none; color:inherit; height:100%; }

.rep-thumb { aspect-ratio:16/9; overflow:hidden; background:rgba(184,134,11,.07); }
.rep-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.rep-card:hover .rep-thumb img { transform:scale(1.03); }
.rep-thumb-empty { background:linear-gradient(135deg,rgba(184,134,11,.08),rgba(184,134,11,.03)); }

.rep-card-body { padding:.9rem 1rem 1rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.rep-datum { font-size:.7rem; opacity:.5; letter-spacing:.05em; }
.rep-title { font-family:var(--font-display,Georgia,serif); font-size:1rem; font-weight:400; line-height:1.35; color:rgba(210,235,195,.92); margin:0; }
.rep-sam { font-size:.82rem; line-height:1.55; opacity:.65; margin:0; }
.rep-auteur { font-size:.72rem; opacity:.45; font-style:italic; }
.rep-tags { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.25rem; }
.rep-lees { font-size:.72rem; letter-spacing:.07em; color:rgba(184,134,11,.65); margin-top:auto; padding-top:.5rem; }
.rep-card:hover .rep-lees { color:#D4A040; }

/* ── Artikelpreview op hoofdpagina ───────────────────────── */
.art-preview-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.art-preview-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(184,134,11,.15);
  border-radius:3px; overflow:hidden; cursor:pointer;
  transition:border-color .2s, transform .2s; text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
}
.art-preview-card:hover { border-color:rgba(184,134,11,.4); transform:translateY(-2px); }
.art-preview-thumb { aspect-ratio:16/9; overflow:hidden; background:rgba(184,134,11,.07); }
.art-preview-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.art-preview-card:hover .art-preview-thumb img { transform:scale(1.03); }
.art-preview-body { padding:.75rem .85rem; display:flex; flex-direction:column; gap:.25rem; flex:1; }
.art-preview-datum { font-size:.68rem; opacity:.5; }
.art-preview-title { font-family:var(--font-display,Georgia,serif); font-size:.92rem; font-weight:400; line-height:1.35; color:rgba(210,235,195,.92); }
.art-preview-tags { display:flex; flex-wrap:wrap; gap:.25rem; }
.art-preview-meer { font-size:.7rem; color:rgba(184,134,11,.6); margin-top:auto; padding-top:.4rem; }
.art-preview-card:hover .art-preview-meer { color:#D4A040; }
.art-alle-link {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(184,134,11,.7); text-decoration:none;
  border:1px solid rgba(184,134,11,.3); border-radius:2px;
  padding:.5rem 1.25rem; transition:background .15s, color .15s;
}
.art-alle-link:hover { background:rgba(184,134,11,.12); color:#D4A040; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .art-main { padding:1rem 1rem 3rem; }
  .art-hero-img { margin:-1rem -1rem 0; }
  .art-kolommen.cols-2, .art-kolommen.cols-3 { grid-template-columns:1fr; }
  .art-afbeelding.links, .art-afbeelding.rechts { float:none; width:100%; margin:0 0 1rem; }
  .art-header { padding:.6rem 1rem; }
  .rep-grid { grid-template-columns:1fr; }
}

/* ── Like-knop ───────────────────────────────────────────── */
.art-like-bar {
  max-width: 820px; margin: 2rem auto 0; padding: 0 1.5rem 1.5rem;
}
.like-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 1px solid rgba(184,134,11,.28); border-radius: 20px;
  padding: .4rem 1.1rem; cursor: pointer; font-size: .88rem;
  color: rgba(34,28,21,.65); transition: background .2s, border-color .2s, color .2s;
}
.like-btn:hover { border-color: rgba(184,134,11,.55); color: #B8860B; }
.like-btn.liked { background: rgba(184,134,11,.1); border-color: rgba(184,134,11,.6); color: #B8860B; }
.like-btn .like-heart { font-size: 1.1rem; }

/* ── Like-knop pulse (nog niet geliked) ───────────────────── */
@keyframes like-pulse {
  0%, 60%, 100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(184,134,11,0); }
  30%           { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(184,134,11,.18); }
}
.like-btn:not(.liked) {
  animation: like-pulse 2.8s ease-in-out infinite;
}
.like-btn.liked {
  animation: none;
  transform: scale(1);
}