/* ==========================================================================
   Faith Harbor Pet Loss Support — memorial pages
   PROVISIONAL DESIGN, pending visual approval by Pastor Shawn and ChatGPT.

   Installed to public_html/css/memorial.css. Published memorial pages are
   plain static HTML that link to this file, so the design can be refined
   without regenerating every memorial.

   Tokens are copied deliberately from the approved site stylesheet rather than
   imported, so a memorial never depends on the marketing site's CSS and can
   never be broken by a change to it.
   ========================================================================== */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/playfair-display-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('/fonts/playfair-display-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/montserrat-latin.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --c-navy: #14263f;
  --c-blue: #1f4e79;
  --c-teal: #35747b;
  --c-teal-soft: #9fc7c9;
  --c-cream: #f5efe3;
  --c-ivory: #fcfaf5;
  --c-white: #ffffff;
  --c-gold: #d3ad55;
  --c-gold-soft: #ead9a8;
  --c-text: #263241;
  --c-muted: #5b6673;
  --c-line: #e4ddce;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --measure: 60ch;
  --wrap: 52rem;
  --gutter: clamp(1rem, 5vw, 2.5rem);
  --space: clamp(2.5rem, 7vw, 4.5rem);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20,38,63,.05), 0 18px 40px -26px rgba(20,38,63,.35);
  --focus: 3px solid var(--c-gold);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--c-ivory);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

img { display: block; max-width: 100%; height: auto; }
a { color: var(--c-blue); }
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Private preview banner ---------- */
.preview-note {
  background: var(--c-navy);
  color: #f3efe6;
  font-size: .95rem;
  line-height: 1.6;
  padding: .9rem var(--gutter);
  text-align: center;
}
.preview-note strong { color: var(--c-gold-soft); font-weight: 700; }
.preview-note a { color: #fff; }

/* ---------- Masthead ---------- */
.masthead {
  text-align: center;
  padding-block: clamp(2.5rem, 8vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
}
.masthead__name {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--c-navy);
  font-size: clamp(2.25rem, 8vw, 4rem);
  line-height: 1.1;
  margin: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.masthead__nickname {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-teal);
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  margin: .5rem 0 0;
  overflow-wrap: break-word;
}
.masthead__dates {
  font-size: clamp(.95rem, 2.4vw, 1.0625rem);
  letter-spacing: .04em;
  color: var(--c-muted);
  margin: 1.1rem 0 0;
}
.masthead__kind {
  font-size: .9375rem;
  color: var(--c-muted);
  margin: .35rem 0 0;
}
.masthead__rule {
  width: 4.5rem; height: 2px; margin: clamp(1.5rem, 4vw, 2.25rem) auto 0;
  background: linear-gradient(to right, transparent, var(--c-gold), transparent);
  border: 0;
}

/* ---------- Primary photograph ---------- */
/* Never cropped to fill a shape: the whole photograph is always shown. */
.portrait { margin: 0 0 var(--space); text-align: center; }
.portrait img {
  margin-inline: auto;
  max-height: min(72vh, 40rem);
  width: auto;
  max-width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--c-white);
}
/* The adaptive hero.
   Added by the renderer only when the principal photograph is TALLER than 4:3.
   An ordinary candid taken on a telephone is tall, and the animal is usually a
   small part of it — photographed from above, with a great deal of ground
   below and sky or fence above. Cropping to 4:3 removes that empty margin and
   lets the photograph fill the column, so the memorial opens with the
   companion rather than with the surroundings.

   A photograph already 4:3 or wider never gets this class: cropping it would
   throw away the sides of the picture and make nothing larger.

   The photograph itself is untouched. This chooses which part of it is shown
   at the top of the memorial; the stored file is exactly as it was. */
.portrait--cover picture {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--c-white);
}
.portrait--cover img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: 50% 50%;
  /* the container carries these now, so the image must not double them */
  border-radius: 0;
  box-shadow: none;
}

.portrait figcaption {
  font-size: .9375rem; color: var(--c-muted);
  margin-top: .85rem; overflow-wrap: anywhere;
}

/* ---------- Story ---------- */
/* The section rhythm alone sets the spacing here; padding on the wrapper
   would not collapse with it and left a visible void on short memorials. */
.story { padding-bottom: 0; }
.section { margin-block: var(--space); }
.section:first-child { margin-top: 0; }
.section:last-child { margin-bottom: 0; }

.section__heading {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--c-navy);
  font-size: clamp(1.4rem, 4vw, 1.875rem);
  line-height: 1.2;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.section__heading::after {
  content: ""; display: block;
  width: 2.25rem; height: 2px; margin-top: .75rem;
  background: var(--c-teal-soft);
}
.section p {
  max-width: var(--measure);
  margin: 0 0 1.35rem;
  overflow-wrap: break-word;
}
.section p:last-child { margin-bottom: 0; }
.section__block + .section__block { margin-top: 1.35rem; }

/* ---------- Scripture ---------- */
.scripture {
  margin: var(--space) 0;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  background: var(--c-cream);
  border-radius: var(--radius);
  border-left: 3px solid var(--c-gold);
}
.scripture blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.2vw, 1.4rem);
  line-height: 1.6;
  color: var(--c-navy);
}
.scripture blockquote p { margin: 0; max-width: var(--measure); }
.scripture cite {
  display: block; margin-top: 1rem;
  font-family: var(--font-body); font-style: normal;
  font-size: .875rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-muted);
}

/* ---------- Gallery ---------- */
.gallery { margin-block: var(--space); }
.gallery__heading {
  font-family: var(--font-display); font-weight: 500; color: var(--c-navy);
  font-size: clamp(1.4rem, 4vw, 1.875rem); margin: 0 0 1.5rem;
}
.gallery__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 3vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.gallery__item { margin: 0; min-width: 0; }
/* contain, never cover: a photograph is never cropped to fill a tile. */
.gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--c-cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.gallery__item figcaption {
  font-size: .9375rem; color: var(--c-muted);
  margin-top: .65rem; overflow-wrap: anywhere;
}

/* ---------- Closing ---------- */
.closing {
  margin-block: var(--space);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--c-line);
  text-align: center;
}
.closing__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  line-height: 1.5;
  color: var(--c-navy);
  margin: 0;
  text-wrap: balance;
}

/* ---------- A memorial that is only a name ----------------------------------
   Fewer elements, so each is given more room and the page reads as composed
   rather than as having simply ended early. Nothing is added to the content:
   this is spacing, placement and scale, using the existing visual system. */
.is-sparse .masthead {
  padding-block: clamp(4rem, 16vh, 9rem) 0;
}
.is-sparse .masthead__rule {
  width: 6rem;
  margin-top: clamp(2rem, 6vw, 3.25rem);
}
.is-sparse main {
  display: flex;
  align-items: center;
  justify-content: center;
}
.is-sparse main > .wrap { width: 100%; }
.is-sparse .closing {
  border-top: 0;
  padding-top: 0;
  margin-block: clamp(2.5rem, 9vh, 5.5rem);
}
.is-sparse .closing__line {
  font-size: clamp(1.25rem, 4.2vw, 1.75rem);
}

/* ---------- Footer ---------- */
.ministry {
  flex-shrink: 0;
  background: var(--c-navy);
  color: #d5dbe4;
  padding-block: clamp(2rem, 5vw, 3rem);
  text-align: center;
  font-size: .9375rem;
}
.ministry__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: #f3efe6;
  margin: 0 0 .4rem;
}
.ministry a { color: var(--c-gold-soft); }
.ministry p { margin: 0 0 .35rem; max-width: 46rem; margin-inline: auto; }
.ministry p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}