/* =====================================================================
 * highlights.css — Highlights / topshots redesign.
 * Bouwt voort op dbp-shared.css (tokens, nav, footer, hero, header-guard).
 * Twee weergaven: "Alle thema's" (filmstrips) en "één thema" (masonry).
 * Plus een eigen lightbox. Vrij aanpasbaar via de variabelen hieronder.
 * ===================================================================== */

:root {
	--dbp-hl-strip-h:   360px;  /* hoogte van een filmstrip-rij */
	--dbp-hl-meta-w:    248px;  /* breedte van de tekstkolom links van de filmstrip */
	--dbp-hl-gap:       6px;    /* tussenruimte filmstrip / masonry */
	--dbp-hl-cols:      3;      /* aantal masonry-kolommen */
}

/* ---------------------------------------------------------------------
 * STICKY THEMA-FILTER
 * ------------------------------------------------------------------- */
.dbp-hl-bar {
	position:sticky; top:64px; z-index:120;
	background:rgba(10,10,10,0.92);
	backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
	border-top:1px solid var(--dbp-border);
	border-bottom:1px solid var(--dbp-border);
	padding:13px var(--dbp-pad-x);
	display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.dbp-hl-bar-label {
	font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
	color:var(--dbp-fg-3); font-weight:500; margin-right:8px;
}
.dbp-hl-chip {
	font-family:var(--dbp-sans); font-size:13px; font-weight:400;
	padding:7px 15px; cursor:pointer; letter-spacing:0.01em; line-height:1;
	color:var(--dbp-fg-2); background:rgba(255,255,255,0.04);
	border:1px solid rgba(255,255,255,0.1);
	transition:background .2s, color .2s;
}
.dbp-hl-chip:hover { color:var(--dbp-fg); }
.dbp-hl-chip.is-active {
	color:#0a0a0a; background:var(--dbp-fg); border-color:var(--dbp-fg); font-weight:500;
}

/* ---------------------------------------------------------------------
 * ALLE THEMA'S — filmstrip per thema
 * ------------------------------------------------------------------- */
.dbp-hl-all { animation:dbpFadeIn 0.35s ease both; }
.dbp-hl-row {
	padding:44px var(--dbp-pad-x) 8px;
	display:grid; grid-template-columns:var(--dbp-hl-meta-w) 1fr; gap:44px;
	align-items:center; border-top:1px solid rgba(255,255,255,0.05);
}
.dbp-hl-row-num {
	font-family:var(--dbp-serif); font-size:30px; font-weight:700;
	color:rgba(240,235,224,0.16); line-height:1; margin:0 0 14px;
}
.dbp-hl-row-name {
	display:block; font-family:var(--dbp-serif); font-size:38px; font-weight:700;
	line-height:1; letter-spacing:-0.01em; color:var(--dbp-fg); margin:0 0 12px;
	background:none; border:0; padding:0; text-align:left; cursor:pointer;
}
.dbp-hl-row-name:hover { color:var(--dbp-accent); }
.dbp-hl-row-caption {
	font-size:14px; line-height:1.6; color:rgba(240,235,224,0.42);
	font-weight:300; margin:0 0 18px; max-width:230px;
}
.dbp-hl-row-link {
	font-size:12px; letter-spacing:0.04em; color:rgba(240,235,224,0.6);
	cursor:pointer; background:none; border:0; padding:0 0 2px;
	border-bottom:1px solid rgba(240,235,224,0.25);
}
.dbp-hl-row-link:hover { color:var(--dbp-fg); border-bottom-color:var(--dbp-fg); }

.dbp-hl-filmstrip { display:flex; gap:var(--dbp-hl-gap); height:var(--dbp-hl-strip-h); }
.dbp-hl-film {
	min-width:0; height:100%; overflow:hidden; background:var(--dbp-card-bg);
	cursor:pointer; padding:0; border:0; border-radius:0;
}
.dbp-hl-film img { width:100%; height:100%; object-fit:cover; transition:transform 0.55s ease; }
.dbp-hl-film:hover img { transform:scale(1.05); }
.dbp-hl-all-end { height:80px; }

/* ---------------------------------------------------------------------
 * ÉÉN THEMA — kop + masonry-grid
 * ------------------------------------------------------------------- */
.dbp-hl-single { animation:dbpFadeIn 0.35s ease both; }
.dbp-hl-single-head { padding:40px var(--dbp-pad-x); border-top:1px solid rgba(255,255,255,0.05); }
.dbp-hl-back {
	font-size:12px; letter-spacing:0.04em; color:rgba(240,235,224,0.5);
	cursor:pointer; background:none; border:0; padding:0; margin-bottom:30px; display:inline-block;
}
.dbp-hl-back:hover { color:var(--dbp-fg); }
.dbp-hl-single-title-row { display:flex; align-items:flex-end; justify-content:space-between; gap:48px; }
.dbp-hl-single-eyebrow {
	font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
	color:var(--dbp-fg-3); font-weight:500; margin:0 0 16px;
}
.dbp-hl-single-title {
	font-family:var(--dbp-serif); font-size:clamp(48px,6vw,80px); font-weight:700;
	line-height:0.92; letter-spacing:-0.02em; color:var(--dbp-fg); margin:0 0 16px;
}
.dbp-hl-single-caption { font-size:16px; line-height:1.6; color:rgba(240,235,224,0.46); font-weight:300; max-width:460px; margin:0; }
.dbp-hl-single-num-wrap { flex-shrink:0; text-align:right; }
.dbp-hl-single-num { font-family:var(--dbp-serif); font-size:64px; font-weight:700; line-height:1; color:rgba(240,235,224,0.1); margin:0; }
.dbp-hl-single-num-label { font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--dbp-fg-4); margin-top:4px; }

/* Masonry via CSS columns (geen JS, kolom-voor-kolom). */
.dbp-hl-masonry {
	padding:0 var(--dbp-pad-x) 88px;
	column-count:var(--dbp-hl-cols); column-gap:var(--dbp-hl-gap);
}
.dbp-hl-tile {
	display:block; width:100%; break-inside:avoid; margin:0 0 var(--dbp-hl-gap);
	overflow:hidden; background:var(--dbp-card-bg); cursor:pointer; padding:0; border:0;
}
.dbp-hl-tile img { width:100%; height:auto; display:block; transition:transform 0.5s ease; }
.dbp-hl-tile:hover img { transform:scale(1.03); }

/* ---------------------------------------------------------------------
 * LEGE STAAT
 * ------------------------------------------------------------------- */
.dbp-hl-empty {
	padding:60px var(--dbp-pad-x) 120px; border-top:1px solid rgba(255,255,255,0.05);
	color:var(--dbp-fg-2); font-weight:300;
}
.dbp-hl-empty p { margin:0 0 8px; font-size:18px; }
.dbp-hl-empty-sub { font-size:14px; color:var(--dbp-fg-3); }

/* ---------------------------------------------------------------------
 * LIGHTBOX
 * ------------------------------------------------------------------- */
.dbp-hl-lightbox {
	position:fixed; inset:0; z-index:500;
	background:rgba(10,10,10,0.96);
	backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
	display:flex; align-items:center; justify-content:center;
	animation:dbpFadeIn 0.25s ease both; cursor:zoom-out;
}
.dbp-hl-lightbox[hidden] { display:none; }
.dbp-hl-lb-img {
	max-width:90vw; max-height:88vh; object-fit:contain; cursor:default;
	box-shadow:0 30px 90px rgba(0,0,0,0.6);
}
.dbp-hl-lb-close {
	position:absolute; top:22px; right:30px; width:42px; height:42px;
	display:flex; align-items:center; justify-content:center;
	font-size:30px; line-height:1; color:rgba(240,235,224,0.6);
	cursor:pointer; font-weight:300; background:none; border:0;
}
.dbp-hl-lb-close:hover { color:var(--dbp-fg); }
.dbp-hl-lb-prev, .dbp-hl-lb-next {
	position:absolute; top:50%; transform:translateY(-50%);
	font-size:38px; color:rgba(240,235,224,0.45); cursor:pointer;
	padding:18px 22px; user-select:none; background:none; border:0;
}
.dbp-hl-lb-prev { left:18px; }
.dbp-hl-lb-next { right:18px; }
.dbp-hl-lb-prev:hover, .dbp-hl-lb-next:hover { color:var(--dbp-fg); }
.dbp-hl-lb-counter {
	position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
	font-size:12px; letter-spacing:0.2em; color:rgba(240,235,224,0.5);
	font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------- */
@media (max-width:900px) {
	:root { --dbp-hl-cols:2; --dbp-hl-strip-h:240px; }
	.dbp-hl-bar { top:64px; }
	.dbp-hl-row { grid-template-columns:1fr; gap:18px; padding-top:36px; }
	.dbp-hl-row-caption { max-width:none; }
	.dbp-hl-single-title-row { flex-direction:column; align-items:flex-start; gap:18px; }
	.dbp-hl-single-num-wrap { text-align:left; }
	.dbp-hl-lb-prev { left:4px; }
	.dbp-hl-lb-next { right:4px; }
}
@media (max-width:560px) {
	:root { --dbp-hl-cols:1; --dbp-hl-strip-h:200px; }
	.dbp-hl-filmstrip .dbp-hl-film:nth-child(n+4) { display:none; } /* max 3 op smal scherm */
}