/* --- Image & card helpers --- */
.figure{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:1rem;padding:.75rem;margin:1.25rem 0;}
.figure img{border-radius:.5rem;width:100%;height:auto;display:block;}
.figure figcaption{font-size:.85rem;color:var(--muted);margin-top:.5rem}
/* Card image backgrounds — upgraded readability */
.card-bg { position: relative; overflow: hidden; border-radius: 1rem; }

/* Base dark scrim across the whole image */
.card-bg::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.40);           /* was ~.20–.38; now stronger */
  z-index: 0; transition: opacity .25s;
}

/* Bottom gradient where text lives (deepens contrast near captions) */
.card-bg::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 65%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.85) 100%);
  z-index: 0; pointer-events: none;
}

.card-bg .content { position: relative; z-index: 1; }

/* Gentle text glow so white type pops without looking cheesy */
.card-bg .content .font-display,
.card-bg .content .text-white,
.card-bg .content .text-[var(--muted)] {
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* Nice hover: image a touch brighter; overlays ease down slightly */
.card-bg:hover::before { opacity: .35; }   /* was .40 */
.card-bg:hover::after  { opacity: .95; }

.bg-cover-center { background-size: cover; background-position: center; }