/* ==========================================================================
   CASA PIETRA — BASE (fontes, tipografia, layout)
   ========================================================================== */

/* --------------------------------------------------------------------------
   @FONT-FACE — todas as fontes locais (decisão aprovada: sem Google Fonts)
   Os .woff2 ainda não foram gerados; o .ttf serve de fallback e o navegador
   passa a usar o .woff2 automaticamente assim que os arquivos existirem.
   -------------------------------------------------------------------------- */

/* $font-family-01 — peso único */
@font-face {
  font-family: "Quentin";
  src: url("../assets/fonts/quentin.woff2") format("woff2"),
       url("../assets/fonts/quentin.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* $font-family-02 — variável (opsz, wght) */
@font-face {
  font-family: "Bodoni Moda";
  src: url("../assets/fonts/bodoni-moda-var.woff2") format("woff2-variations"),
       url("../assets/fonts/bodoni-moda-var.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bodoni Moda";
  src: url("../assets/fonts/bodoni-moda-italic-var.woff2") format("woff2-variations"),
       url("../assets/fonts/bodoni-moda-italic-var.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* $font-family-03 — variável (CRSV, SHRP, slnt, wght) */
@font-face {
  font-family: "Geologica";
  src: url("../assets/fonts/geologica-var.woff2") format("woff2-variations"),
       url("../assets/fonts/geologica-var.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   BODY
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-family-03);
  font-weight: var(--font-weight-extralight);
  font-size: var(--font-size-base);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-default);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   TEXT STYLES — Heading
   Cada estilo existe como classe utilitária (.text-*) e como default do
   elemento semântico correspondente.
   -------------------------------------------------------------------------- */

.text-h1,
h1 {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-regular);
  font-size: var(--h1-font-size);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-sm);
}

.text-h2,
h2 {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-regular);
  font-size: var(--h2-font-size);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-sm);
}

.text-h3,
h3 {
  font-family: var(--font-family-03);
  font-weight: var(--font-weight-semibold);
  font-size: var(--h3-font-size);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-sm);
}

.text-h4,
h4 {
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: var(--h4-font-size);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-default);
  font-optical-sizing: auto;
}

/* Heading 5 — não está na escala do style guide, só nos text styles das telas.
   O eixo óptico é travado em 6 (o Figma define assim), o que deixa a Bodoni
   mais delicada; por isso não usa font-optical-sizing: auto como o h4. */
.text-h5 {
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: var(--h5-font-size);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-default);
  font-variation-settings: "opsz" 6;
}

/* --------------------------------------------------------------------------
   TEXT STYLES — Label
   -------------------------------------------------------------------------- */

.text-label-xxl {
  font-family: var(--font-family-03);
  font-weight: var(--font-weight-extralight);
  font-size: var(--font-size-xxl);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-default);
}

.text-label {
  font-family: var(--font-family-03);
  font-weight: var(--font-weight-extralight);
  font-size: var(--font-size-base);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-default);
}

.text-label-sm {
  font-family: var(--font-family-03);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-md);
}

/* --------------------------------------------------------------------------
   TEXT STYLES — Parágrafo
   -------------------------------------------------------------------------- */

.text-p-xl {
  font-family: var(--font-family-03);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-default);
}

.text-p-lg {
  font-family: var(--font-family-03);
  font-weight: var(--font-weight-extralight);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-default);
}

.text-p,
p {
  font-family: var(--font-family-03);
  font-weight: var(--font-weight-extralight);
  font-size: var(--font-size-base);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-default);
}

.text-p-sm {
  font-family: var(--font-family-03);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-default);
}

/* Variante Bold documentada no style guide para P SM */
.text-p-sm--bold {
  font-weight: var(--font-weight-bold);
}

.text-p-xs {
  font-family: var(--font-family-03);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-default);
}

/* --------------------------------------------------------------------------
   LAYOUT — Container e Grid
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* O header é fixo: sem isto, o alvo de uma âncora para embaixo dele */
main [id] {
  scroll-margin-top: 96px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* --------------------------------------------------------------------------
   UTILITÁRIOS — Imagem com aspect ratio preservado
   -------------------------------------------------------------------------- */

.image-wrapper {
  width: 100%;
  overflow: hidden;
}

.image-wrapper > img,
.image-wrapper > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Acessibilidade — conteúdo só para leitor de tela */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}