/* ==========================================================================
   Pedir orçamento (/monte-seu-site/) - regras só desta página.
   Carregada depois de site.css. Usa os tokens e as variáveis de contexto
   (--c-*) de site.css. O comportamento é de /assets/js/monte-site.js
   (ganchos data-builder, data-sum-*, data-match*, data-builder-error).
   Página gerada por scratchpad/pages/orcamento/build_orcamento.py.

   (O herói .page-hero--split vem de site.css, bloco 10; aqui só a
   proporção das colunas de 900 a 959, abaixo.)
   1. Página: passos + resumo (lado a lado a partir de 900 x 600)
   2. Nota de sistemas, acima do passo 1
   3. Passos: seções numeradas, separadas por linhas finas
   4. Grades de escolha (pela largura da coluna: container queries)
   5. Passo 5: campos
   6. Resumo: lista, modelo mais parecido, erro e envio
   7. Abaixo de 900 de largura OU de 600 de altura: o resumo vira uma faixa
      cinza depois do formulário (o botão fica logo depois do passo 5)
   8. A partir de 900 x 600: painel ao lado, fixo ao rolar
   ========================================================================== */


/* Herói: de 900 a 959 o texto de abertura teria 5 linhas na coluna 5/12 e
   começaria acima do sobretítulo; colunas iguais deixam 4 linhas (como a
   partir de 960) e o título continua em 2. */
@media (min-width: 900px) and (max-width: 959px) {
  .page-hero--orcamento .page-hero__grid--aside {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}


/* ==========================================================================
   1. Página
   ========================================================================== */
.orc {
  --resumo-w: 312px;
  padding-top: clamp(40px, 1.5rem + 2.4vw, 64px);
}
.orc__form {
  display: grid;
  row-gap: clamp(48px, 2rem + 2vw, 64px);
}
/* a coluna dos passos é um container: as grades se ajustam à largura dela */
.orc__passos {
  --num-w: 1.75rem;            /* coluna dos números dos passos (e do ícone da nota) */
  min-width: 0;
  container: passos / inline-size;
}


/* ==========================================================================
   2. Nota de sistemas (link para o WhatsApp com a mensagem de sistemas)
   ========================================================================== */
.orc-sistemas {
  margin-bottom: clamp(28px, 1.25rem + 1.5vw, 40px);
  font-size: var(--fs-small);
  color: var(--c-text);
}
.orc-sistemas .icon { margin-top: 3px; }
/* o link não parte ("Fale direto no WhatsApp" fica inteiro); na tela de 320 a pergunta
   ocupa duas linhas e o equilíbrio evita "aplicativo?" sozinho na do meio */
@media (max-width: 339px) {
  .orc-sistemas > span { text-wrap: balance; }
}
/* coluna larga: o ícone fica na coluna dos números e o texto alinha com as perguntas */
@container passos (min-width: 600px) {
  .orc-sistemas { column-gap: calc(var(--num-w) + var(--s-3) - 18px); }
}


/* ==========================================================================
   3. Passos
   A legenda flutua (float) para sair do desenho especial do <fieldset> e
   virar um bloco comum: número + pergunta (h2) na mesma linha.
   ========================================================================== */
.passos {
  display: grid;
  row-gap: clamp(40px, 1.75rem + 2vw, 64px);
}
.passo {
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-rule-strong);
}
.passo:first-child { border-top-color: var(--c-heading); }
.passo__legend {
  float: left;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
}
.passo__num {
  flex: none;
  min-width: var(--num-w);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  color: var(--c-link);
  font-variant-numeric: tabular-nums;
}
.passo__title {
  min-width: 0;
  font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.022em;
}
.passo__corpo { clear: both; }

/* coluna larga: o conteúdo do passo alinha com a pergunta, os números ficam numa coluna */
@container passos (min-width: 600px) {
  .passo__corpo { padding-left: calc(var(--num-w) + var(--s-3)); }
}


/* ==========================================================================
   4. Grades de escolha (.choice e .check-chip vêm de site.css)
   ========================================================================== */
.orc-grid { gap: var(--s-3); }
.orc-grid .choice--largo { grid-column: 1 / -1; }
@container passos (min-width: 440px) {
  .orc-grid--segmento,
  .orc-grid--formato,
  .orc-grid--funcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container passos (min-width: 760px) {
  .orc-grid--segmento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   5. Passo 5: campos
   < 440: um por linha · 440-719: nome; empresa + cidade; logo + prazo; texto
   >= 720: nome + empresa + cidade; logo + prazo; texto
   ========================================================================== */
.orc-campos { display: grid; gap: var(--s-5) var(--s-4); }
.orc-campos .textarea { min-height: 112px; }
@container passos (min-width: 440px) {
  .orc-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orc-campo--nome,
  .orc-campo--obs { grid-column: 1 / -1; }
}
@container passos (min-width: 720px) {
  .orc-campos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .orc-campo--nome,
  .orc-campo--empresa,
  .orc-campo--cidade { grid-column: span 2; }
  .orc-campo--logo,
  .orc-campo--prazo { grid-column: span 3; }
  .orc-campo--obs { grid-column: 1 / -1; }
}


/* ==========================================================================
   6. Resumo
   .resumo > .resumo__titulo + .resumo__corpo (a lista; o único trecho que
   pode rolar) + .resumo__modelo + .resumo__envio
   ========================================================================== */
.resumo__titulo {
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.resumo__corpo { margin-top: var(--s-4); }
.resumo__corpo:focus-visible { outline-offset: 4px; border-radius: 2px; }
.resumo__lista { border-top: 1px solid var(--hairline-strong); }
.resumo__linha {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: 10px;
  border-bottom: 1px solid var(--hairline-strong);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.resumo__linha dt { color: var(--ink-muted); }
.resumo__linha dd { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; text-wrap: pretty; }

/* Modelo mais parecido: moldura de navegador + nome + "Ver demonstração" (o cartão todo é o link) */
.orc-match { margin-top: var(--s-6); }
.orc-match__label { margin-bottom: var(--s-3); }
.orc-match__card {
  position: relative;
  display: grid;
  gap: var(--s-3) var(--s-4);
}
.orc-match__media { min-width: 0; }
.orc-match__media .browser {
  box-shadow: 0 0 0 1px rgba(10, 31, 68, 0.1), var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.orc-match__body { min-width: 0; }
.orc-match__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.orc-match__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--link);
  white-space: nowrap;
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.orc-match__link .icon { width: 18px; height: 18px; transition: transform 0.2s var(--ease); }
.orc-match__link::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 1;
  border-radius: var(--r-sm);
}
.orc-match__link:focus-visible { outline: none; }
.orc-match__link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 0; }
.orc-match__card:hover .orc-match__link { text-decoration-line: underline; }
.orc-match__card:hover .orc-match__link .icon { transform: translateX(3px); }
.orc-match__card:hover .browser {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(10, 31, 68, 0.12), 0 18px 32px -22px rgba(10, 31, 68, 0.5);
}

/* Erro, botão e nota */
.resumo__envio {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.resumo__botao { white-space: normal; padding-inline: 16px; }
.resumo__nota {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-muted);
}
@media (max-width: 359px) {
  .resumo__botao { font-size: var(--fs-small); padding-inline: 12px; }
}


/* ==========================================================================
   7. Abaixo de 900 de largura, ou em tela baixa (menos de 600 de altura:
   celular deitado, notebook com zoom), o resumo vem depois do passo 5,
   numa faixa cinza de ponta a ponta que encosta no rodapé: o botão de
   envio fica logo depois do último campo. (Um painel ao lado que não
   acompanha a rolagem deixaria o botão lá no topo da página.)
   O fundo cinza e a linha fina do topo passam das bordas da coluna por
   border-image (sem mexer na largura nem criar rolagem lateral); o
   conteúdo fica alinhado ao container em qualquer largura.
   No resumo largo (tablet), a lista fica à esquerda e o modelo à direita.
   ========================================================================== */
@media (max-width: 899px), (max-height: 599px) {
  .orc { padding-bottom: 0; }
  .orc__resumo {
    padding-block: clamp(40px, 1.5rem + 3vw, 64px) clamp(48px, 2rem + 3vw, 72px);
    border-image: linear-gradient(var(--hairline) 0 1px, var(--paper-alt) 0) fill 0 / 0 / 0 100vmax;
    container: resumo / inline-size;
  }
  .orc-match__media { max-width: 28rem; }

  @container resumo (min-width: 560px) {
    .resumo {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-areas:
        "titulo titulo"
        "corpo  modelo"
        "envio  envio";
      column-gap: var(--s-10);
      align-items: start;
    }
    .resumo__titulo { grid-area: titulo; }
    .resumo__corpo { grid-area: corpo; }
    .resumo__modelo { grid-area: modelo; }
    .resumo__envio { grid-area: envio; }
    .resumo:has([data-match][hidden]) .resumo__corpo { grid-column: 1 / -1; }
    .orc-match { margin-top: var(--s-4); }
    .resumo__envio {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      column-gap: var(--s-6);
      margin-top: var(--s-8);
    }
    .resumo__erro { grid-column: 1 / -1; }
    .resumo__botao { width: auto; padding-inline: 26px; }
    .resumo__nota { max-width: 22rem; }
  }
}


/* ==========================================================================
   8. A partir de 900 x 600: painel cinza ao lado dos passos, com o modelo
   em miniatura, fixo ao rolar. Só a lista rola por dentro se ficar longa:
   o título, o modelo mais parecido e o botão de envio ficam sempre à vista.
   ========================================================================== */
@media (min-width: 900px) and (min-height: 600px) {
  .orc { --resumo-w: 320px; }
  .orc__form {
    grid-template-columns: minmax(0, 1fr) var(--resumo-w);
    column-gap: var(--s-10);
    align-items: start;
  }
  .orc__resumo {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
  }
  .resumo {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--header-h) - 2 * var(--s-4));
    padding: var(--s-5);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--paper-alt);
  }
  .resumo__titulo,
  .resumo__modelo,
  .resumo__envio { flex: none; }
  .resumo__titulo { font-size: 1.125rem; letter-spacing: -0.015em; }
  /* lista longa em tela baixa: rola por dentro, com sombras nas bordas só quando há mais conteúdo */
  .resumo__corpo {
    flex: 0 1 auto;
    min-height: 0;
    margin-top: 10px;
    overflow-y: auto;
    background:
      linear-gradient(var(--paper-alt) 40%, rgba(244, 246, 249, 0)) top / 100% 20px no-repeat local,
      linear-gradient(rgba(244, 246, 249, 0), var(--paper-alt) 60%) bottom / 100% 20px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(10, 31, 68, 0.16), rgba(10, 31, 68, 0)) top / 100% 8px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(10, 31, 68, 0.16), rgba(10, 31, 68, 0)) bottom / 100% 8px no-repeat scroll;
  }
  .resumo__linha { padding-block: var(--s-2); }
  /* modelo: miniatura à esquerda, nome e link à direita */
  .orc-match { margin-top: var(--s-4); }
  .orc-match__card {
    grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
    column-gap: var(--s-3);
    align-items: center;
  }
  .orc-match__name { font-size: 1rem; }
  .orc-match__link { font-size: var(--fs-xs); }
  .resumo__envio { margin-top: var(--s-4); }
  .resumo__botao { font-size: var(--fs-small); padding-inline: 14px; }
}
@media (min-width: 1100px) and (min-height: 600px) {
  .orc { --resumo-w: 360px; }
  .orc__form { column-gap: clamp(48px, 5vw, 72px); }
  .resumo { padding: var(--s-6); }
  .orc-match__card { column-gap: var(--s-4); }
  .resumo__botao { font-size: 1rem; padding-inline: 16px; }
}