/* =========================================================================
   Container shortcode — kw_container
   ========================================================================= */

.kw-container {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
}

/* ── Grid mode ─────────────────────────────────────────────────────────── */
.kw-container--grid {
	display: grid;
}

/* ── Border radius ─────────────────────────────────────────────────────── */
.kw-container.has-border-radius {
	overflow: hidden;
}

/* ── Background image (real <img> behind content) ─────────────────────── */
.kw-container.has-bg-image {
	isolation: isolate;
	overflow: hidden;
}

.kw-container > .kw-container__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: -1;
	pointer-events: none;
	user-select: none;
}

.kw-container > .kw-container__bg-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	display: block;
}

/* ── Boxed mode ────────────────────────────────────────────────────────── */
/* The wrapper also carries Flatsome's `.container-width` class when boxed
   (see kw_container() PHP render), so max-width + auto-margin + width:100%
   come straight from Flatsome's base rules and the Customizer `site_width`
   line (function-custom-css.php). Unlike .row, .container-width is NOT
   subject to Flatsome's nested-collapse rule, so nesting doesn't shrink it.
   No rule needed here. */

/* ── Border support (reuses Flatsome's .is-border pattern) ─────────── */
.kw-container > .is-border {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-style: solid;
	border-width: 0;
	pointer-events: none;
	z-index: 1;
}

.kw-container > .is-border.is-dashed {
	border-style: dashed;
}

.kw-container > .is-border.is-dotted {
	border-style: dotted;
}

/* ── Nested container as flex child ─────────────────────────────────── */
.kw-container .kw-container {
	flex-shrink: 1;    /* shrink to accommodate parent gap */
	flex-grow: 0;      /* don't grow beyond flex-basis */
	min-width: 0;      /* allow shrinking below content size */
}

/* ── Empty container placeholder (UX Builder only) ─────────────────── */
.ux-builder-preview .kw-container:empty::after,
.ux-builder-preview .kw-container:not(:has(> :not(style):not(.is-border)))::after {
	content: '+';
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	width: 100%;
	color: #aaa;
	font-size: 24px;
	border: 2px dashed #ddd;
	border-radius: 4px;
}