/* Autonomia: três linhas editoriais com ilustrações 4:3. */

.transformation-autonomy {
  /* Distância entre as linhas. */
  --autonomy-row-gap: clamp(88px, 9vw, 136px);
}

/* ---- Entrada: o cabeçalho existente ganha mais respiro antes
   do primeiro par texto/ilustração. ---- */
.transformation-autonomy .transformation-section-header--compact {
  margin-bottom: clamp(72px, 8vw, 116px);
}

/* ---- Linhas alternadas · mobile-first: o texto precede a sua
   ilustração na ordem natural de leitura (mesma ordem do DOM). ---- */
.transformation-autonomy__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 44px);
  align-items: center;
}

.transformation-autonomy__row + .transformation-autonomy__row {
  padding-top: var(--autonomy-row-gap);
}

.transformation-autonomy__copy {
  min-width: 0;
  max-width: 52ch;
}

.transformation-autonomy__copy h3 {
  margin: 0;
  color: var(--ink-strong);
  font-family: "Surgena", "Montserrat", sans-serif;
  font-size: clamp(30px, 2.9vw, 40px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.transformation-autonomy__copy p {
  max-width: 46ch;
  margin: 22px 0 0;
  color: var(--ink-muted);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.62;
  text-wrap: pretty;
}

/* ---- Placeholders · quadro 4:3 estável, contorno tracejado
   contido; o canvas contínuo da página segue visível através. ---- */
.transformation-autonomy__media {
  min-width: 0;
  width: 100%;
  max-width: 640px;
}

.transformation-autonomy__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: var(--radius-lg);
}

.transformation-autonomy__placeholder span {
  color: var(--ink-soft);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Ilustração preservada no quadro 4:3, sem corte. */
.transformation-autonomy__media img {
  display: block;
  mix-blend-mode: multiply;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

/* ---- Desktop: colunas desiguais (texto mais largo) e papéis
   alternados; na primeira linha a ilustração troca de lado só no
   layout, preservando a ordem de leitura do DOM. ---- */
@media (min-width: 981px) {
  .transformation-autonomy__row {
    column-gap: clamp(64px, 7.5vw, 120px);
  }

  .transformation-autonomy__row--vector,
  .transformation-autonomy__row--resultados {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  }

  .transformation-autonomy__row--vector .transformation-autonomy__media,
  .transformation-autonomy__row--resultados .transformation-autonomy__media {
    grid-column: 1;
    grid-row: 1;
  }

  .transformation-autonomy__row--vector .transformation-autonomy__copy,
  .transformation-autonomy__row--resultados .transformation-autonomy__copy {
    grid-column: 2;
    grid-row: 1;
  }

  .transformation-autonomy__row--empresa {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  }

  .transformation-autonomy__media {
    max-width: none;
  }
}

@media (max-width: 680px) {
  .transformation-autonomy {
    --autonomy-row-gap: 76px;
  }

  .transformation-autonomy__media {
    width: 80%;
    margin-inline: auto;
  }
}