/*
 * 08-especialista.css
 * Seção: Quem conduz O Novo Sistema (bio de Ana Lisboa + citação + grade de
 * demais professores)
 *
 * Base herdada de docs/recon-visual-tokens.md (item (b).7) — todos os valores
 * de cor/tipografia/radius continuam usando var(--token) de styles/tokens.css.
 * Valores decorativos sem token catalogado (overlay dos badges, sombra, gaps
 * internos de prosa, borda tracejada de pendência) ficam como literais locais
 * — não há entrada correspondente em tokens.css para eles.
 *
 * [MUDANÇA ESTRUTURAL] Bloco novo "Demais professores" (grade de 5 cards,
 * estilo de pendência) adicionado ao final do arquivo — não existia na versão
 * clone. Ver comentário no topo de sections/08-especialista.html.
 */

.especialista-section {
  background: var(--cor-fundo-escuro-base);
  position: relative;
  overflow: hidden;
}

/* Proporção invertida em 2026-08-10 (pedido do cliente: "foto grande" de Ana
   Lisboa) — era 1.8fr texto / 1fr foto (foto claramente secundária); a coluna
   de texto também cresceu de 1 para 3 parágrafos de bio, então o novo ratio
   (1fr texto / 1.25fr foto) dá à foto o papel dominante sem deixar a bio
   apertada demais para ler. Ratio ajustado de novo em 2026-08-11 (1.25fr →
   1.2fr foto, 1fr → 1.1fr texto) para dar mais respiro à bio.

   [FIX 2026-08-11 → substituído em 2026-08-11] cliente reportou (com print)
   uma faixa de fundo vazia sobrando abaixo do texto, porque a coluna de
   texto é bem mais baixa que a foto em altura natural (684x1028). A primeira
   tentativa esticava o texto (`align-items: stretch` + space-between) até a
   altura da foto — funcionava, mas deixava o texto "espalhado" sem
   acompanhar visualmente a foto durante o scroll. Trocado por
   `align-items: start` + `.especialista-texto` sticky (mesmo padrão de
   `.vivencia__coluna-fixa` em 07-vivencia.css): o texto agora acompanha a
   foto enquanto ela rola, em vez de ficar ancorado no topo ou esticado. */
.especialista-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap: var(--space-secao-horizontal);
  align-items: start;
}

/* ---------------------------------------------------------------------------
 * Coluna de texto
 * ------------------------------------------------------------------------- */

/* Sticky (2026-08-11): a foto (684x1028) é naturalmente mais alta que a
   coluna de texto, então sem sticky o texto "acaba" no meio do scroll da
   foto, sobrando fundo vazio. `position: sticky` faz o texto acompanhar a
   foto — fica fixo na viewport enquanto a foto continua rolando por baixo/
   ao lado, até a base da grid. Offset usa --header-fixo-altura-total, mesmo
   padrão de .vivencia__coluna-fixa em 07-vivencia.css, para não ficar sob o
   header fixo. Desativado no breakpoint 768px (grid empilha em 1 coluna, ver
   media query abaixo) — sticky não faz sentido com as colunas já
   sobrepostas verticalmente. */
.especialista-texto {
  position: sticky;
  top: calc(var(--header-fixo-altura-total) + 24px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Agrupa pill + heading + bio-grupo (ver wrapper novo em index.html, dentro
   do par SECTION_08_ESPECIALISTA_START/END) — mantém esses 3 blocos colados
   entre si com o mesmo gap que .especialista-texto usava antes de virar
   space-between, independente de quanto espaço extra o space-between injeta
   entre este wrapper e as credenciais. */
.especialista-texto-topo {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.especialista-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--botao-radius-sm);
  background: var(--cor-botao-outline-fundo);
  color: var(--cor-texto-branco);
  font-size: var(--fs-card-corpo);
  font-weight: var(--fw-card-corpo);
}

.especialista-heading {
  font-size: var(--fs-bio-nome);
  font-weight: var(--fw-bio-nome);
  line-height: var(--lh-bio-nome);
  color: var(--cor-texto-branco);
}

.especialista-nome-destaque {
  color: var(--cor-destaque-em-verde);
  font-weight: var(--fw-bio-nome);
}

/* BUG DE CONTRASTE CORRIGIDO (2026-08-10): usava var(--cor-texto-bio-corpo),
   que por definição em tokens.css é "corpo da bio da especialista (fundo
   claro)" — um tom ESCURO. Mas .especialista-section tem fundo escuro
   (--cor-fundo-escuro-base), então o parágrafo inteiro ficava invisível,
   exceto o <span> do nome em dourado (que "flutuava" sozinho — era o único
   texto visível). Trocado para --cor-texto-cinza-medio, o token já usado para
   "parágrafos de apoio em fundo escuro" (ver hero__subtitle). */
.especialista-bio {
  font-size: var(--fs-bio-corpo);
  font-weight: var(--fw-bio-corpo);
  line-height: var(--lh-bio-corpo);
  color: var(--cor-texto-cinza-medio);
}

/* Gap subiu de 16px → 20px em 2026-08-11 (mesmo fix de equilíbrio visual
   verde/foto — ver .especialista-grid): respiro extra "natural" entre os 4
   parágrafos de bio, complementando (não substituindo) o space-between de
   .especialista-texto — em vez de todo o ajuste de altura vir de um único
   espaço vazio empurrado para o rodapé, uma parte fica distribuída aqui,
   dentro do próprio corpo de texto. */
.especialista-bio-grupo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Nome "Ana Lisboa" em destaque dentro do parágrafo de bio — a heading da
   seção agora nomeia o programa ("O Novo Sistema"), não a pessoa, então o
   destaque do nome próprio migrou para dentro do corpo da bio. */
.especialista-bio-nome {
  color: var(--cor-destaque-em-verde);
  font-weight: var(--fw-bio-nome);
}

/* Credenciais repetidas em formato de pills inline, abaixo da citação — em
   telas onde os badges flutuantes sobre a foto ficam apertados (tablet/mobile,
   ver breakpoints abaixo) esta linha garante que as 3 credenciais continuem
   legíveis mesmo se os badges precisarem encolher. */
.especialista-credenciais-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.especialista-credencial-pill {
  padding: 6px 14px;
  border-radius: var(--botao-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--cor-botao-outline-fundo);
  color: var(--cor-texto-cinza-claro);
  font-size: var(--fs-footer);
  font-weight: var(--peso-medio);
}

/* ---------------------------------------------------------------------------
 * Coluna da foto + badges flutuantes
 * ------------------------------------------------------------------------- */

.especialista-foto-wrapper {
  position: relative;
  width: 100%;
}

/* Recorte PNG com fundo transparente (2026-08-10) — sem object-fit/aspect-ratio
   fixo de propósito: altura auto preserva a proporção NATURAL do arquivo
   (684x1028), "a medida original dela" (pedido do cliente), em vez do
   aspect-ratio 443/505 do antigo .image-placeholder retangular. */
.especialista-foto {
  width: 100%;
  height: auto;
}

.especialista-badge {
  position: absolute;
  z-index: 2;
  padding: 10px 18px;
  border-radius: var(--botao-radius-sm);
  background: rgba(15, 15, 15, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--cor-texto-branco);
  font-size: var(--fs-footer);
  font-weight: var(--peso-medio);
  line-height: 1.3;
  white-space: nowrap;
  max-width: 240px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.especialista-badge--1 {
  top: 40px;
  left: -20px;
}

.especialista-badge--2 {
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
}

.especialista-badge--3 {
  bottom: 40px;
  left: -20px;
  /* Credencial mais longa ("Certificação reconhecida pelo MEC") — permite
     quebrar em 2 linhas em vez de vazar da pill. */
  white-space: normal;
  text-align: left;
}

/* ---------------------------------------------------------------------------
 * NOVO SUB-BLOCO — "Demais professores"
 * ------------------------------------------------------------------------- */

.professores-bloco {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.professores-heading-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.professores-heading {
  font-size: var(--fs-card-titulo-formacao);
  font-weight: var(--fw-card-titulo-formacao);
  line-height: var(--lh-card-titulo-formacao);
  color: var(--cor-texto-branco);
}

.professor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--card-feature-padding);
  background: var(--card-feature-bg);
  border-radius: var(--card-feature-radius);
}

/* Fotos reais em assets/professores/ (2026-08-10). */
.professor-foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--foto-radius-md);
}

.professor-nome {
  font-size: var(--fs-card-titulo);
  font-weight: var(--fw-card-titulo);
  line-height: var(--lh-card-titulo);
  color: var(--cor-texto-branco);
}

.professor-nome-tipo {
  color: var(--cor-texto-cinza-medio);
  font-weight: var(--peso-regular);
}

/* [ATUALIZAÇÃO 2026-08-11] Bios reais recebidas — nome de classe mantido
   (usado pelo carrossel/JS), mas o estilo "pendência" (itálico + dourado de
   alerta) deu lugar ao mesmo corpo de texto sóbrio dos demais cards do site
   (ex.: .problemas__card-corpo, .vivencia__card-corpo). */
.professor-bio-pendente {
  font-size: var(--fs-card-corpo);
  font-weight: var(--fw-card-corpo);
  line-height: var(--lh-card-corpo);
  color: var(--cor-texto-cinza-medio);
}

/* ---------------------------------------------------------------------------
 * Carrossel de professores (2026-08-10, pedido do cliente: "carrossel
 * dinâmico pra ficar visualmente mais bonito"). Mesmo mecanismo de
 * .depoimentos-carrossel (05-porque-acontece.css + script.js
 * initDepoimentosCarousel): scroll-snap nativo no viewport + setas/dots via
 * JS (script.js, initProfessoresCarousel) chamando scrollIntoView(). Difere
 * do carrossel de depoimentos por mostrar VÁRIOS cards por vez (não 1 slide
 * central) — por isso slide usa scroll-snap-align: start (não center) e as
 * setas ficam dentro do container em vez de fora (a grade de professores
 * ocupa a largura cheia do container, não sobra espaço lateral para setas
 * externas como no carrossel de depoimentos, mais estreito).
 * ------------------------------------------------------------------------- */

.professores-carrossel {
  position: relative;
}

.professores-carrossel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.professores-carrossel__viewport::-webkit-scrollbar {
  display: none;
}

.professores-carrossel__trilho {
  display: flex;
  gap: var(--card-feature-gap-coluna);
  list-style: none;
  margin: 0;
  padding: 4px 4px 8px;
}

.professores-carrossel__slide {
  flex: 0 0 calc((100% - 2 * var(--card-feature-gap-coluna)) / 3);
  min-width: 220px;
  scroll-snap-align: start;
}

.professores-carrossel__slide .professor-card {
  height: 100%;
}

/* Setas douradas (mesma linguagem visual dos 5 CTAs do site) flutuando sobre
   os cantos do carrossel — fundo escuro da seção deixa o círculo dourado se
   destacar sem precisar de outro tom novo. */
.professores-carrossel__seta {
  position: absolute;
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--cor-cta-dourado);
  color: var(--cor-cta-dourado-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.professores-carrossel__seta:hover {
  background-color: var(--cor-cta-dourado-hover);
  transform: scale(1.06);
}

.professores-carrossel__seta:focus-visible {
  outline: 2px solid var(--cor-fundo-claro);
  outline-offset: 3px;
}

.professores-carrossel__seta svg {
  width: 18px;
  height: 18px;
}

.professores-carrossel__seta--prev {
  left: -20px;
}

.professores-carrossel__seta--next {
  right: -20px;
}

.professores-carrossel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.professores-carrossel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}

.professores-carrossel__dot--active {
  width: 22px;
  border-radius: 4px;
  background-color: var(--cor-cta-dourado);
}

/* ---------------------------------------------------------------------------
 * Responsivo — ver convenção de breakpoints em styles/base.css
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .especialista-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
  }

  /* 3 cards por vez fica apertado abaixo do desktop cheio — 2 por vez com um
     terceiro "espiando" na borda (sugere que dá pra arrastar mais). */
  .professores-carrossel__slide {
    flex-basis: calc((100% - var(--card-feature-gap-coluna)) / 2.3);
  }

  /* [FIX QA — sobreposição badge x foto] A coluna da foto fica bem mais
     estreita neste breakpoint (grid 1fr/1.1fr), mas os badges mantinham
     praticamente o mesmo tamanho do desktop e um offset quase nulo — reduz o
     badge (max-width + fonte/padding) e aumenta o quanto ele fica "para fora"
     da foto (offset mais negativo). */
  .especialista-badge {
    font-size: calc(var(--fs-footer) * 0.9);
    padding: 7px 12px;
    max-width: 170px;
  }

  .especialista-badge--1,
  .especialista-badge--3 {
    left: -28px;
  }

  .especialista-badge--2 {
    right: -28px;
  }

  .professores-bloco {
    margin-top: 56px;
    padding-top: 40px;
  }
}

@media (max-width: 768px) {
  /* Quebra estrutural: colunas empilham. Ordem mantém o texto primeiro
     (ordem de leitura da bio) seguido da foto com os badges — o recon não
     confirma com certeza a ordem de empilhamento nesta seção específica
     (ver nota "AMBÍGUO" no HTML), optou-se por manter a ordem do DOM. */
  .especialista-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Sticky só faz sentido lado a lado com a foto (desktop/tablet) — aqui as
     colunas já empilham verticalmente, então o texto volta a fluir normal. */
  .especialista-texto {
    position: static;
    top: auto;
  }

  .especialista-foto-wrapper {
    max-width: 443px;
    margin-inline: auto;
  }

  /* [FIX QA — sobreposição badge x texto do placeholder] Este breakpoint não
     tinha nenhum ajuste próprio de badge — a foto passa a ocupar até 443px
     de largura sozinha (coluna única), mas os badges continuavam do tamanho
     herdado do desktop comprimido, invadindo o texto do placeholder. */
  .especialista-badge {
    font-size: calc(var(--fs-footer) * 0.85);
    padding: 6px 10px;
    max-width: 150px;
  }

  .especialista-badge--1,
  .especialista-badge--3 {
    left: -20px;
  }

  .especialista-badge--2 {
    right: -20px;
  }

  .especialista-heading {
    font-size: calc(var(--fs-bio-nome) * 0.85);
    line-height: calc(var(--lh-bio-nome) * 0.85);
  }

  /* 1 card cheio + uma "espiada" do próximo, para deixar claro que o bloco
     rola horizontalmente (mesmo princípio do carrossel de depoimentos). */
  .professores-carrossel__slide {
    flex-basis: 78%;
    min-width: 200px;
  }

  .professores-bloco {
    margin-top: 48px;
    padding-top: 32px;
  }

  .professores-heading {
    font-size: calc(var(--fs-card-titulo-formacao) * 0.9);
  }
}

@media (max-width: 430px) {
  .especialista-heading {
    font-size: calc(var(--fs-bio-nome) * 0.72);
    line-height: calc(var(--lh-bio-nome) * 0.78);
  }

  /* [FIX QA — sobreposição badge x texto do placeholder] Este era o ajuste
     mais problemático: o offset positivo (left/right: 8px) empurrava o badge
     para DENTRO da foto em vez de deixá-lo flutuar pela borda externa, o que
     garantia a invasão do texto do .image-placeholder neste breakpoint. Volta
     para offset negativo (badge por fora, só a "sombra" toca a borda) e
     encolhe mais o badge, já que a foto aqui é bem mais estreita. */
  .especialista-badge {
    font-size: calc(var(--fs-footer) * 0.8);
    padding: 5px 9px;
    max-width: 122px;
  }

  .especialista-badge--1,
  .especialista-badge--3 {
    left: -10px;
  }

  .especialista-badge--2 {
    right: -10px;
  }

  /* Card praticamente full-width nesta largura; setas para dentro (mesma
     lógica de segurança usada em .depoimentos-carrossel__seta @900px) evita
     que o botão de -20px cause overflow horizontal na página. */
  .professores-carrossel__slide {
    flex-basis: 88%;
  }

  .professores-carrossel__seta {
    width: 34px;
    height: 34px;
    background-color: rgba(212, 175, 55, 0.9);
  }

  .professores-carrossel__seta--prev {
    left: 4px;
  }

  .professores-carrossel__seta--next {
    right: 4px;
  }
}

@media (max-width: 375px) {
  .especialista-pill {
    padding: 6px 16px;
  }

  /* [FIX QA — sobreposição badge x texto do placeholder] Ajuste fino
     adicional (foto ainda mais estreita): mesmo com o offset já negativo
     herdado do breakpoint 430px, o badge continuava largo demais para essa
     largura de foto — encolhe mais um pouco e aumenta a "saída" para fora
     da borda. */
  .especialista-badge {
    max-width: 108px;
    padding: 5px 8px;
  }

  .especialista-badge--1,
  .especialista-badge--3 {
    left: -8px;
  }

  .especialista-badge--2 {
    right: -8px;
  }

  .professores-bloco {
    margin-top: 40px;
    padding-top: 28px;
  }
}