/*
 * Product screenshots need to stay readable. UI captures use contain and
 * their natural landscape ratio; portrait/people photography keeps cover.
 */

/* Simu's primary product screen and supporting UI captures. */
.media-simu .media-main img,
.media-simu .media-float img {
  object-fit: contain;
  background: #fff;
}

/* Python infographics are diagrams, so never crop their edges. */
.python-slide img {
  object-fit: contain;
  background: #fff;
}

/* Product windows in the learning journey use a consistent landscape frame. */
.journey-step .journey-window,
.journey-step:nth-child(2) .journey-window,
.journey-step:nth-child(3) .journey-window {
  width: min(100%, 280px);
  height: auto;
  aspect-ratio: 16 / 9;
}

.journey-window-simu .journey-image-main,
.journey-window-python .journey-image-main {
  object-fit: contain;
  background: #fff;
}

/* AnakBisa uses photography/artwork, where an intentional crop is desirable. */
.journey-window-anak .journey-image-main,
.class-photo img {
  object-fit: cover;
}

.journey-window-anak .journey-image-float {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #fff;
}

@media (max-width: 1050px) {
  .journey-step .journey-window,
  .journey-step:nth-child(2) .journey-window,
  .journey-step:nth-child(3) .journey-window {
    width: 170px;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 720px) {
  /* Keep the Playful hero backdrop geometrically circular on narrow screens. */
  .learning-map {
    min-height: 0;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* Editorial intentionally uses a rectangular three-panel grid. */
  html[data-theme="editorial"] .learning-map {
    min-height: 0;
    aspect-ratio: auto;
  }
  /* The former fixed-height composition made the Simu frame nearly square. */
  .media-stack.media-simu {
    min-height: 0;
    margin: 32px 0 12px;
    padding-bottom: 64px;
  }

  .media-simu .media-main {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-width: 5px;
  }

  .media-simu .media-float {
    bottom: 5px;
  }

  .media-simu .media-float-a { left: 0; }
  .media-simu .media-float-b { right: 0; }

  .journey-step .journey-window,
  .journey-step:nth-child(2) .journey-window,
  .journey-step:nth-child(3) .journey-window {
    width: min(100%, 280px);
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .python-slide-main,
  .python-slide-install {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}