/* ===== Beautiful Obituary: photo collage =====
   Namespaced with .boc- so it won't collide with existing styles.
   Override the --boc-* variables to match your site. */
:root{
  --boc-accent:#2a5298;
  --boc-accent-ink:#ffffff;
  --boc-soft:#f4f6fb;
  --boc-line:#d4dbe8;
  --boc-muted:#5d6577;
  --boc-ring:rgba(255,255,255,.95);
}

/* ---------- Portrait slot (preview, print, memorial page) ---------- */
.boc-slot{position:relative;overflow:hidden;container-type:inline-size}
/* With the collage on, a photo may sit outside its slot, so the slot no longer clips (2026-10-10) */
.boc-slot.boc-free{overflow:visible}
.boc-layer{position:absolute;inset:0}
.boc-ph{position:absolute;
  transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease,opacity .35s ease;
  transform:translate(calc(var(--dx,0)*1cqw),calc(var(--dy,0)*1cqw)) scale(var(--s,1))}
.boc-ph img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
@media (prefers-reduced-motion:reduce){.boc-ph{transition:none}}

/* Main photo, single layout: fills the slot, fades out at the bottom */
.boc-main{z-index:2;left:0;top:0;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
/* Main photo, collage layout: centered and in front */
.boc-layer.is-collage .boc-main{left:17%;top:8%;width:66%;height:92%}
/* No cutout available: feather the edges so it still blends */
.boc-layer.is-collage .boc-main:not(.has-cutout) img{
  -webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 42%,#000 60%,transparent 100%);
          mask-image:radial-gradient(ellipse 58% 62% at 50% 42%,#000 60%,transparent 100%)}
/* Background-removed cutout: show the whole figure */
.boc-main.has-cutout img{object-fit:contain;object-position:center bottom}

/* Side photos: feathered ovals behind the main photo */
.boc-sat{z-index:1;opacity:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at center,#000 50%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at center,#000 50%,transparent 100%)}
.boc-sat.show{opacity:.95}
/* A side photo whose background was removed: the whole figure, no oval fade (2026-10-12) */
.boc-sat.has-cutout{-webkit-mask-image:none;mask-image:none}
.boc-sat.show.has-cutout{opacity:1}
.boc-sat.has-cutout img{object-fit:contain}
.boc-tl{left:-7%;top:-2%;width:50%;height:55%}
.boc-tr{right:-7%;top:-3%;width:50%;height:58%}
.boc-br{right:-6%;top:48%;width:42%;height:42%}
.boc-bl{left:-6%;top:48%;width:42%;height:42%}

/* Editing only (never printed) */
.boc-slot.boc-editable{touch-action:none;cursor:grab}
.boc-slot.boc-grabbing{cursor:grabbing}
.boc-layer.editing .boc-ph{touch-action:none;cursor:grab}
.boc-layer.editing .boc-sat.show{pointer-events:auto}
.boc-slot.boc-grabbing .boc-ph{cursor:grabbing}
/* (the dashed circle that used to mark the selected photo is gone, 2026-10-10: the round grip below marks it) */

/* ---------- Editor controls ---------- */
.boc-btn{font:inherit;font-weight:500;font-size:14px;padding:9px 14px;border-radius:8px;cursor:pointer;
  border:1px solid var(--boc-line);background:transparent;color:inherit;display:inline-flex;align-items:center;gap:7px}
.boc-btn svg{width:16px;height:16px}
.boc-btn[aria-pressed="true"]{background:var(--boc-accent);border-color:var(--boc-accent);color:var(--boc-accent-ink)}
.boc-btn:focus-visible,.boc-chip:focus-visible,.boc-add:focus-visible,.boc-slot:focus-visible{outline:2px solid var(--boc-accent);outline-offset:2px}

.boc-panel{margin-top:14px;padding:14px;border-radius:10px;background:var(--boc-soft)}
.boc-panel[hidden],.boc-tools[hidden]{display:none}
.boc-panel p{margin:0 0 12px;font-size:13.5px;color:var(--boc-muted)}
.boc-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.boc-cell{position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden}
.boc-cell img{width:100%;height:100%;object-fit:cover;display:block}
.boc-add{width:100%;height:100%;border:1.5px dashed var(--boc-muted);border-radius:8px;background:transparent;
  color:var(--boc-muted);font:inherit;font-size:12.5px;cursor:pointer}
.boc-x{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;padding:0;
  background:rgba(0,0,0,.65);color:#fff;font-size:14px;line-height:22px;cursor:pointer}
.boc-pos{position:absolute;left:0;right:0;bottom:0;padding:3px 0;font-size:11px;
  background:rgba(0,0,0,.55);color:#fff;text-align:center}
.boc-status{margin-top:10px;font-size:13px;font-weight:500}
.boc-status.warn{color:#b0642a}

.boc-tools{display:grid;gap:10px;margin-top:12px}
.boc-hint{font-size:13px;color:var(--boc-muted);margin:0}
.boc-chips{display:flex;flex-wrap:wrap;gap:6px}
.boc-chip{font:inherit;font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--boc-line);
  background:transparent;color:inherit;cursor:pointer}
.boc-chip[aria-pressed="true"]{background:var(--boc-accent);border-color:var(--boc-accent);color:var(--boc-accent-ink)}
.boc-size{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--boc-muted)}
.boc-size input{flex:1;accent-color:var(--boc-accent)}

/* The resize grip on the selected photo (screen only, removed before print capture) */
.boc-handle{position:absolute;z-index:6;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:#fff;border:2px solid var(--boc-accent);box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:nwse-resize;touch-action:none}
.boc-layer:not(.editing) .boc-handle{display:none}