/* Seções Posicionamento (#posicionamento) e Método (#metodo) — ticket 02.
   Use os tokens e componentes de css/base.css; não edite base.css. */

/* ---------- Posicionamento ---------- */

.positioning__grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--section-head-gap);
}

.positioning__head,
.positioning__factors,
.positioning__media {
  grid-column: 1 / -1;
}

.positioning__title,
.method__head .title-impact {
  text-wrap: balance;
}

.positioning__title {
  margin-top: var(--space-16);
}

.positioning__lead {
  margin-top: var(--space-24);
}

.positioning__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-image);
}

.positioning__intro {
  margin-bottom: var(--space-24);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body-lg);
  line-height: 1.4;
}

.factor-list {
  border-top: 1px solid var(--color-line);
}

.factor {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--space-16);
  padding-block: var(--space-24);
  border-bottom: 1px solid var(--color-line);
}

.factor__index {
  padding-top: 0.2rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  color: var(--color-green);
}

.factor__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-title-sm);
  line-height: 1.35;
}

.factor p {
  margin-top: var(--space-8);
  max-width: 44ch;
  color: var(--color-gray);
}

@media (min-width: 64rem) {
  .positioning__head {
    grid-column: 1 / span 8;
  }

  /* Lista e foto com a mesma altura: a lista começa no topo da foto, os
     fatores dividem a altura entre si e a última linha fecha na base dela.
     Se o texto ficar mais alto que a foto, a foto cresce junto (nunca diminui). */
  .positioning__factors {
    grid-column: 1 / span 5;
    grid-row: 2;
    display: flex;
    flex-direction: column;
  }

  .positioning__intro {
    font-size: clamp(1.25rem, 0.9rem + 0.55vw, 1.375rem);
  }

  .factor-list {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .factor {
    flex: 1 1 auto;
    align-content: center;
    padding-block: var(--space-16);
  }

  .factor__title {
    font-size: clamp(1.25rem, 0.8rem + 0.7vw, 1.5rem);
  }

  .factor p {
    font-size: var(--text-body-lg);
  }

  .positioning__media {
    grid-column: 7 / span 6;
    grid-row: 2;
    align-self: stretch;
  }

  .positioning__media picture {
    display: block;
    height: 100%;
  }

  .positioning__media img {
    height: 100%;
  }
}

/* ---------- Método ---------- */

.method {
  background: var(--color-graphite);
}

.method__head {
  max-width: 46rem;
}

.method__head .title-impact {
  margin-top: var(--space-16);
}

.method__head .lead {
  margin-top: var(--space-24);
}

.method__steps {
  margin-top: var(--section-head-gap);
  border-top: 1px solid var(--color-line);
}

/* Número e texto formam um grupo: o número fica colado ao título e todos os
   números têm a mesma largura, então os textos alinham entre as etapas. */
.step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  padding-block: var(--space-32);
  border-bottom: 1px solid var(--color-line);
}

.step__number {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 0.78;
  font-variant-numeric: tabular-nums;
  color: var(--color-neon);
}

.step__body {
  flex: 1;
  min-width: 0;
}

.step__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.step__body p {
  margin-top: var(--space-12);
  max-width: 46ch;
  color: var(--color-gray);
}

.method__close {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  margin-top: var(--section-head-gap);
}

.method__close p {
  max-width: 40ch;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body-lg);
  line-height: 1.4;
}

@media (min-width: 48rem) {
  .step {
    gap: 1.25rem;
  }

  .step__body {
    max-width: 36rem;
  }
}

/* Sequência alternada no desktop: as etapas pares começam exatamente na
   coluna 7 do grid (metade do container mais meio gutter). */
@media (min-width: 64rem) {
  .step {
    gap: var(--space-24);
    padding-block: var(--space-48);
  }

  .step__body {
    max-width: 34rem;
  }

  .step:nth-child(even) {
    padding-left: calc(50% + var(--gutter) / 2);
  }

  .method__close {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}