/* In Loving Memory — home page section. Palette matches nboc.css (:root vars). */
.memorial-section{background:var(--dark);padding:90px 0;position:relative;overflow:hidden;}
.memorial-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(122,0,0,0.16),transparent 65%);pointer-events:none;}
.memorial-inner{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1;}
.memorial-head{text-align:center;margin-bottom:52px;}
.memorial-page{padding:56px 0 90px;}
.memorial-preview-note{text-align:center;margin:0 auto 28px;max-width:420px;padding:8px 14px;border:1px dashed var(--gold);border-radius:4px;color:var(--gold-light);font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;}
.memorial-empty{text-align:center;color:var(--muted);font-family:'Cormorant Garamond',serif;font-size:20px;font-style:italic;}

.memorial-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px;}
.memorial-grid .m-frame{width:280px;max-width:100%;}

/* Name-only frame (no photo): compact, cross + name */
.memorial-grid .m-frame.m-nophoto{width:240px;}
.m-nophoto .m-inner{padding:26px 18px 28px;}
.m-nophoto .m-cross svg{width:40px;height:40px;}
.m-nophoto .m-cross{margin-bottom:14px;}

/* Outer frame — deep crimson-brown with a gold gradient rim */
.m-frame{background:linear-gradient(160deg,#1c0303,#2e0808);border-radius:14px;padding:6px;position:relative;box-shadow:0 18px 40px rgba(0,0,0,0.55);display:flex;}
.m-frame::before{
  content:'';position:absolute;inset:0;border-radius:14px;border:3px solid transparent;
  background:linear-gradient(135deg,var(--gold-dark),var(--gold-light),var(--gold),var(--gold-dark),var(--gold-light),var(--gold)) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;mask-composite:exclude;pointer-events:none;
}

/* Inner frame */
.m-inner{background:linear-gradient(160deg,var(--dark2),var(--dark3));border-radius:10px;padding:18px 18px 22px;border:1.5px solid var(--gold);position:relative;flex:1;min-width:0;}
.m-inner::before,.m-inner::after,.m-corner-bl,.m-corner-br{content:'';position:absolute;width:20px;height:20px;border-color:var(--gold);border-style:solid;pointer-events:none;}
.m-inner::before{top:8px;left:8px;border-width:2px 0 0 2px;border-radius:2px 0 0 0;}
.m-inner::after{top:8px;right:8px;border-width:2px 2px 0 0;border-radius:0 2px 0 0;}
.m-corner-bl,.m-corner-br{bottom:8px;}
.m-corner-bl{left:8px;border-width:0 0 2px 2px;border-radius:0 0 0 2px;}
.m-corner-br{right:8px;border-width:0 2px 2px 0;border-radius:0 0 2px 0;}

.m-cross{text-align:center;margin-bottom:10px;}
.m-cross svg{width:28px;height:28px;}

/* Photo */
.m-photo{width:100%;aspect-ratio:3/4;border:1.5px solid var(--gold);border-radius:6px;overflow:hidden;background:var(--dark);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.m-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.m-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0.3;pointer-events:none;}
.m-placeholder svg{width:48px;height:48px;}
.m-placeholder span{font-family:'Cinzel',serif;color:var(--gold);font-size:10px;letter-spacing:0.25em;text-transform:uppercase;}

/* Ornamental divider */
.m-divider{display:flex;align-items:center;gap:8px;margin:8px 0 10px;}
.m-divider-line{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);}
.m-divider-diamond{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex-shrink:0;}

.m-label{font-family:'Cinzel',serif;text-align:center;color:var(--gold-light);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;opacity:0.9;margin-bottom:10px;}

/* Name plate */
.m-plate{background:#080403;border:1.5px solid var(--gold);border-radius:5px;padding:12px 10px 10px;text-align:center;position:relative;}
.m-plate::before{content:'';position:absolute;inset:3px;border:1px solid var(--gold-dark);border-radius:3px;pointer-events:none;}
.m-name{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;line-height:1.15;letter-spacing:0.04em;margin-bottom:4px;word-break:break-word;
  background:linear-gradient(to right,var(--gold-dark),var(--gold-light),var(--gold),var(--gold-dark));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);}
.m-name-divider{height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);margin:6px 12px;}
.m-dates{font-family:'Cinzel',serif;font-size:11px;color:var(--gold);letter-spacing:0.14em;opacity:0.8;}


/* Density tiers — JS adds m-md (7-12 people) or m-sm (13+) so big lists stay compact */
.memorial-grid.m-md{gap:18px;}
.memorial-grid.m-md .m-frame,.memorial-grid.m-md .m-frame.m-nophoto{width:190px;}
.m-md .m-frame{padding:5px;border-radius:12px;}
.m-md .m-inner{padding:12px 12px 14px;}
.m-md .m-inner::before,.m-md .m-inner::after,.m-md .m-corner-bl,.m-md .m-corner-br{width:14px;height:14px;top:auto;}
.m-md .m-inner::before,.m-md .m-inner::after{top:6px;}
.m-md .m-corner-bl,.m-md .m-corner-br{bottom:6px;}
.m-md .m-cross svg{width:20px;height:20px;}
.m-md .m-cross{margin-bottom:8px;}
.m-md .m-photo{margin-bottom:8px;}
.m-md .m-divider{margin:4px 0 8px;}
.m-md .m-plate{padding:8px 6px 7px;}
.m-md .m-name{font-size:17px;}
.m-md .m-dates{font-size:9px;letter-spacing:0.1em;}
.m-md .m-nophoto .m-inner{padding:16px 12px 16px;}
.m-md .m-nophoto .m-cross svg{width:26px;height:26px;}

.memorial-grid.m-sm{gap:12px;}
.memorial-grid.m-sm .m-frame,.memorial-grid.m-sm .m-frame.m-nophoto{width:140px;}
.m-sm .m-frame{padding:4px;border-radius:10px;}
.m-sm .m-inner{padding:9px 8px 10px;border-width:1px;}
.m-sm .m-inner::before,.m-sm .m-inner::after,.m-sm .m-corner-bl,.m-sm .m-corner-br{width:9px;height:9px;}
.m-sm .m-inner::before,.m-sm .m-inner::after{top:4px;}
.m-sm .m-inner::before{left:4px;}.m-sm .m-inner::after{right:4px;}
.m-sm .m-corner-bl,.m-sm .m-corner-br{bottom:4px;}
.m-sm .m-corner-bl{left:4px;}.m-sm .m-corner-br{right:4px;}
.m-sm .m-cross svg{width:14px;height:14px;}
.m-sm .m-cross{margin-bottom:6px;}
.m-sm .m-photo{margin-bottom:6px;border-width:1px;}
.m-sm .m-divider{margin:2px 0 6px;}
.m-sm .m-divider-diamond{width:5px;height:5px;}
.m-sm .m-plate{padding:6px 4px 5px;border-width:1px;}
.m-sm .m-plate::before{inset:2px;}
.m-sm .m-name{font-size:14px;margin-bottom:2px;}
.m-sm .m-name-divider{margin:3px 8px;}
.m-sm .m-dates{font-size:8px;letter-spacing:0.06em;}
.m-sm .m-nophoto .m-inner{padding:12px 8px 12px;}
.m-sm .m-nophoto .m-cross svg{width:18px;height:18px;}

@media(max-width:560px){
  .memorial-section{padding:64px 0;}
  .memorial-grid .m-frame,.memorial-grid .m-frame.m-nophoto{width:100%;max-width:320px;}
  .memorial-grid.m-md,.memorial-grid.m-sm{gap:10px;}
  .memorial-grid.m-md .m-frame,.memorial-grid.m-md .m-frame.m-nophoto,.memorial-grid.m-sm .m-frame,.memorial-grid.m-sm .m-frame.m-nophoto{width:calc(50% - 5px);max-width:none;}
}