/*
 * TBA_GLOSSARY_IMAGE_STANDARD_V1_START
 *
 * Unified glossary image behavior.
 * Master asset: 1600x900 (16:9).
 * Legacy image ratios remain fully visible.
 * Desktop and mobile use the same image.
 */

.glossary-modal.glossary-modal-mock
.glossary-modal-media.has-image {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  flex-shrink: 0;
  overflow: hidden;
  background-color: #10243b;
}

.glossary-modal.glossary-modal-mock
.glossary-modal-media.has-image
img.glossary-modal-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/*
 * Mobile:
 * Keep the modal within the viewport.
 * Allow content scrolling for long definitions.
 */

@media (max-width: 680px) {
  .glossary-modal-layer
  .glossary-modal.glossary-modal-mock {
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* TBA_GLOSSARY_IMAGE_STANDARD_V1_END */