/* Hallmark · genre: modern-minimal · macrostructure: Frente BOFA (abertura em vídeo, catálogo, guia de filtros e página de campanha com formulário) · design-system: design.md · designed-as-app
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 *
 * Páginas da BOFA (/bofa/, /bofa/produtos/, /bofa/produtos/reposicao/ e /lp/bofa/). O HTML, os textos e o formulário
 * de orçamento (campos e o que ele envia) são os do protótipo original, sem alteração. O visual é o do site da R&B;
 * o logo da Donaldson BOFA no cabeçalho fica como está, sem filtro.
 * Este arquivo soma ao rb-site.css (e ao rb-produtos.css, no catálogo) só o que é próprio destas páginas.
 */

/* ---------- Cabeçalho: o menu da BOFA tem mais itens ---------- */

.bofa > header nav {
  gap: clamp(0.625rem, -0.6rem + 1.45vw, 1.75rem);
}

/* ---------- Duas etapas: extração e filtragem ---------- */

main > .bofa-two-stages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  background: var(--color-paper-2);
}

.bofa-two-stages article {
  position: relative;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  overflow: hidden;
  background: var(--color-paper);
  border-radius: var(--radius-md);
}

.bofa-two-stages article::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.1875rem;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}

/* Equipamento em fundo branco: foto inteira, sem corte */
.bofa-two-stages img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  margin-bottom: var(--space-md);
  object-fit: contain;
  transition: scale var(--dur-long) var(--ease-out);
}

.bofa-two-stages h2 {
  margin-bottom: var(--space-sm);
  font-size: var(--text-2xl);
  line-height: 1.04;
}

.bofa-two-stages p {
  max-width: 34rem;
  margin-bottom: var(--space-md);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.6;
}

@media (hover: hover) {
  .bofa-two-stages article:hover::after {
    transform: none;
  }

  .bofa-two-stages article:hover img {
    scale: 1.03;
  }
}

.bofa-two-stages article:focus-within::after {
  transform: none;
}

/* ---------- Cada estágio tem uma função: texto com a linha de filtros e, ao lado, o filtro ---------- */

main > .focused-feature {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--space-md);
}

.focused-feature > div {
  grid-column: 1 / 7;
}

.focused-feature h2 {
  margin-bottom: var(--space-md);
  font-size: var(--text-3xl);
  line-height: 1.02;
}

.focused-feature > div > p:not(.eyebrow) {
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

.focused-feature > .application-photo {
  grid-column: 8 / 13;
}

.focused-feature .application-photo img,
.nv-range img,
.nv-white img,
.filter-photo img {
  width: 100%;
  height: auto;
  background: var(--color-paper);
  border: var(--rule) solid var(--color-rule);
  border-radius: var(--radius-md);
  object-fit: contain;
}

.focused-feature .application-photo img {
  aspect-ratio: 4 / 3;
  padding: var(--space-md);
}

.nv-range {
  max-width: 43rem;
  margin-top: var(--space-lg);
}

.nv-range.nv-range-center {
  margin-inline: auto;
}

.focused-feature figcaption,
.nv-range figcaption,
.nv-white figcaption,
.filter-photo figcaption {
  margin-top: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Sobre quadro branco a dica de ampliar é clara */
.focused-feature .zoom-hint,
.nv-range > .zoom-hint,
.nv-white > .zoom-hint,
.filter-photo > .zoom-hint,
.photo-story figure:has(.pdf-equipment) > .zoom-hint {
  right: auto;
  left: var(--space-sm);
  padding: var(--space-3xs) var(--space-xs);
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  border: var(--rule) solid var(--color-rule);
  color: var(--color-ink-2);
  backdrop-filter: none;
}

/* ---------- Catálogo dentro da página inicial: sete exaustores em quatro colunas ---------- */

.bofa .collection > .products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bofa .collection .product:nth-child(n) {
  grid-column: auto;
}

.bofa .collection .product:nth-child(n) .product-image {
  aspect-ratio: 4 / 3;
  padding: var(--space-lg) var(--space-md) var(--space-md);
}

.bofa .collection .product > h3 {
  font-size: var(--text-lg);
}

/* ---------- Emissões, captação e conferência: três fotos com link ---------- */

main > .bofa-process-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.bofa-process-gallery h3 {
  margin-top: var(--space-sm);
  font-size: var(--text-lg);
  line-height: 1.2;
}

.bofa-process-gallery h3 a {
  padding-bottom: var(--space-3xs);
  background: linear-gradient(var(--color-accent), var(--color-accent)) left bottom / 0 var(--beam) no-repeat;
  text-decoration: none;
  transition: background-size var(--dur-med) var(--ease-out);
}

.bofa-process-gallery h3 a:hover,
.bofa-process-gallery h3 a:focus-visible {
  background-size: 100% var(--beam);
}

/* ---------- Filtros e exaustores no Brasil: título e foto panorâmica em cima, texto embaixo ---------- */

.hub-depth > div.bofa-depth-visual:not(.equipment-comparison) {
  grid-column: 1 / -1;
}

.bofa-depth-visual h2 {
  max-width: 14em;
  margin-bottom: var(--space-lg);
  font-size: var(--text-3xl);
  line-height: 1.02;
}

/* ---------- Catálogo de exaustores: por dentro do gabinete ---------- */

main > .nv-section > .nv-split {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}

.nv-split > div {
  grid-column: 1 / 6;
}

.nv-split h2 {
  margin-bottom: var(--space-md);
  font-size: var(--text-3xl);
  line-height: 1.02;
}

.nv-split .nv-intro {
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

.nv-split > figure {
  grid-column: 7 / 13;
}

.nv-white img {
  aspect-ratio: 3 / 2;
}

/* ---------- Filtros de reposição ---------- */

/* Abertura com a linha de filtros ao lado do título */
main > .intro:has(> .nv-range) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: center;
  column-gap: var(--space-md);
}

.intro:has(> .nv-range) > :not(figure) {
  grid-column: 1 / 8;
}

.intro > .nv-range {
  grid-column: 8 / 13;
  grid-row: 1 / span 3;
  align-self: center;
  margin-top: 0;
}

/* Foto do filtro: a legenda fica na margem, alinhada ao índice */
.filter-photo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  column-gap: var(--space-md);
  padding: var(--space-2xl) var(--pad) 0;
}

.filter-photo > img {
  grid-column: 5 / 13;
  grid-row: 1;
  aspect-ratio: 16 / 9;
  padding: var(--space-md);
}

.filter-photo figcaption {
  grid-column: 1 / 4;
  grid-row: 1;
  margin-top: 0;
  padding-top: var(--space-sm);
  border-top: var(--beam) solid var(--color-accent);
}

.filter-photo > .zoom-hint {
  top: calc(var(--space-2xl) + var(--space-sm));
  left: calc(var(--pad) + (100% - 2 * var(--pad) + var(--space-md)) / 3 + var(--space-sm));
}

/* Vídeos do fabricante */
main > .filter-videos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-md);
}

.filter-videos > .eyebrow {
  grid-column: 1 / -1;
}

.filter-videos > h2 {
  grid-column: 1 / 7;
  font-size: var(--text-3xl);
  line-height: 1.02;
}

.filter-videos > p:not(.eyebrow) {
  grid-column: 8 / 13;
  align-self: end;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

.video-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.video-grid iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--color-paper-2);
  border: 0;
  border-radius: var(--radius-md);
}

.video-grid h3 {
  margin-top: var(--space-sm);
  font-size: var(--text-lg);
  line-height: 1.2;
}

.filter-videos > .text-link {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: var(--space-lg);
}

/* ---------- Página de campanha ---------- */

/* Abertura: texto à esquerda, filtro em quadro branco à direita */
main > .campaign-hero,
main > .qualification-hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--space-md);
  padding-block: var(--space-2xl);
  background: var(--color-paper-2);
}

.campaign-hero::after,
.qualification-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--beam);
  background: var(--color-accent);
  transform-origin: left;
}

.campaign-hero > div,
.qualification-hero > div {
  grid-column: 1 / 8;
}

.campaign-hero h1,
.qualification-hero h1 {
  max-width: none;
  font-size: clamp(2.25rem, 1.1rem + 3.9vw, 4.75rem);
  line-height: 0.98;
}

.campaign-hero .lead,
.qualification-hero .lead {
  margin-bottom: var(--space-lg);
}

.campaign-hero-image {
  grid-column: 8 / 13;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  padding: var(--space-md);
  background: var(--color-paper);
  border-radius: var(--radius-md);
  object-fit: contain;
}

/* Na avaliação, à direita fica a foto ilustrativa, em moldura 4:3 */
.qualification-hero > .application-photo {
  position: relative;
  grid-column: 8 / 13;
  margin: 0;
}

.qualification-hero .application-photo > img,
.qualification-hero .application-photo > .rb-frame {
  width: 100%;
  border-radius: var(--radius-md);
}

.qualification-hero .application-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.qualification-hero .application-photo .rb-frame img {
  border-radius: 0;
}

.qualification-hero .application-photo figcaption {
  margin-top: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
  .qualification-hero > div > * {
    animation: rb-rise var(--dur-long) var(--ease-out) backwards;
  }

  .qualification-hero > div > h1 {
    animation-name: rb-unmask;
    animation-delay: 120ms;
  }

  .qualification-hero > div > .lead {
    animation-delay: 320ms;
  }

  .qualification-hero > div > .button {
    animation-delay: 440ms;
  }

  .qualification-hero figcaption {
    animation: rb-fade var(--dur-long) var(--ease-out) 700ms backwards;
  }
}

@media (max-width: 1000px) {
  .qualification-hero > .application-photo {
    grid-column: 1 / -1;
    max-width: 34rem;
  }
}

/* Onde a extração merece atenção / Qual situação se parece com a sua */
main > .qualification-section {
  background: var(--color-paper-2);
  scroll-margin-top: var(--header-h);
}

main > .qualification-section + .hub-depth + .qualification-section {
  background: none;
}

.qualification-section > h2 {
  max-width: 15em;
  font-size: var(--text-3xl);
  line-height: 1.02;
}

.qualification-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.qualification-grid article {
  position: relative;
  padding: var(--space-md);
  background: var(--color-paper);
  border-radius: var(--radius-md);
}

.qualification-grid article::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-md);
  width: 2.5rem;
  height: var(--beam);
  background: var(--color-accent);
}

.qualification-grid h3 {
  margin-bottom: var(--space-xs);
  font-size: var(--text-lg);
  line-height: 1.2;
}

.qualification-grid p {
  color: var(--color-ink-2);
  line-height: 1.6;
}

/* Opções de situação: botões de escolha */
.need-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-xl);
}

.need-options button {
  min-height: 3.5rem;
  padding: var(--space-sm) var(--space-md);
  white-space: nowrap;
  background: var(--color-paper);
  border: var(--rule) solid var(--color-ink);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}

.need-options button:hover {
  border-color: var(--color-accent-deep);
  color: var(--color-accent-deep);
}

.need-options button[aria-pressed="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

.need-options button:active {
  transform: scale(0.98);
}

.need-guidance {
  max-width: 46rem;
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-paper-2);
  border-left: var(--beam) solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-ink-2);
  line-height: 1.6;
}

/* Orçamento: texto à esquerda, formulário à direita */
main > .quote-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--space-md);
  background: var(--color-paper-2);
  scroll-margin-top: var(--header-h);
}

.quote-section > div {
  grid-column: 1 / 6;
  position: sticky;
  top: calc(var(--header-h) + var(--space-lg));
}

.quote-section h2 {
  margin-bottom: var(--space-md);
  font-size: var(--text-2xl);
  line-height: 1.04;
}

.quote-section > div > p:not(.eyebrow) {
  margin-bottom: var(--space-sm);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

.quote-section > div a,
.consent a,
main > .sources a {
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--color-ink) 45%, transparent);
  text-decoration-thickness: var(--rule);
  text-underline-offset: 0.25em;
}

.quote-section > div a:hover,
.consent a:hover,
main > .sources a:hover {
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: var(--beam);
}

#bofa-quote {
  grid-column: 7 / 13;
  padding: var(--space-lg);
  background: var(--color-paper);
  border-radius: var(--radius-md);
}

/* Campo que só existe para barrar robôs: fica fora da tela, como no original */
#bofa-quote .hp {
  position: absolute;
  left: -10000px;
}

#bofa-quote .consent {
  color: var(--color-ink-2);
  font-weight: 400;
  line-height: 1.6;
}

#bofa-quote .consent input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0 var(--space-2xs) 0 0;
  vertical-align: -0.1875rem;
  accent-color: var(--color-accent-deep);
}

/* Dúvidas e referências, fora de uma página de leitura */
main > .faq {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-md);
}

main > .faq > h2 {
  grid-column: 1 / 6;
  grid-row: 1 / span 12;
  font-size: var(--text-3xl);
  line-height: 1.02;
}

main > .faq > details {
  grid-column: 7 / 13;
}

main > .sources {
  margin: 0 var(--pad) var(--space-section);
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
}

main > .sources h2 {
  margin-bottom: var(--space-xs);
  font-size: var(--text-lg);
  line-height: 1.2;
}

main > .sources p {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ---------- Entrada da abertura da campanha (sem depender de script) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .campaign-hero > div > div > * {
    animation: rb-rise var(--dur-long) var(--ease-out) backwards;
  }

  .campaign-hero > div > div > h1 {
    animation-name: rb-unmask;
    animation-delay: 120ms;
  }

  .campaign-hero > div > div > .lead {
    animation-delay: 320ms;
  }

  .campaign-hero > div > div > .button {
    animation-delay: 440ms;
  }

  .campaign-hero::after,
  .qualification-hero::after {
    animation: rb-beam 1500ms var(--ease-in-out) 250ms backwards;
  }
}

/* ---------- Telas médias e celular ---------- */

@media (max-width: 1200px) {
  .bofa .collection > .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .qualification-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .need-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1000px) {
  main > .focused-feature,
  .filter-photo,
  main > .filter-videos,
  main > .campaign-hero,
  main > .qualification-hero,
  main > .quote-section,
  main > .faq,
  main > .intro:has(> .nv-range) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-lg);
  }

  .focused-feature > div,
  .focused-feature > .application-photo,
  .filter-photo > img,
  .filter-photo figcaption,
  .filter-videos > h2,
  .filter-videos > p:not(.eyebrow),
  .campaign-hero > div,
  .qualification-hero > div,
  .campaign-hero-image,
  .quote-section > div,
  #bofa-quote,
  main > .faq > h2,
  main > .faq > details,
  .intro:has(> .nv-range) > :not(figure),
  .intro > .nv-range,
  .nv-split > div,
  .nv-split > figure {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  main > .intro:has(> .nv-range),
  main > .filter-videos,
  main > .faq {
    row-gap: 0;
  }

  .intro > .nv-range,
  .nv-split > figure {
    margin-top: var(--space-lg);
  }

  .filter-videos > p:not(.eyebrow) {
    margin-top: var(--space-md);
  }

  main > .faq > h2 {
    margin-bottom: var(--space-lg);
  }

  .filter-photo {
    padding-top: var(--space-xl);
  }

  .filter-photo figcaption {
    padding-top: 0;
    border-top: 0;
  }

  .filter-photo > .zoom-hint {
    top: calc(var(--space-xl) + var(--space-sm));
    left: calc(var(--gutter) + var(--space-sm));
  }

  .campaign-hero-image {
    max-width: 34rem;
  }

  .quote-section > div {
    position: static;
  }
}

@media (max-width: 860px) {
  /* Em uma coluna, as fotos de equipamento não crescem além do necessário */
  .bofa-two-stages img {
    max-height: 20rem;
  }

  .bofa-filter-gallery .revision-grid img {
    max-width: 24rem;
  }

  main > .bofa-two-stages,
  main > .bofa-process-gallery,
  .video-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bofa .collection > .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .qualification-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .need-options button {
    min-height: 3.25rem;
    padding-inline: var(--space-sm);
    font-size: min(var(--text-sm), 3.7vw);
  }

  #bofa-quote {
    padding: var(--space-md);
  }
}

@media (max-width: 420px) {
  .bofa .collection > .products {
    grid-template-columns: minmax(0, 1fr);
  }
}