/* Template canvas machinery — shared by every template. Templates own their look via --t-* vars
   and their own {id}.css; NOTHING here paints brand color. Canvas is a fixed 850×1100 logical px
   surface (US Letter @100px/in); previews scale the whole node with transform, never reflow. */

.flyer-canvas {
  position: relative;
  width: 850px;
  height: 1100px;
  overflow: hidden;
  background: var(--t-bg, #fff);
  color: var(--t-ink, #1e2124);
  font-family: var(--t-font-body, 'Source Sans 3', sans-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}
.flyer-canvas *, .flyer-canvas *::before, .flyer-canvas *::after { box-sizing: border-box; margin: 0; }

/* A slot the binder decided has no value — the element AND its layout space vanish. */
.flyer-canvas [data-gone] { display: none !important; }

/* ---------- photo slots ---------- */
.photo-slot {
  position: relative;
  overflow: hidden;
  background: var(--t-photo-empty, #23342b);
}
.photo-slot .photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* cover semantics: warping is impossible */
  object-position: 50% 50%;
  transform-origin: center center;
  display: none;
}
.photo-slot.filled .photo-img { display: block; }
.photo-slot .photo-chip {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 10px;
  font: 600 12px/1.4 var(--t-font-body, 'Source Sans 3', sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(12, 18, 15, .78);
  color: #fff;
  border-radius: 2px;
  z-index: 2;
}
.photo-slot .photo-chip[hidden] { display: none; }
/* Empty non-optional slots show a quiet tinted panel with the template's mark — never a broken box. */
.photo-slot .photo-empty-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .28);
  font: 600 13px/1 var(--t-font-body, 'Source Sans 3', sans-serif);
  letter-spacing: .3em;
  text-transform: uppercase;
}
.photo-slot.filled .photo-empty-mark { display: none; }
.flyer-canvas .photo-slot[data-optional]:not(.filled) { display: none; }

/* Editor affordances (inert in exports — exporter strips .editing) */
.flyer-canvas.editing [data-slot] { cursor: text; }
.flyer-canvas.editing [data-slot]:hover { outline: 1.5px dashed rgba(80, 140, 255, .8); outline-offset: 1px; }
.flyer-canvas.editing .photo-slot { cursor: pointer; }
.flyer-canvas.editing .photo-slot:hover::after,
.flyer-canvas.editing .photo-slot.drop-target::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px dashed rgba(80, 140, 255, .9);
  background: rgba(80, 140, 255, .12);
  z-index: 3;
  pointer-events: none;
}
.flyer-canvas [data-slot]:focus { outline: 2px solid rgba(80, 140, 255, .9); outline-offset: 1px; }
.flyer-canvas .slot-flash { animation: dk-slot-flash 1.2s ease-out 2; }
@keyframes dk-slot-flash {
  0%, 100% { outline: 2px solid transparent; }
  40% { outline: 3px solid rgba(255, 170, 40, .95); outline-offset: 2px; }
}