/**
 * Notice / Warning / Tip panels.
 *
 * Rendered by inc/panels.php as:
 *
 *   <div class="lb-panel lb-panel--<kind>">
 *     <div class="lb-panel__icon">SVG</div>
 *     <div class="lb-panel__title">optional</div>     (or .screen-reader-text)
 *     <div class="lb-panel__body">…rendered markdown…</div>
 *   </div>
 *
 * Layout: icon top-left, title (if any) on the same row as the icon, body
 * below. The whole panel has a soft tinted background, a thicker left accent
 * bar, and rounded corners. Each kind sets two custom properties (--lb-panel-bg,
 * --lb-panel-fg) and the base rule does the rest.
 */

.lb-panel {
	--lb-panel-bg: #F4F8FB;
	--lb-panel-fg: #5C6770;

	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 0.75rem;
	align-items: start;
	margin: 1.5em 0;
	padding: 0.9em 1.1em 0.9em 1em;
	background: var(--lb-panel-bg);
	border-left: 4px solid var(--lb-panel-fg);
	border-radius: 6px;
	color: #0F1419;
	font-size: 0.97em;
	line-height: 1.55;
}

.lb-panel__icon {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	margin-top: 0.05em;
	color: var(--lb-panel-fg);
	flex-shrink: 0;
}

.lb-panel__icon svg {
	width: 100%;
	height: 100%;
}

.lb-panel__title {
	grid-column: 2;
	grid-row: 1;
	font-weight: 600;
	color: var(--lb-panel-fg);
	margin: 0 0 0.35em;
	line-height: 1.4;
}

.lb-panel__body {
	grid-column: 2;
	grid-row: 2;
}

/* When there's no title, the icon and the first paragraph need to line up. */
.lb-panel__title + .lb-panel__body {
	grid-row: 2;
}
.lb-panel:not(:has(.lb-panel__title)) .lb-panel__body {
	grid-row: 1;
	align-self: center;
}

/* Tighten the inner Markdown so the panel doesn't get airy. */
.lb-panel__body > :first-child { margin-top: 0; }
.lb-panel__body > :last-child  { margin-bottom: 0; }
.lb-panel__body p              { margin: 0.5em 0; }
.lb-panel__body p:first-child  { margin-top: 0; }
.lb-panel__body p:last-child   { margin-bottom: 0; }

.lb-panel__body code {
	background: rgba(15, 20, 25, 0.06);
	padding: 0.08em 0.35em;
	border-radius: 3px;
	font-size: 0.92em;
}

.lb-panel__body a {
	color: var(--lb-panel-fg);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.lb-panel__body a:hover {
	text-decoration-thickness: 2px;
}

/* --- kind-specific colour pairs ----------------------------------------- */

.lb-panel--note {
	--lb-panel-bg: #E7F3FB;
	--lb-panel-fg: #1FB6F5; /* --lb-primary */
}

.lb-panel--tip {
	--lb-panel-bg: #E8F5E9;
	--lb-panel-fg: #2E7D32;
}

.lb-panel--important {
	--lb-panel-bg: #F1ECFD;
	--lb-panel-fg: #6B4FBB;
}

.lb-panel--warning {
	--lb-panel-bg: #FFF7E0;
	--lb-panel-fg: #B26A00;
}

.lb-panel--caution {
	--lb-panel-bg: #FCE8E8;
	--lb-panel-fg: #C62828;
}

/* Accessibility helper — used when there's no explicit title so screen
   readers still know what kind of panel this is. Matches WP core's class. */
.lb-panel .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

/* Small screens: keep the same two-column layout but with a slightly tighter
   icon column. The icon stays visible — useful as a quick scan cue. */
@media (max-width: 640px) {
	.lb-panel {
		padding: 0.8em 0.9em 0.8em 0.85em;
		grid-column-gap: 0.55rem;
	}
	.lb-panel__icon {
		width: 1.3em;
		height: 1.3em;
	}
}