/* Paneelbeeld (fase 3, 2026-09-30): het gestippelde zenuwstelsel (assets/js/paneelbeeld.js). Geladen alleen op een
   artikel met Methodepaneel, een hub of homepage met het veld Paneelbeeld gevuld (opt-in, bouwprompt). Tokens uit
   methodepaneel-tokens.css. Wit op navy, geen rood, geen gloed; het canvas heeft role="img" en een aria-label. */

.pb-canvas{display:block; width:100%; height:auto; max-width:240px;}

/* Navy plaat (hub-hero, homepage-keuzehulp): dezelfde kleur en hoekradius als het paneel, geen schaduw (reference lock). */
.pb-plate{margin:0; background:var(--su-panel); border-radius:var(--su-r-card); padding:22px 18px; display:flex; justify-content:center; align-items:center;}

/* 1 · in het Methodepaneel: onder de meter, in de vrije ruimte; het script geeft het canvas een hoogte en verbergt het
   blok als er minder dan 110px over is. Zonder JavaScript blijft het blok verborgen ([hidden] in de template). */
.mp-beeld{display:flex; justify-content:center; align-items:center; flex:0 0 auto; min-height:0;}
.mp-beeld .pb-canvas{width:auto; max-width:100%; max-height:260px;}
/* Met het beeld in beeld gaat de stippentextuur van het paneel uit: één gestippeld beeld, geen twee. */
.mp.pb-on{background-image:none;}
@media (max-width:1099.98px){ .mp-beeld{display:none;} }

/* 2 · hub-hero: rechts van de kop, alleen op het brede scherm (zelfde grens als het paneel, logboek besluit 2). */
@media (min-width:1100px){
	#cvhub .hero.has-pb{grid-template-columns:minmax(0,1fr) 300px; gap:54px; align-items:center;}
	#cvhub .hero.has-pb .pb-plate{justify-self:end; width:300px;}
}
@media (max-width:1099.98px){ #cvhub .pb-plate{display:none;} }

/* 3 · homepage-keuzehulp: de plaat links van de tegels, sticky; de tegels in twee kolommen. Onder 1100px verandert er
   niets aan de keuzehulp. Specificiteit (id + 3 klassen) wint van de inline stijlen in page-homepage.php. */
@media (min-width:1100px){
	#sustiro-klacht-keuzehulp .skk-inner.has-pb{display:grid; grid-template-columns:300px minmax(0,1fr); column-gap:40px; align-items:start;}
	#sustiro-klacht-keuzehulp .skk-inner.has-pb > .skk-head{grid-column:1 / -1;}
	#sustiro-klacht-keuzehulp .skk-inner.has-pb > .pb-plate{grid-column:1; grid-row:2; position:sticky; top:24px; margin-top:52px;}
	#sustiro-klacht-keuzehulp .skk-inner.has-pb > .skk-grid{grid-column:2; grid-row:2; grid-template-columns:repeat(2, 1fr);}
	#sustiro-klacht-keuzehulp .skk-inner.has-pb > .skk-foot{grid-column:1 / -1;}
}
@media (max-width:1099.98px){ #sustiro-klacht-keuzehulp .pb-plate{display:none;} }