/* --- base --- */
html,
body {
  height: 100%;
}

body {
  margin: 0;
}

/* Each "page" should snap; scroll-snap-type belongs on the scroll container (not items) */
.imagediv {
  /* fallback + iOS dynamic viewport */
  width: 100vw;
  width: 100dvw;

  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* --- your grid scroller --- */
.scroll-container[data-layoutmethod="grid"] {
  display: grid;
  grid: auto / auto-flow max-content;
  align-items: center; /* vertically align children */

  overflow-x: scroll;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;

  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

/* --- REAL fullscreen (when the API actually enters fullscreen) --- */
.scroll-container:fullscreen,
.scroll-container:-webkit-full-screen {
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* --- PSEUDO fullscreen fallback (when iOS blocks Fullscreen API) --- */
body.pseudo-fullscreen {
  overflow: hidden;
}

body.pseudo-fullscreen .scroll-container {
  position: fixed;
  inset: 0;

  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;

  overflow: auto;
  -webkit-overflow-scrolling: touch;

  /* iOS safe areas (notches/home indicator) */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}