/* ─── Web Builder — Shared structural CSS ──────────────────────────
 *  Loaded by every site before its own style.css.
 *  Contains box model, grid, cells, page view, media containers,
 *  text block layout, and loose child positioning.
 *  Relies on CSS variables set by bootstrapStyle() (site.json.style).
 *  .project-media class must match MEDIA_CLASS in builder.js.
 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:ui-monospace,"SF Mono","Fira Code",monospace;
  background:var(--colors-pageBg,#e1e1e1);color:var(--colors-pageText,#111);
  min-height:100vh;display:flex;flex-direction:column;
  justify-content:center
}

#site-viewport{opacity:0.99999;min-height:100vh;background:var(--colors-pageBg,#e1e1e1)}

/* ─── Header ───────────────────────────────────────────────────────── */
header{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:1rem 1rem .5rem;mix-blend-mode:var(--blend-header,difference)
}
header a{text-decoration:none;color:#fff}
.logo{
  font-family:var(--fonts-logo,'Sprat',sans-serif);
  font-size:var(--sizes-logo,clamp(4rem,2vw,16rem));font-weight:700;letter-spacing:-.01em;
  filter:var(--shadow-logo,drop-shadow(.1rem .1rem .1rem rgba(0,255,0,.95)))
}
.logo:hover{text-decoration:underline}

/* ─── Index grid ───────────────────────────────────────────────────── */
.index-grid{width:100%;max-width:var(--grid-w,100vw);margin:0 auto;padding:var(--grid-padding,clamp(.25rem,2vw,1.5rem));box-sizing:border-box}
#index-grid{position:relative;width:100%;z-index:var(--z-grid,auto)}
.cell{position:absolute;overflow:hidden;cursor:pointer;outline:var(--grid-cellLineWidth,2px) solid var(--colors-gridLine,#000);outline-offset:var(--grid-cellOutlineOffset,-1px)}
.cell img,.cell video{width:100%;height:100%;object-fit:cover;display:block}
.cell.project{background:var(--colors-gridCell,#d8d8d8)}
.cell.project:hover{box-shadow:var(--grid-hoverShadow,0 0 8px rgba(0,0,0,.5));z-index:var(--z-cellHover,2);transform:scale(var(--grid-hoverScale,1.08))}
/* .cell.spacer — spacer cells are now rendered via canvas (buildIndex:renderSpacerCanvas), no DOM elements */
/* ─── Page view ────────────────────────────────────────────────────── */
#page-view{
  position:fixed;inset:0;z-index:var(--z-pageView,44);background:var(--colors-pageBg,#e1e1e1);
  display:none;overflow-y:scroll;-webkit-overflow-scrolling:touch
}
#page-view.on,#page-view.previewing{display:block}
#page-view.previewing{pointer-events:none;background:transparent;mix-blend-mode:var(--blend-preview,difference);z-index:var(--z-pagePreview,1)}

.project-media.stack,.project-media.stack.row{position:relative}
.project-media figure:has(.yt-thumb){padding:2px}
.project-media figure > .project-media.stack{min-height:100%}
.project-media.stack > figure:first-child{margin-top:0}

/* ── Media container ───────────────────────────────────────────────── */
.project-media{padding:0}
.project-media figure{margin:0;padding:0;overflow:hidden}
.text-block{overflow:visible;mix-blend-mode:var(--blend-textBlock,difference)}
.project-media img,.project-media video{display:block;padding:0;margin:0}

/* Stack */
.project-media.stack figure{margin-bottom:0}
.project-media.stack figure:has(figcaption){margin-bottom:2rem}
.project-media.stack figure:last-child{margin-bottom:0}
.project-media.stack img,.project-media.stack video{
  display:block;max-width:100%;max-height:85vh;height:auto
}
.project-media.stack figcaption{
  position:static;background:none;padding:.5rem;
  font-family:var(--font-text);font-size:.7rem;line-height:1.3
}
.project-media.stack figcaption a{color:#111;text-decoration:underline}
@media(max-width:768px){body{justify-content:flex-start}
.project-media.stack img,.project-media.stack video{max-height:none;max-width:100%}}

/* Grid */
.project-media.grid{display:grid;gap:0}

/* Horizontal row (replaces columns — nested stacks with direction:horizontal) */
.project-media.stack.row{display:flex;flex-direction:row;gap:0}
.project-media.stack.row > figure{flex:1;margin:0;overflow:hidden;position:relative}
.project-media.stack.row > figure img,
.project-media.stack.row > figure video{display:block;width:100%;height:auto}
@media(max-width:768px){.project-media.stack.row{flex-direction:column}}
.project-media.grid .grid-item{aspect-ratio:1;min-width:0;position:relative}
.project-media.grid .grid-item img,
.project-media.grid .grid-item video{width:100%;height:100%;object-fit:cover;min-width:0}
.project-media.grid .grid-item[style*="1 / -1"]{aspect-ratio:auto}
.project-media.grid .grid-item[style*="1 / -1"] img,
.project-media.grid .grid-item[style*="1 / -1"] video{width:100%;height:auto}
.project-media.grid .grid-item figcaption{
  position:absolute;bottom:0;left:0;right:0;padding:.5rem;
  background:linear-gradient(transparent,rgba(0,0,0,.5));color:#fff;
  font-family:var(--font-text);font-size:.65rem;line-height:1.3;
  text-shadow:0 1px 2px rgba(0,0,0,.5)
}
.project-media.grid figure:not(.grid-item) figcaption{
  padding:.5rem;color:#fff;
  font-family:var(--font-text);font-size:.75rem;line-height:1.3;
  text-shadow:0 1px 2px rgba(0,0,0,.5)
}
.project-media.grid figure:not(.grid-item) figcaption a{
  color:#0ff;text-decoration:underline
}
.project-media.grid figcaption a{color:#0ff;text-decoration:none}
.project-media.grid figcaption a:hover{text-decoration:underline}

/* Natural grid (no square crop) */
.project-media.grid figure:not(.grid-item) img,
.project-media.grid figure:not(.grid-item) video{width:100%;height:auto;object-fit:contain}

/* ── Grid cell overlap — text over media ────────────────── */
.project-media.grid figure:has([data-block-field]){z-index:2}
.project-media.grid figure:has(img,video){z-index:1}

/* ── Text block layout ─────────────────────────────────────────────── */
/*  Typography (font-family, size, color, weight, style, decoration)
 *  is handled dynamically by bootstrapStyle() via .text-* rules.      */

.project-media figure [data-block-field]{padding:.5rem}

.project-media figure [data-block-field] h1,
.project-media figure [data-block-field] h2,
.project-media figure [data-block-field] h3,
.grid-text h1,.grid-text h2,.grid-text h3{
  margin:0;letter-spacing:-.02em;line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.project-media figure p,.text-body,.grid-text p,.grid-excerpt{
  line-height:1.2;
  text-shadow:0 1px 2px rgba(0,0,0,.5);margin:0;
}
.text-prologue{
  line-height:1.3;font-style:italic;
  text-shadow:0 1px 2px rgba(0,0,0,.5);margin-bottom:.5rem;display:block;
}
.text-date{
  margin-bottom:.3rem;display:block;
}
.text-credits{
  margin-bottom:.3rem;display:block;
}
.project-media .text-link,.text-link{
  display:inline-block;
  text-shadow:0 1px 2px rgba(0,0,0,.5);word-break:break-all;
}
.text-link:hover{color:rgba(0,255,0,.85)}

/* ── Loose children (absolutely positioned, draggable) ─────────────── */
.loose-child{
  position:absolute;z-index:46;cursor:grab;user-select:none;
  transition:filter .15s
}
.loose-child.dragging{cursor:grabbing;z-index:47}
.loose-child:hover{filter:drop-shadow(0 0 8px rgba(0,0,0,.4))}
.loose-child img{display:block;max-width:200px;max-height:200px}
.loose-child video{display:block;border-radius:4px}

/* ─── Index entry gate ─────────────────────────────────────────────── */
/*  Loading bar + button shown while the index fetches data. The bar
 *  fills as fetches resolve; the button enables when ready. The click
 *  reveals the pre-built grid and primes sticky user activation so
 *  mouseenter unmute works.                                             */
.index-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.2rem;
  z-index: 10;
  background: transparent;
}
.index-loading-bar-wrap {
  width: min(260px, 50vw); height: 3px;
  background: rgba(255,255,255,0.1); overflow: hidden;
}
.index-loading-bar {
  width: 0%; height: 100%;
  background: var(--text-body-color, #fff);
  transition: width 0.3s ease;
}
.index-loading-btn {
  background: transparent;
  border: 1px solid var(--text-body-color, #fff);
  color: var(--text-body-color, #fff);
  padding: 0.6rem 2.2rem;
  font-family: var(--text-body-fontFamily, monospace);
  font-size: var(--text-body-size, 0.6rem);
  cursor: default; opacity: 0.35;
  transition: opacity 0.3s, border-color 0.3s;
}
.index-loading-btn:not(:disabled) {
  cursor: pointer; opacity: 0.9;
}
.index-loading-btn:not(:disabled):hover {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.06);
}

/* ─── YouTube embeds ──────────────────────────────────────── */
.project-media .yt-embed{width:100%;aspect-ratio:16/9;border:none;display:block}
.project-media .yt-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}