/* ═══ GALLERY LAYOUT v3 — full-width + responsive, shared by all project pages ═══
   Set per section with data-gallery="..." on <section data-sq-slot="...">.
   Loaded after each page's inline <style>, so these win on equal specificity. */

/* every gallery fills the full content width; images fill their cell */
.slot-gallery-grid { width: 100%; margin-top: 16px; }
.slot-gallery-grid .slot-gallery-item { width: 100%; }
.slot-gallery-grid img,
.slot-gallery-grid video { width: 100%; height: auto; display: block; }

/* STACKED — one picture per row, full width, clear breaks between (== "line breaks") */
.slot-gallery-grid.fullwidth,
.slot-gallery-grid.stacked { display: flex; flex-direction: column; gap: 28px; }

/* AUTO — fills the row, wraps responsively on its own. Safe default for any count. */
.slot-gallery-grid.auto { display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* 2 / 3 / 4 explicit columns — always full width, collapse on smaller screens */
.slot-gallery-grid.cols2 { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.slot-gallery-grid.grid3 { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: start; }
.slot-gallery-grid.cols4 { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.slot-gallery-grid.grid3 .slot-gallery-item img,
.slot-gallery-grid.grid3 .slot-gallery-item video { object-fit: contain; }

/* MASONRY — Pinterest-style, columns size themselves to fill width */
.slot-gallery-grid.masonry { display: block; columns: 280px; column-gap: 16px; }
.slot-gallery-grid.masonry .slot-gallery-item { break-inside: avoid; margin: 0 0 16px; }

/* SCREENS — website/screenshot cards, responsive auto-fit */
.slot-gallery-grid.screens { display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.slot-gallery-grid.screens .slot-gallery-item { border: 1px solid rgba(26,22,20,.12); box-shadow: 4px 4px 0 rgba(155,48,255,.18); background:#fff; }

/* SPECIMEN — logos/specimens, small auto-fit tiles */
.slot-gallery-grid.specimen { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.slot-gallery-grid.specimen .slot-gallery-item { background: transparent; display:flex; align-items:center; justify-content:center; }

/* SPOTLIGHT — first image full width, the rest reflow below */
.slot-gallery-grid.spotlight { display: block; }
.slot-gallery-grid.spotlight > .slot-gallery-item:first-child { margin-bottom: 18px; }
.slot-gallery-grid.spotlight .rest { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* ── responsive collapse for the fixed-column layouts ── */
@media (max-width: 900px) {
  .slot-gallery-grid.grid3, .slot-gallery-grid.cols4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .slot-gallery-grid.grid3, .slot-gallery-grid.cols2, .slot-gallery-grid.cols4 { grid-template-columns: 1fr; }
  .slot-gallery-grid.masonry { columns: 1; }
  .slot-gallery-grid.fullwidth, .slot-gallery-grid.stacked { gap: 20px; }
}
/* Galaxy Fold unfolded (~750px, squarish): keep 3-ups roomy, not cramped */
@media (min-width: 561px) and (max-width: 820px) {
  .slot-gallery-grid.cols4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ═══ SIGNATURE BLOCKS — shared so the curator can drop them on ANY page ═══ */
.pullquote { margin: 28px 0; padding: 20px 26px; border-left: 4px solid var(--grape,#9B30FF);
  background: #f3e8ff; font-family:'Space Mono',monospace; font-size: clamp(15px,1.6vw,18px);
  line-height: 1.5; font-style: italic; color: var(--plum,#5c4f6e); max-width: 820px; }
.pullquote cite { display:block; margin-top:10px; font-family:'Silkscreen',monospace; font-size:10px;
  color: var(--plum,#5c4f6e); font-style:normal; letter-spacing:.18em; text-transform:uppercase; }

.pillars { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; margin:18px 0; max-width:1000px; }
.pillar { padding:20px 18px; background:var(--cream-deep,#EDE3CF); border-left:3px solid var(--lavender,#6B4F8C); border-radius:2px; }
.pillar h4 { font-family:'Pixelify Sans',sans-serif; font-size:17px; margin-bottom:8px; color:var(--ink,#1A1614); }
.pillar p { font-size:14px; line-height:1.55; color:var(--plum,#5c4f6e); text-wrap:pretty; }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); gap:14px; margin:20px 0 24px; }
.stat { padding:18px 14px; background:var(--cream-deep,#EDE3CF); border:1.5px solid var(--ink,#1A1614); text-align:center; border-radius:2px; box-shadow:2px 2px 0 rgba(26,22,20,.4); }
.stat-num { font-family:'Pixelify Sans',sans-serif; font-weight:700; font-size:clamp(24px,3.6vw,36px); color:var(--ink,#1A1614); line-height:1; }
.stat-label { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--lavender,#6B4F8C); margin-top:8px; text-wrap:pretty; }

/* ═══ PER-SECTION BORDER toggle (set "noborder" class via the curator) ═══ */
.section.noborder { border-top: none !important; }
.section.noborder::before { display: none !important; }   /* drop the number too — reads as a continuation */