/* Scoped milestone layout. data-achievement-row is maintained by
   tools/repair_achievement_timeline.py. */
.achievements-timeline > [data-achievement-row] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr);
  align-items: center;
  column-gap: 1.5rem;
  margin-block-end: 3rem;
}

.achievements-timeline > [data-achievement-row]:last-child { margin-block-end: 0; }
.achievements-timeline > [data-achievement-row] > [data-achievement-marker] {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}
.achievements-timeline > [data-achievement-row][data-timeline-side="start"] > [data-achievement-copy] { grid-column: 1; grid-row: 1; text-align: end; }
.achievements-timeline > [data-achievement-row][data-timeline-side="start"] > [data-achievement-media] { grid-column: 3; grid-row: 1; }
.achievements-timeline > [data-achievement-row][data-timeline-side="end"] > [data-achievement-copy] { grid-column: 3; grid-row: 1; text-align: start; }
.achievements-timeline > [data-achievement-row][data-timeline-side="end"] > [data-achievement-media] { grid-column: 1; grid-row: 1; }

@media (min-width: 768px) {
  /* Legacy utility classes make each direct child half-width and add an
     outer-side gutter. Grid owns those dimensions now. Grid line 1 is the
     inline-start edge, so it naturally becomes the right edge in Arabic. */
  .achievements-timeline > [data-achievement-row] > [data-achievement-copy],
  .achievements-timeline > [data-achievement-row] > [data-achievement-media] {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    padding-inline: 0 !important;
  }
}

@media (max-width: 767px) {
  .achievements-timeline > [data-achievement-row] { display: block !important; margin-block-end: 2.25rem; }
  .achievements-timeline > [data-achievement-row] > [data-achievement-marker] { display: none !important; }
  .achievements-timeline > [data-achievement-row] > [data-achievement-copy] { margin-block-end: 1rem; text-align: start !important; order: initial !important; }
  .achievements-timeline > [data-achievement-row] > [data-achievement-media] { width: 100%; order: initial !important; }
}