/* PCE Planejamento Sucessório
   Figma: desktop 5126:38456 / mobile 5126:38793.
   A página reaproveita os módulos das demais páginas de produto — core-hero,
   core-process, core-advantages, bpo-benefits, testimonials, coverage, numbers,
   clients e contact — e só ajusta o que o design pede de diferente. */

/* 01 — Hero */
.suc-hero {
  height: 100vh;
  min-height: 758px;
}

.suc-hero .core-hero__background {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%),
    var(--black) url("assets/planejamento-sucessorio/hero-desktop@2x.jpg") center / cover no-repeat;
}

.suc-hero h1 {
  max-width: 1200px;
}

/* 02 — Como funciona.
   Altura e respiro do botão vêm do pce-core.css. Só o corte do fundo difere: o
   Figma desta página o coloca 46px acima da base do card, dentro do rodapé
   escuro, e não no topo dele como nas demais. Abaixo do corte tudo tem altura
   fixa: 46 + respiro 60 + CTA 52 + padding 80 = 238. */
.suc-process {
  background:
    radial-gradient(circle at 82% 0, rgba(255, 255, 255, 0.98), transparent 38%),
    linear-gradient(to top, var(--white) 238px, var(--mist) 238px);
}

/* 03 — Vantagens: duas fileiras assimétricas, 2 cards largos sobre 3 estreitos.
   O grid base é de 12 colunas, então largo = 6 e estreito = 4. */
.suc-advantages {
  background: var(--white);
}

.suc-advantages .core-advantage:nth-child(1),
.suc-advantages .core-advantage:nth-child(2) {
  grid-column: span 6;
}

.suc-advantages .core-advantage:nth-child(3),
.suc-advantages .core-advantage:nth-child(4),
.suc-advantages .core-advantage:nth-child(5) {
  grid-column: span 4;
}

/* Proporção do card no Figma: imagem 380 + texto 160, e não os 360/180 das
   páginas mais antigas. Igual ao que a Certificado Digital já usa. */
.suc-advantages .core-advantage {
  grid-template-rows: 380px minmax(160px, auto);
}

.suc-advantages .core-advantage > img,
.suc-advantages .core-advantage:nth-child(1) > img,
.suc-advantages .core-advantage:nth-child(2) > img,
.suc-advantages .core-advantage:nth-child(3) > img,
.suc-advantages .core-advantage:nth-child(4) > img {
  height: 380px;
  object-position: center;
}

/* 04 — Benefícios: mesma faixa escura do BPO, só troca a fotografia de fundo. */
.suc-benefits {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.58)),
    url("assets/planejamento-sucessorio/beneficios-bg@2x.jpg") center / cover no-repeat;
}

/* 09 — CTA final: no Figma o título é mais estreito que nas outras páginas. */
.suc-contact .contact-copy > div > h2 {
  max-width: 336px;
}

.suc-contact .contact-copy > div > p {
  max-width: 336px;
}

@media (max-width: 767px) {
  .suc-hero {
    min-height: 780px;
  }

  .suc-hero .core-hero__background {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%),
      var(--black) url("assets/planejamento-sucessorio/hero-mobile@2x.jpg") center / cover no-repeat;
  }

  /* Mesma lógica do desktop: abaixo do corte ficam respiro 28 + CTA 52 +
     padding 60 = 140, e o Figma o coloca 41px acima da base do último card. */
  .suc-process {
    background:
      radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.98), transparent 30%),
      linear-gradient(to top, var(--white) 181px, var(--mist) 181px);
  }

  .suc-process .core-process__cta,
  .suc-advantages .core-advantages__cta {
    width: 100%;
    margin: 28px auto 0;
  }

  /* Empilha em coluna única, como as demais páginas de produto. */
  .suc-advantages .core-advantage:nth-child(1),
  .suc-advantages .core-advantage:nth-child(2),
  .suc-advantages .core-advantage:nth-child(3),
  .suc-advantages .core-advantage:nth-child(4),
  .suc-advantages .core-advantage:nth-child(5) {
    grid-column: 1;
  }

  .suc-contact .contact-copy > div > h2,
  .suc-contact .contact-copy > div > p {
    max-width: none;
  }
}