/* static/css/scrapbook.css — STATIC / NO INTERACTION + safe space for nav/footer */

html, body { height: 100%; }

body {
  margin: 0;
  background: #0b0b0b;
  overflow-x: hidden;
}

/* Reserve space so the absolutely-positioned scrapbook never sits under nav/footer */
.scrapbook-page {
  padding-top: 160px;   /* safety buffer for your nav */
  padding-bottom: 120px;/* safety buffer for your fixed footer */
}

/* Scrapbook canvas */
.scrapbook {
  position: relative;
  min-height: 100vh;
  padding: 28px;
  overflow: hidden;
  isolation: isolate; /* predictable stacking */
}

/* Scrap items */
.scrap-item {
  position: absolute;
  margin: 0;

  /* default: NOT clickable */
  cursor: default;
  user-select: none;
  pointer-events: none;

  z-index: 1;
}

/* Only items you mark as clickable */
.scrap-item.scrap-clickable {
  pointer-events: auto;     /* allow click */
  cursor: pointer;
}

/* If the image is wrapped in an <a>, allow clicking it */
.scrap-item.scrap-clickable a,
.scrap-item.scrap-clickable img {
  pointer-events: auto;
}

/* Images look embedded */
.scrap-item img {
  display: block;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  filter: saturate(1.03) contrast(1.01);
  transition: none; /* no hover movement */
}

/* Natural size image (GIF): do not scale via CSS */
.scrap-item.scrap-natural img {
  width: auto !important;
  max-width: none !important;
}