/* The block group already carries `layout.type:flex` which makes the WordPress
 * block-layout system emit `display:flex` / `flex-wrap:nowrap` /
 * `justify-content:space-between`. Restating them is defensive (decouples us
 * from block-layout CSS being present); the operative net-new rule is
 * `align-items: center`, which centers `results-count` against the controls
 * cluster. */
.jetpack-search-layout__results-header {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
/* Right-side controls cluster: sort + filters-popover trigger. Without this
 * the three `__results-header` children get spread evenly by the parent's
 * `space-between`; nesting sort + popover here pins them as one block on the
 * trailing edge. */
.jetpack-search-layout__results-header-controls {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.75rem;
}
/* Name the columns row as the layout container so the sidebar/popover flip
 * tracks its inline-size. The `@media` rules below are the universal base —
 * they fire in every browser (including legacy ones without container-query
 * support) and they drive standalone usage outside the named container (no
 * container ancestor → only `@media` applies). The `@container` rule further
 * down overrides `@media` via source-order cascade at equal specificity when
 * the named container is in scope AND narrower than 992px. The override has
 * to undo `@media (min-width: 992px)`'s `popover { display: none }`
 * explicitly: in the "wide viewport, narrow container" case `@media
 * (min-width: 992px)` keeps firing on the viewport width and would otherwise
 * leave the visitor with no filter UI at all. `@container (min-width: 992px)`
 * isn't defined — container width is bounded by viewport width in practice,
 * so the matching `@media (min-width: 992px)` already covers the wide case. */
.wp-block-columns:has(> .jetpack-search-layout__filters-column) {
	container-type: inline-size;
	container-name: jetpack-search-layout;
}
/* Below 992px the right-column filter sidebar collapses to a popover trigger
 * docked next to results-sort. The trigger comes from the
 * `jetpack-search/filters-popover` block that ships in each template. The
 * selector is scoped to the named outer column so nested `wp-block-column`s
 * inside result-card templates aren't affected. */
@media (max-width: 991.98px) {
	.jetpack-search-layout__filters-column {
		display: none;
	}
	/* `!important` defends against the parent `wp:columns` block-layout CSS
	 * that pins `.wp-block-column` to its inline `flex-basis` (or to an even
	 * split when no width is set). Once the filter column is `display:none`,
	 * the results column has to be able to claim the full row at any
	 * specificity. */
	.jetpack-search-layout__results-column {
		flex-basis: 100% !important;
	}
}
/* Sidebar left divider tracks `currentColor` so the hairline stays subtle on
 * light themes and visible on dark themes, matching the search-input
 * underline. We only set color; each template's column block sets
 * `border-left-width: 1px` inline. Fallback to `transparent` so themes/UAs
 * without `color-mix` support get an invisible divider rather than a hard
 * grey rule. */
.jetpack-search-layout__filters-column {
	border-left-color: transparent;
}
@supports (border-color: color-mix(in sRGB, black 50%, white)) {
	.jetpack-search-layout__filters-column {
		border-left-color: color-mix(in sRGB, currentColor 15%, transparent);
	}
}
/* Sidebar-showing rules (>= 992px). The corner-join is structural: the
 * columns row is pulled flush to the search-input hairline and breathing
 * room re-added as internal column padding, so the filters column's
 * `border-left` runs the row's full height — hairline (top) to end-of-div
 * (bottom). Three vertical gaps are neutralised:
 *
 *   a) `margin-block-start` on the row (outer group's `spacing.blockGap` or
 *      the theme's default block-gap) — zeroed.
 *
 *   b) `.is-layout-flex { align-items: center }` (theme/core default), which
 *      centres the shorter filters column and drops its top edge. Overridden
 *      to `stretch` (not `flex-start`) so the column also grows to full row
 *      height; it's flow layout, so its content stays top-aligned regardless.
 *
 *   c) Overlay-only: SEARCH-243's content-group inset sits outside the
 *      columns, so the stretched column stops short of the card edges (below
 *      the `::before` hairline at the top, and short of the bottom). Zeroed
 *      on the group's block axis and re-added on the columns, both sides
 *      reading the same `--jp-search-overlay-content-pad-*` tokens the group
 *      itself uses — so the divider reaches both edges while content keeps
 *      its breathing room, and the two sites can't drift.
 *
 * `.is-layout-flex` bumps the columns selector to (0,3,0) to outrank
 * per-container `blockGap` CSS; `:has(> filters-column)` scopes it to our
 * rows. These target the row/group, which `@container` can't reach from
 * inside the named container, so they stay viewport-driven — harmless when
 * the sidebar collapses below 992px. (b) is also a no-op wherever WP core's
 * `.wp-block-columns { align-items: normal !important }` is present; see
 * AGENTS.md. */
@media (min-width: 992px) {
	/* Sidebar shown, popover-in-results-header hidden. The `@container
	 * (max-width: 991.98px)` block below re-shows the popover when the
	 * named container is narrower than the viewport. */
	.jetpack-search-layout__results-header .jetpack-search-filters-popover {
		display: none;
	}
	.wp-block-columns.is-layout-flex:has(> .jetpack-search-layout__filters-column) {
		align-items: stretch;
		margin-block-start: 0;
	}
	.jetpack-search-block-overlay__content > .wp-block-group:first-child:has(.jetpack-search-layout__filters-column) {
		padding-top: 0;
		padding-bottom: 0;
	}
	.wp-block-columns:has(> .jetpack-search-layout__filters-column) > .wp-block-column {
		padding-top: var(--jp-search-overlay-content-pad-block-start, 0.5em);
	}
	.jetpack-search-block-overlay__content .wp-block-columns:has(> .jetpack-search-layout__filters-column) > .wp-block-column {
		padding-bottom: var(--jp-search-overlay-content-pad-block-end, 2em);
	}
}
/* @container override: applies when the named container exists. Placed AFTER
 * the `@media` rules so source-order cascade lets it win over them at equal
 * specificity. In "wide viewport, narrow container" (the case the change is
 * meant to fix), `@media (max-width: 991.98px)` doesn't fire but `@media
 * (min-width: 992px)` does — this block undoes the latter's `popover {
 * display: none }` via `display: inline-block` and hides the sidebar that
 * the `@media (max-width)` rule wouldn't have hidden at this viewport. Same
 * `!important` reasoning on `flex-basis: 100%` as the @media block. */
@container jetpack-search-layout (max-width: 991.98px) {
	.jetpack-search-layout__filters-column {
		display: none;
	}
	.jetpack-search-layout__results-column {
		flex-basis: 100% !important;
	}
	.jetpack-search-layout__results-header .jetpack-search-filters-popover {
		display: inline-block;
	}
}