/* ==========================================================================
   DUO — imagem com parallax de um lado, lista numerada do outro
   Prefixo: duo-
   Tokens usados: --fg --fg-2 --rule --accent-2 --display --sans --radius-media
   ========================================================================== */

/* A coluna do texto é levemente maior (1.05fr). A foto é apoio, não par. */
.duo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,72px);
}

/* min-height garante que a foto tenha corpo mesmo quando a lista é curta.
   Sem ele, com 2 itens, a imagem vira uma tira. */
.duo-media{
  position:relative;overflow:hidden;min-height:420px;
  border-radius:var(--radius-media);
}
/* scale(1.06) é a folga do parallax: a imagem precisa ser maior que a caixa
   para deslocar sem mostrar borda. O script substitui este transform. */
.duo-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.4) brightness(.8);
  transform:scale(1.06);will-change:transform;
}

.duo-item{
  padding:22px 0;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:44px 1fr;gap:16px;
}
.duo-list li:last-child{border-bottom:1px solid var(--rule)}

/* O número é itálico na fonte de TEXTO, não na display: ele numera, não
   grita. Cor de acento secundário para não competir com o --accent. */
.duo-num{
  font-family:var(--sans);font-style:italic;font-weight:300;
  font-size:19px;line-height:1.4;color:var(--accent-2);
}
.duo-title{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.025em;color:var(--fg)}
.duo-text{font-size:16px;line-height:1.6;color:var(--fg-2);margin-top:8px}

/* Inverter os lados: imagem à direita. */
.duo.is-flipped .duo-media{order:2}

@media(max-width:900px){
  .duo{grid-template-columns:1fr}
  .duo.is-flipped .duo-media{order:0}
}