/*
  Terroir — seção ESCURA (fundo terra mais escura, conteúdo areia). Eyebrow +
  título grande à esquerda e um parágrafo à direita; abaixo, a imagem aérea
  (dentro das margens) e o trio de cards.
*/
.terroir {
  /* Tintas locais desta seção escura — derivadas dos tokens globais */
  --terroir-ink:   var(--color-areia);
  --terroir-muted: var(--color-text-muted);

  background-color: var(--color-terra-mais-escura-bg);
  color: var(--terroir-ink);
  padding: var(--sp-section) var(--grid-margin);
}

/* ── Cabeçalho (acima da imagem) ── */
.terroir__head {
  position: relative;
  z-index: 2;   /* título por cima da imagem */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;   /* lead alinhado à base do título */
  gap: var(--sp-16);
}

/* Parágrafo descritivo à direita do título. */
.terroir__lead {
  max-width: 44ch;
  margin: 0 0 var(--sp-4);
  color: var(--terroir-ink);
  text-align: right;
}

.terroir__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--color-areia);
}

/* ── Imagem ── */
.terroir__figure {
  margin: var(--sp-16) 0 0;   /* mais pra baixo, com respiro do título */
  /* Cresce da largura das margens até a largura total no scroll.
     --expand (0→1) é definido pelo scroll-expand.js. */
  --expand: 0;
  width: calc(100% + var(--expand) * 2 * var(--grid-margin));
  margin-inline: calc(var(--expand) * -1 * var(--grid-margin));
}

/* Uma foto só, largura total até as margens da seção. */
.terroir__media {
  display: block;
  width: 100%;
  height: 60vh;
  object-fit: cover;
}

/* ── 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;
  max-width: 40vw;   /* a "div" que limita a largura das linhas (~40% da tela) */
  text-align: center;
}

/* Título grande, uma palavra por linha, centralizado. */
.terroir__words {
  position: relative;   /* âncora da miniatura flutuante (.hover-thumb) */
  margin: 0;
  color: var(--terroir-ink);
}
/* Cada linha ocupa a largura toda da div — o hover pega a linha inteira,
   não só o texto da palavra. */
.terroir__word {
  display: block;
  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 (dentro da mesma div de max-width). */
.terroir__intro {
  margin: var(--sp-16) 0 0;
  color: var(--terroir-ink);
}

.terroir__cards {
  margin-top: var(--sp-16);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.terroir-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;   /* recorta o zoom da imagem no hover */
}

.terroir-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

/* Badge (ex.: amplitude térmica) sobre a imagem */
.terroir-card__badge {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-pill);
  background-color: var(--color-dark);
  color: var(--color-areia);
  backdrop-filter: blur(4px);
}

.terroir-card__title {
  margin: var(--sp-8) 0 var(--sp-4);
  color: var(--terroir-ink);
  transition: color var(--t);
}

.terroir-card__text {
  margin: 0;
  max-width: 80%;   /* ~80% da largura do card/imagem */
  color: var(--terroir-ink);
}

/* Hover: eleva o card e dá zoom na imagem. */
.terroir-card {
  transition: transform 0.5s var(--ease);
}
.terroir-card:hover {
  transform: translateY(-8px);
}
.terroir-card:hover .terroir-card__img {
  transform: scale(1.06);
}

/* ── 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%;
  }
}

@media (max-width: 768px) {
  .terroir__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-8);
  }
  .terroir__lead {
    text-align: left;
    max-width: none;
    margin-bottom: 0;
  }
  .terroir__media {
    aspect-ratio: 4 / 3;
  }
  .terroir__cards {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }
}