/* ==========================================================================
   Header + Hero
   A hero tem 3 camadas empilhadas: céu (1) -> frase (2) -> carros/chão/construção (3).
   Céu e frente usam o mesmo "palco" (proporção da foto) dimensionado como cover em
   CSS puro. Assim as duas imagens ficam sempre alinhadas e a frase pode ser
   posicionada em coordenadas da foto (logo acima dos tetos dos carros).
   Telas deitadas usam a foto do desktop (1672x941); telas em pé, a foto vertical
   (hero-mobile-*, 1086x1448). Nas duas, a frase fica em 2 linhas no céu e o botão
   de CTA (.hero__cta) no chão, embaixo no centro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  --logo-h: var(--header-h);

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-top) var(--gutter) 0;
}

.site-header__logo {
  display: block;
  flex-shrink: 0;
}

.site-header__logo img {
  height: var(--logo-h);
  width: auto;
}

/* o logo do preloader "pousa" aqui; até lá, o do header fica invisível */
.js .site-header__logo {
  opacity: 0;
}

.preloader-failed .site-header__logo {
  opacity: 1;
}

.site-nav {
  --nav-gap: clamp(20px, 2.6vw, 48px);

  position: relative;
  display: flex;
  align-items: center;
  height: var(--logo-h);
  /* lugar do botão de CTA do canto (css/cta.css), fixo fora do header: sem o js/cta.js ele fica sempre
     visível e o menu reserva a largura dele (≈240px). Com ele (.has-cta-reveal, abaixo), não precisa. */
  --cta-room: calc(240px + var(--nav-gap));
  margin-right: var(--cta-room);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  height: var(--logo-h);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-weight: 500;
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-black);
  text-decoration: none;
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--ease-out);
}

.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.site-nav__toggle {
  display: none;
}

/* Menu compacto em telas estreitas */
@media (max-width: 900px) {
  .site-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: var(--logo-h);
    padding: 0;
    border: 0;
    background: none;
    font-weight: 500;
    font-size: 15px;
    color: var(--color-black);
    cursor: pointer;
  }

  .site-nav__toggle-icon,
  .site-nav__toggle-icon::before {
    display: block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.35s var(--ease-out);
  }

  .site-nav__toggle-icon {
    position: relative;
    transform: translateY(-3px);
  }

  .site-nav__toggle-icon::before {
    content: "";
    position: absolute;
    top: 6px;
  }

  .site-nav.is-open .site-nav__toggle-icon {
    transform: translateY(0) rotate(45deg);
  }

  .site-nav.is-open .site-nav__toggle-icon::before {
    transform: translateY(-6px) rotate(-90deg);
  }

  /* alinhada à margem da página (por baixo do botão de CTA, quando ele está no header) */
  .site-nav__list {
    position: absolute;
    top: calc(100% + 14px);
    right: calc(-1 * var(--cta-room));
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    height: auto;
    min-width: 200px;
    padding: 14px 22px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px rgba(29, 29, 27, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.3s;
  }

  .site-nav.is-open .site-nav__list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-nav__list a {
    padding: 10px 0;
    font-size: 16px;
  }
}

/* O botão de CTA do canto só aparece depois que a hero sai da tela (js/cta.js liga o .has-cta-reveal):
   no topo, o header fica só com o logo e o menu, encostado na margem direita. Quem chama para o
   formulário ali é o botão da hero. */
.has-cta-reveal .site-nav {
  --cta-room: 0px;
}

/* telas bem estreitas com o CTA no header (sem o js/cta.js): logo, menu e CTA só cabem juntos
   com o "Menu" escrito só para leitores de tela */
@media (max-width: 359px) {
  html:not(.has-cta-reveal) .site-nav__toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  --ar: 1.77683;           /* 1672 / 941: proporção da foto */
  --fx: 0.5;               /* ponto focal horizontal quando a foto é cortada nas laterais */
  --fy: 0.6;               /* telas mais largas que a foto: fração do corte vertical tirada do céu (o resto sai do chão) */
  --title-baseline: 0.429; /* linha de base da 2ª linha, em fração da altura da foto (topo do teto do carro azul ≈ 0.425) */
  --title-top-space: 120px; /* espaço mínimo entre o topo da hero e a frase (header) */
  --cta-floor: 0.83;       /* base dos pneus do carro azul no centro da foto ≈ 0.82: o botão de CTA fica abaixo */

  /* Geometria do palco (foto em "cover"). As unidades cq resolvem nos filhos, relativas à .hero */
  --stage-w: max(100cqw, 100cqh * var(--ar));
  --stage-h: max(100cqh, 100cqw / var(--ar));
  --stage-left: clamp(100cqw - var(--stage-w), 50cqw - var(--fx) * var(--stage-w), 0px);
  --stage-bottom: calc((100cqh - var(--stage-h)) * (1 - var(--fy)));

  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  container-type: size;
  background: #CFE3F9; /* tom do céu enquanto as imagens carregam */
}

/* Telas em pé: foto vertical (hero-mobile-*, <picture> no HTML), carro de frente no centro */
@media (orientation: portrait) {
  .hero {
    --ar: 0.75;              /* 1086 / 1448 */
    --fx: 0.5;
    --fy: 0.3;               /* telas mais largas que 3:4: o corte sai mais do chão, preservando o céu da frase */
    --roof-top: 0.312;       /* topo do teto do carro no centro da foto: a frase fica no céu acima dele */
    --cta-floor: 0.7;        /* base dos pneus ≈ 0.69 */
  }
}

.hero__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.hero__layer--sky   { z-index: 1; }
.hero__layer--title { z-index: 2; }
.hero__layer--front { z-index: 3; }

/* Palco = foto em "cover". Céu e frente usam exatamente a mesma geometria. */
.hero__stage {
  position: absolute;
  bottom: var(--stage-bottom);
  left: var(--stage-left);
  width: var(--stage-w);
  height: var(--stage-h);
}

.hero__stage img {
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* Frase: centralizada na tela; altura calculada em coordenadas da foto
   para a base de "Vai de Proeste." já nascer levemente encoberta pelo teto do carro azul. */
.hero__title {
  /* distância da linha de base até a base da hero */
  --baseline-from-bottom: calc(var(--stage-bottom) + var(--stage-h) * (1 - var(--title-baseline)));

  position: absolute;
  left: 0;
  right: 0;
  /* 0.1265em = distância da linha de base até o fim da caixa da linha (métricas da Eurostile, line-height 1) */
  bottom: calc(var(--baseline-from-bottom) - 0.1265em);
  margin: 0;
  padding: 0 var(--gutter);
  font-family: var(--font-display);
  font-weight: 600;
  /* proporcional à foto · em telas estreitas cabe "Vai de Proeste." (≈9.4em) na largura ·
     em telas muito largas, as 2 linhas (≈1.68em do topo das maiúsculas à base) cabem abaixo do header */
  font-size: min(
    var(--stage-w) * 0.056,
    (100cqw - 2 * var(--gutter)) / 9.7,
    (100cqh - var(--baseline-from-bottom) - var(--title-top-space)) / 1.68
  );
  line-height: 1;
  letter-spacing: -0.005em;
  text-align: center;
  color: var(--color-black);
}

.hero__line {
  display: block;
  white-space: nowrap;
  will-change: transform;
}

/* Em pé: as mesmas 2 linhas do desktop, ocupando a largura da tela ("Vai de Proeste." ≈ 9.4em).
   Sem o tamanho proporcional à foto: aqui ela é cortada nas laterais, e a frase ficaria pequena.
   A frase fica no meio do céu livre: o centro dela (≈1.68em do topo das maiúsculas da 1ª linha à
   base da 2ª) fica no meio do vão entre a base do logo do header e o topo do teto do carro
   (--roof-top). Tamanho: no máximo 70% desse vão e 112px (teto em tablets). */
@media (orientation: portrait) {
  .hero__title {
    /* teto do carro e base do logo, medidos da base da hero */
    --roof: calc(var(--stage-bottom) + var(--stage-h) * (1 - var(--roof-top)));
    --logo-bottom: calc(100cqh - var(--header-top) - var(--header-h));

    /* 0.84em = metade da altura da frase; 0.1265em = da linha de base até o fim da caixa da linha */
    bottom: calc((var(--roof) + var(--logo-bottom)) / 2 - 0.84em - 0.1265em);
    font-size: min(
      (100cqw - 2 * var(--gutter)) / 9.7,
      (var(--logo-bottom) - var(--roof)) * 0.7 / 1.68,
      112px
    );
  }
}

/* Logo BAIC no lugar da palavra: altura das maiúsculas da Eurostile (0.68em), apoiado na linha
   de base. O SVG entra como máscara para herdar a cor exata do texto. */
.hero__logo {
  display: inline-block;
  height: 0.68em;
  aspect-ratio: 537.883 / 105.424;
  margin-right: 0.04em;
  background-color: currentColor;
  -webkit-mask: url("../public/brand/logo-baic-preto.svg") center / contain no-repeat;
  mask: url("../public/brand/logo-baic-preto.svg") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Botão de CTA da hero (aparência no css/cta.css): embaixo, no centro, no chão
   -------------------------------------------------------------------------- */
/* Centralizado na faixa de chão visível, entre a base dos pneus (--cta-floor, em fração da altura da
   foto) e a borda de baixo da hero, e no mínimo a --cta-gap dela. Se a hero for mais alta que a tela
   (min-height, celular deitado), sobe até caber no primeiro quadro. */
.hero__cta {
  --cta-h: clamp(52px, 1.5vw + 40px, 68px); /* altura do botão (o .site-cta usa --cta-h) */
  --cta-gap: 16px;
  --floor-h: calc(var(--stage-bottom) + var(--stage-h) * (1 - var(--cta-floor)));

  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: max(var(--cta-gap), (var(--floor-h) - var(--cta-h)) / 2, 100cqh - 100svh + 16px);
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter);
  pointer-events: none; /* só o botão recebe o clique */
}

.hero__cta .site-cta {
  pointer-events: auto;
}

/* celular: acima do botão do WhatsApp, que fica no canto de baixo (--wa-clear, css/base.css) */
@media (max-width: 600px) {
  .hero__cta {
    --cta-gap: var(--wa-clear);
  }
}