/**
 * Sidebar block
 *
 * Frame, images, caption and button for the Sidebar block. Design tokens
 * (radius, spacing, colors, button style) are edited on the "Sidebar"
 * section of the Design Tokens admin page (/wp-admin/admin.php?page=shew-blocks-tokens)
 * — see inc/sidebar-tokens.php, which resolves them into the --sb-* custom
 * properties used below. Every var() here carries its own literal fallback,
 * so this file works even before any of those fields are ever touched.
 * Width/float and the collapse breakpoints come from the shared Block
 * Layout lib (inc/helpers/block-layout.php).
 */

/**
 * Width, float, tier-aware insets, collapse breakpoints and the float
 * clearing rules (project rows, pull quote bands) now live in the shared
 * Block Layout lib — assets/css/conditional/libs/block-layout.css and
 * inc/helpers/block-layout.php — also used by Slides. block-sidebar.php adds
 * its .bl classes and --bl-width; this file only styles the Sidebar itself.
 */

.sidebar-block {
	--bl-gap: var(--sb-gap, 0.75rem);
	background: var(--sb-bg, #f0ede4);
	border-radius: var(--sb-radius, 10px);
	overflow: hidden;
}

.sb-images {
	display: flex;
	flex-direction: column;
	gap: var(--sb-gap, 0.75rem);
	padding: var(--sb-gap, 0.75rem);
}

.sb-images:last-child {
	padding-bottom: var(--sb-gap, 0.75rem);
}

.sb-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sb-image-radius, 6px);
}

/* #SD prefix: the global "#SD h3:first-of-type { margin-top: 0 }" rule
   otherwise wins and the title sits flush against the block's top edge
   instead of getting the same inset as its left/right sides. */
#SD .sidebar-block .sb-title {
	margin: var(--sb-gap, 0.75rem) var(--sb-gap, 0.75rem) 0;
}

.sb-caption {
	margin: 0 var(--sb-gap, 0.75rem) var(--sb-gap, 0.75rem);
	font-size: 0.9em;
	opacity: 0.8;
}

/* Caption is a WYSIWYG field — keep its wrapping <p>s from adding the
   theme's paragraph margins inside the block. */
.sb-caption > * {
	margin: 0;
}

.sb-caption > * + * {
	margin-top: 0.5em;
}

/* Button carries class="button btn-secondary" (see block-sidebar.php), so
   its colors, hover, shape and type all come from the sitewide Secondary
   button tokens in assets/css/global/components/buttons.css — same approach
   as Display Case Study. Only placement lives here. */
.sb-btn {
	margin: 0 var(--sb-gap, 0.75rem) var(--sb-gap, 0.75rem);
}

/* Clearfix so following content doesn't ride up alongside a shorter float */
.sidebar-block::after {
	content: "";
	display: table;
	clear: both;
}