/* Beyond Care v100 — site-wide paper-integrated artwork treatment.
   IMPORTANT: visual blending only. This file must not change image/container geometry. */
:root{
  --bc-image-paper:var(--paper,var(--org-paper,var(--bc63-paper,var(--bg,#f7f1e8))));
}

/* Functional imagery must stay crisp and unaffected. */
img[alt*="QR code"],
img[data-no-blend],
.bc-no-blend,
.user-avatar img,
.avatar img,
.profile-avatar img,
img[src*="avatar"],
img[src*="logo"]{
  mix-blend-mode:normal!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:none!important;
}

/* The packaged Beyond Care illustrations now contain real transparency in the
   paper-coloured areas. Multiply makes the remaining graphite/ink feel printed
   into the page without introducing a visible image rectangle. */
img[src*="/assets/home/approved-home-hero"],
img[src*="/assets/home/reference/"],
img[src*="/assets/courses/"],
img[src*="accessibility-hero"]{
  background:transparent!important;
  mix-blend-mode:multiply!important;
}

/* Existing transparent SVG editorial drawings already integrate naturally. */
img[src*="/assets/editorial/"]{
  background:transparent!important;
  mix-blend-mode:multiply!important;
}

/* Any other editorial/user-supplied image gets a gentle perimeter feather.
   This affects pixels only; it does not alter position, size, display or flow. */
body img:not([src*="/assets/home/approved-home-hero"]):not([src*="/assets/home/reference/"]):not([src*="/assets/courses/"]):not([src*="/assets/editorial/"]):not([src*="accessibility-hero"]):not([data-no-blend]):not([alt*="QR code"]):not([src*="avatar"]):not([src*="logo"]){
  background:transparent!important;
  mix-blend-mode:multiply!important;
  -webkit-mask-image:radial-gradient(ellipse 108% 104% at 50% 50%,#000 0 72%,rgba(0,0,0,.98) 82%,rgba(0,0,0,.72) 91%,transparent 100%)!important;
  mask-image:radial-gradient(ellipse 108% 104% at 50% 50%,#000 0 72%,rgba(0,0,0,.98) 82%,rgba(0,0,0,.72) 91%,transparent 100%)!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
}

/* No container positioning, sizing, overflow or pseudo-element overlays here.
   Those belong to each page's layout CSS and must remain untouched. */
.course-image-figure{background:transparent!important}
.bc63-public-visual,.unit-hero.has-image{background-blend-mode:multiply!important}