/*
 * 06-premiacao.css
 * Seção: Reconhecimento institucional (certificação MEC)
 *
 * [ADAPTADO] Layout original herdado de docs/recon-visual-tokens.md, seção
 * (b).5 "Premiação" (Top of Mind Brazil 2025). Copy real trocada para
 * reconhecimento institucional — ver copy/03-copy-clonagem-estrutura-
 * -referencia_1.md §6 e comentário no topo de sections/06-premiacao.html.
 *
 * [DECISÃO 2026-08-11] Layout original era um card de 2 colunas (texto +
 * imagem em IMAGE_PLACEHOLDER_051). Nenhuma imagem real ficou disponível
 * a tempo (ver docs/ASSETS.md) e o placeholder tracejado com texto de
 * instrução interna estava sendo exibido como conteúdo real para o
 * visitante (bug reportado pelo cliente). A coluna de imagem foi removida
 * temporariamente e o card passou a layout de 1 coluna, largura total,
 * texto centralizado.
 *
 * [ATUALIZAÇÃO 2026-08-11] Imagem real recebida (reconhecido-mec.jpg) —
 * layout de 2 colunas RESTAURADO (.premiacao__coluna-texto +
 * .premiacao__coluna-imagem), mesmo padrão de grid assimétrico usado em
 * .especialista-grid (styles/sections/08-especialista.css).
 * Marcação HTML correspondente: sections/06-premiacao.html
 *
 * [SIMPLIFICAÇÃO 2026-08-13, pedido do cliente] Os dois parágrafos de corpo
 * (`.premiacao__corpo`) foram removidos do HTML — a coluna de texto ficou
 * com só eyebrow + H2, bem mais curta que a coluna de imagem. Reequilibrado
 * o grid: a proporção de colunas foi invertida (imagem agora é a coluna
 * dominante, 1.15fr vs 0.85fr do texto — mesmo raciocínio de "dar o papel
 * dominante à foto" já aplicado em .especialista-grid acima) e o gap interno
 * da coluna de texto aumentou (16px → 24px) para dar mais respiro às duas
 * únicas peças de conteúdo restantes. `align-items: center` foi mantido: com
 * um bloco de texto curto, centralizá-lo verticalmente ao lado da imagem
 * (em vez de ancorá-lo no topo) evita a sensação de vazio abaixo do H2.
 * Classes órfãs (.premiacao__destaque, .premiacao__corpo,
 * .premiacao__termo-destaque — sem elemento correspondente no HTML depois
 * da remoção) foram removidas deste arquivo.
 */

.premiacao {
  background-color: var(--cor-fundo-claro);
}

.premiacao__card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 48px;
  /* --cor-fundo-cinza-claro está marcada como [ESTIMADO] em styles/tokens.css
     (docs/recon-visual-tokens.md classifica o fundo do card como
     "~#F5F5F5–#F7F7F7", sem confirmação exata via DOM) — usar mesmo assim. */
  background-color: var(--cor-fundo-cinza-claro); /* estimado */
  padding: var(--premiacao-card-padding);
  border-radius: var(--premiacao-card-radius); /* estimado */
}

.premiacao__coluna-texto {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.premiacao__coluna-imagem {
  width: 100%;
}

.premiacao__imagem {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1776 / 1369;
  object-fit: cover;
  border-radius: var(--foto-radius-lg);
}

.premiacao__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-label-premiacao);
  font-weight: var(--fw-label-premiacao);
  line-height: var(--lh-label-premiacao);
  /* [CORRIGIDO — QA 1440px] var(--cor-dourado-primario) resolve para
     #FBF7EE (creme) — nesta seção de fundo claro (--cor-fundo-cinza-claro,
     também um creme) o label ficava creme sobre creme, quase invisível.
     --cor-dourado-primario é o token de "accent" pensado para contraste
     sobre fundo ESCURO (ver nota de migração de paleta em tokens.css); aqui
     usamos --cor-heading-premiacao (#0F221D, mesma base institucional
     escura), já usado no H2 desta seção, para manter contraste e
     consistência de cor dentro do card. */
  color: var(--cor-heading-premiacao);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

.premiacao__titulo {
  font-size: clamp(24px, 1.7vw + 18px, var(--fs-h2-premiacao));
  font-weight: var(--fw-h2-premiacao);
  line-height: var(--lh-h2-premiacao);
  color: var(--cor-heading-premiacao);
  /* [ADAPTADO] max-width ampliado de 34ch para 40ch: o novo título (copy
     real) é uma frase mais longa que o título original; a fonte já usa
     clamp() com teto levemente reduzido acima para evitar que o título
     fique desproporcionalmente grande em 2 linhas curtas. */
  max-width: 40ch;
}

/* --- Breakpoints (ver convenção em styles/base.css) --------------------- */

@media (max-width: 1024px) {
  .premiacao__card {
    padding: 40px;
  }
}

@media (max-width: 768px) {
  .premiacao__card {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }

  .premiacao__coluna-imagem {
    order: -1;
  }

  .premiacao__titulo {
    max-width: none;
  }
}

@media (max-width: 430px) {
  .premiacao__card {
    padding: 24px 20px;
    border-radius: 20px;
    gap: 24px;
  }

  .premiacao__coluna-texto {
    gap: 16px;
  }
}

@media (max-width: 375px) {
  .premiacao__card {
    padding: 20px 16px;
  }
}