/*
 * home-ft-solutions.css — seções compradores (#buyers), fornecedores (#suppliers) e quem somos (#knowhow) da Home
 * pública no tema Fixtres: Views/Home/Sections/_FtHomeBuyers|_FtHomeSuppliers|_FtHomeKnowhow.cshtml e os blocos
 * de texto Views/Home/Blocks/{idioma}/_FtSolutionsToBuyer|_FtSolutionsToSupplier|_FtKnowhow.cshtml.
 * Plano docs/Features/support.md, passo A3. Porte das regras .split/.sticky/.panel/.boxes/.box/.knowhow/.card/
 * .globe do mockup aprovado em 2026-09-28, com a regra de nomes de home-ft.css (a classe X do mockup vira ft-home-X).
 *
 * Vai no bundle ~/wwwroot/css/home-ft junto de home-ft.css, de onde vêm os tokens (--ft-*, --ft-home-*),
 * .ft-home-wrap, os botões .ft-home-btn*, os gradientes .ft-home-grad-anim--buyers/--suppliers, a textura
 * .ft-home-grad-tex e o tratamento de prefers-reduced-motion (gradiente parado, [data-reveal] sem transição).
 * Nenhuma regra daqui depende de vir depois de home-ft.css: toda sobreposição tem especificidade maior.
 *
 * PARALAXE — o .b-sticky legado (home.css:390-395 compradores, :484 fornecedores: fundo sticky, top 2rem) vira a
 * coluna .ft-home-sticky, grudada abaixo do header enquanto o conteúdo rola. Duas condições, e as duas falham
 * CALADAS (o painel só deixa de grudar, sem erro):
 *   - nenhum ancestral com overflow hidden/auto/scroll: ele vira o contêiner de rolagem do sticky, que então
 *     gruda nele e nunca na janela. Por isso a seção corta com overflow: clip, que não cria contêiner;
 *   - a coluna precisa de align-self: start (e o grid, align-items: start): esticada à altura da linha, que é a
 *     altura do conteúdo, ela não tem espaço para deslizar.
 * Em tela <= 900px o painel deixa de grudar e sobe para antes do conteúdo (order: -1).
 */

/* ---------- Compradores e fornecedores (seções divididas) ---------- */
.ft-home-split { position: relative; padding-block: 96px; overflow: clip; }
.ft-home-split .ft-home-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.ft-home-split--suppliers .ft-home-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ft-home-sticky { position: sticky; top: calc(var(--ft-home-header-h) + 24px); align-self: start; }
.ft-home-panel {
    position: relative; border-radius: 24px; padding: 32px 22px; overflow: hidden; min-height: 420px;
    display: grid; place-items: center; box-shadow: var(--ft-shadow-lg);
}
.ft-home-panel img.ft-home-fig { position: relative; z-index: 2; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .22)); }
.ft-home-panel .ft-home-grad-tex { inset: auto -30% -20% auto; width: 130%; opacity: .3; }
.ft-home-split h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; }
.ft-home-split h2 span, .ft-home-split h3 span { color: var(--ft-home-orange); }
.ft-home-split--suppliers h2 span, .ft-home-split--suppliers h3 span { color: var(--ft-home-green); }
.ft-home-split h3 { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; color: var(--ft-text-secondary); margin-top: 12px; max-width: 42ch; }
.ft-home-split .ft-home-cta { margin-top: 22px; }
.ft-home-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.ft-home-box {
    background: var(--ft-bg-page); border: 1px solid var(--ft-border-color); border-radius: 14px; padding: 18px 18px 16px;
    display: grid; gap: 6px; align-content: start; border-top: 3px solid var(--ft-home-orange);
}
.ft-home-split--suppliers .ft-home-box { border-top-color: var(--ft-home-green); }
.ft-home-box h4 { font-size: 16px; font-weight: 700; }
.ft-home-box p { font-size: 14.5px; color: var(--ft-text-secondary); }
@media (max-width: 900px) {
    .ft-home-split .ft-home-wrap, .ft-home-split--suppliers .ft-home-wrap { grid-template-columns: 1fr; }
    .ft-home-sticky { position: static; order: -1; }
    .ft-home-panel { min-height: 300px; }
    .ft-home-split { padding-block: 64px; }
}
@media (max-width: 560px) { .ft-home-boxes { grid-template-columns: 1fr; } }

/* ---------- Quem somos (know-how) ---------- */
/* overflow: hidden aqui é seguro (não há sticky dentro) e corta o globo, que vaza pela direita. */
.ft-home-knowhow { position: relative; background: var(--ft-home-green-pale); padding-block: 96px; overflow: hidden; }
.ft-home-knowhow .ft-home-globe { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: min(46vw, 560px); opacity: .9; pointer-events: none; }
.ft-home-knowhow .ft-home-wrap { position: relative; }
.ft-home-knowhow .ft-home-card {
    background: rgba(255, 255, 255, .78); backdrop-filter: blur(12px); border: 1px solid rgba(0, 137, 39, .18);
    border-radius: 24px; padding: 40px; max-width: 900px; box-shadow: var(--ft-shadow-lg);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px;
}
.ft-home-knowhow h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; }
.ft-home-knowhow h2 span { color: var(--ft-home-green); }
.ft-home-knowhow p { margin-top: 12px; color: var(--ft-text-secondary); font-size: 15.5px; }
.ft-home-knowhow .ft-home-tec p { font-size: 18px; color: var(--ft-text-primary); font-weight: 500; }
@media (max-width: 900px) {
    .ft-home-knowhow .ft-home-card { grid-template-columns: 1fr; padding: 28px 22px; }
    .ft-home-knowhow .ft-home-globe { top: auto; bottom: -20%; transform: none; opacity: .35; width: 70vw; }
}