/* =========================================================
   Difusão   componentes só desta página

   Camada 3 de 3: styles.css → llm.css → didatica.css → aqui.
   As grades de pixel (canvas), a curva do cronograma e as
   linhas de operação entre imagens.
   ========================================================= */

/* =========================
   As grades de pixel
   ========================= */
.dif-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--md);
  margin-top: var(--md);
}

.dif-row--single { justify-content: center; }

.dif-fig {
  margin: 0;
  text-align: center;
}

.dif-canvas {
  display: block;
  width: 148px;
  height: 148px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: #fff;
  /* o ponto da página é ver o pixel: nada de suavização */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.dif-fig--big .dif-canvas { width: 232px; height: 232px; }

.dif-fig figcaption {
  margin-top: calc(var(--sm) / 1.6);
  max-width: 168px;
  font-size: calc(var(--sm) / 1.1);
  line-height: 1.4;
  color: var(--ink-45);
}

.dif-op {
  font-size: var(--lg);
  color: var(--ink-45);
  line-height: 1;
  align-self: center;
  /* alinha com o meio da imagem, não com a legenda */
  margin-bottom: calc(var(--sm) * 1.6);
}

/* grade de comparação (contagens de passo) */
.dif-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--md);
  margin-top: var(--md);
  justify-items: center;
}

.dif-grid .dif-canvas { width: 100%; max-width: 148px; height: auto; aspect-ratio: 1; }

/* =========================
   Curva do cronograma
   ========================= */
.dif-curve {
  margin-top: var(--md);
  height: 150px;
  border: 1px solid var(--hair-soft);
  border-radius: 9px;
  background: rgba(14, 16, 22, .02);
  overflow: hidden;
}

.dif-curve svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* as duas curvas ficam desenhadas: a inativa serve de referência */
.dif-curve polyline {
  fill: none;
  stroke: rgba(14, 16, 22, .16);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.dif-curve polyline.is-on {
  stroke: var(--c-purple);
  stroke-width: 2.4;
}

.dif-curve__now {
  stroke: var(--c-pink);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

/* =========================
   Responsivo
   ========================= */
@media (max-width: 900px) {
  .dif-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .dif-canvas { width: 112px; height: 112px; }
  .dif-fig--big .dif-canvas { width: 168px; height: 168px; }
  .dif-fig figcaption { max-width: 130px; }
  .dif-op { margin-bottom: 0; }
  .dif-curve { height: 120px; }
}