/* ============================================================
   BOARD STYLES — used by music.html, projects.html, and every
   individual project-*.html page (see js/board.js for the logic).
   ============================================================ */

/* ---- WIDE MODE (default): scattered freeform board ---- */

.board-error{
  font-family:var(--mono);
  font-size:0.82rem;
  line-height:1.65;
  padding:2rem clamp(1.25rem, 4vw, 3rem);
  max-width:36rem;
}
.board-error code{
  display:inline-block;
  margin:0.4rem 0;
  padding:0.25rem 0.5rem;
  background:var(--line);
  border-radius:4px;
}

.board{
  position:relative;
  width:100%;
  min-height:75vh;
  overflow:visible;
  touch-action:pan-y;
}

/* Each photo/video tile. Width is a % of the board (set in
   organizer.html) — height follows automatically. */
.polaroid{
  cursor:url('../assets/cursor-hover.png') 12 12, pointer;
  user-select:none;
  will-change:transform;
  transform-origin:center center;
}
.polaroid.dragging{
  z-index:999 !important;
}
.board-marquee{
  position:absolute;
  border:1px solid var(--flash);
  background:rgba(232,143,178,0.15);
  pointer-events:none;
  z-index:500;
}
.snap-guides{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:400;
}
.snap-guide-v{
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:var(--flash);
  opacity:0.55;
  transform:translateX(-50%);
}
.snap-guide-h{
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:var(--flash);
  opacity:0.55;
  transform:translateY(-50%);
}
.polaroid img,
.polaroid video{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
}
.polaroid .video-caption{
  display:block;
  text-align:center;
  font-family:var(--body);
  font-size:0.85rem;
  letter-spacing:0.03em;
  color:var(--ink);
  opacity:0.75;
  margin:0.35rem 0 0;
  pointer-events:none;
}
.polaroid .placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--line);
  font-family:var(--mono);
  font-size:0.65rem;
  text-align:center;
  color:var(--ink);
  opacity:0.6;
  padding:0 10px;
}

/* Captions are invisible by default (music.html, project pages).
   They're only shown when the page sets data-show-captions="true"
   on the #board element (projects.html does this, so each cover
   photo shows its project title). */
.polaroid .caption{
  display:none;
}
.board[data-show-captions="true"] .polaroid .caption{
  display:block;
  margin:0.4rem 0 0;
  text-align:left;
  font-family:var(--mono);
  font-size:0.9rem;
  color:var(--ink);
}

/* ---- NARROW MODE (phones, 700px window width or under):
   wrapping grid instead of scattered, added via a class board.js
   applies automatically — you don't need to add this class
   yourself anywhere. ---- */

.board.board--narrow{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:2rem;
  height:auto;
  min-height:0;
  overflow:visible;
  padding:1.5rem clamp(1rem, 4vw, 2rem);
}
.board--narrow .polaroid{
  width:100% !important;
  max-width:none;
  position:static;
  touch-action:pan-y;
}
.board--narrow .polaroid video,
.board--narrow .polaroid img{
  pointer-events:none;
  touch-action:pan-y;
}

/* ---- lightbox: full-size photo view, used on any board page
   where a photo doesn't have an "href" link (i.e. everywhere
   except the projects listing page) ---- */

.lightbox-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.92);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
.lightbox-overlay.open{ display:flex; }

.lightbox-content img,
.lightbox-content video{
  max-width:92vw;
  max-height:92vh;
  object-fit:contain;
  display:block;
}

.lightbox-close{
  position:fixed;
  top:1.25rem;
  right:1.5rem;
  background:none;
  border:none;
  color:#fff;
  font-size:2.25rem;
  line-height:1;
  cursor:pointer;
  padding:0.25rem 0.5rem;
  z-index:2002;
}

.lightbox-nav{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:#fff;
  font-family:var(--mono);
  font-size:2.25rem;
  line-height:1;
  cursor:pointer;
  padding:0.75rem 1rem;
  opacity:0.72;
  z-index:2002;
  transition:opacity 0.15s ease;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible{
  opacity:1;
  outline:none;
}

.lightbox-nav--prev{ left:0.75rem; }
.lightbox-nav--next{ right:0.75rem; }