/**
 * Block Layout — shared Width + Float (inc/helpers/block-layout.php).
 *
 * Used by Sidebar and Slides. The wrapper carries .bl + .SDblock, a
 * .bl--float-{left|right|none} class, a size class (.bl--full / --wide /
 * --narrow) and an inline --bl-width (bare percentage points, e.g. 33.333).
 * The tablet/phone collapse rules are printed by
 * shew_render_block_layout_breakpoints() (thresholds can't be vars).
 *
 * Moved here from sidebar.css unchanged in behavior — see that file's
 * history for the reasoning behind the tier math below.
 */

/**
 * .SDblock exempts the wrapper from page-width-control.css's clamp, and that
 * clamp only re-centers each sibling individually — .entry-content itself
 * has no max-width — so the block sizes itself against the page's width
 * tier here. --bl-tier-width mirrors --boxedWidth/--wideWidth/--veryWideWidth;
 * pages without a width-* body class (e.g. blog posts) fall back to 100%.
 */
#SD.width-boxed     { --bl-tier-width: var(--boxedWidth); }
#SD.width-wide      { --bl-tier-width: var(--wideWidth); }
#SD.width-very_wide { --bl-tier-width: var(--veryWideWidth); }

.bl {
	/* calc() can't multiply a <length> by a <percentage>, only a <number> —
	   hence the bare-number --bl-width divided by 100. */
	--bl-own-width: calc(var(--bl-tier-width, 100%) * var(--bl-width, 100) / 100);
	/* Width when collapsed on tablet/phone: edge to edge by default... */
	--bl-collapse-width: 100%;
	width: var(--bl-own-width);
	margin-bottom: var(--bl-margin-bottom, 1.5rem);
}

/* ...or the page's normal text width, like a paragraph. */
.bl--collapse-gutter {
	--bl-collapse-width: min(100%, var(--bl-tier-width, 100%));
}

/* Floats inset from .entry-content's edge by half the tier's empty space, so
   the outer edge lines up with a normal paragraph's edge. --bl-gap is the
   space between the block and the copy wrapping beside it. */
.bl--float-left {
	float: left;
	margin-right: var(--bl-gap, 0.75rem);
	margin-left: max(0px, calc((100% - var(--bl-tier-width, 100%)) / 2));
}

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

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

/**
 * Floated beside a project row block (case study pages). .projectBlock is
 * display:grid (project-rows.css), a block formatting context that can't
 * overlap a float or fit beside one at full tier width, so it would drop
 * below. Plain block flow lets its half-width text column sit opposite the
 * float; the block after it clears.
 */
.bl--float-left + .projectBlock,
.bl--float-right + .projectBlock {
	display: block;
	margin-top: 0;
}

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

/* Full-width pull quote bands bleed edge to edge with a solid background —
   a taller float above one would slide underneath it. */
.bl ~ :is(.wp-block-quote, .wp-block-pullquote):is(.is-style-pq-display-break, .is-style-pq-refined) {
	clear: both;
}