/* =========================================================
   Modelo de projeto de arquitetura
   ========================================================= */

.capa {
  margin: 0;
  width: 100%;
  height: clamp(18rem, 62svh, 44rem);
  background: var(--grey);
  overflow: hidden;
}
.capa img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }

/* Fotografia ao alto: a faixa cresce e o corte sobe, senao ficava uma fita. */
.capa--retrato { height: clamp(22rem, 78svh, 50rem); }
.capa--retrato img { object-position: center 38%; }

.faixa { padding: 0 var(--margem); }

.cabeca {
  padding: calc(var(--u) * 9) 0 calc(var(--u) * 3);
}
.cabeca__titulo {
  font-size: clamp(2.25rem, 7vw, 4.25rem);
  font-weight: 300;
  margin: 0 0 calc(var(--u) * 1.5);
}
.cabeca__linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u) calc(var(--u) * 3);
  justify-content: space-between;
  align-items: baseline;
}
.cabeca__sub {
  font-family: var(--serifa);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--taupe-texto);
  margin: 0;
}
.cabeca__meta {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe-texto);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* Texto em duas colunas ------------------------------------------ */
.memoria {
  display: grid;
  gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 8) 0 calc(var(--u) * 6);
}
.memoria__bloco h2 {
  font-family: var(--serifa);
  font-style: italic;
  font-weight: 400;
  font-size: 1.375rem;
  margin: 0 0 calc(var(--u) * 2);
}
.memoria__bloco p {
  max-width: var(--medida);
  margin: 0 0 calc(var(--u) * 2.5);
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #4A423A;
}
.memoria__bloco p:last-child { margin-bottom: 0; }

/* Galeria --------------------------------------------------------- */
/* Uma grelha só: todas as fotografias do mesmo tamanho, na mesma proporção,
   com o mesmo vão, dentro da mesma margem do título e da ficha.
   Quem decide a proporção é arranjo_galeria(), no gerador. */
.galeria {
  --vao: calc(var(--u) * 3);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vao);
  padding-bottom: calc(var(--u) * 6);
}
.galeria figure { margin: 0; }
.galeria img {
  display: block;
  width: 100%;
  aspect-ratio: var(--proporcao, 3 / 2);
  object-fit: cover;
  object-position: center;
  background: var(--grey);
}
.galeria figcaption {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--taupe-texto);
  margin-top: calc(var(--u) * 1.5);
  max-width: 44ch;
}

/* Ficha técnica --------------------------------------------------- */
/* Etiqueta em cima, valor por baixo, tudo encostado à esquerda. Antes o
   nome ficava de um lado da página e o valor do outro, e com dois ou três
   campos preenchidos aquilo lia-se como palavras soltas. */
.ficha {
  padding: calc(var(--u) * 6) 0 calc(var(--u) * 2);
}
.ficha__titulo {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe-texto);
  margin: 0 0 calc(var(--u) * 3.5);
  padding-bottom: calc(var(--u) * 2);
  border-bottom: 1px solid var(--grey);
}
.ficha__lista {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 4) calc(var(--u) * 7);
  margin: 0;
}
.ficha__par { min-width: 7rem; max-width: 15rem; }
.ficha dt {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe-texto);
  margin-bottom: calc(var(--u) * 1.25);
}
.ficha dd {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--espresso);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


@media (min-width: 48rem) {
  .memoria { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); }
  .galeria { grid-template-columns: 1fr 1fr; }

  /* Uma só fotografia ocupa a largura toda do texto. */
  .galeria .unica { grid-column: 1 / -1; }

  /* Em número ímpar, a última fica ao centro, do tamanho das outras. */
  .galeria .sozinha {
    grid-column: 1 / -1;
    width: calc((100% - var(--vao)) / 2);
    margin-inline: auto;
  }
}


/* Peças de uma família de produtos ---------------------------------- */
/* Mesma regra da galeria dos projetos: todas do mesmo tamanho, o mesmo
   corte, o mesmo vão entre elas. Se sobrar uma no fim da linha, fica ao
   centro, para a linha não ficar coxa. */
.pecas {
  --vao: calc(var(--u) * 3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 5) var(--vao);
  margin: calc(var(--u) * 9) 0 0;
}
.pecas figure {
  margin: 0;
  flex: 0 0 calc((100% - var(--vao)) / 2);
  max-width: calc((100% - var(--vao)) / 2);
}
.pecas .peca__moldura {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pecas .peca__moldura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.pecas .peca__nome {
  font-family: var(--serifa);
  font-weight: 400;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.2;
  margin: calc(var(--u) * 1.5) 0 0;
}

@media (min-width: 48rem) {
  .pecas {
    --vao: calc(var(--u) * 4);
    gap: calc(var(--u) * 7) var(--vao);
  }
  .pecas figure {
    flex: 0 0 calc((100% - var(--vao) * 2) / 3);
    max-width: calc((100% - var(--vao) * 2) / 3);
  }
}

/* Uma família com uma só peça: a fotografia inteira, sem corte, centrada. */
.pecas--uma figure {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.pecas--uma .peca__moldura { display: block; aspect-ratio: auto; }
.pecas--uma .peca__moldura img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80svh;
  object-fit: contain;
  margin-inline: auto;
}

/* Privacidade e Termos ----------------------------------------------- */
/* Texto corrido, coluna estreita. Os títulos separam-se por espaço, não por
   filete: a única linha decorativa do site é a da costura. */
.legal {
  max-width: 44rem;
  margin: calc(var(--u) * 9) 0 calc(var(--u) * 12);
}
.legal h2 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe-texto);
  margin: calc(var(--u) * 12) 0 calc(var(--u) * 3.5);
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 calc(var(--u) * 3); }
.legal ul {
  margin: 0 0 calc(var(--u) * 3);
  padding-left: 1.2em;
}
.legal li { margin: 0 0 calc(var(--u) * 1.5); }
.legal li::marker { color: var(--mushroom); }
.legal strong { font-weight: 500; }