/**
 * Elementor reconciliation.
 *
 * The design system separates sections with full-bleed colour bands, so the
 * Lionsgate widgets each emit their own `<section class="band-…"><div class="wrap">`.
 * Elementor's containers must therefore stay out of the way: full width, no
 * padding, no gap. Anything the client builds from *native* Elementor widgets
 * still gets the normal boxed 1232px measure.
 */

/* ---------------- Containers ---------------- */

/* A container holding a Lionsgate band must not constrain or pad it. */
.e-con.lg-band,
.elementor-section.lg-band > .elementor-container {
	max-width: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	--container-widget-width: 100%;
}

.e-con.lg-band > .e-con-inner {
	max-width: 100%;
	padding: 0;
}

/* Bands are already spaced by `section{padding:var(--sec-y) 0}`. */
.e-con.lg-band,
.e-con.lg-band > .e-con-inner {
	gap: 0;
}

.lg-band > .e-con-inner > .elementor-element,
.lg-band > .elementor-element {
	width: 100%;
	max-width: 100%;
}

/* A container carrying a band class becomes the band: the colour runs edge to
   edge, the content stays on the 1232px measure, and the vertical rhythm comes
   from the same `--sec-y` token the theme's own sections use. Elementor cannot
   store a clamp() in its padding control, so this lives here rather than in
   each page's saved settings. */
.e-con.band-deep,
.e-con.band-cream,
.e-con.band-white,
.e-con.cta-band,
.e-con.hero,
.e-con.hero-page {
	padding-block: var(--sec-y);
}

.e-con.sec-tight {
	padding-block: var(--sec-y-sm);
}

.e-con.band-deep > .e-con-inner,
.e-con.band-cream > .e-con-inner,
.e-con.band-white > .e-con-inner,
.e-con.cta-band > .e-con-inner,
.e-con.hero > .e-con-inner,
.e-con.hero-page > .e-con-inner {
	padding-inline: var(--gutter);
}

/* Boxed containers follow `.wrap`: 1232px with the same responsive gutter. */
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--max, 1232px);
}

.e-con.e-con-boxed > .e-con-inner,
.e-con:not(.lg-band) {
	--content-width: var(--max, 1232px);
}

/* ---------------- Widgets ---------------- */

/* A Lionsgate widget is a band; strip the wrapper's own box entirely. */
.elementor-widget-container:has(> .lg-w) {
	padding: 0 !important;
	margin: 0 !important;
}

.lg-w > section:first-child,
.lg-w > .strip:first-child,
.lg-w > .featured:first-child {
	margin-top: 0;
}

/* Native Elementor headings and text should pick up the design system rather
   than Elementor's defaults, unless the client has styled them explicitly. */
.elementor-widget-heading .elementor-heading-title {
	font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
	letter-spacing: -0.03em;
	line-height: 1.04;
}

.elementor-widget-text-editor {
	line-height: 1.65;
}

/* Elementor's button, wearing the pill. */
.elementor-button {
	font-family: 'Inter Tight', 'Inter', sans-serif;
	font-weight: 700;
	letter-spacing: -0.01em;
	border-radius: var(--pill, 999px);
}

/* Accordion and toggle widgets inside a deep band need light text. */
.band-deep .elementor-accordion .elementor-tab-title,
.band-deep .elementor-toggle .elementor-tab-title {
	color: #fff;
}

/* ---------------- Editor canvas ---------------- */

/* Elementor's editor adds a min-height to empty containers, which makes a
   band look taller than it ships. Only inside the editor, keep it honest. */
body.elementor-editor-active .e-con.lg-band {
	min-height: 0;
}

/* The editor's own overlay must sit above a deep band's stacking context. */
body.elementor-editor-active .lg-w section {
	position: relative;
	z-index: 0;
}

/* Sticky header and the editor's top bar both want the top of the viewport. */
body.elementor-editor-active header.site {
	position: static;
}