/* ==========================================================================
   EVM Reboques — Sobre a EVM (sobre.html) · v2.4
   Somente o layout específico desta página. Tokens e componentes (selos de
   origem, foto, lightbox, palco, etapas, botões de contato) vêm de
   styles.css. v2.1: sem 3D nesta página — o topo é um mosaico com três
   fotografias reais; títulos leves com .title-accent. v2.2: as etapas do
   atendimento se revelam com a rolagem (só onde o navegador suporta e sem
   movimento reduzido). v2.4 (produção): a seção de fotos a produzir saiu;
   "Onde estamos" com endereço, horário, WhatsApp e telefone. v2.5 (foto +
   3D, docs/FOTO-3D.md §3): ao lado do catálogo, a fotografia real e as
   vistas do mesmo reboque lado a lado — "a foto prova, o desenho explica"
   (sem cotas enquanto a ficha estiver sob consulta).

   01 Topo (texto + mosaico de fotos reais)
   02 Quem somos + foto real e vistas do mesmo reboque
   03 Painéis recuados e compromissos
   04 Onde estamos
   05 Como é o atendimento (e revelação pela rolagem)
   ========================================================================== */


/* --------------------------------------------------------------------------
   01 Topo: trilha; texto à esquerda (5/12) e mosaico à direita (7/12) a
   partir de 900 px; empilhados abaixo disso. O respiro superior vem de
   .page-top.
   -------------------------------------------------------------------------- */
.sobre-hero {
  padding-bottom: var(--section-space-tight);
}

.sobre-hero .breadcrumb {
  margin-bottom: clamp(24px, 4vw, 48px);
}

.sobre-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

@media (min-width: 900px) {
  .sobre-hero__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.sobre-hero__text {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 18px;
  min-width: 0;
}

.sobre-hero__text h1 {
  max-width: 14ch;
}

.sobre-hero__text .lead {
  max-width: 52ch;
}

.sobre-hero__text .btn-row {
  margin-top: 6px;
}

/* Mosaico: < 600 a foto principal na largura toda e as duas menores lado a
   lado; ≥ 600 a principal à esquerda (7/12) com a altura das duas menores
   empilhadas à direita (5/12), preenchendo a moldura (cover: foto ao ar livre,
   o corte é só de grama e céu). As menores ficam inteiras (contain) numa
   moldura 16:9 sobre --paper-2. */
.sobre-mosaic {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sobre-mosaic__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sobre-mosaic__item {
  position: relative;
  min-width: 0;
}

.sobre-mosaic__item--lead {
  grid-column: 1 / -1;
}

/* Cantos: a principal com --radius-lg (padrão do .photo); as menores com --radius */
.sobre-mosaic__item:not(.sobre-mosaic__item--lead) .photo {
  --photo-radius: var(--radius);
}

.sobre-mosaic__item:not(.sobre-mosaic__item--lead) .photo__img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* Selo sobre a principal: no celular estreito o texto pode quebrar */
.sobre-mosaic__item--lead .badge--overlay {
  max-width: calc(100% - 24px);
}

@media (min-width: 600px) {
  .sobre-mosaic__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 10px;
  }

  .sobre-mosaic__item--lead {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 220px;
  }

  /* A principal não define a altura da linha: ocupa a célula inteira */
  .sobre-mosaic__item--lead > .photo {
    position: absolute;
    inset: 0;
  }

  .sobre-mosaic__item--lead .photo__open,
  .sobre-mosaic__item--lead .photo__img {
    height: 100%;
  }

  .sobre-mosaic__item--lead .photo__img {
    aspect-ratio: auto;
  }
}

/* Legenda do mosaico: nomes dos modelos (links para a página de cada um) */
.sobre-mosaic__caption {
  color: var(--fg-2);
  font-size: .875rem;
  line-height: 1.6;
}

.sobre-mosaic__caption a {
  color: var(--accent-fg);
  font-weight: 600;
}

/* Texto alternativo quando o JavaScript está desligado */
.sobre-noscript {
  max-width: 32ch;
  padding: 24px;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.5;
  text-align: center;
}


/* --------------------------------------------------------------------------
   02 Quem somos: texto editorial; abaixo, "a foto prova, o desenho explica"
   (v2.5): o texto do catálogo, a fotografia real e as vistas do mesmo
   reboque (sem cotas sob consulta; com cotas com a ficha validada)
   -------------------------------------------------------------------------- */
.sobre-story__row + .sobre-story__row {
  margin-top: clamp(56px, 8vw, 112px);
}

/* < 900: texto, foto e vistas empilhados. ≥ 900 sem as vistas (sem script
   ou sem ilustrações): foto (7/12) à esquerda e texto (5/12) à direita, como
   na v2.4. ≥ 900 com as vistas (.is-paired, posto pelo script): texto e foto
   na coluna da esquerda (5/12) e as vistas à direita (7/12), centradas na
   altura das duas — a foto e o desenho lado a lado. */
.sobre-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 48px);
}

@media (min-width: 900px) {
  .sobre-proof {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "photo text";
    align-items: center;
    column-gap: clamp(32px, 5vw, 80px);
  }

  .sobre-proof__text {
    grid-area: text;
  }

  .sobre-proof__photo {
    grid-area: photo;
  }

  .sobre-proof__drawing {
    grid-area: drawing;
  }

  /* A sobra de altura (vistas mais altas que texto + foto) fica abaixo da
     foto, que sobe para junto do texto */
  .sobre-proof.is-paired {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "text drawing"
      "photo drawing";
    grid-template-rows: auto 1fr;
    align-items: start;
    row-gap: clamp(24px, 3vw, 36px);
  }

  .sobre-proof.is-paired > .sobre-proof__drawing {
    align-self: center;
  }
}

.sobre-story__row h2 {
  max-width: 18ch;
}

.sobre-story__prose {
  max-width: 62ch;
  color: var(--fg-2);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.sobre-drawing {
  min-width: 0;
  margin: 0;
}

/* Mesma proporção do viewBox do desenho (1200 × 760) */
.sobre-drawing__stage {
  aspect-ratio: 1200 / 760;
}

/* Celular: diagramação compacta do desenho (viewBox 720 × 840) */
@media (max-width: 599.98px) {
  .sobre-drawing__stage {
    aspect-ratio: 720 / 840;
  }
}

/* Legenda: selo do desenho + texto técnico (quebra no celular) */
.sobre-drawing__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
}

.sobre-drawing__caption .stage__caption {
  min-width: 0;
  margin: 0;
}

/* Vistas sem cotas (v2.5): legenda dos números das peças, numa linha própria
   da legenda (o número em mono, na cor de destaque: ≥ 7:1 sobre o fundo claro) */
.sobre-drawing__legend {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fg-2);
  font-size: .875rem;
  line-height: 1.5;
}

.sobre-drawing__legend-num {
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Fotografia real ao lado do catálogo (proporção do próprio arquivo): o selo
   pode quebrar em duas linhas no celular estreito, sem sair da foto */
.sobre-story__photo .badge--overlay {
  max-width: calc(100% - 24px);
}

.sobre-story__aside {
  display: grid;
  justify-items: start;
  gap: 16px;
  min-width: 0;
  max-width: 34rem;
}

.sobre-story__aside > .keyspecs {
  justify-self: stretch;
  margin-block: 8px 0;
}


/* --------------------------------------------------------------------------
   03 Painéis recuados (v2) e compromissos em cartões brancos
   -------------------------------------------------------------------------- */
/* Como a faixa de chamada: 12 px das bordas da janela, cantos --radius-lg.
   As margens verticais colapsam entre painéis vizinhos. */
.sobre-inset {
  margin: 12px;
  border-radius: var(--radius-lg);
}

.sobre-values {
  gap: 12px;
}

/* Link alinhado na base de cada cartão */
.sobre-value {
  grid-template-rows: auto auto 1fr auto;
  padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.4vw, 26px) 14px;
  background-color: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}

.sobre-value__link {
  justify-self: start;
  margin-top: 4px;
  font-size: .9375rem;
}


/* --------------------------------------------------------------------------
   04 Onde estamos: endereço (link para o mapa), horário, WhatsApp e telefone
   num cartão branco sobre o painel, com os botões de WhatsApp e "Ligar"
   -------------------------------------------------------------------------- */
.sobre-contact {
  display: grid;
  gap: 24px;
  min-width: 0;
  padding: clamp(20px, 3vw, 32px);
  background-color: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}

.sobre-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sobre-facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.sobre-facts__row:first-child {
  padding-top: 0;
}

.sobre-facts__label {
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sobre-facts__value {
  min-width: 0;
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (min-width: 600px) {
  .sobre-facts__row {
    grid-template-columns: minmax(8.5rem, 2fr) minmax(0, 5fr);
    align-items: baseline;
  }
}


/* --------------------------------------------------------------------------
   05 Como é o atendimento: três cartões arredondados; ≥ 900 em linha, com
   uma seta de fluxo centrada no vão entre eles
   -------------------------------------------------------------------------- */
.sobre-steps {
  --steps-gap: clamp(16px, 2.4vw, 32px);
  gap: var(--steps-gap);
}

.sobre-steps > .step {
  padding: clamp(20px, 2.6vw, 28px);
  background-color: var(--paper-2);
  border: 0;
  border-radius: var(--radius-lg);
}

/* Número em pílula (decorativo: a ordem já está na lista ordenada) */
.sobre-steps .step__num {
  justify-self: start;
  padding: 3px 10px;
  background-color: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
}

/* --ink-3 sobre --paper-2: 5,6:1 */
.sobre-step__meta {
  margin-top: 4px;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .04em;
}

@media (min-width: 900px) {
  .sobre-steps > .step {
    position: relative;
  }

  .sobre-steps > .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--steps-gap) / -2 - 8px);
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background-color: var(--accent-fg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8h12M9.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8h12M9.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
  }
}

/* Revelação pela rolagem (v2.2), como as etapas da fabricação: a animação
   acompanha a posição de cada cartão na tela (animation-timeline: view()),
   sem JavaScript. Em linha (≥ 900) os três entram juntos e o leve
   escalonamento das faixas (0 / 36 / 72 px) os faz chegar em sequência, na
   direção da seta de fluxo; empilhados, cada um segue a própria posição.
   Só na tela, só onde o navegador suporta e sem movimento reduzido: nos
   demais casos nada fica oculto nem se move. O shorthand "animation" vem
   antes de animation-timeline (ele a reinicia). */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sobre-steps > .step {
      animation: sobre-step-rise var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% entry 220px;
    }

    .sobre-steps > .step:nth-child(2) {
      animation-range: entry 36px entry 256px;
    }

    .sobre-steps > .step:nth-child(3) {
      animation-range: entry 72px entry 292px;
    }
  }
}

@keyframes sobre-step-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   Impressão: sem painéis recuados; as três fotos do mosaico lado a lado
   -------------------------------------------------------------------------- */
@media print {
  .sobre-inset {
    margin: 0;
    border-radius: 0;
  }

  .sobre-mosaic__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sobre-mosaic__item--lead {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
  }

  .sobre-mosaic__item--lead > .photo {
    position: relative;
    inset: auto;
  }

  .sobre-mosaic__item--lead .photo__open,
  .sobre-mosaic__item--lead .photo__img {
    height: auto;
  }
}