/*
 * p-eventos-corporativos.css — componentes exclusivos da página /eventos-corporativos/.
 * Depende de style.css e pages.css (tokens, .eyebrow, .section-top, .gold-frame,
 * .artwork-window, .link-arrow, .empty-frame já carregados antes).
 */

/* Manifesto: dá respiro entre os dois parágrafos (o `.intro>p` compartilhado não tem
   margem nenhuma entre irmãos, em nenhuma largura). */
.manifesto.intro > p:not(.eyebrow) + p { margin-top: 18px }

/* Medida de leitura confortável em qualquer largura: sem isso o texto corrido
   fica full-bleed centralizado, com linhas de ~90–100 caracteres. */
#como-funciona.intro > p:not(.eyebrow) { max-width: 62ch; margin-inline: auto }

/* O eyebrow de bastidores não deve herdar o encolhimento específico do .artist:
   abaixo de 1051px a seção é só texto, então o eyebrow segue o padrão geral
   do resto da página (11px/2.4px até 700px, 10px/1.9px abaixo disso). */
@media (max-width: 800px) {
  .corporativo-bastidores .eyebrow { font-size: 11px; letter-spacing: 2.4px }
}
@media (max-width: 700px) {
  .corporativo-bastidores .eyebrow { font-size: 10px; letter-spacing: 1.9px }
}

/* ---------- Cinco ocasiões (.corporativo-ocasioes) ---------- */
/* Papel quente para diferenciar do creme do manifesto logo acima */
.corporativo-ocasioes { padding: 96px 7% 100px; background: #efe8da }

/* Em fundo claro o itálico padrão do .section-top fica pálido demais */
.corporativo-ocasioes .section-top h2 em { color: #758365 }

.corporativo-ocasioes-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.corporativo-ocasioes-list li {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid #dcd6c2;
}

.corporativo-ocasioes-list li:last-child { border-bottom: 1px solid #dcd6c2 }

.corporativo-ocasioes-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 34px;
  color: var(--gold);
  line-height: 1;
}

.corporativo-ocasioes-body h3 {
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 22px);
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 8px;
}

.corporativo-ocasioes-body p {
  font-size: 15px;
  line-height: 1.75;
  color: #57614e;
  max-width: 58ch;
  margin: 0;
}

@media (max-width: 1050px) { .corporativo-ocasioes { padding: 74px 6% 78px } }

@media (max-width: 700px) {
  .corporativo-ocasioes { padding: 62px 6% 66px }
  .corporativo-ocasioes-list li { grid-template-columns: 40px 1fr; gap: 14px; padding: 20px 0 }
  .corporativo-ocasioes-num { font-size: 26px }
}

/* Desktop: duas colunas no padrão do "o que está incluso", ocupando a largura útil da seção */
@media (min-width: 1051px) {
  .corporativo-ocasioes-list {
    max-width: 1240px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #d9d2ba;
    border: 1px solid #d9d2ba;
  }

  .corporativo-ocasioes-list li {
    grid-template-columns: 56px 1fr;
    gap: 22px;
    align-items: baseline;
    background: #efe8da;
    border-top: none;
    padding: 30px 34px;
  }

  /* item ímpar (o quinto) fecha a grade ocupando as duas colunas */
  .corporativo-ocasioes-list li:last-child { grid-column: 1 / -1; border-bottom: none }

  /* numeral romano ampliado é o elemento gráfico da lista, no desktop igual ao mobile */
  .corporativo-ocasioes-num { font-size: 38px }
}

/* ---------- Estudo de caso Eras (.corporativo-caso) ---------- */
.corporativo-caso {
  padding: 100px 7% 104px;
  background: radial-gradient(ellipse at 45% 10%, #334938 0, #1c3027 65%, #1b2d24 100%);
  color: #e9e8d9;
  text-align: center;
}

.corporativo-caso .eyebrow { color: #c6bc98 }

.corporativo-caso h2 {
  color: #f0e9ce;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -1.1px;
  margin: 16px 0 20px;
}

.corporativo-caso-intro {
  max-width: 60ch;
  margin: 18px auto 0;
  font-size: 15px;
  line-height: 1.8;
  color: #cfd3bd;
}

.corporativo-caso-grid {
  margin: 52px auto 0;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: left;
}

.corporativo-caso-grid figure { margin: 0 }

/* Escalonamento das 3 fotos por cima do reveal compartilhado (fx-reveal.css/js):
   a seção `#caso-eras` já vira `.fx-reveal-target` e ganha `.fx-visible` ao
   entrar na viewport (js/fx-reveal.js). Aqui só reaproveitamos essas duas
   classes para dar um delay extra a cada figure — nenhum observer novo.
   Zoom no hover já vem de fx-hover.css (.artwork-window:hover img) — não duplicar. */
@media (prefers-reduced-motion: no-preference) {
  .js .fx-reveal-target .corporativo-caso-grid figure {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .js .fx-reveal-target .corporativo-caso-grid figure:nth-child(2) { transition-delay: 90ms }
  .js .fx-reveal-target .corporativo-caso-grid figure:nth-child(3) { transition-delay: 180ms }
  .js .fx-reveal-target.fx-visible .corporativo-caso-grid figure { opacity: 1; transform: none }
}

.corporativo-caso-grid figcaption {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.corporativo-caso-step {
  font-size: 10px;
  letter-spacing: 2px;
  color: #bbaa79;
  padding-top: 6px;
  white-space: nowrap;
}

.corporativo-caso-grid figcaption p {
  font-size: 13px;
  line-height: 1.7;
  color: #d7dcc4;
  margin: 0;
}

@media (max-width: 1050px) {
  .corporativo-caso { padding: 78px 6% 82px }
  .corporativo-caso-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px }
}

@media (max-width: 800px) {
  .corporativo-caso-grid { grid-template-columns: 1fr 1fr; gap: 30px; max-width: 480px }
}

@media (max-width: 700px) {
  .corporativo-caso { padding: 62px 6% 66px }
  .corporativo-caso-grid { grid-template-columns: 1fr; gap: 36px; max-width: 340px }
}

/* ---------- Bastidores de grande produção (.corporativo-bastidores) ---------- */
/* Abaixo de 1051px a seção segue só texto, como era antes (foto escondida). */
.corporativo-bastidores.artist { display: block; padding: 98px 7% 100px; background: #f6f3e9 }
.corporativo-bastidores .artist-image { display: none }
.corporativo-bastidores .artist-content { max-width: 640px }

.corporativo-bastidores h2 {
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -1.1px;
  margin: 16px 0 20px;
}

.corporativo-bastidores .artist-content > p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.8;
  color: #4d4a40;
  margin-top: 22px;
}
.corporativo-bastidores .artist-content > p:not(.eyebrow) + p { margin-top: 18px }

.corporativo-bastidores-links {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
}

.corporativo-bastidores-image > img,
.corporativo-bastidores-image > :where(picture) > img { object-position: 50% 12% }

@media (max-width: 800px) { .corporativo-bastidores.artist { padding: 76px 6% 75px } }
@media (max-width: 700px) {
  .corporativo-bastidores.artist { padding: 60px 6% 65px }
  .corporativo-bastidores h2 { font-size: 38px }
}

/* Desktop (>=1051px): vira o componente artista da home, com foto e selo,
   com colunas mais generosas para o texto do que o padrão da home. */
@media (min-width: 1051px) {
  .corporativo-bastidores.artist {
    display: grid;
    grid-template-columns: .8fr 1fr;
    gap: 8%;
    align-items: center;
  }

  .corporativo-bastidores .artist-image { display: block }
  .corporativo-bastidores .artist-content { max-width: 580px }

  .corporativo-bastidores h2 { font-size: clamp(34px, 3.3vw, 52px) }

  .corporativo-bastidores-image > img,
  .corporativo-bastidores-image > :where(picture) > img { height: 640px; object-position: 50% 55% }
}