/* =========================================================
   A LION ART — institucional
   O hero reaproveita as classes .igrejas-hero* (igrejas.css,
   carregado antes deste arquivo), mesmo padrão já testado nas
   4 landings "Para quem". Este arquivo cobre só o corpo, que é
   estrutura própria (história/números/CTA), não uma grade de
   "momentos" como as outras páginas.
   ========================================================= */

.sobre-historia {
  width: 100%;

  background: var(--color-black);
  color: var(--color-off-white);
}

.sobre-historia__inner {
  display: grid;
  grid-template-columns: 1fr;

  gap: clamp(2.5rem, 5vw, 4rem);

  padding-block: clamp(4rem, 8vw, 7rem);
}

.sobre-historia__eyebrow {
  display: flex;
  align-items: center;

  gap: var(--space-3);

  margin-bottom: var(--space-5);

  color: var(--color-body);

  font-size: var(--text-sm);
  font-weight: 700;

  letter-spacing: 0.2em;
  line-height: 1.2;

  text-transform: uppercase;
}

.sobre-historia__content h2 {
  max-width: 14ch;

  margin: 0 0 var(--space-6);

  color: var(--color-off-white);

  font-family: var(--font-family);
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  font-weight: 800;

  letter-spacing: -0.055em;
  line-height: 0.92;

  text-transform: uppercase;
}

.sobre-historia__content p {
  max-width: 38rem;

  margin: 0 0 var(--space-5);

  color: var(--color-body);

  font-size: var(--text-base);
  line-height: 1.55;
}

.sobre-historia__content p:last-child {
  margin-bottom: 0;
}

.sobre-historia__media {
  position: relative;

  width: 100%;
  aspect-ratio: 4 / 3;

  overflow: hidden;

  border: 1px solid var(--color-line);

  background: var(--color-surface);
}

.sobre-historia__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: contrast(1.04);
}


/* =========================================================
   NÚMEROS — indicadores em ouro (permitido pelo design system:
   "indicadores numéricos de passo do processo" já usa a cor).
   ========================================================= */

.sobre-numeros {
  width: 100%;

  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);

  background: var(--color-surface);
}

.sobre-numeros__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.sobre-numero {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 1.5rem 1rem;

  text-align: center;
}

.sobre-numero__value {
  color: var(--color-gold);

  font-family: var(--font-family);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 800;

  letter-spacing: -0.03em;
  line-height: 1;
}

.sobre-numero__label {
  margin-top: 0.75rem;

  color: var(--color-body);

  font-size: var(--text-xs);
  font-weight: 500;

  letter-spacing: 0.12em;
  line-height: 1.3;

  text-align: center;
  text-transform: uppercase;
}


/* =========================================================
   CTA FINAL
   ========================================================= */

.sobre-cta {
  width: 100%;

  background: var(--color-black);
  color: var(--color-off-white);
}

.sobre-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-block: clamp(4.5rem, 9vw, 8rem);

  text-align: center;
}

.sobre-cta__inner h2 {
  max-width: 18ch;

  margin: 0 0 var(--space-5);

  color: var(--color-off-white);

  font-family: var(--font-family);
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 800;

  letter-spacing: -0.055em;
  line-height: 0.94;

  text-transform: uppercase;
}

.sobre-cta__inner p {
  max-width: 34rem;

  margin: 0 0 var(--space-7);

  color: var(--color-body);

  font-size: var(--text-base);
  line-height: 1.5;
}

.sobre-cta__actions {
  display: flex;
  align-items: center;

  gap: var(--space-4);
}

.sobre-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 4rem;

  padding-inline: clamp(1.5rem, 2.3vw, 2.6rem);

  border: 1px solid transparent;
  border-radius: 0;

  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 500;

  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.sobre-cta__button--primary {
  background: var(--color-off-white);
  color: var(--color-black);
}

.sobre-cta__button--primary:hover {
  background: var(--color-white);
}

.sobre-cta__button--secondary {
  border-color: var(--color-line);

  background: transparent;
  color: var(--color-off-white);
}

.sobre-cta__button--secondary:hover {
  border-color: var(--color-gold);
}


@media (min-width: 768px) {

  .sobre-historia__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
  }

  .sobre-numeros__inner {
    grid-template-columns: repeat(4, 1fr);
  }

  .sobre-numero + .sobre-numero {
    border-left: 1px solid var(--color-line);
  }
}

@media (max-width: 767px) {

  .sobre-cta__actions {
    flex-direction: column;
    align-items: stretch;

    width: 100%;
  }

  .sobre-cta__button {
    width: 100%;
  }
}