/* Courthouse Locations (/About-the-Court/Courthouse-Locations) — closure watermark only.
   Loaded ONLY by that page's @section Styles, and both rules are scoped to the .chl-closed
   marker class, which is applied to exactly one card (Miami Beach Branch Courthouse). Nothing
   here can reach .photo-card / .photo-card-image on any other page.

   Deliberately NOT changed: the shared .photo-card and .photo-card-image rules in site.css.
   .photo-card-image already sets overflow:hidden, so the rotated band is clipped to the card's
   rounded corners without any extra work; it only needs a positioning context, which is added
   here on the marker class rather than on the shared rule. */

.photo-card-image.chl-closed {
    position: relative;
}

/* Diagonal band across the photo. pointer-events:none keeps the whole card clickable — the
   card is a single <a>, and a covering element would otherwise swallow clicks near the middle. */
.chl-closed-watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    transform-origin: center;
    width: 150%;
    padding: 0.35rem 0;
    text-align: center;
    pointer-events: none;

    background: rgba(192, 57, 43, 0.85);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* The card lifts on hover; keep the band pinned to the photo rather than re-animating it. */
@media (prefers-reduced-motion: reduce) {
    .chl-closed-watermark { transition: none; }
}