/*
 * 08b-carreira.css
 * Seção: "Onde sua carreira pode chegar" (faixas de valor de sessão + caso
 * real da aluna Ana Giudici)
 *
 * Inserida entre Especialista/Demais professores (08) e Cronograma (09) a
 * pedido do cliente (2026-08-11). Numerada "08b" pelo mesmo raciocínio de
 * 02b/02c (ver docs/CONVENCOES.md — EXCEÇÃO 3): evita renumerar 09→15 em
 * cascata e não invade a faixa de CSS/asset IDs já reservada às demais
 * seções.
 *
 * [FIX 2026-08-11 — cliente reportou (com print da referência) que a foto
 * precisa ficar "colada" nas 4 bordas da sua coluna, em UM ÚNICO card com os
 * 2 blocos de estatística (sem moldura própria para a foto, sem card
 * separado para cada estatística) — a 1ª versão usava aspect-ratio + flex:1
 * na <img>, uma combinação instável que fazia a foto crescer para fora da
 * coluna e sobrepor os cards ao lado.
 * Correção: .carreira__grid agora É o card (fundo único, radius único,
 * overflow:hidden) e a coluna da foto usa o comportamento PADRÃO de
 * `align-items: stretch` do CSS Grid — o grid item recebe uma altura
 * definida (igual à da coluna de texto, que dita a altura da linha), e só
 * então a <img width:100%;height:100%;object-fit:cover> resolve o
 * `height: 100%` contra essa altura definida. Nenhum aspect-ratio/flex
 * concorrendo entre si. Os 2 blocos de estatística deixaram de ser cards
 * com fundo/borda próprios (eram 2 caixas separadas) e passaram a ser só
 * texto sobre o mesmo fundo do card único, com uma linha divisória sutil
 * entre os dois — igual ao modelo de referência.
 *
 * [ATUALIZAÇÃO 2026-08-11 #2 — pedido do cliente, novo layout de referência]
 * 3 ajustes:
 * 1) O print do depoimento passou a ficar sobreposto na própria foto em
 *    TODOS os breakpoints (antes só no mobile) — ancorado no canto inferior
 *    esquerdo, sem tampar o rosto (que ocupa a parte de cima do
 *    enquadramento), com a assinatura ancorada ainda mais abaixo. A 2ª cópia
 *    do print que existia dentro de .carreira__caso foi removida (ficaria
 *    duplicada).
 * 2) .carreira__caso (bloco "E tem quem vá além") saiu de baixo do card
 *    principal e passou a viver DENTRO da coluna de estatísticas
 *    (.carreira__cards), como uma caixa própria (borda dourada fina, fundo
 *    um tom mais claro que o card ao redor) — não mais um bloco de largura
 *    total com grid de 2 colunas.
 * 3) --carreira-assinatura-altura: variável CSS local (não é token de
 *    styles/tokens.css — é só um valor de cálculo interno desta seção) usada
 *    para o print da foto reservar espaço suficiente acima da assinatura.
 */

.carreira {
  background-color: var(--cor-fundo-escuro-base);
  --carreira-assinatura-altura: 44px;
}

.carreira__titulo {
  font-size: var(--fs-h2-escuro);
  font-weight: var(--fw-h2-escuro);
  line-height: var(--lh-h2-escuro);
  color: var(--cor-texto-branco);
  margin-bottom: 40px;
}

/* ---------------------------------------------------------------------------
 * Card único — foto (esquerda, colada nas 4 bordas da sua coluna) + coluna
 * de estatísticas (direita, só texto). overflow:hidden garante que a <img>
 * respeite o border-radius do card mesmo sem radius próprio.
 * ------------------------------------------------------------------------- */

.carreira__grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.15fr);
  background-color: var(--cor-fundo-preto-puro);
  border-radius: var(--premiacao-card-radius);
  overflow: hidden;
  margin-bottom: 24px;
}

.carreira__foto-wrap {
  position: relative;
  /* Sem height declarada aqui de propósito: o grid (align-items: stretch,
     valor padrão) já entrega ao item uma altura definida igual à da coluna
     de texto ao lado — é essa altura definida que permite o height:100% da
     <img> abaixo resolver corretamente. */
}

/* Wrapper só da foto (sem a assinatura) — no desktop ocupa 100% do
   foto-wrap, como antes; no mobile (ver media queries) passa a ser a única
   parte com altura fixa, permitindo a assinatura sair do overlay e ficar em
   fluxo normal abaixo. */
.carreira__foto-inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* [FIX 2026-08-11 — bug mobile] Trava (clip) qualquer elemento absoluto
     interno (o print, ver .carreira__foto-print) à área exata da foto —
     sem isso, um cálculo de largura/altura errado em algum navegador podia
     fazer o print "vazar" para muito além da moldura e cobrir a página. */
  overflow: hidden;
}

/* [FIX 2026-08-11, pedido do cliente] Rosto de Ana Giudici saindo cortado
   (sobreposto pelo print / cortado no topo do enquadramento). Causa: sem
   object-position, o cover usa o centro (50% 50%) da foto original
   (1254×1254, quadrada) como ponto de referência do corte — mas o rosto
   ocupa a METADE SUPERIOR do quadro (o resto é cabelo/ombro/blazer), então
   qualquer corte vertical feito a partir do centro comia justamente a faixa
   onde está o rosto, e nos breakpoints mobile (altura fixa menor, 420→320→
   280px, ver media queries abaixo) o print sobreposto na base do card
   também passava a alcançar essa faixa. object-position: 50% 15% ancora o
   corte pelo topo do quadro (mantém rosto+cabelo de cima sempre visíveis),
   sacrificando primeiro o excesso de cabelo comprido/ombro na base — que é
   justamente a parte que o print sobreposto cobre. */
.carreira__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}

/* [ATUALIZAÇÃO 2026-08-11, pedido do cliente] Print real do depoimento
   sobreposto na própria foto, em TODOS os breakpoints (antes só aparecia no
   mobile; o desktop tinha uma 2ª cópia dentro de .carreira__caso, removida —
   ver comentário em .carreira__caso abaixo). Ancorado no canto inferior
   esquerdo da foto, com espaço reservado abaixo (--carreira-assinatura-altura)
   para a assinatura não ficar por baixo dele. Card branco (o próprio print é
   um screenshot de fundo branco) com cantos arredondados + sombra — mesmo
   tratamento de "print sobre fundo escuro" já usado em 06-premiacao.css. */
.carreira__foto-print {
  position: absolute;
  left: 24px;
  bottom: calc(var(--carreira-assinatura-altura) + 12px);
  width: 62%;
  max-width: 340px;
  /* [FIX 2026-08-11 — bug mobile] aspect-ratio trava a altura pela proporção
     REAL do arquivo (2822×1460) a partir da largura — nunca deixa a altura
     "auto" ambígua, que foi o que causava o print renderizar gigante/quase
     quadrado e vazar por cima da foto inteira em telas estreitas. */
  aspect-ratio: 2822 / 1460;
  object-fit: cover;
  display: block;
  border-radius: var(--foto-radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* Assinatura sobreposta na base da própria foto, abaixo do print (scrim de
   gradiente para legibilidade sobre qualquer imagem) — "sinaliza sob a foto,
   na parte debaixo, de forma elegante" sem abrir uma faixa extra que tiraria
   a foto de colar nas 4 bordas da coluna (pedido do cliente). */
.carreira__assinatura {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  height: var(--carreira-assinatura-altura);
  padding: 0 24px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.carreira__assinatura-nome {
  font-family: var(--font-familia-display);
  font-style: italic;
  font-size: var(--fs-card-titulo);
  color: var(--cor-texto-branco);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.carreira__assinatura-separador {
  color: var(--cor-texto-cinza-medio);
}

.carreira__assinatura-cargo {
  font-size: var(--fs-footer);
  font-weight: var(--fw-footer);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(251, 247, 238, 0.8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------------------
 * Coluna de estatísticas — só texto sobre o fundo do card único (sem
 * background/borda por bloco), separados por uma linha divisória sutil.
 * ------------------------------------------------------------------------- */

.carreira__cards {
  display: flex;
  flex-direction: column;
  padding: var(--premiacao-card-padding);
}

.carreira__stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: 24px;
}

.carreira__stat:first-child {
  padding-top: 0;
}

.carreira__stat:last-child {
  padding-bottom: 0;
}

.carreira__stat + .carreira__stat {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.carreira__stat-cabecalho {
  display: flex;
  align-items: center;
  gap: 12px;
}

.carreira__stat-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--cor-cta-dourado);
  color: var(--cor-cta-dourado-texto);
}

.carreira__stat-icone svg {
  width: 18px;
  height: 18px;
}

.carreira__stat-label {
  font-size: var(--fs-card-titulo);
  font-weight: var(--fw-card-titulo);
  line-height: var(--lh-card-titulo);
  color: var(--cor-texto-branco);
  max-width: 42ch;
}

/* Valores em R$ na fonte de display da marca (RizomaM), não na fonte de
   corpo — pedido do cliente ("números em reais deixar em RIZOMA
   destacado"). RizomaM só existe no peso 400 (ver nota em tokens.css); como
   este elemento não é h1-h6, não sofre a regra !important de base.css que
   forçaria font-weight:400 — o font-weight:500 (--fw-stat-numero) abaixo
   gera um fake-bold intencional aqui, para reforçar o "destacado" pedido. */
.carreira__stat-valor {
  font-family: var(--font-familia-display);
  font-size: var(--fs-stat-numero);
  font-weight: var(--fw-stat-numero);
  line-height: var(--lh-stat-numero);
  color: var(--cor-texto-branco);
}

.carreira__stat--destaque .carreira__stat-valor {
  color: var(--cor-destaque-em-verde);
}

.carreira__stat-valor-conector {
  font-size: var(--fs-card-corpo);
  font-weight: var(--fw-card-corpo);
  color: var(--cor-texto-cinza-medio);
  margin-inline: 2px;
}

.carreira__stat-corpo {
  font-size: var(--fs-card-corpo);
  font-weight: var(--fw-card-corpo);
  line-height: var(--lh-card-corpo);
  color: var(--cor-texto-cinza-claro);
  max-width: 48ch;
}

/* ---------------------------------------------------------------------------
 * Caixa de destaque — "E tem quem vá além" (dentro da coluna de
 * estatísticas, não mais um bloco de largura total — layout de referência
 * aprovado pelo cliente 2026-08-11). O print do depoimento não repete aqui:
 * já aparece sobreposto na foto (.carreira__foto-print).
 * ------------------------------------------------------------------------- */

.carreira__caso {
  margin-top: 20px;
  padding: var(--card-feature-padding);
  border-radius: var(--card-feature-radius);
  background-color: var(--cor-fundo-escuro-base);
  border: 1px solid color-mix(in srgb, var(--cor-cta-dourado) 40%, transparent);
}

.carreira__caso-corpo {
  font-size: var(--fs-premiacao-corpo);
  font-weight: var(--fw-premiacao-corpo);
  line-height: var(--lh-premiacao-corpo);
  color: var(--cor-texto-cinza-claro);
}

.carreira__caso-corpo strong {
  color: var(--cor-destaque-em-verde);
  font-weight: var(--peso-semibold);
}

.carreira__disclaimer {
  font-size: var(--fs-footer);
  font-weight: var(--fw-footer);
  color: var(--cor-texto-footer-copy);
  max-width: 90ch;
}

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

@media (max-width: 1024px) {
  .carreira__grid {
    grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.1fr);
  }

  .carreira__cards {
    padding: 40px;
  }
}

@media (max-width: 768px) {
  /* Quebra estrutural: foto empilha sobre o bloco de estatísticas (a coluna
     da foto deixa de esticar pela altura da coluna de texto — vira uma faixa
     de altura fixa no topo do card). */
  .carreira__grid {
    grid-template-columns: 1fr;
  }

  /* A assinatura sai do overlay e vira um bloco em fluxo normal — por isso
     o foto-wrap deixa de ter altura fixa própria (isso passa para o
     foto-inner, que envolve só a foto+print) e vira uma coluna simples
     (foto-inner empilhado sobre a assinatura). */
  .carreira__foto-wrap {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .carreira__foto-inner {
    height: 420px;
    flex-shrink: 0;
  }

  /* Print sobreposto na parte de baixo da própria foto, sem tampar o rosto
     (rosto de Ana Giudici ocupa a metade superior do enquadramento) — card
     branco flutuante com margem em relação às bordas da foto, largura livre
     (a assinatura já não fica mais sobreposta aqui, ver regra abaixo, então
     não precisa reservar a altura de --carreira-assinatura-altura acima
     dela).
     [FIX 2026-08-11 — bug mobile] `width` agora é um valor explícito,
     nunca "auto" combinado com left+right — nos casos de "over-constrained"
     (left + right + width:auto) alguns navegadores usam o tamanho
     INTRÍNSECO da imagem em vez de esticar entre as bordas, o que fazia o
     print (2822×1460 originais) renderizar gigante e vazar por cima de
     tudo. `right` fica sem efeito agora que `width` é explícito — removido
     para não confundir leitura futura do arquivo.

     [FIX 2026-08-11 #2, pedido do cliente com print de referência] O print
     ocupando quase 100% da largura (`calc(100% - 32px)`) ficava ALTO demais
     (aspect-ratio fixo 2822/1460 força a altura a acompanhar a largura) e
     "subia" até tampar o rosto — o pedido é o mesmo comportamento do
     desktop (print ocupa só uma fração da foto, ancorado embaixo à
     esquerda, sem tocar o rosto). Trocado de "largura fixa, altura reboca"
     para "altura fixa (% da foto), largura reboca" via `height` + `width:
     auto` (o aspect-ratio já declarado abaixo resolve a largura a partir da
     altura) — mesmo raciocínio do fix acima, só que no eixo vertical: como
     `width` deixa de ser um valor explícito, a combinação com `left` (sem
     `right`) não é over-constrained, então não reintroduz aquele bug. */
  .carreira__foto-print {
    left: 16px;
    bottom: 16px;
    width: auto;
    height: 34%;
    max-width: none;
    border-radius: 12px;
  }

  .carreira__assinatura {
    position: static;
    inset: auto;
    height: auto;
    background: none;
    padding: 24px 24px 0;
    border-top: 1px solid var(--cor-cta-dourado);
  }

  .carreira__assinatura-nome,
  .carreira__assinatura-cargo {
    text-shadow: none;
  }

  .carreira__cards {
    padding: 32px 24px;
  }
}

@media (max-width: 430px) {
  .carreira__titulo {
    margin-bottom: 32px;
  }

  .carreira__foto-inner {
    height: 320px;
  }

  .carreira__foto-print {
    left: 12px;
    bottom: 12px;
    width: auto;
    height: 34%;
  }

  .carreira__cards {
    padding: 28px 20px;
  }

  .carreira__caso {
    padding: 20px;
  }
}

@media (max-width: 375px) {
  .carreira__foto-inner {
    height: 280px;
  }

  .carreira__foto-print {
    left: 10px;
    bottom: 10px;
    width: auto;
    height: 34%;
  }

  .carreira__cards {
    padding: 24px 16px;
  }

  .carreira__caso {
    padding: 16px;
  }
}