/* =========================================================================
   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;
	/* Fallback layout when no explicit grid-template-columns is set (e.g.
	   in the UX Builder live preview, which can't run the PHP child-width
	   scanner). Auto-fits ≥120px tracks — small enough that 4 children
	   typically fit even in narrower preview iframes — and explicit per-id
	   rules from ux_builder_element_style_tag() override this via the
	   higher specificity of #id over .class. */
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

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

/* ── Background image (real <img> behind content) ─────────────────────── */
.kw-container.has-bg-image,
.kw-container.has-bg-video {
	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;
}

/* ── Background video ──────────────────────────────────────────────────── */
/* Self-hosted <video class="kw-container__bg"> reuses the cover rules above.
   YouTube/Vimeo iframes can't object-fit, so the wrapper becomes a size
   container and the 16:9 iframe is scaled to cover it via cqw/cqh — the
   absolutely-positioned inset:0 wrapper has a definite size, which makes
   container-type:size safe here. */
.kw-container > .kw-container__bg-embed {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	container-type: size;
}

.kw-container > .kw-container__bg-embed > iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	/* Fallback for browsers without container queries: plain fill. */
	width: 100%;
	height: 100%;
	width: max(100cqw, calc(100cqh * 16 / 9));
	height: max(100cqh, calc(100cqw * 9 / 16));
}

/* UX Builder preview placeholder for YouTube/Vimeo backgrounds (iframes
   can't render in the AngularJS template — $sce blocks interpolated src). */
.kw-container > .kw-container__bg--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #222;
	color: #bbb;
	font-size: 13px;
	text-align: center;
	padding: 10px;
}

/* ── 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;
}

/* ── Stretched link overlay ─────────────────────────────────────────
   When a Link is set the wrapper stays a <div> (never an <a> — that would
   wrap block children and get mangled by wpautop) and this absolutely-
   positioned anchor covers the whole container, making it clickable. Any
   real interactive child (link/button/field) is raised above the overlay
   so it stays usable.

   Layering (low → high):
     -1  bg image / video / overlay
    auto plain content (text, icons, child containers) — positioned but with
         z-index:auto so it paints BELOW the positive-z-index link AND forms
         no stacking context (so interactive descendants can escape above it)
      1  the link overlay — paints above plain content, capturing every
         click across the whole container (text + icon included)
      2  decorative .is-border (pointer-events:none, so it never eats clicks)
      3  genuinely interactive descendants (raised back above the link) */
.kw-container.has-link > .kw-container__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	font-size: 0;
}

.kw-container.has-link > .is-border {
	z-index: 2;
}

/* Plain content stays positioned but at z-index:auto — painted BELOW the
   positive-z-index link overlay, so clicking the text or icon activates the
   link. Raising it above the overlay (the previous z-index:2) is what made the
   text and icon swallow clicks, leaving only the empty gaps clickable. Equally
   important: z-index:auto (not 0) means plain content forms NO stacking
   context, so a genuinely interactive descendant (the z-index:3 rule below)
   can still escape above the link and stay usable. */
.kw-container.has-link > :not(.kw-container__link):not(.kw-container__bg):not(.kw-container__bg-overlay):not(.is-border) {
	position: relative;
}

.kw-container.has-link a:not(.kw-container__link),
.kw-container.has-link button,
.kw-container.has-link input,
.kw-container.has-link select,
.kw-container.has-link textarea,
.kw-container.has-link [tabindex]:not(.kw-container__link) {
	position: relative;
	z-index: 3;
}

/* ── 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 var(--kw-line);
	border-radius: 4px;
}

/* Sticky container — stays put while its sibling scrolls. The offset comes
   from the Sticky top option, emitted as a scoped `top` rule.

   Desktop only. A sticky column is a two-column device: once the parent
   stacks, there is no sibling to scroll past, so pinning just drags the
   element down the page over the content below it.

   `align-self: flex-start` is scoped here too — in a column parent that is
   the CROSS axis, so it would shrink the container to its content width
   instead of filling the row. */
@media (min-width: 850px) {
	.kw-container.is-sticky {
		position: -webkit-sticky;
		position: sticky;
		align-self: flex-start;
	}
}

/* Elevation — one scale, shared with the rest of the theme. A white card on a
   near-white page needs a shadow to read as its own surface; a border would
   draw the eye to the edge instead. */
.kw-container--shadow-sm { box-shadow: var(--kw-shadow-card, 0 4px 10px rgba(0, 0, 0, .04)); }
.kw-container--shadow-md { box-shadow: var(--kw-shadow-raised, 0 8px 24px rgba(0, 0, 0, .08)); }
.kw-container--shadow-lg { box-shadow: 0 16px 40px rgba(0, 0, 0, .12); }

/* Align Items = Start / Center / End means "size children to their content on
   the cross axis". The base `width: 100%` would stop a child container ever
   doing that, so it is released here — only for direct children, and only when
   the editor actually chose one of those alignments. */
.kw-container--align-shrink > .kw-container {
	width: auto;
}