/* ==========================================================================
   Seção 08 — Pesquisa, ideias e referências (Insights)
   Figma: node 357:3683 (1512 × 744)
   Animação na home (sections/insights.js, desde 06/11/2026; no ritmo da seção
   05): a foto e o bloco "Insights" crescem na entrada; com a seção fixa no
   meio da tela, o parágrafo sobe e, por último, o botão nasce de um ponto e
   se abre. O título não anima. A variação .insights--talks (contato e
   palestras) continua com o expand.js.
   ========================================================================== */

.insights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(744 * var(--fp));
  /* fundo visível só durante a expansão */
  background: var(--c-red);
  color: var(--c-white);
}

/* ---------- Conteúdo (metade vermelha) ---------- */
.insights__content {
  display: flex;
  flex-direction: column;
  gap: calc(155 * var(--fp));
  padding: calc(72 * var(--fp)) calc(80 * var(--fp)) calc(64 * var(--fp)) var(--pad);
}

.insights__title {
  width: calc(331 * var(--fp));
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(52 * var(--fp));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--c-white);
}

.insights__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(61 * var(--fp));
}

.insights__text {
  margin: 0;
  font-family: var(--font-text);
  font-size: max(16px, calc(18 * var(--fp)));
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--c-white);
}

.btn.insights__cta {
  --expand-origin: center;
  --expand-size: 1;
  width: calc(331 * var(--fp));
  height: calc(100 * var(--fp));
  min-height: 64px;
  font-size: max(16px, calc(18 * var(--fp)));
}
.btn__label {
  display: block;
}

/* ---------- Foto + bloco "Insights" ---------- */
.insights__media {
  display: grid;
  grid-template-rows: calc(496 * var(--fp)) calc(248 * var(--fp));
}

.insights__photo {
  --expand-origin: center;
  --expand-size: 0.6;
  position: relative;
  overflow: hidden;
  background: #1b1b1b;
}
.insights__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.insights__word {
  --expand-origin: center;
  --expand-size: 1;
  position: relative;
  overflow: hidden;
  background: var(--c-wine);
}
.insights__word span {
  position: absolute;
  top: calc(60 * var(--fp));
  left: calc(-49 * var(--fp));
  font-family: var(--font-text);
  font-size: calc(217.417 * var(--fp));
  font-weight: 800;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--c-lime);
}

/* Home, desktop: enquanto a seção fica fixa no meio da tela (sections/insights.js),
   a faixa acima e abaixo dela repete as seções vizinhas, vinho em cima (07b,
   Depoimentos) e creme embaixo (09, Formatos), como se a página só tivesse parado.
   O fundo é preso à tela (fixed): metade de cima vinho, metade de baixo creme. */
.pin-spacer-insights-pin {
  background: linear-gradient(to bottom, var(--c-wine) 50%, var(--c-cream) 50%) fixed;
}

/* ---------- Tablet e mobile: empilhado ---------- */
@media (max-width: 1199px) {
  .insights {
    --fp: 1px;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .insights__content {
    gap: 56px;
    padding: 64px var(--pad) 56px;
  }
  .insights__title {
    width: auto;
    max-width: 12ch;
    font-size: clamp(36px, 6vw, 52px);
  }
  .btn.insights__cta {
    width: min(100%, 331px);
    height: 80px;
  }
  .insights__media {
    grid-template-rows: auto auto;
  }
  .insights__photo {
    aspect-ratio: 756 / 496;
  }
  .insights__word {
    aspect-ratio: 756 / 248;
  }
  .insights__word span {
    top: 24%;
    left: -6.5%;
    font-size: 28.8vw; /* mesma proporção do Figma (217 / 756) */
  }
}

/* ---------- Celular, só na home (12/11/2026, a pedido) ----------
   Mesma estrutura do banner da seção 05 ("Prontidão…"): a foto vira o fundo
   do bloco, com a mesma camada escura em degradê, e o título, o parágrafo e
   o botão (largura toda) ficam por cima, com os mesmos tamanhos e respiros.
   O bloco vinho com a palavra "Insights" segue embaixo, como a coluna verde
   do banner. Antes: textos no vermelho e a foto embaixo deles. */
@media (max-width: 767px) {
  .insights:not(.insights--talks) .insights__media {
    display: contents;
  }
  .insights:not(.insights--talks) .insights__photo {
    grid-area: 1 / 1;
    aspect-ratio: auto;
  }
  /* Sombra só para o contraste (12/11/2026, a pedido): concentrada na parte
     de baixo, nos tons de preto do resto do site (14, 3, 2), com curva
     suave; o alto da foto fica sem camada. Versões anteriores: camada única
     de 0.42 a 0.82 (versoes-anteriores/mobile-insights-degrade-antes/) e o
     tratamento em camadas com vinho e grão
     (versoes-anteriores/mobile-insights-degrade-camadas/). */
  .insights:not(.insights--talks) .insights__photo img {
    object-position: 30% 50%; /* a boca do cartaz aparece no recorte */
  }
  .insights:not(.insights--talks) .insights__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
      rgb(14 3 2 / 0.9) 0%,
      rgb(14 3 2 / 0.84) 20%,
      rgb(14 3 2 / 0.74) 36%,
      rgb(14 3 2 / 0.58) 50%,
      rgb(14 3 2 / 0.38) 62%,
      rgb(14 3 2 / 0.18) 74%,
      rgb(14 3 2 / 0.06) 84%,
      rgb(14 3 2 / 0) 92%);
    pointer-events: none;
  }
  /* No alto, sem camada, o título passa sobre o papel rasgado (branco) do
     cartaz: uma sombra de texto bem difusa, no mesmo tom, segura a leitura
     sem escurecer a foto */
  .insights:not(.insights--talks) .insights__title,
  .insights:not(.insights--talks) .insights__text {
    text-shadow: 0 1px 2px rgb(14 3 2 / 0.35), 0 2px 18px rgb(14 3 2 / 0.55);
  }
  .insights:not(.insights--talks) .insights__word {
    grid-area: 2 / 1;
  }
  .insights:not(.insights--talks) .insights__content {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    gap: 72px;
    padding: 96px var(--pad) 80px;
  }
  .insights:not(.insights--talks) .insights__title {
    max-width: none;
    font-size: 30px;
    line-height: 1.25;
    text-wrap: balance;
  }
  .insights:not(.insights--talks) .insights__bottom {
    align-items: stretch;
    gap: 48px;
  }
  .insights:not(.insights--talks) .insights__text {
    font-weight: 400;
    line-height: 1.222;
    color: var(--c-cream);
  }
  .insights:not(.insights--talks) .btn.insights__cta {
    width: 100%;
    height: 72px;
  }
}

/* ==========================================================================
   Variação .insights--talks — bloco final das páginas de contato (C4, com a
   palavra "Palestras") e de palestras (P10, com a palavra "Contato")
   Figma: frame "Contato — Desktop 1512" (node 556:5096).
   Mesmo padrão e cores da seção 08 (expand.js): metade vermelha com textos
   brancos e faixa vinho. Aqui mudam a cor da palavra (azul) e as medidas
   do Figma (1512 × 675). O botão é o .btn--white da home, sem contorno.
   Foto: assets/img/formatos/palestra.webp (provisória, a mesma do Figma e da
   seção 09 da home), com o recorte do Figma (a imagem tem 1337 × 892 dentro
   de um quadro de 756 × 427, deslocada -291 × -144).
   ========================================================================== */
.insights--talks {
  min-height: calc(675 * var(--fp));
}
.insights--talks .insights__content {
  gap: calc(175 * var(--fp));
}
.insights--talks .insights__title {
  width: calc(416 * var(--fp));
}
.insights--talks .btn.insights__cta:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 4px;
}
.insights--talks .insights__media {
  /* a foto cresce se o texto ao lado ficar mais alto que o bloco (sem faixa vermelha embaixo) */
  grid-template-rows: minmax(calc(427 * var(--fp)), 1fr) calc(248 * var(--fp));
}
.insights--talks .insights__photo img {
  inset: auto;
  top: -33.72%; /* -144 / 427 */
  left: -38.49%; /* -291 / 756 */
  width: 176.85%; /* 1337 / 756 */
  max-width: none;
  height: auto;
}
.insights--talks .insights__word span {
  top: calc(79 * var(--fp));
  left: calc(-35 * var(--fp));
  font-size: calc(184.76 * var(--fp));
  color: var(--c-blue);
}

/* Foto de Iona de vestido vermelho (hero/iona-palco.jpg, 2400 × 1600, a mesma
   da home), no bloco final da página de contato (09/11/2026, a pedido; antes,
   a provisória do Figma, com o recorte acima). A imagem cobre uma caixa 30%
   maior que a moldura, um pouco deslocada, para Iona aparecer da cabeça ao
   quadril, no meio da moldura, como nos recortes da home. Vale em todas as
   larguras (no empilhado, a moldura mantém a proporção). */
.insights--talks .insights__photo--iona img {
  inset: auto;
  top: -10%;
  left: -15%;
  width: 130%;
  height: 130%;
  object-fit: cover;
  object-position: 50% 25%;
}

/* Empilhada (até 1199px): mesmas proporções do Figma */
@media (max-width: 1199px) {
  .insights--talks .insights__media {
    grid-template-rows: auto auto;
  }
  .insights--talks .insights__photo {
    aspect-ratio: 756 / 427;
  }
  .insights--talks .insights__word span {
    top: 31.9%; /* 79 / 248 */
    left: -4.63%; /* -35 / 756 */
    font-size: 24.44vw; /* 184.76 / 756 */
  }
}