/* EDULIDER — Home (front-page.php).
 *
 * Depende de tokens.css e base.css, e só é enfileirado na home (ver
 * `edulider_enfileirar_home()`). Escrito mobile-first: os dois pontos de quebra
 * são 640px e 1024px, os mesmos `sm` e `lg` do projeto Next de onde a home veio.
 */

/* As peças que a Home divide com /sobre, /privacidade e /termos — eyebrow,
 * pesos de texto, modificadores de botão, moldura de seção e cartão — moram em
 * base.css, que carrega no site inteiro. Aqui fica só o que é da Home. */

/* Só quando há foto de fundo: `isolate` fecha um contexto de empilhamento para
 * o `z-index: -1` da imagem ficar atrás do conteúdo sem sumir atrás da seção.
 * `overflow: hidden` também contém a sobra do parallax. */
.edulider-secao--com-foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* ===== Fundo de foto que vai de borda a borda ===== */
.edulider-fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.edulider-fundo__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.edulider-fundo__foto--suave { opacity: 0.15; }
.edulider-fundo__foto--presente { object-position: 72% center; }

/* Véu SÓ abaixo de 1024px. No desktop a foto da apostila entra inteira e a
 * metade esquerda dela já é mesa escura; no mobile a foto é cortada e o texto
 * cai em cima da capa colorida, então lá o véu continua necessário. */
.edulider-fundo__veu-mobile {
  position: absolute;
  inset: 0;
  background: rgba(22, 40, 15, 0.88);
}

/* O elemento é mais alto que a seção: a folga de 8% para cada lado é o que o
 * parallax percorre, então a borda nunca fica vazia. */
.edulider-parallax {
  position: absolute;
  inset-inline: 0;
  top: -8%;
  height: 116%;
}

/* ===== Seção 1 — Hero, e Seção 7 — Chamada final ===== */
.edulider-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-ink-900);
  color: #fff;
}
/* O cabeçalho é fixo e passa por cima do hero. A folga vai na seção, e não no
 * conteúdo dela, para não ter de refazer a conta nas duas quebras — e a foto,
 * que é posicionada em `inset: 0`, continua cobrindo tudo. A chamada final não
 * entra: ela fica no meio da página, onde a barra não sobrepõe nada. */
.edulider-hero:not(.edulider-hero--final) { padding-top: var(--altura-cabecalho); }
.edulider-hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
}
.edulider-hero__foto--final { object-position: 75% center; }

/* Véu de leitura: base uniforme, pontas um pouco mais fechadas para o título
 * não encostar na janela clara do canto da foto. */
.edulider-veu {
  position: absolute;
  inset: 0;
  z-index: 10;
  background-color: rgba(22, 40, 15, 0.7);
  background-image: linear-gradient(
    to bottom,
    rgba(22, 40, 15, 0.78),
    transparent,
    rgba(22, 40, 15, 0.78)
  );
}

.edulider-hero__conteudo {
  position: relative;
  z-index: 20;
  display: flex;
  min-height: 34rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 64px;
  text-align: center;
}
.edulider-hero__titulo {
  margin: 20px 0 0;
  max-width: 56rem;
  font-size: var(--text-2xl);
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
}
.edulider-hero__linha {
  margin: 24px 0 0;
  max-width: 42rem;
  font-size: var(--text-md);
  font-weight: 300;
  color: var(--color-green-100);
}
/* Mobile: empilhados e de largura total, o primário em cima. */
.edulider-hero__acoes {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  margin-top: 36px;
}
.edulider-hero__acoes > * { width: 100%; }

/* ===== Faixa do lema, entre o hero e o vídeo ===== */
/* Verde sólido de borda a borda: separa a foto escura do hero da areia do
 * vídeo e dá ao lema o peso de um carimbo. `--color-brand-solid` e não o verde
 * de marca, que não carrega texto branco. */
.edulider-lema {
  background: var(--color-brand-solid);
  color: #fff;
}
.edulider-lema__texto {
  margin: 0 auto;
  padding-block: 28px;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

/* ===== Seção 2 — Vídeo de acolhimento ===== */
.edulider-video {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-ink-900);
}
.edulider-video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.edulider-video__veu {
  position: absolute;
  inset: 0;
  background: rgba(22, 40, 15, 0.25);
}
.edulider-video__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-ink-900);
  box-shadow: var(--shadow-md);
}

/* ===== Seção 4 — O presente pedagógico ===== */
/* A coluna para em 36rem: mais que isso e o fim do título cairia na capa branca
 * da apostila, a 1,06:1 de contraste. */
.edulider-presente__texto { max-width: 36rem; }
.edulider-presente__acao { margin-top: 28px; }

/* ===== Seção 5 — Comunidade ===== */
/* No mobile a foto vem antes do texto; a partir de 1024px ela vai para a direita. */
.edulider-comunidade { margin-top: 8px; }
.edulider-comunidade__foto {
  order: 1;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.edulider-comunidade__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.edulider-comunidade__texto { order: 2; }
.edulider-comunidade__acao { margin-top: 28px; }

/* ===== Seção 6 — Depoimentos ===== */
/* Sem textura atrás dos cartões: a foto de papel amassado que vinha do projeto
 * Next aparecia nos vãos entre os cartões e no rodapé do bloco, e lia como
 * sujeira, não como papel. O fundo areia da seção já dá o calor que ela buscava. */
.edulider-depoimentos { margin-top: 32px; }
.edulider-depoimentos__lista {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.edulider-depoimentos__aviso { margin: 20px 0 0; }

/* `min-width: 0`: item de grid não encolhe abaixo do próprio conteúdo por
 * padrão — sem isso o parágrafo empurra o cartão para fora da viewport. */
.edulider-depoimento {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}
.edulider-depoimento__quem { display: flex; align-items: center; gap: 12px; }
.edulider-depoimento__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-green-100);
  color: var(--color-green-800);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
}
.edulider-depoimento__identificacao { min-width: 0; }
.edulider-depoimento__nome {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink-900);
}
.edulider-depoimento__origem {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: 300;
  color: var(--color-ink-600);
}
.edulider-depoimento__texto {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  color: var(--color-ink-700);
}

/* ===== Seção 7 — Chamada final ===== */
/* Sem a altura mínima do hero: a chamada final é um fecho curto, não uma
 * abertura de página — quem manda na altura dela é o respiro de seção. Pedido
 * do Lucas em 18/set para dar mais ar à seção: o respiro sobe acima do das
 * seções comuns (64/80/96px), a seção continua sem se comportar como abertura
 * de página. */
.edulider-hero--final .edulider-hero__conteudo {
  min-height: 0;
  padding-block: 96px;
}
.edulider-final { gap: 32px; }
.edulider-final__simbolo { color: var(--color-green-300); line-height: 0; }
.edulider-final__simbolo svg { width: auto; height: 44px; }
.edulider-final__titulo {
  margin: 0;
  max-width: 36rem;
  font-size: var(--text-xl);
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
}
.edulider-final__acao { width: 100%; max-width: 20rem; }

/* ===== 640px — sm ===== */
@media (min-width: 640px) {
  .edulider-lema__texto { padding-block: 36px; font-size: var(--text-2xl); }
  .edulider-hero--final .edulider-hero__conteudo { padding-block: 128px; }

  .edulider-hero__conteudo { padding-block: 96px; }
  .edulider-hero__titulo { font-size: var(--text-3xl); }
  .edulider-hero__linha { font-size: var(--text-lg); }
  /* Lado a lado, cada botão do tamanho do próprio rótulo. */
  .edulider-hero__acoes {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  .edulider-hero__acoes > * { width: auto; }

  .edulider-comunidade__foto { aspect-ratio: 3 / 2; }
  .edulider-final__titulo { font-size: var(--text-2xl); }
}

/* ===== 768px — md ===== */
@media (min-width: 768px) {
  .edulider-depoimentos__lista { grid-template-columns: repeat(3, 1fr); }
}

/* ===== 1024px — lg ===== */
@media (min-width: 1024px) {
  .edulider-hero__conteudo {
    min-height: 40rem;
    padding-block: 112px;
  }
  .edulider-hero__titulo { font-size: var(--text-4xl); }

  .edulider-fundo__foto--presente { object-position: center; }
  .edulider-fundo__veu-mobile { display: none; }
  .edulider-presente__texto { max-width: 32rem; }

  .edulider-comunidade { grid-template-columns: 1.1fr 1fr; }
  .edulider-comunidade__texto { order: 1; }
  .edulider-comunidade__foto { order: 2; }
}

/* A home fecha em seção escura de borda a borda; a folga que o base.css dá ao
 * rodapé abriria um vão claro entre duas superfícies escuras. */
body.home .edulider-rodape { margin-top: 0; }