/* =====================================================================
 * vogelgroep.css — soortenoverzicht per vogelgroep (taxonomy-vogelgroep.php)
 * Masonry zoals /topshots/, met zichtbare naam als bijschrift.
 * Tokens komen uit dbp-shared.css.
 * ===================================================================== */

:root {
	--dbp-vg-cols: 3;       /* masonry-kolommen desktop */
	--dbp-vg-gap:  10px;    /* tussenruimte */
	--dbp-vg-maxw: 1500px;  /* max. breedte grid */
}

.dbp-vg-main {
	padding: 64px var(--dbp-pad-x, 56px) 72px;  /* 64px = hoogte fixed nav */
	max-width: var(--dbp-vg-maxw);
	margin: 0 auto;
}

/* ---------------------------------------------------------------------
 * KOP
 * ------------------------------------------------------------------- */
.dbp-vg-head {
	text-align: center;
	padding: 64px 0 48px;
}
.dbp-vg-eyebrow {
	margin: 0 0 18px;
	font-family: var(--dbp-sans, "DM Sans", sans-serif);
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.dbp-vg-eyebrow a {
	color: var(--dbp-fg-2, rgba(240,235,224,.48));
	text-decoration: none;
	transition: color .2s;
}
.dbp-vg-eyebrow a:hover { color: var(--dbp-accent, #7AAFC8); }

.dbp-vg-titel {
	margin: 0;
	font-family: var(--dbp-serif, "Cormorant Garamond", serif);
	font-size: clamp(2.4rem, 5.4vw, 4.2rem);
	font-weight: 600;
	line-height: 1.08;
	color: var(--dbp-fg, #f0ebe0);
}
.dbp-vg-meta {
	margin: 16px 0 0;
	font-family: var(--dbp-sans, "DM Sans", sans-serif);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dbp-fg-3, rgba(240,235,224,.28));
}

/* ---------------------------------------------------------------------
 * MASONRY-GRID VAN SOORTKAARTEN
 * Natuurlijke verhoudingen via column-count (geen crop, geen focal).
 * Let op: volgorde loopt kolom-voor-kolom (zelfde als /topshots/).
 * ------------------------------------------------------------------- */
.dbp-vg-masonry {
	column-count: var(--dbp-vg-cols);
	column-gap: var(--dbp-vg-gap);
}
.dbp-vg-kaart {
	display: block;
	margin: 0 0 var(--dbp-vg-gap);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	text-decoration: none;
	background: var(--dbp-card-bg, #181818);
	overflow: hidden;
}
.dbp-vg-figuur { margin: 0; }
.dbp-vg-figuur img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity .25s ease, transform .45s ease;
}
.dbp-vg-kaart:hover img { opacity: .85; transform: scale(1.02); }

/* Zichtbaar bijschrift onder de foto: NL + Latijn */
.dbp-vg-naam {
	display: block;
	padding: 12px 14px 14px;
	border-top: 1px solid var(--dbp-border, rgba(255,255,255,.06));
}
.dbp-vg-naam-nl {
	display: block;
	font-family: var(--dbp-sans, "DM Sans", sans-serif);
	font-size: 15px;
	font-weight: 400;
	color: var(--dbp-fg, #f0ebe0);
	opacity: .85;
	transition: opacity .2s;
}
.dbp-vg-naam-lat {
	display: block;
	margin-top: 2px;
	font-family: var(--dbp-sans, "DM Sans", sans-serif);
	font-size: 12.5px;
	font-weight: 300;
	font-style: italic;
	color: var(--dbp-fg-2, rgba(240,235,224,.48));
}
.dbp-vg-kaart:hover .dbp-vg-naam-nl { opacity: 1; }

/* Soort zonder featured foto */
.dbp-vg-foto-leeg {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	font-size: 40px;
	opacity: .35;
}

.dbp-vg-leeg {
	text-align: center;
	padding: 4rem 1rem;
	font-family: var(--dbp-sans, "DM Sans", sans-serif);
	font-style: italic;
	color: var(--dbp-fg-2, rgba(240,235,224,.48));
}

/* ---------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------- */
@media (max-width: 900px) {
	:root { --dbp-vg-cols: 2; }
	.dbp-vg-head { padding: 44px 0 36px; }
}
@media (max-width: 560px) {
	:root { --dbp-vg-cols: 2; --dbp-vg-gap: 8px; }
	.dbp-vg-naam { padding: 9px 10px 11px; }
	.dbp-vg-naam-nl { font-size: 13px; }
	.dbp-vg-naam-lat { font-size: 11px; }
}