/* ==========================================================================
   ChatISP: /sobre

   So o que e EXCLUSIVO desta pagina. Capa, dupla, painel, painel-dados,
   especificacoes, comparativo, passos, fita, relacionadas e chamada vivem em
   css/pagina.css; grade, cartao, botao, nota e aviso vivem em css/site.css.

   Duas pecas proprias:
     .placa        placa de identificacao da empresa, no painel da capa
     .vocabulario  glossario termo + glosa, no painel da secao #oficio

   Nenhum valor escrito a mao: so var().
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Placa de identificacao (capa)

   Uma placa gravada, nao um cartao: o .capa-painel ja traz fundo, borda e
   sombra, entao aqui so mora o ritmo das linhas. Os dois rotulos internos
   usam o .painel-titulo do kit, e a familia de sistemas usa a .fita. Nao ha
   motivo para esta pagina reinventar nenhum dos dois.
   -------------------------------------------------------------------------- */

.placa {
  display: grid;
  gap: var(--e2);
}

/* Cada rotulo fica colado no bloco que ele nomeia; o respiro maior vai ANTES
   do rotulo seguinte, nunca entre o rotulo e a sua lista. */
.placa > .painel-titulo ~ .painel-titulo {
  margin-top: var(--e5);
}

.placa-linhas {
  display: grid;
  margin: 0;
}

/* Rotulo a esquerda, valor a direita, fio entre as linhas. Quando o valor nao
   cabe ao lado do rotulo ele desce sozinho para a linha seguinte. Por isso o
   alinhamento nasce do space-between, e nao de um text-align que deixaria o
   texto quebrado encostado na direita. */
.placa-linhas > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e1) var(--e5);
  padding-block: var(--e3);
  border-bottom: 1px dashed var(--borda-forte);
}

.placa-linhas > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.placa-linhas dt {
  color: var(--tenue);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
}

.placa-linhas dd {
  margin: 0;
  color: var(--texto);
  font-family: var(--titulo);
  font-size: var(--c3);
  font-weight: var(--p-medio);
  letter-spacing: var(--tk3);
}

/* Dos tres sistemas da fita, so um e o produto desta pagina. O destaque diz
   isso sem precisar de legenda. */
.placa-familia .placa-atual {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--verde);
  font-weight: var(--p-forte);
}

/* --------------------------------------------------------------------------
   02. Vocabulario obrigatorio (#oficio)

   Termo e glosa em coluna, com um fio verde a esquerda. A lista precisa ler
   como glossario tecnico, nao como mais uma lista de recursos: e o argumento
   da secao (o produto teve de aprender a lingua do provedor) virando forma.
   -------------------------------------------------------------------------- */

.vocabulario {
  display: grid;
  gap: var(--e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vocabulario > li {
  display: grid;
  gap: var(--e1);
  padding-left: var(--e4);
  border-left: 1px solid var(--verde-linha);
}

.vocabulario-termo {
  color: var(--texto);
  font-family: var(--titulo);
  font-size: var(--c2);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
}

.vocabulario-glosa {
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   03. Telas estreitas
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  /* Com a .dupla em coluna unica o painel passa a ocupar a largura inteira:
     o glossario vira duas colunas para nao virar uma torre de seis linhas. */
  .vocabulario {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e5);
  }
}

@media (max-width: 680px) {
  .vocabulario {
    grid-template-columns: 1fr;
    gap: var(--e4);
  }

  .placa-linhas > div {
    padding-block: var(--e2);
  }
}