/**
 * Widget Layout Styles
 *
 * Provides CSS for Column and Row layout options within Content Areas.
 * Enables flexible widget arrangement with vertical (column) or horizontal (row) layouts.
 *
 * @package Community Pro
 * @since   2.6.0
 */

/* ==========================================================================
	Column Layout - Vertical Stacking
	========================================================================== */

/**
 * Column Layout Container
 * Widgets stack vertically with consistent spacing
 */
.widget-layout-column {
	display: block;
	width: 100%;
	margin-bottom: var(--community-spacing-2xl, 40px);
}

.widget-layout-column > * {
	display: block;
	width: 100%;
	margin-bottom: var(--community-spacing-xl, 32px);
}

.widget-layout-column > *:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
	Row Layout - Horizontal Flexbox
	========================================================================== */

/**
 * Row Layout Container
 * Widgets display side by side using flexbox with gap spacing
 */
.widget-layout-row {
	display: flex;
	gap: var(--community-spacing-lg, 24px);
	max-width: 1400px;
	margin: 0 auto;
}

/**
 * Row Layout Widgets
 * Equal width distribution - widgets automatically share space equally
 * 2 widgets = 50% each, 3 widgets = 33.33% each, etc.
 */
.widget-layout-row > * {
	flex: 1 1 0%;     /* Equal width distribution based on widget count */
	min-width: 0;     /* Allow flexible shrinking without forced wrapping */
}

/* Remove gap when containing the-latest-left for seamless card join */
.widget-layout-row:has(.the-latest-left) {
	gap: 0;
}

/* Remove default margin from widget layout column children */
.widget-layout-column > * {
	margin-bottom: 0 !important;
}

section.homepage-membership.animated .widget-layout-column {
	margin-bottom: 0 !important;
}

/* ==========================================================================
	Combined Layout Sections
	========================================================================== */

/**
 * When both column and row layouts exist in the same section,
 * ensure proper spacing between them
 */
.widget-layout-column + .widget-layout-row,
.widget-layout-row + .widget-layout-column {
	margin-top: var(--community-spacing-2xl, 40px);
}

/* Responsive styles moved to assets/css/global/responsive/ */

/* ==========================================================================
	Widget Appearance Overrides
	========================================================================== */

/**
 * Remove default flexible-widgets styling conflicts
 * These layouts use their own flex/grid systems
 */
.widget-layout-column > *,
.widget-layout-row > * {
	float: none !important;
	clear: none !important;
}

/**
 * Ensure widgets don't inherit conflicting widths from flexible-widgets
 */
.widget-layout-row > * {
	max-width: none;
}

/* ==========================================================================
	Accessibility & Print
	========================================================================== */

/**
 * Print styles - linearize all layouts
 */
@media print {
	.widget-layout-column,
	.widget-layout-row {
		display: block;
	}

	.widget-layout-row > * {
		display: block;
		width: 100%;
		margin-bottom: 1em;
	}
}

/* ==========================================================================
	Hero Section Layout Override
	========================================================================== */

/**
 * Override hero section flex centering to allow widget layouts full control
 * Without this, the hero .wrap container's display:flex centers all content
 */
.community-pro-homepage .homepage-hero .wrap {
	display: block !important;
	text-align: left;
}