/**
 * Asta Mobili — Seção da Home "Design, conforto e funcionalidade para melhores
 * espaços." (vídeo à esquerda + painel vermelho Asta à direita).
 *
 * Reprodução visual fiel do mockup aprovado (backups/mockup/rv07/"Asta
 * Mobili.dc.html", bloco `display:flex;flex-wrap:wrap` logo abaixo da seção
 * "Soluções": coluna de mídia `flex:1 1 44%` com <video> em object-fit:cover e
 * coluna `flex:1 1 50%` com `background:#A01C24`, símbolo Asta branco decorativo
 * em baixa opacidade ao fundo, eyebrow + título + parágrafo + CTA branco).
 *
 * Todos os valores (cores, tipografia, espaçamentos, proporções) vêm do HTML do
 * mockup. As unidades `cqw` do mockup (medidas relativas ao frame de
 * apresentação) foram convertidas para `vw` — a seção ocupa 100% da largura da
 * viewport — seguindo a mesma convenção do Hero (asta-hero.css) e das seções
 * "Conheça a Asta" (asta-home-about-intro.css) e "Soluções"
 * (asta-home-solutions.css).
 *
 * Conteúdo editável em Asta → Home (card "Design e funcionalidade"); o CSS
 * abaixo é fixo e não depende de configuração. A mídia da esquerda pode ser
 * vídeo (default) ou imagem — ambas usam o mesmo encaixe object-fit:cover
 * (.asta-feature-split__video / .asta-feature-split__image).
 *
 * Layout fluido (clamp + vw) como no mockup. O único breakpoint discreto é o
 * mesmo já adotado no Hero deste plugin (max-width:767px): em telas estreitas as
 * duas metades empilham — vídeo em cima, painel vermelho embaixo — porque a
 * divisão 44%/50% lado a lado do mockup só é legível em tablet/desktop.
 */

.asta-feature-split,
.asta-feature-split *,
.asta-feature-split *::before,
.asta-feature-split *::after { box-sizing:border-box; }

/* Seção full-bleed: quebra o container de conteúdo (Elementor/tema) para as duas
   metades ocuparem a largura total da viewport, como no mockup. */
.asta-feature-split {
	display:flex;
	flex-wrap:wrap;
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	min-height:clamp(340px, 30vw, 520px);
	overflow:hidden;
	background:#A01C24; /* evita faixa clara caso o vídeo demore a pintar */
	font-family:Inter, Helvetica, Arial, sans-serif;
}

/* ---- Coluna de mídia (vídeo) ----
   Mockup: `flex:1 1 44%; min-height:clamp(240px,26cqw,520px)`.
   O <video> precisa preencher a coluna inteira; o dimensionamento/encaixe é
   fixado com !important porque o reset do tema (hello-elementor) e o
   `.elementor img/video {height:auto}` podem sobrepor um height de classe
   simples — foi o problema corrigido no Hero (mídia horizontal com altura
   automática deixando faixa vazia no mobile). object-fit:cover faz o recorte,
   preservando o enquadramento sem deformar. */
.asta-feature-split__media {
	position:relative;
	flex:1 1 44%;
	min-width:0;
	min-height:clamp(300px, 32vw, 520px);
	background:#141311;
	overflow:hidden;
}
.asta-feature-split__video,
.asta-feature-split__image {
	position:absolute;
	inset:0;
	display:block;
	width:100% !important;
	height:100% !important;
	min-height:100%;
	margin:0;
	max-width:none !important;
	border:0;
	object-fit:cover !important;
	object-position:center !important;
}
.asta-feature-split__video { pointer-events:none; }

/* ---- Painel vermelho Asta ----
   Mockup: `flex:1 1 50%; background:#A01C24; display:flex; align-items:center;
   padding:clamp(34px,4.4cqw,84px) clamp(22px,4cqw,72px)`. */
.asta-feature-split__panel {
	position:relative;
	flex:1 1 50%;
	min-width:0;
	display:flex;
	align-items:center;
	padding:clamp(34px, 4.4vw, 84px) clamp(22px, 4vw, 72px);
	background:#A01C24;
}

/* ---- Elemento gráfico decorativo (símbolo Asta branco ao fundo) ----
   Mockup: wrapper `position:absolute; inset:0; overflow:hidden;
   pointer-events:none` e <img simbolo-asta-branco.png> com
   `width:465px; height:377px; opacity:0.09; left:13px; top:18px`.
   Mantemos a posição/opacidade do mockup e preservamos a proporção natural do
   arquivo (largura fluida, altura automática) para não distorcer o traço. */
.asta-feature-split__decor {
	position:absolute;
	inset:0;
	overflow:hidden;
	pointer-events:none;
}
.asta-feature-split__symbol {
	position:absolute;
	left:13px;
	top:18px;
	width:clamp(300px, 42vw, 520px) !important;
	height:auto !important;
	max-width:none !important;
	margin:0;
	opacity:.09;
	pointer-events:none;
	user-select:none;
}

/* ---- Coluna de conteúdo ----
   Mockup: `display:flex; flex-direction:column; gap:clamp(16px,1.8cqw,26px);
   max-width:520px`. z-index para ficar acima do símbolo decorativo. */
.asta-feature-split__content {
	position:relative;
	z-index:1;
	display:flex;
	flex-direction:column;
	gap:clamp(16px, 1.8vw, 26px);
	max-width:520px;
}

/* Wrapper interno só para hospedar o hook de scroll motion
   (data-asta-scroll-motion="content-soft" — ver assets/asta-motion.css e
   docs/motion-system.md). Reproduz o layout do pai via `gap:inherit` (não
   duplica o valor do clamp()) para o espaçamento entre eyebrow/título/
   texto/CTA ficar idêntico ao de antes desta primitiva existir. */
.asta-feature-split__content-inner {
	display:flex;
	flex-direction:column;
	gap:inherit;
}

/* ---- Eyebrow ---- */
.asta-feature-split__eyebrow {
	margin:0 !important;
	padding:0;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-size:10px !important;
	font-weight:400 !important;
	letter-spacing:.18em !important;
	line-height:1.2 !important;
	text-transform:uppercase;
	color:rgba(255,255,255,.7) !important;
}

/* ---- Título ---- */
.asta-feature-split__title {
	margin:0 !important;
	padding:0;
	max-width:520px;
	font-family:Manrope, Helvetica, Arial, sans-serif !important;
	font-weight:600 !important;
	font-size:clamp(26px, 3.9vw, 50px) !important;
	line-height:1.04 !important;
	letter-spacing:-.03em !important;
	color:#fff !important;
	text-wrap:pretty;
}

/* ---- Parágrafo ---- */
.asta-feature-split__text {
	margin:0 !important;
	padding:0;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-weight:400 !important;
	font-size:clamp(13.5px, 1.35vw, 17px) !important;
	line-height:1.6 !important;
	color:rgba(255,255,255,.85) !important;
}

/* ---- CTA (fundo branco, texto vermelho Asta) ----
   Mockup: `background:#fff; color:#A01C24; border:0; border-radius:8px;
   padding:15px 24px; font-family:Inter; font-size:13.5px; letter-spacing:0.03em;
   gap:10px` + hover `background:#F2E9E9`.
   As regras abaixo neutralizam o que o Hello Elementor / Elementor aplicam a
   links/botões (magenta, borda, box-shadow, text-decoration, tipografia
   externa) sem alterar tamanho, padding, raio ou comportamento. */
.asta-feature-split__cta {
	align-self:flex-start;
	display:inline-flex;
	align-items:center;
	gap:10px;
	margin:0;
	padding:15px 24px;
	border:0 !important;
	border-radius:8px !important;
	background:#fff !important;
	color:#A01C24 !important;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-size:13.5px !important;
	font-weight:400 !important;
	letter-spacing:.03em !important;
	line-height:1.2 !important;
	white-space:nowrap;
	text-decoration:none !important;
	text-shadow:none !important;
	box-shadow:none !important;
	cursor:pointer;
	transition:background .18s ease;
}
.asta-feature-split__cta:hover,
.asta-feature-split__cta:focus-visible {
	background:#F2E9E9 !important;
	color:#A01C24 !important;
}
.asta-feature-split__cta-arrow { color:inherit; }

.asta-feature-split :focus-visible {
	outline:2px solid #fff;
	outline-offset:3px;
}

/* ---- Mobile: empilha (vídeo em cima, painel embaixo) ----
   Mesmo breakpoint do Hero deste plugin. A coluna de mídia passa a ocupar a
   largura toda com altura própria (continua object-fit:cover, sem faixa vazia);
   o painel vermelho ocupa a largura toda logo abaixo. */
@media (max-width:767px) {
	.asta-feature-split { min-height:0; }
	.asta-feature-split__media {
		flex:1 1 100%;
		width:100%;
		min-height:clamp(220px, 62vw, 340px);
	}
	.asta-feature-split__panel {
		flex:1 1 100%;
		width:100%;
		padding:clamp(30px, 9vw, 56px) clamp(20px, 7vw, 40px);
	}
	.asta-feature-split__symbol {
		width:clamp(240px, 78vw, 360px) !important;
		left:-6px;
		top:8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asta-feature-split__cta { transition:none; }
}