/**
 * Asta Mobili — Seção da Home "Soluções para a administração pública."
 * (LICITAÇÕES): painel escuro à esquerda + mídia (vídeo ou imagem) na metade
 * 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 para diferentes realidades"). Todos os valores (cores, tipografia,
 * espaçamentos, proporções) vêm do HTML do mockup:
 *
 *   wrapper      background:#1C1B18 (herdado do container escuro do mockup)
 *   painel       flex:1 1 50%; display:flex; flex-direction:column;
 *                gap:clamp(16px,1.8cqw,26px); justify-content:center
 *   eyebrow      Inter 10px; letter-spacing:0.18em; text-transform:uppercase;
 *                color:#C98A8E
 *   título       Manrope 600; clamp(25px,3.6cqw,46px); line-height:1.05;
 *                letter-spacing:-0.03em; color:#fff
 *   parágrafo    clamp(13.5px,1.35cqw,17px); line-height:1.6;
 *                color:rgba(255,255,255,0.72); max-width:460px
 *   ações        display:flex; flex-wrap:wrap; gap:10px
 *   CTA primário background:#A01C24; color:#fff; border:0; border-radius:8px;
 *                padding:14px 22px; Inter 13px; hover background:#7E1319
 *   CTA secund.  background:transparent; color:#fff;
 *                border:1px solid rgba(255,255,255,0.35); padding:14px 22px;
 *                Inter 13px; hover border-color:#fff
 *                (o mockup NÃO define border-radius no secundário — reproduzido)
 *   mídia        flex:1 1 40%; min-height:clamp(200px,22cqw,420px);
 *                <video> (default) ou <img> em object-fit:cover preenchendo
 *                toda a área
 *
 * ALINHAMENTO ESQUERDO (correção): a seção continua full-bleed (100vw), mas o
 * conteúdo do painel escuro NÃO cola mais na borda da viewport — ele começa na
 * mesma linha visual da margem esquerda das demais seções da Home, que usam um
 * wrapper `max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,64px)`.
 * O painel reproduz esse mesmo offset com
 *   padding-left: max(clamp(20px,4vw,64px), calc((100vw - 1180px) / 2))
 * — a gutter fluida enquanto a viewport é estreita, e exatamente
 * `(100vw - 1180px) / 2` (a metade da folga do container) quando é larga. O
 * conteúdo ainda é limitado a `max-width` para manter a medida de leitura do
 * mockup dentro da metade esquerda.
 *
 * As unidades `cqw` do mockup (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",
 * "Soluções", "Design e funcionalidade" e "Soluções para diferentes
 * realidades".
 *
 * CONTEÚDO editável em Asta → Home (card "Licitações"): mídia imagem|vídeo +
 * poster, eyebrow, título, descrição e os dois botões. O CSS abaixo é FIXO e não
 * depende de configuração — só a estrutura visual. O <video> faz loop mudo só
 * com atributos HTML — sem JS no frontend.
 *
 * As colunas usam `flex` + `flex-wrap` 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 — painel escuro em cima, mídia
 * embaixo — e o painel volta a usar padding lateral fluido normal (sem o offset
 * de desktop), porque a divisão 50%/40% lado a lado só é legível em
 * tablet/desktop.
 */

.asta-home-bids,
.asta-home-bids *,
.asta-home-bids *::before,
.asta-home-bids *::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-home-bids {
	display:flex;
	flex-wrap:wrap;
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	overflow:hidden;
	background:#1C1B18; /* evita faixa clara caso o vídeo demore a pintar */
	font-family:Inter, Helvetica, Arial, sans-serif;
}

/* ---- Painel escuro (coluna de conteúdo) ----
   Mockup: flex:1 1 50%; display:flex; flex-direction:column;
   gap:clamp(16px,1.8cqw,26px); justify-content:center.

   O padding vertical vem do mockup (clamp(34px,4.4cqw,84px)). O padding-left
   alinha o conteúdo à margem esquerda global das outras seções: a gutter
   fluida clamp(20px,4vw,64px), ou a metade da folga do container de 1180px
   (o que for maior). O padding-right mantém um respiro antes do vídeo. */
.asta-home-bids__panel {
	flex:1 1 50%;
	min-width:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding-top:clamp(34px, 4.4vw, 84px);
	padding-bottom:clamp(34px, 4.4vw, 84px);
	padding-left:max(clamp(20px, 4vw, 64px), calc((100vw - 1180px) / 2));
	padding-right:clamp(28px, 4vw, 72px);
	background:#1C1B18;
}

/* Limita a medida de leitura dentro da metade esquerda (o mockup mantém o
   parágrafo em max-width:460px; o conteúdo como um todo fica em ~metade do
   container). */
.asta-home-bids__content {
	display:flex;
	flex-direction:column;
	gap:clamp(16px, 1.8vw, 26px);
	width:100%;
	max-width:520px;
}

/* Wrapper interno só para hospedar o hook de scroll motion
   (data-asta-scroll-motion — ver assets/asta-motion.css e
   docs/motion-system.md), envolvendo somente eyebrow/título/descrição
   (nunca os botões). `gap:inherit` reproduz o gap do pai sem duplicar o
   valor do clamp(). */
.asta-home-bids__content-inner {
	display:flex;
	flex-direction:column;
	gap:inherit;
}

/* ---- Eyebrow "LICITAÇÕES" ----
   Mockup: Inter 10px; letter-spacing:0.18em; text-transform:uppercase;
   color:#C98A8E. */
.asta-home-bids__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:#C98A8E !important;
}

/* ---- Título ----
   Mockup: Manrope 600; clamp(25px,3.6cqw,46px); line-height:1.05;
   letter-spacing:-0.03em; color:#fff; margin:0; text-wrap:pretty. */
.asta-home-bids__title {
	margin:0 !important;
	padding:0;
	font-family:Manrope, Helvetica, Arial, sans-serif !important;
	font-weight:600 !important;
	font-size:clamp(25px, 3.6vw, 46px) !important;
	line-height:1.05 !important;
	letter-spacing:-.03em !important;
	color:#fff !important;
	text-wrap:pretty;
}

/* ---- Parágrafo ----
   Mockup: clamp(13.5px,1.35cqw,17px); line-height:1.6;
   color:rgba(255,255,255,0.72); margin:0; max-width:460px. */
.asta-home-bids__text {
	margin:0 !important;
	padding:0;
	max-width:460px;
	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,.72) !important;
}

/* ---- Ações (dois CTAs lado a lado) ----
   Mockup: display:flex; flex-wrap:wrap; gap:10px. */
.asta-home-bids__actions {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}

/* ---- CTAs ----
   As regras neutralizam o que o Hello Elementor / Elementor aplicam a
   links/botões (magenta, sublinhado, box-shadow, tipografia externa) sem
   alterar tamanho, padding, raio ou comportamento definidos no mockup. */
.asta-home-bids__cta {
	display:inline-flex;
	align-items:center;
	gap:10px;
	margin:0;
	padding:14px 22px;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-size:13px !important;
	font-weight:400 !important;
	line-height:1.2 !important;
	white-space:nowrap;
	text-decoration:none !important;
	text-shadow:none !important;
	box-shadow:none !important;
	cursor:pointer;
}

/* CTA primário — Mockup: background:#A01C24; color:#fff; border:0;
   border-radius:8px; padding:14px 22px; hover background:#7E1319. */
.asta-home-bids__cta--primary {
	border:0 !important;
	border-radius:8px !important;
	background:#A01C24 !important;
	color:#fff !important;
	transition:background .18s ease;
}
.asta-home-bids__cta--primary:hover,
.asta-home-bids__cta--primary:focus-visible {
	background:#7E1319 !important;
	color:#fff !important;
}

/* CTA secundário — Mockup: background:transparent; color:#fff;
   border:1px solid rgba(255,255,255,0.35); padding:14px 22px;
   hover border-color:#fff. (o mockup não define border-radius aqui.) */
.asta-home-bids__cta--secondary {
	border:1px solid rgba(255,255,255,.35) !important;
	border-radius:0 !important;
	background:transparent !important;
	color:#fff !important;
	transition:border-color .18s ease;
}
.asta-home-bids__cta--secondary:hover,
.asta-home-bids__cta--secondary:focus-visible {
	border-color:#fff !important;
	background:transparent !important;
	color:#fff !important;
}

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

/* ---- Mídia (metade direita) ----
   Mockup: flex:1 1 40%; min-height:clamp(200px,22cqw,420px). A mídia (vídeo
   padrão OU imagem, ambas configuráveis em Asta → Home) preenche toda a área
   via object-fit:cover — o dimensionamento/encaixe é fixado com !important
   porque o reset do tema (hello-elementor) e `.elementor img/video {height:auto}`
   podem sobrepor um height de classe simples (mesmo problema já corrigido no
   Hero / feature-split). */
.asta-home-bids__media {
	position:relative;
	flex:1 1 40%;
	min-width:0;
	min-height:clamp(200px, 22vw, 420px);
	background:#141311;
	overflow:hidden;
}
.asta-home-bids__video,
.asta-home-bids__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-home-bids__video { pointer-events:none; }

/* ---- Mobile: empilha (painel escuro em cima, vídeo embaixo) ----
   Mesmo breakpoint do Hero deste plugin. O painel ocupa a largura toda e volta
   ao padding lateral fluido normal (o offset de alinhamento de desktop é
   descartado aqui); o vídeo ocupa a largura toda logo abaixo com altura própria
   (continua object-fit:cover, sem faixa vazia). */
@media (max-width:767px) {
	.asta-home-bids__panel {
		flex:1 1 100%;
		width:100%;
		padding:clamp(30px, 9vw, 56px) clamp(20px, 7vw, 40px);
	}
	.asta-home-bids__content {
		max-width:none;
	}
	.asta-home-bids__media {
		flex:1 1 100%;
		width:100%;
		min-height:clamp(220px, 60vw, 340px);
	}
	.asta-home-bids__cta {
		flex:1 1 auto;
		justify-content:center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asta-home-bids__cta--primary,
	.asta-home-bids__cta--secondary { transition:none; }
}