/*
 * News Element Container block — base stylesheet.
 *
 * A port of Elementor's `.e-con` model (assets/css/frontend.css, 4.1.4):
 * every knob is a CSS custom property with a default here, and the per-instance
 * CSS the block generates only overrides those properties on
 * `.ne-econ.ne-econ-{id}`.
 *
 *   .e-con          -> .ne-econ
 *   .e-flex/.e-grid -> .ne-econ--flex / .ne-econ--grid
 *   .e-con-boxed    -> .ne-econ--boxed   .e-con-full -> .ne-econ--full
 *   .e-con-inner    -> .ne-econ-inner
 *   .e-parent/child -> .ne-econ--parent / .ne-econ--child
 *   .e-transform    -> .ne-econ--transform
 *
 * Site defaults come from :root (set by the plugin): --ne-container-max-width,
 * --ne-container-padding, --ne-widgets-spacing.
 */

.ne-econ {
	--border-radius: 0;
	--border-top-width: 0px;
	--border-right-width: 0px;
	--border-bottom-width: 0px;
	--border-left-width: 0px;
	--border-style: initial;
	--border-color: initial;
	--container-widget-width: 100%;
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--content-width: min(100%, var(--ne-container-max-width, 1140px));
	--width: 100%;
	--min-height: initial;
	--height: auto;
	--text-align: initial;
	--margin-top: 0px;
	--margin-right: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	--padding-top: var(--ne-container-padding, 10px);
	--padding-right: var(--ne-container-padding, 10px);
	--padding-bottom: var(--ne-container-padding, 10px);
	--padding-left: var(--ne-container-padding, 10px);
	--position: relative;
	--z-index: revert;
	--overflow: visible;
	--display: flex;
	--gap: var(--ne-widgets-spacing, 20px);
	--row-gap: var(--ne-widgets-spacing, 20px);
	--column-gap: var(--ne-widgets-spacing, 20px);
	--overlay-mix-blend-mode: initial;
	--overlay-opacity: 1;
	--overlay-transition: 0.3s;
	--ne-grid-template-columns: repeat(3, 1fr);
	--ne-grid-template-rows: repeat(2, 1fr);
	--flex-direction: initial;
	--flex-wrap: initial;
	--justify-content: initial;
	--align-items: initial;
	--align-content: initial;
	--flex-basis: initial;
	--flex-grow: initial;
	--flex-shrink: initial;
	--order: initial;
	--align-self: initial;
	--flex-wrap-mobile: wrap;

	/* physical -> logical (flipped for RTL below) */
	--margin-block-start: var(--margin-top);
	--margin-block-end: var(--margin-bottom);
	--margin-inline-start: var(--margin-left);
	--margin-inline-end: var(--margin-right);
	--padding-inline-start: var(--padding-left);
	--padding-inline-end: var(--padding-right);
	--padding-block-start: var(--padding-top);
	--padding-block-end: var(--padding-bottom);
	--border-block-start-width: var(--border-top-width);
	--border-block-end-width: var(--border-bottom-width);
	--border-inline-start-width: var(--border-left-width);
	--border-inline-end-width: var(--border-right-width);

	box-sizing: border-box;
	isolation: isolate; /* keeps the z-index:-1 overlay and shapes above the container's own background */
	position: var(--position);
	width: var(--width);
	min-width: 0;
	min-height: var(--min-height);
	height: var(--height);
	border-radius: var(--border-radius);
	z-index: var(--z-index);
	overflow: var(--overflow);
	flex-basis: var(--flex-basis);
	flex-grow: var(--flex-grow);
	flex-shrink: var(--flex-shrink);
	order: var(--order);
	align-self: var(--align-self);
	margin-block-start: var(--margin-block-start);
	margin-inline-end: var(--margin-inline-end);
	margin-block-end: var(--margin-block-end);
	margin-inline-start: var(--margin-inline-start);
	padding-inline-start: var(--padding-inline-start);
	padding-inline-end: var(--padding-inline-end);
	transition:
		background var(--background-transition, 0.3s),
		border var(--border-transition, 0.3s),
		box-shadow var(--border-transition, 0.3s),
		transform var(--ne-transform-transition-duration, 0.4s);
}
.ne-econ *,
.ne-econ *::before,
.ne-econ *::after {
	box-sizing: border-box;
}
body.rtl .ne-econ {
	--padding-inline-start: var(--padding-right);
	--padding-inline-end: var(--padding-left);
	--margin-inline-start: var(--margin-right);
	--margin-inline-end: var(--margin-left);
	--border-inline-start-width: var(--border-right-width);
	--border-inline-end-width: var(--border-left-width);
}

/* Full Padding (block.php full_padding): the chosen side lines up with a boxed
   container of --full-pad-max-width, floored at the Padding control's value. */
.ne-econ--full-pad-left,
.ne-econ--full-pad-right {
	--full-pad: calc((100% - var(--full-pad-max-width, var(--ne-container-max-width, 1140px))) / 2);
}
.ne-econ.ne-econ--full-pad-left {
	--padding-inline-start: max(var(--padding-left), var(--full-pad));
}
.ne-econ.ne-econ--full-pad-right {
	--padding-inline-end: max(var(--padding-right), var(--full-pad));
}
body.rtl .ne-econ.ne-econ--full-pad-left {
	--padding-inline-start: var(--padding-right);
	--padding-inline-end: max(var(--padding-left), var(--full-pad));
}
body.rtl .ne-econ.ne-econ--full-pad-right {
	--padding-inline-start: max(var(--padding-right), var(--full-pad));
	--padding-inline-end: var(--padding-left);
}

/* Top-level containers centre themselves when narrower than their parent. */
.ne-econ--parent {
	--margin-left: auto;
	--margin-right: auto;
	max-width: min(100%, var(--width));
}

/* Link containers should not look like links. */
a.ne-econ,
a.ne-econ:hover,
a.ne-econ:focus {
	color: inherit;
	text-decoration: none;
}

/* ---- Flex ------------------------------------------------------------- */
.ne-econ--flex {
	--flex-direction: column;
	--flex-basis: auto;
	--flex-grow: 0;
	--flex-shrink: 1;
	flex: var(--flex-grow) var(--flex-shrink) var(--flex-basis);
}
.ne-econ,
.ne-econ > .ne-econ-inner {
	display: var(--display);
}
.ne-econ--full,
.ne-econ > .ne-econ-inner {
	text-align: var(--text-align);
	padding-block-start: var(--padding-block-start);
	padding-block-end: var(--padding-block-end);
	gap: var(--row-gap) var(--column-gap);
}
.ne-econ--full.ne-econ--flex,
.ne-econ--flex > .ne-econ-inner {
	flex-direction: var(--flex-direction);
	flex-wrap: var(--flex-wrap);
	justify-content: var(--justify-content);
	align-items: var(--align-items);
	align-content: var(--align-content);
}

/* ---- Grid ------------------------------------------------------------- */
.ne-econ--grid {
	--grid-justify-content: start;
	--grid-align-content: start;
	--grid-auto-flow: row;
}
.ne-econ--full.ne-econ--grid,
.ne-econ--grid > .ne-econ-inner {
	grid-template-columns: var(--ne-grid-template-columns);
	grid-template-rows: var(--ne-grid-template-rows);
	justify-content: var(--grid-justify-content);
	align-content: var(--grid-align-content);
	grid-auto-flow: var(--grid-auto-flow);
	justify-items: var(--justify-items);
	align-items: var(--align-items);
}

/* ---- Boxed: the outer is a plain column, the inner holds the layout ---- */
.ne-econ--boxed.ne-econ--flex {
	flex-direction: column;
	flex-wrap: initial;
	justify-content: initial;
	align-items: initial;
	align-content: initial;
}
.ne-econ--boxed.ne-econ--grid {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-items: initial;
}
.ne-econ--boxed {
	text-align: initial;
	gap: initial;
}
.ne-econ--flex > .ne-econ-inner {
	flex-basis: initial;
	flex-grow: 1;
	flex-shrink: initial;
	align-self: initial;
}
.ne-econ > .ne-econ-inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--content-width);
	margin: 0 auto;
	padding-inline-start: 0;
	padding-inline-end: 0;
	height: 100%;
}

/* ---- Children: gap is the only spacing (as core flex layouts do) -------
 * Specificity (0,0,2) on purpose: the parent and the class exclusions are in
 * :where(), and each element :not() adds 0,0,1. That beats theme element rules
 * (p, h2: 0,0,1) but loses to a block's own Advanced > Margin ({{WRAPPER}},
 * 0,1,0) whatever the stylesheet order. (It used to be 0,1,0 and relied on
 * post-{id}.css loading after this file, which WordPress 6.9+ no longer
 * guarantees: it hoists on-demand block styles, so every block margin inside a
 * container was reset to 0.) */
:where(.ne-econ--full) > :where(:not(.ne-econ, .ne-shape)):not(style):not(script),
:where(.ne-econ > .ne-econ-inner) > :where(:not(.ne-econ, .ne-shape)):not(style):not(script) {
	margin: 0;
}
.ne-econ--full > *,
.ne-econ > .ne-econ-inner > * {
	min-width: 0;
	max-width: 100%;
}

/* ---- Background overlay (::before exists only while --background-overlay is set) */
.ne-econ::before {
	content: var(--background-overlay);
	display: block;
	position: absolute;
	z-index: -1; /* under the content, over the background: the block sets isolation: isolate alongside */
	pointer-events: none;
	mix-blend-mode: var(--overlay-mix-blend-mode);
	opacity: var(--overlay-opacity);
	transition:
		background var(--overlay-transition, 0.3s),
		border-radius var(--border-transition, 0.3s),
		opacity var(--overlay-transition, 0.3s);
	border-radius: var(--border-radius);
	border-style: var(--border-style);
	border-color: var(--border-color);
	border-block-start-width: var(--border-block-start-width);
	border-inline-end-width: var(--border-inline-end-width);
	border-block-end-width: var(--border-block-end-width);
	border-inline-start-width: var(--border-inline-start-width);
	top: calc(0px - var(--border-top-width));
	left: calc(0px - var(--border-left-width));
	width: max(100% + var(--border-left-width) + var(--border-right-width), 100%);
	height: max(100% + var(--border-top-width) + var(--border-bottom-width), 100%);
}

/* ---- Shape dividers (Elementor conditionals/shapes.css) ----------------- */
.ne-shape {
	overflow: hidden;
	position: absolute;
	left: 0;
	width: 100%;
	line-height: 0;
	direction: ltr;
	z-index: -1; /* over the background, under the content (container is isolated) */
	pointer-events: none;
}
.ne-shape-top {
	top: -1px;
}
.ne-shape-top:not([data-negative="false"]) svg {
	z-index: -1;
}
.ne-shape-bottom {
	bottom: -1px;
}
.ne-shape-bottom:not([data-negative="true"]) svg {
	z-index: -1;
}
.ne-shape[data-negative="false"].ne-shape-bottom {
	transform: rotate(180deg);
}
.ne-shape[data-negative="true"].ne-shape-top {
	transform: rotate(180deg);
}
.ne-shape svg {
	display: block;
	width: calc(100% + 1.3px);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.ne-shape .ne-shape-fill {
	fill: #fff;
	transform-origin: center;
	transform: rotateY(0deg);
}

/* ---- Transform ---------------------------------------------------------- */
.ne-econ--transform {
	transform:
		perspective(var(--ne-transform-perspective, 0))
		rotateZ(var(--ne-transform-rotateZ, 0))
		rotateX(var(--ne-transform-rotateX, 0))
		rotateY(var(--ne-transform-rotateY, 0))
		translateX(var(--ne-transform-translateX, 0))
		translateY(var(--ne-transform-translateY, 0))
		scaleX(calc(var(--ne-transform-flipX, 1) * var(--ne-transform-scaleX, var(--ne-transform-scale, 1))))
		scaleY(calc(var(--ne-transform-flipY, 1) * var(--ne-transform-scaleY, var(--ne-transform-scale, 1))))
		skewX(var(--ne-transform-skewX, 0))
		skewY(var(--ne-transform-skewY, 0));
	transform-origin: var(--ne-transform-origin-y, center) var(--ne-transform-origin-x, center);
}

/* ---- Entrance animation: hidden until frontend.js reveals it ------------ */
.ne-econ--invisible {
	visibility: hidden;
}
.ne-animated {
	animation-duration: 1.25s;
	animation-fill-mode: backwards; /* do not pin transform:none over the Transform section */
}
.ne-animated.ne-animated-slow {
	animation-duration: 2s;
}
.ne-animated.ne-animated-fast {
	animation-duration: 0.75s;
}
@media (prefers-reduced-motion: reduce) {
	.ne-animated {
		animation: none !important;
	}
	.ne-econ--invisible {
		visibility: visible;
	}
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 767px) {
	.ne-econ--flex {
		--width: 100%;
		--flex-wrap: var(--flex-wrap-mobile);
	}
}
@media (min-width: 1025px) {
	.ne-hidden-desktop {
		display: none !important;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.ne-hidden-tablet {
		display: none !important;
	}
}
@media (max-width: 767px) {
	.ne-hidden-mobile {
		display: none !important;
	}
}

/* ---- Background video / slideshow (under overlay and shapes, over the colour)
 * The markup and base styles are the framework's .ne-bg-video
 * (assets/frontend.css); inside a container it sits below the overlay. */
.ne-econ > .ne-bg-video,
.ne-econ > .ne-bg-slideshow {
	z-index: -2;
	border-radius: var(--border-radius);
}

/* ---- Sticky (Advanced › Motion Effects) ---------------------------------
 * position: sticky; top: <Top>. The container sticks while its parent
 * scrolls past, so in a row it must not stretch to the row's height:
 * align-self defaults to flex-start. Align Self, Z-Index and Position set on
 * the container itself still win (they live on .ne-econ.ne-econ-{id}).
 * Logged-in users get the admin bar's height added, like core's sticky
 * position support (0px for visitors, and on phones where the bar scrolls
 * away). z-index 1 keeps it above content that scrolls past it. */
.ne-econ--sticky-yes {
	--position: sticky;
	--align-self: flex-start;
	--z-index: 1;
	--ne-sticky-admin-bar: var(--wp-admin--admin-bar--height, 0px);
	top: calc(var(--ne-sticky-top, 0px) + var(--ne-sticky-admin-bar));
}
@media screen and (max-width: 600px) {
	.ne-econ--sticky-yes {
		--ne-sticky-admin-bar: 0px;
	}
}
/* Disable On (Motion Effects › Sticky): back to the normal flow. */
@media (max-width: 1024px) {
	.ne-econ--sticky-yes.ne-econ--sticky-off-tablet {
		--position: relative;
		--align-self: initial;
		--z-index: revert;
		top: auto;
	}
}
@media (max-width: 767px) {
	.ne-econ--sticky-yes.ne-econ--sticky-off-mobile {
		--position: relative;
		--align-self: initial;
		--z-index: revert;
		top: auto;
	}
}

/* ---- Horizontal scroll (Layout › Horizontal Scroll) ---------------------
 * render_block() prints  .ne-hs > [.ne-econ--hscroll-yes stage] + .ne-hs-space.
 * The stage sticks while .ne-hs scrolls past; the spacer's height is the
 * page scroll the slide takes (--ne-hs-len, from hscroll.js). Each
 * container directly inside the stage is a track: one nowrap row that moves
 * left by its own overflow (--ne-hs-x). Browsers with scroll-driven
 * animations run it on the compositor; hscroll.js covers the rest. Front end
 * only: the editor never gets the .ne-hs wrapper. */
.ne-hs {
	--ne-hs-on: 1;
	display: flow-root;
	view-timeline: --ne-hs block;
}
/* While pinned the stage fills the screen below the pin, so no empty band
 * opens under it and nothing has to slide up into that space. render_block()
 * adds a --center-* class saying how to centre the content in that height:
 * boxed (centre the inner), main (column) or cross (row), and only when the
 * container's own alignment is left at Default. A larger Min Height wins. */
.ne-hs > .ne-econ {
	--ne-hs-admin-bar: var(--wp-admin--admin-bar--height, 0px);
	--ne-hs-base: calc(var(--ne-hs-top, 0px) + var(--ne-hs-admin-bar));
	position: sticky;
	top: var(--ne-hs-pin, var(--ne-hs-base));
	z-index: 1;
	overflow-x: clip;
	min-height: max(var(--min-height, 0px), calc(100vh - var(--ne-hs-base)));
	min-height: max(var(--min-height, 0px), calc(100svh - var(--ne-hs-base)));
}
.ne-hs--center-boxed > .ne-econ,
.ne-hs--center-main > .ne-econ {
	justify-content: center;
}
.ne-hs--center-boxed > .ne-econ > .ne-econ-inner {
	flex-grow: 0;
	height: auto;
}
.ne-hs--center-cross > .ne-econ {
	align-items: center;
}
.ne-hs > .ne-hs-space {
	height: var(--ne-hs-len, 0px);
	pointer-events: none;
}
.ne-hs > .ne-econ > .ne-econ,
.ne-hs > .ne-econ > .ne-econ-inner > .ne-econ {
	flex-wrap: nowrap;
	will-change: transform;
}
.ne-hs > .ne-econ > .ne-econ > *,
.ne-hs > .ne-econ > .ne-econ-inner > .ne-econ > * {
	flex-shrink: 0;
}
@supports (animation-timeline: view()) {
	.ne-hs > .ne-econ > .ne-econ,
	.ne-hs > .ne-econ > .ne-econ-inner > .ne-econ {
		animation: ne-hs-slide linear both;
		animation-timeline: --ne-hs;
		animation-range: exit-crossing calc(var(--ne-hs-pin, 0px) * -1) exit-crossing calc(var(--ne-hs-len, 0px) - var(--ne-hs-pin, 0px));
	}
}
@keyframes ne-hs-slide {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(calc(var(--ne-hs-x, 0px) * -1), 0, 0);
	}
}
@media screen and (max-width: 600px) {
	.ne-hs > .ne-econ {
		--ne-hs-admin-bar: 0px;
	}
}

/* Disable On (Layout › Horizontal Scroll) and reduced motion: no pin, no
 * slide. The stage and its tracks go back to the container's own layout
 * (wrap, shrink, position), so on phones a row stacks at full width as any
 * container does. hscroll.js reads --ne-hs-on and clears its values. */
@media (max-width: 1024px) {
	.ne-hs.ne-hs--off-tablet {
		--ne-hs-on: 0;
	}
	.ne-hs--off-tablet > .ne-econ {
		position: var(--position);
		top: auto;
		z-index: var(--z-index);
		overflow-x: var(--overflow);
		min-height: var(--min-height);
	}
	.ne-hs--off-tablet.ne-hs--center-boxed > .ne-econ {
		justify-content: initial;
	}
	.ne-hs--off-tablet.ne-hs--center-boxed > .ne-econ > .ne-econ-inner {
		flex-grow: 1;
		height: 100%;
	}
	.ne-hs--off-tablet.ne-hs--center-main > .ne-econ {
		justify-content: var(--justify-content);
	}
	.ne-hs--off-tablet.ne-hs--center-cross > .ne-econ {
		align-items: var(--align-items);
	}
	.ne-hs--off-tablet > .ne-hs-space {
		display: none;
	}
	.ne-hs--off-tablet > .ne-econ > .ne-econ,
	.ne-hs--off-tablet > .ne-econ > .ne-econ-inner > .ne-econ {
		flex-wrap: var(--flex-wrap);
		animation: none;
		will-change: auto;
	}
	.ne-hs--off-tablet > .ne-econ > .ne-econ > *,
	.ne-hs--off-tablet > .ne-econ > .ne-econ-inner > .ne-econ > * {
		flex-shrink: 1;
	}
	.ne-hs--off-tablet > .ne-econ > .ne-econ > .ne-econ,
	.ne-hs--off-tablet > .ne-econ > .ne-econ-inner > .ne-econ > .ne-econ {
		flex-shrink: var(--flex-shrink);
	}
}
@media (max-width: 767px) {
	.ne-hs.ne-hs--off-mobile {
		--ne-hs-on: 0;
	}
	.ne-hs--off-mobile > .ne-econ {
		position: var(--position);
		top: auto;
		z-index: var(--z-index);
		overflow-x: var(--overflow);
		min-height: var(--min-height);
	}
	.ne-hs--off-mobile.ne-hs--center-boxed > .ne-econ {
		justify-content: initial;
	}
	.ne-hs--off-mobile.ne-hs--center-boxed > .ne-econ > .ne-econ-inner {
		flex-grow: 1;
		height: 100%;
	}
	.ne-hs--off-mobile.ne-hs--center-main > .ne-econ {
		justify-content: var(--justify-content);
	}
	.ne-hs--off-mobile.ne-hs--center-cross > .ne-econ {
		align-items: var(--align-items);
	}
	.ne-hs--off-mobile > .ne-hs-space {
		display: none;
	}
	.ne-hs--off-mobile > .ne-econ > .ne-econ,
	.ne-hs--off-mobile > .ne-econ > .ne-econ-inner > .ne-econ {
		flex-wrap: var(--flex-wrap);
		animation: none;
		will-change: auto;
	}
	.ne-hs--off-mobile > .ne-econ > .ne-econ > *,
	.ne-hs--off-mobile > .ne-econ > .ne-econ-inner > .ne-econ > * {
		flex-shrink: 1;
	}
	.ne-hs--off-mobile > .ne-econ > .ne-econ > .ne-econ,
	.ne-hs--off-mobile > .ne-econ > .ne-econ-inner > .ne-econ > .ne-econ {
		flex-shrink: var(--flex-shrink);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ne-hs.ne-hs {
		--ne-hs-on: 0;
	}
	.ne-hs > .ne-econ {
		position: var(--position);
		top: auto;
		z-index: var(--z-index);
		overflow-x: var(--overflow);
		min-height: var(--min-height);
	}
	.ne-hs.ne-hs--center-boxed > .ne-econ {
		justify-content: initial;
	}
	.ne-hs.ne-hs--center-boxed > .ne-econ > .ne-econ-inner {
		flex-grow: 1;
		height: 100%;
	}
	.ne-hs.ne-hs--center-main > .ne-econ {
		justify-content: var(--justify-content);
	}
	.ne-hs.ne-hs--center-cross > .ne-econ {
		align-items: var(--align-items);
	}
	.ne-hs > .ne-hs-space {
		display: none;
	}
	.ne-hs > .ne-econ > .ne-econ,
	.ne-hs > .ne-econ > .ne-econ-inner > .ne-econ {
		flex-wrap: var(--flex-wrap);
		animation: none;
		will-change: auto;
	}
	.ne-hs > .ne-econ > .ne-econ > *,
	.ne-hs > .ne-econ > .ne-econ-inner > .ne-econ > * {
		flex-shrink: 1;
	}
	.ne-hs > .ne-econ > .ne-econ > .ne-econ,
	.ne-hs > .ne-econ > .ne-econ-inner > .ne-econ > .ne-econ {
		flex-shrink: var(--flex-shrink);
	}
}