/* =========================================================================
   ForeverAfter.life — the public memorial directory (/memorials)
   Local tokens alias the site's --ff-* scale, the same way blog.css and
   quotes.css do, so this page inherits the shared palette rather than
   carrying its own. Loaded only here (linked from the template).
   ========================================================================= */

/* Scoped to this page's own roots rather than :root, following blog.css --
   writing these names onto :root is what dropped the admin chrome to Times
   when the article preview loaded a page stylesheet over the admin shell. */
.md-wrap {
  --surface: var(--ff-surface);
  --surface-2: var(--ff-surface-2);
  --ink: var(--ff-ink);
  --ink-2: var(--ff-ink-2);
  --ink-3: var(--ff-ink-3);
  --line: var(--ff-line);
  --line-soft: var(--ff-line-soft);
  --accent: var(--ff-accent);
  --accent-deep: var(--ff-accent-deep);

  max-width: 1080px;
  margin: 0 auto;
  padding: var(--ff-space-10) var(--ff-space-5) var(--ff-space-16);
}

.md-head { margin-bottom: var(--ff-space-8); }

.md-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ff-space-2);
  font-size: 0.85rem;
  color: var(--ink-3);
}
.md-crumb a { color: var(--ink-3); text-decoration: none; }
.md-crumb a:hover { color: var(--accent-deep); text-decoration: underline; }
.md-crumb .sep { opacity: 0.5; }

.md-title {
  margin: var(--ff-space-3) 0 var(--ff-space-2);
  font-family: var(--ff-font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.15;
  color: var(--ink);
}

.md-blurb { margin: 0; max-width: 60ch; color: var(--ink-2); line-height: 1.6; }
.md-count { color: var(--ink-3); }

.md-empty {
  padding: var(--ff-space-12) 0;
  color: var(--ink-3);
  text-align: center;
}

/* auto-fill rather than auto-fit: a single memorial should sit at card width
   on the left, not stretch across the whole row as the only cell. */
.md-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: var(--ff-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-item { margin: 0; }

.md-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ff-space-2);
  height: 100%;
  padding: var(--ff-space-5) var(--ff-space-4) var(--ff-space-6);
  border: 1px solid var(--line-soft);
  border-radius: var(--ff-radius);
  background: var(--surface);
  box-shadow: var(--ff-shadow-sm);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.md-card:hover,
.md-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--line);
  box-shadow: var(--ff-shadow-lg);
}

/* aspect-ratio rather than a fixed height, and no width/height attributes on
   a background image -- the same reasoning that had the audit's L2 declined:
   MemorialImage stores no dimensions, so the ratio is asserted here and CLS
   stays at zero without inventing numbers the files may not match. */
.md-portrait {
  width: 96px;
  aspect-ratio: 1;
  max-width: 100%;
  border-radius: 999px;
  background: var(--surface-2) center / cover no-repeat;
  border: 1px solid var(--line-soft);
}
.md-portrait.has-image { border-color: var(--line); }

/* overflow-wrap, because a name is not ours to choose. An unbroken 35-character
   surname measures ~250px against a 171px card in the two-column band (roughly
   360-480px wide) and spills straight out of it -- the grid column is fixed, so
   the page never scrolls sideways to tell you, the text just sits outside the
   card. `anywhere` rather than `break-word` so the too-long word is also allowed
   to shrink the line box it sits in. Ordinary names are untouched: this only
   applies when there is no break opportunity at all. */
.md-name {
  margin-top: var(--ff-space-1);
  font-family: var(--ff-font-serif);
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.md-years { font-size: 0.85rem; color: var(--ink-3); }

.md-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ff-space-4);
  margin-top: var(--ff-space-12);
  padding-top: var(--ff-space-6);
  border-top: 1px solid var(--line-soft);
}
.md-pager-at { font-size: 0.9rem; color: var(--ink-3); }
.md-pager-link {
  padding: var(--ff-space-2) var(--ff-space-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.9rem;
  text-decoration: none;
}
.md-pager-link:hover { border-color: var(--accent); color: var(--accent-deep); }

@media (max-width: 480px) {
  .md-wrap { padding-left: var(--ff-space-4); padding-right: var(--ff-space-4); }
  .md-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--ff-space-4); }
  .md-portrait { width: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .md-card { transition: none; }
  .md-card:hover, .md-card:focus-visible { transform: none; }
}