/* ==========================================================================
   especialidade_detalhe.css
   Design system: Editorial · Scout · Pioneiros
   Consistente com elemento_detalhe.css / especialidades_lista.css
   ========================================================================== */


*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; display: block; }

.detalhe-wrapper {
  max-width: 860px;
  margin: 2rem auto;
  padding: 0 1.25rem 4rem;
  font-family: var(--font-body);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Regressar (FR05.2)
   -------------------------------------------------------------------------- */
/* O "Regressar" deixou de precisar de margem própria: vive na `.detalhe-barra`
   (css/especialidades/percurso.css), que trata do espaçamento por baixo e põe
   a ação da especialidade à direita, à mesma altura. */

/* --------------------------------------------------------------------------
   Identificação (FR05.1)
   -------------------------------------------------------------------------- */
.identificacao {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.identificacao__insignia {
  width: 100px;
  height: 100px;
  object-fit: contain;
  flex-shrink: 0;
}

.identificacao__placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 2.4rem;
  font-weight: 700;
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.identificacao__nome {
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 .5rem;
}

.identificacao__areas {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.tag-area {
  display: inline-block;
  padding: .2rem .65rem;
  background: var(--color-accent-pink-light);
  color: var(--color-accent-pink-dark);
  border: 1px solid var(--color-accent-pink-dark);
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Secções (descrição / provas)
   -------------------------------------------------------------------------- */
.secao-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.secao-card__titulo {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 .9rem;
}

.descricao-texto {
  margin: 0;
  line-height: 1.6;
}

.lista-provas {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

/* --------------------------------------------------------------------------
   Navegação Recuar / Avançar (FR05.3 / FR05.4)
   -------------------------------------------------------------------------- */
.navegacao-especialidades {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}

.navegacao-especialidades__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transicao);
}
.navegacao-especialidades__btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}