/* =========================================================
   ELO18 — V33
   Controle editorial de quebras, proporção dos cards e
   restauração da narrativa animada da Origem no mobile.
   ========================================================= */

/* ------------------------------------------------------------------
   01. CONTROLE EDITORIAL — DESKTOP
   ------------------------------------------------------------------ */
@media (min-width: 901px) {
  /* O problema: duas frases inteiras, sem palavra isolada. */
  .problem-heading.problem-heading--centered,
  .problem-heading.problem-heading--centered .display-title {
    width: 100% !important;
    max-width: 1140px !important;
  }

  .problem-heading.problem-heading--centered .display-title {
    font-size: clamp(4rem, 5.35vw, 5.85rem) !important;
    line-height: .9 !important;
  }

  .problem-title__primary,
  .problem-title__accent {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .problem-title__accent {
    margin-top: .14em !important;
  }

  /* Segunda sessão: título em duas linhas editoriais previsíveis. */
  .journeys .section-heading {
    width: min(calc(100vw - 64px), 1140px) !important;
    max-width: 1140px !important;
  }

  .journeys-title.journeys-title--single {
    width: 100% !important;
    max-width: 1040px !important;
  }

  .journeys-title--single .journeys-title__line {
    display: block !important;
    max-width: none !important;
    font-size: clamp(3.75rem, 4.55vw, 4.85rem) !important;
    line-height: .91 !important;
    white-space: nowrap !important;
  }

  /* Cards Construir / Evoluir: mais área útil para cada linha. */
  .journey-content,
  .journey-card--reverse .journey-content {
    width: min(calc(100vw - 64px), 1140px) !important;
    max-width: 1140px !important;
    padding-right: 49% !important;
    padding-left: 0 !important;
  }

  .journey-content h3 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(2.8rem, 3.25vw, 3.55rem) !important;
    line-height: .94 !important;
  }

  .journey-content h3 > span {
    display: block !important;
    white-space: nowrap !important;
  }

  /* Como ajudamos: preservar as duas linhas definidas no HTML. */
  .services .section-heading.section-heading--split {
    grid-template-columns: minmax(230px, .42fr) minmax(0, 1.58fr) !important;
    gap: clamp(2.5rem, 5vw, 5rem) !important;
  }

  .services .section-heading .display-title {
    width: 100% !important;
    max-width: 860px !important;
    margin-left: auto !important;
    font-size: clamp(3.45rem, 4.25vw, 4.65rem) !important;
    line-height: .91 !important;
  }

  .services .section-heading .display-title > span,
  .services .section-heading .display-title > em {
    display: block !important;
    white-space: nowrap !important;
  }

  /* Painéis 01, 02 e 03: frases com grupos de palavras, sem quebras internas. */
  .service-copy,
  .service-panel--reverse .service-copy {
    width: min(calc(100vw - 64px), 1140px) !important;
    max-width: 1140px !important;
  }

  .service-copy {
    padding-right: 48% !important;
    padding-left: 0 !important;
  }

  .service-panel--reverse .service-copy {
    padding-left: 48% !important;
    padding-right: 0 !important;
  }

  .service-copy h3 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(2.55rem, 2.95vw, 3.2rem) !important;
    line-height: .94 !important;
  }

  .service-copy h3 > span {
    display: block !important;
    white-space: nowrap !important;
  }

  /* O que muda: duas linhas completas, em vez de palavras isoladas. */
  .outcomes-head {
    grid-template-columns: minmax(230px, .42fr) minmax(0, 1.58fr) !important;
    gap: clamp(2.5rem, 5vw, 5rem) !important;
  }

  .outcomes-head .display-title {
    width: 100% !important;
    max-width: 900px !important;
    font-size: clamp(3.6rem, 4.45vw, 4.9rem) !important;
    line-height: .91 !important;
  }

  .outcomes-head .display-title > span,
  .outcomes-head .display-title > em {
    display: block !important;
    white-space: nowrap !important;
  }

  /* Projetos: três linhas intencionais e equilibradas. */
  .projects-header .display-title {
    width: 100% !important;
    max-width: 940px !important;
    font-size: clamp(3.55rem, 4.65vw, 5.15rem) !important;
    line-height: .9 !important;
  }

  .projects-title__primary,
  .projects-title__primary > span,
  .projects-header .display-title > em {
    display: block !important;
  }

  .projects-title__primary > span,
  .projects-header .display-title > em {
    white-space: nowrap !important;
  }

  .projects-header .cases-intro {
    max-width: 760px !important;
  }

  /* Origem institucional: quatro linhas com sentido completo. */
  .origin-content__heading .display-title {
    width: 100% !important;
    max-width: 650px !important;
    font-size: clamp(3.25rem, 4.15vw, 4.7rem) !important;
    line-height: .91 !important;
  }

  .origin-content__heading .display-title > span,
  .origin-content__heading .display-title > em,
  .origin-content__heading .display-title > em > span {
    display: block !important;
  }

  .origin-content__heading .display-title > span,
  .origin-content__heading .display-title > em > span {
    white-space: nowrap !important;
  }

  /* Diagnóstico: somente duas linhas principais. */
  .diagnostic .display-title {
    width: 100% !important;
    max-width: 990px !important;
    font-size: clamp(3.8rem, 5vw, 5.55rem) !important;
    line-height: .91 !important;
  }

  .diagnostic .display-title > span,
  .diagnostic .display-title > em {
    display: block !important;
    white-space: nowrap !important;
  }
}

/* ------------------------------------------------------------------
   02. CARDS DA SESSÃO O PROBLEMA
   ------------------------------------------------------------------ */
.problem-details.problem-details--centered {
  width: 100% !important;
  max-width: 1140px !important;
  margin-inline: auto !important;
}

.problem-details.problem-details--centered .problem-lead {
  max-width: 790px !important;
  margin-inline: auto !important;
}

.symptom-list.symptom-list--visual {
  width: 100% !important;
  max-width: 1140px !important;
  margin-inline: auto !important;
}

@media (min-width: 901px) {
  .symptom-list.symptom-list--visual {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .symptom-list--visual .symptom-item {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 292px !important;
    aspect-ratio: auto !important;
    padding: 1.35rem 1.25rem 1.55rem !important;
    border-radius: 22px !important;
    justify-content: space-between !important;
  }

  .symptom-list--visual .symptom-index {
    font-size: clamp(3.25rem, 4.3vw, 4.5rem) !important;
  }

  .symptom-list--visual .symptom-item p {
    max-width: 14ch !important;
    margin-inline: auto !important;
    font-size: clamp(.84rem, .95vw, 1rem) !important;
    line-height: 1.48 !important;
    text-wrap: balance !important;
  }
}

/* ------------------------------------------------------------------
   03. TABLET — ainda sem palavras isoladas, mas com escala menor
   ------------------------------------------------------------------ */
@media (min-width: 721px) and (max-width: 900px) {
  .problem-heading.problem-heading--centered .display-title {
    width: 100% !important;
    max-width: 820px !important;
    font-size: clamp(3.25rem, 7vw, 4.1rem) !important;
  }

  .problem-title__primary,
  .problem-title__accent,
  .journeys-title--single .journeys-title__line,
  .services .section-heading .display-title > span,
  .services .section-heading .display-title > em,
  .outcomes-head .display-title > span,
  .outcomes-head .display-title > em,
  .diagnostic .display-title > span,
  .diagnostic .display-title > em {
    white-space: nowrap !important;
  }

  .journeys-title--single .journeys-title__line {
    font-size: clamp(3rem, 6.7vw, 3.8rem) !important;
  }

  .services .section-heading .display-title,
  .outcomes-head .display-title,
  .diagnostic .display-title {
    max-width: 100% !important;
    font-size: clamp(3rem, 6.3vw, 3.8rem) !important;
  }
}

/* ------------------------------------------------------------------
   04. MOBILE — títulos compactos e sem cortes laterais
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .problem-heading.problem-heading--centered {
    width: 100% !important;
    padding-inline: 0 !important;
  }

  .problem-heading.problem-heading--centered .display-title {
    width: 100% !important;
    max-width: 100% !important;
    line-height: .92 !important;
  }

  .problem-title__primary,
  .problem-title__accent {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .problem-title__primary {
    font-size: clamp(1.72rem, 8.35vw, 2.05rem) !important;
  }

  .problem-title__accent {
    margin-top: .12em !important;
    font-size: clamp(1.92rem, 9.3vw, 2.3rem) !important;
  }

  .problem-details.problem-details--centered .problem-lead {
    max-width: 19em !important;
  }

  .symptom-list.symptom-list--visual {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .symptom-list--visual .symptom-item {
    min-height: 150px !important;
    aspect-ratio: auto !important;
    padding: 1.15rem 1.35rem 1.35rem !important;
  }

  .journeys-title--single .journeys-title__line,
  .services .section-heading .display-title > span,
  .services .section-heading .display-title > em,
  .outcomes-head .display-title > span,
  .outcomes-head .display-title > em,
  .projects-title__primary > span,
  .projects-header .display-title > em,
  .origin-content__heading .display-title > span,
  .origin-content__heading .display-title > em > span,
  .diagnostic .display-title > span,
  .diagnostic .display-title > em {
    white-space: normal !important;
    text-wrap: balance !important;
  }

  .journey-content h3 > span,
  .service-copy h3 > span {
    display: block !important;
    white-space: normal !important;
    text-wrap: balance !important;
  }
}

/* ------------------------------------------------------------------
   05. ORIGEM MOBILE — manter a geometria e liberar o JS para animar
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .origin-story {
    min-height: 315vh !important;
  }

  .origin-story__sticky {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    overflow: hidden !important;
  }

  .origin-story__stage {
    position: absolute !important;
    inset: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .origin-story__word,
  .origin-story__question {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(calc(100vw - 40px), 340px) !important;
    height: 100% !important;
    margin: auto !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    pointer-events: none !important;
    will-change: opacity, transform !important;
  }

  .origin-story__word {
    font-size: clamp(5.2rem, 26vw, 7.4rem) !important;
    line-height: .82 !important;
  }

  .origin-story__question {
    font-size: clamp(2rem, 9.5vw, 2.75rem) !important;
    line-height: .94 !important;
  }

  .origin-story__question > span {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
  }

  .origin-story__value {
    position: absolute !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    pointer-events: none !important;
    will-change: opacity, transform !important;
  }

  .origin-story__value--trust {
    top: 25vh !important;
    left: 1.15rem !important;
    right: auto !important;
    bottom: auto !important;
    text-align: left !important;
  }

  .origin-story__value--freedom {
    top: 50vh !important;
    right: 1.15rem !important;
    left: auto !important;
    bottom: auto !important;
    text-align: right !important;
  }

  .origin-story__value--hope {
    top: auto !important;
    right: 1.15rem !important;
    left: auto !important;
    bottom: 15vh !important;
    text-align: right !important;
  }

  .origin-story__image {
    height: 100% !important;
    inset: 0 !important;
    width: 100vw !important;
    clip-path: none !important;
  }

  .origin-story__image img {
    object-position: center center !important;
  }
}