/* ==========================================================================
   AnySolve Especialistas, lista pública e perfil
   Agente 3. Carregar depois de paginas.css, que já traz marca.css atrás.

   Esta é a página que se vende: uma empresa que precisa de um electricista
   em Tete entra aqui, escolhe a área e a província, e sai com nomes. Tudo o
   que está abaixo serve para que, num telemóvel, em um segundo, saia do
   cartão: área, nome, cargo, província, anos de casa, o que sabe fazer.

   Desenho: o cartão de especialista é irmão do cartão de vaga do
   cartoes.css. Papel branco, filete fino, e uma linha de dois pixéis em
   cima que acende a vermelho quando se passa por ela. As duas listas do
   site têm de parecer da mesma casa, senão parecem dois sites.

   Especificidade: tudo entra por `.as-site .as-esp-*`, que fica em 0,2,0.
   Chega para passar à frente dos selectores de elemento do BuddyX sem um
   único !important. Onde é preciso encostar a um gancho de fora, esse
   gancho vai dentro de :where() para não somar peso.

   Telemóvel primeiro: escrito para 360px e cresce a partir daí. Nada rola
   de lado a 390px, e tudo o que se toca tem 44px de altura.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. A moldura
   -------------------------------------------------------------------------- */
.as-site .as-esp-lista {
  padding-block: var(--as-e-6) var(--as-e-16);
  background-color: var(--as-papel);
  color: var(--as-texto);
}

.as-site .as-esp-lista__cabeca {
  margin-bottom: var(--as-e-6);
}

.as-site .as-esp-lista__titulo {
  margin: var(--as-e-2) 0 0;
  font-size: var(--as-t-xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--as-texto);
}

.as-site .as-esp-lista__entrada {
  max-width: var(--as-larg-texto);
  margin: var(--as-e-3) 0 0;
  font-size: var(--as-t-lead);
  line-height: 1.55;
  color: var(--as-texto-fraco);
}

@media (min-width: 768px) {
  .as-site .as-esp-lista {
    padding-block: var(--as-e-10) var(--as-e-22);
  }
  .as-site .as-esp-lista__titulo {
    font-size: var(--as-t-2xl);
  }
}

/* --------------------------------------------------------------------------
   2. A barra de procura

   Três campos e um botão. No telemóvel empilham, cada um com a sua etiqueta
   por cima: uma etiqueta dentro do campo desaparece quando se começa a
   escrever, e quem está a preencher deixa de saber o que estava a preencher.
   -------------------------------------------------------------------------- */
.as-site .as-esp-procura {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--as-e-3);
  margin-bottom: var(--as-e-6);
  padding: var(--as-e-4);
  background-color: var(--as-superficie);
  border: 1px solid var(--as-borda);
  border-top: 2px solid var(--as-borda-forte);
  border-radius: var(--as-r-papel);
}

.as-site .as-esp-procura__campo {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.as-site .as-esp-procura__rotulo {
  font-size: var(--as-t-rotulo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--as-texto-fraco);
}

.as-site .as-esp-procura input[type="search"],
.as-site .as-esp-procura select {
  width: 100%;
  min-height: var(--as-toque);
  padding: var(--as-e-2) var(--as-e-3);
  font-family: inherit;
  font-size: var(--as-t-base);
  line-height: 1.3;
  color: var(--as-texto);
  background-color: var(--as-papel);
  border: 1px solid var(--as-borda-forte);
  border-radius: var(--as-r-toque);
  transition: border-color 0.12s linear;
  appearance: none;
  -webkit-appearance: none;
}

.as-site .as-esp-procura input[type="search"]::placeholder {
  color: var(--as-texto-fraco);
  opacity: 1;
}

.as-site .as-esp-procura input[type="search"]:hover,
.as-site .as-esp-procura select:hover {
  border-color: var(--as-marca);
}

/* A lista de escolha leva a seta desenhada, porque a do sistema desaparece
   com o appearance: none e sem ela ninguém percebe que aquilo abre. */
.as-site .as-esp-procura__lista {
  position: relative;
  min-width: 0;
}

.as-site .as-esp-procura__lista select {
  padding-inline-end: var(--as-e-8);
}

.as-site .as-esp-procura__seta {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--as-e-4);
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-inline-end: 2px solid var(--as-texto-fraco);
  border-block-end: 2px solid var(--as-texto-fraco);
  transform: rotate(45deg);
  pointer-events: none;
}

.as-site .as-esp-procura__botao {
  width: 100%;
  min-height: var(--as-toque);
}

@media (min-width: 640px) {
  .as-site .as-esp-procura {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: var(--as-e-5);
  }
  .as-site .as-esp-procura__campo--texto {
    grid-column: 1 / -1;
  }
}

@media (min-width: 960px) {
  .as-site .as-esp-procura {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto;
    align-items: end;
  }
  .as-site .as-esp-procura__campo--texto {
    grid-column: auto;
  }
  .as-site .as-esp-procura__botao {
    width: auto;
    padding-inline: var(--as-e-6);
  }
}

/* --------------------------------------------------------------------------
   3. A conta e os filtros escolhidos
   -------------------------------------------------------------------------- */
.as-site .as-esp-lista__conta {
  margin: 0 0 var(--as-e-3);
  font-size: var(--as-t-meta);
  color: var(--as-texto-fraco);
  font-variant-numeric: tabular-nums;
}

.as-site .as-esp-lista__conta strong {
  color: var(--as-texto);
  font-weight: 800;
}

.as-site .as-esp-postos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-e-2);
  margin-bottom: var(--as-e-5);
}

/* Tirar um filtro é uma coisa que se faz com o polegar, à pressa, portanto
   a pílula tem altura de toque a sério e não os 28px do costume. */
.as-site .as-esp-posto {
  display: inline-flex;
  align-items: center;
  gap: var(--as-e-2);
  min-height: var(--as-toque);
  padding: 0 var(--as-e-4);
  border: 1px solid var(--as-marca-borda);
  border-radius: var(--as-r-pilula);
  background-color: var(--as-marca-tenue);
  color: var(--as-marca-tinta);
  font-size: var(--as-t-meta);
  font-weight: 700;
  text-decoration: none;
}

.as-site .as-esp-posto:hover {
  background-color: var(--as-marca);
  border-color: var(--as-marca);
  color: var(--as-sobre-marca);
}

.as-site .as-esp-posto__x {
  font-size: 1.1em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   4. A grelha e o cartão

   Uma coluna no telemóvel. A grelha usa minmax(0, 1fr) em todo o lado: sem
   isso, uma competência comprida sem espaços estica a coluna e a página
   passa a rolar de lado, que é o defeito que mais se vê nestas listas.
   -------------------------------------------------------------------------- */
.as-site .as-esp-grelha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--as-e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .as-site .as-esp-grelha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1060px) {
  .as-site .as-esp-grelha {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.as-site .as-esp-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--as-e-2);
  min-width: 0;
  padding: var(--as-e-4) var(--as-e-4) var(--as-e-5);
  background-color: var(--as-superficie);
  border: 1px solid var(--as-borda);
  border-top: 2px solid var(--as-borda-forte);
  border-radius: var(--as-r-papel);
  transition: border-color 0.12s linear;
}

.as-site .as-esp-cartao:hover,
.as-site .as-esp-cartao:focus-within {
  border-top-color: var(--as-marca);
}

/* A área em cima: é por aqui que o olho entra no cartão. */
.as-site .as-esp-cartao__area {
  margin: 0;
  font-size: var(--as-t-rotulo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: var(--as-marca-tinta);
}

/* O nome é a única coisa grande do cartão. */
.as-site .as-esp-cartao__nome {
  margin: 0;
  font-size: var(--as-t-md);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--as-texto);
  overflow-wrap: anywhere;
}

.as-site .as-esp-cartao__nome a {
  color: inherit;
  text-decoration: none;
}

.as-site .as-esp-cartao__nome a:hover {
  color: var(--as-marca-tinta);
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.16em;
}

.as-site .as-esp-cartao__cargo {
  margin: 0;
  font-size: var(--as-t-base);
  font-weight: 600;
  line-height: 1.35;
  color: var(--as-texto-suave);
  overflow-wrap: anywhere;
}

.as-site .as-esp-cartao__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-e-1) var(--as-e-3);
  margin: var(--as-e-1) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--as-t-meta);
  color: var(--as-texto-fraco);
}

.as-site .as-esp-cartao__meta li {
  margin: 0;
}

/* Separador entre província e anos, desenhado e não escrito, para não ficar
   um traço solto quando um dos dois faltar. */
.as-site .as-esp-cartao__meta li + li::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-inline-end: var(--as-e-3);
  vertical-align: 0.22em;
  border-radius: 50%;
  background-color: var(--as-borda-forte);
}

.as-site .as-esp-cartao__prov {
  font-weight: 700;
  color: var(--as-texto-suave);
}

.as-site .as-esp-cartao__anos {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   5. Competências

   Ganham contorno e a tinta da marca porque são o que o empregador varre
   com os olhos: é a diferença entre "serralheiro" e "serralheiro que solda
   inox". Não são decoração.
   -------------------------------------------------------------------------- */
.as-site .as-esp-cartao__comp {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--as-e-2) 0 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.as-site .as-esp-comp {
  max-width: 100%;
  padding: 3px var(--as-e-2);
  font-size: var(--as-t-rotulo);
  font-weight: 600;
  line-height: 1.4;
  color: var(--as-marca-tinta);
  background-color: var(--as-marca-tenue);
  border: 1px solid var(--as-marca-borda);
  border-radius: var(--as-r-papel);
  overflow-wrap: anywhere;
}

.as-site .as-esp-comp--mais {
  color: var(--as-texto-fraco);
  background-color: var(--as-superficie-2);
  border-color: var(--as-borda);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   6. O contacto

   Fechado é o estado normal: quem passa sem conta vê a linha, não vê o
   número. A linha fechada não é um erro nem um aviso, é uma condição, por
   isso fica em cinzento com o filete da marca, e não em vermelho.
   -------------------------------------------------------------------------- */
.as-site .as-esp-cartao__contacto,
.as-site .as-esp-perfil__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-e-1) var(--as-e-4);
  margin: var(--as-e-3) 0 0;
  padding-top: var(--as-e-3);
  border-top: 1px dashed var(--as-borda);
  font-size: var(--as-t-meta);
  line-height: 1.5;
  min-width: 0;
}

.as-site .as-esp-cartao__contacto a,
.as-site .as-esp-perfil__contacto a {
  color: var(--as-texto);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.as-site .as-esp-cartao__contacto a:hover,
.as-site .as-esp-perfil__contacto a:hover {
  color: var(--as-marca-tinta);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.as-site .as-esp-contacto__tel {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.as-site .as-esp-contacto--fechado a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--as-texto-fraco);
  font-weight: 600;
}

.as-site .as-esp-contacto--fechado a:hover {
  color: var(--as-marca-tinta);
}

.as-site .as-esp-contacto--sem {
  color: var(--as-texto-fraco);
}

/* --------------------------------------------------------------------------
   7. O botão do cartão
   -------------------------------------------------------------------------- */
.as-site .as-esp-cartao__fim {
  display: flex;
  margin-top: auto;
  padding-top: var(--as-e-4);
}

.as-site .as-esp-cartao__ver {
  width: 100%;
  min-height: var(--as-toque);
  border-color: var(--as-marca);
  color: var(--as-marca-tinta);
}

.as-site .as-esp-cartao__ver:hover {
  background-color: var(--as-marca);
  border-color: var(--as-marca);
  color: var(--as-sobre-marca);
}

@media (min-width: 700px) {
  .as-site .as-esp-cartao__ver {
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   8. Paginação

   Endereços a sério, um por página. Numa rede móvel lenta, uma paginação
   que depende de um guião é uma paginação que às vezes não existe.
   -------------------------------------------------------------------------- */
.as-site .as-esp-pag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--as-e-3);
  margin-top: var(--as-e-8);
  padding-top: var(--as-e-5);
  border-top: 1px solid var(--as-borda);
}

.as-site .as-esp-pag__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.as-site .as-esp-pag__lista li {
  margin: 0;
}

.as-site .as-esp-pag :where(a, span).page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--as-toque);
  min-height: var(--as-toque);
  padding: 0 var(--as-e-3);
  border: 1px solid var(--as-borda-forte);
  border-radius: var(--as-r-toque);
  color: var(--as-texto);
  font-size: var(--as-t-meta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.as-site .as-esp-pag a.page-numbers:hover {
  border-color: var(--as-marca);
  color: var(--as-marca-tinta);
}

.as-site .as-esp-pag :where(span).page-numbers.current {
  background-color: var(--as-marca);
  border-color: var(--as-marca);
  color: var(--as-sobre-marca);
}

.as-site .as-esp-pag :where(span).page-numbers.dots {
  border-color: transparent;
  color: var(--as-texto-fraco);
}

.as-site .as-esp-pag__conta {
  margin: 0;
  font-size: var(--as-t-meta);
  color: var(--as-texto-fraco);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   9. Lista vazia

   Vai ser o estado normal no primeiro mês, portanto trata-se com respeito e
   não como um erro. Contorno a tracejado, que diz "ainda não", e não caixa
   vermelha, que diz "correu mal".
   -------------------------------------------------------------------------- */
.as-site .as-esp-vazio {
  max-width: 46rem;
  margin: var(--as-e-4) 0 0;
  padding: var(--as-e-8) var(--as-e-5);
  background-color: var(--as-superficie);
  border: 2px dashed var(--as-borda-forte);
  border-radius: var(--as-r-papel);
}

.as-site .as-esp-vazio__titulo {
  margin: 0 0 var(--as-e-2);
  font-size: var(--as-t-md);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--as-texto);
  text-wrap: balance;
}

.as-site .as-esp-vazio__texto {
  max-width: 48ch;
  margin: 0 0 var(--as-e-5);
  line-height: 1.6;
  color: var(--as-texto-fraco);
}

.as-site .as-esp-vazio__accoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-e-3);
}

.as-site .as-esp-vazio__accoes .as-btn {
  min-height: var(--as-toque);
}

@media (min-width: 560px) {
  .as-site .as-esp-vazio {
    padding: var(--as-e-10) var(--as-e-8);
  }
}

/* --------------------------------------------------------------------------
   10. Aviso de privacidade

   Uma base de dados de currículos tem obrigação de dizer à cara do
   candidato e da empresa quem é que vê o quê.
   -------------------------------------------------------------------------- */
.as-site .as-esp-lista__aviso {
  margin-top: var(--as-e-10);
  padding: var(--as-e-5);
  font-size: var(--as-t-meta);
  line-height: 1.6;
  color: var(--as-texto-suave);
  background-color: var(--as-papel-fundo);
  border-inline-start: 3px solid var(--as-marca);
  border-radius: var(--as-r-papel);
}

.as-site .as-esp-lista__aviso p {
  margin: 0;
}

.as-site .as-esp-lista__aviso p + p {
  margin-top: var(--as-e-3);
}

.as-site .as-esp-lista__aviso strong {
  color: var(--as-texto);
}

/* --------------------------------------------------------------------------
   11. O perfil de um especialista

   Mesmo desenho da lista: mesma tinta, mesmo filete, mesmas pílulas. Quem
   clica num cartão tem de sentir que continua na mesma página, e não que
   caiu noutro sítio.
   -------------------------------------------------------------------------- */
.as-site .as-esp-perfil {
  padding-block: var(--as-e-6) var(--as-e-16);
  background-color: var(--as-papel);
  color: var(--as-texto);
}

.as-site .as-esp-perfil__nota {
  margin: 0 0 var(--as-e-5);
  padding: var(--as-e-3) var(--as-e-4);
  font-size: var(--as-t-meta);
  line-height: 1.55;
  color: var(--as-texto-suave);
  background-color: var(--as-marca-tenue);
  border-inline-start: 3px solid var(--as-marca);
  border-radius: var(--as-r-papel);
}

.as-site .as-esp-perfil__cabeca {
  padding-bottom: var(--as-e-5);
  border-bottom: 2px solid var(--as-borda-forte);
}

.as-site .as-esp-perfil__nome {
  margin: var(--as-e-2) 0 0;
  font-size: var(--as-t-xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--as-texto);
  overflow-wrap: anywhere;
}

.as-site .as-esp-perfil__cargo {
  margin: var(--as-e-2) 0 0;
  font-size: var(--as-t-lead);
  font-weight: 600;
  color: var(--as-texto-suave);
  overflow-wrap: anywhere;
}

.as-site .as-esp-perfil__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-e-2) var(--as-e-4);
  margin: var(--as-e-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--as-t-meta);
  color: var(--as-texto-fraco);
}

.as-site .as-esp-perfil__meta li {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.as-site .as-esp-perfil__corpo {
  max-width: var(--as-larg-texto);
  margin-top: var(--as-e-6);
}

.as-site .as-esp-perfil__seccao + .as-esp-perfil__seccao {
  margin-top: var(--as-e-6);
}

.as-site .as-esp-perfil__titulo {
  margin: 0 0 var(--as-e-2);
  font-size: var(--as-t-rotulo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--as-texto-fraco);
}

.as-site .as-esp-perfil__texto {
  line-height: 1.65;
  color: var(--as-texto-suave);
  overflow-wrap: break-word;
}

.as-site .as-esp-perfil__texto p {
  margin: 0;
}

.as-site .as-esp-perfil__texto p + p {
  margin-top: var(--as-e-3);
}

.as-site .as-esp-perfil__caixa {
  margin-top: var(--as-e-8);
  padding: var(--as-e-5);
  background-color: var(--as-superficie);
  border: 1px solid var(--as-borda);
  border-top: 2px solid var(--as-marca);
  border-radius: var(--as-r-papel);
}

.as-site .as-esp-perfil__caixa .as-esp-perfil__contacto {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: var(--as-t-lead);
}

.as-site .as-esp-perfil__cv {
  margin: var(--as-e-4) 0 0;
}

.as-site .as-esp-perfil__cv .as-btn {
  width: 100%;
}

.as-site .as-esp-perfil__voltar {
  margin: var(--as-e-4) 0 0;
  font-size: var(--as-t-meta);
}

@media (min-width: 560px) {
  .as-site .as-esp-perfil__cv .as-btn {
    width: auto;
  }
}

@media (min-width: 768px) {
  .as-site .as-esp-perfil {
    padding-block: var(--as-e-10) var(--as-e-22);
  }
  .as-site .as-esp-perfil__nome {
    font-size: var(--as-t-2xl);
  }
  .as-site .as-esp-perfil__caixa {
    max-width: var(--as-larg-texto);
  }
}

/* --------------------------------------------------------------------------
   12. Impressão

   Uma empresa que imprime esta lista quer os nomes em papel para levar à
   reunião. A barra de procura e a paginação não servem para nada em papel.
   -------------------------------------------------------------------------- */
@media print {
  .as-site .as-esp-procura,
  .as-site .as-esp-pag,
  .as-site .as-esp-postos,
  .as-site .as-esp-perfil__voltar {
    display: none;
  }
  .as-site .as-esp-grelha {
    grid-template-columns: minmax(0, 1fr);
  }
  .as-site .as-esp-cartao {
    border: 1pt solid var(--as-impressao-linha);
    break-inside: avoid;
    margin-bottom: 8pt;
  }
}