/* =========================================
   VV CUIJK MUSEUM – Frontend CSS
   Kleuren: groen #024452 | beige #ddd5bf
   ========================================= */

/* ── TIJDLIJN ─────────────────────────────── */
.vvcm-tijdlijn { position:relative; padding:20px 0; }
.vvcm-tijdlijn::before { content:''; position:absolute; left:110px; top:0; bottom:0; width:3px; background:linear-gradient(to bottom,#024452,rgba(2,68,82,.2)); }

.vvcm-tl-item { display:flex; gap:0; margin-bottom:40px; align-items:flex-start; }

.vvcm-tl-jaar { width:90px; min-width:90px; text-align:right; font-size:1.3em; font-weight:700; color:#024452; padding-top:4px; }

.vvcm-tl-lijn { width:44px; display:flex; justify-content:center; position:relative; }
.vvcm-tl-dot { width:16px; height:16px; background:#024452; border:3px solid #ddd5bf; border-radius:50%; margin-top:6px; box-shadow:0 0 0 3px #024452; flex-shrink:0; }

.vvcm-tl-content { flex:1; background:#ddd5bf; border-radius:10px; padding:18px 22px; box-shadow:0 2px 10px rgba(2,68,82,.1); border-left:4px solid #024452; }
.vvcm-tl-content h3 { margin:0 0 8px; color:#024452; font-size:1.1em; }
.vvcm-tl-content p  { margin:0; color:#555; font-size:.95em; line-height:1.6; }
.vvcm-tl-foto { width:100%; max-height:200px; object-fit:cover; border-radius:6px; margin-bottom:12px; }

@media(max-width:600px){
    .vvcm-tijdlijn::before { left:60px; }
    .vvcm-tl-jaar { width:50px; font-size:1em; }
}

/* ── ERELIJST ─────────────────────────────── */
.vvcm-erelijst { padding:10px 0; }
.vvcm-ere-sectie { margin-bottom:36px; }
.vvcm-ere-cat { color:#024452; font-size:1.2em; border-bottom:2px solid #024452; padding-bottom:8px; margin-bottom:16px; }
.vvcm-ere-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.vvcm-ere-item { background:#ddd5bf; border-radius:8px; padding:14px 18px; display:flex; flex-direction:column; gap:4px; box-shadow:0 2px 8px rgba(2,68,82,.08); border-left:4px solid #b8933a; }
.vvcm-ere-jaar { font-size:.85em; color:#b8933a; font-weight:700; }
.vvcm-ere-prijs { font-weight:700; color:#024452; font-size:1em; }
.vvcm-ere-info { font-size:.85em; color:#777; }

/* ── SPELERS ──────────────────────────────── */
.vvcm-spelers-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:22px; }
.vvcm-speler-card { background:#ddd5bf; border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgba(2,68,82,.1); text-align:center; padding-bottom:18px; }
.vvcm-speler-foto img { width:100%; height:200px; object-fit:cover; object-position:top; }
.vvcm-speler-no-foto { width:100%; height:160px; background:#ddd5bf; display:flex; align-items:center; justify-content:center; font-size:3.5em; }
.vvcm-speler-info { padding:12px 16px 0; }
.vvcm-speler-info h3 { margin:0 0 6px; color:#024452; font-size:1em; }
.vvcm-speler-info p { font-size:.85em; color:#666; margin:8px 0 0; line-height:1.5; }
.vvcm-speler-positie { display:inline-block; background:#024452; color:#ddd5bf; font-size:.75em; font-weight:600; padding:2px 10px; border-radius:3px; margin-bottom:4px; }
.vvcm-speler-periode { display:block; font-size:.8em; color:#888; margin-top:2px; }

/* ── DOCUMENTEN ───────────────────────────── */
.vvcm-doc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px; }
.vvcm-doc-card { background:#ddd5bf; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(2,68,82,.1); }
.vvcm-doc-thumb { position:relative; }
.vvcm-doc-thumb img { width:100%; height:160px; object-fit:cover; display:block; }
.vvcm-doc-no-thumb { width:100%; height:160px; background:#ddd5bf; display:flex; align-items:center; justify-content:center; font-size:3.5em; }
.vvcm-doc-cat { position:absolute; top:8px; right:8px; background:#024452; color:#ddd5bf; font-size:.72em; font-weight:600; padding:3px 9px; border-radius:3px; }
.vvcm-doc-info { padding:14px 18px; }
.vvcm-doc-jaar { font-size:.8em; color:#b8933a; font-weight:700; }
.vvcm-doc-info h3 { margin:4px 0 8px; color:#024452; font-size:1em; line-height:1.3; }
.vvcm-doc-info p { font-size:.85em; color:#666; margin:0 0 12px; line-height:1.5; }
.vvcm-doc-link { font-size:.9em; font-weight:600; color:#024452; text-decoration:none; }
.vvcm-doc-link:hover { text-decoration:underline; }

/* ── VIDEO'S ──────────────────────────────── */
.vvcm-video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.vvcm-video-card { background:#ddd5bf; border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgba(2,68,82,.1); }
.vvcm-video-thumb { position:relative; cursor:pointer; }
.vvcm-video-thumb img { width:100%; height:175px; object-fit:cover; display:block; transition:opacity .2s; }
.vvcm-video-thumb:hover img { opacity:.85; }
.vvcm-video-no-thumb { width:100%; height:175px; background:#024452; display:flex; align-items:center; justify-content:center; font-size:3.5em; }
.vvcm-video-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.vvcm-video-play::after { content:'▶'; font-size:2.5em; color:#fff; background:rgba(2,68,82,.75); width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding-left:5px; transition:background .2s,transform .2s; }
.vvcm-video-thumb:hover .vvcm-video-play::after { background:rgba(2,68,82,.95); transform:scale(1.08); }
.vvcm-video-info { padding:14px 18px; }
.vvcm-video-jaar { font-size:.8em; color:#b8933a; font-weight:700; }
.vvcm-video-info h3 { margin:4px 0 6px; color:#024452; font-size:1em; }
.vvcm-video-info p { font-size:.85em; color:#666; margin:0; line-height:1.5; }

/* ── RESPONSIVE ───────────────────────────── */
@media(max-width:768px){
    .vvcm-spelers-grid { grid-template-columns:repeat(2,1fr); }
    .vvcm-doc-grid,.vvcm-video-grid { grid-template-columns:1fr; }
}
@media(max-width:480px){
    .vvcm-spelers-grid,.vvcm-ere-grid { grid-template-columns:1fr; }
}