/**
 * Home use/application section.
 *
 * Seção da home: "Veja onde e como a barra de ancoragem é utilizada".
 *
 * @package NexoBase
 */

.nexo-home-use-band {
	--nexo-home-use-content-width: 1108px;

	position: relative;
	z-index: 1;
	max-width: var(--nexo-home-use-content-width);
	margin-right: auto !important;
	margin-left: auto !important;
	background: #fb5a00;
	box-shadow: 0 0 0 100vmax #fb5a00;
	clip-path: inset(0 -100vmax);
}

/**
 * Corrige margens padrão do SiteOrigin entre as rows da seção laranja.
 *
 * Quando a classe é aplicada em "Row Class", o SiteOrigin pode inserir a classe
 * no .panel-row-style interno, enquanto a margem entre linhas fica no .panel-grid pai.
 */
.panel-grid:has(> .nexo-home-use-band),
.panel-grid:has(> .panel-row-style.nexo-home-use-band) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	background: #fb5a00;
	box-shadow: 0 0 0 100vmax #fb5a00;
	clip-path: inset(0 -100vmax);
}

.panel-grid.nexo-home-use-band,
.nexo-home-use-band.panel-grid,
.nexo-home-use-band.panel-row-style,
.siteorigin-panels-stretch.nexo-home-use-band {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.nexo-home-use-band > .panel-grid-cell,
.nexo-home-use-band .panel-grid-cell {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Linha 1: título + texto introdutório
   ========================================================================== */

.nexo-home-use-band--intro {
	margin-bottom: 0 !important;
	padding-top: 92px;
	padding-bottom: 64px;
}

/**
 * Mantém a linha de introdução alinhada à mesma largura visual
 * usada pelo grid de cards abaixo.
 */
.panel-grid:has(> .panel-row-style.nexo-home-use-band--intro) > .panel-row-style.nexo-home-use-band--intro,
.nexo-home-use-band--intro.panel-row-style,
.siteorigin-panels-stretch.nexo-home-use-band--intro {
	width: min(var(--nexo-home-use-content-width, 1108px), 100%) !important;
	max-width: var(--nexo-home-use-content-width, 1108px);
	margin-right: auto !important;
	margin-left: auto !important;
}

.nexo-home-use-band--intro .panel-grid-cell {
	align-self: flex-start;
	vertical-align: top;
}

.nexo-home-use-band--intro .so-panel,
.nexo-home-use-band--intro .widget,
.nexo-home-use-band--intro .textwidget {
	margin-bottom: 0 !important;
}

.nexo-home-use-band--intro h1,
.nexo-home-use-band--intro h2,
.nexo-home-use-band--intro h3,
.nexo-home-use-band--intro p {
	color: #07111f;
}

.nexo-home-use-band--intro h1,
.nexo-home-use-band--intro h2,
.nexo-home-use-band--intro h3 {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 800;
	line-height: 1.12;
}

.nexo-home-use-band--intro p {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.45;
}

/* ==========================================================================
   Linha 2: cards de aplicação
   ========================================================================== */

.nexo-home-use-band--cards {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 10px;
	padding-bottom: 150px;
}

.nexo-home-use-band--intro + .nexo-home-use-band--cards {
	margin-top: 0 !important;
}

.nexo-home-use-band--cards .panel-grid-cell {
	display: flex;
	align-items: stretch;
}

.nexo-home-use-band--cards .so-panel,
.nexo-home-use-band--cards .widget,
.nexo-home-use-band--cards .textwidget,
.nexo-home-use-band--cards .nexo-card {
	width: 100%;
}

.nexo-home-use-band--cards .so-panel {
	margin-bottom: 0 !important;
}

/**
 * Grid interno dos cards de aplicação.
 *
 * Usado quando os três cards são inseridos em uma única coluna do SiteOrigin,
 * evitando o gutter automático das colunas do Page Builder.
 */
.nexo-home-use-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	width: min(var(--nexo-home-use-content-width, 1108px), 100%);
	margin: 0 auto;
}

.nexo-home-use-cards-grid__item {
	min-width: 0;
}

.nexo-home-use-cards-grid .nexo-card {
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   Linha 3: card escuro sobreposto
   ========================================================================== */

/**
 * A linha em si fica transparente no topo para permitir que o card
 * apareça sobre o laranja. O fundo claro começa depois, via ::before.
 */
.nexo-home-use-overlap {
	position: relative;
	z-index: 3;
	max-width: var(--nexo-home-use-content-width, 1108px);
	margin-top: -92px !important;
	margin-right: auto !important;
	margin-left: auto !important;
	padding-bottom: 78px;
	background: transparent;
}

.nexo-home-use-overlap::before {
	content: "";
	position: absolute;
	top: 72px;
	right: calc(50% - 50vw);
	bottom: 0;
	left: calc(50% - 50vw);
	z-index: 0;
	background: #f4f4f4;
}

.panel-grid.nexo-home-use-overlap,
.nexo-home-use-overlap.panel-grid,
.nexo-home-use-overlap.panel-row-style,
.siteorigin-panels-stretch.nexo-home-use-overlap {
	margin-bottom: 0 !important;
}

.nexo-home-use-overlap .panel-grid-cell,
.nexo-home-use-overlap .so-panel,
.nexo-home-use-overlap .widget,
.nexo-home-use-overlap .textwidget {
	position: relative;
	z-index: 1;
}

.nexo-home-use-overlap .nexo-budget-card {
	position: relative;
	z-index: 2;
	width: min(980px, calc(100% - 32px));
	margin-right: auto !important;
	margin-left: auto !important;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1024px) {
	.nexo-home-use-band,
	.nexo-home-use-overlap {
		max-width: calc(100% - 48px);
	}

	.nexo-home-use-band--intro {
		padding-top: 72px;
		padding-bottom: 30px;
	}

	.nexo-home-use-cards-grid {
		width: 100%;
		gap: 8px;
	}

	.nexo-home-use-band--cards {
		padding-bottom: 140px;
	}

	.nexo-home-use-overlap {
		margin-top: -78px !important;
		padding-bottom: 64px;
	}

	.nexo-home-use-overlap::before {
		top: 64px;
	}
}

@media (max-width: 767px) {
	.nexo-home-use-band,
	.nexo-home-use-overlap {
		max-width: calc(100% - 24px);
	}

	.nexo-home-use-band--intro {
		padding-top: 56px;
		padding-bottom: 28px;
	}

	.nexo-home-use-band--cards {
		padding-top: 0;
		padding-bottom: 118px;
	}

	.nexo-home-use-band--cards .panel-grid-cell {
		display: block;
	}

	.nexo-home-use-cards-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.nexo-home-use-overlap {
		margin-top: -64px !important;
		padding-bottom: 48px;
	}

	.nexo-home-use-overlap::before {
		top: 56px;
	}

	.nexo-home-use-overlap .nexo-budget-card {
		width: 100%;
	}
}