/*
  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 {
  position: relative;
  overflow: hidden;   /* recorta o título que invade a foto nas bordas */
  /* Sem background-color nem color próprias — vêm do body (ver bg-swap.js). */
  height: 90vh;
  padding: 0 var(--grid-margin);
  display: flex;   /* align-items padrão (stretch) — o grid ocupa a altura toda */
}

/* ── Grid: título | foto central | (foto menor + parágrafo) ── */
.amparo__grid {
  display: flex;
  align-items: center;
  gap: var(--sp-2);   /* 8px entre a foto principal e a coluna 3 */
  width: 100%;
}

/* ── 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;   /* título alinhado ao 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;
  /* Sem color própria — herda do body (ver bg-swap.js). */
}
.amparo__title-line {
  white-space: nowrap;   /* transborda pra direita, sobre a foto */
}

/* ── Foto central (cesto de uvas) — maior, encostada na margem direita ── */
.amparo__media {
  position: relative;
  z-index: 2;           /* abaixo do título (content=3) */
  flex: 0 0 40%;   /* largura original (mais vertical) */
  min-width: 0;
  align-self: stretch;
  height: 100%;   /* preenche os 90vh da seção */
  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%
  );
}

/* ── Foto menor (uniforme) — à esquerda da foto principal, encostada na
   base. margin-left:auto empurra este bloco (+ a foto principal) pra
   direita; o espaço sobra entre o título e aqui. ── */
.amparo__small-media {
  position: relative;
  z-index: 2;
  flex: 0 0 12%;
  min-width: 0;
  align-self: flex-end;   /* alinhado à base da foto principal */
  margin-left: auto;
}
.amparo__photo--small {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.amparo__body {
  max-width: 32ch;
  margin: var(--sp-6) 0 0;
}

/* ── Variante --split (seção "produção artesanal"): 2 colunas simples,
   sem overlap — foto grande à esquerda, título + parágrafo à direita. ── */
.amparo--split .amparo__grid {
  gap: var(--sp-16);
}
.amparo--split .amparo__media {
  flex: 0 0 55%;
}
.amparo--split .amparo__media::after {
  display: none;   /* sem título invadindo a foto — não precisa da máscara */
}
/* Foto em estúdio com fundo branco — multiply "apaga" o branco, deixando só
   o objeto sobre a cor de fundo da própria seção (vinda do body). object-fit
   contain (em vez de cover) mostra a imagem inteira, sem cortar as pontas. */
.amparo--split .amparo__photo--main {
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.amparo--split .amparo__content {
  position: static;
  z-index: auto;
  flex: 1;
  align-self: center;
  padding-right: 0;
}
.amparo--split .amparo__title-line {
  white-space: normal;
}
.amparo--split .amparo__body {
  max-width: 40ch;
}

/* ── Responsivo: empilha as 3 colunas ── */
@media (max-width: 1024px) {
  .amparo {
    height: auto;   /* empilhado — 90vh fixo cortaria o conteúdo */
    padding: var(--sp-16) var(--grid-margin);
  }
  .amparo__grid {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-12);
  }
  .amparo__content,
  .amparo__media,
  .amparo__small-media {
    flex: 0 0 auto;
    width: 100%;
    margin-left: 0;
    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__small-media {
    align-self: stretch;
    max-width: 50%;
  }
  .amparo__body {
    max-width: none;
  }
}