/*
  Amparo — seção CLARA (fundo Neblina, conteúdo terra escura) com o mesmo
  layout de 3 colunas da vinhedo-hara: título grande à esquerda sobrepondo
  a foto central (cesto de uvas); à direita, uma foto menor (uniforme) e o
  parágrafo. Larguras fixas 35% / 30% / 35% (somam 100%, sem gap).
*/
.amparo {
  /* Tintas locais desta seção clara — derivadas dos tokens globais */
  --amparo-ink:   var(--color-dark);
  --amparo-muted: var(--color-text-muted);

  position: relative;
  overflow: hidden;   /* recorta o título que invade a foto nas bordas */
  background-color: var(--color-neblina);
  color: var(--amparo-ink);
  /* padding-top compensa o -12vh do título, pra folga contar a partir do
     TÍTULO (e não da foto, que começa 12vh abaixo). */
  padding: calc(var(--sp-section) + 12vh + var(--sp-16) + var(--sp-12)) var(--grid-margin) var(--sp-section);
}

/* ── Grid: título | foto central | (foto menor + parágrafo) ── */
.amparo__grid {
  display: flex;
  align-items: center;
}

/* ── Coluna 1: título grande (sobrepõe a foto) + subtítulo ── */
.amparo__content {
  position: relative;
  z-index: 3;           /* título acima da foto */
  flex: 0 0 30%;
  min-width: 0;         /* deixa as linhas em nowrap transbordarem sobre a foto */
  align-self: flex-start;
  margin-top: -12vh;    /* título começa acima do topo da foto */
  padding-right: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.amparo__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-dark);
}
.amparo__title-line {
  white-space: nowrap;   /* transborda pra direita, sobre a foto */
}
.amparo__subtitle {
  margin: 0;
  color: var(--color-dark);   /* mesma cor do título */
}

/* ── Coluna 2: foto central (cesto de uvas) — maior ── */
.amparo__media {
  position: relative;
  z-index: 2;           /* abaixo do título (content=3) */
  flex: 0 0 40%;
  min-width: 0;
  align-self: stretch;
  height: 96vh;
  overflow: hidden;
}
.amparo__photo--main {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 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 e some sobre a imagem. */
.amparo__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 50% at top left,
    var(--color-neblina) 0%,
    color-mix(in srgb, var(--color-neblina) 55%, transparent) 38%,
    transparent 100%
  );
}

/* ── Coluna 3: foto menor (uniforme) no topo + parágrafo na base ── */
.amparo__text-col {
  position: relative;
  z-index: 2;
  flex: 0 0 30%;
  min-width: 0;
  align-self: stretch;
  padding-left: var(--sp-12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-8);
}
.amparo__photo--small {
  width: 62%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
/* Parágrafo com a MESMA largura da foto pequena. */
.amparo__body {
  width: 62%;
  max-width: none;
  margin: 0;
  color: var(--amparo-ink);
}

/* ── Responsivo: empilha as 3 colunas ── */
@media (max-width: 1024px) {
  .amparo {
    padding: var(--sp-16) var(--grid-margin);
  }
  .amparo__grid {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-12);
  }
  .amparo__content,
  .amparo__media,
  .amparo__text-col {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .amparo__media {
    height: auto;
    aspect-ratio: 4 / 5;
  }
  /* Título não sobrepõe mais a foto quando empilhado — sem máscara. */
  .amparo__media::after {
    display: none;
  }
  .amparo__title-line {
    white-space: normal;
  }
  .amparo__photo--small {
    width: 50%;
  }
  .amparo__body {
    width: 100%;
  }
}