/* ============================================================
   08-tema.css — o que só existe na versão WordPress.
   Entra por último na cascata. Nada daqui altera o desenho da
   Fase 1: são acréscimos do tema.
   ============================================================ */

/* ---- Crédito de desenvolvimento, no rodapé escuro ----
   O logo da Imagine.IDE já é a versão clara, então vai direto
   sobre o navy: só a opacidade separa o crédito do resto. */
.footer__credit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0.62;
  transition: opacity var(--dur-base) var(--ease-out);
}

.footer__credit:hover,
.footer__credit:focus-visible {
  opacity: 1;
}

.footer__credit-txt {
  font-size: var(--fs-small);
  color: var(--text-on-dark-faint);
  white-space: nowrap;
}

.footer__credit img {
  display: block;
  height: 21px;
  width: auto;
}

@media (prefers-reduced-motion: reduce) {
  .footer__credit { transition: none; }
}

/* ---- Editor de blocos: o conteúdo dos templates é HTML pronto,
   mas se alguém escrever no editor de uma página, o texto ainda
   precisa respirar dentro do container. ---- */
.entry-content > * + * {
  margin-top: var(--space-4);
}

/* ============================================================
   PASSAGEM INSTITUCIONAL
   ------------------------------------------------------------
   O que dava ar de "landing feita por IA" e saiu daqui:
   o filete decorativo antes de cada eyebrow, o herói que era só
   gradiente, o raio de 22px em tudo, o padding de 128px e a
   seta "Role".

   O que NÃO foi mexido, de propósito: a eyebrow em caixa alta e
   o destaque cromático parcial dos títulos. Os dois estão no
   Manual de Marca (migração, seções 3 e 3.1) — identidade do
   cliente vence regra de estilo.
   ============================================================ */

:root {
  /* generoso ainda, mas sem o vazio de 128px */
  --section-py:    clamp(3.25rem, 2rem + 3.6vw, 5.75rem);
  --section-py-lg: clamp(4rem, 2.5rem + 4.4vw, 7rem);
  /* canto industrial, não canto de aplicativo */
  --radius-panel: 10px;
  --radius-card: 8px;
}

/* O filete de 1px antes do rótulo é o tique mais denunciável.
   O rótulo sozinho já cumpre a função. */
.eyebrow::before { display: none; }
.eyebrow { padding-left: 0; }

/* A seta "Role" é enfeite de landing page. */
.hero__scroll { display: none; }

/* ============================================================
   HERÓI COM BANNER DE FOTO
   ------------------------------------------------------------
   O Manual de Marca marca ✗ para texto direto sobre foto poluída,
   mas autoriza a foto com o gradiente de overlay (migração, 6).
   É esse overlay que está aqui — por isso o texto pode ficar por
   cima sem quebrar a regra.
   ============================================================ */

.hero--foto {
  background-color: var(--color-navy);
  background-image: var(--hero-img-sm);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .hero--foto { background-image: var(--hero-img); }
}

/* Substitui o campo em gradiente pelo overlay autorizado: escuro e
   opaco onde entra o texto, abrindo para a direita para a fábrica
   aparecer. */
.hero--foto::before {
  background:
    linear-gradient(90deg,
      rgba(2, 6, 17, 0.95) 0%,
      rgba(2, 6, 17, 0.88) 34%,
      rgba(2, 6, 17, 0.62) 62%,
      rgba(2, 6, 17, 0.38) 100%),
    linear-gradient(180deg,
      rgba(2, 6, 17, 0.72) 0%,
      rgba(2, 6, 17, 0.10) 34%,
      rgba(2, 6, 17, 0.55) 100%);
}

/* No telemóvel a coluna é única: o overlay precisa fechar por baixo,
   senão a microprova cai sobre a parte clara da foto. */
@media (max-width: 767px) {
  .hero--foto::before {
    background:
      linear-gradient(180deg,
        rgba(2, 6, 17, 0.80) 0%,
        rgba(2, 6, 17, 0.62) 38%,
        rgba(2, 6, 17, 0.93) 78%,
        rgba(2, 6, 17, 0.97) 100%);
  }
}

/* Sem a coluna da foto, o texto pode ocupar mais largura — mas não a
   ponta direita, senão a linha fica longa demais para ler. */
.hero--foto .hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero--foto .hero__content { max-width: 46rem; }

/* Legenda da foto: diz o que se está vendo, como legenda de revista.
   É o que separa "foto de banco" de "nossa fábrica". */
.hero__credito {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 2;
  max-width: 22rem;
  text-align: right;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 1023px) {
  .hero__credito { position: static; max-width: none; text-align: left; margin-top: var(--space-6); }
}

/* ============================================================
   FOTOS REAIS NO LUGAR DOS PLACEHOLDERS
   ============================================================ */

.foto {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--bg-subtle);
  margin: 0;
}

.foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto--4x3 { aspect-ratio: 4 / 3; }
.foto--1x1 { aspect-ratio: 1 / 1; }
.foto--larga { aspect-ratio: 21 / 9; }

.foto__legenda {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.section--dark .foto__legenda,
.section--deep .foto__legenda,
.section--brand .foto__legenda { color: var(--text-on-dark-faint); }

@media (prefers-reduced-motion: reduce) {
  .foto img { transition: none; }
}