/*
  Manifesto — seção de 100vh, fundo Neblina. Vídeo centralizado (loop
  silencioso) e uma legenda pequena com o local ao lado.
*/
.manifesto {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  width: 100%;
  /* Sem background-color própria — o fundo vem do body (ver bg-swap.js). */
  /* 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;
  grid-column: 3;
  justify-self: start;
  align-self: end;
  max-width: 32ch;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
/* Sem color própria em nenhum dos dois — herdam do body (ver bg-swap.js). */
.manifesto__aside-subtitle {
  margin: 0;
}
.manifesto__aside-text {
  margin: 0;
}

/* Imagem na coluna do meio (fica centralizada na página). */
.manifesto__inner {
  position: relative;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.manifesto__slideshow {
  position: relative;
  line-height: 0;   /* remove o respiro extra abaixo do vídeo */
}

/* "Origem" — legenda pequena no canto superior direito do vídeo. */
.manifesto__label {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 1;
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-areia);
  text-shadow: 0 1px 8px rgba(32, 26, 24, 0.5);
}

.manifesto__media {
  display: block;
  max-width: 52vw;   /* menor que antes pra caber o texto ao lado, mantendo o vídeo centralizado */
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

@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__media {
    max-width: 100%;
    max-height: 60vh;
  }
}