/* ============================================
   EDITOR SECTION — interactive phone mockup
   Pairs with editor-section.js. Sizes/positions are set in JS; these rules
   handle stacking, clipping, and the swipe cursor.
   ============================================ */

/* The mockup overflows itself (menus peek + device frame), but the host box
   clips the carousel to the section (.preview-section is overflow:hidden). */
.em-mockup {
  position: relative;
  overflow: visible;
}

/* Black backdrop slightly larger than the screen — fills any gap inside the
   device-frame cutout (size/position/radius set by JS). */
.em-backdrop {
  position: absolute;
  background: #000000;
  pointer-events: none;
}

/* The phone "screen" — rounded rectangle, clips the phone layers (1, 2, 4).
   The menu carousel (layer 3) lives OUTSIDE this, so it isn't clipped. */
.em-screen {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  background: #000000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Layer 1 — base (solid black fallback + optional base image) */
.em-base {
  position: absolute;
  inset: 0;
  background: #000000;
}
.em-base-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Layer 2 — template preview (top-pinned; size/position set by JS) */
.em-preview {
  position: absolute;
  display: block;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* Layer 4 — chrome overlay (fills the screen, non-interactive) */
.em-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Device frame (bezel) drawn around the screen, on top. Size/position set by JS. */
.em-frame {
  position: absolute;
  pointer-events: none;
  -webkit-user-drag: none;
  z-index: 3;
}

/* Layer 3 — the swipe carousel, ON TOP of the screen and NOT clipped.
   The track holds copies of the menu list (seamless loop); each menu is
   bottom-anchored to the phone's bottom. */
.em-lane {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
}
.em-lane-track {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0;
  will-change: transform;
}
.em-menu {
  position: absolute;
  bottom: 0;
  display: block;
  /* no will-change here: menus never transform individually (only the track
     moves), and 15 permanently-promoted GPU layers weighed on Safari */
  -webkit-user-drag: none;
}

/* Transparent swipe catcher — sits inside .em-mockup, so it covers ONLY the phone
   (not the whole section). We drive the horizontal swipe ourselves; vertical page
   scroll is turned OFF here so it doesn't mix with the swipe. Two-finger
   pinch-zoom still works, and the area outside the phone scrolls normally. */
.em-swipe {
  position: absolute;
  /* Covers the bottom 60% of the phone (the menus live here) — the top 40%
     (template preview) isn't swipeable. Extended sideways PAST the mockup so the
     menus that peek beyond the phone (clipped by the section box) are grabbable
     too; the box's overflow:hidden trims this to the carousel's visible width. */
  top: 40%;
  bottom: 0;
  left: -100vw;
  right: -100vw;
  z-index: 5;
  cursor: grab;
  touch-action: pinch-zoom;
}
.em-swipe.is-grabbing {
  cursor: grabbing;
}