/* Deceased-figure treatment: greyscale card/photo + a birth-death banner
   overlay. Kept as its own file, not merged into app.min.css, because
   app.min.css is a precompiled Tailwind build with no build pipeline on
   this server - arbitrary utility classes like .grayscale are purged out
   and cannot be added without rebuilding it. Positioning classes used in
   the markup (relative/absolute/rounded-full/w-32/h-32/mx-auto etc.) are
   the ones already compiled in; only the rules below are custom. */

.ar-deceased-card {
    filter: grayscale(1);
}

.ar-deceased-banner {
    background: rgba(31, 41, 55, 0.94);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    padding: 5px 8px;
    line-height: 1.2;
}

.ar-deceased-photo-wrap {
    width: 8rem; /* matches the w-32 photo */
    margin: 0 auto;
}

/* Sits BELOW the photo, not over it — an earlier version centered this over
   the photo itself (top:50%/translateY(-50%)) and it covered the person's
   whole face, making a real, loading photo look "missing". A caption under
   the photo still reads as clearly attached to it without hiding it. */
.ar-deceased-banner-lg {
    margin-top: 0.5rem;
    background: rgba(31, 41, 55, 0.94);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    padding: 6px 8px;
    line-height: 1.3;
    border-radius: 0.375rem;
}