/*
  Terroir — seção ESCURA (fundo terra mais escura, conteúdo areia). Statement
  centralizado, com miniatura no hover + parágrafo.
*/
.terroir {
  /* Sem background-color nem color próprias — vêm do body (ver bg-swap.js). */
  padding: var(--sp-section) var(--grid-margin);
}

/* ── Statement (acima do trio de cards): título grande centralizado com
      miniatura no hover + parágrafo mais distante ── */
.terroir__statement {
  margin: var(--sp-section) auto 0;
  text-align: center;
}

/* Título grande, uma palavra por linha, centralizado. */
.terroir__words {
  position: relative;   /* âncora da miniatura flutuante (.hover-thumb) */
  margin: 0;
}
/* Cada linha vai de margem a margem da seção (largura toda, sem o max-width
   do .terroir__statement) — o hover funciona em qualquer ponto da faixa,
   perto ou longe do texto, não só em cima das letras. */
.terroir__word {
  display: block;
  width: 100%;
  padding-block: var(--sp-2);
  cursor: default;
  transition: opacity var(--t);
}
/* Ao passar sobre uma palavra, as outras esmaecem — foco na atual. */
.terroir__words:hover .terroir__word { opacity: 0.3; }
.terroir__words:hover .terroir__word:hover { opacity: 1; }

/* Miniatura que segue o cursor (criada via hover-thumb.js). */
.hover-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.4s var(--ease), transform 0.25s var(--ease);
  will-change: transform;
}
.hover-thumb.is-visible {
  opacity: 1;
}

/* Parágrafo mais distante do título — mantém o próprio max-width (antes
   vinha do .terroir__statement, que agora ficou full-width por causa do
   hover das palavras acima). */
.terroir__intro {
  max-width: 40vw;
  margin: var(--sp-16) auto 0;
}

/* ── Responsivo ── */
@media (max-width: 1024px) {
  .terroir {
    padding: var(--sp-16) var(--grid-margin);
  }
  /* 40vw fica estreito demais em telas menores — volta à largura total. */
  .terroir__statement {
    max-width: 100%;
  }
}
