/* ==========================================================
   LEARNING CORNER — CONSISTENT ACTIVITY IMAGE VIEWER SIZE
   2026-09-05
   Keeps Learning Activity artwork comfortably visible without
   allowing a large uploaded image to dominate the detail page.
   Full image proportions are preserved; nothing is cropped.
   ========================================================== */

.learning-item-shell .learning-sample-carousel {
  width: min(100%, 880px) !important;
  max-width: 880px !important;
  margin: 30px auto 0 !important;
  padding: 14px !important;
  box-sizing: border-box;
}

.learning-item-shell .learning-sample-track {
  width: 100% !important;
  height: clamp(340px, 36vw, 500px) !important;
  min-height: 0 !important;
  position: relative;
}

.learning-item-shell .learning-sample-slide {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 14px 18px 52px !important;
  box-sizing: border-box;
}

.learning-item-shell .learning-sample-slide.is-active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.learning-item-shell .learning-sample-slide img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 420px !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
}

@media (max-width: 760px) {
  .learning-item-shell .learning-sample-carousel {
    width: min(100%, 620px) !important;
    padding: 10px !important;
    border-radius: 22px !important;
  }

  .learning-item-shell .learning-sample-track {
    height: clamp(300px, 88vw, 410px) !important;
  }

  .learning-item-shell .learning-sample-slide {
    padding: 10px 10px 46px !important;
  }

  .learning-item-shell .learning-sample-slide img {
    max-height: 345px !important;
  }
}

@media (max-width: 430px) {
  .learning-item-shell .learning-sample-track {
    height: 330px !important;
  }

  .learning-item-shell .learning-sample-slide img {
    max-height: 275px !important;
  }
}
