/*
  Manifesto — seção de 100vh, fundo Neblina. Imagem centralizada que
  TROCA entre 3 fotos em loop (cross-fade, tipo GIF — ver manifesto.js) e
  uma legenda pequena com o local abaixo.
*/
.manifesto {
  position: relative;
  overflow: hidden;   /* recorta a marca d'água gigante */
  min-height: 100vh;
  width: 100%;
  background-color: var(--color-neblina);
  /* 3 colunas: texto | imagem | vazio — laterais iguais (1fr) mantêm a
     imagem centralizada na página, com o texto ao lado. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  align-content: center;   /* a linha fica na altura da imagem — a base do texto (align-self:end) bate na base da foto */
  gap: var(--sp-12);
  padding: var(--sp-section) var(--grid-margin);
}

/* Texto lateral (coluna direita), encostado na imagem e alinhado à base dela. */
.manifesto__aside {
  position: relative;
  z-index: 1;   /* acima da marca d'água */
  grid-column: 3;
  justify-self: start;
  align-self: end;
  max-width: 32ch;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.manifesto__aside-subtitle {
  margin: 0;
  color: var(--color-dark);
}
.manifesto__aside-text {
  margin: 0;
  color: var(--color-dark);
}

/* Marca d'água "HARAS" gigante atrás de tudo. */
.manifesto__watermark {
  position: absolute;
  top: 34%;
  left: -2.5vw;
  transform: translateY(-50%);
  z-index: 2;   /* por cima da foto */
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-title);
  font-size: 15vw;
  line-height: 1;
  letter-spacing: var(--tracking-title);
  text-transform: uppercase;
  white-space: nowrap;
  /* Cinza médio + blend "difference" = aparece nos dois fundos (escura sobre
     o Neblina, clara sobre a foto escura); opacidade baixa mantém sutil. */
  color: color-mix(in srgb, white, black);
  mix-blend-mode: difference;
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

/* Imagem na coluna do meio (fica centralizada na página). */
.manifesto__inner {
  position: relative;
  z-index: 1;   /* acima da marca d'água */
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Palco do slideshow — a 1ª imagem (em fluxo) define o tamanho; as
   demais ficam sobrepostas exatamente sobre ela. */
.manifesto__slideshow {
  position: relative;
  line-height: 0;   /* remove o respiro extra abaixo da imagem */
}

/* Troca seca (tipo GIF): opacidade via .slide (utilities) + slideshow.js. */
.manifesto__slideshow > .manifesto__media:first-child {
  display: block;
  max-width: 52vw;   /* menor que antes pra caber o texto ao lado, mantendo a imagem centralizada */
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.manifesto__slideshow > .manifesto__media:not(:first-child) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .manifesto {
    /* empilha: texto acima, imagem abaixo */
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--sp-8);
    padding: var(--sp-16) var(--grid-margin);
  }
  .manifesto__aside {
    grid-column: auto;
    justify-self: center;
    align-self: auto;
    max-width: 40ch;
  }
  .manifesto__inner {
    grid-column: auto;
  }
  .manifesto__slideshow > .manifesto__media:first-child {
    max-width: 100%;
    max-height: 60vh;
  }
}