/**
 * Asta Mobili — Seção "Soluções" da Home
 * "Encontre a solução ideal para o seu ambiente."
 *
 * Reprodução visual fiel do mockup aprovado (backups/mockup/rv07). Todos os
 * valores (cores, tipografia, espaçamentos, proporções, ícones) vêm do HTML do
 * mockup. As unidades `cqw` do mockup foram convertidas para `vw` — a seção
 * ocupa 100% da largura da viewport — seguindo a mesma convenção do Hero
 * (asta-hero.css) e do Header (asta-header.css).
 *
 * O conteúdo é editável em Asta → Home (card "Soluções"); o CSS abaixo é fixo.
 * A grade (`auto-fit`) redistribui sozinha 1, 2 ou 3 cards ativos.
 *
 * Layout 100% fluido (clamp + vw), como no mockup: não há breakpoints
 * discretos próprios. A grade usa `auto-fit`/`minmax` — exatamente como no
 * mockup — para passar de 3 colunas (desktop/tablet) a 2 e depois 1 (mobile)
 * conforme a largura disponível. O CTA fica sempre abaixo dos cards.
 */

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

/* Seção full-bleed: quebra o container de conteúdo (Elementor/tema) para o
   fundo claro ocupar a largura total da viewport, como no mockup. */
.asta-solutions {
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	padding:clamp(36px, 4.6vw, 88px) clamp(20px, 4vw, 64px);
	background:#F7F5F1;
	border-top:1px solid #EAE6DF;
	font-family:Inter, Helvetica, Arial, sans-serif;
}

.asta-solutions__inner {
	width:100%;
	max-width:1180px;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	gap:clamp(22px, 2.6vw, 40px);
}

/* ---- Título ---- */
.asta-solutions__title {
	margin:0 !important;
	padding:0;
	max-width:620px;
	font-family:Manrope, Helvetica, Arial, sans-serif !important;
	font-weight:600 !important;
	font-size:clamp(23px, 3.2vw, 40px) !important;
	line-height:1.08 !important;
	letter-spacing:-.03em !important;
	color:#17161A !important;
	text-wrap:pretty;
}

/* ---- Grade de cards ----
   Mesma regra do mockup: 3 colunas quando cabem, depois 2, depois 1. */
.asta-solutions__grid {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap:clamp(10px, 1.4vw, 20px);
}

/* ---- Card ---- */
.asta-solutions__card {
	display:flex;
	flex-direction:column;
	gap:12px;
	padding:clamp(18px, 2vw, 28px);
	background:#fff;
	border:1px solid #E4E0D9;
	text-decoration:none;
	transition:border-color .18s ease;
}
.asta-solutions a { text-decoration:none; }
.asta-solutions__card:hover,
.asta-solutions__card:focus-visible {
	border-color:#17161A;
}

/* Wrapper interno só para hospedar o hook de scroll motion
   (data-asta-scroll-motion — ver assets/asta-motion.css e
   docs/motion-system.md), separado do <a> que já anima no hover
   (.asta-hover-lift). `gap:inherit` reproduz o gap do card (12px) sem
   duplicar o valor. */
.asta-solutions__card-inner {
	display:flex;
	flex-direction:column;
	gap:inherit;
}

.asta-solutions__card-icon {
	display:block;
	color:#A01C24;
	line-height:0;
}
.asta-solutions__card-icon svg {
	display:block;
	width:30px;
	height:30px;
}
/* Ícone SVG personalizado (attachment) — mesmo espaço do ícone predefinido. */
.asta-solutions__card-icon-img {
	display:block;
	width:30px !important;
	height:30px !important;
	max-width:30px !important;
	margin:0;
	object-fit:contain;
	object-position:left center;
}

.asta-solutions__card-title {
	font-family:Manrope, Helvetica, Arial, sans-serif !important;
	font-weight:500 !important;
	font-size:clamp(17px, 1.8vw, 22px) !important;
	line-height:1.14 !important;
	letter-spacing:-.015em !important;
	color:#17161A !important;
}

.asta-solutions__card-text {
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-weight:400 !important;
	font-size:clamp(12px, 1.2vw, 14px) !important;
	line-height:1.55 !important;
	color:#6E6A63 !important;
}

/* ---- CTA inferior ---- */
.asta-solutions__cta {
	align-self:flex-start;
	display:inline-flex;
	align-items:center;
	gap:10px;
	margin:0;
	padding:14px 22px;
	border:0;
	border-radius:8px;
	background:#17161A;
	color:#fff !important;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-size:13.5px !important;
	font-weight:400 !important;
	letter-spacing:.03em;
	line-height:1 !important;
	white-space:nowrap;
	text-decoration:none;
	text-shadow:none;
	cursor:pointer;
	transition:background .18s ease;
}
.asta-solutions__cta:hover,
.asta-solutions__cta:focus-visible {
	background:#A01C24;
	color:#fff !important;
}

.asta-solutions :focus-visible {
	outline:2px solid #17161A;
	outline-offset:3px;
}
.asta-solutions__cta:focus-visible {
	outline-color:#17161A;
}

@media (prefers-reduced-motion: reduce) {
	.asta-solutions__card,
	.asta-solutions__cta { transition:none; }
}