/**
 * Begrippen — losse begrippagina (K2 + B2 + R1 + P2/P3) en A–Z-overzicht (A3 + L2).
 * Bron: design-previews/begrippen-r1 (?v=MIX en ?v=MIXAZ).
 */

/* Gedeeld */
.bp-crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; color: var(--paper-ink-3); }
.bp-crumbs a { color: inherit; text-decoration: none; }
.bp-crumbs a:hover { color: var(--amber-text-on-light); }
.bp-crumbs i { font-style: normal; color: var(--paper-line); }
.bp-crumbs span { color: var(--ink-950); }
.bp-label { display: block; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-ink-3); }
.bp-ulink { align-self: flex-start; padding-bottom: 2px; border-bottom: 2px solid var(--amber); font-weight: 700; color: var(--ink-950); text-decoration: none; }
.bp-ulink:hover { color: var(--amber-text-on-light); }

/* ===== Begrip: bovenaan (K2 helft/helft, ronde 2) ===== */
.bp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 560px; background: var(--paper); color: var(--ink-950); border-bottom: 3px solid var(--ink-950); }
.bp-hero__text { container-type: inline-size; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 40px clamp(32px, 5vw, 80px) 48px var(--gutter); }
.bp-kicker { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-text-on-light); }
.bp-kicker__letter { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--ink-950); color: var(--amber); font: 900 23px/1 var(--font-display); text-decoration: none; }
.bp-kicker__letter:hover { background: var(--amber); color: var(--ink-950); }
/* Titel past altijd: --w = langste woorddeel (in hero.php), 0.44 = gemiddelde letterbreedte van de display-letter in hoofdletters. */
.bp-title { margin: 0; font: 900 clamp(64px, 9vw, 152px)/.8 var(--font-display); font-size: max(30px, min(clamp(64px, 9vw, 152px), calc(100cqi / (var(--w, 8) * .44)))); text-transform: uppercase; color: var(--ink-950); overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
.bp-def { margin: 0; padding: 2px 0 2px 24px; border-left: 6px solid var(--amber); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; font-weight: 600; color: var(--ink-950); text-wrap: pretty; }
.bp-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.bp-by { display: flex; align-items: center; gap: 12px; }
.bp-by img { width: 44px; height: 44px; object-fit: cover; background: var(--paper-line); }
.bp-by p { margin: 0; display: flex; flex-direction: column; }
.bp-by a { color: inherit; text-decoration: none; }
.bp-by b { font-size: 15.5px; color: var(--ink-950); }
.bp-by a:hover b { color: var(--amber-text-on-light); }
.bp-by small { font-size: 13.5px; color: var(--paper-ink-3); }
.bp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.bp-tags > span, .bp-tags > a { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 11px; font-family: var(--font-body); line-height: 1.2; border: 1.5px solid var(--paper-line); background: var(--white); font-size: 13.5px; font-weight: 700; color: var(--paper-ink-2); text-decoration: none; }
.bp-tags > a { border-color: var(--ink-950); color: var(--ink-950); }
.bp-tags > a:hover { background: var(--ink-950); color: var(--amber); }
.bp-hero__media { position: relative; min-height: 100%; background: var(--ink-950); overflow: hidden; }
.bp-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bp-hero__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--amber); font: 900 clamp(260px, 30vw, 460px)/.72 var(--font-display); text-transform: uppercase; }
.bp-hero__speed { position: absolute; z-index: 2; left: -1px; top: 32px; }

/* ===== Begrip: tekst + rail (B2) ===== */
.bp-body { display: grid; grid-template-columns: minmax(0, 720px) 300px; gap: 96px; justify-content: space-between; padding: 64px var(--gutter) 96px; background: var(--paper); color: var(--paper-ink-2); }
.bp-main { min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.bp-rail { align-self: start; position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 28px; }
.admin-bar .bp-rail { top: calc(var(--header-h) + 56px); }
.bp-rail__card { padding: 22px; background: var(--white); border-top: 4px solid var(--ink-950); }
.bp-rail__card ul { list-style: none; margin: 12px 0 0; padding: 0; }
.bp-rail__card a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--paper-line); font-weight: 700; color: var(--ink-950); text-decoration: none; }
.bp-rail__card a::after { content: "→"; color: var(--amber-text-on-light); }
.bp-rail__card a:hover { color: var(--amber-text-on-light); }
.bp-rail__card li:last-child a { border-bottom: 0; }

/* Content uit de editor (zoals artikelen) */
.bp-content { display: flex; flex-direction: column; gap: 22px; font-size: 18px; line-height: 1.7; color: var(--paper-ink-2); overflow-wrap: break-word; }
.bp-content > * { margin: 0; }
.bp-content h2 { margin-top: 32px; font: 900 clamp(34px, 4vw, 48px)/.88 var(--font-display); text-transform: uppercase; color: var(--ink-950); scroll-margin-top: calc(var(--header-h) + 24px); }
.bp-content > h2:first-child { margin-top: 0; }
.bp-content h3, .bp-content h4 { font-family: var(--font-body); font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--ink-950); }
.bp-content h3 { margin-top: 12px; font-size: 23px; line-height: 1.25; }
.bp-content h4 { font-size: 19px; line-height: 1.3; }
.bp-content strong, .bp-content b { color: var(--ink-950); }
.bp-content ul, .bp-content ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.bp-content ul { list-style: square; }
.bp-content li::marker { color: var(--amber); }
.bp-content ol li::marker { font-weight: 800; color: var(--amber-text-on-light); }
.bp-content a:not([class]) { color: inherit; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bp-content a:not([class]):hover { color: var(--amber-text-on-light); }
.bp-cite { font-size: .85em; font-weight: 700; color: var(--amber-text-on-light); text-decoration: none; }
.bp-content sup { font-size: .7em; }
.bp-content img { max-width: 100%; height: auto; }
.bp-content .wp-caption, .bp-content figure { max-width: 100% !important; }
.bp-content .wp-caption-text, .bp-content figcaption { margin-top: 8px; font-size: 14px; color: var(--paper-ink-3); }
.bp-content .aligncenter { margin-inline: auto; }
.bp-content blockquote { padding: 4px 0 4px 24px; border-left: 4px solid var(--amber); font-size: 21px; font-weight: 600; color: var(--ink-950); }
.bp-content blockquote p { margin: 0; }
.bp-content iframe { max-width: 100%; }
.bp-content iframe[src*="youtube"], .bp-content iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.bp-table { overflow-x: auto; border: 1.5px solid var(--ink-950); background: var(--white); }
.bp-table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.bp-table th, .bp-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--paper-line); }
.bp-table th, .bp-table thead td, .bp-table table:not(:has(thead, th)) tr:first-child td { background: var(--ink-950); color: var(--paper); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* Auteur + bronnen */
.bp-author { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: 32px 0; border-top: 3px solid var(--ink-950); border-bottom: 1px solid var(--paper-line); }
.bp-author img { width: 96px; height: 96px; object-fit: cover; background: var(--paper-line); }
.bp-author > div { display: flex; flex-direction: column; gap: 2px; }
.bp-author__name { font: 900 32px/1 var(--font-display); text-transform: uppercase; color: var(--ink-950); text-decoration: none; }
.bp-author__name:hover { color: var(--amber-text-on-light); }
.bp-author__role { font-size: 15px; font-weight: 600; color: var(--paper-ink-3); }
.bp-author p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; }
.bp-author p a { color: inherit; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bp-refs ol { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bp-refs li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.55; color: var(--paper-ink-2); overflow-wrap: anywhere; scroll-margin-top: calc(var(--header-h) + 24px); }
.bp-refs li > span { font-weight: 800; color: var(--amber-text-on-light); }
.bp-refs li:target { background: var(--amber-wash); }
.bp-refs a { color: inherit; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ===== IGNITE9 ===== */
.bp-igl { display: flex; flex-direction: column; gap: 4px; font: 900 36px/.9 var(--font-display); color: var(--paper); }
.bp-igl > span { white-space: nowrap; }
.bp-igl em { font-style: normal; color: var(--amber); }
.bp-igl small { font: 700 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.bp-res { position: absolute; left: 0; bottom: 0; padding: 8px 12px; background: var(--amber); color: var(--ink-950); font: 900 22px/1 var(--font-display); text-transform: uppercase; }
.bp-who { font-size: 13px; color: var(--text-muted); }
.bp-who b { color: var(--paper); }

/* P3: kaart in de rail */
.bp-ig-card { display: flex; flex-direction: column; background: var(--ink-950); color: var(--text-soft-2); font-size: 15px; line-height: 1.5; }
.bp-ig-card__photo { position: relative; margin: 0; background: #000; }
.bp-ig-card__photo img { width: 100%; height: auto; aspect-ratio: 1080 / 928; object-fit: cover; }
.bp-ig-card__in { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; }
.bp-ig-card blockquote { margin: 0; font-size: 15.5px; line-height: 1.5; font-weight: 600; color: var(--paper); }
.bp-ig-card hr { width: 100%; margin: 2px 0; border: 0; border-top: 1px solid var(--line-dark); }
.bp-ig-card p { margin: 0; }
.bp-ig-card .btn { justify-content: center; padding: 14px 18px; font-size: 14px; }

/* P2: amber band onderaan */
.bp-band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; align-items: center; padding: 96px var(--gutter); overflow: hidden; background: var(--amber); color: var(--ink-950); }
.bp-band__lines { position: absolute; left: -40px; bottom: -40px; display: flex; gap: 14px; opacity: .14; }
.bp-band__lines span { width: 60px; height: 260px; background: var(--ink-950); transform: skewX(-20deg); }
.bp-band__text { position: relative; }
.bp-band__kick { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.bp-band__title { margin: 6px 0 0; font: 900 clamp(56px, 8vw, 128px)/.82 var(--font-display); text-transform: uppercase; color: var(--ink-950); }
.bp-band__title em { font-style: normal; color: var(--paper); }
.bp-band p { margin: 18px 0 28px; max-width: 560px; font-size: 20px; line-height: 1.5; font-weight: 600; }
.bp-band__btn { background: var(--ink-950); color: var(--paper); padding: 20px 28px; }
.bp-band__result { position: relative; margin: 0; background: #000; color: var(--text-soft-2); box-shadow: 12px 12px 0 var(--ink-950); }
.bp-band__photo { position: relative; }
.bp-band__photo img { width: 100%; height: auto; aspect-ratio: 1080 / 928; object-fit: cover; }
.bp-band__photo .bp-res { font-size: 28px; padding: 10px 14px; }
.bp-band__result blockquote { margin: 0; padding: 22px 24px 6px; font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--paper); }
.bp-band__result .bp-who { display: block; padding: 0 24px 22px; font-size: 14px; }

/* ===== Gerelateerd (R1) ===== */
.bp-related { display: flex; flex-direction: column; gap: 24px; padding: 72px var(--gutter); background: var(--paper); border-top: 1px solid var(--paper-line); }
.bp-related h2 { font-size: clamp(44px, 5.4vw, 72px); line-height: .84; color: var(--ink-950); }
.bp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.bp-chips a { padding: 13px 18px; border: 1.5px solid var(--ink-950); font-size: 16px; font-weight: 700; color: var(--ink-950); text-decoration: none; }
.bp-chips a:hover { background: var(--ink-950); color: var(--amber); }
.bp-chips .bp-chips__all { background: var(--ink-950); color: var(--paper); }
.bp-chips .bp-chips__all:hover { color: var(--amber); }

/* ===== A–Z-overzicht (A3 + L2) ===== */
.bp-az { background: var(--paper); color: var(--paper-ink-2); }
.bp-az__head { padding: 56px var(--gutter) 8px; }
.bp-az__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: start; }
.bp-az__title { margin: 12px 0 0; font: 900 clamp(64px, 8.6vw, 140px)/.8 var(--font-display); text-transform: uppercase; color: var(--ink-950); }
.bp-az__lead { margin: 18px 0 24px; max-width: 600px; font-size: 19px; line-height: 1.5; }
.bp-search { display: flex; align-items: center; gap: 12px; max-width: 640px; padding: 14px 16px; background: var(--white); color: var(--ink-950); border: 2px solid var(--ink-950); }
.bp-search svg { width: 20px; height: 20px; flex: none; }
.bp-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 17px/1.3 var(--font-body); color: var(--ink-950); outline: none; }
.bp-search input::-webkit-search-cancel-button { cursor: pointer; }
.bp-search:focus-within { box-shadow: 6px 6px 0 var(--amber); }
.bp-search kbd { padding: 5px 7px; border: 1px solid var(--paper-line); font: 700 12px/1 var(--font-body); color: var(--paper-ink-3); }
.bp-pop { padding: 26px; background: var(--ink-950); color: var(--text-soft); }
.bp-pop .bp-label { color: var(--text-muted); }
.bp-pop ol { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: pop; }
.bp-pop li { counter-increment: pop; }
.bp-pop a { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-dark); font-weight: 700; color: var(--paper); text-decoration: none; }
.bp-pop a::before { content: counter(pop, decimal-leading-zero); font: 900 20px/1 var(--font-display); color: var(--amber); }
.bp-pop a:hover { color: var(--amber); }
.bp-letters { display: grid; grid-template-columns: repeat(27, minmax(0, 1fr)); margin-top: 36px; border: 1.5px solid var(--ink-950); }
.bp-letters a, .bp-letters span { display: flex; align-items: center; justify-content: center; height: 56px; border-right: 1px solid var(--paper-line); font: 900 26px/1 var(--font-display); color: var(--ink-950); text-decoration: none; }
.bp-letters > :last-child { border-right: 0; }
.bp-letters span, .bp-letters a.is-off { color: var(--paper-line); pointer-events: none; }
.bp-letters a:hover, .bp-letters a.is-on { background: var(--ink-950); color: var(--amber); }
.bp-list { padding: 24px var(--gutter) 96px; }
.bp-grp { padding: 32px 0; border-top: 1.5px solid var(--ink-950); scroll-margin-top: calc(var(--header-h) + 16px); }
.bp-grp__l { display: flex; align-items: baseline; gap: 14px; font-size: 64px; line-height: .8; color: var(--ink-950); }
.bp-grp__l small { font: 700 14px/1 var(--font-body); color: var(--paper-ink-3); }
.bp-grp ul { list-style: none; margin: 20px 0 0; padding: 0; columns: 4 220px; column-gap: 40px; }
.bp-grp li { break-inside: avoid; }
.bp-grp li a { display: block; padding: 7px 0; font-size: 16.5px; font-weight: 600; color: var(--ink-950); text-decoration: none; }
.bp-grp li a:hover { color: var(--amber-text-on-light); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bp-empty { padding: 48px 0; font-size: 19px; }
.bp-empty b { color: var(--ink-950); }
.bp-scrub { display: none; }

/* ===== Tablet ===== */
@media (max-width: 1100px) {
	.bp-az__top, .bp-band { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.bp-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
	.bp-body { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.bp-main { max-width: 720px; }
	.bp-rail { position: static; max-width: 720px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	.bp-rail .bp-ulink { grid-column: 1 / -1; }
	.bp-letters { grid-template-columns: repeat(14, minmax(0, 1fr)); }
	.bp-letters a, .bp-letters span { border-bottom: 1px solid var(--paper-line); }
}

/* ===== Mobiel ===== */
@media (max-width: 760px) {
	.bp-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.bp-hero__media { order: -1; aspect-ratio: 16 / 10; min-height: 0; }
	.bp-hero__ph { font-size: 200px; }
	.bp-hero__text { padding: 28px var(--gutter) 32px; gap: 18px; }
	.bp-def { padding-left: 18px; border-left-width: 5px; }
	.bp-body { padding: 40px var(--gutter) 64px; }
	.bp-content { font-size: 17px; }
	.bp-rail { grid-template-columns: minmax(0, 1fr); }
	.bp-author { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
	.bp-author img { width: 64px; height: 64px; }
	.bp-author__name { font-size: 28px; }
	.bp-related { padding: 56px var(--gutter); }
	.bp-band { padding: 64px var(--gutter) 72px; }
	.bp-band__result { box-shadow: 8px 8px 0 var(--ink-950); margin-right: 8px; }
	.bp-band__photo .bp-res { font-size: 22px; }
	.bp-az__head { padding-top: 32px; }
	.bp-letters { grid-template-columns: repeat(9, minmax(0, 1fr)); margin-top: 28px; }
	.bp-letters a, .bp-letters span { height: 44px; font-size: 22px; }
	.bp-list { padding-right: calc(var(--gutter) + 18px); }
	.bp-grp__l { font-size: 52px; }
	.bp-grp ul { columns: 1; }
	.bp-grp li a { padding: 9px 0; }
	.bp-scrub { display: flex; flex-direction: column; position: fixed; z-index: 30; right: 2px; top: 50%; transform: translateY(-50%); padding: 6px 2px; background: rgba(13, 13, 12, .85); }
	.bp-scrub a { padding: 0 4px; font: 900 13px/1.25 var(--font-display); color: var(--amber); text-align: center; text-decoration: none; }
}