/* =========================================================
   JR Media "View all" modal sizing + grid polish
   ========================================================= */

/* Overlay should center modal */
#jrmfb-overlay{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important; /* keeps modal away from edges */
  overflow: hidden !important;
  z-index: 999999 !important;
}

/* Constrain modal so it always fits the viewport */
#jrmfb-overlay .jrmfb-modal{
  width: min(1100px, 92vw) !important;
  max-height: 86vh !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Keep header visible, body scrolls */
#jrmfb-overlay .jrmfb-modal-header{
  flex: 0 0 auto !important;
  padding: 14px 18px !important;
}

/* Close button: restore orange style */
#jrmfb-overlay .jrmfb-modal-close{
  background: #D46A3F !important;
  background-color: #D46A3F !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

/* Hover/focus states */
#jrmfb-overlay .jrmfb-modal-close:hover,
#jrmfb-overlay .jrmfb-modal-close:focus{
  filter: brightness(0.95) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* If the close "x" is an SVG or spans inside, ensure it turns white */
#jrmfb-overlay .jrmfb-modal-close svg,
#jrmfb-overlay .jrmfb-modal-close svg path{
  fill: #fff !important;
  stroke: #fff !important;
}

#jrmfb-overlay .jrmfb-modal-body{
  flex: 1 1 auto !important;
  overflow: auto !important;
  padding: 14px 16px !important;
}

/* Grid: smaller responsive tiles */
#jrmfb-overlay #jrmfb-modal-grid,
#jrmfb-overlay .jrmfb-modal-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

/* Ensure each tile doesn't blow up */
#jrmfb-overlay #jrmfb-modal-grid > *,
#jrmfb-overlay .jrmfb-modal-grid > *{
  width: 100% !important;
  max-width: 100% !important;
}

/* Standardize images to neat squares */
#jrmfb-overlay #jrmfb-modal-grid img,
#jrmfb-overlay .jrmfb-modal-grid img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

/* If thumbnails are background-images on wrappers */
#jrmfb-overlay #jrmfb-modal-grid > a,
#jrmfb-overlay #jrmfb-modal-grid > button,
#jrmfb-overlay #jrmfb-modal-grid > div,
#jrmfb-overlay .jrmfb-modal-grid > a,
#jrmfb-overlay .jrmfb-modal-grid > button,
#jrmfb-overlay .jrmfb-modal-grid > div{
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Videos: keep tidy */
#jrmfb-overlay #jrmfb-modal-grid video,
#jrmfb-overlay .jrmfb-modal-grid video{
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display:block !important;
}

/* Smaller screens: slightly smaller tiles */
@media (max-width: 768px){
  #jrmfb-overlay{ padding: 16px !important; }
  #jrmfb-overlay .jrmfb-modal{ width: 94vw !important; max-height: 86vh !important; }
  #jrmfb-overlay #jrmfb-modal-grid,
  #jrmfb-overlay .jrmfb-modal-grid{
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 12px !important;
  }
}