/* Portfolio page — desktop composition measured against the Zeplin artboard. */
.air-page-portfolio{--portfolio-container:1204px}
.air-page-portfolio>section>.air-container{width:min(calc(100% - 48px),var(--portfolio-container))}

.air-page-portfolio .air-portfolio-head{height:664px;min-height:664px;padding:22px 0 0}
.air-page-portfolio .air-portfolio-stats{margin-top:34px;gap:0 32px}
.air-page-portfolio .air-portfolio-stats div{min-height:98px;padding:13px 0 12px}
.air-page-portfolio .air-portfolio-stats b{font-family:'area-extended',Arial,sans-serif;font-size:40px;font-weight:900;line-height:1.2;color:var(--air-orange)}
.air-page-portfolio .air-portfolio-stats span{margin-top:8px;font-family:'area-normal',Arial,sans-serif;font-size:18px;font-weight:900;line-height:1.56;color:#fff}

.air-page-portfolio .air-projects{overflow:hidden}
.air-page-portfolio .air-projects--light{height:1200px;padding-top:124px}
.air-page-portfolio .air-projects--teal{height:1668px;padding-top:82px}
.air-page-portfolio .air-projects-heading{height:82px;margin:0 0 40px;border-bottom:1px solid var(--air-navy)}
.air-page-portfolio .air-projects--teal .air-projects-heading{margin-bottom:75px}
.air-page-portfolio .air-projects-heading h2{margin:0 0 12px;font-family:'area-extended',Arial,sans-serif;font-size:24px;font-weight:900;line-height:1.5;color:#0f8080}
.air-page-portfolio .air-projects--teal .air-projects-heading h2{color:var(--air-navy)}
.air-page-portfolio .air-projects-heading p{margin:0;font-family:'area-normal',Arial,sans-serif;font-size:18px;font-weight:500;line-height:1.56;color:#202f38}

.air-page-portfolio .air-project-card{display:grid;grid-template-columns:531px 531px;gap:39px;width:1204px;min-height:418px;margin:0 0 42px;padding:30px 34px 30px 69px;border-radius:20px;background:#fff;box-shadow:0 3px 18px rgba(0,0,0,.16);box-sizing:border-box}
.air-page-portfolio .air-projects--teal .air-project-card{margin-bottom:40px;background:var(--air-navy);color:#fff}
.air-page-portfolio .air-project-copy{min-width:0}
.air-page-portfolio .air-project-brand{display:flex;align-items:center;height:76px;margin:0 0 18px;border-bottom:1px solid var(--air-teal)}
.air-page-portfolio .air-project-brand img{width:105px;height:52px;margin-right:20px;padding-right:20px;border-right:1px solid var(--air-teal);border-radius:0;object-fit:contain;box-sizing:border-box}
.air-page-portfolio .air-project-brand h3{margin:0;padding:0;border:0;color:var(--air-teal);font-size:27px;line-height:1.1}
.air-page-portfolio .air-project-card small{display:block;margin:0 0 8px;font-family:'area-normal',Arial,sans-serif;font-size:10px;font-weight:900;line-height:1.2;color:var(--air-orange)}
.air-page-portfolio .air-project-subheading{display:block;margin:13px 0 8px;font-family:'area-normal',Arial,sans-serif;font-size:10px;font-weight:900;line-height:1.2;color:var(--air-orange)}
.air-page-portfolio .air-project-card p{margin:0 0 13px;font-family:'area-normal',Arial,sans-serif;font-size:16px;font-weight:500;line-height:1.5;color:#202f38}
.air-page-portfolio .air-project-image{display:block;width:531px;height:358px;border-radius:10px;object-fit:cover}

.air-page-portfolio .air-portfolio-cta{height:338px;background-position:center;background-size:cover}
.air-page-portfolio .air-portfolio-cta .air-container{padding-left:26px}
.air-page-portfolio .air-portfolio-cta h2{margin:0;font-size:20px;line-height:1.2}

@media(max-width:1023px){
  .air-page-portfolio .air-portfolio-head{height:auto;min-height:680px;padding-bottom:60px}
  .air-page-portfolio .air-projects--light,
  .air-page-portfolio .air-projects--teal{height:auto;padding:80px 0}
  .air-page-portfolio .air-projects-heading,
  .air-page-portfolio .air-projects--teal .air-projects-heading{height:auto;margin-bottom:42px;padding-bottom:18px}
  .air-page-portfolio .air-project-card{grid-template-columns:1fr 1fr;gap:30px;width:100%;height:auto;min-height:350px;padding:28px;margin-bottom:36px}
  .air-page-portfolio .air-project-image{width:100%;height:290px}
}
@media(max-width:767px){
  .air-page-portfolio .air-header>.air-container,
  .air-page-portfolio>section>.air-container{width:calc(100% - 32px)}

  .air-page-portfolio .air-portfolio-head{height:791px;min-height:791px;padding:20px 0 0}
  /* Sem trava de largura: os 245px do Zeplin foram calibrados para o texto
     padrao e reencaixavam cada linha, desfazendo as quebras escolhidas no
     painel ("SETORES NAVAL" virava "SETORES" + "NAVAL"). Quem decide a
     quebra e o editor. */
  .air-page-portfolio .air-portfolio-head h1{max-width:100%;font-size:29px;line-height:1.05}
  .air-page-portfolio .air-portfolio-head>.air-container>p{display:none}
  .air-page-portfolio .air-portfolio-stats{grid-template-columns:1fr 1fr;margin-top:27px;column-gap:28px}
  .air-page-portfolio .air-portfolio-stats div{min-height:98px;padding:13px 0 12px}
  .air-page-portfolio .air-portfolio-stats div:nth-child(1){order:1}
  .air-page-portfolio .air-portfolio-stats div:nth-child(2){order:2}
  .air-page-portfolio .air-portfolio-stats div:nth-child(3){order:5}
  .air-page-portfolio .air-portfolio-stats div:nth-child(4){order:6}
  .air-page-portfolio .air-portfolio-stats div:nth-child(5){order:3}
  .air-page-portfolio .air-portfolio-stats div:nth-child(6){order:4}
  .air-page-portfolio .air-portfolio-stats div:nth-child(7){order:7}
  .air-page-portfolio .air-portfolio-stats div:nth-child(8){order:8}

  .air-page-portfolio .air-projects--light{height:1644px;min-height:1644px;padding:64px 0 0}
  .air-page-portfolio .air-projects--teal{height:2099px;min-height:2099px;padding:82px 0 0}
  .air-page-portfolio .air-projects-heading,
  .air-page-portfolio .air-projects--teal .air-projects-heading{height:auto;margin-bottom:73px;padding-bottom:18px}
  .air-page-portfolio .air-projects--light .air-projects-heading{margin-bottom:82px}
  .air-page-portfolio .air-projects--teal .air-projects-heading{margin-bottom:17px}
  .air-page-portfolio .air-projects--teal .air-projects-heading{border-color:var(--air-mint)}
  .air-page-portfolio .air-projects--teal .air-projects-heading p{color:#fff}
  .air-page-portfolio .air-projects-heading h2{font-size:20px}
  .air-page-portfolio .air-projects--light .air-projects-heading h2{max-width:280px}

  .air-page-portfolio .air-project-card{
    grid-template-columns:1fr;
    gap:0;
    width:100%;
    min-height:0;
    margin:0;
    padding:10px;
  }
  .air-page-portfolio .air-projects--light .air-project-card:first-of-type{height:681px;margin-bottom:80px}
  .air-page-portfolio .air-projects--light .air-project-card:last-of-type{height:536px}
  .air-page-portfolio .air-projects--teal .air-project-card:first-of-type{height:612px;margin-bottom:38px}
  .air-page-portfolio .air-projects--teal .air-project-card:nth-of-type(2){height:542px;margin-bottom:50px}
  .air-page-portfolio .air-projects--teal .air-project-card:nth-of-type(3){height:542px}
  .air-page-portfolio .air-project-brand{height:76px;margin-bottom:18px}
  .air-page-portfolio .air-project-brand h3{max-width:170px;font-size:22px}
  .air-page-portfolio .air-projects--teal .air-project-brand h3{font-size:24px}
  .air-page-portfolio .air-project-card p{font-size:13px}
  .air-page-portfolio .air-project-subheading span{display:none}
  .air-page-portfolio .air-project-subheading::after{content:'PLATAFORMAS (+15)'}
  .air-page-portfolio .air-project-image{width:100%;height:auto;aspect-ratio:531/358}

  .air-page-portfolio .air-portfolio-cta{height:337px;background-position:62.5% center}
  .air-page-portfolio .air-portfolio-cta .air-container{padding-left:10px}
  .air-page-portfolio .air-portfolio-cta h2{font-size:14px;line-height:1.35}
  .air-page-portfolio .air-portfolio-cta a{border-color:var(--air-orange)}

  body.air-page-portfolio .air-footer{height:1184px;min-height:1184px}
  body.air-page-portfolio .air-footer>.air-container{height:1139px}
}

/* ============================================================
   Portfolio — mobile (<= 767px)

   O cabecalho tinha `height: 791px` fixo, mas a grade de numeros
   termina em 932px: as 141px que sobravam vazavam para fora da
   secao e caiam sobre o titulo "Operacoes offshore no Brasil" da
   secao seguinte — os dois textos apareciam sobrepostos.

   A altura passa a acompanhar o conteudo, mantendo os 791px do
   Zeplin como piso, com o respiro medido no bloco de referencia.
   Vale so no mobile; o desktop nao le nada daqui.
   ============================================================ */
@media (max-width: 767px) {
  .air-page-portfolio .air-portfolio-head {
    height: auto;
    min-height: 791px;
    padding-bottom: 50px;
  }
}

/* CTA "Entre em contato" — imagem propria do mobile.

   A foto de desktop (2880x675) e larga e baixa demais para a faixa
   do celular: em `cover` ela nao deixa folga vertical, o navio cai
   na mesma altura do texto e nao ha enquadramento que mostre o
   navio inteiro sem passar por tras das letras.

   O mobile usa a imagem do Zeplin (hero-mobile.png, 390x337, ja no
   formato da faixa), com o navio embaixo e o ceu livre em cima para
   o texto.

   O `!important` e necessario porque a foto de desktop vem de um
   `style="background-image:..."` inline em page-designed.php, e
   estilo inline vence media query. Aqui ele troca so a imagem; o
   desktop continua com a foto original. */
@media (max-width: 767px) {
  .air-page-portfolio .air-portfolio-cta {
    background-image: url('../images/portfolio/hero-mobile.png') !important;
    background-size: cover;
    background-position: center;
  }
}