/**
 * Nexo Section Layout System.
 *
 * Integração visual entre Nexo Base e SiteOrigin Page Builder.
 * Controla rows/seções configuradas pelos campos Nexo em Row Styles.
 *
 * Responsabilidade deste arquivo:
 * - controlar background full width, largura visual, camada e sobreposição;
 * - permitir deslocamento livre do conteúdo no eixo X/Y;
 * - não substituir o padding nativo do SiteOrigin, que deve ser usado
 *   para ajuste fino de top/right/bottom/left.
 *
 * @package NexoBase
 */

/**
 * Wrapper externo da linha.
 *
 * Deve ser usado apenas para ajustes seguros, sem controlar o layout interno.
 * O background visual principal fica na própria .nexo-row, usando a técnica:
 * background + box-shadow 100vmax.
 */
.nexo-so-row-wrapper {
	position: relative;
	z-index: auto;
}

/**
 * Controle de camada da row inteira.
 *
 * Atua no wrapper externo do SiteOrigin (.panel-grid), permitindo que uma
 * row anterior fique acima de uma row posterior, ou vice-versa.
 */
.panel-grid.nexo-row-layer-wrapper,
.nexo-row-layer-wrapper.panel-grid {
	position: relative;
	z-index: var(--nexo-row-z-index, 1);
}

/**
 * Remove espaços residuais entre rows Nexo.
 */
.panel-grid.nexo-so-row-wrapper,
.nexo-so-row-wrapper.panel-grid {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/**
 * Corrige microfendas visuais de 1px entre rows Nexo consecutivas.
 */
.panel-grid.nexo-so-row-wrapper + .panel-grid.nexo-so-row-wrapper {
	margin-top: -1px !important;
}

/**
 * Remove margens indesejadas quando solicitado nas opções da row.
 */
.panel-grid.nexo-row--no-bottom-margin,
.nexo-row--no-bottom-margin.panel-grid,
.siteorigin-panels-stretch.nexo-row--no-bottom-margin {
	margin-bottom: 0 !important;
}

/**
 * Seção genérica Nexo.
 *
 * Importante:
 * Por padrão, este sistema não aplica padding vertical.
 * Use o padding nativo da linha no SiteOrigin para top/right/bottom/left.
 * As classes nexo-row-spacing--* permanecem apenas como presets opcionais.
 */
.nexo-row {
	--nexo-row-background: #ffffff;
	--nexo-row-text-color: #1f2523;
	--nexo-row-heading-color: #07111f;
	--nexo-row-max-width: 1180px;
	--nexo-row-padding-top: 0;
	--nexo-row-padding-bottom: 0;

	position: relative;
	z-index: var(--nexo-row-z-index, 1);
	width: 100%;
	max-width: var(--nexo-row-max-width);
	margin-right: auto !important;
	margin-left: auto !important;
	padding-top: var(--nexo-row-padding-top);
	padding-bottom: var(--nexo-row-padding-bottom);
	background: var(--nexo-row-background);
	box-shadow: 0 0 0 100vmax var(--nexo-row-background);
	clip-path: inset(0 -100vmax);
	color: var(--nexo-row-text-color);
}

/**
 * Controle de camada do wrapper interno da row.
 */
.nexo-row.nexo-row-layer {
	z-index: var(--nexo-row-z-index, 1);
}

/**
 * Garante que células e widgets continuem livres dentro da seção.
 */
.nexo-row .panel-grid-cell {
	position: relative;
	z-index: 1;
}

.nexo-row .so-panel:last-child,
.nexo-row .widget:last-child,
.nexo-row .textwidget > *:last-child {
	margin-bottom: 0;
}

/**
 * Cores/presets de compatibilidade.
 *
 * Estes presets continuam existindo para não quebrar páginas atuais,
 * mas a cor personalizada definida no SiteOrigin sobrescreve estas
 * variáveis via style inline.
 */
.nexo-row--orange {
	--nexo-row-background: #fb5a00;
	--nexo-row-text-color: #07111f;
	--nexo-row-heading-color: #07111f;
}

.nexo-row--light {
	--nexo-row-background: #f4f4f4;
	--nexo-row-text-color: #1f2523;
	--nexo-row-heading-color: #07111f;
}

.nexo-row--dark,
.nexo-row--dark-bg {
	--nexo-row-background: #171d1b;
	--nexo-row-text-color: #ffffff;
	--nexo-row-heading-color: #ffffff;
}

/**
 * Fundo transparente.
 *
 * Mantém a row como Nexo row, preservando largura, camada e deslocamento,
 * mas impede que o fundo e o box-shadow full width cubram a próxima row.
 */
.nexo-row.nexo-row-bg--transparent {
	--nexo-row-background: transparent;

	background: transparent !important;
	box-shadow: none !important;
}

/**
 * Overlay escuro opcional para seção com imagem de fundo.
 */
.nexo-row--dark-bg {
	overflow: hidden;
}

.nexo-row--dark-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(0, 0, 0, 0.58);
	pointer-events: none;
}

.nexo-row--dark-bg > *,
.nexo-row--dark-bg .panel-grid-cell,
.nexo-row--dark-bg .so-panel,
.nexo-row--dark-bg .widget,
.nexo-row--dark-bg .textwidget {
	position: relative;
	z-index: 1;
}

/**
 * Larguras.
 */
.nexo-row-width--narrow {
	--nexo-row-max-width: 960px;
}

.nexo-row-width--normal {
	--nexo-row-max-width: 1180px;
}

.nexo-row-width--wide {
	--nexo-row-max-width: 1360px;
}

.nexo-row-width--full {
	--nexo-row-max-width: 100%;
	width: 100%;
}

/**
 * Espaçamentos verticais opcionais.
 *
 * Recomendação operacional:
 * - para ajuste fino, use o padding nativo do SiteOrigin;
 * - use estes presets apenas quando quiser aplicar um espaçamento rápido
 *   pelo próprio sistema Nexo.
 */
.nexo-row-spacing--none {
	--nexo-row-padding-top: 0;
	--nexo-row-padding-bottom: 0;
}

.nexo-row-spacing--compact {
	--nexo-row-padding-top: 44px;
	--nexo-row-padding-bottom: 44px;
}

.nexo-row-spacing--normal {
	--nexo-row-padding-top: 80px;
	--nexo-row-padding-bottom: 80px;
}

.nexo-row-spacing--large {
	--nexo-row-padding-top: 112px;
	--nexo-row-padding-bottom: 112px;
}

.nexo-row-spacing--hero {
	--nexo-row-padding-top: 150px;
	--nexo-row-padding-bottom: 150px;
}

/**
 * Sobreposição genérica.
 *
 * Esta regra cobre o caso em que a row atual sobe sobre a anterior.
 * Para deslocar conteúdo para qualquer direção, use os campos de deslocamento
 * X/Y do conteúdo e camada da linha/conteúdo.
 */
.nexo-row.nexo-row-overlap--small,
.nexo-row.nexo-row-overlap--medium,
.nexo-row.nexo-row-overlap--large,
.nexo-row.nexo-row-overlap--custom {
	z-index: var(--nexo-row-z-index, 3);
	background: transparent;
	box-shadow: none;
	clip-path: none;
}

.nexo-row.nexo-row-overlap--small {
	margin-top: -48px !important;
}

.nexo-row.nexo-row-overlap--medium {
	margin-top: -82px !important;
}

.nexo-row.nexo-row-overlap--large {
	margin-top: -120px !important;
}

.nexo-row.nexo-row-overlap--custom {
	margin-top: calc(0px - var(--nexo-row-overlap-amount, 82px)) !important;
}

/**
 * Cor visual abaixo da row sobreposta.
 */
.nexo-row.nexo-row-overlap--small,
.nexo-row.nexo-row-overlap--medium,
.nexo-row.nexo-row-overlap--large,
.nexo-row.nexo-row-overlap--custom {
	--nexo-row-next-background: #f4f4f4;
}

.nexo-row.nexo-row-overlap--small::after,
.nexo-row.nexo-row-overlap--medium::after,
.nexo-row.nexo-row-overlap--large::after,
.nexo-row.nexo-row-overlap--custom::after {
	content: "";
	position: absolute;
	right: calc(50% - 50vw);
	bottom: 0;
	left: calc(50% - 50vw);
	z-index: -1;
	background: var(--nexo-row-next-background);
	pointer-events: none;
}

.nexo-row.nexo-row-overlap--small::after {
	top: 48px;
}

.nexo-row.nexo-row-overlap--medium::after {
	top: 82px;
}

.nexo-row.nexo-row-overlap--large::after {
	top: 120px;
}

.nexo-row.nexo-row-overlap--custom::after {
	top: var(--nexo-row-overlap-amount, 82px);
}

/**
 * Utilitários internos.
 */
.nexo-row__inner,
.nexo-section-inner {
	width: min(100%, var(--nexo-row-max-width, 1180px));
	margin-right: auto;
	margin-left: auto;
}

/**
 * Deslocamento livre do conteúdo interno da row.
 *
 * A própria row também participa da camada visual para conseguir sobrepor
 * rows seguintes quando o conteúdo é movido para fora de seus limites.
 */
.nexo-row.nexo-row-content-offset {
	position: relative;
	z-index: var(--nexo-row-z-index, var(--nexo-row-content-z-index, 5));
}

.nexo-row.nexo-row-content-offset > .panel-grid-cell {
	position: relative;
	z-index: var(--nexo-row-content-z-index, 5);
	transform: translate(
		var(--nexo-row-content-offset-x, 0),
		var(--nexo-row-content-offset-y, 0)
	);
}

/**
 * Permite que conteúdo deslocado ultrapasse verticalmente os limites da row.
 *
 * Mantém a técnica de full width nas laterais, mas amplia a área vertical
 * do clip-path para evitar corte do conteúdo movido.
 */
.nexo-row.nexo-row-overflow-visible {
	overflow: visible !important;
	clip-path: inset(
		calc(0px - var(--nexo-row-visible-extra-y, 240px))
		-100vmax
		calc(0px - var(--nexo-row-visible-extra-y, 240px))
		-100vmax
	) !important;
}

.site-main .entry-content img.nexo-certifications-banner-image,
.site-main .entry-content .nexo-certifications-banner-image {
	display: block;
	width: min(100vw, 1920px);
	max-width: none;
	height: auto;
	margin-right: 0;
	margin-left: 50%;
	transform: translateX(-50%);
}

/**
 * Mobile e tablets.
 */
@media (max-width: 1024px) {
	.nexo-row {
		max-width: calc(100% - 48px);
	}

	.nexo-row-width--full {
		max-width: 100%;
	}

	.nexo-row-spacing--compact {
		--nexo-row-padding-top: 36px;
		--nexo-row-padding-bottom: 36px;
	}

	.nexo-row-spacing--normal {
		--nexo-row-padding-top: 64px;
		--nexo-row-padding-bottom: 64px;
	}

	.nexo-row-spacing--large {
		--nexo-row-padding-top: 88px;
		--nexo-row-padding-bottom: 88px;
	}

	.nexo-row-spacing--hero {
		--nexo-row-padding-top: 112px;
		--nexo-row-padding-bottom: 112px;
	}

	.nexo-row.nexo-row-overlap--small {
		margin-top: -36px !important;
	}

	.nexo-row.nexo-row-overlap--medium {
		margin-top: -64px !important;
	}

	.nexo-row.nexo-row-overlap--large {
		margin-top: -92px !important;
	}

	.nexo-row.nexo-row-overlap--small::after {
		top: 36px;
	}

	.nexo-row.nexo-row-overlap--medium::after {
		top: 64px;
	}

	.nexo-row.nexo-row-overlap--large::after {
		top: 92px;
	}

	.nexo-row.nexo-row-overlap--custom::after {
		top: var(--nexo-row-overlap-amount, 82px);
	}
}

@media (max-width: 767px) {
	.nexo-row {
		max-width: calc(100% - 24px);
	}

	.nexo-row-width--full {
		max-width: 100%;
	}

	.nexo-row-spacing--compact {
		--nexo-row-padding-top: 30px;
		--nexo-row-padding-bottom: 30px;
	}

	.nexo-row-spacing--normal {
		--nexo-row-padding-top: 48px;
		--nexo-row-padding-bottom: 48px;
	}

	.nexo-row-spacing--large {
		--nexo-row-padding-top: 68px;
		--nexo-row-padding-bottom: 68px;
	}

	.nexo-row-spacing--hero {
		--nexo-row-padding-top: 84px;
		--nexo-row-padding-bottom: 84px;
	}

	.nexo-row.nexo-row-overlap--small {
		margin-top: -28px !important;
	}

	.nexo-row.nexo-row-overlap--medium {
		margin-top: -48px !important;
	}

	.nexo-row.nexo-row-overlap--large {
		margin-top: -68px !important;
	}

	.nexo-row.nexo-row-overlap--small::after {
		top: 28px;
	}

	.nexo-row.nexo-row-overlap--medium::after {
		top: 48px;
	}

	.nexo-row.nexo-row-overlap--large::after {
		top: 68px;
	}

	.nexo-row.nexo-row-overlap--custom::after {
		top: var(--nexo-row-overlap-amount, 82px);
	}
}