/* ==========================================================================
   layout.css — estrutura da pagina e das secoes
   ========================================================================== */

/* Envoltorio: a caixa que segura o texto no centro e da respiro nas bordas.
   Um so lugar decide margem lateral no site inteiro. */
.envoltorio {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: clamp(5rem, 14vh, 10rem); }

.secao__olho {
  font-size: var(--t-miudo);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--realce);
  margin-bottom: 1rem;
}

.secao__titulo { font-size: var(--t-grande); margin-bottom: 1rem; }

.secao__texto { color: var(--tinta-fraca); max-width: 58ch; }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  /* svh = small viewport height: a altura da janela COM a barra do navegador
     visivel. Se usar 100vh, no celular a barra cobre uma faixa do hero; se
     usar 100dvh, a altura muda enquanto a barra some e o layout dança.
     svh e o unico dos tres que fica parado e nunca corta. */
  min-height: 100svh;
  display: grid;
  /* Duas linhas: um 1fr vazio no topo que empurra tudo, e o conteudo colado
     embaixo. O indicador de rolagem NAO esta na grade — ver o comentario
     dele mais abaixo, a posicao dele e o que salvou a foto. */
  grid-template-rows: 1fr auto;
  align-items: end;
  padding: var(--gutter);
  padding-bottom: clamp(2.5rem, 7vh, 4.5rem);
  overflow: hidden;
  isolation: isolate;   /* prende os z-index filhos aqui dentro */
}

.hero__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  /* object-fit precisa de largura E altura definidas para ter o que recortar.
     object-position em 50% 40% sobe o enquadramento: a casa fica no terco
     superior da foto aerea e o corte padrao (centro) cortaria o telhado. */
  object-fit: cover;
  object-position: 50% 40%;
}

/* O veu da contraste ao texto sobre uma foto que a gente nao controla.
   As paradas foram MEDIDAS, e a historia de como chegaram aqui e a licao:

   Tentativa 1 — gradiente fraco (0,55 aos 32%, 0,10 aos 62%). O titulo lia
   bem, mas o olho e a linha de apoio caiam sobre o calcamento branco. Medi
   o pior pixel atras de cada texto: 1,5:1 no olho. Reprovado.

   Tentativa 2 — escurecer tudo ate os 72%. O texto passou com folga (7,6:1),
   so que a fachada da casa desabou para brilho 36 de 255. Ou seja: resolvi a
   legibilidade destruindo o produto que a pagina existe para vender.

   Tentativa 3 — a que ficou. Em vez de escurecer mais, TIREI O TEXTO DE CIMA
   DA CASA: o indicador de rolagem saiu da grade (posicao absoluta no canto),
   o titulo caiu de 9,5rem para 8rem, e o bloco inteiro desceu para os 42%
   de baixo — a faixa do calcamento, que escurece sem custo nenhum.
   Acima dos 50% o veu afrouxa rapido e a casa reaparece.

   A licao vale alem deste projeto: quando o contraste sobre foto nao fecha,
   quase sempre o conserto e mover o texto, nao escurecer a imagem.

   A ultima parada, de volta a 0,26 no topo, e vinheta: segura o olhar dentro
   do quadro em vez de deixar o ceu estourar na borda. */
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,
      rgba(16, 15, 13, 0.88) 0%,
      rgba(16, 15, 13, 0.80) 22%,
      rgba(16, 15, 13, 0.66) 38%,
      rgba(16, 15, 13, 0.38) 50%,
      rgba(16, 15, 13, 0.18) 62%,
      rgba(16, 15, 13, 0.07) 78%,
      rgba(16, 15, 13, 0.26) 100%);
}

/* Sem max-width aqui.
   Tentativa anterior: max-width: 22ch no bloco inteiro. Parecia razoavel e
   estava errado — `ch` mede a largura do "0" na fonte DO ELEMENTO, e este
   bloco herda a fonte sem serifa do corpo. Deu 190px de caixa para um titulo
   de 152px de altura, que transbordava e era cortado pelo overflow:hidden do
   hero. Largura de coluna se limita em quem tem TEXTO CORRIDO — aqui, so o
   .hero__apoio. */
.hero__conteudo {
  grid-row: 2;

  /* Folga a direita para o indicador, que flutua naquele canto. */
  padding-right: clamp(3rem, 6vw, 5rem);

  /* Sombra difusa como segunda linha de defesa.
     Gradiente e estatico; a foto por baixo dele nao e. Se um dia trocarem a
     foto do hero por uma mais clara, o gradiente sozinho pode nao dar conta.
     A sombra grande e suave (20px de desfoque, sem deslocamento util) funciona
     como um halo escuro que acompanha a letra onde quer que ela caia.

     Ressalva honesta para a aula: a WCAG nao credita text-shadow no calculo de
     contraste. Ela e complemento do gradiente, nunca substituta dele. */
  text-shadow: 0 1px 20px rgba(16, 15, 13, 0.75),
               0 1px 3px  rgba(16, 15, 13, 0.45);
}

/* Aqui o olho NAO usa --realce, e essa e uma decisao consciente.
   O latao (#b99a5b) e um tom medio: contra o fundo escuro das secoes ele da
   7:1 de contraste, folgado. Contra uma FOTOGRAFIA ele fica entre dois
   fogos — nem claro o bastante para vencer um trecho claro, nem escuro o
   bastante para vencer um trecho escuro; medi 1,5:1 no pior caso. Cor de
   destaque que funciona no fundo chapado nao funciona sobre imagem.
   Sobre foto, branco. O latao volta nas secoes, em .secao__olho. */
.hero__olho {
  font-size: var(--t-miudo);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: clamp(0.75rem, 2vh, 1.5rem);
}

.hero__titulo {
  font-size: var(--t-gigante);
  letter-spacing: -0.02em;
  /* Georgia deixa uma folga optica a esquerda em letras maiusculas.
     O recuo negativo alinha o T com a margem de verdade. */
  margin-left: -0.06em;
}

/* --tinta e nao --tinta-fraca, pelo mesmo motivo do olho: em corpo de 22px
   sobre foto, o cinza nao chega aos 4,5:1 que texto pequeno exige. A
   hierarquia sai do tamanho e do espaco em volta, nao de apagar a cor. */
.hero__apoio {
  margin-top: clamp(0.75rem, 2vh, 1.25rem);
  font-size: var(--t-medio);
  color: var(--tinta);
  max-width: 34ch;
}

/* Fora da grade, de proposito.
   No fluxo, este bloco custava ~135px de altura e empurrava o texto para
   cima, bem em cima da fachada — que e justamente onde o veu nao pode
   escurecer. Ancorado no canto inferior direito ele custa zero altura,
   libera a base inteira para o titulo e ainda fica onde o olho ja termina
   a leitura, da esquerda para a direita. */
.hero__indicador {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2.5rem, 7vh, 4.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.hero__indicador-texto {
  font-size: var(--t-miudo);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta);
  opacity: 0.75;   /* opacidade em vez de cor apagada: some junto com a linha */
}

/* ==========================================================================
   RODAPE
   ========================================================================== */

.rodape {
  border-top: 1px solid var(--linha);
  padding-block: 2.5rem;
  color: var(--tinta-fraca);
  font-size: var(--t-miudo);
}

/* ==========================================================================
   TOUR — trilha e palco
   ========================================================================== */

/* A TRILHA. Nao aparece: existe so para ter comprimento de rolagem.

   A altura vem da variavel, que o js/tour.js grava lendo config.js. O valor
   escrito aqui e so a rede de seguranca para o caso do JavaScript nao rodar.

   svh, e nao dvh nem vh:
     vh  — no celular usa a altura COM a barra de URL recolhida, entao a
           trilha fica maior do que a tela util e sobra rolagem no fim.
     dvh — muda de valor enquanto a barra some e reaparece. Numa trilha de
           700 unidades isso significa a pagina inteira mudando de altura no
           meio do gesto: o ScrollTrigger remede e o tour da um salto.
     svh — a altura com a barra VISIVEL. E o unico dos tres que fica parado. */
.tour {
  position: relative;
  height: var(--altura-trilha, 700svh);
}

/* O PALCO. Gruda no topo e fica parado enquanto a trilha desliza por tras.

   Aqui e dvh, ao contrario da trilha: o palco precisa preencher a tela
   INTEIRA a cada instante, inclusive quando a barra de URL recolhe. Com svh
   sobraria uma faixa de 100 a 130px de fundo aparecendo embaixo do canvas.

   Sao duas unidades diferentes no mesmo componente, e cada uma pelo motivo
   oposto da outra. Vale parar na aula. */
.tour__palco {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--fundo);
}

.tour__tela {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Movimento reduzido: a trilha desmancha.
   --------------------------------------------------------------------------
   A classe .sem-tour e posta no <html> por js/tour.js quando o usuario pediu
   movimento reduzido. Sem ela, a trilha continuaria com 700svh de altura
   vazia e o palco grudado — 7 telas de nada.

   O que sobra e o que sempre foi o conteudo de verdade da secao: as 7
   legendas, agora como lista de texto. Zero imagem nova, zero download.
   (A etapa 5 completa esta parte com o link para a galeria.)
   -------------------------------------------------------------------------- */
:root.sem-tour .tour {
  height: auto;
}

:root.sem-tour .tour__palco {
  position: static;
  height: auto;
  /* Sem o max-width e o auto das margens, as legendas atravessariam a tela
     inteira: o palco era um retangulo de tela cheia e nao tinha por que
     limitar largura nenhuma. Fora do tour ele vira uma secao de texto
     comum e passa a seguir a mesma medida das outras. */
  max-width: calc(var(--largura-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
}

:root.sem-tour .tour__tela,
:root.sem-tour .tour__veu {
  display: none;
}

/* ==========================================================================
   FICHA TECNICA
   ========================================================================== */

.ficha__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1px;                      /* o "gap" vira a linha divisoria */
  background: var(--linha);      /* aparece atraves do gap */
  border: 1px solid var(--linha);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

/* Truque da grade com 1px de gap: cada bloco tem fundo opaco, e o que se ve
   entre eles e o fundo do container. Uma linha divisoria perfeita sem
   nenhuma regra de border em celula, e sem a borda dupla das bordas
   adjacentes. */
.ficha__bloco {
  background: var(--fundo);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.ficha__rotulo {
  font-size: var(--t-miudo);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-bottom: 0.75rem;
}

.ficha__valor {
  /* BLOCO, e nao inline. Este display e a solucao inteira do problema do
     numero que cresce durante a contagem — ver o comentario longo em
     js/counters.js. Bloco ocupa a largura da celula, entao a caixa nunca
     muda de tamanho enquanto o texto cresce por dentro. */
  display: block;
  margin: 0;

  font-family: var(--fonte-titulo);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.1;

  /* Digitos de largura fixa. Sem isso o numero fica tremendo durante a
     contagem, porque o "1" e bem mais estreito que o "8". */
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   DIFERENCIAIS
   ========================================================================== */

.diferenciais__lista {
  display: grid;
  gap: clamp(3rem, 9vh, 6rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

.diferencial {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .diferencial { grid-template-columns: 1fr 1fr; }

  /* A alternancia acontece AQUI, no CSS, e nao invertendo as tags no HTML.
     A ordem do DOM continua sendo texto e depois foto nos tres blocos —
     que e a ordem em que a pagina deve ser lida e navegada por Tab.
     grid-column e so pintura. */
  .diferencial:nth-child(even) .diferencial__texto { grid-column: 2; grid-row: 1; }
  .diferencial:nth-child(even) .diferencial__foto  { grid-column: 1; grid-row: 1; }
}

.diferencial__titulo {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  margin-bottom: 1rem;
}

.diferencial__texto p { color: var(--tinta-fraca); max-width: 46ch; }

.diferencial__foto { margin: 0; }

.diferencial__foto img {
  width: 100%;
  height: auto;
  /* A proporcao declarada reserva o espaco antes de a imagem chegar. Junto
     com width/height no HTML, e o que impede a pagina de pular quando cada
     foto carrega (as imagens sao lazy e chegam fora de ordem). */
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ==========================================================================
   GALERIA
   ========================================================================== */

.galeria__grade {
  list-style: none;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.5rem, 1.5vw, 1rem);
}

@media (min-width: 600px) {
  .galeria__grade { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .galeria__grade { grid-template-columns: repeat(3, 1fr); }

  /* Ritmo editorial: a primeira de cada sete ocupa duas colunas. E o
     substituto honesto do masonry — as 18 fotos tem todas 3:2, e masonry
     com alturas iguais renderiza igual a um grid uniforme.

     Sem grid-auto-flow: dense de proposito. Ele preencheria os buracos
     puxando blocos fora de ordem, e a ordem visual deixaria de bater com a
     do DOM: a navegacao por Tab pularia pela grade e o indice do lightbox
     abriria a foto errada. */
  .galeria__grade > li:nth-child(7n + 1) { grid-column: span 2; }
}

.galeria__item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}

.galeria__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.6s var(--curva), opacity 0.4s var(--curva);
}

.galeria__item:hover img,
.galeria__item:focus-visible img {
  transform: scale(1.04);
  opacity: 0.88;
}

/* ==========================================================================
   CTA
   ========================================================================== */

.cta { background: var(--fundo-alto); }

.cta__caixa { max-width: 46rem; }

.cta .secao__titulo {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  max-width: 20ch;
}