/* EDULIDER — páginas de conteúdo: /sobre, /contato, /privacidade, /termos e a
 * tela da comunidade dentro de "Minha conta".
 *
 * Depende de tokens.css e base.css, e só é enfileirado nessas telas (ver
 * `edulider_enfileirar_paginas()`). Mobile-first, com as mesmas quebras de
 * 640px e 1024px da Home.
 */

/* ===== Moldura das páginas legais ===== */
/* A coluna para em 48rem: linha de texto jurídico mais larga que isso cansa a
 * leitura, e estas páginas são para ler inteiras. */
.edulider-legal {
  max-width: 48rem;
  padding-block: 48px;
}

.edulider-legal__titulo {
  margin: 12px 0 0;
  font-size: var(--text-2xl);
  font-weight: 800;
  text-wrap: balance;
}
.edulider-legal__introducao {
  margin: 16px 0 0;
  font-size: var(--text-md);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  color: var(--color-ink-700);
}

/* ===== Aviso ===== */
.edulider-aviso {
  margin-top: 32px;
  padding: 12px 16px;
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-subtle);
  font-size: var(--text-sm);
  color: var(--color-ink-800);
}
.edulider-aviso p { margin: 0; }
.edulider-aviso__titulo { margin-bottom: 4px !important; font-weight: 700; }

/* ===== Sumário ===== */
.edulider-legal__sumario { margin-top: 40px; }
.edulider-legal__sumario-titulo { color: var(--color-ink-600); }
.edulider-legal__sumario ol {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}
/* 44px de alvo de toque: a lista tem dez links e eles ficam colados no mobile. */
.edulider-legal__sumario a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-ink-700);
  text-decoration: none;
}
.edulider-legal__sumario a:hover { color: var(--color-green-700); }

/* ===== Seções da página legal ===== */
.edulider-legal__secoes {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
}
.edulider-legal__secao-titulo {
  margin: 0 0 16px;
  font-size: var(--text-lg);
  font-weight: 700;
}
/* O corpo das seções legais: parágrafos e listas vindos do texto da EDULIDER.
 * Estilo só aqui dentro, e não global, para não vestir parágrafo de outra tela. */
.edulider-legal__secoes p {
  margin: 0 0 12px;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-700);
}
.edulider-legal__secoes p:last-child { margin-bottom: 0; }
.edulider-legal__secoes strong {
  font-weight: 700;
  color: var(--color-ink-900);
}
.edulider-legal__secoes ul {
  margin: 0 0 12px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.edulider-legal__secoes li {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-700);
}
/* O marcador acompanha a marca, mas em verde escuro: o verde de marca em peça
 * pequena sobre areia não chega aos 4,5:1. */
.edulider-legal__secoes li::marker { color: var(--color-green-700); }
.edulider-legal__secoes a {
  color: var(--color-green-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A data de atualização é o primeiro dado que se procura num documento legal. */
.edulider-legal__data {
  margin: 16px 0 0;
  font-size: var(--text-sm);
  color: var(--color-ink-600);
}
.edulider-legal__rodape {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--color-ink-600);
}
.edulider-legal__rodape p { margin: 0; }

/* ===== Moldura de foto que ainda não chegou ===== */
/* Tracejado e com o rótulo na cara: a página não muda de forma quando a foto
 * chegar, e enquanto isso ninguém confunde o espaço vazio com erro de carga. */
.edulider-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  color: var(--color-ink-600);
  /* Fonte do site, e não monoespaçada: o site vai ao ar com estas molduras à
     vista, e monoespaçado ali lia como saída de terminal. Casa com o selo de
     pendência, que mudou pelo mesmo motivo. */
  font-size: var(--text-sm);
  text-align: center;
  padding: 8px;
}

/* ===== /sobre ===== */
.edulider-sobre { padding-block: 48px; }
/* Os blocos da página se separam por respiro, não por linha. */
.edulider-sobre > section { margin-bottom: 64px; }

/* A capa nasce debaixo do cabeçalho, que é fixo e passa por cima dela nesta
 * tela (ver `edulider_cabecalho_sobreposto()`). O respiro de cima soma a altura
 * da barra para o olho continuar vendo os mesmos 56px. */
.edulider-sobre__capa { padding-block: 56px; padding-top: calc(56px + var(--altura-cabecalho)); }
.edulider-sobre__titulo {
  margin: 16px 0 0;
  max-width: 48rem;
  font-size: var(--text-2xl);
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
}

.edulider-sobre__historia {
  display: grid;
  gap: 32px;
  margin-top: 24px;
}
.edulider-sobre__texto {
  order: 1;
  max-width: 48rem;
  font-size: var(--text-md);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  color: var(--color-ink-700);
}
/* No celular o texto vem primeiro e as fotos depois: três fotos antes do
 * primeiro parágrafo empurrariam a leitura para bem longe do título. */
.edulider-sobre__fotos {
  order: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.edulider-sobre__foto {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.edulider-sobre__foto--larga {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3;
}

/* Filete verde à esquerda, em vez de aspas: é recado da equipe, não citação. */
.edulider-sobre__recado {
  margin-top: 32px;
  max-width: 48rem;
  padding-left: 20px;
  border-left: 2px solid var(--color-brand);
  font-size: var(--text-md);
  font-weight: 300;
  color: var(--color-ink-700);
}
.edulider-sobre__recado p { margin: 0 0 4px; }
.edulider-sobre__assinatura {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  /* green-800 e não o verde de marca: aqui é texto sobre areia. */
  color: var(--color-green-800);
}
.edulider-sobre__assinatura--final { font-size: var(--text-lg); font-weight: 800; }

.edulider-sobre__video {
  margin-top: 40px;
  max-width: 48rem;
}
.edulider-sobre__video p { margin: 12px 0 0; }

/* Nossa trajetória: fotos de tamanhos diferentes (4:3, 16:9, quadrada) numa
 * moldura só, 3:2 com `cover` — senão as legendas ficariam desalinhadas. 3:2
 * e não 4:3 porque a de 16:9 perderia o rosto de quem está na ponta. */
.edulider-trajetoria {
  display: grid;
  gap: 32px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.edulider-trajetoria__item { margin: 0; }
.edulider-trajetoria__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.edulider-trajetoria__item figcaption {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--color-brand);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-600);
}
.edulider-trajetoria__item figcaption strong {
  display: block;
  font-weight: 600;
  color: var(--color-ink-900);
}

.edulider-sobre__proposito {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--color-sand-100);
}
.edulider-sobre__proposito svg { height: 40px; width: auto; color: var(--color-green-800); }
.edulider-sobre__proposito .edulider-secao__linha { max-width: 40rem; font-size: var(--text-lg); }

.edulider-valores {
  display: grid;
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.edulider-valor { display: flex; flex-direction: column; gap: 12px; }
.edulider-valor__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-green-50);
  color: var(--color-green-700);
}
.edulider-valor__nome {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
}
.edulider-valor__texto {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-600);
}

.edulider-sobre__para-quem { margin-top: 24px; }
.edulider-sobre__foto-larga {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.edulider-sobre__foto-larga img { width: 100%; height: 100%; object-fit: cover; }

.edulider-sobre__equipe { margin-top: 24px; max-width: 40rem; }
.edulider-sobre__equipe p { margin: 12px 0 0; }

/* ===== /contato ===== */
.edulider-contato { padding-block: 48px; }

.edulider-contato__capa { max-width: 48rem; }
.edulider-contato__titulo {
  margin: 12px 0 0;
  font-size: var(--text-2xl);
  font-weight: 800;
  text-wrap: balance;
}
.edulider-contato__abertura {
  margin: 16px 0 0;
  font-size: var(--text-md);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  color: var(--color-ink-700);
}

.edulider-contato__colunas {
  display: grid;
  gap: 40px;
  margin-top: 48px;
}

.edulider-contato__secao-titulo {
  margin: 0 0 20px;
  font-size: var(--text-md);
  font-weight: 700;
}

.edulider-contato__canais { display: grid; gap: 20px; align-content: start; }

/* Recortada em faixa: a foto acompanha a coluna dos canais, não compete com ela. */
.edulider-contato__foto {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 70% center;
  border-radius: var(--radius-lg);
}

/* O vídeo da caneca: o fundo do próprio vídeo é claro, então ele pede moldura. */
.edulider-contato__video { position: relative; margin: 0; }
.edulider-contato__video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 456;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-sand-100);
}
.edulider-video-loop__botao {
  position: absolute;
  right: 12px;
  bottom: 12px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.edulider-video-loop__botao:hover { background: rgba(0, 0, 0, 0.8); }
.edulider-video-loop__botao:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.edulider-contato__texto,
.edulider-contato__comunidade { margin: 0 0 12px; }
.edulider-contato__texto {
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  color: var(--color-ink-600);
}
.edulider-contato__comunidade {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-green-800);
}

.edulider-canais {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}
.edulider-canal { display: flex; gap: 12px; align-items: flex-start; }
.edulider-canal__icone {
  flex: none;
  margin-top: 2px;
  color: var(--color-green-700);
}
.edulider-canal > div > * { margin: 0; }
.edulider-canal__nome { font-weight: 600; color: var(--text-strong); }

/* Alvo de toque de 44px sem empurrar a linha de cima: o texto continua onde
 * está e a área clicável cresce em volta dele. */
.edulider-canal__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-body);
  text-decoration: none;
}
.edulider-canal__link:hover { color: var(--color-green-700); }
/* O e-mail é longo e não tem espaço onde quebrar; sem isto ele estoura o cartão. */
.edulider-canal__link--quebra { word-break: break-all; }

.edulider-canal__endereco { font-style: normal; }
.edulider-canal__lista { margin: 0; padding: 0; list-style: none; }

/* ===== Comunidade, dentro de "Minha conta" ===== */
.edulider-comunidade-conta {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.edulider-comunidade-conta__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.edulider-comunidade-conta__titulo {
  margin: 0 0 12px;
  font-size: var(--text-md);
  font-weight: 700;
}
.edulider-comunidade-conta__cabecalho .edulider-comunidade-conta__titulo { margin: 0; }
.edulider-comunidade-conta__nome {
  margin: 8px 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-green-800);
}

.edulider-etiqueta {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-brand-subtle);
  color: var(--color-green-800);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* ===== 640px — sm ===== */
@media (min-width: 640px) {
  .edulider-legal { padding-block: 64px; }
  .edulider-legal__titulo { font-size: var(--text-3xl); }

  .edulider-sobre { padding-block: 64px; }
  .edulider-sobre > section { margin-bottom: 80px; }
  .edulider-sobre__capa { padding-block: 72px; padding-top: calc(72px + var(--altura-cabecalho)); }
  .edulider-sobre__titulo { font-size: var(--text-3xl); }

  .edulider-sobre__proposito { padding: 48px; }
  .edulider-trajetoria { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  /* Cinco princípios: em grade fixa sobraria um cartão sozinho à esquerda.
   * Com flex-wrap centralizado o último par fica no meio, com qualquer número. */
  .edulider-valores { display: flex; flex-wrap: wrap; justify-content: center; }
  .edulider-valor { flex: 0 1 calc((100% - 20px) / 2); }

  .edulider-contato { padding-block: 64px; }
  .edulider-contato__titulo { font-size: var(--text-3xl); }
}

/* ===== 1024px — lg ===== */
@media (min-width: 1024px) {
  .edulider-valor { flex-basis: calc((100% - 40px) / 3); }

  /* As fotos vão para a direita, num conjunto (retrato e capa lado a lado, o
   * grupo embaixo) de altura próxima à do texto. Antes a coluna era uma pilha
   * de três fotos de 260px, bem mais alta que a história, e deixava um vão
   * grande sob o último parágrafo. O `sticky` cobre a diferença que sobra: o
   * conjunto acompanha a leitura até o fim do texto. */
  .edulider-sobre__historia {
    grid-template-columns: 1fr 460px;
    gap: 56px;
    align-items: start;
  }
  .edulider-sobre__fotos {
    order: 2;
    position: sticky;
    top: 96px;
  }

  /* Coluna fixa em 360px, como no desenho de origem: os canais são linhas
   * curtas, e deixá-los crescer com a tela abriria vãos entre ícone e texto. */
  .edulider-contato__colunas {
    grid-template-columns: 1fr 360px;
    gap: 64px;
  }
}