/**
 * Sidebar block — layout
 *
 * Float/width/wrap behavior for the Sidebar block. Design tokens (radius,
 * spacing, colors, button style, breakpoints) 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.
 * The two breakpoint @media rules live entirely in that PHP file instead of
 * here (a media query threshold can't be expressed as a custom property).
 */

/**
 * Container width — this block carries the SDblock class (see
 * block-sidebar.php), which exempts it from page-width-control.css's
 * automatic max-width clamp on every direct child of .entry-content. That
 * clamp only re-centers each sibling individually — .entry-content itself
 * has no max-width of its own (see SDstandards.css, commented out) — so an
 * SDblock element is sized against the FULL, uncentered .entry-content box
 * unless it replicates the same width-tier math itself (same reasoning as
 * Display Grid / Work Portfolio Grid — see notes/block-design-standards.md).
 *
 * --sb-tier-width mirrors whichever --boxedWidth/--wideWidth/--veryWideWidth
 * the current page is using; margins below inset the float from
 * .entry-content's real edge by half the tier's own empty space, so a
 * floated Sidebar block's outer edge lands exactly where a normal
 * (individually-centered) paragraph's edge would. Pages without a width-*
 * body class (e.g. blog posts, which page-width-control.php doesn't cover)
 * fall back to --sb-tier-width: 100% — the plain, uninset behavior this
 * block had before this fix.
 */
#SD.width-boxed     { --sb-tier-width: var(--boxedWidth); }
#SD.width-wide      { --sb-tier-width: var(--wideWidth); }
#SD.width-very_wide { --sb-tier-width: var(--veryWideWidth); }

.sidebar-block {
	/* --sb-width is a bare number (percentage points, e.g. 33.333) not a
	   percentage value — calc() can't multiply a <length> by a <percentage>
	   (only by a <number>), so the tier math below divides by 100 instead.
	   The plain fallback (no width-tier body class) turns it into a real
	   percentage the same way: a bare number times 1%. */
	--sb-own-width: calc(var(--sb-tier-width, 100%) * var(--sb-width, var(--sb-width-default, 33.333)) / 100);
	width: var(--sb-own-width);
	background: var(--sb-bg, #f0ede4);
	border-radius: var(--sb-radius, 10px);
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.sidebar-block--float-left {
	float: left;
	margin-right: var(--sb-gap, 0.75rem);
	margin-left: max(0px, calc((100% - var(--sb-tier-width, 100%)) / 2));
}

.sidebar-block--float-right {
	float: right;
	margin-left: var(--sb-gap, 0.75rem);
	margin-right: max(0px, calc((100% - var(--sb-tier-width, 100%)) / 2));
}

.sidebar-block--float-none,
.sidebar-block--full {
	float: none;
	margin-left: max(0px, calc((100% - var(--sb-own-width)) / 2));
	margin-right: max(0px, calc((100% - var(--sb-own-width)) / 2));
}

/**
 * Floated beside a project row block (case study pages, e.g. a Sidebar
 * placed before Project — Text Only). .projectBlock is display:grid
 * (project-rows.css), which makes it a block formatting context: a BFC
 * can't overlap a float, and at its full tier width it can't fit beside
 * one either, so it drops below the Sidebar instead of sitting next to it.
 * Plain block flow lets its half-width text column sit opposite the float.
 * The block after it clears, so later rows (Web Screen and Text etc.) keep
 * their normal layout no matter which of the two is taller. Scoped to
 * .projectBlock so spoke pages' paragraphs keep wrapping as before.
 */
.sidebar-block--float-left + .projectBlock,
.sidebar-block--float-right + .projectBlock {
	display: block;
	margin-top: 0;
}

.sidebar-block--float-left + .projectBlock + *,
.sidebar-block--float-right + .projectBlock + * {
	clear: both;
}

/**
 * Full-width pull quote bands (Display Break / Refined) bleed edge to edge
 * with a solid background, so a taller Sidebar floated above one would slide
 * underneath the band and be covered by it. Clear the float so the band
 * always starts below the Sidebar.
 */
.sidebar-block ~ :is(.wp-block-quote, .wp-block-pullquote):is(.is-style-pq-display-break, .is-style-pq-refined) {
	clear: both;
}

.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;
}