/**
 * CXI Right Sidebar Layout
 *
 * Astra's .ast-container already uses display:flex so #secondary (Astra's left
 * sidebar), #primary, and our new #cxi-right-sidebar are all natural flex
 * siblings. This file adjusts their widths when the right sidebar is present and
 * handles responsive stacking.
 */

/* -----------------------------------------------------------------------
 * When the right sidebar is present, keep all three columns on one row
 * and align them to the top so short sidebars don't stretch vertically.
 * ----------------------------------------------------------------------- */
body.cxi-has-right-sidebar .ast-container {
	align-items: flex-start;
}

/* -----------------------------------------------------------------------
 * Right sidebar column
 * ----------------------------------------------------------------------- */
#cxi-right-sidebar {
	width: 250px;
	min-width: 220px;
	flex-shrink: 0;
	padding: 20px 15px;
	box-sizing: border-box;
	word-wrap: break-word;
}

/* -----------------------------------------------------------------------
 * When Astra already set #primary to fill the remaining width (flex:1 or
 * a percentage), reduce it so the right sidebar has room.
 * Only applied when the right sidebar is present.
 * ----------------------------------------------------------------------- */
body.cxi-has-right-sidebar #primary {
	min-width: 0; /* prevents flex blowout on narrow viewports */
	flex: 1 1 auto;
}

/* -----------------------------------------------------------------------
 * Inner wrapper – lets the sidebar content scroll independently if needed
 * ----------------------------------------------------------------------- */
.cxi-right-sidebar-inner {
	width: 100%;
}

/* -----------------------------------------------------------------------
 * Sidebar images: subtle border + rounded corners
 * ----------------------------------------------------------------------- */
#cxi-right-sidebar img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #ddd;
	border-radius: 4px;
}

/* -----------------------------------------------------------------------
 * Responsive: stack right sidebar below main content on tablets / mobiles
 * ----------------------------------------------------------------------- */
@media (max-width: 921px) {
	#cxi-right-sidebar {
		width: 100%;
		min-width: unset;
		order: 10; /* push to bottom when flex wraps */
		padding: 20px 0;
	}

	body.cxi-has-right-sidebar .ast-container {
		flex-wrap: wrap;
	}
}