/*
  Vinhedo Hara — faixa da RAIZ no topo (raiz de videira que nasce pra
  baixo e se espalha pros lados ao entrar na seção, ver roots.js) e,
  ABAIXO dela, o grid de 3 colunas: bloco de texto (título + parágrafo)
  à esquerda, foto no meio, terceira coluna de texto alinhada à base da
  foto. Larguras fixas em 35% / 30% / 35% (somam 100%).
*/
.vinhedo-hara {
  position: relative;
  overflow: hidden;   /* recorta a raiz que cresce pra fora nas bordas */
  display: flex;
  flex-direction: column;   /* raiz em cima, grid de conteúdo embaixo */
  gap: var(--sp-section);
  padding: var(--sp-16) var(--grid-margin) var(--sp-section);
  /* Sem background-color própria — o fundo vem do body (ver bg-swap.js). */
}

/* ── Raiz que nasce pra baixo (faixa no topo; conteúdo entra abaixo) ── */
.vinhedo-hara__roots {
  position: relative;
  z-index: 1;
  width: 100%;
  pointer-events: none;
  /* Máscara suave: desvanece o topo (onde a raiz nasce) e as pontas de
     baixo, pra não dar pra ver com nitidez nem o início nem o fim dos traços. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 42%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 42%, transparent 100%);
}
.vinhedo-hara__roots-svg {
  display: block;
  width: 100%;
  height: auto;   /* altura deriva do viewBox — mantém a raiz inteira, sem cortar */
}
.vinhedo-hara__root-path {
  fill: none;
  stroke: var(--color-areia);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.1;
  /* O traço é "desenhado" animando stroke-dashoffset (dasharray/offset
     iniciais vêm do roots.js, que mede o comprimento real de cada path).
     O delay por ramo também é aplicado inline pelo JS. */
  transition: stroke-dashoffset 1.6s var(--ease);
}
.vinhedo-hara__root-path--main    { stroke-width: 2.5; }
.vinhedo-hara__root-path--branch  { stroke-width: 1.75; }
.vinhedo-hara__root-path--tendril { stroke-width: 1.25; }

/* ── Grid de conteúdo (abaixo da raiz) ── */
.vinhedo-hara__grid {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  /* Sem gap: as 3 colunas somam 100% (35/30/35) — gap somaria largura
     extra e estouraria a linha. O respiro entre colunas vem do padding
     interno do content/text-col. */
}

/* ── Entrada do conteúdo — só DEPOIS que a raiz cresceu (.is-grown, via roots.js) ── */
.vinhedo-hara__content,
.vinhedo-hara__media,
.vinhedo-hara__text-col {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.vinhedo-hara.is-grown .vinhedo-hara__content  { opacity: 1; transform: none; }
.vinhedo-hara.is-grown .vinhedo-hara__media     { opacity: 1; transform: none; transition-delay: 0.15s; }
.vinhedo-hara.is-grown .vinhedo-hara__text-col  { opacity: 1; transform: none; transition-delay: 0.3s; }

.vinhedo-hara__content {
  position: relative;   /* junto com z-index, mantém o título acima da foto */
  z-index: 3;           /* acima da mídia (2) dentro do grid */
  flex: 0 0 35%;   /* proporção exata — não encolhe, não trava em max-width */
  min-width: 0;    /* sem isso, as linhas do título em nowrap forçam a coluna a crescer além dos 35% */
  align-self: flex-start;
  margin-top: -14vh;   /* título começa acima do topo da foto */
  padding-right: var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.vinhedo-hara__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Sem color própria — herda do body (ver bg-swap.js), fica sempre com contraste. */
}

.vinhedo-hara__title-line {
  white-space: nowrap;
}

.vinhedo-hara__title-line--italic {
  font-style: italic;
}

.vinhedo-hara__text {
  max-width: 32ch;
  text-align: left;
  margin: 0;
}


.vinhedo-hara__media {
  position: relative;   /* âncora da máscara (::after) */
  z-index: 2;           /* abaixo do título (content=3) */
  flex: 0 0 30%;
  min-width: 0;
  align-self: stretch;
  height: 80vh;
  overflow: hidden;
}

.vinhedo-hara__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 40%;
}

/* Máscara no canto superior esquerdo: a linha do título invade a foto ali.
   O gradiente parte da própria cor de fundo da seção (leitura contínua do
   texto) e some sobre a imagem. */
.vinhedo-hara__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 50% at top left,
    var(--color-terra-mais-escura-bg) 0%,
    color-mix(in srgb, var(--color-terra-mais-escura-bg) 55%, transparent) 38%,
    transparent 100%
  );
}

/* Coluna da direita: TODO o corpo de texto fica aqui, agrupado na base da
   foto — parágrafo descritivo e, logo abaixo, a assinatura HARA Vineart. */
.vinhedo-hara__text-col {
  position: relative;
  z-index: 2;
  flex: 0 0 35%;
  min-width: 0;
  align-self: stretch;
  padding-left: var(--sp-12);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-8);
}

.vinhedo-hara__text-col .vinhedo-hara__text {
  max-width: 34ch;
}
.vinhedo-hara__text--italic {
  font-style: italic;
}

@media (max-width: 1024px) {
  .vinhedo-hara {
    gap: var(--sp-8);
    padding: var(--sp-12) var(--grid-margin) var(--sp-16);
  }
  .vinhedo-hara__grid {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-8);
  }
  .vinhedo-hara__content,
  .vinhedo-hara__media,
  .vinhedo-hara__text-col {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .vinhedo-hara__media {
    height: auto;
    aspect-ratio: 4 / 5;
  }
  /* Título não sobrepõe mais a foto quando empilhado — sem máscara. */
  .vinhedo-hara__media::after {
    display: none;
  }
  .vinhedo-hara__text-col {
    align-self: auto;
    justify-content: flex-start;
  }
  .vinhedo-hara__title-line {
    white-space: normal;
  }
}