/* =====================================================================
 * categorieen.css — fylogenie-boom + 32-categorie grid (redesign)
 * Vereist dbp-shared.css (tokens/nav/footer).
 * ===================================================================== */

/* ---------- FYLOGENIE-SECTIE ---------- */
.dbp-phylo-section { padding:12px var(--dbp-pad-x) 64px; }
.dbp-phylo-head {
	display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
	border-top:1px solid var(--dbp-border);
	padding-top:26px; margin-bottom:26px;
}
.dbp-phylo-title {
	font-family:var(--dbp-serif); font-style:italic; font-size:25px; font-weight:600;
	color:rgba(240,235,224,0.88); margin:0;
}
.dbp-phylo-sub { font-size:12px; color:rgba(240,235,224,0.34); font-weight:300; letter-spacing:0.02em; margin:0; }

.dbp-phylo-scroll { width:100%; }
.dbp-phylo { width:100%; }
.dbp-phylo svg { width:100%; height:auto; display:block; overflow:visible; }

/* boom-intro animaties */
@keyframes dbpGrow   { from { stroke-dashoffset:1000; } to { stroke-dashoffset:0; } }
@keyframes dbpLeafIn { from { opacity:0; } to { opacity:1; } }

.dbp-phylo .phylo-branch { transition:stroke .2s, stroke-width .2s; }
.dbp-phylo .phylo-leaf-dot { transition:transform .2s; transform-box:fill-box; transform-origin:center; }
.dbp-phylo .phylo-leaf-label { transition:fill .2s; }

/* ---------- CATEGORIE-GRID ---------- */
.dbp-cat-grid {
	padding:0 var(--dbp-pad-x) 88px;
	display:grid; grid-template-columns:repeat(4,1fr); gap:5px;
}
.cat-card {
	position:relative; overflow:hidden; cursor:pointer;
	background:#181818; aspect-ratio:3/4;
	outline:2px solid transparent; outline-offset:-2px;
	transition:outline .25s;
	text-decoration:none; color:var(--dbp-fg); display:block;
}
.cat-card img {
	width:100%; height:100%; object-fit:cover;
	transition:transform .55s ease;
}
.cat-card:hover img { transform:scale(1.06); }
.cat-card-leeg {
	width:100%; height:100%; display:flex; align-items:center; justify-content:center;
	font-size:40px; opacity:.25; background:#101010;
}
.cat-card-grad {
	position:absolute; inset:0; pointer-events:none;
	background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.05) 58%);
}
.cat-card-label { position:absolute; bottom:0; left:0; right:0; pointer-events:none; padding:16px 18px; }
.cat-card-label p {
	font-family:var(--dbp-serif); font-size:17px; font-weight:700; line-height:1.15;
	text-wrap:pretty; margin:0; color:var(--dbp-fg);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px) {
	/* boom horizontaal scrollbaar, niet ineen drukken */
	.dbp-phylo-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
	.dbp-phylo { min-width:680px; }
	.dbp-cat-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
	.cat-card-label p { font-size:15px; }
}