/* ───────────────────────────────────────────────────────────────
   kader.css — `blik/kader` custom block
   ───────────────────────────────────────────────────────────────
   A side-note panel: thick red vertical line on the left, bold
   heading at the top, body text below. Used for callouts inside
   long articles.

   This is NOT the same as `wp:quote` (the big-red-quote-mark pull-
   quote that lives in `single.css`). The two blocks are deliberately
   separate.

   Common edits:
     • red line thickness   → `.blik-kader` border-left
     • panel background     → `.blik-kader` background
     • heading style        → `.blik-kader__heading`
     • body style           → `.blik-kader__body`
   ─────────────────────────────────────────────────────────────── */

.blik-kader {
	display: block;
	position: relative;
	/* Equal inner padding all round (above heading == below body). */
	padding: var(--blik-spacing-lg);
	background: var(--blik-color-panel);
	border-left: var(--blik-border-thick);
	box-sizing: border-box;
}

/* Outer spacing with a two-class selector so it always wins over WordPress'
   auto-generated layout rule (`.wp-container-… > *{margin-block:0}`), which
   otherwise zeroed the panel's bottom margin on the front end (hence "no
   padding under the kader" while the editor still showed it). Matches the
   body paragraph rhythm so the gap equals the spacing between alinea's. */
.wp-block-post-content .blik-kader,
.blik-kader {
	margin-block: 1.35em;
	margin-inline: 0;
}

/* Two-class selectors so these win over the post-content body rhythm
   (`.wp-block-post-content h3 {…}`) — otherwise the heading would inherit a
   large top margin and push the title down inside the panel. */
.blik-kader .blik-kader__heading {
	color: var(--blik-color-ink);
	margin: 0 0 4px;
}

.blik-kader .blik-kader__body {
	color: var(--blik-color-ink);
	margin: 0;
}