/* Reset */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

/* Horizontal scroll container */
.mobile-container {
  display: flex;
  flex-direction: row;
  overflow-x: auto;                /* horizontal scroll */
  overflow-y: hidden;              /* no vertical scroll */
  scroll-snap-type: x mandatory;   /* snap to slides */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  width: 100vw;
  height: 100vh;
  scroll-behavior: smooth;         /* smooth scroll for links */
}

/* Each slide */
.slide {
  flex: 0 0 100vw;                 /* full width of viewport */
  height: var(--vh); /* uses dynamic viewport height */
  scroll-snap-align: center;       /* snap slides to center */
  display: flex;
  justify-content: center;         /* horizontal center */
  align-items: center;             /* vertical center */
  position: relative;              /* optional background */
}

/* Images */
.slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;             /* fully visible */
  touch-action: pan-x pan-y;       /* allows pinch/zoom and scroll */
}

/* Download button on last slide */
.download-btn {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: absolute;
  z-index: 10;
  color: #8C7833;
  padding: 10px 10px;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid #8C7833;
}

/* Optional: fix mobile 100vh issues */
:root {
  --vh: 100%;
}