/* Mobile-only horizontal gallery: all five editor-owned images remain visible by swiping. */
@media (max-width: 767px) {
  .nr-entry-body .nr-intro-gallery.wp-block-group {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: visible;
  }

  /* Override the earlier three-column grid and keep part of the next image visible. */
  .nr-entry-body .nr-intro-gallery.wp-block-group > .wp-block-gallery.has-nested-images {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: none;
    height: clamp(260px, 82vw, 390px);
    margin: 0;
    padding: 0 18px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--nr-blue) transparent;
  }

  /* The original gallery stylesheet has a high-specificity display:block rule.
     Explicitly restore the first and fifth images hidden by older mobile CSS. */
  .nr-entry-body .nr-intro-gallery.wp-block-group > .wp-block-gallery.has-nested-images > figure.wp-block-image:not(#individual-image) {
    display: block !important;
    flex: 0 0 min(82vw, 380px) !important;
    width: min(82vw, 380px) !important;
    min-width: min(82vw, 380px);
    max-width: none !important;
    height: 100%;
    margin: 0 !important;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .nr-entry-body .nr-intro-gallery.wp-block-group > .wp-block-gallery.has-nested-images > figure.wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}