/* Order of service: folded half-letter.
   ONE sheet of letter paper, landscape, printed double-sided, folded once.
   Four panels, which is what a letter sheet folded once gives you.

   Side 1 is the outside  : [ back cover | front cover ]
   Side 2 is the inside   : [ order      | remembrance ]

   The two .sheet elements below are the two SIDES of that one sheet, not two
   pieces of paper. Getting this wrong on the page costs a family double the
   paper at the copy shop, so the wording is "side" everywhere it is shown.

   Every measurement inside a panel is in em, and the panel's font-size is a
   percentage of the sheet's width (cqw). One rule therefore governs both the
   on-screen preview at any size and the printed 5.5in panel.

   The container is the SHEET, not the panel: an element cannot query itself,
   and a panel that declares container-type and then uses cqw silently falls
   back to the viewport - which is how this was wrong the first time. A panel is
   half a sheet, so 1.45cqw of an 11in sheet is 11.5pt on a 5.5in panel. */

.program { --panel-w: 5.5in; --panel-h: 8.5in; }

.sheet {
  container-type: inline-size;
  display: flex;
  width: 100%;
  max-width: calc(var(--panel-w) * 2);
  /* Left-aligned, not centred: centring inside the page wrap pushed the paper
     a few pixels off the heading above it. */
  margin: 0 auto 1.5rem 0;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule);
}
.sheet-label {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); max-width: calc(var(--panel-w) * 2); margin: 0 auto .5rem 0;
}

.panel {
  position: relative;
  width: 50%;
  aspect-ratio: 5.5 / 8.5;
  font-size: 1.45cqw;
  padding: 3.4em 2.9em;
  color: #1c1a17;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* A half-letter panel is taller than most of what goes on it. Left at the
     top, an order of service six lines long leaves the bottom half of the page
     blank and the booklet reads as an unfinished template. `safe` means a panel
     that IS full still starts at the top rather than overflowing both edges.
     The cover and the back panel pin their own blocks with auto margins, which
     win over this, so only the two inside panels are affected. */
  justify-content: safe center;
}
.panel + .panel { border-left: 1px dashed #d8d2c6; }

/* Each theme owns its type: without this the global serif heading rule leaks in
   and the Modern booklet quietly gets a serif name it never asked for. */
.panel h2, .panel h3, .panel .p-name { font-family: inherit; }
.panel h2 { font-size: 1.55em; margin: 0 0 .5em; line-height: 1.15; }
.panel h3 {
  font-size: .82em; letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 1em; color: #6d665c; font-weight: 600;
}
.panel p { font-size: 1em; line-height: 1.5; margin: 0 0 .85em; }
.panel .small { font-size: .84em; }
.panel .center { text-align: center; }

.p-name { font-size: 2.05em; line-height: 1.1; margin: 0 0 .25em; }
.p-dates { font-size: .95em; letter-spacing: .05em; color: #55504a; margin: 0; }
.p-kicker { font-size: .8em; letter-spacing: .2em; text-transform: uppercase; color: #6d665c; margin: 0 0 1.2em; }
.p-service { margin-top: auto; font-size: .86em; line-height: 1.55; color: #3c3833; }
.p-service b { display: block; font-weight: 600; }

.p-portrait {
  /* Height in em, not an aspect ratio: the panel is a fixed box and the service
     details underneath must survive at print size whatever shape the photo is.
     It grows into whatever the rest of the cover does not use, within bounds,
     so a sparse cover closes its gap with the photograph rather than with air. */
  width: 100%; flex: 1 1 21em; min-height: 15em; max-height: 27em;
  object-fit: cover; object-position: center 30%; display: block;
  margin: 0 auto 1.3em; background: #efeae1;
}
.p-portrait-empty {
  flex: 0 0 21em; max-height: 21em;
  display: flex; align-items: center; justify-content: center;
  font-size: .78em; color: #9a9285; text-align: center; padding: 1em;
  border: 1px dashed #cfc7b8;
  box-sizing: border-box;
}

.p-order { list-style: none; margin: 0; padding: 0; }
.p-order li { display: flex; justify-content: space-between; gap: 1em; padding: .42em 0; font-size: .95em; }
.p-order .t { }
.p-order .d { color: #6d665c; text-align: right; font-style: italic; }

.p-block + .p-block { margin-top: 1.2em; }
.p-block h3 { margin-bottom: .5em; }
.p-block p:last-child { margin-bottom: 0; }

.p-closing { margin: auto 0; text-align: center; font-size: 1.05em; line-height: 1.6; }
.p-closing .attr { display: block; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: #6d665c; margin-top: 1em; }
.p-thanks { font-size: .84em; line-height: 1.55; color: #3c3833; text-align: center; }

/* ---------- Classic ---------- */

.theme-classic .panel { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; text-align: center; }
.theme-classic h2, .theme-classic .p-name { font-family: inherit; letter-spacing: .01em; }
.theme-classic h3 { font-family: inherit; }
.theme-classic .p-kicker { font-variant: small-caps; letter-spacing: .28em; }
.theme-classic .rule { border: 0; border-top: 1px solid #2f2b26; border-bottom: 1px solid #2f2b26; height: 3px; width: 45%; margin: 1.2em auto; opacity: .5; }
.theme-classic .p-order li { text-align: left; }
.theme-classic .p-portrait { border: 1px solid #cfc7b8; padding: .35em; background: #fff; }

/* ---------- Floral ---------- */

.theme-floral .panel {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  text-align: center;
  background: #fffdfa;
}
.theme-floral h2, .theme-floral .p-name { color: #4a4239; }
.theme-floral h3 { color: #7d6f61; letter-spacing: .18em; }
.theme-floral .rule { border: 0; height: 1px; background: linear-gradient(90deg, transparent, #c9b8a4, transparent); width: 70%; margin: 1.1em auto; }
.theme-floral .p-portrait { border-radius: 50% 50% 50% 50% / 46% 46% 54% 54%; }
.theme-floral .p-order li { text-align: left; }
.theme-floral .wash { position: absolute; pointer-events: none; }
/* Washes bleed off the OUTER edge of each panel. The inner edge is the fold,
   and an ornament straddling the fold looks like a printing error. */
.theme-floral .wash-tl { top: -12%; right: -14%; width: 58%; transform: scaleX(-1); }
.theme-floral .wash-br { bottom: -14%; left: -12%; width: 52%; transform: rotate(180deg) scaleX(-1); }
.theme-floral .p-order .d { color: #7d6f61; }

/* ---------- Modern ---------- */

.theme-modern .panel {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  padding: 3.2em 2.7em;
}
.theme-modern .p-name { font-weight: 300; letter-spacing: -0.02em; font-size: 2.2em; }
.theme-modern .p-kicker { letter-spacing: .24em; font-size: .72em; }
.theme-modern h3 { letter-spacing: .14em; font-size: .74em; color: #8a8279; }
.theme-modern .rule { border: 0; border-top: 2px solid #1c1a17; width: 2.2em; margin: 1.2em 0; }
.theme-modern .p-portrait { height: 19em; }
.theme-modern .p-order li { border-bottom: 1px solid #ececea; }
.theme-modern .p-order .d { font-style: normal; }
.theme-modern .p-closing { text-align: left; }
.theme-modern .p-thanks { text-align: left; }

/* ---------- watermark before payment ---------- */

.program.is-locked .panel::after {
  content: 'PREVIEW';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: system-ui, sans-serif; font-size: 1.25em; font-weight: 600; letter-spacing: .42em;
  color: rgba(60, 54, 46, .10);
  transform: rotate(-32deg);
  pointer-events: none;
}
.program.is-locked .panel { user-select: none; }

/* ---------- editing ---------- */

[data-edit] { border-radius: 2px; }
.is-editable [data-edit]:hover { background: rgba(76, 91, 79, .07); box-shadow: 0 0 0 .35em rgba(76, 91, 79, .07); }
.is-editable [data-edit]:focus { outline: 2px solid #4c5b4f; outline-offset: .2em; background: #fff; }

/* ---------- print ---------- */

@media print {
  @page { size: letter landscape; margin: 0; }

  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body * { visibility: hidden; }
  .print-root, .print-root * { visibility: visible; }
  .print-root { position: absolute; inset: 0 auto auto 0; width: 100%; }

  .sheet-label, .no-print { display: none !important; }

  .sheet {
    width: 11in; height: 8.5in; max-width: none;
    margin: 0; border: 0; box-shadow: none;
    break-after: page; page-break-after: always;
    overflow: hidden;
  }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
  .panel {
    width: 5.5in; height: 8.5in; aspect-ratio: auto;
    border: 0 !important; font-size: 11.5pt;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .panel + .panel { border-left: 0; }
  .program.is-locked .panel::after { content: 'PREVIEW'; color: rgba(60,54,46,.18); }
}

/* ---------------------------------------------------------------------------
   Memorial keepsake cards, eight to a letter sheet.

   4.25 x 2.75in divides 8.5 x 11in exactly - two across, four down, nothing
   trimmed and nothing wasted. Type is in em against a font-size set from the
   sheet width in cqw, the same trick the booklet panels use, so one rule
   governs the preview at any size and the printed card at 2.75in.
   --------------------------------------------------------------------------- */
.pc-sheet {
  container-type: inline-size;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr);
  width: 8.5in; max-width: 100%; aspect-ratio: 8.5 / 11;
  margin: 1.5rem auto 0 0; background: #fff;
  border: 1px solid var(--rule);
}
.pc-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  text-align: center; color: #1c1a17;
  /* --pc-scale is stepped down by renderPrayerCards when a long verse will not
     fit. Everything on the card is expressed against it, photograph included,
     so one number shrinks the whole card rather than squeezing the type around
     a picture that refuses to move. */
  font-size: calc(1.5cqw * var(--pc-scale, 1));
  padding: 1.1em 1.2em;
  /* The cut lines, drawn on two edges only so neighbours do not double up. */
  border-right: 1px dashed #d8d2c6; border-bottom: 1px dashed #d8d2c6;
  overflow: hidden;
}
.pc-card:nth-child(2n) { border-right: 0; }
.pc-card:nth-child(n+7) { border-bottom: 0; }

/* Nothing on the card is allowed to shrink. Flex children shrink by default,
   which made a long verse overflow its own paragraph instead of the card - so
   the fit measurement below saw a card that fitted while the text ran off the
   bottom of it. */
.pc-card > * { flex: none; }

.pc-kicker {
  font-size: .74em; letter-spacing: .2em; text-transform: uppercase;
  color: #6d665c; margin: 0 0 .55em;
}
/* The photograph is the point of a keepsake card, so it is sized to read as a
   portrait rather than a stamp - about 1.2in tall on the printed card. It is
   allowed to shrink, never to grow: a long verse takes its room from the
   picture instead of pushing the attribution off the bottom edge. */
/* The photograph is the point of a keepsake card, so it is sized to read as a
   portrait rather than a stamp - about 1.15in tall on the printed card.
   Explicit width and height rather than a flex basis: in a column flex box the
   basis is the height, which left the width to collapse onto the content and
   made the empty state a different size from a real photograph. */
/* Sized in cqw against the sheet, not in em.
   `em` resolves against the element's OWN font-size, and the empty state sets a
   smaller one for its caption - so the placeholder came out at half the size of
   a real photograph and the preview quietly lied about the layout. Container
   units are immune to that: 12.3cqw of an 8.5in sheet is 1.05in, on screen at
   any width and on the printed card. */
.pc-photo {
  width: calc(12.3cqw * var(--pc-scale, 1));
  height: calc(13.5cqw * var(--pc-scale, 1));
  flex: none;
  object-fit: cover; object-position: center 30%;
  display: block; margin: 0 auto .55em; background: #efeae1;
}
.pc-photo-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: .62em; color: #9a9285; border: 1px dashed #cfc7b8;
  box-sizing: border-box; padding: .5em; line-height: 1.3;
}
.pc-name { font-size: 1.05em; line-height: 1.15; margin: 0 0 .18em; font-weight: 600; }
.pc-dates { font-size: .78em; letter-spacing: .04em; color: #55504a; margin: 0; }
.pc-rule { border: 0; border-top: 1px solid #cfc7b8; width: 38%; margin: .6em auto; }
.pc-verse {
  font-size: .74em; line-height: 1.45; margin: 0; white-space: pre-line;
  color: #3c3833;
}

.pc-sheet.theme-classic .pc-card,
.pc-sheet.theme-floral .pc-card { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
.pc-sheet.theme-floral .pc-photo { border-radius: 50% 50% 50% 50% / 46% 46% 54% 54%; }
.pc-sheet.theme-modern .pc-card { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.pc-sheet.theme-modern .pc-name { font-weight: 300; letter-spacing: -0.01em; }

@media print {
  .pc-sheet {
    width: 8.5in; height: 11in; aspect-ratio: auto;
    margin: 0; border: 0;
  }
  /* No font-size here: the sheet is 8.5in in print too, so cqw already lands
     on ~9pt, and hard-coding it would override the fitted --pc-scale. */
  .pc-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------------------------------------------------------------------------
   The centre spread, on the eight-page booklet.

   Two columns and three rows a side, twelve across the spread. The grid is in
   em against the panel's cqw font-size like everything else here, so one rule
   holds on screen and at 5.5in.
   --------------------------------------------------------------------------- */
.panel-photos { justify-content: flex-start; }
.panel-photos h3 { margin-bottom: .9em; }
.p-shots {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7em;
  flex: 1; align-content: start;
}
.p-shot { aspect-ratio: 4 / 5; overflow: hidden; background: #efeae1; }
.p-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
.p-shot-empty {
  grid-column: 1 / -1; aspect-ratio: auto; padding: 2em 1em;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .8em; color: #9a9285; border: 1px dashed #cfc7b8; background: none;
}
.theme-classic .p-shot { border: 1px solid #cfc7b8; }
.theme-floral .p-shot { border-radius: 2px; }
.theme-modern .p-shots { gap: .55em; }