/**
 * LFBC layout-2col pattern
 *
 * Page layout: main content on the left, 296px "In this section"
 * sidebar on the right, 40px gap. Stacks to a single column below
 * the lg (1024px) viewport with the sidebar hidden on mobile.
 *
 * Widths
 *   ≥ 1024px viewport: main column flex-grows to fill remaining space
 *     (caps at 1024px when the section reaches the 1360px contentSize
 *     — 1024 + 40 gap + 296 sidebar = 1360); sidebar fixed at 296px.
 *   < 1024px viewport: main column full-width, sidebar `display: none`.
 *
 * Breakpoint
 *   Viewport `@media`, not `@container`. This is a page-level layout
 *   decision driven by the user's screen, not by the section's own
 *   width — the section is always the full content width.
 *
 * Specificity
 *   We chain `.lfbc-2col` with `.wp-block-columns` (and again on
 *   children) to beat core/columns' own `@media (min-width: 782px)`
 *   rules. Without the chained class, core's defaults at 782+ flip
 *   columns side-by-side before we want them to.
 *
 * Alignfull inside the main column
 *   The Grant Callout pattern (and likely other patterns editors drop
 *   into the main column) uses `align: "full"` to escape its parent
 *   to viewport width. Inside a column that's bad — we need it to
 *   stay inside the column's slot. We neutralize the negative-margin
 *   trick `alignfull` relies on for any alignfull descendant of the
 *   main column. Kept here in pattern CSS rather than on the column
 *   block's `layout: "constrained"` attribute because that attribute
 *   was interfering with the column's block appender, leaving editors
 *   no visible way to drop new blocks below the inserted content.
 *
 * Sidebar on mobile
 *   `display: none` removes the second column from the layout AND the
 *   accessibility tree. Per the design intent ("sidebar disappears on
 *   mobile") — if mobile screen-reader access to the sidebar links
 *   matters later, swap to a visually-hidden pattern.
 */

/* Default (below lg): single column, sidebar hidden. */
.lfbc-2col.wp-block-columns {
	flex-wrap: wrap;
	gap: 0;
}

.lfbc-2col.wp-block-columns > .wp-block-column {
	flex-basis: 100%;
	width: 100%;
}

.lfbc-2col.wp-block-columns > .lfbc-2col__aside {
	display: none;
}

/* Contain any alignfull descendant of the main column. */
.lfbc-2col__main .alignfull {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	width: 100%;
}

/* Make any block dropped directly into a column fill the column's
   width — zero out the outer auto-margin and any standalone max-width
   the block applies for centered viewport-cap layouts (e.g.
   `.lfbc-rich-content` caps at 900px and centers itself with
   `margin-inline: auto`). Inside a column we want flush-left, full-
   width. Padding is left alone so cards that use their outer wrapper
   for content padding (rich-content) keep their insets intact.

   Direct-child only (`>`) so we don't break nested wrappers like
   `.lfbc-grant-callout__card`.

   Specificity 0,3,2 beats pattern-specific rules like
   `.lfbc-rich-content.wp-block-group` (0,2,0). */
.lfbc-2col > .wp-block-column > section.wp-block-group,
.lfbc-2col > .wp-block-column > div.wp-block-group {
	margin-inline: 0;
	max-width: none;
}

/* Grant Callout exception: its outer `.lfbc-grant-callout` is purely
   edge padding (24px sides) for standalone full-bleed use — there's
   a separate inner `__card` that owns the content padding. Inside a
   column the outer padding is redundant. Other patterns whose outer
   wrapper IS the card (rich-content, post-sidebar) keep their
   padding. */
.lfbc-2col .lfbc-grant-callout.wp-block-group {
	padding-inline: 0;
}

@media (min-width: 1024px) {

	.lfbc-2col.wp-block-columns {
		flex-wrap: nowrap;
		gap: 40px;
	}

	.lfbc-2col.wp-block-columns > .lfbc-2col__main {
		flex: 1 1 0;
		min-width: 0;
		max-width: 1024px;
		width: auto;
	}

	.lfbc-2col.wp-block-columns > .lfbc-2col__aside {
		display: block;
		flex: 0 0 296px;
		width: 296px;
		max-width: 296px;
	}

	/* Sticky "In this section" sidebar — follows the page as the main
	   column scrolls.

	   Sticky MUST sit on the post-sidebar group, not the TOC block inside
	   it: a sticky element travels only within its containing block (its
	   parent). The TOC's parent (.lfbc-post-sidebar) is only as tall as the
	   TOC itself → no room to travel. The post-sidebar's parent is the
	   aside column, which stretches to the row's full height under flexbox
	   (align-items: stretch by default) → that's the room sticky needs.

	   top clears the sticky header. The header (header.css) auto-hides on
	   scroll-down — the direction you read in — so while scrolling down the
	   sidebar sits near the top; on scroll-up the header reappears above it.
	   The offset = admin-bar height (matches the header's own top) + a gap
	   approximating the header so the panel isn't tucked under it when both
	   are visible. */
	.lfbc-2col__aside > .lfbc-post-sidebar {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 6rem);
	}
}