/* ============================================================================
   Block layout — shared by the live page and the editor.
   12-column grid; CSS Grid does the snapping. On a phone every block spans the
   full width and stacks in source order, which is the same order you arranged.
   ============================================================================ */

.canvas{
  --cols:12; --rowpx:40px;
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  grid-auto-rows:var(--rowpx);
  max-width:1200px;
  margin:0 auto;
  padding:26px 20px 90px;
  min-height:calc(100vh - 140px);
  align-content:start;
}

.blk{ position:relative; min-width:0; }
.blk__body{
  height:100%; display:flex; flex-direction:column; justify-content:center;
  min-width:0;
}
.blk--panel{ padding:18px 20px; }
.blk--button .blk__body,
.blk--sign .blk__body{ align-items:center; }
.blk--button .blk__body[style*="left"],
.blk--sign .blk__body[style*="left"]{ align-items:flex-start; }
.blk--button .blk__body[style*="right"],
.blk--sign .blk__body[style*="right"]{ align-items:flex-end; }

.blk__text{ margin:0; }
h2.blk__text{
  font-family:var(--font-display); color:var(--title-gold);
  text-shadow:0 2px 0 var(--emboss-dark), 0 3px 6px rgba(0,0,0,.5);
  line-height:1.12; text-wrap:balance;
}
.blk__prose{ color:var(--label); line-height:1.65; }
.blk__prose p{ margin:0 0 .8em; }
.blk__prose p:last-child{ margin-bottom:0; }

.blk__frame{
  border-radius:8px; overflow:hidden; height:100%;
  box-shadow:0 0 0 1px var(--wood-line), 0 0 0 2px var(--brass-mid), var(--shadow-drop);
}
.blk__frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.blk--image img{ border-radius:6px; }

.blk__drop{
  height:100%; border:2px dashed var(--brass-mid); border-radius:9px;
  display:grid; place-items:center; background:rgba(20,10,3,.45);
}
.blk__empty{
  color:#c7a86e; font-style:italic; opacity:.85; font-size:14px;
  font-family:var(--font-body);
}

/* ── the phone: one column, source order, everything breathes ────────────── */
@media (max-width:760px){
  .canvas{
    grid-template-columns:1fr;
    grid-auto-rows:min-content;
    gap:16px;
    padding:18px 16px 70px;
  }
  .blk{ grid-column:1 / -1 !important; grid-row:auto !important; }
  .blk__body{ height:auto; }
  h2.blk__text{ font-size:clamp(26px,7vw,38px) !important; }
  .blk--spacer{ display:none; }
}