/**
 * Componente Hero.
 *
 * Deliberadamente sem cores, fontes ou espaçamentos de marca: tudo isso é
 * definido nos controles de estilo dos widgets, por esquema (slide claro e
 * slide escuro). Aqui fica só o que o Elementor não tem como controlar.
 *
 * As classes trip-hero--* são aplicadas pelo tema no wrapper de cada item do
 * loop, a partir dos campos ACF do hero, e permitem que cada slide se comporte
 * de forma diferente mesmo compartilhando o mesmo template.
 */

/* Texto ----------------------------------------------------------------- */

.te-hero__text {
	margin: 0;
}

/*
 * Classe utilitária para destacar um trecho de texto com a cor de destaque
 * global do Elementor. Use dentro dos campos de texto do hero:
 * <span class="trip-accent">trecho destacado</span>
 */
.trip-accent {
	color: var(--e-global-color-accent);
}

/* Botões ---------------------------------------------------------------- */

.te-hero__cta {
	display: inline-block;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.te-hero__cta:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.te-hero__cta {
		transition: none;
	}
}

/* Aviso exibido apenas no editor, quando o campo está vazio. */
.te-hero__placeholder {
	display: inline-block;
	padding: 0.5em 0.75em;
	border: 1px dashed currentColor;
	opacity: 0.6;
	font-size: 0.8125rem;
}

/* Alinhamento por slide -------------------------------------------------- */

/*
 * O alinhamento horizontal já funciona sozinho, porque text-align é herdado
 * pelos widgets dentro do item.
 */
.trip-hero--h-left {
	text-align: left;
	--trip-hero-align-h: flex-start;
}

.trip-hero--h-center {
	text-align: center;
	--trip-hero-align-h: center;
}

.trip-hero--h-right {
	text-align: right;
	--trip-hero-align-h: flex-end;
}

.trip-hero--v-top {
	--trip-hero-align-v: flex-start;
}

.trip-hero--v-center {
	--trip-hero-align-v: center;
}

.trip-hero--v-bottom {
	--trip-hero-align-v: flex-end;
}

/*
 * O alinhamento vertical depende de um container com altura para distribuir.
 * Para ativá-lo, dê a classe CSS "trip-hero-content" ao Container que envolve
 * os widgets dentro do Loop Item: ele passa a obedecer aos dois campos de
 * alinhamento do hero, slide a slide.
 */
.trip-hero-content {
	display: flex;
	flex-direction: column;
	justify-content: var(--trip-hero-align-v, center);
	align-items: var(--trip-hero-align-h, flex-start);
	height: 100%;

	/* Abaixo de desktop o conteúdo ocupa a largura toda. */
	--trip-hero-content-width: 100%;
	width: var(--trip-hero-content-width);
}

/*
 * Largura do conteúdo por alinhamento, de desktop para cima.
 *
 * 1025px é o ponto mínimo de desktop configurado no Elementor desta
 * instalação; se os breakpoints forem alterados no painel, este valor precisa
 * acompanhar.
 *
 * As margens automáticas posicionam a caixa dentro do slide e funcionam tanto
 * se o Container pai for bloco quanto flex.
 */
@media (min-width: 1025px) {

	.trip-hero--h-left .trip-hero-content {
		--trip-hero-content-width: 40%;
		margin-right: auto;
	}

	.trip-hero--h-center .trip-hero-content {
		--trip-hero-content-width: 50%;
		margin-left: auto;
		margin-right: auto;
	}

	.trip-hero--h-right .trip-hero-content {
		--trip-hero-content-width: 40%;
		margin-left: auto;
	}
}

/* Overlay por slide ------------------------------------------------------ */

/*
 * A opacidade do overlay nao pode vir de dynamic tag: nenhum controle de
 * overlay do Elementor declara dynamic.active. Entao o valor do ACF vira uma
 * classe no wrapper do item, e cada regra abaixo sobrescreve a variavel
 * --overlay-opacity que o proprio Elementor usa no Container.
 *
 * O !important e necessario, nao preguica: o Elementor compila {{WRAPPER}} em
 * ".elementor-{post} .elementor-element.elementor-element-{id}" (ver
 * core/files/css/post.php:100), especificidade 0,3,0. Empatar ou superar isso
 * exigiria repetir classes no seletor, e mesmo um empate dependeria da ordem
 * de carregamento das folhas. Como aqui se sobrescreve uma unica custom
 * property, criada pelo Elementor exatamente para ser o ponto de ajuste, o
 * !important e a forma previsivel de vencer.
 *
 * Os passos sao de 5 e acompanham Hero::OVERLAY_STEP.
 */

.trip-hero--overlay-0 {
	--trip-hero-overlay: 0;
}

.trip-hero--overlay-0 .elementor-element {
	--overlay-opacity: 0 !important;
}

.trip-hero--overlay-5 {
	--trip-hero-overlay: 0.05;
}

.trip-hero--overlay-5 .elementor-element {
	--overlay-opacity: 0.05 !important;
}

.trip-hero--overlay-10 {
	--trip-hero-overlay: 0.1;
}

.trip-hero--overlay-10 .elementor-element {
	--overlay-opacity: 0.1 !important;
}

.trip-hero--overlay-15 {
	--trip-hero-overlay: 0.15;
}

.trip-hero--overlay-15 .elementor-element {
	--overlay-opacity: 0.15 !important;
}

.trip-hero--overlay-20 {
	--trip-hero-overlay: 0.2;
}

.trip-hero--overlay-20 .elementor-element {
	--overlay-opacity: 0.2 !important;
}

.trip-hero--overlay-25 {
	--trip-hero-overlay: 0.25;
}

.trip-hero--overlay-25 .elementor-element {
	--overlay-opacity: 0.25 !important;
}

.trip-hero--overlay-30 {
	--trip-hero-overlay: 0.3;
}

.trip-hero--overlay-30 .elementor-element {
	--overlay-opacity: 0.3 !important;
}

.trip-hero--overlay-35 {
	--trip-hero-overlay: 0.35;
}

.trip-hero--overlay-35 .elementor-element {
	--overlay-opacity: 0.35 !important;
}

.trip-hero--overlay-40 {
	--trip-hero-overlay: 0.4;
}

.trip-hero--overlay-40 .elementor-element {
	--overlay-opacity: 0.4 !important;
}

.trip-hero--overlay-45 {
	--trip-hero-overlay: 0.45;
}

.trip-hero--overlay-45 .elementor-element {
	--overlay-opacity: 0.45 !important;
}

.trip-hero--overlay-50 {
	--trip-hero-overlay: 0.5;
}

.trip-hero--overlay-50 .elementor-element {
	--overlay-opacity: 0.5 !important;
}

.trip-hero--overlay-55 {
	--trip-hero-overlay: 0.55;
}

.trip-hero--overlay-55 .elementor-element {
	--overlay-opacity: 0.55 !important;
}

.trip-hero--overlay-60 {
	--trip-hero-overlay: 0.6;
}

.trip-hero--overlay-60 .elementor-element {
	--overlay-opacity: 0.6 !important;
}

.trip-hero--overlay-65 {
	--trip-hero-overlay: 0.65;
}

.trip-hero--overlay-65 .elementor-element {
	--overlay-opacity: 0.65 !important;
}

.trip-hero--overlay-70 {
	--trip-hero-overlay: 0.7;
}

.trip-hero--overlay-70 .elementor-element {
	--overlay-opacity: 0.7 !important;
}

.trip-hero--overlay-75 {
	--trip-hero-overlay: 0.75;
}

.trip-hero--overlay-75 .elementor-element {
	--overlay-opacity: 0.75 !important;
}

.trip-hero--overlay-80 {
	--trip-hero-overlay: 0.8;
}

.trip-hero--overlay-80 .elementor-element {
	--overlay-opacity: 0.8 !important;
}

.trip-hero--overlay-85 {
	--trip-hero-overlay: 0.85;
}

.trip-hero--overlay-85 .elementor-element {
	--overlay-opacity: 0.85 !important;
}

.trip-hero--overlay-90 {
	--trip-hero-overlay: 0.9;
}

.trip-hero--overlay-90 .elementor-element {
	--overlay-opacity: 0.9 !important;
}

.trip-hero--overlay-95 {
	--trip-hero-overlay: 0.95;
}

.trip-hero--overlay-95 .elementor-element {
	--overlay-opacity: 0.95 !important;
}

.trip-hero--overlay-100 {
	--trip-hero-overlay: 1;
}

.trip-hero--overlay-100 .elementor-element {
	--overlay-opacity: 1 !important;
}