/* =========================================================================
   PÁGINA DE LINHA · o banner de abertura
   -------------------------------------------------------------------------
   POR QUE PRETO

   Os quatro produtos que abrem as linhas são PNG com alfa real, conferido
   canal a canal: os quatro cantos em alfa 0. Inox escovado e vidro preto
   sobre fundo escuro ganham contraste de aresta que o fundo claro apaga.

   E o preto já é a cor do cabeçalho e do rodapé deste site, então a faixa
   fecha a página em vez de parecer um bloco importado de outro lugar.
   ========================================================================= */

/* A FAIXA PRETA ENCOSTA NO CABEÇALHO PRETO.
   -------------------------------------------------------------------------
   O tema põe 40px de respiro no topo do conteúdo. Em página de texto isso
   faz sentido; aqui vira uma tarja branca de 40px presa entre o cabeçalho
   preto e o banner preto, e lê como falha de montagem. É o mesmo defeito
   que apareceu no carrinho e em minha conta.

   A classe vem do PHP, não de `:has()`, para valer em qualquer navegador.
   O respiro de BAIXO fica: ali embaixo tem produto, não faixa de cor. */
html body.dx-tem-banner-linha main.wd-content-layout { padding-top: 0; }

.dx-linha {
  /* SANGRIA ATÉ A BORDA DA JANELA.
     O --dx-sangra-linha é medido no navegador pelo linhas.js, e não
     calculado com 50vw. O motivo é a barra de rolagem: `100vw` conta a
     largura dela, então o truque de `calc(50% - 50vw)` empurra uns 15px
     para fora e cria rolagem horizontal. O valor medido não erra, e o
     fallback de 0 deixa a faixa contida caso o script não rode. */
  margin-left: calc(var(--dx-sangra-linha, 0px) * -1);
  margin-right: calc(var(--dx-sangra-linha, 0px) * -1);
  margin-bottom: 44px;
  padding: clamp(40px, 5vw, 72px) var(--dx-sangra-linha, 0px);
  background: #0B0B0A;
  color: #FFFFFF;
  overflow: hidden;   /* segura o brilho e a foto que sangram */
  position: relative;
}

.dx-linha__env {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

/* ---------- a coluna de texto ---------- */

.dx-linha__rotulo {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FE5C21;
}

/* O título fecha em 0.92 de entrelinha de propósito. Em corpo grande a
   entrelinha de texto corrido abre buracos entre as linhas e o nome
   para de ler como uma unidade. */
.dx-linha__titulo {
  margin: 0 0 20px;
  font-size: clamp(42px, 6.2vw, 78px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.dx-linha__chamada {
  max-width: 46ch;
  margin: 0 0 30px;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.52;
  color: rgba(255, 255, 255, 0.68);
}

.dx-linha__chamada strong { color: #FFFFFF; font-weight: 600; }

/* ---------- os três números ---------- */
/* Separados por fio e não por caixa: caixa dentro de faixa escura vira
   um segundo nível de fundo e suja a leitura. O fio basta para dizer
   que são três informações e não uma frase. */
.dx-linha__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.dx-linha__numeros > div {
  padding: 0 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.dx-linha__numeros > div:first-child { padding-left: 0; border-left: 0; }

.dx-linha__numeros dt {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.dx-linha__numeros dd {
  margin: 0;
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 600;
  line-height: 1.15;
  color: #FFFFFF;
  white-space: nowrap;
}

/* O preço do WooCommerce vem com <bdi> e o símbolo dentro de <span>.
   Sem isto o "R$" sai do tamanho do parágrafo e o número do título. */
.dx-linha__numeros dd .amount,
.dx-linha__numeros dd bdi { font-size: inherit; font-weight: inherit; color: inherit; }

/* ---------- o palco do produto ---------- */

.dx-linha__palco {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

/* O brilho é o que impede a foto de parecer recortada e colada. Dá ao
   produto um chão de luz, como se houvesse uma fonte atrás dele. Fica
   atrás por z-index e não escurece nada, porque é gradiente radial que
   termina em transparente. */
.dx-linha__palco::before {
  content: '';
  position: absolute;
  inset: -12% -6%;
  background: radial-gradient(
    ellipse at 50% 55%,
    rgba(254, 92, 33, 0.22) 0%,
    rgba(254, 92, 33, 0.07) 38%,
    rgba(254, 92, 33, 0) 68%
  );
  pointer-events: none;
}

.dx-linha__foto {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: auto;
  /* A sombra projetada separa o produto do fundo preto sem desenhar
     borda. Duas camadas: uma curta e fechada para a aresta, outra longa
     e aberta para o peso. */
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55))
          drop-shadow(0 48px 90px rgba(0, 0, 0, 0.42));
}

/* ---------- o texto longo, abaixo do banner ---------- */
/* 68ch é medida de leitura. A faixa preta pode correr a tela inteira
   porque ali o que manda é a imagem; aqui o que manda é a linha de
   texto, e linha de 150 caracteres faz o olho perder o começo da
   próxima. */
.dx-linha__corpo {
  max-width: 68ch;
  margin: 0 0 38px;
  font-size: 17px;
  line-height: 1.62;
  color: #3A3A37;
}

.dx-linha__corpo p { margin: 0 0 15px; }
.dx-linha__corpo p:last-child { margin-bottom: 0; }
.dx-linha__corpo strong { font-weight: 600; color: #1A1A18; }

/* O último parágrafo costuma ser o chamado para falar com a equipe.
   Sem separação ele se perde no fim do bloco. */
.dx-linha__corpo p:last-child:not(:only-child) {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid #E4E3DF;
  font-size: 15px;
  color: #6E6F6C;
}

/* ---------- telas menores ---------- */

@media (max-width: 1024px) {
  .dx-linha__env { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .dx-linha__palco { order: -1; }          /* o produto abre, depois o texto */
  .dx-linha__foto  { max-width: 440px; }
}

@media (max-width: 600px) {
  .dx-linha { margin-bottom: 32px; }
  .dx-linha__chamada { margin-bottom: 24px; }
  .dx-linha__foto { max-width: 320px; }
  .dx-linha__corpo { font-size: 16px; }

  /* OS NÚMEROS VIRAM GRADE, E O FIO DA ESQUERDA SAI.
     Em linha flexível, o terceiro número cai para a linha de baixo e
     leva o `border-left` junto. Como ele passa a ser o primeiro da sua
     linha, o fio não separa mais nada: vira um traço solto à esquerda,
     medido na tela de 390px.

     Em grade de duas colunas cada item tem lugar definido, e a separação
     passa a ser o espaço, que não deixa resto quando quebra. */
  .dx-linha__numeros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
    padding-top: 20px;
  }

  .dx-linha__numeros > div {
    padding: 0;
    border-left: 0;
  }

  /* Valor comprido como "4 tipos de grelha" não cabe em meia largura de
     390px. Ele ocupa a linha inteira em vez de ser cortado. */
  .dx-linha__numeros > div:nth-child(3) { grid-column: 1 / -1; }
  .dx-linha__numeros dd { white-space: normal; }
}