/* Photos in the memorial text, from (caption[photo.jpg 35% print]) lines
   (memorial.js). Loaded by index.html and by the preview at /media-admin,
   so both look the same.

   Size: --w is the photo's size in % of the text's width, on a phone too
   (but never under 110px). A photo floats beside the paragraphs after it,
   alternating right and left; .is-wide ones (70%+; on a phone
   .is-wide-phone, 50%+) sit centred on their own line.
   A photo between paragraphs is a <figure>; one inside a paragraph a
   <span> (.is-inline), so the text after it wraps around it.
   Frame: .frame-outline (the default: a thin line offset behind it, like
   the photo on the first page, mirrored toward the text), .frame-print (a
   cream print with a soft shadow, slightly tilted), .frame-mat (a fine line
   just around it) or .frame-none (just a soft shadow).
   A photo fades in once loaded; a missing one is left out. */
.memorial-photo {
  display: block; box-sizing: border-box; margin-left: auto; margin-right: auto;
  width: min(100%, max(calc(var(--w, 46) * 1%), 110px));
  opacity: 0; transition: opacity 900ms ease;
}
.memorial-photo.is-loaded { opacity: 1; }
.memorial-photo.is-missing { display: none; }
/* One in the middle of a paragraph (a span there): its top lines up with
   the line it's on; a wide one splits the paragraph, with space around it. */
.memorial-photo.is-inline { margin-top: .4em; text-indent: 0; }
.memorial-photo.is-inline .mp-caption { display: block; font-weight: 400; }
.memorial-photo .mp-frame { display: block; position: relative; }
.memorial-photo img {
  position: relative; display: block; width: 100%; height: auto;
  border-radius: 3px; cursor: zoom-in;
}
.memorial-photo .mp-caption {
  position: relative; margin-top: 10px;
  font-size: 15px; line-height: 1.45; font-style: italic;
  color: #6B5748; text-align: center; text-wrap: balance;
}

.frame-outline .mp-frame::before {
  content: ""; position: absolute; inset: 14px -12px -14px 12px;
  border: 1px solid #E2D2BC; border-radius: 4px;
}
.frame-outline .mp-caption { margin-top: 26px; }
.frame-outline.no-caption { padding-bottom: 14px; }

.frame-print {
  padding: 10px 10px 2px; background: #FFFDF8; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(64,42,25,.08), 0 12px 30px rgba(64,42,25,.14);
  transform: rotate(-1.4deg);
}
.frame-print.is-left { transform: rotate(1.4deg); }
.frame-print.is-wide { transform: rotate(-.5deg); }
.frame-print img { border-radius: 1px; }
.frame-print .mp-caption { margin: 8px 0 6px; }
.frame-print.no-caption { padding-bottom: 10px; }

.frame-mat .mp-frame { padding: 6px; border: 1px solid #D9C4A6; border-radius: 5px; }
.frame-mat img { border-radius: 2px; }

.frame-none img { box-shadow: 0 10px 30px rgba(64,42,25,.14); }

@media (max-width: 699px) {
  .memorial-photo.is-right:not(.is-wide-phone) { float: right; margin-left: 18px; margin-right: 0; margin-bottom: 10px; }
  .memorial-photo.is-left:not(.is-wide-phone) { float: left; margin-right: 18px; margin-left: 0; margin-bottom: 10px; }
  .memorial-photo.is-wide-phone { clear: both; }
  .memorial-photo.is-inline.is-wide-phone { margin-top: 22px; margin-bottom: 22px; }
  .frame-outline.is-right:not(.is-wide-phone) .mp-frame::before { inset: 10px 8px -10px -8px; }
  .frame-outline.is-left:not(.is-wide-phone) .mp-frame::before { inset: 10px -8px -10px 8px; }
  .frame-outline:not(.is-wide-phone) { margin-bottom: 20px; }
  .frame-outline:not(.is-wide-phone) .mp-caption { margin-top: 18px; }
  .dedication::after { content: ""; display: block; clear: both; }
  .memorial-photo .mp-caption { font-size: 13px; }
}
@media (min-width: 700px) {
  .memorial-photo { margin-bottom: 14px; }
  .memorial-photo.is-right:not(.is-wide) { float: right; margin-left: 32px; margin-right: 0; }
  .memorial-photo.is-left:not(.is-wide) { float: left; margin-right: 32px; margin-left: 0; }
  .memorial-photo.is-wide { clear: both; }
  .memorial-photo.is-inline.is-wide { margin-top: 30px; margin-bottom: 30px; }
  .frame-outline.is-right:not(.is-wide) .mp-frame::before { inset: 14px 12px -14px -12px; }
  .frame-outline:not(.is-wide) { margin-bottom: 26px; }
}