/* ============================================================
   Photo utility. Photos are Pexels CDN URLs set as background-image
   on a .img box, so cropping is handled by background-size/position
   rather than by the file.
   ============================================================ */
.img {
  position: relative; overflow: hidden;
  background-size: cover; background-position: center;
  background-color: var(--wx8-panel);
  border-radius: var(--wx8-r-card);
}
/* A hair of darkening so white text keeps its footing on a bright frame. */
.img::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.10); pointer-events: none; }

.img.square  { aspect-ratio: 1; }
.img.circle  { border-radius: var(--radius-circle); aspect-ratio: 1; }
.img.rect    { border-radius: 0; }
.img.soft    { border-radius: var(--wx8-r-card-sm); }
.img.panel-r { border-radius: var(--wx8-r-panel); }
.img.pill    { border-radius: var(--wx8-r-pill); }
.img.bleed   { border-radius: 0; }

/* Full-bleed backdrop behind an overlay. */
.img-full { position: absolute; inset: 0; border-radius: 0; }
.img-full::after { background: rgba(0,0,0,0.30); }
.img-full.dim::after   { background: rgba(11,11,11,0.62); }
.img-full.dim-2::after { background: linear-gradient(180deg, rgba(11,11,11,0.30) 0%, rgba(11,11,11,0.86) 72%); }

/* Brand wash: pushes a photo toward the orange without going full duotone. */
.img.warm::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, rgba(255,61,0,0.55) 0%, rgba(255,176,58,0.22) 55%, rgba(11,11,11,0.35) 100%);
  mix-blend-mode: multiply;
}

.img-cap {
  position: absolute; left: 24px; bottom: 24px; z-index: 2;
  background: rgba(11,11,11,0.72); color: #fff;
  font-size: 18px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 18px; border-radius: var(--wx8-r-pill);
}