/* ==========================================================================
   Política de Privacidade — página de texto legal.

   Não vem de frame do Figma: o documento é do jurídico e não foi desenhado. O
   que existe aqui é o mesmo cabeçalho de página interna das outras (.page-intro,
   em components.css) e um corpo de texto longo, que é o problema real desta
   página.

   Escrita mobile-first. No desktop abre em duas colunas — sumário à direita,
   texto à esquerda — e o sumário fica preso na rolagem: são nove cláusulas, e
   quem chega aqui quase sempre quer uma delas, não a leitura inteira.
   ========================================================================== */

/**
 * O .page-intro já fecha com --sp-10 embaixo; somado ao --section-py do .section
 * dava 96px de branco entre o subtítulo e o sumário no celular — quase um terço
 * de tela vazia antes do documento começar. Esta página abre direto no texto.
 */
.pagina-politica .section {
  padding-top: var(--sp-6);
}

.politica__grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 64rem) {
  .politica__grid {
    /* Texto + 300px de sumário, na mesma proporção do vão das páginas de unidade. */
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--sp-12);
    align-items: start;
  }
}

/* ==========================================================================
   Corpo do texto
   ========================================================================== */

/**
 * A medida de linha é o que faz texto legal ser lido ou abandonado: em 1140px de
 * container, sem teto, a linha passaria de 120 caracteres. 68ch é a medida em que
 * o olho volta para o começo da linha certa.
 */
.politica__corpo {
  max-width: 68ch;
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-body);
}

/**
 * Link dentro do texto legal precisa se distinguir do texto — e o `color` do
 * .politica__corpo é herdado, então sem esta regra o e-mail do Comitê LGPD sai
 * exatamente com a cor do parágrafo. Cor E sublinhado: cor sozinha não serve para
 * quem não distingue as duas.
 */
.politica__corpo p a,
.politica__corpo li a {
  color: var(--color-link);
  text-decoration: underline;
  /* E-mail e endereço longos não podem furar a coluna na tela de celular. */
  overflow-wrap: anywhere;
}

.politica__titulo {
  margin-bottom: var(--sp-6);
  color: var(--color-heading);
}

.politica__item {
  margin-bottom: var(--sp-5);
}

/* O número do item fica em negrito e na cor do texto forte: é por ele que as
   pessoas citam a cláusula ("o item 3.4 diz que..."). */
.politica__num {
  color: var(--color-heading);
  font-weight: var(--fw-bold);
}

/* Subitem (6.1.1) recuado, para a hierarquia da numeração aparecer sem depender
   só do número. */
.politica__item--sub {
  padding-left: var(--sp-5);
  border-left: 2px solid var(--color-border);
}

/* ==========================================================================
   Alíneas — as listas a), b), c) do documento
   ========================================================================== */

.politica__alineas {
  margin: 0 0 var(--sp-6);
  padding-left: var(--sp-6);
  list-style: lower-alpha;
}

.politica__alineas > li {
  margin-bottom: var(--sp-4);
  padding-left: var(--sp-2);
}

.politica__alineas > li::marker {
  color: var(--us-orange);
  font-weight: var(--fw-bold);
}

.politica__alineas strong {
  color: var(--color-heading);
}

/* ==========================================================================
   Cláusulas
   ========================================================================== */

.politica__clausula {
  padding-top: var(--sp-10);
  border-top: 1px solid var(--color-border);
  margin-top: var(--sp-10);
}

/* `scroll-margin-top` porque o header é grudento: sem isso o título da cláusula
   chegaria escondido atrás dele quando a âncora do sumário é clicada. 6rem porque
   o header tem 81px de altura — --sp-20 (80px) deixava o título encostado nele. */
.politica__clausula[id] {
  scroll-margin-top: 6rem;
}

.politica__clausula-titulo {
  margin-bottom: var(--sp-5);
  color: var(--color-heading);
  font-size: clamp(1.25rem, 1.14rem + 0.45vw, var(--fs-h3));
  line-height: var(--lh-snug);
}

/* "Cláusula Segunda" em cima do nome dela, menor e em caixa alta — a caixa alta
   é daqui, não da marcação (leitor de tela soletra caixa alta letra a letra). */
.politica__clausula-ordinal {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--us-blue-light);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================================
   Sumário
   ========================================================================== */

.politica__sumario {
  padding: var(--sp-6);
  background: var(--surface-alt);
  border-radius: var(--radius-md);
}

@media (min-width: 64rem) {
  .politica__sumario {
    /* Segunda coluna do grid; no mobile ele já vem antes do texto na ordem do HTML. */
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    /* Abaixo do header grudento, na mesma medida do scroll-margin das âncoras. */
    top: 6rem;
  }
}

.politica__sumario-titulo {
  margin-bottom: var(--sp-4);
  color: var(--color-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/**
 * Sem numeração automática, e é por correção, não por estilo: o documento não tem
 * Cláusula Quinta, então uma lista 1..8 chamaria a Sexta de "5" e mandaria a
 * pessoa citar a cláusula errada. Quem numera é o próprio título de cada uma.
 */
.politica__sumario-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  line-height: var(--lh-md);
}

.politica__sumario-lista > li + li {
  border-top: 1px solid var(--color-border-strong);
}

/**
 * Linha inteira clicável e com 44px de altura mínima: esta página é o destino do
 * link de privacidade DENTRO DO APLICATIVO da faculdade, então o sumário é tocado
 * com o polegar, não clicado com o mouse.
 */
.politica__sumario-link {
  display: block;
  min-height: 44px;
  padding-block: var(--sp-3);
  color: var(--color-text-muted);
  text-decoration: none;
}

.politica__sumario-link:hover,
.politica__sumario-link:focus-visible {
  color: var(--us-orange);
  text-decoration: underline;
}

/* ==========================================================================
   Contato do Comitê LGPD
   ========================================================================== */

.politica__contato {
  margin-top: var(--sp-12);
  padding: var(--sp-8);
  background: var(--surface-alt);
  border-radius: var(--radius-md);
}

.politica__contato-titulo {
  margin-bottom: var(--sp-5);
  color: var(--color-heading);
  font-size: clamp(1.25rem, 1.14rem + 0.45vw, var(--fs-h3));
  line-height: var(--lh-snug);
}

.politica__contato-lista {
  display: grid;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
}

.politica__contato-lista > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}

/* Alinha o ícone com a primeira linha do texto, e não com o centro do item —
   o endereço quebra em duas linhas no celular. */
.politica__contato-lista .icon {
  margin-top: 0.25em;
  color: var(--us-orange);
}

/* Mesmo motivo dos links do sumário: no aplicativo isto é tocado com o polegar,
   e o e-mail em uma linha só dava 28px de alvo. */
.politica__contato-lista a {
  display: inline-block;
  min-height: 44px;
  padding-block: var(--sp-2);
  color: var(--color-link);
  overflow-wrap: anywhere;
}

.politica__contato-nota {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-md);
}