/* 治喪通知「相片版」版式 —— 網頁預覽同 server 出嘅 JPG/PDF 共用呢一份。
   兩邊都係渲染 .ob-photo-sheet 呢個 900×1400 嘅盒，前台再靠 transform 縮細去啱容器闊度，
   所以唔使維護一套「細版」排版：客人喺畫面見到嘅比例、字級、留白，
   同下載出嚟嗰張一模一樣。 */

.ob-photo-sheet {
  position: relative;
  width: 900px;
  height: 1400px;
  overflow: hidden;
  transform-origin: top left;
  font-family: 'Noto Sans TC', 'PingFang HK', 'Microsoft JhengHei', sans-serif;
}
.ob-photo-sheet > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ob-photo-sheet .fg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }

/* 相圈：金框正圓，中軸對正上面個宗教符號。
   flex:0 0 auto 唔可以少——.fg 係 column flex，內容一長就會將個圈壓扁成橢圓，
   出過呢個 bug：張相變咗鴨蛋形。 */
.ob-photo-sheet .pw {
  flex: 0 0 auto;
  margin-top: 372px;
  width: 322px; height: 322px;
  border-radius: 50%;
  overflow: hidden;
  border: 9px solid #c9a227;
  box-shadow: 0 0 0 5px #fffdf7, 0 6px 22px rgba(0, 0, 0, .18);
  background: #fffdf7;
  display: flex; align-items: center; justify-content: center;
}
.ob-photo-sheet .pw img { width: 100%; height: 100%; object-fit: cover; }
.ob-photo-sheet .pw .ph { font-size: 25px; color: #b9a878; text-align: center; padding: 0 24px; line-height: 1.6; }

.ob-photo-sheet .nm {
  flex: 0 0 auto;
  margin-top: 20px;
  font-size: 48px; font-weight: 700; color: #1f1f1f; letter-spacing: .06em;
  text-shadow: 0 2px 6px rgba(255, 255, 255, .9);
}

/* 文字區：半透明色塊。唔完全遮死背景（要見到底圖），但一定要夠對比先睇得清 —
   親友係喺手機細細個 preview 度睇呢張嘢。 */
.ob-photo-sheet .panel {
  flex: 0 1 auto;
  margin-top: 22px;
  width: 760px;
  background: rgba(120, 102, 94, .68);
  padding: 26px 34px;
  display: flex; flex-direction: column; gap: 11px;
}
.ob-photo-sheet .panel div {
  font-size: 32px; line-height: 1.32; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .38);
  word-break: break-word;
  /* 對齊由 .ob-photo-sheet 個 --ob-align 決定，前台預覽同 server 出圖set同一個變數 */
  text-align: var(--ob-align, left);
}

.ob-photo-sheet .ft {
  flex: 0 0 auto;
  margin-top: auto; margin-bottom: 46px;
  font-size: 36px; font-weight: 700; color: #3a2f14;
  text-shadow: 0 2px 6px rgba(255, 255, 255, .9);
}

/* 前台預覽個外殼：張紙靠 transform 縮，所以要有個 wrapper 食住實際高度。
   封頂 360px 係因為呢款本身就係手機睇嘅嘢——預覽照住成條欄咁大反而唔似實物，
   個宗教符號會大到嚇親人，仲要碌好耐先見到落款。 */
.ob-photo-wrap { position: relative; width: 100%; max-width: 360px; margin: 0 auto;
                 overflow: hidden; border-radius: 8px; }