/* ==========================================================================
   Layout: frame mobile + snap-to-section
   ========================================================================== */

/* Frame selebar HP. Di desktop berdiri di tengah, kiri-kanan = --color-page. */
.frame {
  --frame-h: 100vh;
  position: relative;
  width: 100%;
  height: var(--frame-h);
  margin-inline: auto;
  background: var(--color-paper);
  overflow: hidden;
}

/* Batasi lebar hanya di layar yang jelas lebih lebar dari HP (tablet/desktop).
   HP besar (mis. iPhone Pro Max 440pt) tetap penuh, tanpa garis hijau di tepi. */
@media (min-width: 30.0625rem) {
  .frame {
    max-width: var(--frame-max);
  }
}

@supports (height: 100dvh) {
  .frame {
    --frame-h: 100dvh;
  }
}

/* Scroll container dengan snap.
   - mandatory: selalu berhenti di awal section.
   - Section yang lebih tinggi dari layar tetap bisa dibaca sampai bawah;
     snap baru jalan saat mencapai ujungnya. */
.snap {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  /* Matikan scroll anchoring: browser tidak boleh menggeser posisi scroll
     saat isi section berubah tinggi (mis. pindah tab Gift), supaya animasi
     konten bergeser tetap terlihat. */
  overflow-anchor: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.snap::-webkit-scrollbar {
  display: none;
}

.section {
  position: relative;
  z-index: var(--z-section);
  /* min-height (bukan height): section dengan konten panjang otomatis memanjang. */
  min-height: var(--frame-h);
  padding: var(--space-12) var(--gutter);
  scroll-snap-align: start;
  /* Mencegah flick kencang melompati satu section. */
  scroll-snap-stop: always;
  overflow: hidden;
}

/* Section yang isinya melebihi layar (overflow-space.js): ruang ekstra di
   bawah supaya isi terakhir sempat dibaca/ditekan sebelum snap ke section
   berikutnya. */
.section.is-overflowing {
  padding-bottom: max(3rem, 30svh);
}