/* ============================================================
   STONE HOUSE MEMORIALS — plugin styles
   Scoped to .shm / .shm-* only. Loaded exclusively on Memorials
   pages. Reuses the theme's design tokens (--slate, --stone,
   --gold, --display, --text …) so nothing global is redefined.
   ============================================================ */

/* — Small layout helpers (scoped) — */
.shm .shm-center { text-align: center; margin-left: auto; margin-right: auto; }
.shm .shm-center-block { margin-left: auto; margin-right: auto; }
.shm .shm-eyebrow-gold { color: var(--gold-soft); }
.shm .shm-cta-row { display: flex; align-items: center; gap: var(--s-6); justify-content: center; flex-wrap: wrap; max-width: none; }
.shm .shm-link-quiet { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-size: var(--t-small); }
.shm .shm-link-quiet:hover { color: #7F6220; }
.shm-hero-fig { margin: 0; }

/* — Card grids: styles (10) & collections (5) — */
.shm-styles .wrap > .eyebrow, .shm-collections .wrap > .eyebrow { text-align: center; }
.shm-styles .wrap > .display-l, .shm-collections .wrap > .display-l { text-align: center; margin-bottom: var(--s-4); }
.shm-collections .wrap > .lead { margin: 0 auto var(--s-8); text-align: center; }
.shm-grid { display: grid; gap: var(--s-8); margin-top: var(--s-12); }
.shm-grid-styles { grid-template-columns: repeat(3, 1fr); }
.shm-grid-colls { grid-template-columns: repeat(3, 1fr); }
.shm-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.shm-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(35, 38, 41, .12); }
.shm-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.shm-card-fig { display: block; aspect-ratio: 4 / 3; position: relative; }
.shm-card-fig .plate { position: absolute; inset: 0; border-radius: 0; }
.shm-card-body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); flex: 1; }
.shm-card-title { font-family: var(--display); font-weight: 500; font-size: 1.375rem; line-height: 1.25; }
.shm-card-desc { color: var(--ink-soft); font-size: var(--t-small); line-height: 1.55; flex: 1; }
/* --gold-deep fails WCAG AA on light card backgrounds; #7F6220 keeps the
   brand's warm gold at a 5.7:1 contrast ratio on white. */
.shm-card-cta { color: #7F6220; font-size: var(--t-small); font-weight: 500; letter-spacing: .02em; }
.shm-card:hover .shm-card-cta .arw { padding-left: 4px; }
.shm-card .arw { transition: padding var(--dur) var(--ease); }

/* — Key characteristics — */
.shm-chars {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-top: var(--s-12);
}
.shm-char { background: var(--paper); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
.shm-char b { font-weight: 600; font-size: var(--t-small); }
.shm-char span { color: var(--ink-soft); font-size: var(--t-caption); line-height: 1.5; }

/* — Forms comparison (slate surface) — */
.shm-forms .wrap > .eyebrow, .shm-forms .wrap > .display-l { text-align: center; }
.shm-forms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); margin: var(--s-12) 0 var(--s-6); }
.shm-form {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  text-decoration: none; color: var(--on-slate); text-align: center;
  border: 1px solid var(--on-slate-line); border-radius: var(--radius);
  padding: var(--s-8) var(--s-4); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.shm-form:hover { border-color: var(--gold-line); background: rgba(233, 233, 231, .04); }
.shm-form:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.shm-form-svg { width: 96px; height: 82px; margin-bottom: var(--s-2); }
.shm-form-svg .shm-ground { stroke: var(--on-slate-muted); stroke-width: 1; }
.shm-form-svg .shm-stone { fill: var(--on-slate-soft); }
.shm-form:hover .shm-form-svg .shm-stone { fill: var(--gold-soft); }
.shm-form-name { font-family: var(--display); font-size: var(--t-display-s); }
.shm-form-profile {
  font-size: var(--t-label); text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: 999px; padding: 3px 10px;
}
.shm-form-desc { color: var(--on-slate-soft); font-size: var(--t-caption); line-height: 1.5; }
.shm-forms .caption { max-width: none; }

/* — Inspiration cards — */
.shm-insp .wrap > .eyebrow, .shm-insp .wrap > .display-l { text-align: center; }
.shm-insp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); margin-top: var(--s-12); }
.shm-insp-card {
  display: flex; flex-direction: column; gap: var(--s-2); text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius);
  padding: var(--s-6); background: #fff;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.shm-insp-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(35, 38, 41, .10); }
.shm-insp-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.shm-insp-title { font-family: var(--display); font-weight: 500; font-size: 1.125rem; }
.shm-insp-desc { color: var(--ink-soft); font-size: var(--t-caption); line-height: 1.5; }

/* — Cemetery requirements band — */
.shm-cem { text-align: center; }
.shm-cem .display-l { margin-bottom: var(--s-6); }
.shm-cem .lead { margin-bottom: var(--s-8); }

/* — Variations — */
.shm-vars .wrap > .eyebrow, .shm-vars .wrap > .display-l { text-align: center; }
.shm-vars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); margin-top: var(--s-12); }
.shm-var {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2);
}
.shm-var b { font-weight: 600; font-size: var(--t-small); }
.shm-var span { color: var(--ink-soft); font-size: var(--t-caption); line-height: 1.5; }

/* — Gallery: filters — */
.shm-gal .wrap > .eyebrow, .shm-gal .wrap > .display-l { text-align: center; }
.shm-gal .wrap > .lead { margin: 0 auto var(--s-6); text-align: center; }
.shm-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin: var(--s-8) 0 var(--s-2); }
.shm-filter {
  appearance: none; background: transparent; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); font-size: var(--t-caption); letter-spacing: .04em;
  padding: 8px 16px; min-height: 40px; cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.shm-filter:hover { border-color: var(--gold); color: var(--ink); }
.shm-filter:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.shm-filter.is-active { background: var(--slate); border-color: var(--slate); color: var(--stone); }
.shm-filter-status { text-align: center; margin: 0 auto var(--s-2); min-height: 1.2em; }
.shm-tile.shm-hide { display: none; }

/* — Gallery tiles: caption richer than theme default — */
.shm-gal-grid { margin-top: var(--s-8); }
.shm-tile { position: relative; }
.shm-tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* .plate stays in flow — the theme's .gtile .plate rule gives it its 4/5 aspect ratio. */
.shm-tile .plate { display: block; width: 100%; }
.shm-tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  padding: 14px 16px; pointer-events: none;
}
.shm-tile-cap b { color: var(--stone); font: 500 .8125rem/1.3 var(--text); letter-spacing: .06em; }
.shm-tile-cap span { color: rgba(233, 233, 231, .78); font: 400 .75rem/1.35 var(--text); }

/* — Lightbox — */
.shm-lbox {
  position: fixed; inset: 0; z-index: 10000; display: none;
  background: rgba(22, 24, 26, .94); padding: var(--s-6);
}
.shm-lbox.open { display: block; }
.shm-lbox-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.shm-lbox-frame { margin: 0; max-width: min(860px, 92vw); width: 100%; }
.shm-lbox-img {
  display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain;
  background: #2c2a27; border-radius: var(--radius);
}
.shm-lbox-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  color: var(--on-slate-soft); font-size: var(--t-caption); padding-top: var(--s-4);
}
.shm-lbox-code { color: var(--gold-soft); font-weight: 600; letter-spacing: .08em; }
.shm-lbox-name { color: var(--stone); font-size: var(--t-small); }
.shm-lbox-feat { flex-basis: 100%; }
.shm-lbox-cta { margin-top: var(--s-2); }
.shm-lbox-close, .shm-lbox-nav {
  appearance: none; background: rgba(233, 233, 231, .08); border: 1px solid rgba(233, 233, 231, .25);
  color: var(--stone); border-radius: 999px; cursor: pointer;
  width: 46px; height: 46px; font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease);
}
.shm-lbox-close:hover, .shm-lbox-nav:hover { background: rgba(233, 233, 231, .2); }
.shm-lbox-close:focus-visible, .shm-lbox-nav:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.shm-lbox-close { position: absolute; top: 8px; right: 8px; }
.shm-lbox-prev { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); }
.shm-lbox-next { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

/* — Personalization — */
.shm-pers .wrap > .eyebrow, .shm-pers .wrap > .display-l { text-align: center; }
.shm-pers-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-top: var(--s-12);
}
.shm-pers-item { background: var(--paper); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
.shm-pers-item b { font-weight: 600; font-size: var(--t-caption); }
.shm-pers-item span { color: var(--ink-soft); font-size: var(--t-caption); line-height: 1.5; }
.shm-pers .caption { margin: var(--s-6) auto 0; text-align: center; }

/* — Related / forms-in-collection — */
.shm-related .wrap > .eyebrow, .shm-related .wrap > .display-l,
.shm-formsin .wrap > .eyebrow, .shm-formsin .wrap > .display-l { text-align: center; }
.shm-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--s-12); }
.shm-rel {
  display: flex; flex-direction: column; gap: var(--s-3); text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-6);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.shm-rel:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(35, 38, 41, .10); }
.shm-rel:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.shm-rel b { font-family: var(--display); font-weight: 500; font-size: 1.125rem; }
.shm-rel span { color: var(--ink-soft); font-size: var(--t-caption); line-height: 1.55; flex: 1; }

/* — Cemetery note band — */
.shm-note { padding: var(--s-12) 0; background: #F4F3EF; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.shm-note .wrap { text-align: center; }
.shm-note-text { margin: 0 auto var(--s-3); color: var(--ink-soft); font-size: var(--t-small); }
.shm-note-link { font-size: var(--t-small); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .shm-grid-styles, .shm-grid-colls { grid-template-columns: repeat(2, 1fr); }
  .shm-insp-grid, .shm-vars-grid { grid-template-columns: repeat(3, 1fr); }
  .shm-pers-grid { grid-template-columns: repeat(3, 1fr); }
  .shm-forms-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .shm-chars { grid-template-columns: repeat(2, 1fr); }
  .shm-insp-grid, .shm-vars-grid, .shm-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .shm-grid-styles, .shm-grid-colls { grid-template-columns: 1fr; }
  .shm-insp-grid, .shm-vars-grid, .shm-related-grid { grid-template-columns: 1fr; }
  .shm-pers-grid, .shm-chars { grid-template-columns: 1fr 1fr; }
  .shm-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--s-2); -webkit-overflow-scrolling: touch; }
  .shm-filter { flex: 0 0 auto; }
  .shm-lbox { padding: var(--s-2); }
  .shm-lbox-img { max-height: 52vh; }
  .shm-lbox-prev { left: 2px; }
  .shm-lbox-next { right: 2px; }
  .shm-cta-row { flex-direction: column; gap: var(--s-4); }
}
@media (max-width: 400px) {
  .shm-pers-grid, .shm-chars { grid-template-columns: 1fr; }
  .shm-forms-grid { grid-template-columns: 1fr; }
}

/* — Motion preferences — */
@media (prefers-reduced-motion: reduce) {
  .shm-card, .shm-insp-card, .shm-rel, .shm-card .arw, .shm-filter, .shm-form { transition: none; }
  .shm-card:hover, .shm-insp-card:hover, .shm-rel:hover { transform: none; }
}